@social-mail/social-mail-client 1.2.742 → 1.2.744

package/dist/public/channel/ChannelApp.pack.js

@@ -1976,7 +1976,7 @@ const UMD = new UMDClass();
 
         AmdLoader.instance.register(
             ["@social-mail/social-mail-client","@web-atoms/web-controls","@web-atoms/core","reflect-metadata","@web-atoms/date-time","@web-atoms/data-styles","@web-atoms/entity","@web-atoms/email-dom"],
-            ["@social-mail/social-mail-client/dist/public/channel/ChannelApp","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@web-atoms/core/dist/Pack","@social-mail/social-mail-client/dist/public/channel/styles/common","@social-mail/social-mail-client/dist/public/channel/commands/ChannelCommands","@social-mail/social-mail-client/dist/public/channel/pages/ChannelCalendarPage","@social-mail/social-mail-client/dist/model/model","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@web-atoms/web-controls/dist/basic/Calendar","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@web-atoms/web-controls/dist/DataAttributes","@web-atoms/web-controls/dist/basic/Select","@web-atoms/web-controls/dist/basic/styles/calendar-style","@web-atoms/web-controls/dist/basic/TimeEditor","@web-atoms/web-controls/dist/basic/styles/time-editor-style","@social-mail/social-mail-client/dist/common/Mailto","@social-mail/social-mail-client/dist/public/channel/UrlService","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/common/CDN","@social-mail/social-mail-client/dist/common/Slugger","@social-mail/social-mail-client/dist/common/toBase36","@social-mail/social-mail-client/dist/common/TestMode","@social-mail/social-mail-client/dist/public/channel/pages/BaseChannelPage","@web-atoms/core/dist/core/InjectProperty","@social-mail/social-mail-client/dist/services/EntityService","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/public/channel/BlogService","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/services/email/EmailContentDownloader","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/web/page/mails/service/EngagementService","@social-mail/social-mail-client/dist/public/channel/controls/BlogHeader","@social-mail/social-mail-client/dist/public/channel/controls/RecentPosts","@social-mail/social-mail-client/dist/public/channel/controls/PostList","@social-mail/social-mail-client/content/images/gif/loader.gif","@social-mail/social-mail-client/dist/public/channel/BlogImageService","@social-mail/social-mail-client/content/images/svg/logo/logo-orange.svg","@social-mail/social-mail-client/dist/public/channel/controls/TagCloud","@social-mail/social-mail-client/dist/public/channel/controls/UpcomingEvents","@social-mail/social-mail-client/dist/public/channel/pages/ChannelVideosPage","@social-mail/social-mail-client/dist/common/fileUrl","@social-mail/social-mail-client/dist/public/channel/pages/ChannelPhotosPage","@social-mail/social-mail-client/dist/public/channel/pages/ChannelDetailPage","@social-mail/social-mail-client/dist/public/channel/PostView","@social-mail/social-mail-client/dist/common/date/DateFormats","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@web-atoms/email-dom/dist/DomToString","@web-atoms/email-dom/dist/dom/StyleHelper","@web-atoms/email-dom/dist/style/mergeStyle","@social-mail/social-mail-client/dist/common/events/CommonEvents","@social-mail/social-mail-client/dist/web/commands/MailAppEvents","@social-mail/social-mail-client/dist/public/channel/controls/MediaCarousel","@social-mail/social-mail-client/dist/public/channel/pages/ChannelHomePage","@social-mail/social-mail-client/dist/public/channel/PostSummary","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme","@social-mail/social-mail-client/dist/site-editor/editor/webComponentsPath","@social-mail/social-mail-client/dist/public/channel/styles/channelViewStyle"]);
+            ["@social-mail/social-mail-client/dist/public/channel/ChannelApp","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/style/GlobalStyle","@web-atoms/core/dist/core/AtomList","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@web-atoms/data-styles/data-styles","@web-atoms/core/dist/Pack","@social-mail/social-mail-client/dist/public/channel/styles/common","@social-mail/social-mail-client/dist/public/channel/commands/ChannelCommands","@social-mail/social-mail-client/dist/public/channel/pages/ChannelCalendarPage","@social-mail/social-mail-client/dist/model/model","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/models/TaskManager","@web-atoms/entity/dist/models/Queue","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/common/cache/CacheTTL","@web-atoms/web-controls/dist/basic/Calendar","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@web-atoms/web-controls/dist/DataAttributes","@web-atoms/web-controls/dist/basic/Select","@web-atoms/web-controls/dist/basic/styles/calendar-style","@web-atoms/web-controls/dist/basic/TimeEditor","@web-atoms/web-controls/dist/basic/styles/time-editor-style","@social-mail/social-mail-client/dist/common/Mailto","@social-mail/social-mail-client/dist/public/channel/UrlService","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/common/CDN","@social-mail/social-mail-client/dist/common/Slugger","@social-mail/social-mail-client/dist/common/toBase36","@social-mail/social-mail-client/dist/common/TestMode","@social-mail/social-mail-client/dist/public/channel/pages/BaseChannelPage","@web-atoms/core/dist/core/InjectProperty","@social-mail/social-mail-client/dist/services/EntityService","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/public/channel/BlogService","@social-mail/social-mail-client/dist/common/Sql","@social-mail/social-mail-client/dist/services/email/EmailContentDownloader","@web-atoms/core/dist/services/FetchBuilder","@social-mail/social-mail-client/dist/web/page/mails/service/EngagementService","@social-mail/social-mail-client/dist/public/channel/controls/BlogHeader","@social-mail/social-mail-client/dist/public/channel/controls/RecentPosts","@social-mail/social-mail-client/dist/public/channel/controls/PostList","@social-mail/social-mail-client/content/images/gif/loader.gif","@social-mail/social-mail-client/dist/public/channel/BlogImageService","@social-mail/social-mail-client/content/images/svg/logo/logo-orange.svg","@social-mail/social-mail-client/dist/public/channel/controls/TagCloud","@social-mail/social-mail-client/dist/public/channel/controls/UpcomingEvents","@social-mail/social-mail-client/dist/public/channel/pages/ChannelVideosPage","@social-mail/social-mail-client/dist/common/fileUrl","@social-mail/social-mail-client/dist/public/channel/pages/ChannelPhotosPage","@social-mail/social-mail-client/dist/public/channel/controls/Pager","@social-mail/social-mail-client/dist/public/channel/pages/ChannelHomePage","@social-mail/social-mail-client/dist/public/channel/PostSummary","@social-mail/social-mail-client/dist/common/date/DateFormats","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/public/channel/pages/ChannelDetailPage","@social-mail/social-mail-client/dist/public/channel/PostView","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@web-atoms/email-dom/dist/DomToString","@web-atoms/email-dom/dist/dom/StyleHelper","@web-atoms/email-dom/dist/style/mergeStyle","@social-mail/social-mail-client/dist/common/events/CommonEvents","@social-mail/social-mail-client/dist/web/commands/MailAppEvents","@social-mail/social-mail-client/dist/public/channel/controls/MediaCarousel","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme","@social-mail/social-mail-client/dist/site-editor/editor/webComponentsPath","@social-mail/social-mail-client/dist/public/channel/styles/channelViewStyle"]);
 
 System.register([], function (_export, _context) {
   "use strict";
@@ -23249,12 +23249,12 @@ System.register(["../../common/apiPath", "../../common/CDN", "../../common/Slugg
           emailAddress: {
             emailAddress
           }
-        }, section = "calendar") {
+        }, section = "calendar", current = 0) {
           const cid = "@" + emailAddress.split("@")[0];
           if (AppLocation.isLocalTesting) {
-            return `?${Date.now()}#!/${cid}/${section}/`;
+            return `?${Date.now()}#!/${cid}/${section}/${current}`;
           }
-          return `/${cid}/${section}/`;
+          return `/${cid}/${section}/${current}`;
         },
         toCalendarUrl({
           emailAddress: {
@@ -24481,6 +24481,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
           super(...arguments);
           this.channel = null;
         }
+        set route(v) {}
         init() {
           return __awaiter(this, void 0, void 0, function* () {
             const {
@@ -24488,6 +24489,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             } = this.parameters;
             this.renderer = XNode.create("div", null);
             this.channel = yield this.blogService.getChannel(void 0, channel, void 0);
+            document.title = "Social " + this.channel.emailAddress.emailAddress;
             this.renderer = XNode.create("section", {
               "data-blog-list": "blog-list"
             }, this.renderHeader(), yield this.renderBody(), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(UpcomingEvents, {
@@ -24955,8 +24957,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../
         }
         renderBody() {
           return __awaiter(this, void 0, void 0, function* () {
-            const photos = yield this.loadPhotos();
-            const items = photos.items;
+            const videos = yield this.loadVideos();
+            const items = videos.items;
+            document.title = "Videos " + this.channel.emailAddress.emailAddress;
             return XNode.create("section", {
               "data-width": "100%"
             }, XNode.create("image-grid", null, ...items.map(m => XNode.create("img", {
@@ -24968,8 +24971,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../
             }, XNode.create("a", null, "First")));
           });
         }
-        loadPhotos() {
-          return this.entityService.query(AppFile, "channelFiles", this.channel.mailboxID).where(x => Sql.text.like(x.contentType, "image/%")).orderByDescending(x => x.appFileID).toPagedList({
+        loadVideos() {
+          return this.entityService.query(AppFile, "channelFiles", this.channel.mailboxID).where(x => Sql.text.like(x.contentType, "video/%")).orderByDescending(x => x.appFileID).toPagedList({
             start: this.start,
             size: 3
           });
@@ -24984,10 +24987,82 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/pages/ChannelVideosPage");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../model/model", "../../../services/EntityService", "@web-atoms/core/dist/core/XNode", "../../../common/fileUrl", "../UrlService", "../../../common/Sql", "../BlogService", "./BaseChannelPage"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context) {
+  "use strict";
+
+  var XNode;
+  function* range(start, end, url) {
+    for (let index = start; index <= end; index++) {
+      yield XNode.create("a", {
+        href: url(index)
+      }, index.toString());
+    }
+  }
+  function Pager({
+    current,
+    end,
+    step = 3,
+    url = void 0
+  }) {
+    if (end < 0) {
+      return XNode.create("div", null);
+    }
+    if (end <= step) {
+      return XNode.create("div", {
+        "data-layout": "row"
+      }, XNode.create("a", {
+        href: url(0)
+      }, "First"), ...Array.from(range(1, end, url)));
+    }
+    if (current) {
+      if (current > step) {
+        if (current < end - step) {
+          return XNode.create("div", {
+            "data-layout": "row"
+          }, XNode.create("a", {
+            href: url(0)
+          }, "First"), "...", ...Array.from(range(current - step, current + step, url)), "...", XNode.create("a", {
+            href: url(end)
+          }, "Last"));
+        }
+        return XNode.create("div", {
+          "data-layout": "row"
+        }, XNode.create("a", {
+          href: url(0)
+        }, "First"), "...", ...Array.from(range(current - step, end, url)), XNode.create("a", {
+          href: url(end)
+        }, "Last"));
+      }
+      return XNode.create("div", {
+        "data-layout": "row"
+      }, XNode.create("a", {
+        href: url(0)
+      }, "First"), ...Array.from(range(1, current + step, url)), "...", XNode.create("a", {
+        href: url(end)
+      }, "Last"));
+    }
+    return XNode.create("div", {
+      "data-layout": "row"
+    }, ...Array.from(range(1, end, url)), XNode.create("a", {
+      href: url(end)
+    }, "Last"));
+  }
+  _export("default", Pager);
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=Pager.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/controls/Pager");
+
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../model/model", "../../../services/EntityService", "@web-atoms/core/dist/core/XNode", "../../../common/fileUrl", "../UrlService", "../../../common/Sql", "../BlogService", "./BaseChannelPage", "../controls/Pager"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, AppFile, EntityService, XNode, fileUrl, UrlService, Sql, BlogService, BaseChannelPage, ChannelPhotosPage;
+  var __awaiter, __decorate, __metadata, InjectProperty, AppFile, EntityService, XNode, fileUrl, UrlService, Sql, BlogService, BaseChannelPage, Pager, ChannelPhotosPage;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -25012,6 +25087,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../
       BlogService = _BlogService.default;
     }, function (_BaseChannelPage) {
       BaseChannelPage = _BaseChannelPage.default;
+    }, function (_controlsPager) {
+      Pager = _controlsPager.default;
     }],
     execute: function () {
       _export("default", ChannelPhotosPage = class ChannelPhotosPage extends BaseChannelPage {
@@ -25019,26 +25096,32 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../../../
           super(...arguments);
           this.channel = null;
           this.start = 0;
+          this.size = 50;
         }
         renderBody() {
+          var _a;
           return __awaiter(this, void 0, void 0, function* () {
+            this.start = Number.parseInt((_a = this.parameters.start) !== null && _a !== void 0 ? _a : 0, 10);
             const photos = yield this.loadPhotos();
             const items = photos.items;
+            document.title = "Photos " + this.channel.emailAddress.emailAddress;
             return XNode.create("section", {
               "data-width": "100%"
             }, XNode.create("image-grid", null, ...items.map(m => XNode.create("img", {
               src: fileUrl.webp(m, 300),
               "data-src-set": `${UrlService.toImageUrl(m, 600)} 640w,
                         ${UrlService.toImageUrl(m, 1024)}`
-            }))), XNode.create("div", {
-              "data-layout": "row"
-            }, XNode.create("a", null, "First")));
+            }))), XNode.create(Pager, {
+              current: this.start,
+              end: Math.floor(photos.total / this.size) - 1,
+              url: x => UrlService.toSectionUrl(this.channel, "photos", x)
+            }));
           });
         }
         loadPhotos() {
           return this.entityService.query(AppFile, "channelFiles", this.channel.mailboxID).where(x => Sql.text.like(x.contentType, "image/%")).orderByDescending(x => x.appFileID).toPagedList({
-            start: this.start,
-            size: 3
+            start: this.start * this.size,
+            size: this.size
           });
         }
       });
@@ -25149,1338 +25232,1316 @@ System.register(["@web-atoms/date-time/dist/DateTime"], function (_export, _cont
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/date/DateFormats");
 
-System.register([], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "./UrlService", "@social-mail/social-mail-client/content/images/gif/loader.gif", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  function newCSSStyleDeclaration() {
-    const e = document.createElement("div");
-    return e.style;
-  }
-  function mergeStyle(...styles) {
+  var XNode, DateFormats, UrlService, loaderImage, Bind, styled, commentIcon;
+  function PostSummary({
+    channel = void 0,
+    mailboxEmail = void 0,
+    itemPath = void 0,
+    blogService = void 0
+  }) {
     var _a, _b;
-    const s = newCSSStyleDeclaration();
-    for (const iterator of styles) {
-      if (!iterator) {
-        continue;
-      }
-      if (iterator instanceof CSSStyleDeclaration) {
-        for (let index = 0; index < iterator.length; index++) {
-          const name = iterator[index];
-          let value = (_a = iterator[name]) === null || _a === void 0 ? void 0 : _a.toString();
-          if (value === void 0 || value === null || value === "") {
-            continue;
-          }
-          s[name] = value;
-        }
-        continue;
-      }
-      for (const key in iterator) {
-        if (Object.prototype.hasOwnProperty.call(iterator, key)) {
-          const element = (_b = iterator[key]) === null || _b === void 0 ? void 0 : _b.toString();
-          if (!element) {
-            continue;
-          }
-          s[key] = element;
-        }
-      }
-    }
-    return s;
+    const {
+      mailboxID,
+      email
+    } = mailboxEmail;
+    const {
+      engagements = []
+    } = email;
+    const isComment = email.parentID !== null;
+    const firstMedia = (_a = email.attachments) === null || _a === void 0 ? void 0 : _a.find(x => /(image|video)\//i.test(x.contentType));
+    const href = UrlService.toBlogUrl(Object.assign({
+      mailbox: channel
+    }, mailboxEmail));
+    return XNode.create("post-summary", {
+      "data-comment": isComment,
+      "data-item-path": itemPath
+    }, firstMedia ? XNode.create("a", {
+      "data-element": "preview",
+      href: href
+    }, XNode.create("img", {
+      src: Bind.oneTimeAsync(() => blogService.getImage(mailboxEmail), loaderImage)
+    })) : XNode.create("a", {
+      "data-element": "preview-text",
+      href: href,
+      text: (_b = isComment ? email.senderName : email.subject) === null || _b === void 0 ? void 0 : _b.trim()
+    }), XNode.create("a", {
+      "data-element": "title",
+      href: href,
+      text: isComment ? email.senderName : email.subject
+    }), XNode.create("h6", {
+      "data-element": "date",
+      href: href,
+      text: DateFormats.relative.short(email.dateSent)
+    }), !isComment && XNode.create("h5", {
+      href: href,
+      "data-element": "author",
+      text: email.senderName
+    }), XNode.create("section", null, XNode.create("section", null, email.textBody.substring(0, 110).trim(), "\xa0", XNode.create("a", {
+      href: href
+    }, "Read More ..."))), XNode.create("footer", null, ...engagements.map(x => XNode.create("span", {
+      "data-click-event": x.engagement === commentIcon ? "view-comments" : "none",
+      "data-element": "engagements",
+      title: `View all ${x.engagement} ${x.count}`,
+      text: `${x.engagement} ${x.count}`
+    }))));
   }
-  _export({
-    newCSSStyleDeclaration: newCSSStyleDeclaration,
-    default: mergeStyle
-  });
+  _export("default", PostSummary);
   return {
-    setters: [],
-    execute: function () {}
-  };
-});
-//# sourceMappingURL=mergeStyle.js.map
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_commonDateDateFormats) {
+      DateFormats = _commonDateDateFormats.DateFormats;
+    }, function (_UrlService) {
+      UrlService = _UrlService.UrlService;
+    }, function (_socialMailSocialMailClientContentImagesGifLoaderGif) {
+      loaderImage = _socialMailSocialMailClientContentImagesGifLoaderGif.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }],
+    execute: function () {
+      commentIcon = "💬";
+      styled.css`
+        
+        display: grid;
+        grid-template-columns: 1fr 2fr auto;
+        grid-template-rows: auto auto 1fr auto;
 
-    AmdLoader.instance.setup("@web-atoms/email-dom/dist/style/mergeStyle");
+        padding-bottom: 10px;
+        padding-right: 20px;
 
-System.register(["../style/mergeStyle"], function (_export, _context) {
-  "use strict";
+        border-bottom: solid 1px lightgray;
+
+        max-height: 285px;
+        height: 285px;
+
+        overflow: hidden;
+
+        margin-bottom: 10px;
+
+        gap: 10px;
+
+        row-gap: 20px;
+
+        & > [data-element=preview] {
+            grid-row: 1 / span 4;
+            grid-column: 1;
+            background-color: #343a400d;
+            object-fit: contain;
+            width: 275px;
+            height: 275px;
+            border: none;
+            outline: none;
+            text-decoration: none;
+
+            border-radius: 10px;
+
+            & > img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
 
-  var newCSSStyleDeclaration, StyleHelper, toStyle;
-  _export("default", void 0);
-  return {
-    setters: [function (_styleMergeStyle) {
-      newCSSStyleDeclaration = _styleMergeStyle.newCSSStyleDeclaration;
-    }],
-    execute: function () {
-      toStyle = style => {
-        var _a;
-        if (typeof style === "string") {
-          const css = style;
-          const cs = newCSSStyleDeclaration();
-          cs.cssText = css;
-          return cs;
         }
-        const s = newCSSStyleDeclaration();
-        if (style instanceof CSSStyleDeclaration) {
-          return style;
+        
+        & > [data-element=preview-text] {
+            grid-row: 1 / span 4;
+            grid-column: 1;
+            background-color: gray;
+            max-width: 100%;
+            max-height: 120px;
+            height: 120px;
+            border: none;
+            outline: none;
+            text-decoration: none;
+            font-size: 20px;
+            line-height: 30px;
+            color: white;
+            padding: 10px;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            text-overflow: ellipsis;
+            overflow:hidden;
+            position: relative;
+            &::after {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                content: "";
+                pointer-events: none;
+                background: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.5) 16px);
+            }
         }
-        for (const key in style) {
-          if (Object.prototype.hasOwnProperty.call(style, key)) {
-            const element = (_a = style[key]) === null || _a === void 0 ? void 0 : _a.toString();
-            if (element === void 0 || element === null || element === "") {
-              continue;
+
+        & > [data-element=title] {
+            grid-row: 2;
+            grid-column: 2 / span 2;
+            font-size: 1.5em;
+            line-height: 1.2;
+            text-decoration: none;
+            margin: 0;
+            & a {
+                text-decoration: none;
             }
-            s[key] = element;
-          }
         }
-        return s;
-      };
-      _export("default", StyleHelper = class StyleHelper {
-        static styleToString(style, props) {
-          var _a;
-          if (!style) {
-            return;
-          }
-          const cs = toStyle(style);
-          if (props) {
-            const ps = toStyle(props);
-            for (let index = 0; index < ps.length; index++) {
-              const key = ps[index];
-              let value = (_a = ps[key]) === null || _a === void 0 ? void 0 : _a.toString();
-              if (value === void 0 || value === null || value === "") {
-                continue;
-              }
-              cs[key] = value;
-            }
-          }
-          const allKeys = [];
-          for (let index = 0; index < cs.length; index++) {
-            const key = cs[index];
-            allKeys.push(key);
-          }
-          for (const key of allKeys) {
-            if (!cs[key]) {
-              cs.removeProperty(key);
-            }
-          }
-          return cs.cssText;
-        }
-      });
-    }
-  };
-});
-//# sourceMappingURL=StyleHelper.js.map
-
-    AmdLoader.instance.setup("@web-atoms/email-dom/dist/dom/StyleHelper");
 
-System.register(["@web-atoms/core/dist/core/XNode", "./dom/StyleHelper"], function (_export, _context) {
-  "use strict";
-
-  var XNode, StyleHelper;
-  function DomToString(node) {
-    const div = document.createElement("div");
-    DomToElement(div, XNode.create("div", null, node));
-    return div.innerHTML;
-  }
-  function DomToElement(div, node) {
-    var _a;
-    while (typeof node.name === "function") {
-      node = node.name(node.attributes, ...node.children);
-    }
-    const a = node.attributes;
-    if (a) {
-      for (const key in a) {
-        if (Object.prototype.hasOwnProperty.call(a, key)) {
-          let element = a[key];
-          if (element === null || element === void 0) {
-            continue;
-          }
-          if (typeof element === "object" && key === "style") {
-            element = StyleHelper.styleToString(element);
-          } else {
-            element = element.toString();
-          }
-          if (!element) {
-            continue;
-          }
-          switch (key) {
-            case "text":
-              div.textContent = element;
-              continue;
-            case "innerHTML":
-              div.innerHTML = element;
-              continue;
-          }
-          if (key.startsWith("styler-")) {
-            div.setAttribute(key, element);
-            continue;
-          }
-          if (key.startsWith("style") && key.length > 5) {
-            div.style[key.substring(5)] = element;
-            continue;
-          }
-          if (key.startsWith("data") && key.length > 4) {
-            if (key.indexOf("-") !== -1) {
-              div.setAttribute(key, element);
-              continue;
-            }
-            div.dataset[key.substring(4)] = element;
-            continue;
-          }
-          div.setAttribute(key, element);
+        & > [data-element=date] {
+            grid-row: 1; 
+            grid-column: 3;
+            font-size: 0.70rem;
+            line-height: 1;
+            letter-spacing:0.05rem;
+            margin: 0;
         }
-      }
-    }
-    if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
-      return;
-    }
-    for (let iterator of node.children) {
-      if (iterator === false || iterator === void 0 || iterator === null) {
-        continue;
-      }
-      if (typeof iterator !== "object") {
-        div.appendChild(document.createTextNode(iterator.toString()));
-        continue;
-      }
-      while (typeof iterator.name === "function") {
-        iterator = iterator.name(iterator.attributes, ...iterator.children);
-      }
-      const child = document.createElement(iterator.name);
-      div.appendChild(child);
-      DomToElement(child, iterator);
-    }
-  }
-  _export({
-    default: DomToString,
-    DomToElement: DomToElement
-  });
-  return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_domStyleHelper) {
-      StyleHelper = _domStyleHelper.default;
-    }],
-    execute: function () {}
-  };
-});
-//# sourceMappingURL=DomToString.js.map
-
-    AmdLoader.instance.setup("@web-atoms/email-dom/dist/DomToString");
-
-System.register(["@web-atoms/core/dist/core/EventScope"], function (_export, _context) {
-  "use strict";
 
-  var EventScope, CommonEvents;
-  return {
-    setters: [function (_webAtomsCoreDistCoreEventScope) {
-      EventScope = _webAtomsCoreDistCoreEventScope.default;
-    }],
-    execute: function () {
-      _export("CommonEvents", CommonEvents = {
-        onThreadMarkedAsRead: EventScope.create(),
-        onThreadMarkedAsBlocked: EventScope.create(),
-        onDraftDeleted: EventScope.create(),
-        onFileDeleted: EventScope.create(),
-        onEmailScheduled: EventScope.create(),
-        onEmailUnscheduled: EventScope.create()
-      });
-    }
-  };
-});
-//# sourceMappingURL=CommonEvents.js.map
+        & > [data-element=author] {
+            grid-row: 1;
+            grid-column: 2;
+            font-size: 0.70rem;
+            line-height: 1;
+            letter-spacing:0.05rem;
+            margin: 0;
+        }
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/events/CommonEvents");
+        & > section {
+            grid-row: 3;
+            grid-column: 2 / span 2;
+            position: relative;
+        }
 
-System.register(["@web-atoms/core/dist/core/EventScope"], function (_export, _context) {
-  "use strict";
+        & > footer {
+            grid-row: 4;
+            grid-column: 1 / span 3;
+        }
 
-  var EventScope, MailAppEvents;
-  return {
-    setters: [function (_webAtomsCoreDistCoreEventScope) {
-      EventScope = _webAtomsCoreDistCoreEventScope.default;
-    }],
-    execute: function () {
-      _export("MailAppEvents", MailAppEvents = {
-        mailboxContactUpdated: EventScope.create()
+    `.installGlobal("post-summary");
+      document.body.addEventListener("click", e => {
+        let target = e.target;
+        do {
+          const href = target.tagName === "POST-SUMMARY" && target.getAttribute("data-link");
+          if (href) {
+            location.href = href;
+            return;
+          }
+          target = target.parentElement;
+        } while (target);
       });
     }
   };
 });
-//# sourceMappingURL=MailAppEvents.js.map
+//# sourceMappingURL=PostSummary.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/commands/MailAppEvents");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/PostSummary");
 
-System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "../../../../services/EntityService", "../../../../model/model", "../../../../common/Sql", "@web-atoms/email-dom/dist/DomToString", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/core/AtomUI", "@web-atoms/date-time/dist/DateTime", "../../../../common/events/CommonEvents", "../../../../services/BusyProgress", "../../../../services/email/EmailContentDownloader", "./EngagementService", "../../../commands/MailAppEvents", "../../../../common/fileUrl"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/controls/AtomControl"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, Email, EmailRecipient, MailboxContactEmail, MailboxEmail, Sql, DomToString, XNode, AtomControl, AncestorEnumerator, descendentIterator, DateTime, CommonEvents, BusyProgress, EmailContentDownloader, EngagementService, MailAppEvents, fileUrl, renderMail, ConversationService;
+  var __awaiter, Bind, CancelToken, XNode, styled, AtomControl, InfiniteRepeater, _a, loadMoreSet, pagedItemsSetter, scrollToBottom;
+  _export("default", void 0);
   return {
     setters: [function (_tslib) {
       __awaiter = _tslib.__awaiter;
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistDiDISingleton) {
-      DISingleton = _webAtomsCoreDistDiDISingleton.default;
-    }, function (_webAtomsCoreDistDiInject) {
-      Inject = _webAtomsCoreDistDiInject.Inject;
-    }, function (_servicesEntityService) {
-      EntityService = _servicesEntityService.default;
-    }, function (_modelModel) {
-      Email = _modelModel.Email;
-      EmailRecipient = _modelModel.EmailRecipient;
-      MailboxContactEmail = _modelModel.MailboxContactEmail;
-      MailboxEmail = _modelModel.MailboxEmail;
-    }, function (_commonSql) {
-      Sql = _commonSql.Sql;
-    }, function (_webAtomsEmailDomDistDomToString) {
-      DomToString = _webAtomsEmailDomDistDomToString.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
     }, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
     }, function (_webAtomsCoreDistWebControlsAtomControl) {
       AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsCoreDistWebCoreAtomUI) {
-      AncestorEnumerator = _webAtomsCoreDistWebCoreAtomUI.AncestorEnumerator;
-      descendentIterator = _webAtomsCoreDistWebCoreAtomUI.descendentIterator;
-    }, function (_webAtomsDateTimeDistDateTime) {
-      DateTime = _webAtomsDateTimeDistDateTime.default;
-    }, function (_commonEventsCommonEvents) {
-      CommonEvents = _commonEventsCommonEvents.CommonEvents;
-    }, function (_servicesBusyProgress) {
-      BusyProgress = _servicesBusyProgress.default;
-    }, function (_servicesEmailEmailContentDownloader) {
-      EmailContentDownloader = _servicesEmailEmailContentDownloader.default;
-    }, function (_EngagementService) {
-      EngagementService = _EngagementService.default;
-    }, function (_commandsMailAppEvents) {
-      MailAppEvents = _commandsMailAppEvents.MailAppEvents;
-    }, function (_commonFileUrl) {
-      fileUrl = _commonFileUrl.fileUrl;
     }],
     execute: function () {
-      _export("renderMail", renderMail = AtomControl.registerProperty("data-html", "html", (c, e, value) => {
-        var _a, _b, _c, _d;
-        if (!value) {
-          e.innerHTML = "";
-          return;
-        }
-        const thread = value;
-        const mail = thread.email;
-        let html = mail.htmlBody;
-        const msg = document.createElement("div");
-        if (!html) {
-          html !== null && html !== void 0 ? html : html = mail.textBody;
-          for (const iterator of html.split("\n")) {
-            const p = document.createElement("p");
-            p.appendChild(document.createTextNode(iterator));
-            msg.appendChild(p);
-          }
-          e.appendChild(msg);
-          return;
-        }
-        msg.innerHTML = html;
-        let firstVisibleElement = null;
-        for (const node of descendentIterator(msg)) {
-          if (!firstVisibleElement && node.nodeType === Node.TEXT_NODE) {
-            const {
-              parentElement
-            } = node;
-            if (parentElement.tagName !== "STYLE" && ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim())) {
-              firstVisibleElement || (firstVisibleElement = node.parentElement);
-            }
-          }
-          if (node.nodeType !== Node.ELEMENT_NODE) {
-            continue;
-          }
-          const iterator = node;
-          let cid = iterator.getAttribute("data-content-id");
-          if (cid) {
-            const a = (_b = mail.attachments) === null || _b === void 0 ? void 0 : _b.find(x => x.contentID === cid);
-            if (a) {
-              iterator.setAttribute("src", a.url);
-            }
+      loadMoreSet = Symbol("loadMoreSet");
+      styled.css`
+
+    margin: 10px;
+    padding: 10px;
+    & > span {
+        background-color: lightgray;
+        border-radius: 10px;
+        padding: 3px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border: solid 1px gray;
+    }
+
+`.installGlobal("[data-load-more=load-more]");
+      pagedItemsSetter = AtomControl.registerProperty("paged-items", "paged-items", (control, element, value) => {
+        var _b, _c;
+        if (value && value.items) {
+          let cancelToken = control[loadMoreSet];
+          (_b = control.footerRenderer) !== null && _b !== void 0 ? _b : control.footerRenderer = () => XNode.create("div", {
+            "data-load-more": "load-more",
+            "data-click-event": "load-more-items"
+          }, XNode.create("span", {
+            text: "Load more ... "
+          }));
+          (_c = control.headerRenderer) !== null && _c !== void 0 ? _c : control.headerRenderer = () => XNode.create("div", {
+            class: "scroll-header",
+            "style-height": "1px",
+            "style-width": "100%"
+          });
+          if (!cancelToken) {
+            control[loadMoreSet] = cancelToken = new CancelToken();
+            control.bindEvent(control.element, "loadMoreItems", e => {
+              const ce = new CustomEvent("moreItems", {
+                detail: {
+                  pagedItems: control.pagedItems,
+                  cancelToken
+                },
+                bubbles: false
+              });
+              control.element.dispatchEvent(ce);
+            });
+          } else {
+            cancelToken.cancel();
+            control[loadMoreSet] = cancelToken = new CancelToken();
           }
-          if (/^(IMG|VIDEO)$/.test(iterator.tagName)) {
-            firstVisibleElement || (firstVisibleElement = iterator);
-            const src = iterator.getAttribute("src");
-            iterator.setAttribute("controls", "true");
-            iterator.setAttribute("crossorigin", "anonymous");
-            if (src) {
-              if (src.startsWith("cid:")) {
-                cid = src.substring(4);
-                const a = (_c = mail.attachments) === null || _c === void 0 ? void 0 : _c.find(x => x.contentID === cid);
-                if (a) {
-                  iterator.setAttribute("src", fileUrl(a));
-                  a.included = true;
-                }
-              }
-              if (/^http\:\/\//i.test(src)) {
-                iterator.setAttribute("src", src.substring(5));
-              }
-            }
-            continue;
+          const items = control.items;
+          if (items && Array.isArray(items)) {
+            items.clear();
+            items.addAll(value.items);
+          } else {
+            control.items = value.items;
           }
-          if (iterator.tagName === "A") {
-            iterator.target = "_blank";
+          const autoScroll = control.element.getAttribute("data-auto-scroll") !== "false";
+          if (autoScroll) {
+            setTimeout(() => {
+              var _b;
+              const ce = (_b = control.element) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+              const scrollX = window.scrollX;
+              const scrollY = window.scrollY;
+              ce === null || ce === void 0 ? void 0 : ce.scrollIntoView();
+              setTimeout(() => {
+                window.scrollTo(scrollX, scrollY);
+              }, 100);
+            }, 100);
           }
+          control.footer = value.total && value.items && value.items.length < value.total;
+          control.pagedItems = value;
         }
-        const container = document.createElement("div");
-        const style = e.ownerDocument.createElement("style");
-        style.textContent = `
-        video,img {
-            max-width: 100% !important;
-        }
-
-        div[msg] {
-            overflow: visible;
-            display: flex;
-            flex-direction: column;
-            word-break: break-word;
-        }
-    `;
-        container.appendChild(style);
-        msg.setAttribute("msg", "msg");
-        container.appendChild(msg);
-        if (/img|video/i.test(firstVisibleElement === null || firstVisibleElement === void 0 ? void 0 : firstVisibleElement.tagName)) {
-          const root = AncestorEnumerator.find(e, x => x.hasAttribute("data-msg-container"));
-          (root !== null && root !== void 0 ? root : e).setAttribute("has-poster", "true");
-        }
-        if (!thread.timeRead && thread.mailboxID && thread.mailboxID !== ((_d = thread.email) === null || _d === void 0 ? void 0 : _d.senderID)) {
-          const timeRead = DateTime.now;
-          thread.timeRead = timeRead;
-          const control = AtomControl.from(e);
-          const entityService = control.app.resolve(EntityService);
-          entityService.save(MailboxContactEmail.patch(thread, {
-            timeRead
-          })).then(() => {
-            CommonEvents.onThreadMarkedAsRead.dispatchEvent(thread);
-          }, console.error);
+      });
+      scrollToBottom = ({
+        target,
+        detail: {
+          type,
+          index
         }
-        if (window.previewMode) {
-          e.appendChild(container);
+      }) => {
+        if (!(type === "add" && index === 0) && type !== "reset") {
           return;
         }
-        const shadow = e.attachShadow({
-          mode: "open"
-        });
-        shadow.appendChild(container);
         setTimeout(() => {
-          if (msg.scrollWidth > msg.offsetWidth) {
-            msg.style.scale = msg.offsetWidth / msg.scrollWidth + "";
-            msg.style.transformOrigin = "top left";
+          const e = target.firstElementChild;
+          console.log(e);
+          e === null || e === void 0 ? void 0 : e.scrollIntoView(true);
+        }, 1);
+      };
+      _export("default", InfiniteRepeater = class InfiniteRepeater {});
+      _a = InfiniteRepeater;
+      InfiniteRepeater.pagedItems = start => {
+        const setter = start(0);
+        const setters = pagedItemsSetter(Bind.oneWayAsync(setter));
+        setters["event-more-items"] = Bind.event((s, e) => __awaiter(void 0, void 0, void 0, function* () {
+          var _b, _c;
+          const st = (_c = (_b = s.items) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+          if (!st) {
+            return;
           }
-        }, 100);
-        return;
-      }));
-      ConversationService = class ConversationService {
-        closeAllThreads(contact) {
-          return __awaiter(this, void 0, void 0, function* () {
-            contact.dateUpdated = DateTime.now;
-            contact.closeAllConversations = true;
-            yield this.entityService.save(contact, c => c);
-            contact.openThreads = 0;
-            MailAppEvents.mailboxContactUpdated.dispatchEvent(contact);
-          });
-        }
-        closePermanently(contact) {
-          return __awaiter(this, void 0, void 0, function* () {
-            contact.autoClose = !contact.autoClose;
-            contact.dateUpdated = DateTime.now;
-            yield this.entityService.save(contact, c => c);
-            MailAppEvents.mailboxContactUpdated.dispatchEvent(contact);
-          });
+          const cancelToken = s[loadMoreSet];
+          const loader = start(st);
+          const results = yield loader(s, e.target, cancelToken);
+          s.items.addAll(results.items);
+          s.footer = results.items.length > 0;
+        }));
+        return setters;
+      };
+    }
+  };
+});
+//# sourceMappingURL=InfiniteRepeater.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater");
+
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../BlogImageService", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../PostSummary", "../../../common/controls/repeater/InfiniteRepeater", "./BaseChannelPage"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, InjectProperty, BlogImageService, XNode, AtomRepeater, PostSummary, InfiniteRepeater, BaseChannelPage, ChannelHomePage;
+  _export("default", void 0);
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreInjectProperty) {
+      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
+    }, function (_BlogImageService) {
+      BlogImageService = _BlogImageService.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
+      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
+    }, function (_PostSummary) {
+      PostSummary = _PostSummary.default;
+    }, function (_commonControlsRepeaterInfiniteRepeater) {
+      InfiniteRepeater = _commonControlsRepeaterInfiniteRepeater.default;
+    }, function (_BaseChannelPage) {
+      BaseChannelPage = _BaseChannelPage.default;
+    }],
+    execute: function () {
+      _export("default", ChannelHomePage = class ChannelHomePage extends BaseChannelPage {
+        constructor() {
+          super(...arguments);
+          this.search = "";
+          this.tag = "";
+          this.author = "";
+          this.emails = [];
         }
-        getDraft({
-          mailboxID,
-          emailAddressID,
-          email
-        }) {
+        renderBody() {
+          var _a, _b;
           return __awaiter(this, void 0, void 0, function* () {
-            const draft = "draft";
-            return yield this.entityService.query(MailboxContactEmail).where({
-              mailboxID,
-              emailAddressID,
-              draft
-            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === p.emailAddressID && x.email.status === p.draft).orderByDescending(x => x.emailID).include(x => [x.email.recipients, x.email.attachments]).firstOrDefault();
-          });
-        }
-        draft(email, mailboxContacts, create = false, saveAttachments = true, cancelToken) {
-          var _a, _b, _c;
-          return __awaiter(this, void 0, void 0, function* () {
-            if (email === null || email === void 0 ? void 0 : email.emailID) {
-              email.subject || (email.subject = "");
-              email.dateUpdated = DateTime.now;
-              let cloner = this.entityService.cloner(Object.assign({}, email));
-              if (saveAttachments) {
-                cloner = cloner.include(x => x.attachments);
-              }
-              cloner = cloner.include(x => x.mailboxes).include(x => x.recipients).include(x => x.threadContacts);
-              yield this.entityService.save(cloner.copy);
-              return email;
-            }
-            if (create && email) {
-              const recipients = (_a = email.recipients) !== null && _a !== void 0 ? _a : email.recipients = [];
-              const mailboxes = (_b = email.mailboxes) !== null && _b !== void 0 ? _b : email.mailboxes = [];
-              const threads = (_c = email.threadContacts) !== null && _c !== void 0 ? _c : email.threadContacts = [];
-              if (!email.senderID) {
-                throw new Error("SenderID is not set");
-              }
-              email.status = "draft";
-              for (const {
-                mailboxID,
-                emailAddressID
-              } of mailboxContacts) {
-                if (!mailboxes.some(m => m.mailboxID === mailboxID)) {
-                  mailboxes.push(MailboxEmail.create({
-                    mailboxID
-                  }));
-                }
-                if (!recipients.some(r => r.emailAddressID === emailAddressID)) {
-                  recipients.push(EmailRecipient.create({
-                    emailAddressID
-                  }));
-                }
-                if (!threads.some(r => r.mailboxID === mailboxID)) {
-                  threads.push(MailboxContactEmail.create({
-                    mailboxID,
-                    emailAddressID
-                  }));
-                }
-              }
-              yield this.entityService.save(email, c => c.include(x => x.mailboxes).include(x => x.recipients).include(x => x.threadContacts));
-            }
-            return email;
-          });
-        }
-        list({
-          searchItems = null,
-          mailboxID,
-          emailAddressID,
-          start = 0,
-          size = 100,
-          version = 0,
-          cancelToken
-        }) {
-          var _a, _b, _c;
-          return __awaiter(this, void 0, void 0, function* () {
-            let q = this.entityService.query(MailboxContactEmail).where({
-              mailboxID,
-              emailAddressID
-            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === p.emailAddressID && x.engagement === null);
-            if (searchItems) {
-              for (const {
-                tag,
-                text
-              } of searchItems) {
-                if (tag) {
-                  q = q.where({
-                    tag: tag.tagID
-                  }, p => x => x.email.emailTags.some(t => t.tagID === p.tag));
-                  continue;
-                }
-                let search = text;
-                if (!/\%/.test(search)) {
-                  search = `%${search}%`;
-                }
-                q = q.where({
-                  search
-                }, p => x => Sql.text.iLike(x.email.subject, p.search) || Sql.text.iLike(x.email.textBody, p.search) || x.email.attachments.some(a => Sql.text.iLike(a.fileContent.textDocument.searchable, p.search)));
-              }
-            }
-            const emails = yield q.include(x => [x.email.recipients.forEach(r => r.emailAddress), x.email.attachments, x.email.senderUser, x.email.senderEmail]).orderByDescending(x => x.dateReceived).toPagedList({
+            this.tag = (_a = this.parameters.tag) !== null && _a !== void 0 ? _a : "";
+            this.author = (_b = this.parameters.author) !== null && _b !== void 0 ? _b : "";
+            document.title = "Social " + this.channel.emailAddress.emailAddress;
+            return XNode.create("section", {
+              "data-width": "100%"
+            }, XNode.create(AtomRepeater, Object.assign({
+              "data-items-updated-event": "items-updated",
+              "event-items-updated": () => this.itemsUpdated(),
+              "data-auto-scroll": "false",
+              itemRenderer: x => XNode.create(PostSummary, {
+                blogService: this.blogImageService,
+                channel: this.channel,
+                mailboxEmail: x
+              }),
+              items: this.emails
+            }, InfiniteRepeater.pagedItems(start => (c, e, cancelToken) => this.blogService.getEmails({
+              channelID: this.channel.mailboxID,
+              author: this.author,
+              tag: this.tag,
               start,
-              size,
+              search: this.search,
               cancelToken
-            });
-            const tasks = [];
-            const d = BusyProgress.create();
-            try {
-              for (const mce of emails.items) {
-                const {
-                  email
-                } = mce;
-                (_a = email.htmlBody) !== null && _a !== void 0 ? _a : email.htmlBody = "";
-                (_b = email.textBody) !== null && _b !== void 0 ? _b : email.textBody = "";
-                tasks.push(this.downloadEmailContent(mce));
-                tasks.push(this.engagementService.downloadEngagements(email));
-              }
-              yield Promise.all(tasks);
-            } finally {
-              (_c = d === null || d === void 0 ? void 0 : d.dispose) === null || _c === void 0 ? void 0 : _c.call(d);
-            }
-            return emails;
-          });
-        }
-        stopEmail(mce) {
-          return __awaiter(this, void 0, void 0, function* () {
-            const {
-              email
-            } = mce;
-            email.status = "draft";
-            yield this.entityService.save(email, c => c);
-            CommonEvents.onEmailUnscheduled.dispatchEvent(mce);
-          });
-        }
-        downloadEmailContent(mce) {
-          var _a, _b;
-          return __awaiter(this, void 0, void 0, function* () {
-            const {
-              email
-            } = mce;
-            if (email.replyCount) {
-              const children = yield this.entityService.query(Email).where({
-                emailID: email.emailID
-              }, p => x => x.emailID === p.emailID && x.engagement !== null).orderByDescending(x => x.emailID).toPagedList({
-                start: 0,
-                size: 4,
-                cacheVersion: "a",
-                cacheSeconds: 900
-              });
-              email.children = (_a = children === null || children === void 0 ? void 0 : children.items) !== null && _a !== void 0 ? _a : [];
-            } else {
-              (_b = email.children) !== null && _b !== void 0 ? _b : email.children = [];
-            }
-            yield this.emailContentDownloader.download(mce);
-          });
-        }
-        renderText(html) {
-          const div = document.createElement("div");
-          div.innerHTML = html;
-          return div.textContent;
-        }
-        renderHtml(html) {
-          const div = document.createElement("div");
-          div.innerHTML = html;
-          return div.innerHTML;
-        }
-        toHtml(textBody) {
-          return DomToString(XNode.create("div", null, ...textBody.split("\n").map(p => XNode.create("p", {
-            text: p
-          }))));
-        }
-        block(thread) {
-          return __awaiter(this, void 0, void 0, function* () {
-            thread.blocked = !thread.blocked;
-            const cloner = this.entityService.cloner(thread).copy;
-            yield this.entityService.save(cloner);
-            CommonEvents.onThreadMarkedAsBlocked.dispatchEvent(thread);
+            })))));
           });
         }
-        delete(email) {
-          return __awaiter(this, void 0, void 0, function* () {
-            const {
-              emailID,
-              status
-            } = email;
-            yield this.entityService.delete(Email.create({
-              emailID,
-              status
-            }));
-            CommonEvents.onDraftDeleted.dispatchEvent(email);
-          });
+        itemsUpdated() {
+          window.pageReady = true;
         }
-      };
-      __decorate([Inject, __metadata("design:type", EntityService)], ConversationService.prototype, "entityService", void 0);
-      __decorate([Inject, __metadata("design:type", EmailContentDownloader)], ConversationService.prototype, "emailContentDownloader", void 0);
-      __decorate([Inject, __metadata("design:type", EngagementService)], ConversationService.prototype, "engagementService", void 0);
-      ConversationService = __decorate([DISingleton()], ConversationService);
-      _export("default", ConversationService);
+      });
+      __decorate([InjectProperty, __metadata("design:type", BlogImageService)], ChannelHomePage.prototype, "blogImageService", void 0);
     }
   };
 });
-//# sourceMappingURL=ConversationService.js.map
+//# sourceMappingURL=ChannelHomePage.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/pages/ChannelHomePage");
 
-System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context) {
+System.register([], function (_export, _context) {
   "use strict";
 
-  var XNode;
-  function MediaCarousel({
-    email = void 0
-  }) {
-    var _a;
-    if (!((_a = email.attachments) === null || _a === void 0 ? void 0 : _a.length)) {
-      return XNode.create("div", null);
-    }
-    if (email.attachments.length === 1) {
-      if (email.attachments[0].included) {
-        return XNode.create("div", null);
-      }
-    }
-    let children = [];
-    for (const element of email.attachments) {
-      if (/video/i.test(element.contentType)) {
-        children.push(XNode.create("div", {
-          "data-element": "preview"
-        }, XNode.create("video", {
-          controls: "true",
-          src: element.url
-        })));
+  function newCSSStyleDeclaration() {
+    const e = document.createElement("div");
+    return e.style;
+  }
+  function mergeStyle(...styles) {
+    var _a, _b;
+    const s = newCSSStyleDeclaration();
+    for (const iterator of styles) {
+      if (!iterator) {
         continue;
       }
-      if (/image/i.test(element.contentType)) {
-        children.push(XNode.create("div", {
-          "data-element": "preview"
-        }, XNode.create("img", {
-          src: element.url
-        })));
+      if (iterator instanceof CSSStyleDeclaration) {
+        for (let index = 0; index < iterator.length; index++) {
+          const name = iterator[index];
+          let value = (_a = iterator[name]) === null || _a === void 0 ? void 0 : _a.toString();
+          if (value === void 0 || value === null || value === "") {
+            continue;
+          }
+          s[name] = value;
+        }
         continue;
       }
-    }
-    if (children.length) {
-      if (children.length > 1) {
-        children = [XNode.create("carousel-slider", {
-          "data-element": "media"
-        }, ...children)];
+      for (const key in iterator) {
+        if (Object.prototype.hasOwnProperty.call(iterator, key)) {
+          const element = (_b = iterator[key]) === null || _b === void 0 ? void 0 : _b.toString();
+          if (!element) {
+            continue;
+          }
+          s[key] = element;
+        }
       }
-      return XNode.create("div", {
-        "data-element": "media"
-      }, children[0]);
     }
-    return XNode.create("div", {
-      "data-element": "media"
-    });
+    return s;
   }
-  _export("default", MediaCarousel);
+  _export({
+    newCSSStyleDeclaration: newCSSStyleDeclaration,
+    default: mergeStyle
+  });
   return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }],
+    setters: [],
     execute: function () {}
   };
 });
-//# sourceMappingURL=MediaCarousel.js.map
+//# sourceMappingURL=mergeStyle.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/controls/MediaCarousel");
+    AmdLoader.instance.setup("@web-atoms/email-dom/dist/style/mergeStyle");
 
-System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "@web-atoms/core/dist/core/types", "../../web/page/mails/service/ConversationService", "./controls/MediaCarousel", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
+System.register(["../style/mergeStyle"], function (_export, _context) {
   "use strict";
 
-  var XNode, DateFormats, UMD, renderMail, MediaCarousel, styled, commentIcon;
-  function PostView({
-    email = void 0,
-    channel = void 0,
-    itemPath = void 0
-  }) {
-    var _a;
-    const {
-      engagements = []
-    } = email;
-    const isComment = email.parentID !== null;
-    return XNode.create("post-view", {
-      "data-element": "blog-item",
-      "data-comment": isComment,
-      "data-item-path": itemPath,
-      "data-msg-container": "true"
-    }, XNode.create("h4", {
-      "data-element": "title"
-    }, XNode.create("label", {
-      text: isComment ? email.senderName : email.subject
-    })), XNode.create("h6", {
-      "data-element": "date",
-      text: DateFormats.relative.short(email.dateSent)
-    }), !isComment && XNode.create("h5", {
-      "data-element": "author",
-      text: email.senderName
-    }), XNode.create("section", {
-      "data-element": "content"
-    }, !email.parentID ? XNode.create("section", Object.assign({}, renderMail({
-      email
-    }))) : XNode.create("section", {
-      text: email.textBody
-    })), XNode.create(MediaCarousel, {
-      email: email
-    }), XNode.create("footer", null, XNode.create("button", {
-      "data-element": "engage",
-      "data-click-event": "react-email",
-      style: "padding:0; margin:0; border: none; outline: none;"
-    }, XNode.create("img", {
-      src: UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/face-plus.svg"),
-      "style-max-height": "15px",
-      title: "React"
-    })), XNode.create("button", {
-      "data-element": "engage",
-      "data-click-event": "reply-email",
-      style: "padding:0; margin:0; border: none; outline: none;"
-    }, XNode.create("img", {
-      src: UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/comment-plus.svg"),
-      "style-max-height": "15px",
-      title: "React"
-    })), ...engagements.map((x, index) => XNode.create("span", {
-      "data-click-event": x.engagement === commentIcon ? "view-comments" : "engagement-click",
-      "data-element": "engagements",
-      "data-item-path": `email:$, engagement: $.engagements.${index}`,
-      title: `View all ${x.engagement} ${x.count}`,
-      text: `${x.engagement} ${x.count}`
-    })), !email.parentID && XNode.create("share-button", {
-      title: email.subject,
-      href: location.href
-    }, XNode.create("i", {
-      class: "fas fa-share"
-    }), " Share")), XNode.create("section", {
-      "data-element": "comments"
-    }, ...((_a = email.children) !== null && _a !== void 0 ? _a : []).map((c, i) => XNode.create(PostView, {
-      itemPath: `${itemPath ? itemPath : "$"}.children.${i}`,
-      email: c
-    }))));
-  }
-  _export("default", PostView);
+  var newCSSStyleDeclaration, StyleHelper, toStyle;
+  _export("default", void 0);
   return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_commonDateDateFormats) {
-      DateFormats = _commonDateDateFormats.DateFormats;
-    }, function (_webAtomsCoreDistCoreTypes) {
-      UMD = _webAtomsCoreDistCoreTypes.UMD;
-    }, function (_webPageMailsServiceConversationService) {
-      renderMail = _webPageMailsServiceConversationService.renderMail;
-    }, function (_controlsMediaCarousel) {
-      MediaCarousel = _controlsMediaCarousel.default;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
+    setters: [function (_styleMergeStyle) {
+      newCSSStyleDeclaration = _styleMergeStyle.newCSSStyleDeclaration;
     }],
     execute: function () {
-      styled.css`
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto auto auto 1fr auto auto auto;
-
-    padding-top: 10px;
-    padding-bottom: 10px;
-
-    row-gap: 10px;
-
-    & > [data-element=author] {
-        grid-row: 1;
-        grid-column: 1;
-        margin: 0;
-        font-weight: normal;
-        font-size: 0.8rem;
-        line-height: 1;
-        letter-spacing: 0.05rem;
+      toStyle = style => {
+        var _a;
+        if (typeof style === "string") {
+          const css = style;
+          const cs = newCSSStyleDeclaration();
+          cs.cssText = css;
+          return cs;
+        }
+        const s = newCSSStyleDeclaration();
+        if (style instanceof CSSStyleDeclaration) {
+          return style;
+        }
+        for (const key in style) {
+          if (Object.prototype.hasOwnProperty.call(style, key)) {
+            const element = (_a = style[key]) === null || _a === void 0 ? void 0 : _a.toString();
+            if (element === void 0 || element === null || element === "") {
+              continue;
+            }
+            s[key] = element;
+          }
+        }
+        return s;
+      };
+      _export("default", StyleHelper = class StyleHelper {
+        static styleToString(style, props) {
+          var _a;
+          if (!style) {
+            return;
+          }
+          const cs = toStyle(style);
+          if (props) {
+            const ps = toStyle(props);
+            for (let index = 0; index < ps.length; index++) {
+              const key = ps[index];
+              let value = (_a = ps[key]) === null || _a === void 0 ? void 0 : _a.toString();
+              if (value === void 0 || value === null || value === "") {
+                continue;
+              }
+              cs[key] = value;
+            }
+          }
+          const allKeys = [];
+          for (let index = 0; index < cs.length; index++) {
+            const key = cs[index];
+            allKeys.push(key);
+          }
+          for (const key of allKeys) {
+            if (!cs[key]) {
+              cs.removeProperty(key);
+            }
+          }
+          return cs.cssText;
+        }
+      });
     }
+  };
+});
+//# sourceMappingURL=StyleHelper.js.map
 
-    & > [data-element=date] {
-        grid-row: 1;
-        grid-column: 2;
-        margin: 0;
-        font-weight: normal;
-        font-size: 0.8rem;
-        line-height: 1;
-        letter-spacing: 0.05rem;
-    }
+    AmdLoader.instance.setup("@web-atoms/email-dom/dist/dom/StyleHelper");
 
-    & > [data-element=title] {
-        grid-row: 2;
-        grid-column: 1 / span 2;
-        margin: 0;
-        font-weight: normal;
-        font-size: 1.65rem;
-        line-height: 1.2;
-    }
+System.register(["@web-atoms/core/dist/core/XNode", "./dom/StyleHelper"], function (_export, _context) {
+  "use strict";
 
-    & > [data-element=media] {
-        grid-row: 3;
-        grid-column: 1/ span 2;
-        display: grid;
-        background-color: #343a400d;
-        border-radius: 20px;
-        overflow: hidden;
-        & img, & video {
-            max-height: 70vh;
-        }
-        & [data-element=preview] {
-            display: grid;
-            width: 100%;
-            & > * {
-                place-self: center;
-                max-width: 100%;
+  var XNode, StyleHelper;
+  function DomToString(node) {
+    const div = document.createElement("div");
+    DomToElement(div, XNode.create("div", null, node));
+    return div.innerHTML;
+  }
+  function DomToElement(div, node) {
+    var _a;
+    while (typeof node.name === "function") {
+      node = node.name(node.attributes, ...node.children);
+    }
+    const a = node.attributes;
+    if (a) {
+      for (const key in a) {
+        if (Object.prototype.hasOwnProperty.call(a, key)) {
+          let element = a[key];
+          if (element === null || element === void 0) {
+            continue;
+          }
+          if (typeof element === "object" && key === "style") {
+            element = StyleHelper.styleToString(element);
+          } else {
+            element = element.toString();
+          }
+          if (!element) {
+            continue;
+          }
+          switch (key) {
+            case "text":
+              div.textContent = element;
+              continue;
+            case "innerHTML":
+              div.innerHTML = element;
+              continue;
+          }
+          if (key.startsWith("styler-")) {
+            div.setAttribute(key, element);
+            continue;
+          }
+          if (key.startsWith("style") && key.length > 5) {
+            div.style[key.substring(5)] = element;
+            continue;
+          }
+          if (key.startsWith("data") && key.length > 4) {
+            if (key.indexOf("-") !== -1) {
+              div.setAttribute(key, element);
+              continue;
+            }
+            div.dataset[key.substring(4)] = element;
+            continue;
+          }
+          div.setAttribute(key, element);
+        }
+      }
+    }
+    if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
+      return;
+    }
+    for (let iterator of node.children) {
+      if (iterator === false || iterator === void 0 || iterator === null) {
+        continue;
+      }
+      if (typeof iterator !== "object") {
+        div.appendChild(document.createTextNode(iterator.toString()));
+        continue;
+      }
+      while (typeof iterator.name === "function") {
+        iterator = iterator.name(iterator.attributes, ...iterator.children);
+      }
+      const child = document.createElement(iterator.name);
+      div.appendChild(child);
+      DomToElement(child, iterator);
+    }
+  }
+  _export({
+    default: DomToString,
+    DomToElement: DomToElement
+  });
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_domStyleHelper) {
+      StyleHelper = _domStyleHelper.default;
+    }],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=DomToString.js.map
+
+    AmdLoader.instance.setup("@web-atoms/email-dom/dist/DomToString");
+
+System.register(["@web-atoms/core/dist/core/EventScope"], function (_export, _context) {
+  "use strict";
+
+  var EventScope, CommonEvents;
+  return {
+    setters: [function (_webAtomsCoreDistCoreEventScope) {
+      EventScope = _webAtomsCoreDistCoreEventScope.default;
+    }],
+    execute: function () {
+      _export("CommonEvents", CommonEvents = {
+        onThreadMarkedAsRead: EventScope.create(),
+        onThreadMarkedAsBlocked: EventScope.create(),
+        onDraftDeleted: EventScope.create(),
+        onFileDeleted: EventScope.create(),
+        onEmailScheduled: EventScope.create(),
+        onEmailUnscheduled: EventScope.create()
+      });
+    }
+  };
+});
+//# sourceMappingURL=CommonEvents.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/events/CommonEvents");
+
+System.register(["@web-atoms/core/dist/core/EventScope"], function (_export, _context) {
+  "use strict";
+
+  var EventScope, MailAppEvents;
+  return {
+    setters: [function (_webAtomsCoreDistCoreEventScope) {
+      EventScope = _webAtomsCoreDistCoreEventScope.default;
+    }],
+    execute: function () {
+      _export("MailAppEvents", MailAppEvents = {
+        mailboxContactUpdated: EventScope.create()
+      });
+    }
+  };
+});
+//# sourceMappingURL=MailAppEvents.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/commands/MailAppEvents");
+
+System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "../../../../services/EntityService", "../../../../model/model", "../../../../common/Sql", "@web-atoms/email-dom/dist/DomToString", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/core/AtomUI", "@web-atoms/date-time/dist/DateTime", "../../../../common/events/CommonEvents", "../../../../services/BusyProgress", "../../../../services/email/EmailContentDownloader", "./EngagementService", "../../../commands/MailAppEvents", "../../../../common/fileUrl"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, Email, EmailRecipient, MailboxContactEmail, MailboxEmail, Sql, DomToString, XNode, AtomControl, AncestorEnumerator, descendentIterator, DateTime, CommonEvents, BusyProgress, EmailContentDownloader, EngagementService, MailAppEvents, fileUrl, renderMail, ConversationService;
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistDiDISingleton) {
+      DISingleton = _webAtomsCoreDistDiDISingleton.default;
+    }, function (_webAtomsCoreDistDiInject) {
+      Inject = _webAtomsCoreDistDiInject.Inject;
+    }, function (_servicesEntityService) {
+      EntityService = _servicesEntityService.default;
+    }, function (_modelModel) {
+      Email = _modelModel.Email;
+      EmailRecipient = _modelModel.EmailRecipient;
+      MailboxContactEmail = _modelModel.MailboxContactEmail;
+      MailboxEmail = _modelModel.MailboxEmail;
+    }, function (_commonSql) {
+      Sql = _commonSql.Sql;
+    }, function (_webAtomsEmailDomDistDomToString) {
+      DomToString = _webAtomsEmailDomDistDomToString.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebCoreAtomUI) {
+      AncestorEnumerator = _webAtomsCoreDistWebCoreAtomUI.AncestorEnumerator;
+      descendentIterator = _webAtomsCoreDistWebCoreAtomUI.descendentIterator;
+    }, function (_webAtomsDateTimeDistDateTime) {
+      DateTime = _webAtomsDateTimeDistDateTime.default;
+    }, function (_commonEventsCommonEvents) {
+      CommonEvents = _commonEventsCommonEvents.CommonEvents;
+    }, function (_servicesBusyProgress) {
+      BusyProgress = _servicesBusyProgress.default;
+    }, function (_servicesEmailEmailContentDownloader) {
+      EmailContentDownloader = _servicesEmailEmailContentDownloader.default;
+    }, function (_EngagementService) {
+      EngagementService = _EngagementService.default;
+    }, function (_commandsMailAppEvents) {
+      MailAppEvents = _commandsMailAppEvents.MailAppEvents;
+    }, function (_commonFileUrl) {
+      fileUrl = _commonFileUrl.fileUrl;
+    }],
+    execute: function () {
+      _export("renderMail", renderMail = AtomControl.registerProperty("data-html", "html", (c, e, value) => {
+        var _a, _b, _c, _d;
+        if (!value) {
+          e.innerHTML = "";
+          return;
+        }
+        const thread = value;
+        const mail = thread.email;
+        let html = mail.htmlBody;
+        const msg = document.createElement("div");
+        if (!html) {
+          html !== null && html !== void 0 ? html : html = mail.textBody;
+          for (const iterator of html.split("\n")) {
+            const p = document.createElement("p");
+            p.appendChild(document.createTextNode(iterator));
+            msg.appendChild(p);
+          }
+          e.appendChild(msg);
+          return;
+        }
+        msg.innerHTML = html;
+        let firstVisibleElement = null;
+        for (const node of descendentIterator(msg)) {
+          if (!firstVisibleElement && node.nodeType === Node.TEXT_NODE) {
+            const {
+              parentElement
+            } = node;
+            if (parentElement.tagName !== "STYLE" && ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim())) {
+              firstVisibleElement || (firstVisibleElement = node.parentElement);
+            }
+          }
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            continue;
+          }
+          const iterator = node;
+          let cid = iterator.getAttribute("data-content-id");
+          if (cid) {
+            const a = (_b = mail.attachments) === null || _b === void 0 ? void 0 : _b.find(x => x.contentID === cid);
+            if (a) {
+              iterator.setAttribute("src", a.url);
+            }
+          }
+          if (/^(IMG|VIDEO)$/.test(iterator.tagName)) {
+            firstVisibleElement || (firstVisibleElement = iterator);
+            const src = iterator.getAttribute("src");
+            iterator.setAttribute("controls", "true");
+            iterator.setAttribute("crossorigin", "anonymous");
+            if (src) {
+              if (src.startsWith("cid:")) {
+                cid = src.substring(4);
+                const a = (_c = mail.attachments) === null || _c === void 0 ? void 0 : _c.find(x => x.contentID === cid);
+                if (a) {
+                  iterator.setAttribute("src", fileUrl(a));
+                  a.included = true;
+                }
+              }
+              if (/^http\:\/\//i.test(src)) {
+                iterator.setAttribute("src", src.substring(5));
+              }
+            }
+            continue;
+          }
+          if (iterator.tagName === "A") {
+            iterator.target = "_blank";
+          }
+        }
+        const container = document.createElement("div");
+        const style = e.ownerDocument.createElement("style");
+        style.textContent = `
+        video,img {
+            max-width: 100% !important;
+        }
+
+        div[msg] {
+            overflow: visible;
+            display: flex;
+            flex-direction: column;
+            word-break: break-word;
+        }
+    `;
+        container.appendChild(style);
+        msg.setAttribute("msg", "msg");
+        container.appendChild(msg);
+        if (/img|video/i.test(firstVisibleElement === null || firstVisibleElement === void 0 ? void 0 : firstVisibleElement.tagName)) {
+          const root = AncestorEnumerator.find(e, x => x.hasAttribute("data-msg-container"));
+          (root !== null && root !== void 0 ? root : e).setAttribute("has-poster", "true");
+        }
+        if (!thread.timeRead && thread.mailboxID && thread.mailboxID !== ((_d = thread.email) === null || _d === void 0 ? void 0 : _d.senderID)) {
+          const timeRead = DateTime.now;
+          thread.timeRead = timeRead;
+          const control = AtomControl.from(e);
+          const entityService = control.app.resolve(EntityService);
+          entityService.save(MailboxContactEmail.patch(thread, {
+            timeRead
+          })).then(() => {
+            CommonEvents.onThreadMarkedAsRead.dispatchEvent(thread);
+          }, console.error);
+        }
+        if (window.previewMode) {
+          e.appendChild(container);
+          return;
+        }
+        const shadow = e.attachShadow({
+          mode: "open"
+        });
+        shadow.appendChild(container);
+        setTimeout(() => {
+          if (msg.scrollWidth > msg.offsetWidth) {
+            msg.style.scale = msg.offsetWidth / msg.scrollWidth + "";
+            msg.style.transformOrigin = "top left";
+          }
+        }, 100);
+        return;
+      }));
+      ConversationService = class ConversationService {
+        closeAllThreads(contact) {
+          return __awaiter(this, void 0, void 0, function* () {
+            contact.dateUpdated = DateTime.now;
+            contact.closeAllConversations = true;
+            yield this.entityService.save(contact, c => c);
+            contact.openThreads = 0;
+            MailAppEvents.mailboxContactUpdated.dispatchEvent(contact);
+          });
+        }
+        closePermanently(contact) {
+          return __awaiter(this, void 0, void 0, function* () {
+            contact.autoClose = !contact.autoClose;
+            contact.dateUpdated = DateTime.now;
+            yield this.entityService.save(contact, c => c);
+            MailAppEvents.mailboxContactUpdated.dispatchEvent(contact);
+          });
+        }
+        getDraft({
+          mailboxID,
+          emailAddressID,
+          email
+        }) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const draft = "draft";
+            return yield this.entityService.query(MailboxContactEmail).where({
+              mailboxID,
+              emailAddressID,
+              draft
+            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === p.emailAddressID && x.email.status === p.draft).orderByDescending(x => x.emailID).include(x => [x.email.recipients, x.email.attachments]).firstOrDefault();
+          });
+        }
+        draft(email, mailboxContacts, create = false, saveAttachments = true, cancelToken) {
+          var _a, _b, _c;
+          return __awaiter(this, void 0, void 0, function* () {
+            if (email === null || email === void 0 ? void 0 : email.emailID) {
+              email.subject || (email.subject = "");
+              email.dateUpdated = DateTime.now;
+              let cloner = this.entityService.cloner(Object.assign({}, email));
+              if (saveAttachments) {
+                cloner = cloner.include(x => x.attachments);
+              }
+              cloner = cloner.include(x => x.mailboxes).include(x => x.recipients).include(x => x.threadContacts);
+              yield this.entityService.save(cloner.copy);
+              return email;
+            }
+            if (create && email) {
+              const recipients = (_a = email.recipients) !== null && _a !== void 0 ? _a : email.recipients = [];
+              const mailboxes = (_b = email.mailboxes) !== null && _b !== void 0 ? _b : email.mailboxes = [];
+              const threads = (_c = email.threadContacts) !== null && _c !== void 0 ? _c : email.threadContacts = [];
+              if (!email.senderID) {
+                throw new Error("SenderID is not set");
+              }
+              email.status = "draft";
+              for (const {
+                mailboxID,
+                emailAddressID
+              } of mailboxContacts) {
+                if (!mailboxes.some(m => m.mailboxID === mailboxID)) {
+                  mailboxes.push(MailboxEmail.create({
+                    mailboxID
+                  }));
+                }
+                if (!recipients.some(r => r.emailAddressID === emailAddressID)) {
+                  recipients.push(EmailRecipient.create({
+                    emailAddressID
+                  }));
+                }
+                if (!threads.some(r => r.mailboxID === mailboxID)) {
+                  threads.push(MailboxContactEmail.create({
+                    mailboxID,
+                    emailAddressID
+                  }));
+                }
+              }
+              yield this.entityService.save(email, c => c.include(x => x.mailboxes).include(x => x.recipients).include(x => x.threadContacts));
+            }
+            return email;
+          });
+        }
+        list({
+          searchItems = null,
+          mailboxID,
+          emailAddressID,
+          start = 0,
+          size = 100,
+          version = 0,
+          cancelToken
+        }) {
+          var _a, _b, _c;
+          return __awaiter(this, void 0, void 0, function* () {
+            let q = this.entityService.query(MailboxContactEmail).where({
+              mailboxID,
+              emailAddressID
+            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === p.emailAddressID && x.engagement === null);
+            if (searchItems) {
+              for (const {
+                tag,
+                text
+              } of searchItems) {
+                if (tag) {
+                  q = q.where({
+                    tag: tag.tagID
+                  }, p => x => x.email.emailTags.some(t => t.tagID === p.tag));
+                  continue;
+                }
+                let search = text;
+                if (!/\%/.test(search)) {
+                  search = `%${search}%`;
+                }
+                q = q.where({
+                  search
+                }, p => x => Sql.text.iLike(x.email.subject, p.search) || Sql.text.iLike(x.email.textBody, p.search) || x.email.attachments.some(a => Sql.text.iLike(a.fileContent.textDocument.searchable, p.search)));
+              }
+            }
+            const emails = yield q.include(x => [x.email.recipients.forEach(r => r.emailAddress), x.email.attachments, x.email.senderUser, x.email.senderEmail]).orderByDescending(x => x.dateReceived).toPagedList({
+              start,
+              size,
+              cancelToken
+            });
+            const tasks = [];
+            const d = BusyProgress.create();
+            try {
+              for (const mce of emails.items) {
+                const {
+                  email
+                } = mce;
+                (_a = email.htmlBody) !== null && _a !== void 0 ? _a : email.htmlBody = "";
+                (_b = email.textBody) !== null && _b !== void 0 ? _b : email.textBody = "";
+                tasks.push(this.downloadEmailContent(mce));
+                tasks.push(this.engagementService.downloadEngagements(email));
+              }
+              yield Promise.all(tasks);
+            } finally {
+              (_c = d === null || d === void 0 ? void 0 : d.dispose) === null || _c === void 0 ? void 0 : _c.call(d);
+            }
+            return emails;
+          });
+        }
+        stopEmail(mce) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              email
+            } = mce;
+            email.status = "draft";
+            yield this.entityService.save(email, c => c);
+            CommonEvents.onEmailUnscheduled.dispatchEvent(mce);
+          });
+        }
+        downloadEmailContent(mce) {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              email
+            } = mce;
+            if (email.replyCount) {
+              const children = yield this.entityService.query(Email).where({
+                emailID: email.emailID
+              }, p => x => x.emailID === p.emailID && x.engagement !== null).orderByDescending(x => x.emailID).toPagedList({
+                start: 0,
+                size: 4,
+                cacheVersion: "a",
+                cacheSeconds: 900
+              });
+              email.children = (_a = children === null || children === void 0 ? void 0 : children.items) !== null && _a !== void 0 ? _a : [];
+            } else {
+              (_b = email.children) !== null && _b !== void 0 ? _b : email.children = [];
             }
+            yield this.emailContentDownloader.download(mce);
+          });
         }
-        & > carousel-slider {
-            place-self: stretch;
+        renderText(html) {
+          const div = document.createElement("div");
+          div.innerHTML = html;
+          return div.textContent;
         }
-    }
-
-    &[has-poster] > [data-element=media] {
-        grid-row: 5;
-        grid-column: 1 / span 3;
-    }
-
-    & > [data-element=content] {
-        grid-row: 4;
-        grid-column: 1 / span 2;
-    }
-
-    & > footer {
-        grid-row: 6;
-        padding: 10px;
-        grid-column: 1/ span 2;
-        background-color: canvas;
-        color: canvastext;
-        display: flex;
-        gap: 5px;
-        flex-wrap: wrap;
-
-        & > [data-element=engagements] {
-            border-radius: 9999px;
-            padding: 2px;
-            padding-left: 10px;
-            padding-right: 10px;
-            border: solid 1px lightgray;
-            cursor: pointer;
+        renderHtml(html) {
+          const div = document.createElement("div");
+          div.innerHTML = html;
+          return div.innerHTML;
         }
-    }
-
-    & > [data-element=comments] {
-        grid-row: 7;
-    }
-
-    `.installGlobal("post-view");
-      commentIcon = "💬";
+        toHtml(textBody) {
+          return DomToString(XNode.create("div", null, ...textBody.split("\n").map(p => XNode.create("p", {
+            text: p
+          }))));
+        }
+        block(thread) {
+          return __awaiter(this, void 0, void 0, function* () {
+            thread.blocked = !thread.blocked;
+            const cloner = this.entityService.cloner(thread).copy;
+            yield this.entityService.save(cloner);
+            CommonEvents.onThreadMarkedAsBlocked.dispatchEvent(thread);
+          });
+        }
+        delete(email) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              emailID,
+              status
+            } = email;
+            yield this.entityService.delete(Email.create({
+              emailID,
+              status
+            }));
+            CommonEvents.onDraftDeleted.dispatchEvent(email);
+          });
+        }
+      };
+      __decorate([Inject, __metadata("design:type", EntityService)], ConversationService.prototype, "entityService", void 0);
+      __decorate([Inject, __metadata("design:type", EmailContentDownloader)], ConversationService.prototype, "emailContentDownloader", void 0);
+      __decorate([Inject, __metadata("design:type", EngagementService)], ConversationService.prototype, "engagementService", void 0);
+      ConversationService = __decorate([DISingleton()], ConversationService);
+      _export("default", ConversationService);
     }
   };
 });
-//# sourceMappingURL=PostView.js.map
+//# sourceMappingURL=ConversationService.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/PostView");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "../BlogImageService", "../BlogService", "@web-atoms/core/dist/core/XNode", "../controls/BlogHeader", "@web-atoms/core/dist/core/Bind", "../controls/RecentPosts", "../controls/TagCloud", "../controls/UpcomingEvents", "../controls/PostList", "../PostView", "../UrlService"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, ContentPage, BlogImageService, BlogService, XNode, BlogHeader, Bind, RecentPosts, TagCloud, UpcomingEvents, PopularPosts, PostView, UrlService, ChannelDetailPage;
-  _export("default", void 0);
+  var XNode;
+  function MediaCarousel({
+    email = void 0
+  }) {
+    var _a;
+    if (!((_a = email.attachments) === null || _a === void 0 ? void 0 : _a.length)) {
+      return XNode.create("div", null);
+    }
+    if (email.attachments.length === 1) {
+      if (email.attachments[0].included) {
+        return XNode.create("div", null);
+      }
+    }
+    let children = [];
+    for (const element of email.attachments) {
+      if (/video/i.test(element.contentType)) {
+        children.push(XNode.create("div", {
+          "data-element": "preview"
+        }, XNode.create("video", {
+          controls: "true",
+          src: element.url
+        })));
+        continue;
+      }
+      if (/image/i.test(element.contentType)) {
+        children.push(XNode.create("div", {
+          "data-element": "preview"
+        }, XNode.create("img", {
+          src: element.url
+        })));
+        continue;
+      }
+    }
+    if (children.length) {
+      if (children.length > 1) {
+        children = [XNode.create("carousel-slider", {
+          "data-element": "media"
+        }, ...children)];
+      }
+      return XNode.create("div", {
+        "data-element": "media"
+      }, children[0]);
+    }
+    return XNode.create("div", {
+      "data-element": "media"
+    });
+  }
+  _export("default", MediaCarousel);
   return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistCoreInjectProperty) {
-      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
-    }, function (_webAtomsWebControlsDistMobileAppMobileApp) {
-      ContentPage = _webAtomsWebControlsDistMobileAppMobileApp.ContentPage;
-    }, function (_BlogImageService) {
-      BlogImageService = _BlogImageService.default;
-    }, function (_BlogService) {
-      BlogService = _BlogService.default;
-    }, function (_webAtomsCoreDistCoreXNode) {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_controlsBlogHeader) {
-      BlogHeader = _controlsBlogHeader.default;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_controlsRecentPosts) {
-      RecentPosts = _controlsRecentPosts.default;
-    }, function (_controlsTagCloud) {
-      TagCloud = _controlsTagCloud.default;
-    }, function (_controlsUpcomingEvents) {
-      UpcomingEvents = _controlsUpcomingEvents.default;
-    }, function (_controlsPostList) {
-      PopularPosts = _controlsPostList.default;
-    }, function (_PostView) {
-      PostView = _PostView.default;
-    }, function (_UrlService) {
-      UrlService = _UrlService.UrlService;
     }],
-    execute: function () {
-      _export("default", ChannelDetailPage = class ChannelDetailPage extends ContentPage {
-        constructor() {
-          super(...arguments);
-          this.search = "";
-          this.tag = "";
-          this.author = "";
-          this.emails = [];
-          this.email = null;
-        }
-        init() {
-          var _a;
-          var _b;
-          return __awaiter(this, void 0, void 0, function* () {
-            const {
-              channel,
-              slug
-            } = this.parameters;
-            this.channel = yield this.blogService.getChannel(void 0, channel, void 0);
-            const {
-              mailboxID: channelID
-            } = this.channel;
-            document.title = "Social " + this.channel.emailAddress.emailAddress;
-            const emailID = UrlService.getEmailID(slug);
-            this.email = yield this.blogService.getEmail({
-              emailID,
-              channelID,
-              channel
-            });
-            (_a = (_b = this.email).engagements) !== null && _a !== void 0 ? _a : _b.engagements = [];
-            this.emails = [this.email];
-            this.renderer = XNode.create("section", {
-              "data-blog-list": "blog-list"
-            }, XNode.create(BlogHeader, {
-              search: Bind.twoWaysImmediate(() => this.search),
-              channel: this.channel
-            }), XNode.create("section", {
-              "data-width": "100%"
-            }, XNode.create(PostView, {
-              channel: this.channel,
-              email: this.emails[0]
-            })), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(UpcomingEvents, {
-              channel: this.channel
-            }), XNode.create(PopularPosts, null), XNode.create(RecentPosts, null)), XNode.create("footer", null));
-          });
-        }
-        itemsUpdated() {
-          window.pageReady = true;
-        }
-      });
-      __decorate([InjectProperty, __metadata("design:type", BlogService)], ChannelDetailPage.prototype, "blogService", void 0);
-      __decorate([InjectProperty, __metadata("design:type", BlogImageService)], ChannelDetailPage.prototype, "blogImageService", void 0);
-    }
+    execute: function () {}
   };
 });
-//# sourceMappingURL=ChannelDetailPage.js.map
+//# sourceMappingURL=MediaCarousel.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/pages/ChannelDetailPage");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/controls/MediaCarousel");
 
-System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "./UrlService", "@social-mail/social-mail-client/content/images/gif/loader.gif", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "@web-atoms/core/dist/core/types", "../../web/page/mails/service/ConversationService", "./controls/MediaCarousel", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  var XNode, DateFormats, UrlService, loaderImage, Bind, styled, commentIcon;
-  function PostSummary({
+  var XNode, DateFormats, UMD, renderMail, MediaCarousel, styled, commentIcon;
+  function PostView({
+    email = void 0,
     channel = void 0,
-    mailboxEmail = void 0,
-    itemPath = void 0,
-    blogService = void 0
+    itemPath = void 0
   }) {
-    var _a, _b;
-    const {
-      mailboxID,
-      email
-    } = mailboxEmail;
+    var _a;
     const {
       engagements = []
     } = email;
     const isComment = email.parentID !== null;
-    const firstMedia = (_a = email.attachments) === null || _a === void 0 ? void 0 : _a.find(x => /(image|video)\//i.test(x.contentType));
-    const href = UrlService.toBlogUrl(Object.assign({
-      mailbox: channel
-    }, mailboxEmail));
-    return XNode.create("post-summary", {
+    return XNode.create("post-view", {
+      "data-element": "blog-item",
       "data-comment": isComment,
-      "data-item-path": itemPath
-    }, firstMedia ? XNode.create("a", {
-      "data-element": "preview",
-      href: href
-    }, XNode.create("img", {
-      src: Bind.oneTimeAsync(() => blogService.getImage(mailboxEmail), loaderImage)
-    })) : XNode.create("a", {
-      "data-element": "preview-text",
-      href: href,
-      text: (_b = isComment ? email.senderName : email.subject) === null || _b === void 0 ? void 0 : _b.trim()
-    }), XNode.create("a", {
-      "data-element": "title",
-      href: href,
+      "data-item-path": itemPath,
+      "data-msg-container": "true"
+    }, XNode.create("h4", {
+      "data-element": "title"
+    }, XNode.create("label", {
       text: isComment ? email.senderName : email.subject
-    }), XNode.create("h6", {
+    })), XNode.create("h6", {
       "data-element": "date",
-      href: href,
       text: DateFormats.relative.short(email.dateSent)
     }), !isComment && XNode.create("h5", {
-      href: href,
       "data-element": "author",
       text: email.senderName
-    }), XNode.create("section", null, XNode.create("section", null, email.textBody.substring(0, 110).trim(), "\xa0", XNode.create("a", {
-      href: href
-    }, "Read More ..."))), XNode.create("footer", null, ...engagements.map(x => XNode.create("span", {
-      "data-click-event": x.engagement === commentIcon ? "view-comments" : "none",
+    }), XNode.create("section", {
+      "data-element": "content"
+    }, !email.parentID ? XNode.create("section", Object.assign({}, renderMail({
+      email
+    }))) : XNode.create("section", {
+      text: email.textBody
+    })), XNode.create(MediaCarousel, {
+      email: email
+    }), XNode.create("footer", null, XNode.create("button", {
+      "data-element": "engage",
+      "data-click-event": "react-email",
+      style: "padding:0; margin:0; border: none; outline: none;"
+    }, XNode.create("img", {
+      src: UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/face-plus.svg"),
+      "style-max-height": "15px",
+      title: "React"
+    })), XNode.create("button", {
+      "data-element": "engage",
+      "data-click-event": "reply-email",
+      style: "padding:0; margin:0; border: none; outline: none;"
+    }, XNode.create("img", {
+      src: UMD.resolvePath("@social-mail/social-mail-client/content/images/icons/comment-plus.svg"),
+      "style-max-height": "15px",
+      title: "React"
+    })), ...engagements.map((x, index) => XNode.create("span", {
+      "data-click-event": x.engagement === commentIcon ? "view-comments" : "engagement-click",
       "data-element": "engagements",
+      "data-item-path": `email:$, engagement: $.engagements.${index}`,
       title: `View all ${x.engagement} ${x.count}`,
       text: `${x.engagement} ${x.count}`
+    })), !email.parentID && XNode.create("share-button", {
+      title: email.subject,
+      href: location.href
+    }, XNode.create("i", {
+      class: "fas fa-share"
+    }), " Share")), XNode.create("section", {
+      "data-element": "comments"
+    }, ...((_a = email.children) !== null && _a !== void 0 ? _a : []).map((c, i) => XNode.create(PostView, {
+      itemPath: `${itemPath ? itemPath : "$"}.children.${i}`,
+      email: c
     }))));
   }
-  _export("default", PostSummary);
+  _export("default", PostView);
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_commonDateDateFormats) {
       DateFormats = _commonDateDateFormats.DateFormats;
-    }, function (_UrlService) {
-      UrlService = _UrlService.UrlService;
-    }, function (_socialMailSocialMailClientContentImagesGifLoaderGif) {
-      loaderImage = _socialMailSocialMailClientContentImagesGifLoaderGif.default;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      UMD = _webAtomsCoreDistCoreTypes.UMD;
+    }, function (_webPageMailsServiceConversationService) {
+      renderMail = _webPageMailsServiceConversationService.renderMail;
+    }, function (_controlsMediaCarousel) {
+      MediaCarousel = _controlsMediaCarousel.default;
     }, function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
     }],
     execute: function () {
-      commentIcon = "💬";
       styled.css`
-        
-        display: grid;
-        grid-template-columns: 1fr 2fr auto;
-        grid-template-rows: auto auto 1fr auto;
-
-        padding-bottom: 10px;
-        padding-right: 20px;
-
-        border-bottom: solid 1px lightgray;
-
-        max-height: 285px;
-        height: 285px;
-
-        overflow: hidden;
-
-        margin-bottom: 10px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto 1fr auto auto auto;
 
-        gap: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
 
-        row-gap: 20px;
+    row-gap: 10px;
 
-        & > [data-element=preview] {
-            grid-row: 1 / span 4;
-            grid-column: 1;
-            background-color: #343a400d;
-            object-fit: contain;
-            width: 275px;
-            height: 275px;
-            border: none;
-            outline: none;
-            text-decoration: none;
+    & > [data-element=author] {
+        grid-row: 1;
+        grid-column: 1;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
 
-            border-radius: 10px;
+    & > [data-element=date] {
+        grid-row: 1;
+        grid-column: 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
 
-            & > img {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-            }
+    & > [data-element=title] {
+        grid-row: 2;
+        grid-column: 1 / span 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 1.65rem;
+        line-height: 1.2;
+    }
 
+    & > [data-element=media] {
+        grid-row: 3;
+        grid-column: 1/ span 2;
+        display: grid;
+        background-color: #343a400d;
+        border-radius: 20px;
+        overflow: hidden;
+        & img, & video {
+            max-height: 70vh;
         }
-        
-        & > [data-element=preview-text] {
-            grid-row: 1 / span 4;
-            grid-column: 1;
-            background-color: gray;
-            max-width: 100%;
-            max-height: 120px;
-            height: 120px;
-            border: none;
-            outline: none;
-            text-decoration: none;
-            font-size: 20px;
-            line-height: 30px;
-            color: white;
-            padding: 10px;
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
-            text-overflow: ellipsis;
-            overflow:hidden;
-            position: relative;
-            &::after {
-                position: absolute;
-                left: 0;
-                right: 0;
-                top: 0;
-                bottom: 0;
-                content: "";
-                pointer-events: none;
-                background: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.5) 16px);
-            }
-        }
-
-        & > [data-element=title] {
-            grid-row: 2;
-            grid-column: 2 / span 2;
-            font-size: 1.5em;
-            line-height: 1.2;
-            text-decoration: none;
-            margin: 0;
-            & a {
-                text-decoration: none;
+        & [data-element=preview] {
+            display: grid;
+            width: 100%;
+            & > * {
+                place-self: center;
+                max-width: 100%;
             }
         }
-
-        & > [data-element=date] {
-            grid-row: 1; 
-            grid-column: 3;
-            font-size: 0.70rem;
-            line-height: 1;
-            letter-spacing:0.05rem;
-            margin: 0;
-        }
-
-        & > [data-element=author] {
-            grid-row: 1;
-            grid-column: 2;
-            font-size: 0.70rem;
-            line-height: 1;
-            letter-spacing:0.05rem;
-            margin: 0;
-        }
-
-        & > section {
-            grid-row: 3;
-            grid-column: 2 / span 2;
-            position: relative;
-        }
-
-        & > footer {
-            grid-row: 4;
-            grid-column: 1 / span 3;
+        & > carousel-slider {
+            place-self: stretch;
         }
+    }
 
-    `.installGlobal("post-summary");
-      document.body.addEventListener("click", e => {
-        let target = e.target;
-        do {
-          const href = target.tagName === "POST-SUMMARY" && target.getAttribute("data-link");
-          if (href) {
-            location.href = href;
-            return;
-          }
-          target = target.parentElement;
-        } while (target);
-      });
+    &[has-poster] > [data-element=media] {
+        grid-row: 5;
+        grid-column: 1 / span 3;
     }
-  };
-});
-//# sourceMappingURL=PostSummary.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/PostSummary");
+    & > [data-element=content] {
+        grid-row: 4;
+        grid-column: 1 / span 2;
+    }
 
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/controls/AtomControl"], function (_export, _context) {
-  "use strict";
+    & > footer {
+        grid-row: 6;
+        padding: 10px;
+        grid-column: 1/ span 2;
+        background-color: canvas;
+        color: canvastext;
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
 
-  var __awaiter, Bind, CancelToken, XNode, styled, AtomControl, InfiniteRepeater, _a, loadMoreSet, pagedItemsSetter, scrollToBottom;
-  _export("default", void 0);
-  return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistCoreTypes) {
-      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }],
-    execute: function () {
-      loadMoreSet = Symbol("loadMoreSet");
-      styled.css`
+        & > [data-element=engagements] {
+            border-radius: 9999px;
+            padding: 2px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border: solid 1px lightgray;
+            cursor: pointer;
+        }
+    }
 
-    margin: 10px;
-    padding: 10px;
-    & > span {
-        background-color: lightgray;
-        border-radius: 10px;
-        padding: 3px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border: solid 1px gray;
+    & > [data-element=comments] {
+        grid-row: 7;
     }
 
-`.installGlobal("[data-load-more=load-more]");
-      pagedItemsSetter = AtomControl.registerProperty("paged-items", "paged-items", (control, element, value) => {
-        var _b, _c;
-        if (value && value.items) {
-          let cancelToken = control[loadMoreSet];
-          (_b = control.footerRenderer) !== null && _b !== void 0 ? _b : control.footerRenderer = () => XNode.create("div", {
-            "data-load-more": "load-more",
-            "data-click-event": "load-more-items"
-          }, XNode.create("span", {
-            text: "Load more ... "
-          }));
-          (_c = control.headerRenderer) !== null && _c !== void 0 ? _c : control.headerRenderer = () => XNode.create("div", {
-            class: "scroll-header",
-            "style-height": "1px",
-            "style-width": "100%"
-          });
-          if (!cancelToken) {
-            control[loadMoreSet] = cancelToken = new CancelToken();
-            control.bindEvent(control.element, "loadMoreItems", e => {
-              const ce = new CustomEvent("moreItems", {
-                detail: {
-                  pagedItems: control.pagedItems,
-                  cancelToken
-                },
-                bubbles: false
-              });
-              control.element.dispatchEvent(ce);
-            });
-          } else {
-            cancelToken.cancel();
-            control[loadMoreSet] = cancelToken = new CancelToken();
-          }
-          const items = control.items;
-          if (items && Array.isArray(items)) {
-            items.clear();
-            items.addAll(value.items);
-          } else {
-            control.items = value.items;
-          }
-          const autoScroll = control.element.getAttribute("data-auto-scroll") !== "false";
-          if (autoScroll) {
-            setTimeout(() => {
-              var _b;
-              const ce = (_b = control.element) === null || _b === void 0 ? void 0 : _b.firstElementChild;
-              const scrollX = window.scrollX;
-              const scrollY = window.scrollY;
-              ce === null || ce === void 0 ? void 0 : ce.scrollIntoView();
-              setTimeout(() => {
-                window.scrollTo(scrollX, scrollY);
-              }, 100);
-            }, 100);
-          }
-          control.footer = value.total && value.items && value.items.length < value.total;
-          control.pagedItems = value;
-        }
-      });
-      scrollToBottom = ({
-        target,
-        detail: {
-          type,
-          index
-        }
-      }) => {
-        if (!(type === "add" && index === 0) && type !== "reset") {
-          return;
-        }
-        setTimeout(() => {
-          const e = target.firstElementChild;
-          console.log(e);
-          e === null || e === void 0 ? void 0 : e.scrollIntoView(true);
-        }, 1);
-      };
-      _export("default", InfiniteRepeater = class InfiniteRepeater {});
-      _a = InfiniteRepeater;
-      InfiniteRepeater.pagedItems = start => {
-        const setter = start(0);
-        const setters = pagedItemsSetter(Bind.oneWayAsync(setter));
-        setters["event-more-items"] = Bind.event((s, e) => __awaiter(void 0, void 0, void 0, function* () {
-          var _b, _c;
-          const st = (_c = (_b = s.items) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
-          if (!st) {
-            return;
-          }
-          const cancelToken = s[loadMoreSet];
-          const loader = start(st);
-          const results = yield loader(s, e.target, cancelToken);
-          s.items.addAll(results.items);
-          s.footer = results.items.length > 0;
-        }));
-        return setters;
-      };
+    `.installGlobal("post-view");
+      commentIcon = "💬";
     }
   };
 });
-//# sourceMappingURL=InfiniteRepeater.js.map
+//# sourceMappingURL=PostView.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/PostView");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../BlogImageService", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../PostSummary", "../../../common/controls/repeater/InfiniteRepeater", "./BaseChannelPage"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "../BlogImageService", "../BlogService", "@web-atoms/core/dist/core/XNode", "../controls/BlogHeader", "@web-atoms/core/dist/core/Bind", "../controls/RecentPosts", "../controls/TagCloud", "../controls/UpcomingEvents", "../controls/PostList", "../PostView", "../UrlService"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, BlogImageService, XNode, AtomRepeater, PostSummary, InfiniteRepeater, BaseChannelPage, ChannelHomePage;
+  var __awaiter, __decorate, __metadata, InjectProperty, ContentPage, BlogImageService, BlogService, XNode, BlogHeader, Bind, RecentPosts, TagCloud, UpcomingEvents, PopularPosts, PostView, UrlService, ChannelDetailPage;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -26489,65 +26550,89 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "../BlogIm
       __metadata = _tslib.__metadata;
     }, function (_webAtomsCoreDistCoreInjectProperty) {
       InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
+    }, function (_webAtomsWebControlsDistMobileAppMobileApp) {
+      ContentPage = _webAtomsWebControlsDistMobileAppMobileApp.ContentPage;
     }, function (_BlogImageService) {
       BlogImageService = _BlogImageService.default;
+    }, function (_BlogService) {
+      BlogService = _BlogService.default;
     }, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
-      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
-    }, function (_PostSummary) {
-      PostSummary = _PostSummary.default;
-    }, function (_commonControlsRepeaterInfiniteRepeater) {
-      InfiniteRepeater = _commonControlsRepeaterInfiniteRepeater.default;
-    }, function (_BaseChannelPage) {
-      BaseChannelPage = _BaseChannelPage.default;
+    }, function (_controlsBlogHeader) {
+      BlogHeader = _controlsBlogHeader.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_controlsRecentPosts) {
+      RecentPosts = _controlsRecentPosts.default;
+    }, function (_controlsTagCloud) {
+      TagCloud = _controlsTagCloud.default;
+    }, function (_controlsUpcomingEvents) {
+      UpcomingEvents = _controlsUpcomingEvents.default;
+    }, function (_controlsPostList) {
+      PopularPosts = _controlsPostList.default;
+    }, function (_PostView) {
+      PostView = _PostView.default;
+    }, function (_UrlService) {
+      UrlService = _UrlService.UrlService;
     }],
     execute: function () {
-      _export("default", ChannelHomePage = class ChannelHomePage extends BaseChannelPage {
+      _export("default", ChannelDetailPage = class ChannelDetailPage extends ContentPage {
         constructor() {
           super(...arguments);
           this.search = "";
           this.tag = "";
           this.author = "";
           this.emails = [];
+          this.email = null;
         }
-        renderBody() {
+        init() {
+          var _a;
+          var _b;
           return __awaiter(this, void 0, void 0, function* () {
-            this.channel = yield this.blogService.getChannel(void 0, void 0, void 0);
-            document.title = "Social " + this.channel.emailAddress.emailAddress;
-            return XNode.create("section", {
+            const {
+              channel,
+              slug
+            } = this.parameters;
+            this.channel = yield this.blogService.getChannel(void 0, channel, void 0);
+            const {
+              mailboxID: channelID
+            } = this.channel;
+            const emailID = UrlService.getEmailID(slug);
+            this.email = yield this.blogService.getEmail({
+              emailID,
+              channelID,
+              channel
+            });
+            document.title = this.email.subject + " - Social " + this.channel.emailAddress.emailAddress;
+            (_a = (_b = this.email).engagements) !== null && _a !== void 0 ? _a : _b.engagements = [];
+            this.emails = [this.email];
+            this.renderer = XNode.create("section", {
+              "data-blog-list": "blog-list"
+            }, XNode.create(BlogHeader, {
+              search: Bind.twoWaysImmediate(() => this.search),
+              channel: this.channel
+            }), XNode.create("section", {
               "data-width": "100%"
-            }, XNode.create(AtomRepeater, Object.assign({
-              "data-items-updated-event": "items-updated",
-              "event-items-updated": () => this.itemsUpdated(),
-              "data-auto-scroll": "false",
-              itemRenderer: x => XNode.create(PostSummary, {
-                blogService: this.blogImageService,
-                channel: this.channel,
-                mailboxEmail: x
-              }),
-              items: this.emails
-            }, InfiniteRepeater.pagedItems(start => (c, e, cancelToken) => this.blogService.getEmails({
-              channelID: this.channel.mailboxID,
-              author: this.author,
-              tag: this.tag,
-              start,
-              search: this.search,
-              cancelToken
-            })))));
+            }, XNode.create(PostView, {
+              channel: this.channel,
+              email: this.emails[0]
+            })), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(UpcomingEvents, {
+              channel: this.channel
+            }), XNode.create(PopularPosts, null), XNode.create(RecentPosts, null)), XNode.create("footer", null));
           });
         }
         itemsUpdated() {
           window.pageReady = true;
         }
       });
-      __decorate([InjectProperty, __metadata("design:type", BlogImageService)], ChannelHomePage.prototype, "blogImageService", void 0);
+      __decorate([InjectProperty, __metadata("design:type", BlogService)], ChannelDetailPage.prototype, "blogService", void 0);
+      __decorate([InjectProperty, __metadata("design:type", BlogImageService)], ChannelDetailPage.prototype, "blogImageService", void 0);
     }
   };
 });
-//# sourceMappingURL=ChannelHomePage.js.map
+//# sourceMappingURL=ChannelDetailPage.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/pages/ChannelHomePage");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/pages/ChannelDetailPage");
 
 System.register(["@web-atoms/core/dist/core/Command"], function (_export, _context) {
   "use strict";
@@ -26567,15 +26652,20 @@ System.register(["@web-atoms/core/dist/core/Command"], function (_export, _conte
         openPage: () => _context.import("../pages/ChannelCalendarPage")
       });
       ChannelCommands.channelVideos = Command.create({
-        route: "/@{channel}/videos",
+        route: "/@{channel}/videos/{start?}",
         routeOrder: 100,
         openPage: () => _context.import("../pages/ChannelVideosPage")
       });
       ChannelCommands.channelPhotos = Command.create({
-        route: "/@{channel}/photos",
+        route: "/@{channel}/photos/{start?}",
         routeOrder: 100,
         openPage: () => _context.import("../pages/ChannelPhotosPage")
       });
+      ChannelCommands.channelTag = Command.create({
+        route: "/@{channel}/tag/{tag}",
+        routeOrder: 100,
+        openPage: () => _context.import("../pages/ChannelHomePage")
+      });
       ChannelCommands.channelDetail = Command.create({
         route: "/@{channel}/{slug}",
         routeOrder: 500,
@@ -29112,8 +29202,17 @@ System.register(["tslib", "@web-atoms/web-controls/dist/desktop-app/MobileDeskto
     }
     `.withOrder("high").installGlobal("[channel-app]");
       styled.css`
-        overflow: auto !important;
-    `.withOrder("high").installGlobal("body,html");
+            overflow: auto !important;
+        `.withOrder("high").installGlobal("body,html");
+      if (AppLocation.isLocalTesting) {
+        styled.css`
+        &[data-desktop-app=desktop-app] {
+            max-width: 1024px;
+            min-width: 1024px;
+            width: 1024px;
+        }
+        `.withOrder("high").installGlobal("[channel-app]");
+      }
       ChannelApp = class ChannelApp extends MobileDesktopApp {
         init() {
           return __awaiter(this, void 0, void 0, function* () {