diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index 0df305ddc..ec531e6b0 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -144,6 +144,10 @@
                 padding: @alertify_padding-base;
                 background: #fff;
                 box-shadow: @alertify_box-shadow;
+                &.wide {
+                    width: 1000px;
+                    max-width: 70%;
+                }
             }
 
             .msg {
diff --git a/customize.dist/src/less2/include/share.less b/customize.dist/src/less2/include/share.less
new file mode 100644
index 000000000..27ac28046
--- /dev/null
+++ b/customize.dist/src/less2/include/share.less
@@ -0,0 +1,83 @@
+@import (reference) "./colortheme-all.less";
+@import (reference) './modal.less';
+@import (reference) './alertify.less';
+@import (reference) './avatar.less';
+@import (reference) './checkmark.less';
+@import (reference) './password-input.less';
+.share_main () {
+    .alertify_main();
+    .checkmark_main(20px);
+    .password_main();
+    .modal_main();
+
+    .cp-share-columns {
+        display: flex;
+        flex-flow: row;
+
+        .cp-share-column {
+            width: 50%;
+            padding: 0 10px;
+        }
+    }
+    .cp-share-grid, .cp-share-list {
+        .avatar_main(50px);
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .cp-share-list {
+        margin-bottom: 15px;
+    }
+    .cp-share-grid {
+        max-height: 228px;
+        overflow-x: auto;
+    }
+    .cp-recent-only {
+        .cp-share-grid, .cp-share-grid-filter {
+            display: none;
+        }
+    }
+    .cp-share-grid-filter {
+        display: flex;
+        input {
+            flex: 1;
+            margin-bottom: 0 !important;
+            &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+                color: @colortheme_alertify-primary-text;
+                opacity: 1; /* Firefox */
+            }
+        }
+        margin-bottom: 15px;
+    }
+    .cp-share-friend {
+        width: 70px;
+        height: 70px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin-bottom: 6px;
+        cursor: default;
+        transition: order 0.5s, background-color 0.5s;
+
+        &.cp-selected {
+            background-color: @colortheme_alertify-primary;
+            color: @colortheme_alertify-primary-text;
+            order: -1 !important;
+        }
+        .cp-share-friend-name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width: 100%;
+            text-align: center;
+        }
+        border: 1px solid @colortheme_alertify-primary;
+        &.cp-fake-friend {
+            visibility: hidden;
+        }
+    }
+}
+
+
diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css
new file mode 100644
index 000000000..b36fb2c10
--- /dev/null
+++ b/customize.dist/src/outer.css
@@ -0,0 +1,15 @@
+html, body {
+    margin: 0px;
+    padding: 0px;
+}
+#sbox-iframe, #sbox-share-iframe, #sbox-filePicker-iframe {
+    position: fixed;
+    top:0; left:0;
+    bottom:0; right:0;
+    width:100%;
+    height: 100%;
+    border: 0;
+    margin:0;
+    padding:0;
+    overflow:hidden;
+}
diff --git a/www/admin/index.html b/www/admin/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/admin/index.html
+++ b/www/admin/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/code/index.html b/www/code/index.html
index 7ea06cdfc..dd4b97b3b 100644
--- a/www/code/index.html
+++ b/www/code/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 56e2d8d3a..77f7b315f 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -156,12 +156,14 @@ define([
         ]);
     };
 
-    dialog.frame = function (content) {
+    dialog.frame = function (content, opt) {
+        opt = opt || {};
+        var cls = opt.wide ? '.wide' : '';
         return $(h('div.alertify', {
             tabindex: 1,
         }, [
             h('div.dialog', [
-                h('div', content),
+                h('div'+cls, content),
             ])
         ])).click(function (e) {
             e.stopPropagation();
@@ -351,6 +353,9 @@ define([
         var close = function (el) {
             var $el = $(el).fadeOut(150, function () {
                 $el.detach();
+                if (opt.onClose) {
+                    opt.onClose();
+                }
             });
         };
 
@@ -373,10 +378,10 @@ define([
         if (opt.forefront) { $(frame).addClass('forefront'); }
         return frame;
     };
-    UI.openCustomModal = function (content) {
+    UI.openCustomModal = function (content, opt) {
         var frame = dialog.frame([
             content
-        ]);
+        ], opt);
         $(frame).find('button[data-keys]').each(function (i, el) {
             var keys = JSON.parse($(el).attr('data-keys'));
             customListenForKeys(keys, function () {
diff --git a/www/common/common-messaging.js b/www/common/common-messaging.js
index d8cf76c43..3e673b1e9 100644
--- a/www/common/common-messaging.js
+++ b/www/common/common-messaging.js
@@ -78,5 +78,27 @@ define([
         });
     };
 
+    Msg.updateMyData = function (store, curve) {
+        if (store.messenger) {
+            store.messenger.updateMyData();
+        }
+        var myData = createData(store.proxy);
+        var todo = function (friend) {
+            if (!friend || !friend.notifications) { return; }
+            myData.channel = friend.channel;
+            store.mailbox.sendTo('UPDATE_DATA', myData, {
+                channel: friend.notifications,
+                curvePublic: friend.curvePublic
+            }, function (obj) {
+                if (obj && obj.error) { console.error(obj); }
+            });
+        };
+        if (curve) {
+            var friend = getFriend(store.proxy, curve);
+            return void todo(friend);
+        }
+        eachFriend(store.proxy.friends || {}, todo);
+    };
+
     return Msg;
 });
diff --git a/www/common/common-messenger.js b/www/common/common-messenger.js
index 05ebfea54..6b9784913 100644
--- a/www/common/common-messenger.js
+++ b/www/common/common-messenger.js
@@ -44,6 +44,7 @@ define([
             profile: proxy.profile && proxy.profile.view,
             edPublic: proxy.edPublic,
             curvePublic: proxy.curvePublic,
+            notifications: Util.find(proxy, ['mailboxes', 'notifications', 'channel']),
             avatar: proxy.profile && proxy.profile.avatar
         };
     };
@@ -611,6 +612,15 @@ define([
                             cb();
                         });
                     });
+                } else {
+                    removeFromFriendList(curvePublic, function () {
+                        delete channels[channel.id];
+                        emit('UNFRIEND', {
+                            curvePublic: curvePublic,
+                            fromMe: true
+                        });
+                        cb();
+                    });
                 }
                 channel.wc.bcast(cryptMsg).then(function () {}, function (err) {
                     console.error(err);
diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js
index 767b0e92a..2a03715cd 100644
--- a/www/common/common-thumbnail.js
+++ b/www/common/common-thumbnail.js
@@ -205,7 +205,7 @@ define([
             if (content === oldThumbnailState) { return; }
             oldThumbnailState = content;
             Thumb.fromDOM(opts, function (err, b64) {
-                Thumb.setPadThumbnail(common, opts.href, null, b64);
+                Thumb.setPadThumbnail(common, opts.type, null, b64);
             });
         };
         var nafa = Util.notAgainForAnother(mkThumbnail, Thumb.UPDATE_INTERVAL);
@@ -243,11 +243,10 @@ define([
     var getKey = function (type, channel) {
         return 'thumbnail-' + type + '-' + channel;
     };
-    Thumb.setPadThumbnail = function (common, href, channel, b64, cb) {
+    Thumb.setPadThumbnail = function (common, type, channel, b64, cb) {
         cb = cb || function () {};
-        var parsed = Hash.parsePadUrl(href);
         channel = channel || common.getMetadataMgr().getPrivateData().channel;
-        var k = getKey(parsed.type, channel);
+        var k = getKey(type, channel);
         common.setThumbnail(k, b64, cb);
     };
     Thumb.displayThumbnail = function (common, href, channel, password, $container, cb) {
@@ -270,7 +269,7 @@ define([
                 if (!v) {
                     v = 'EMPTY';
                 }
-                Thumb.setPadThumbnail(common, href, hexFileName, v, function (err) {
+                Thumb.setPadThumbnail(common, parsed.type, hexFileName, v, function (err) {
                     if (!metadata.thumbnail) { return; }
                     addThumbnail(err, metadata.thumbnail, $container, cb);
                 });
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 463108671..5b237f942 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -316,39 +316,209 @@ define([
         });
     };
 
+    var getFriendsList = function (config) {
+        var common = config.common;
+        var title = config.title;
+        var friends = config.friends;
+        var myName = common.getMetadataMgr().getUserData().name;
+        var order = [];
+        if (!friends) { return; }
+
+        var others = Object.keys(friends).map(function (curve, i) {
+            if (curve.length <= 40) { return; }
+            var data = friends[curve];
+            if (!data.notifications) { return; }
+            var avatar = h('span.cp-share-friend-avatar.cp-avatar');
+            UIElements.displayAvatar(common, $(avatar), data.avatar, data.displayName);
+            return h('div.cp-share-friend', {
+                'data-curve': data.curvePublic,
+                'data-name': data.displayName,
+                'data-order': i,
+                style: 'order:'+i+';'
+            },[
+                avatar,
+                h('span.cp-share-friend-name', data.displayName)
+            ]);
+        }).filter(function (x) { return x; });
+        var smallCurves = Object.keys(friends).map(function (c) {
+            return friends[c].curvePublic.slice(0,8);
+        });
+
+        var noOthers = others.length === 0 ? '.cp-recent-only' : '';
+
+        var buttonSelect = h('button.cp-share-with-friends', Messages.share_selectAll);
+        var buttonDeselect = h('button.cp-share-with-friends', Messages.share_deselectAll);
+        var inputFilter = h('input', {
+            placeholder: Messages.share_filterFriend
+        });
+
+        var div = h('div.cp-share-friends.cp-share-column' + noOthers, [
+            h('label', Messages.share_linkFriends),
+            h('div.cp-share-grid-filter', [
+                inputFilter,
+                buttonSelect,
+                buttonDeselect
+            ]),
+        ]);
+        var $div = $(div);
+
+        // Fill with fake friends to have a uniform spacing (from the flexbox)
+        var addFake = function (els) {
+            $div.find('.cp-fake-friend').remove();
+            var n = (6 - els.length%6)%6;
+            for (var j = 0; j < n; j++) {
+                els.push(h('div.cp-share-friend.cp-fake-friend', {
+                    style: 'order:9999999;'
+                }));
+            }
+        };
+        addFake(others);
+
+        // Hide friends when they are filtered using the text input
+        var redraw = function () {
+            var name = $(inputFilter).val().trim().replace(/"/g, '');
+            $div.find('.cp-share-friend').show();
+            if (!name) { return; }
+            $div.find('.cp-share-friend:not(.cp-selected):not([data-name*="'+name+'"])').hide();
+        };
+
+        $(inputFilter).on('keydown keyup change', redraw);
+        $(buttonSelect).click(function () {
+            $div.find('.cp-share-friend:not(.cp-selected):visible').addClass('cp-selected');
+        });
+        $(buttonDeselect).click(function () {
+            $div.find('.cp-share-friend.cp-selected').removeClass('cp-selected').each(function (i, el) {
+                var order = $(el).attr('data-order');
+                if (!order) { return; }
+                $(el).attr('style', 'order:'+order);
+            });
+            redraw();
+        });
+
+        // Replace "copy link" by "share with friends" if at least one friedn is selected
+        // Also create the "share with friends" button if it doesn't exist
+        var refreshButtons = function () {
+            var $nav = $div.parents('.alertify').find('nav');
+            if (!$nav.find('.cp-share-with-friends').length) {
+                var button = h('button.primary.cp-share-with-friends', {
+                    'data-keys': '[13]'
+                }, Messages.share_withFriends);
+                $(button).click(function () {
+                    var href = Hash.getRelativeHref($('#cp-share-link-preview').val());
+                    var $friends = $div.find('.cp-share-friend.cp-selected');
+                    $friends.each(function (i, el) {
+                        var curve = $(el).attr('data-curve');
+                        if (!curve || !friends[curve]) { return; }
+                        var friend = friends[curve];
+                        if (!friend.notifications || !friend.curvePublic) { return; }
+                        common.mailbox.sendTo("SHARE_PAD", {
+                            href: href,
+                            name: myName,
+                            title: title
+                        }, {
+                            channel: friend.notifications,
+                            curvePublic: friend.curvePublic
+                        });
+                    });
+
+                    UI.findCancelButton().click();
+
+                    // Update the "recently shared with" array:
+                    // Get the selected curves
+                    var curves = $friends.toArray().map(function (el) {
+                        return ($(el).attr('data-curve') || '').slice(0,8);
+                    }).filter(function (x) { return x; });
+                    // Prepend them to the "order" array
+                    Array.prototype.unshift.apply(order, curves);
+                    order = Util.deduplicateString(order);
+                    // Make sure we don't have "old" friends and save
+                    order = order.filter(function (curve) {
+                        return smallCurves.indexOf(curve) !== -1;
+                    });
+                    common.setAttribute(['general', 'share-friends'], order);
+                });
+                $nav.append(button);
+            }
+
+            var friendMode = $div.find('.cp-share-friend.cp-selected').length;
+            if (friendMode) {
+                $nav.find('button.primary[data-keys]').hide();
+                $nav.find('button.cp-share-with-friends').show();
+            } else {
+                $nav.find('button.primary[data-keys]').show();
+                $nav.find('button.cp-share-with-friends').hide();
+            }
+        };
+
+
+        common.getAttribute(['general', 'share-friends'], function (err, val) {
+            order = val || [];
+            // Sort friends by "recently shared with"
+            others.sort(function (a, b) {
+                var ca = ($(a).attr('data-curve') || '').slice(0,8);
+                var cb = ($(b).attr('data-curve') || '').slice(0,8);
+                if (!ca && !cb) { return 0; }
+                if (!ca) { return 1; }
+                if (!cb) { return -1; }
+                var ia = order.indexOf(ca);
+                var ib = order.indexOf(cb);
+                if (ia === -1 && ib === -1) { return 0; }
+                if (ia === -1) { return 1; }
+                if (ib === -1) { return -1; }
+                return ia - ib;
+            });
+            // Reorder the friend icons
+            others.forEach(function (el, i) {
+                if ($(el).is('.cp-fake-friend')) { return; }
+                $(el).attr('data-order', i).css('order', i);
+            });
+            // Display them
+            $div.append(h('div.cp-share-grid', others));
+            $div.find('.cp-share-friend').click(function () {
+                var sel = $(this).hasClass('cp-selected');
+                if (!sel) {
+                    $(this).addClass('cp-selected');
+                } else {
+                    var order = $(this).attr('data-order');
+                    order = order ? 'order:'+order : '';
+                    $(this).removeClass('cp-selected').attr('style', order);
+                }
+                refreshButtons();
+            });
+        });
+        return div;
+    };
+
     UIElements.createShareModal = function (config) {
         var origin = config.origin;
         var pathname = config.pathname;
         var hashes = config.hashes;
         var common = config.common;
 
+        if (!hashes) { return; }
+
         // Share link tab
-        var link = h('div.cp-share-modal', [
-            h('label', Messages.share_linkAccess),
-            h('br'),
-            UI.createRadio('cp-share-editable', 'cp-share-editable-true',
-                           Messages.share_linkEdit, true, { mark: {tabindex:1} }),
-            UI.createRadio('cp-share-editable', 'cp-share-editable-false',
-                           Messages.share_linkView, false, { mark: {tabindex:1} }),
-            /*h('input#cp-share-editable-true.cp-share-editable-value', {
-                type: 'radio',
-                name: 'cp-share-editable',
-                value: 1,
-            }),
-            h('label', { 'for': 'cp-share-editable-true' }, Messages.share_linkEdit),
-            h('input#cp-share-editable-false.cp-share-editable-value', {
-                type: 'radio',
-                name: 'cp-share-editable',
-                value: 0
-            }),
-            h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
-            h('br'),
-            h('label', Messages.share_linkOptions),
-            h('br'),
-            UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
-            UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
-            h('br'),
-            UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
+        var hasFriends = Object.keys(config.friends || {}).length !== 0;
+        var friendsList = hasFriends ? getFriendsList(config) : undefined;
+        var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
+        var link = h('div.cp-share-modal' + friendsUIClass, [
+            h('div.cp-share-column', [
+                hasFriends ? h('p', Messages.share_description) : undefined,
+                h('label', Messages.share_linkAccess),
+                h('br'),
+                UI.createRadio('cp-share-editable', 'cp-share-editable-true',
+                               Messages.share_linkEdit, true, { mark: {tabindex:1} }),
+                UI.createRadio('cp-share-editable', 'cp-share-editable-false',
+                               Messages.share_linkView, false, { mark: {tabindex:1} }),
+                h('br'),
+                h('label', Messages.share_linkOptions),
+                h('br'),
+                UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
+                UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
+                h('br'),
+                UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 }),
+            ]),
+            friendsList
         ]);
         if (!hashes.editHash) {
             $(link).find('#cp-share-editable-false').attr('checked', true);
@@ -380,6 +550,7 @@ define([
             $(link).find('#cp-share-link-preview').val(getLinkValue());
         });
         var linkButtons = [{
+            className: 'cancel',
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
@@ -403,7 +574,10 @@ define([
             },
             keys: [[13, 'ctrl']]
         }];
-        var frameLink = UI.dialog.customModal(link, {buttons: linkButtons});
+        var frameLink = UI.dialog.customModal(link, {
+            buttons: linkButtons,
+            onClose: config.onClose,
+        });
 
         // Embed tab
         var getEmbedValue = function () {
@@ -420,6 +594,7 @@ define([
             UI.dialog.selectable(getEmbedValue())
         ]);
         var embedButtons = [{
+            className: 'cancel',
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
@@ -433,7 +608,10 @@ define([
             },
             keys: [13]
         }];
-        var frameEmbed = UI.dialog.customModal(embed, { buttons: embedButtons});
+        var frameEmbed = UI.dialog.customModal(embed, {
+            buttons: embedButtons,
+            onClose: config.onClose,
+        });
 
         // Create modal
         var tabs = [{
@@ -464,7 +642,9 @@ define([
             $(link).find('#cp-share-link-preview').val(getLinkValue(val));
         });
         common.getMetadataMgr().onChange(function () {
-            hashes = common.getMetadataMgr().getPrivateData().availableHashes;
+            // "hashes" is only available is the secure "share" app
+            hashes = common.getMetadataMgr().getPrivateData().hashes;
+            if (!hashes) { return; }
             $(link).find('#cp-share-link-preview').val(getLinkValue());
         });
         return tabs;
@@ -481,12 +661,20 @@ define([
 
 
         // Share link tab
-        var link = h('div.cp-share-modal', [
-            UI.dialog.selectable('', { id: 'cp-share-link-preview' })
+        var hasFriends = Object.keys(config.friends || {}).length !== 0;
+        var friendsList = hasFriends ? getFriendsList(config) : undefined;
+        var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
+        var link = h('div.cp-share-modal' + friendsUIClass, [
+            h('div.cp-share-column', [
+                hasFriends ? h('p', Messages.share_description) : undefined,
+                UI.dialog.selectable('', { id: 'cp-share-link-preview' }),
+            ]),
+            friendsList
         ]);
         var getLinkValue = function () { return url; };
         $(link).find('#cp-share-link-preview').val(getLinkValue());
         var linkButtons = [{
+            className: 'cancel',
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
@@ -513,6 +701,7 @@ define([
             UI.dialog.selectable(common.getMediatagFromHref(fileData)),
         ]);
         var embedButtons = [{
+            className: 'cancel',
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
@@ -554,12 +743,20 @@ define([
         var url = origin + pathname + '#' + hashes.editHash;
 
         // Share link tab
-        var link = h('div.cp-share-modal', [
-            h('label', Messages.sharedFolders_share),
-            h('br'),
-            UI.dialog.selectable(url, { id: 'cp-share-link-preview', tabindex: 1 })
+        var hasFriends = Object.keys(config.friends || {}).length !== 0;
+        var friendsList = hasFriends ? getFriendsList(config) : undefined;
+        var friendsUIClass = hasFriends ? '.cp-share-columns' : '';
+        var link = h('div.cp-share-modal' + friendsUIClass, [
+            h('div.cp-share-column', [
+                h('label', Messages.sharedFolders_share),
+                h('br'),
+                hasFriends ? h('p', Messages.share_description) : undefined,
+                UI.dialog.selectable(url, { id: 'cp-share-link-preview', tabindex: 1 })
+            ]),
+            friendsList
         ]);
         var linkButtons = [{
+            className: 'cancel',
             name: Messages.cancel,
             onClick: function () {},
             keys: [27]
diff --git a/www/common/migrate-user-object.js b/www/common/migrate-user-object.js
index 4c6e38d85..fa55f756a 100644
--- a/www/common/migrate-user-object.js
+++ b/www/common/migrate-user-object.js
@@ -1,15 +1,19 @@
 define([
+    '/customize/application_config.js',
     '/common/common-feedback.js',
     '/common/common-hash.js',
     '/common/common-util.js',
+    '/common/common-messenger.js',
+    '/common/outer/mailbox.js',
     '/bower_components/nthen/index.js',
-], function (Feedback, Hash, Util, nThen) {
+    '/bower_components/chainpad-crypto/crypto.js',
+], function (AppConfig, Feedback, Hash, Util, Messenger, Mailbox, nThen, Crypto) {
     // Start migration check
     // Versions:
     // 1: migrate pad attributes
     // 2: migrate indent settings (codemirror)
 
-    return function (userObject, cb, progress) {
+    return function (userObject, cb, progress, store) {
         var version = userObject.version || 0;
 
         nThen(function () {
@@ -186,6 +190,135 @@ define([
                 Feedback.send('Migrate-8', true);
                 userObject.version = version = 8;
             }
+        }).nThen(function () {
+            if (!AppConfig.migrateFriends) { return; } // XXX
+
+
+            // Migration 9: send our mailbox channel to existing friends
+            var migrateFriends = function () {
+                var network = store.network;
+                var channels = {};
+                var ctx = {
+                    store: store
+                };
+                var myData = Messenger.createData(userObject);
+
+                var close = function (chan) {
+                    var channel = channels[chan];
+                    if (!channel) { return; }
+                    try {
+                        channel.wc.leave();
+                    } catch (e) {}
+                    delete channels[chan];
+                };
+
+                var onDirectMessage = function (msg, sender) {
+                    if (sender !== network.historyKeeper) { return; }
+                    var parsed = JSON.parse(msg);
+
+                    // Metadata msg? we don't care
+                    if ((parsed.validateKey || parsed.owners) && parsed.channel) { return; }
+
+                    // End of history message, "onReady"
+                    if (parsed.channel && channels[parsed.channel]) {
+                        // History cleared while we were offline
+                        // ==> we asked for an invalid last known hash
+                        if (parsed.error && parsed.error === "EINVAL") {
+                            var histMsg = ['GET_HISTORY', parsed.channel, {}];
+                            network.sendto(network.historyKeeper, JSON.stringify(histMsg))
+                              .then(function () {}, function () {});
+                            return;
+                        }
+                        // End of history
+                        if (parsed.state && parsed.state === 1) {
+                            // Channel is ready and we didn't receive their mailbox channel: send our channel
+                            myData.channel = parsed.channel;
+                            var updateMsg = ['UPDATE', myData.curvePublic, +new Date(), myData];
+                            var cryptMsg = channels[parsed.channel].encrypt(JSON.stringify(updateMsg));
+                            channels[parsed.channel].wc.bcast(cryptMsg).then(function () {}, function (err) {
+                                console.error("Can't migrate this friend", channels[parsed.channel].friend, err);
+                            });
+                            close(parsed.channel);
+                            return;
+                        }
+                    } else if (parsed.channel) {
+                        return;
+                    }
+
+                    // History message: we only care about "UPDATE" messages
+                    var chan = parsed[3];
+                    if (!chan || !channels[chan]) { return; }
+                    var channel = channels[chan];
+                    var msgIn = channel.decrypt(parsed[4]);
+                    var parsedMsg = JSON.parse(msgIn);
+                    if (parsedMsg[0] === 'UPDATE') {
+                        if (parsedMsg[1] === myData.curvePublic) { return; }
+                        var data = parsedMsg[3];
+                        // If it doesn't contain the mailbox channel, ignore the message
+                        if (!data.notifications) { return; }
+                        // Otherwise we know their channel, we can send them our own
+                        channel.friend.notifications = data.notifications;
+                        myData.channel = chan;
+                        Mailbox.sendTo(ctx, 'UPDATE_DATA', myData, {
+                            channel: data.notifications,
+                            curvePublic: data.curvePublic
+                        }, function (obj) {
+                            if (obj && obj.error) { return void console.error(obj); }
+                            console.log('friend migrated', channel.friend);
+                        });
+                        close(chan);
+                    }
+                };
+
+                network.on('message', function(msg, sender) {
+                    try {
+                        onDirectMessage(msg, sender);
+                    } catch (e) {
+                        console.error(e);
+                    }
+                });
+
+                var friends = userObject.friends || {};
+                Object.keys(friends).forEach(function (curve) {
+                    if (curve.length !== 44) { return; }
+                    var friend = friends[curve];
+
+                    // Check if it is already a "new" friend
+                    if (friend.notifications) { return; }
+
+                    /** Old friend:
+                     *  1. Open the messenger channel
+                     *  2. Check if they sent us their mailbox channel
+                     *  3.a. Yes ==> sent them a mail containing our mailbox channel
+                     *  3.b. No  ==> post our mailbox data to the messenger channel
+                     */
+                    network.join(friend.channel).then(function (wc) {
+                        var keys = Crypto.Curve.deriveKeys(friend.curvePublic, userObject.curvePrivate);
+                        var encryptor = Crypto.Curve.createEncryptor(keys);
+                        channels[friend.channel] = {
+                            wc: wc,
+                            friend: friend,
+                            decrypt: encryptor.decrypt,
+                            encrypt: encryptor.encrypt
+                        };
+                        var cfg = {
+                            lastKnownHash: friend.lastKnownHash
+                        };
+                        var msg = ['GET_HISTORY', friend.channel, cfg];
+                        network.sendto(network.historyKeeper, JSON.stringify(msg))
+                          .then(function () {}, function (err) {
+                            console.error("Can't migrate this friend", friend, err);
+                        });
+                    }, function (err) {
+                        console.error("Can't migrate this friend", friend, err);
+                    });
+                });
+            };
+            if (version < 9) {
+                migrateFriends();
+                Feedback.send('Migrate-9', true);
+                userObject.version = version = 9;
+            }
         /*}).nThen(function (waitFor) {
             // Test progress bar in the loading screen
             var i = 0;
diff --git a/www/common/notifications.js b/www/common/notifications.js
index dc95fe3d4..136117c6f 100644
--- a/www/common/notifications.js
+++ b/www/common/notifications.js
@@ -1,12 +1,15 @@
 define([
     'jquery',
     '/common/hyperscript.js',
+    '/common/common-hash.js',
     '/common/common-ui-elements.js',
     '/customize/messages.js',
-], function ($, h, UIElements, Messages) {
+], function ($, h, Hash, UIElements, Messages) {
 
     var handlers = {};
 
+    // Friend request
+
     handlers['FRIEND_REQUEST'] = function (common, data, el) {
         var content = data.content;
         var msg = content.msg;
@@ -17,9 +20,9 @@ define([
         common.addFriendRequest(data);
 
         // Display the notification
-        $(el).find('.cp-notification-content').addClass("cp-clickable");
         $(el).find('.cp-notification-content p')
-            .html(Messages._getKey('friendRequest_notification', [msg.content.displayName || Messages.anonymous]))
+            .html(Messages._getKey('friendRequest_notification', [msg.content.displayName || Messages.anonymous]));
+        $(el).find('.cp-notification-content').addClass("cp-clickable")
             .click(function () {
                 UIElements.displayFriendRequestModal(common, data);
             });
@@ -41,6 +44,24 @@ define([
         $(el).find('.cp-notification-dismiss').css('display', 'flex');
     };
 
+    // Share pad
+
+    handlers['SHARE_PAD'] = function (common, data, el) {
+        var content = data.content;
+        var msg = content.msg;
+        var type = Hash.parsePadUrl(msg.content.href).type;
+        var key = type === 'drive' ? 'notification_folderShared' :
+                    (type === 'file' ? 'notification_fileShared' :
+                      'notification_padShared');
+        $(el).find('.cp-notification-content p')
+            .html(Messages._getKey(key, [msg.content.name || Messages.anonymous, msg.content.title]));
+        $(el).find('.cp-notification-content').addClass("cp-clickable")
+            .click(function () {
+                common.openURL(msg.content.href);
+            });
+        $(el).find('.cp-notification-dismiss').css('display', 'flex');
+    };
+
     return {
         add: function (common, data, el) {
             var type = data.content.msg.type;
diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js
index 19b4a4fe4..e1a089144 100644
--- a/www/common/outer/async-store.js
+++ b/www/common/outer/async-store.js
@@ -66,7 +66,7 @@ define([
             }
             broadcast([clientId], "UPDATE_METADATA");
             if (Array.isArray(path) && path[0] === 'profile' && store.messenger) {
-                store.messenger.updateMyData();
+                Messaging.updateMyData(store);
             }
             onSync(cb);
         };
@@ -644,7 +644,7 @@ define([
             }
             store.proxy[Constants.displayNameKey] = value;
             broadcast([clientId], "UPDATE_METADATA");
-            if (store.messenger) { store.messenger.updateMyData(); }
+            Messaging.updateMyData(store);
             onSync(cb);
         };
 
diff --git a/www/common/outer/mailbox-handlers.js b/www/common/outer/mailbox-handlers.js
index 4501aad06..0ab804dcf 100644
--- a/www/common/outer/mailbox-handlers.js
+++ b/www/common/outer/mailbox-handlers.js
@@ -144,8 +144,30 @@ define([
         cb(true);
     };
 
+    handlers['UPDATE_DATA'] = function (ctx, box, data, cb) {
+        var msg = data.msg;
+        var curve = msg.author;
+        var friend = ctx.store.proxy.friends && ctx.store.proxy.friends[curve];
+        if (!friend || typeof msg.content !== "object") { return void cb(true); }
+        Object.keys(msg.content).forEach(function (key) {
+            friend[key] = msg.content[key];
+        });
+        ctx.updateMetadata();
+        cb(true);
+    };
+
     return {
         add: function (ctx, box, data, cb) {
+            /**
+             *  data = {
+                    msg: {
+                        type: 'STRING',
+                        author: 'curvePublicString',
+                        content: {} (depend on the "type")
+                    },
+                    hash: 'string'
+                }
+             */
             if (!data.msg) { return void cb(true); }
             var type = data.msg.type;
 
diff --git a/www/common/outer/mailbox.js b/www/common/outer/mailbox.js
index d2bc41705..550573411 100644
--- a/www/common/outer/mailbox.js
+++ b/www/common/outer/mailbox.js
@@ -65,7 +65,7 @@ proxy.mailboxes = {
     };
 
     // Send a message to someone else
-    var sendTo = function (ctx, type, msg, user, cb) {
+    var sendTo = Mailbox.sendTo = function (ctx, type, msg, user, cb) {
         if (!Crypto.Mailbox) {
             return void cb({error: "chainpad-crypto is outdated and doesn't support mailboxes."});
         }
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 00125e1d5..f1068a6de 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -357,16 +357,14 @@ define([
                 UI.removeLoadingScreen(emitResize);
 
                 var privateDat = cpNfInner.metadataMgr.getPrivateData();
-                var hash = privateDat.availableHashes.editHash ||
-                           privateDat.availableHashes.viewHash;
-                var href = privateDat.pathname + '#' + hash;
+                var type = privateDat.app;
                 if (AppConfig.textAnalyzer && textContentGetter) {
                     AppConfig.textAnalyzer(textContentGetter, privateDat.channel);
                 }
 
                 if (options.thumbnail && privateDat.thumbnails) {
-                    if (hash) {
-                        options.thumbnail.href = href;
+                    if (type) {
+                        options.thumbnail.type = type;
                         options.thumbnail.getContent = function () {
                             if (!cpNfInner.chainpad) { return; }
                             return cpNfInner.chainpad.getUserDoc();
diff --git a/www/common/sframe-common-mailbox.js b/www/common/sframe-common-mailbox.js
index 65d9965c8..4fb088191 100644
--- a/www/common/sframe-common-mailbox.js
+++ b/www/common/sframe-common-mailbox.js
@@ -132,9 +132,14 @@ define([
             });
         };
 
+        var subscribed = false;
 
         // Get all existing notifications + the new ones when they come
         mailbox.subscribe = function (cfg) {
+            if (!subscribed) {
+                execCommand('SUBSCRIBE', null, function () {});
+                subscribed = true;
+            }
             if (typeof(cfg.onViewed) === "function") {
                 onViewedHandlers.push(cfg.onViewed);
             }
@@ -166,10 +171,6 @@ define([
             }
         });
 
-        execCommand('SUBSCRIBE', null, function () {
-            //console.log('subscribed');
-        });
-
         return mailbox;
     };
 
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 29f84ea66..9cb53a668 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -19,6 +19,7 @@ define([
         var SFrameChannel;
         var sframeChan;
         var FilePicker;
+        var Share;
         var Messaging;
         var Notifier;
         var Utils = {
@@ -38,6 +39,7 @@ define([
                 '/common/cryptget.js',
                 '/common/outer/worker-channel.js',
                 '/filepicker/main.js',
+                '/share/main.js',
                 '/common/common-messaging.js',
                 '/common/common-notifier.js',
                 '/common/common-hash.js',
@@ -49,7 +51,7 @@ define([
                 '/customize/application_config.js',
                 '/common/test.js',
             ], waitFor(function (_CpNfOuter, _Cryptpad, _Crypto, _Cryptget, _SFrameChannel,
-            _FilePicker,  _Messaging, _Notifier, _Hash, _Util, _Realtime,
+            _FilePicker, _Share, _Messaging, _Notifier, _Hash, _Util, _Realtime,
             _Constants, _Feedback, _LocalStore, _AppConfig, _Test) {
                 CpNfOuter = _CpNfOuter;
                 Cryptpad = _Cryptpad;
@@ -57,6 +59,7 @@ define([
                 Cryptget = _Cryptget;
                 SFrameChannel = _SFrameChannel;
                 FilePicker = _FilePicker;
+                Share = _Share;
                 Messaging = _Messaging;
                 Notifier = _Notifier;
                 Utils.Hash = _Hash;
@@ -269,9 +272,6 @@ define([
                                       sessionStorage[Utils.Constants.displayPadCreationScreen];
             delete sessionStorage[Utils.Constants.displayPadCreationScreen];
             var updateMeta = function () {
-                // TODO availableHashes in privateData may need updates once we have
-                // a better privileges workflow
-
                 //console.log('EV_METADATA_UPDATE');
                 var metaObj, isTemplate;
                 nThen(function (waitFor) {
@@ -290,12 +290,12 @@ define([
                         type: cfg.type || parsed.type
                     };
                     var additionalPriv = {
+                        app: parsed.type,
                         accountName: Utils.LocalStore.getAccountName(),
                         origin: window.location.origin,
                         pathname: window.location.pathname,
                         fileHost: ApiConfig.fileHost,
                         readOnly: readOnly,
-                        availableHashes: hashes,
                         isTemplate: isTemplate,
                         feedbackAllowed: Utils.Feedback.state,
                         isPresent: parsed.hashData && parsed.hashData.present,
@@ -326,6 +326,10 @@ define([
                         additionalPriv.registeredOnly = true;
                     }
 
+                    if (['debug', 'profile'].indexOf(parsed.type) !== -1) {
+                        additionalPriv.hashes = hashes;
+                    }
+
                     for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 
                     if (cfg.addData) {
@@ -380,6 +384,27 @@ define([
                     });
                 });
 
+                sframeChan.on('Q_GET_ATTRIBUTE', function (data, cb) {
+                    Cryptpad.getAttribute(data.key, function (e, data) {
+                        cb({
+                            error: e,
+                            data: data
+                        });
+                    });
+                });
+                sframeChan.on('Q_SET_ATTRIBUTE', function (data, cb) {
+                    Cryptpad.setAttribute(data.key, data.value, function (e) {
+                        cb({error:e});
+                    });
+                });
+
+                Cryptpad.mailbox.onEvent.reg(function (data) {
+                    sframeChan.event('EV_MAILBOX_EVENT', data);
+                });
+                sframeChan.on('Q_MAILBOX_COMMAND', function (data, cb) {
+                    Cryptpad.mailbox.execCommand(data, cb);
+                });
+
             };
             addCommonRpc(sframeChan);
 
@@ -589,20 +614,6 @@ define([
                 }, href);
             });
 
-            sframeChan.on('Q_GET_ATTRIBUTE', function (data, cb) {
-                Cryptpad.getAttribute(data.key, function (e, data) {
-                    cb({
-                        error: e,
-                        data: data
-                    });
-                });
-            });
-            sframeChan.on('Q_SET_ATTRIBUTE', function (data, cb) {
-                Cryptpad.setAttribute(data.key, data.value, function (e) {
-                    cb({error:e});
-                });
-            });
-
             sframeChan.on('Q_DRIVE_GETDELETED', function (data, cb) {
                 Cryptpad.getDeletedPads(data, function (err, obj) {
                     if (err) { return void console.error(err); }
@@ -711,6 +722,45 @@ define([
                 initFilePicker(data);
             });
 
+            // Share modal
+            var ShareModal = {};
+            var initShareModal = function (cfg) {
+                cfg.hashes = hashes;
+                cfg.password = password;
+                // cfg.hidden means pre-loading the filepicker while keeping it hidden.
+                // if cfg.hidden is true and the iframe already exists, do nothing
+                if (!ShareModal.$iframe) {
+                    var config = {};
+                    config.onShareAction = function (data) {
+                        sframeChan.event('EV_SHARE_ACTION', data);
+                    };
+                    config.onClose = function () {
+                        ShareModal.$iframe.hide();
+                    };
+                    config.data = cfg;
+                    config.addCommonRpc = addCommonRpc;
+                    config.modules = {
+                        Cryptpad: Cryptpad,
+                        SFrameChannel: SFrameChannel,
+                        Utils: Utils
+                    };
+                    ShareModal.$iframe = $('<iframe>', {id: 'sbox-share-iframe'}).appendTo($('body'));
+                    ShareModal.modal = Share.create(config);
+                } else if (!cfg.hidden) {
+                    ShareModal.modal.refresh(cfg, function () {
+                        ShareModal.$iframe.show();
+                    });
+                }
+                if (cfg.hidden) {
+                    ShareModal.$iframe.hide();
+                    return;
+                }
+                ShareModal.$iframe.focus();
+            };
+            sframeChan.on('EV_SHARE_OPEN', function (data) {
+                initShareModal(data || {});
+            });
+
             sframeChan.on('Q_TEMPLATE_USE', function (data, cb) {
                 Cryptpad.useTemplate(data, Cryptget, cb);
             });
@@ -879,13 +929,6 @@ define([
                 Cryptpad.universal.execCommand(data, cb);
             });
 
-            Cryptpad.mailbox.onEvent.reg(function (data) {
-                sframeChan.event('EV_MAILBOX_EVENT', data);
-            });
-            sframeChan.on('Q_MAILBOX_COMMAND', function (data, cb) {
-                Cryptpad.mailbox.execCommand(data, cb);
-            });
-
             Cryptpad.onTimeoutEvent.reg(function () {
                 sframeChan.event('EV_WORKER_TIMEOUT');
             });
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 032a4c9e7..f93021bd3 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -121,13 +121,9 @@ define([
         return '<script src="' + origin + '/common/media-tag-nacl.min.js"></script>';
     };
     funcs.getMediatagFromHref = function (obj) {
+        if (!obj || !obj.hash) { return; }
         var data = ctx.metadataMgr.getPrivateData();
-        var secret;
-        if (obj) {
-            secret = Hash.getSecrets('file', obj.hash, obj.password);
-        } else {
-            secret = Hash.getSecrets('file', data.availableHashes.fileHash, data.password);
-        }
+        var secret = Hash.getSecrets('file', obj.hash, obj.password);
         if (secret.keys && secret.channel) {
             var key = Hash.encodeBase64(secret.keys && secret.keys.cryptKey);
             var hexFileName = secret.channel;
@@ -391,12 +387,6 @@ define([
         }
     };
 
-    funcs.isStrongestStored = function () {
-        var data = ctx.metadataMgr.getPrivateData();
-        if (data.availableHashes.fileHash) { return true; }
-        return !data.readOnly || !data.availableHashes.editHash;
-    };
-
     funcs.setDisplayName = function (name, cb) {
         cb = cb || $.noop;
         ctx.sframeChan.query('Q_SETTINGS_SET_DISPLAY_NAME', name, cb);
@@ -432,6 +422,19 @@ define([
         return JSON.parse(JSON.stringify(friendRequests));
     };
 
+    funcs.getFriends = function () {
+        var priv = ctx.metadataMgr.getPrivateData();
+        var friends = priv.friends;
+        var goodFriends = {};
+        Object.keys(friends).forEach(function (curve) {
+            if (curve.length !== 44) { return; }
+            var data = friends[curve];
+            if (!data.notifications) { return; }
+            goodFriends[curve] = friends[curve];
+        });
+        return goodFriends;
+    };
+
     // Feedback
     funcs.prepareFeedback = function (key) {
         if (typeof(key) !== 'string') { return $.noop; }
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index ef3689faa..303a983e0 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -493,7 +493,7 @@ MessengerUI, Messages) {
             if ($messagebox.length) {
                 $messagebox.scrollTop($messagebox[0].scrollHeight);
             }
-            
+
             $button.addClass('cp-toolbar-button-active');
             config.$contentContainer.addClass('cp-chat-visible');
             $button.removeClass('cp-toolbar-notification');
@@ -525,23 +525,18 @@ MessengerUI, Messages) {
         if (!config.metadataMgr) {
             throw new Error("You must provide a `metadataMgr` to display the userlist");
         }
-        var metadataMgr = config.metadataMgr;
-        var origin = config.metadataMgr.getPrivateData().origin;
-        var pathname = config.metadataMgr.getPrivateData().pathname;
-        var hashes = metadataMgr.getPrivateData().availableHashes;
 
         var $shareBlock = $('<button>', {
             'class': 'fa fa-shhare-alt cp-toolbar-share-button',
             title: Messages.shareButton
         });
-        var modal = UIElements.createShareModal({
-            origin: origin,
-            pathname: pathname,
-            hashes: hashes,
-            common: Common
+        Common.getSframeChannel().event('EV_SHARE_OPEN', {
+            hidden: true
         });
         $shareBlock.click(function () {
-            UI.openCustomModal(UI.dialog.tabs(modal));
+            Common.getSframeChannel().event('EV_SHARE_OPEN', {
+                title: Common.getMetadataMgr().getMetadata().title
+            });
         });
 
         toolbar.$leftside.append($shareBlock);
@@ -554,23 +549,19 @@ MessengerUI, Messages) {
         if (!config.metadataMgr) {
             throw new Error("You must provide a `metadataMgr` to display the userlist");
         }
-        var metadataMgr = config.metadataMgr;
-        var origin = config.metadataMgr.getPrivateData().origin;
-        var pathname = config.metadataMgr.getPrivateData().pathname;
-        var hashes = metadataMgr.getPrivateData().availableHashes;
 
         var $shareBlock = $('<button>', {
             'class': 'fa fa-shhare-alt cp-toolbar-share-button',
             title: Messages.shareButton
         });
-        var modal = UIElements.createFileShareModal({
-            origin: origin,
-            pathname: pathname,
-            hashes: hashes,
-            common: Common
+        Common.getSframeChannel().event('EV_SHARE_OPEN', {
+            hidden: true,
+            file: true
         });
         $shareBlock.click(function () {
-            UI.openCustomModal(UI.dialog.tabs(modal));
+            Common.getSframeChannel().event('EV_SHARE_OPEN', {
+                file: true
+            });
         });
 
         toolbar.$leftside.append($shareBlock);
diff --git a/www/contacts/index.html b/www/contacts/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/contacts/index.html
+++ b/www/contacts/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/debug/index.html b/www/debug/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/debug/index.html
+++ b/www/debug/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/debug/inner.js b/www/debug/inner.js
index 5122c732e..1a5c9e023 100644
--- a/www/debug/inner.js
+++ b/www/debug/inner.js
@@ -229,7 +229,7 @@ define([
         };
 
         var getGraph = function (chainpad, cb) {
-            var hashes = metadataMgr.getPrivateData().availableHashes;
+            var hashes = metadataMgr.getPrivateData().hashes;
             var hash = hashes.editHash || hashes.viewHash;
             var chan = Hash.hrefToHexChannelId('/drive/#'+hash);
 
diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less
index c90d9018f..5bbebe172 100644
--- a/www/drive/app-drive.less
+++ b/www/drive/app-drive.less
@@ -4,6 +4,7 @@
 @import (reference) "../../customize/src/less2/include/limit-bar.less";
 @import (reference) "../../customize/src/less2/include/tokenfield.less";
 @import (reference) '../../customize/src/less2/include/framework.less';
+@import (reference) '../../customize/src/less2/include/share.less';
 
 &.cp-app-drive {
     .framework_min_main(
@@ -14,6 +15,7 @@
 
     .limit-bar_main();
     .tokenfield_main();
+    .share_main();
 
     @drive_hover: #eee;
     @drive_hover-light: lighten(@drive_hover, 20%);
diff --git a/www/drive/index.html b/www/drive/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/drive/index.html
+++ b/www/drive/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/drive/inner.js b/www/drive/inner.js
index 58c1bd87d..345414098 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -3315,12 +3315,17 @@ define([
                 if (paths.length !== 1) { return; }
                 el = manager.find(paths[0].path);
                 var parsed, modal;
+                var friends = common.getFriends();
+
                 if (manager.isSharedFolder(el)) {
                     data = manager.getSharedFolderData(el);
                     parsed = Hash.parsePadUrl(data.href);
                     modal = UIElements.createSFShareModal({
                         origin: APP.origin,
                         pathname: "/drive/",
+                        friends: friends,
+                        title: data.title,
+                        common: common,
                         hashes: {
                             editHash: parsed.hash
                         }
@@ -3333,6 +3338,7 @@ define([
                     var padData = {
                         origin: APP.origin,
                         pathname: "/" + padType + "/",
+                        friends: friends,
                         hashes: {
                             editHash: parsed.hash,
                             viewHash: roParsed.hash,
@@ -3342,13 +3348,16 @@ define([
                             hash: parsed.hash,
                             password: data.password
                         },
+                        title: data.title,
                         common: common
                     };
                     modal = padType === 'file' ? UIElements.createFileShareModal(padData)
                                             : UIElements.createShareModal(padData);
                     modal = UI.dialog.tabs(modal);
                 }
-                UI.openCustomModal(modal);
+                UI.openCustomModal(modal, {
+                    wide: Object.keys(friends).length !== 0
+                });
             }
             else if ($(this).hasClass('cp-app-drive-context-newfolder')) {
                 if (paths.length !== 1) { return; }
diff --git a/www/file/index.html b/www/file/index.html
index cc024c3ed..79a96c97b 100644
--- a/www/file/index.html
+++ b/www/file/index.html
@@ -6,25 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/filepicker/main.js b/www/filepicker/main.js
index 5792001e5..f3b85d7b5 100644
--- a/www/filepicker/main.js
+++ b/www/filepicker/main.js
@@ -50,7 +50,8 @@ define([
                 var postMsg = function (data) {
                     iframe.postMessage(data, '*');
                 };
-                var whenReady = waitFor(function (msg) {
+                var w = waitFor();
+                var whenReady = function (msg) {
                     if (msg.source !== iframe) { return; }
                     var data = JSON.parse(msg.data);
                     if (!data.txid) { return; }
@@ -67,7 +68,8 @@ define([
                     config.modules.SFrameChannel.create(msgEv, postMsg, waitFor(function (sfc) {
                         sframeChan = sfc;
                     }));
-                });
+                    w();
+                };
                 window.addEventListener('message', whenReady);
             }).nThen(function () {
                 var updateMeta = function () {
diff --git a/www/kanban/index.html b/www/kanban/index.html
index e1f312ebd..f01d01e71 100644
--- a/www/kanban/index.html
+++ b/www/kanban/index.html
@@ -7,27 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html,
-        body {
-            margin: 0px;
-            padding: 0px;
-        }
-
-        #sbox-iframe {
-            position: fixed;
-            top: 0px;
-            left: 0px;
-            bottom: 0px;
-            right: 0px;
-            width: 100%;
-            height: 100%;
-            border: none;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 
 <body>
diff --git a/www/oodoc/index.html b/www/oodoc/index.html
index a02db0cd2..1824377ee 100644
--- a/www/oodoc/index.html
+++ b/www/oodoc/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/onlyoffice/main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/ooslide/index.html b/www/ooslide/index.html
index a02db0cd2..1824377ee 100644
--- a/www/ooslide/index.html
+++ b/www/ooslide/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/onlyoffice/main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/pad/index.html b/www/pad/index.html
index 7ea06cdfc..dd4b97b3b 100644
--- a/www/pad/index.html
+++ b/www/pad/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/poll/index.html b/www/poll/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/poll/index.html
+++ b/www/poll/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/poll/inner.js b/www/poll/inner.js
index 146bc05a5..b9baff904 100644
--- a/www/poll/inner.js
+++ b/www/poll/inner.js
@@ -739,10 +739,6 @@ define([
     var initThumbnails = function () {
         var privateDat = metadataMgr.getPrivateData();
         if (!privateDat.thumbnails) { return; } // Thumbnails are disabled
-        var hash = privateDat.availableHashes.editHash ||
-                   privateDat.availableHashes.viewHash;
-        if (!hash) { return; }
-        var href = privateDat.pathname + '#' + hash;
         var $el = $('.cp-app-poll-realtime');
         //var $el = $('#cp-app-poll-table');
         var scrollTop;
@@ -771,7 +767,7 @@ define([
                     .css('position', '');
                 $('#cp-app-poll-form').scrollTop(scrollTop);
             },
-            href: href,
+            type: 'poll',
             getContent: function () { return JSON.stringify(APP.proxy.content); }
         };
         Thumb.initPadThumbnails(common, options);
diff --git a/www/profile/index.html b/www/profile/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/profile/index.html
+++ b/www/profile/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/profile/inner.js b/www/profile/inner.js
index 56a6e8f48..8f589107f 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -93,7 +93,7 @@ define([
             return;
         }
 
-        var hash = common.getMetadataMgr().getPrivateData().availableHashes.viewHash;
+        var hash = common.getMetadataMgr().getPrivateData().hashes.viewHash;
         var url = APP.origin + '/profile/#' + hash;
 
         var $button = $('<button>', {
diff --git a/www/settings/index.html b/www/settings/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/settings/index.html
+++ b/www/settings/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/share/app-share.less b/www/share/app-share.less
new file mode 100644
index 000000000..56d926690
--- /dev/null
+++ b/www/share/app-share.less
@@ -0,0 +1,8 @@
+@import (reference) '../../customize/src/less2/include/colortheme-all.less';
+@import (reference) '../../customize/src/less2/include/tippy.less';
+@import (reference) '../../customize/src/less2/include/share.less';
+
+&.cp-app-share {
+    .tippy_main();
+    .share_main();
+}
diff --git a/www/filepicker/index.html b/www/share/index.html
similarity index 100%
rename from www/filepicker/index.html
rename to www/share/index.html
diff --git a/www/share/inner.html b/www/share/inner.html
new file mode 100644
index 000000000..6cf7179ae
--- /dev/null
+++ b/www/share/inner.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html style="height: 100%; background: transparent;">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/share/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        body #cp-loading {
+            display: none;
+            position: absolute;
+            top: 15vh;
+            bottom: 15vh;
+            left: 10vw;
+            right: 10vw;
+            z-index: 200000;
+            overflow: hidden;
+        }
+        body #cp-loading .cp-loading-container {
+            margin-top: 35vh;
+        }
+        body #cp-loading .cp-loading-cryptofist {
+            display: none;
+        }
+    </style>
+</head>
+<body class="cp-app-share" style="background: transparent;">
+</body>
+</html>
+
diff --git a/www/share/inner.js b/www/share/inner.js
new file mode 100644
index 000000000..35d337c9f
--- /dev/null
+++ b/www/share/inner.js
@@ -0,0 +1,83 @@
+define([
+    'jquery',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-ui-elements.js',
+    '/common/common-interface.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/share/app-share.less',
+], function (
+    $,
+    nThen,
+    SFCommon,
+    UIElements,
+    UI)
+{
+    var APP = window.APP = {};
+
+    var andThen = function (common) {
+        var metadataMgr = common.getMetadataMgr();
+        var sframeChan = common.getSframeChannel();
+
+        var hideShareDialog = function () {
+            sframeChan.event('EV_SHARE_CLOSE');
+        };
+
+        var createShareDialog = function (data) {
+            var priv = metadataMgr.getPrivateData();
+            var hashes = priv.hashes;
+            var origin = priv.origin;
+            var pathname = priv.pathname;
+            var f = (data && data.file) ? UIElements.createFileShareModal
+                                          : UIElements.createShareModal;
+
+            var friends = common.getFriends();
+
+            var modal = f({
+                origin: origin,
+                pathname: pathname,
+                hashes: hashes,
+                common: common,
+                title: data.title,
+                friends: friends,
+                onClose: function () {
+                    hideShareDialog();
+                },
+                fileData: {
+                    hash: hashes.fileHash,
+                    password: priv.password
+                }
+            });
+            UI.findCancelButton().click();
+            UI.openCustomModal(UI.dialog.tabs(modal), {
+                wide: Object.keys(friends).length !== 0
+            });
+        };
+        sframeChan.on('EV_SHARE_REFRESH', function (data) {
+            createShareDialog(data);
+        });
+    };
+
+    var main = function () {
+        var common;
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                UI.removeLoadingScreen();
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (/*waitFor*/) {
+            var metadataMgr = common.getMetadataMgr();
+            if (metadataMgr.getMetadataLazy() !== 'uninitialized') {
+                andThen(common);
+                return;
+            }
+            metadataMgr.onChange(function () {
+                andThen(common);
+            });
+        });
+    };
+    main();
+});
diff --git a/www/share/main.js b/www/share/main.js
new file mode 100644
index 000000000..3f51fbb50
--- /dev/null
+++ b/www/share/main.js
@@ -0,0 +1,148 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    'jquery',
+    '/common/requireconfig.js',
+], function (nThen, ApiConfig, $, RequireConfig) {
+    var requireConfig = RequireConfig();
+
+    var ready = false;
+
+    var create = function (config) {
+        // Loaded in load #2
+        var sframeChan;
+        nThen(function (waitFor) {
+            $(waitFor());
+        }).nThen(function (waitFor) {
+            var req = {
+                cfg: requireConfig,
+                req: [ '/common/loading.js' ],
+                pfx: window.location.origin
+            };
+            window.rc = requireConfig;
+            window.apiconf = ApiConfig;
+            $('#sbox-share-iframe').attr('src',
+                ApiConfig.httpSafeOrigin + '/share/inner.html?' + requireConfig.urlArgs +
+                    '#' + encodeURIComponent(JSON.stringify(req)));
+
+            // This is a cheap trick to avoid loading sframe-channel in parallel with the
+            // loading screen setup.
+            var done = waitFor();
+            var onMsg = function (msg) {
+                var data = JSON.parse(msg.data);
+                if (data.q !== 'READY') { return; }
+                window.removeEventListener('message', onMsg);
+                var _done = done;
+                done = function () { };
+                _done();
+            };
+            window.addEventListener('message', onMsg);
+        }).nThen(function (/*waitFor*/) {
+            var Cryptpad = config.modules.Cryptpad;
+            var Utils = config.modules.Utils;
+
+            nThen(function (waitFor) {
+                // The inner iframe tries to get some data from us every ms (cache, store...).
+                // It will send a "READY" message and wait for our answer with the correct txid.
+                // First, we have to answer to this message, otherwise we're going to block
+                // sframe-boot.js. Then we can start the channel.
+                var msgEv = Utils.Util.mkEvent();
+                var iframe = $('#sbox-share-iframe')[0].contentWindow;
+                var postMsg = function (data) {
+                    iframe.postMessage(data, '*');
+                };
+                var w = waitFor();
+                var whenReady = function (msg) {
+                    if (msg.source !== iframe) { return; }
+                    var data = JSON.parse(msg.data);
+                    if (!data.txid) { return; }
+                    // Remove the listener once we've received the READY message
+                    window.removeEventListener('message', whenReady);
+                    // Answer with the requested data
+                    postMsg(JSON.stringify({ txid: data.txid, language: Cryptpad.getLanguage() }));
+
+                    // Then start the channel
+                    window.addEventListener('message', function (msg) {
+                        if (msg.source !== iframe) { return; }
+                        msgEv.fire(msg);
+                    });
+                    config.modules.SFrameChannel.create(msgEv, postMsg, waitFor(function (sfc) {
+                        sframeChan = sfc;
+                    }));
+                    w();
+                };
+                window.addEventListener('message', whenReady);
+            }).nThen(function () {
+                var updateMeta = function () {
+                    //console.log('EV_METADATA_UPDATE');
+                    var metaObj;
+                    nThen(function (waitFor) {
+                        Cryptpad.getMetadata(waitFor(function (err, n) {
+                            if (err) { console.log(err); }
+                            metaObj = n;
+                        }));
+                    }).nThen(function (/*waitFor*/) {
+                        metaObj.doc = {};
+                        var additionalPriv = {
+                            accountName: Utils.LocalStore.getAccountName(),
+                            origin: window.location.origin,
+                            pathname: window.location.pathname,
+                            feedbackAllowed: Utils.Feedback.state,
+                            hashes: config.data.hashes,
+                            password: config.data.password,
+                            file: config.data.file,
+                        };
+                        for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
+
+                        sframeChan.event('EV_METADATA_UPDATE', metaObj);
+                    });
+                };
+                Cryptpad.onMetadataChanged(updateMeta);
+                sframeChan.onReg('EV_METADATA_UPDATE', updateMeta);
+
+                config.addCommonRpc(sframeChan);
+
+                sframeChan.on('Q_GET_FILES_LIST', function (types, cb) {
+                    Cryptpad.getSecureFilesList(types, function (err, data) {
+                        cb({
+                            error: err,
+                            data: data
+                        });
+                    });
+                });
+
+                sframeChan.on('EV_SHARE_CLOSE', function () {
+                    config.onClose();
+                });
+                sframeChan.on('EV_SHARE_ACTION', function (data) {
+                    config.onShareAction(data);
+                });
+
+                sframeChan.onReady(function () {
+                    if (ready === true) { return; }
+                    if (typeof ready === "function") {
+                        ready();
+                    }
+                    ready = true;
+                });
+            });
+        });
+        var refresh = function (data, cb) {
+            if (!ready) {
+                ready = function () {
+                    refresh(data, cb);
+                };
+                return;
+            }
+            sframeChan.event('EV_SHARE_REFRESH', data);
+            cb();
+        };
+        return {
+            refresh: refresh
+        };
+    };
+    return {
+        create: create
+    };
+});
diff --git a/www/sheet/index.html b/www/sheet/index.html
index a02db0cd2..1824377ee 100644
--- a/www/sheet/index.html
+++ b/www/sheet/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/onlyoffice/main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/slide/index.html b/www/slide/index.html
index 7ea06cdfc..dd4b97b3b 100644
--- a/www/slide/index.html
+++ b/www/slide/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/todo/index.html b/www/todo/index.html
index e3f7eacc4..79a96c97b 100644
--- a/www/todo/index.html
+++ b/www/todo/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index 7ea06cdfc..dd4b97b3b 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -6,33 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
     <script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-    <style>
-        html, body {
-            margin: 0px;
-            padding: 0px;
-        }
-        #sbox-iframe {
-            position:fixed;
-            top:0px;
-            left:0px;
-            bottom:0px;
-            right:0px;
-            width:100%;
-            height:100%;
-            border:none;
-            margin:0;
-            padding:0;
-            overflow:hidden;
-        }
-        #sbox-filePicker-iframe {
-            position: fixed;
-            top:0; left:0;
-            bottom:0; right:0;
-            width:100%;
-            height: 100%;
-            border: 0;
-        }
-    </style>
+    <link href="/customize/src/outer.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <iframe id="sbox-iframe">
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
index 04527be10..18a66a635 100644
--- a/www/whiteboard/inner.js
+++ b/www/whiteboard/inner.js
@@ -445,11 +445,7 @@ define([
             var oldThumbnailState;
             var privateDat = metadataMgr.getPrivateData();
             if (!privateDat.thumbnails) { return; }
-            var hash = privateDat.availableHashes.editHash ||
-                       privateDat.availableHashes.viewHash;
-            var href = privateDat.pathname + '#' + hash;
             var mkThumbnail = function () {
-                if (!hash) { return; }
                 if (framework.getState() !== 'READY') { return; }
                 if (!framework._.cpNfInner.chainpad) { return; }
                 var content = framework._.cpNfInner.chainpad.getUserDoc();
@@ -457,7 +453,7 @@ define([
                 var D = Thumb.getResizedDimensions($canvas[0], 'pad');
                 Thumb.fromCanvas($canvas[0], D, function (err, b64) {
                     oldThumbnailState = content;
-                    Thumb.setPadThumbnail(framework._.sfCommon, href, privateDat.channel, b64);
+                    Thumb.setPadThumbnail(framework._.sfCommon, 'whiteboard', privateDat.channel, b64);
                 });
             };
             window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL);