@social-mail/social-mail-client 1.2.547 → 1.2.549

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

@@ -1975,8 +1975,8 @@ const UMD = new UMDClass();
 //# sourceMappingURL=umd.js.map
 
         AmdLoader.instance.register(
-            ["@social-mail/social-mail-client","@web-atoms/core","reflect-metadata","@web-atoms/date-time","@web-atoms/entity","@web-atoms/web-controls","@web-atoms/email-dom","@web-atoms/data-styles"],
-            ["@social-mail/social-mail-client/dist/public/channel/ChannelView","@social-mail/social-mail-client/dist/public/channel/ChannelMessage","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@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/ExpressionParser","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@social-mail/social-mail-client/dist/public/channel/BlogService","@web-atoms/core/dist/di/DISingleton","@social-mail/social-mail-client/dist/services/EntityService","@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/services/BusyProgress","@web-atoms/core/dist/style/styled","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/model/model","@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/common/cache/CacheTTL","@web-atoms/core/dist/view-model/Action","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@social-mail/social-mail-client/dist/public/channel/emoji/EmojiPopup","@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/AtomLoader","@web-atoms/core/dist/services/JsonService","@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/core/Colors","@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","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@social-mail/social-mail-client/dist/public/channel/styles/channelViewStyle","@social-mail/social-mail-client/dist/common/TestMode","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/WatchProperty","@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","@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/common/fileUrl","@social-mail/social-mail-client/dist/common/controls/buttons/CopyIcon","@social-mail/social-mail-client/dist/public/channel/controls/TagCloud","@social-mail/social-mail-client/dist/public/channel/UrlService","@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/RecentPosts","@social-mail/social-mail-client/dist/public/channel/controls/BlogHeader","@social-mail/social-mail-client/dist/public/channel/ChannelMessageList","@web-atoms/web-controls/dist/basic/LimitedText","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@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","@web-atoms/core","reflect-metadata","@web-atoms/date-time","@web-atoms/entity","@web-atoms/web-controls","@web-atoms/data-styles","@web-atoms/email-dom"],
+            ["@social-mail/social-mail-client/dist/public/channel/ChannelView","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@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/ExpressionParser","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/Hacks","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@social-mail/social-mail-client/dist/public/channel/BlogService","@web-atoms/core/dist/di/DISingleton","@social-mail/social-mail-client/dist/services/EntityService","@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/services/BusyProgress","@web-atoms/core/dist/style/styled","@social-mail/social-mail-client/dist/common/apiPath","@social-mail/social-mail-client/dist/model/model","@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/common/cache/CacheTTL","@web-atoms/core/dist/view-model/Action","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/core/dist/core/sleep","@social-mail/social-mail-client/dist/public/channel/emoji/EmojiPopup","@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/AtomLoader","@web-atoms/core/dist/services/JsonService","@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/core/Colors","@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","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@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","@social-mail/social-mail-client/dist/public/channel/styles/channelViewStyle","@social-mail/social-mail-client/dist/common/TestMode","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/WatchProperty","@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","@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/common/fileUrl","@social-mail/social-mail-client/dist/common/controls/buttons/CopyIcon","@social-mail/social-mail-client/dist/public/channel/controls/TagCloud","@social-mail/social-mail-client/dist/public/channel/UrlService","@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/RecentPosts","@social-mail/social-mail-client/dist/public/channel/controls/BlogHeader","@web-atoms/core/dist/Pack","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/public/channel/PostSummary","@social-mail/social-mail-client/dist/common/toBase36"]);
 
 System.register([], function (_export, _context) {
   "use strict";
@@ -16005,7 +16005,8 @@ System.register([], function (_export, _context) {
         seconds: {
           oneHour: 60 * 60,
           oneDay: 60 * 60 * 24,
-          oneMonth: 60 * 60 * 24 * 30
+          oneMonth: 60 * 60 * 24 * 30,
+          fifteenMinutes: 15 * 60
         }
       });
     }
@@ -16102,10 +16103,10 @@ System.register(["tslib", "@web-atoms/core/dist/di/Inject", "../../../../service
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/page/mails/service/EngagementService");
 
-System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "../../services/EntityService", "../../model/model", "../../common/Sql", "../../services/email/EmailContentDownloader", "../../web/page/mails/service/EngagementService", "../../common/apiPath"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "../../services/EntityService", "../../model/model", "../../common/Sql", "../../services/email/EmailContentDownloader", "../../web/page/mails/service/EngagementService", "../../common/apiPath", "../../common/cache/CacheTTL"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, Email, Mailbox, MailboxEmail, Sql, EmailContentDownloader, EngagementService, apiPath, updateAttachments, BlogService;
+  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, Email, Mailbox, MailboxEmail, Sql, EmailContentDownloader, EngagementService, apiPath, CacheTTL, cacheVersion, updateAttachments, BlogService;
   return {
     setters: [function (_tslib) {
       __awaiter = _tslib.__awaiter;
@@ -16129,8 +16130,11 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
       EngagementService = _webPageMailsServiceEngagementService.default;
     }, function (_commonApiPath) {
       apiPath = _commonApiPath.apiPath;
+    }, function (_commonCacheCacheTTL) {
+      CacheTTL = _commonCacheCacheTTL.CacheTTL;
     }],
     execute: function () {
+      cacheVersion = "1a";
       updateAttachments = (channelID, email) => {
         if (email.attachments) {
           for (const iterator of email.attachments) {
@@ -16158,6 +16162,8 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
         getEmails({
           channelID = 0,
           parentID = 0,
+          authorID = 0,
+          tagID = 0,
           search = "",
           start = 0,
           size = 10,
@@ -16177,22 +16183,30 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
                 search
               }, p => x => Sql.text.includes(x.email.textBody, p.search));
             }
+            if (tagID) {
+              q = q.where({
+                tagID
+              }, p => x => x.email.emailTags.some(t => t.tagID === p.tagID));
+            }
+            if (authorID) {
+              q = q.where({
+                authorID
+              }, p => x => x.email.senderID === p.authorID);
+            }
             const mailboxEmails = yield q.include(x => [x.email.attachments, x.email.engagements, x.email.emailTags.forEach(t => t.tag)]).orderByDescending(x => x.dateUpdated).toPagedList({
               start,
               size,
               cancelToken
             });
-            const emails = {
-              items: mailboxEmails.items.map(x => x.email),
-              total: mailboxEmails.total
-            };
             const tasks = [];
-            for (const email of emails.items) {
+            for (const {
+              email
+            } of mailboxEmails.items) {
               tasks.push(this.downloader.downloadFromUrl(apiPath(`/api/emails/channel/content/html/${channelID}/${email.emailID}/${email.headerMessageID}`), email));
               updateAttachments(channelID, email);
             }
             yield Promise.all(tasks);
-            return emails;
+            return mailboxEmails;
           });
         }
         getChannel(emailAddress, channelID, d) {
@@ -16203,7 +16217,10 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
                 channelID
               }, p => x => x.mailboxID === p.channelID);
             }
-            const c = yield q.include(x => x.emailAddress).orderByDescending(x => x.datePublished).firstOrDefault();
+            const c = yield q.include(x => x.emailAddress).orderByDescending(x => x.datePublished).firstOrDefault({
+              cacheVersion,
+              cacheSeconds: CacheTTL.seconds.oneHour
+            });
             return c;
           });
         }
@@ -21102,55 +21119,449 @@ System.register(["tslib", "@web-atoms/core/dist/web/WebApp", "@web-atoms/web-con
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/emoji/EmojiPopup");
 
-System.register([], function (_export, _context) {
+System.register(["./AtomBinder"], function (_export, _context) {
   "use strict";
 
-  var AppLocation;
+  var AtomBinder, AtomList, ap;
+  _export("AtomList", void 0);
   return {
-    setters: [],
+    setters: [function (_AtomBinder) {
+      AtomBinder = _AtomBinder.AtomBinder;
+    }],
     execute: function () {
-      _export("AppLocation", AppLocation = {
-        isLocalTesting: /\d+\.\d+\.\d+\.\d+/.test(location.hostname)
+      _export("AtomList", AtomList = class AtomList extends Array {
+        constructor() {
+          super();
+          this.startValue = 0;
+          this.totalValue = 0;
+          this.sizeValue = 10;
+          this["__proto__"] = AtomList.prototype;
+          this.next = () => {
+            this.start = this.start + this.size;
+          };
+          this.prev = () => {
+            if (this.start >= this.size) {
+              this.start = this.start - this.size;
+            }
+          };
+        }
+        get start() {
+          return this.startValue;
+        }
+        set start(v) {
+          if (v === this.startValue) {
+            return;
+          }
+          this.startValue = v;
+          AtomBinder.refreshValue(this, "start");
+        }
+        get total() {
+          return this.totalValue;
+        }
+        set total(v) {
+          if (v === this.totalValue) {
+            return;
+          }
+          this.totalValue = v;
+          AtomBinder.refreshValue(this, "total");
+        }
+        get size() {
+          return this.sizeValue;
+        }
+        set size(v) {
+          if (v === this.sizeValue) {
+            return;
+          }
+          this.sizeValue = v;
+          AtomBinder.refreshValue(this, "size");
+        }
+        add(item) {
+          const i = this.length;
+          const n = this.push(item);
+          AtomBinder.invokeItemsEvent(this, "add", i, item);
+          AtomBinder.refreshValue(this, "length");
+          return n;
+        }
+        addAll(items) {
+          for (const item of items) {
+            const i = this.length;
+            this.push(item);
+            AtomBinder.invokeItemsEvent(this, "add", i, item);
+            AtomBinder.refreshValue(this, "length");
+          }
+          const t = items["total"];
+          if (t) {
+            this.total = t;
+          }
+        }
+        replace(items, start, size) {
+          this.length = items.length;
+          for (let i = 0; i < items.length; i++) {
+            this[i] = items[i];
+          }
+          this.refresh();
+          const t = items["total"];
+          if (t) {
+            this.total = t;
+          }
+          if (start !== undefined) {
+            this.start = start;
+          }
+          if (size !== undefined) {
+            this.size = size;
+          }
+        }
+        insert(i, item) {
+          const n = this.splice(i, 0, item);
+          AtomBinder.invokeItemsEvent(this, "add", i, item);
+          AtomBinder.refreshValue(this, "length");
+        }
+        set(i, item) {
+          const old = this[i];
+          this[i] = item;
+          AtomBinder.invokeItemsEvent(this, "replace", i, item, old);
+          AtomBinder.refreshValue(this, "length");
+        }
+        removeAt(i) {
+          const item = this[i];
+          this.splice(i, 1);
+          AtomBinder.invokeItemsEvent(this, "remove", i, item);
+          AtomBinder.refreshValue(this, "length");
+          return item;
+        }
+        remove(item) {
+          if (item instanceof Function) {
+            let removed = false;
+            for (let index = 0; index < this.length;) {
+              const it = this[index];
+              if (item(it)) {
+                this.splice(index, 1);
+                AtomBinder.invokeItemsEvent(this, "remove", index, it);
+                AtomBinder.refreshValue(this, "length");
+                removed = true;
+                continue;
+              }
+              index++;
+            }
+            return removed;
+          }
+          const n = this.indexOf(item);
+          if (n !== -1) {
+            this.removeAt(n);
+            return true;
+          }
+          return false;
+        }
+        clear() {
+          this.length = 0;
+          this.refresh();
+        }
+        refresh() {
+          AtomBinder.invokeItemsEvent(this, "refresh", -1, null);
+          AtomBinder.refreshValue(this, "length");
+        }
+        watch(f, wrap) {
+          if (wrap) {
+            const fx = f;
+            f = function () {
+              const p = [];
+              for (let i = 0; i < arguments.length; i++) {
+                const iterator = arguments[i];
+                p.push(iterator);
+              }
+              return fx.call(this, p);
+            };
+          }
+          return AtomBinder.add_CollectionChanged(this, f);
+        }
+        count(f) {
+          let total = 0;
+          for (const iterator of this) {
+            if (f(iterator)) {
+              total++;
+            }
+          }
+          return total;
+        }
+        avg(f) {
+          if (!this.length) {
+            return 0;
+          }
+          let sum = 0;
+          for (const iterator of this) {
+            sum += f(iterator);
+          }
+          return sum / this.length;
+        }
+        includes(item) {
+          return this.indexOf(item) !== -1;
+        }
       });
+      ap = Array.prototype;
+      for (const key of Object.getOwnPropertyNames(AtomList.prototype)) {
+        const {
+          value
+        } = Object.getOwnPropertyDescriptor(AtomList.prototype, key);
+        switch (key) {
+          case "add":
+          case "addAll":
+          case "clear":
+          case "refresh":
+          case "set":
+          case "remove":
+          case "removeAt":
+          case "watch":
+          case "replace":
+          case "insert":
+          case "count":
+          case "avg":
+          case "includes":
+            if (key in ap) {
+              continue;
+            }
+            Object.defineProperty(ap, key, {
+              enumerable: false,
+              value,
+              configurable: true,
+              writable: true
+            });
+            continue;
+        }
+      }
     }
   };
 });
-//# sourceMappingURL=TestMode.js.map
+//# sourceMappingURL=AtomList.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/TestMode");
+    AmdLoader.instance.setup("@web-atoms/core/dist/core/AtomList");
 
-System.register(["@web-atoms/core/dist/style/styled", "../../../common/TestMode"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  var styled, AppLocation, channelViewStyle;
+  var styled;
   return {
     setters: [function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_commonTestMode) {
-      AppLocation = _commonTestMode.AppLocation;
     }],
     execute: function () {
       styled.css`
 
-box-sizing: border-box;
-
-& > header {
+    div[data-desktop-app=desktop-app] {
+        width: 100%;
+    }
 
-}
+    /* div[data-base-page=base-page] {
+        & > [data-page-element=title] {
+            overflow-y: visible;
+        }
+    } */
 
-& button[data-element=engage] {
-    margin:0;
-    border: none;
-    outline: none;
-    background: transparent;
-    cursor: pointer;
-    & > img {
-        max-height: 20px;
-        height: 20px;
-        pointer-events: none;
+`.withId("default-app-style").withOrder("medium").installGlobal();
     }
-}
-
+  };
+});
+//# sourceMappingURL=OverrideAppStyle.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/OverrideAppStyle");
+
+
+System.register([], function(_export, _context) {
+    return {
+        setters: [],
+        execute: function() {
+
+            // this is because in web atoms loader
+            // root url may not be set when the module is registered
+            setTimeout(() => {
+
+                const cssModule = _context.meta.resolve("./data-styles.css");
+                const cssURL = System.resolve(cssModule);
+
+                const link = document.createElement("link");
+                link.id = "data-styles";
+                link.setAttribute("href", cssURL);
+                link.setAttribute("rel", "stylesheet");
+                link.setAttribute("as", "style");
+                link.setAttribute("crossorigin", "anonymous");
+                const head = document.head;
+                const firstElementChild = head.firstElementChild;
+                if (firstElementChild) {
+                    head.insertBefore(link, firstElementChild);
+                } else {
+                    head.appendChild(link);
+                }
+            }, 1);
+        }
+    };
+});
+    
+
+    AmdLoader.instance.setup("@web-atoms/data-styles/data-styles");
+
+System.register(["@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/AtomList", "./OverrideAppStyle", "@web-atoms/core/dist/style/styled", "@web-atoms/data-styles/data-styles"], function (_export, _context) {
+  "use strict";
+
+  var UMD, styled, ___UMD;
+  function addLinkTag(href, integrity, rel = "stylesheet") {
+    if (!document.head.querySelector(`[href="${href}"]`)) {
+      const fa = document.createElement("link");
+      fa.href = href;
+      fa.crossOrigin = "anonymous";
+      fa.as = "style";
+      fa.rel = "preload";
+      if (integrity) {
+        fa.integrity = integrity;
+      }
+      fa.onload = () => {
+        fa.onload = null;
+        fa.rel = rel;
+      };
+      document.head.insertBefore(fa, document.head.firstElementChild);
+    }
+  }
+  return {
+    setters: [function (_webAtomsCoreDistCoreTypes) {
+      UMD = _webAtomsCoreDistCoreTypes.UMD;
+    }, function (_webAtomsCoreDistCoreAtomList) {}, function (_OverrideAppStyle) {}, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_webAtomsDataStylesDataStyles) {}],
+    execute: function () {
+      _export("___UMD", ___UMD = UMD);
+      addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
+      addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");
+      addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
+      addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
+      styled.css`
+
+:root {
+    --primary-color: #294D4A;
+    --accent-color: #ff6733;
+    --accent2-color: #ff673375;
+    --lighter-accent-color: #e6e6fa60;
+    --light-accent-color: #f2e5fa;
+    --accent-text-color: white;
+    --background-color: #f1f1f160;  
+    --window-background: #50505025;  
+    --media-bg-color: #9F33FF0F;
+    --font-size-small: 0.8125em;
+
+    --hover-color: #b8b88b20;
+    --command-bg-color: #50505025;
+    --hover-text-color: CanvasText;
+    --selection-color: #b8b88b60;
+    --selection-text-color: CanvasText;
+    --spacing: 5px;
+    --spacing-medium: 7px;
+    --spacing-large: 10px;
+}
+
+html, body {
+    margin:0;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--accent-color) white;
+}
+
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+::-webkit-scrollbar-track {
+    background: white;
+    border-radius: 20px;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--accent-color);
+    border-radius: 20px;
+}
+
+    body {
+    font-family: trebuchet ms, "Source Sans Pro";
+    font-size: 16px;
+    justify-content: stretch;
+
+    & * {
+        font-family: trebuchet ms, "Source Sans Pro";
+        box-sizing: border-box;
+    }
+
+    &::placeholder {
+        font-size: smaller;
+    }
+
+    & ul {
+        padding-inline-start: 15px;
+    }
+
+    & input[type=search] {
+        border: none;
+        outline: none;
+        border-radius: 9999px;
+        padding-right: 10px;
+        padding-left: 25px;
+        background: canvas url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 5px center;
+    }
+}
+
+`.withId("global-styles").withOrder("medium").installGlobal();
+    }
+  };
+});
+//# sourceMappingURL=GlobalStyle.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/GlobalStyle");
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var AppLocation;
+  return {
+    setters: [],
+    execute: function () {
+      _export("AppLocation", AppLocation = {
+        isLocalTesting: /\d+\.\d+\.\d+\.\d+/.test(location.hostname)
+      });
+    }
+  };
+});
+//# sourceMappingURL=TestMode.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/TestMode");
+
+System.register(["@web-atoms/core/dist/style/styled", "../../../common/TestMode"], function (_export, _context) {
+  "use strict";
+
+  var styled, AppLocation, channelViewStyle;
+  return {
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_commonTestMode) {
+      AppLocation = _commonTestMode.AppLocation;
+    }],
+    execute: function () {
+      styled.css`
+
+box-sizing: border-box;
+
+& > header {
+
+}
+
+& button[data-element=engage] {
+    margin:0;
+    border: none;
+    outline: none;
+    background: transparent;
+    cursor: pointer;
+    & > img {
+        max-height: 20px;
+        height: 20px;
+        pointer-events: none;
+    }
+}
+
 & section[data-element=blog-item] {
     margin: 10px;
     border-right: solid 1px lightgray;
@@ -21167,6 +21578,23 @@ box-sizing: border-box;
         color: canvastext;
     }
 
+    & [data-fade=bottom] {
+        position: relative;
+        max-height: 200px;
+        overflow: hidden;
+        &:after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            content: "";
+            margin: 0;
+            pointer-events: none;
+            background: linear-gradient(to top, rgba(255, 255, 255, 1) 1px, rgba(255, 255, 255, 0) 32px);
+        }
+    }
+
     & > h4 {
         grid-row: 1;
         grid-column: 1 / span 2;
@@ -23870,19 +24298,25 @@ System.register(["../../common/TestMode"], function (_export, _context) {
     }],
     execute: function () {
       _export("UrlService", UrlService = {
-        toBlogUrl(channelID, emailID, subject) {
+        toBlogUrl({
+          mailboxID,
+          emailID,
+          email: {
+            subject
+          } = {}
+        }) {
           subject || (subject = "");
           if (subject.length > 400) {
             subject = subject.substring(0, 400);
           }
           subject = subject.replace(/[^\p{L}\p{N}]+/ug, "-");
           subject = encodeURIComponent(subject).replace(/\%20/g, "-");
-          const cid = BigInt(channelID).toString(36);
+          const cid = BigInt(mailboxID).toString(36);
           const eid = BigInt(emailID).toString(36);
           if (AppLocation.isLocalTesting) {
-            return `?detail=true&cid=${cid}&eid=${eid}`;
+            return `?detail=true&p0=${cid}&p1=p&p2=${eid}`;
           }
-          return `/channels/${cid}/${eid}/${subject}`;
+          return `/channels/${cid}/p/${eid}/${subject}`;
         },
         toTagUrl({
           mailboxID,
@@ -23894,7 +24328,7 @@ System.register(["../../common/TestMode"], function (_export, _context) {
           const cid = BigInt(mailboxID).toString(36);
           const eid = BigInt(tagID).toString(36);
           if (AppLocation.isLocalTesting) {
-            return `?detail=true&cid=${cid}&eid=${eid}`;
+            return `?detail=true&p0=${cid}&p1=t&p2=${eid}`;
           }
           name || (name = "");
           if (name.length > 400) {
@@ -23902,7 +24336,7 @@ System.register(["../../common/TestMode"], function (_export, _context) {
           }
           name = name.replace(/[^\p{L}\p{N}]+/ug, "-");
           name = encodeURIComponent(name).replace(/\%20/g, "-");
-          return `/channels/${cid}/${eid}/${name}`;
+          return `/channels/${cid}/t/${eid}/${name}`;
         }
       });
     }
@@ -23912,10 +24346,10 @@ System.register(["../../common/TestMode"], function (_export, _context) {
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/UrlService");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../services/EntityService", "../../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "../UrlService"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../services/EntityService", "../../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "../UrlService", "../../../common/cache/CacheTTL"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, AtomRepeater, EntityService, MailboxTag, XNode, styled, UrlService, TagCloud;
+  var __awaiter, __decorate, __metadata, InjectProperty, AtomRepeater, EntityService, MailboxTag, XNode, styled, UrlService, CacheTTL, TagCloud, cacheVersion;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -23936,8 +24370,11 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       styled = _webAtomsCoreDistStyleStyled.default;
     }, function (_UrlService) {
       UrlService = _UrlService.UrlService;
+    }, function (_commonCacheCacheTTL) {
+      CacheTTL = _commonCacheCacheTTL.CacheTTL;
     }],
     execute: function () {
+      cacheVersion = "1a";
       styled.css`
         display: flex;
         flex-direction: row;
@@ -23968,7 +24405,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
         init() {
           return __awaiter(this, void 0, void 0, function* () {
             const tags = yield this.entityService.query(MailboxTag, "channelTags").include(x => x.tag).orderByDescending(x => x.count).toPagedList({
-              size: 20
+              size: 20,
+              cacheVersion,
+              cacheSeconds: CacheTTL.seconds.fifteenMinutes
             });
             this.itemRenderer = x => XNode.create("a", {
               href: UrlService.toTagUrl(x),
@@ -24046,10 +24485,10 @@ System.register(["tslib", "@web-atoms/core/dist/di/Inject", "../../services/Enti
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/BlogImageService");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../services/EntityService", "../../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "../UrlService", "@web-atoms/core/dist/core/Bind", "@social-mail/social-mail-client/content/images/gif/loader.gif", "../BlogImageService"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../services/EntityService", "../../../model/model", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled", "../UrlService", "@web-atoms/core/dist/core/Bind", "@social-mail/social-mail-client/content/images/gif/loader.gif", "../BlogImageService", "../../../common/cache/CacheTTL"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, AtomRepeater, EntityService, MailboxEmail, XNode, styled, UrlService, Bind, loaderImage, BlogImageService, PostList;
+  var __awaiter, __decorate, __metadata, InjectProperty, AtomRepeater, EntityService, MailboxEmail, XNode, styled, UrlService, Bind, loaderImage, BlogImageService, CacheTTL, PostList, cacheVersion;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -24076,8 +24515,11 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       loaderImage = _socialMailSocialMailClientContentImagesGifLoaderGif.default;
     }, function (_BlogImageService) {
       BlogImageService = _BlogImageService.default;
+    }, function (_commonCacheCacheTTL) {
+      CacheTTL = _commonCacheCacheTTL.CacheTTL;
     }],
     execute: function () {
+      cacheVersion = "1a";
       styled.css`
         display: flex;
         flex-direction: row;
@@ -24134,7 +24576,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             this.itemRenderer = x => XNode.create("div", null, XNode.create("img", {
               src: Bind.oneTimeAsync(() => this.blogImageService.getImage(x), loaderImage)
             }), XNode.create("a", {
-              href: UrlService.toBlogUrl(x.mailboxID, x.emailID, x.email.subject),
+              href: UrlService.toBlogUrl(x),
               title: x.email.subject,
               target: "_blank",
               text: x.email.subject
@@ -24149,7 +24591,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
         }
         query(q) {
           return q.orderByDescending(x => x.engagementCount).toPagedList({
-            size: 5
+            size: 5,
+            cacheVersion,
+            cacheSeconds: CacheTTL.seconds.fifteenMinutes
           });
         }
       });
@@ -24234,269 +24678,32 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/controls/BlogHeader");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/web/controls/AtomControl", "./BlogService", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/view-model/Action", "./emoji/EmojiPopup", "./styles/channelViewStyle", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/web-controls/dist/basic/AtomRepeater", "./PostView", "../../common/controls/buttons/CopyIcon", "./controls/TagCloud", "./controls/PostList", "./controls/RecentPosts", "./controls/BlogHeader"], function (_export, _context) {
+System.register([], function (_export, _context) {
+  "use strict";
+
+  function Pack(...a) {}
+  _export("default", Pack);
+  return {
+    setters: [],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=Pack.js.map
+
+    AmdLoader.instance.setup("@web-atoms/core/dist/Pack");
+
+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, InjectProperty, AtomControl, BlogService, XNode, Action, EmojiPopup, PopupService, AtomRepeater, PostView, CopyIcon, TagCloud, PopularPosts, RecentPosts, BlogHeader, ChannelMessage, _a, _b, url, channelID, emailID, commentIcon;
+  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 (_webAtomsCoreDistCoreInjectProperty) {
-      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_BlogService) {
-      BlogService = _BlogService.default;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistViewModelAction) {
-      Action = _webAtomsCoreDistViewModelAction.default;
-    }, function (_emojiEmojiPopup) {
-      EmojiPopup = _emojiEmojiPopup.default;
-    }, function (_stylesChannelViewStyle) {}, function (_webAtomsCoreDistWebServicesPopupService) {
-      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
-    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
-      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
-    }, function (_PostView) {
-      PostView = _PostView.default;
-    }, function (_commonControlsButtonsCopyIcon) {
-      CopyIcon = _commonControlsButtonsCopyIcon.default;
-    }, function (_controlsTagCloud) {
-      TagCloud = _controlsTagCloud.default;
-    }, function (_controlsPostList) {
-      PopularPosts = _controlsPostList.default;
-    }, function (_controlsRecentPosts) {
-      RecentPosts = _controlsRecentPosts.default;
-    }, function (_controlsBlogHeader) {
-      BlogHeader = _controlsBlogHeader.default;
-    }],
-    execute: function () {
-      url = (_a = window.pageUrl) !== null && _a !== void 0 ? _a : new URL(location.href);
-      ({
-        1: channelID = url.searchParams.get("cid"),
-        2: emailID = url.searchParams.get("eid")
-      } = (_b = /^\/channels\/([^\/]+)\/([^\/]+)\//.exec(url === null || url === void 0 ? void 0 : url.pathname)) !== null && _b !== void 0 ? _b : {});
-      channelID = parseInt(channelID, 36);
-      emailID = parseInt(emailID, 36);
-      commentIcon = "💬";
-      _export("default", ChannelMessage = class ChannelMessage extends AtomControl {
-        constructor(app, e = document.createElement("section")) {
-          super(app, e);
-          this.runAfterInit(() => this.app.runAsync(() => this.init()));
-        }
-        init() {
-          var _a;
-          return __awaiter(this, void 0, void 0, function* () {
-            const channel = yield this.blogService.getChannel(void 0, channelID, void 0);
-            this.channel = channel;
-            const email = yield this.blogService.getEmail({
-              emailID,
-              channelID
-            });
-            this.email = email;
-            const engagements = (_a = email.engagements) !== null && _a !== void 0 ? _a : [];
-            this.element.setAttribute("data-blog-list", "blog-list");
-            this.element.setAttribute("data-layout", "flex-center");
-            this.renderer = XNode.create("section", null, XNode.create(BlogHeader, {
-              channel: channel
-            }), XNode.create("section", null, XNode.create(AtomRepeater, {
-              items: [email],
-              itemRenderer: x => XNode.create(PostView, {
-                email: x
-              })
-            })), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(PopularPosts, null), XNode.create(RecentPosts, null)), XNode.create("footer", null));
-          });
-        }
-        reactEmail(email, ce) {
-          return __awaiter(this, void 0, void 0, function* () {
-            const {
-              headerMessageID
-            } = email;
-            const emoji = yield EmojiPopup.showControl(ce.target, {
-              parentElement: ce.target
-            });
-            const {
-              channel
-            } = this;
-            const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
-            yield PopupService.alert({
-              message: XNode.create("div", {
-                "data-layout": "vertical-flex"
-              }, "To add your emoji to this post, email just the emoji ", emoji, " with given subject to the channel email address.", XNode.create("div", null, "To: ", channel.emailAddress.emailAddress, " ", XNode.create(CopyIcon, {
-                text: channel.emailAddress.emailAddress
-              }), " "), XNode.create("div", null, "Subject: ", subject, " ", XNode.create(CopyIcon, {
-                text: subject
-              })), XNode.create("div", null, "Body: ", emoji, " ", XNode.create(CopyIcon, {
-                text: emoji
-              })), XNode.create("br", null), XNode.create("div", null, "If you have email client configured, you can click on following link."), XNode.create("div", null, XNode.create("a", {
-                href: `mailto:${channel.emailAddress.emailAddress}?subject=${subject}&body=${emoji}&in-reply-to=${headerMessageID}`
-              }, "Email Now"))),
-              title: "Send Email"
-            });
-          });
-        }
-        replyEmail(email, ce) {
-          return __awaiter(this, void 0, void 0, function* () {
-            const emoji = commentIcon;
-            const {
-              headerMessageID
-            } = email;
-            const {
-              channel
-            } = this;
-            const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
-            yield PopupService.alert({
-              message: XNode.create("div", {
-                "data-layout": "vertical-flex"
-              }, "To send comment to this post, email us your comment with given subject to the channel email address.", XNode.create("div", null, "To: ", channel.emailAddress.emailAddress, " ", XNode.create(CopyIcon, {
-                text: channel.emailAddress.emailAddress
-              })), XNode.create("div", null, "Subject: ", subject, " ", XNode.create(CopyIcon, {
-                text: subject
-              })), XNode.create("br", null), XNode.create("div", null, "If you have email client configured, you can click on following link."), XNode.create("div", null, XNode.create("a", {
-                href: `mailto:${channel.emailAddress.emailAddress}?subject=${subject}&in-reply-to=${headerMessageID}`
-              }, "Email Now"))),
-              title: "Send Email"
-            });
-          });
-        }
-      });
-      __decorate([InjectProperty, __metadata("design:type", BlogService)], ChannelMessage.prototype, "blogService", void 0);
-      __decorate([Action({
-        onEvent: "react-email"
-      }), __metadata("design:type", Function), __metadata("design:paramtypes", [Object, CustomEvent]), __metadata("design:returntype", Promise)], ChannelMessage.prototype, "reactEmail", null);
-      __decorate([Action({
-        onEvent: "reply-email"
-      }), __metadata("design:type", Function), __metadata("design:paramtypes", [Object, CustomEvent]), __metadata("design:returntype", Promise)], ChannelMessage.prototype, "replyEmail", null);
-    }
-  };
-});
-//# sourceMappingURL=ChannelMessage.js.map
-
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/ChannelMessage");
-
-System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-
-  var __rest, XNode, styled, toggleDetails, setEventHandler;
-  function LimitedText(_a, ...nodes) {
-    var {
-        text = "",
-        height = 100
-      } = _a,
-      a = __rest(_a, ["text", "height"]);
-    setEventHandler === null || setEventHandler === void 0 ? void 0 : setEventHandler();
-    const h = typeof height === "number" ? `${height}px` : height;
-    return XNode.create("div", Object.assign({
-      "data-mode": "collapsed",
-      "data-max-height": h,
-      "style-max-height": h,
-      "data-limited-text": "limited-text"
-    }, a), text && XNode.create("p", {
-      text: text
-    }), ...nodes, XNode.create("div", {
-      "style-top": h,
-      "data-element": "more"
-    }, XNode.create("button", {
-      class: "fa-solid fa-angles-up"
-    })));
-  }
-  _export("default", LimitedText);
-  return {
-    setters: [function (_tslib) {
-      __rest = _tslib.__rest;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      styled.css`
-        position: relative;
-        overflow: hidden;
-        contain: content;
-
-        &[data-mode=collapsed] {
-            & > [data-element=more] {
-                cursor: pointer;
-                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 19%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
-                & > button {
-                    transform: rotate(180deg);
-                }
-            }
-        }
-
-        & > [data-element=more] {
-            display: flex;
-            justify-content: flex-end;
-            width: 100%;
-            right: 0;
-            left: 0;
-            position: absolute;
-            transform: translateY(-100%);
-            & > button {
-                padding: 1px;
-                padding-left: 10px;
-                padding-right: 10px;
-                border-radius: 9999px;
-                border: none;
-                outline: none;
-                box-shadow: 0 0 6px 6px white;
-                transition: transform 0.5s ease-out;
-            }
-        }
-
-    `.installGlobal("[data-limited-text]");
-      toggleDetails = e => {
-        let start = e.target;
-        if (e.defaultPrevented) {
-          return;
-        }
-        start = start.parentElement;
-        const container = start;
-        start = start === null || start === void 0 ? void 0 : start.parentElement;
-        if (!start || start.getAttribute("data-limited-text") !== "limited-text") {
-          return;
-        }
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-        if (start.getAttribute("data-mode") === "collapsed") {
-          start.setAttribute("data-mode", "open");
-          start.style.maxHeight = "";
-          container.style.top = "";
-        } else {
-          const h = start.getAttribute("data-max-height");
-          start.style.maxHeight = h;
-          container.style.top = h;
-          start.setAttribute("data-mode", "collapsed");
-        }
-      };
-      setEventHandler = () => {
-        document.body.addEventListener("click", toggleDetails);
-        setEventHandler = null;
-      };
-    }
-  };
-});
-//# sourceMappingURL=LimitedText.js.map
-
-    AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/LimitedText");
-
-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, 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 (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
     }, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_webAtomsCoreDistStyleStyled) {
@@ -24617,561 +24824,299 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater");
 
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/web-controls/dist/basic/AtomRepeater", "@web-atoms/web-controls/dist/basic/LimitedText", "../../common/controls/repeater/InfiniteRepeater", "../../common/date/DateFormats", "../../web/page/mails/service/ConversationService", "./BlogService", "./styles/channelViewStyle", "./UrlService", "./controls/TagCloud", "./controls/PostList", "./controls/RecentPosts", "./controls/BlogHeader"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "../../web/page/mails/service/ConversationService", "./UrlService"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, Bind, InjectProperty, XNode, AtomControl, AtomRepeater, LimitedText, InfiniteRepeater, DateFormats, renderMail, BlogService, UrlService, TagCloud, PopularPosts, RecentPosts, BlogHeader, ChannelView;
-  _export("default", void 0);
+  var XNode, DateFormats, renderMail, UrlService, commentIcon;
+  function PostSummary({
+    mailboxEmail = void 0,
+    itemPath = void 0
+  }) {
+    const {
+      mailboxID,
+      email
+    } = mailboxEmail;
+    const {
+      engagements = []
+    } = email;
+    const isComment = email.parentID !== null;
+    return XNode.create("section", {
+      "data-element": "blog-item",
+      "data-comment": isComment,
+      "data-item-path": itemPath
+    }, XNode.create("h4", {
+      "data-element": "title"
+    }, XNode.create("a", {
+      href: UrlService.toBlogUrl(mailboxEmail),
+      text: isComment ? email.senderName : email.subject
+    })), XNode.create("h6", {
+      "data-element": "date",
+      text: DateFormats.relative.short(email.dateSent)
+    }), !isComment && XNode.create("h5", {
+      text: email.senderName
+    }), XNode.create("section", {
+      "data-element": "content",
+      "data-fade": "bottom"
+    }, !email.parentID ? XNode.create("section", Object.assign({}, renderMail({
+      email
+    }))) : XNode.create("section", {
+      text: email.textBody
+    })), 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("default", PostSummary);
   return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistCoreInjectProperty) {
-      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
-    }, function (_webAtomsCoreDistCoreXNode) {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
-      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
-    }, function (_webAtomsWebControlsDistBasicLimitedText) {
-      LimitedText = _webAtomsWebControlsDistBasicLimitedText.default;
-    }, function (_commonControlsRepeaterInfiniteRepeater) {
-      InfiniteRepeater = _commonControlsRepeaterInfiniteRepeater.default;
     }, function (_commonDateDateFormats) {
       DateFormats = _commonDateDateFormats.DateFormats;
     }, function (_webPageMailsServiceConversationService) {
       renderMail = _webPageMailsServiceConversationService.renderMail;
-    }, function (_BlogService) {
-      BlogService = _BlogService.default;
-    }, function (_stylesChannelViewStyle) {}, function (_UrlService) {
+    }, function (_UrlService) {
       UrlService = _UrlService.UrlService;
-    }, function (_controlsTagCloud) {
-      TagCloud = _controlsTagCloud.default;
-    }, function (_controlsPostList) {
-      PopularPosts = _controlsPostList.default;
-    }, function (_controlsRecentPosts) {
-      RecentPosts = _controlsRecentPosts.default;
-    }, function (_controlsBlogHeader) {
-      BlogHeader = _controlsBlogHeader.default;
     }],
     execute: function () {
-      _export("default", ChannelView = class ChannelView extends AtomControl {
-        constructor(app, e = document.createElement("section")) {
-          super(app, e);
-          this.search = "";
-          this.mails = [];
-          this.pushInit();
+      commentIcon = "💬";
+    }
+  };
+});
+//# sourceMappingURL=PostSummary.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/PostSummary");
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var Base36, toBase36, parseBigInt;
+  _export("Base36", void 0);
+  return {
+    setters: [],
+    execute: function () {
+      _export("toBase36", toBase36 = n => BigInt(n).toString(36));
+      parseBigInt = (numberString, throwOnFail = true) => {
+        if (!numberString) {
+          return;
         }
-        init() {
-          var _a;
-          return __awaiter(this, void 0, void 0, function* () {
-            let {
-              channelID,
-              emailAddress,
-              domainID
-            } = (_a = window.socialMail) !== null && _a !== void 0 ? _a : {};
-            let args = this.element.getAttribute("data-json-args");
-            if (args) {
-              args = JSON.parse(args || "{}");
-              const d = args.domainID || args.domain;
-              if (d) {
-                domainID = d;
-              }
-              const c = args.channels || args.channel;
-              if (c) {
-                channelID = c;
-              }
+        if (numberString.startsWith("$")) {
+          return;
+        }
+        const keySpace = "0123456789abcdefghijklmnopqrstuvwxyz";
+        let result = BigInt(0);
+        const keySpaceLength = BigInt(keySpace.length);
+        for (const iterator of numberString) {
+          const value = keySpace.indexOf(iterator);
+          if (value === -1) {
+            if (throwOnFail) {
+              throw new Error("invalid string");
             }
-            this.element.setAttribute("data-blog-list", "blog-list");
-            this.channel = yield this.blogService.getChannel(emailAddress, channelID, domainID);
-            channelID = this.channel.mailboxID;
-            emailAddress = this.channel.emailAddress.emailAddress;
-            this.renderer = XNode.create("div", {
-              "data-layout": "flex-center"
-            }, XNode.create("span", {
-              text: "..."
-            }));
-            this.renderer = XNode.create("section", null, XNode.create(BlogHeader, {
-              search: Bind.twoWaysImmediate(() => this.search),
-              channel: this.channel
-            }), XNode.create("section", null, XNode.create(AtomRepeater, Object.assign({
-              items: this.mails,
-              "data-auto-scroll": "false"
-            }, InfiniteRepeater.pagedItems(start => (c, e, cancelToken) => this.blogService.getEmails({
-              channelID: this.channel.mailboxID,
-              start,
-              search: this.search,
-              cancelToken
-            })), {
-              itemRenderer: email => {
-                var _a;
-                const engagements = (_a = email.engagements) !== null && _a !== void 0 ? _a : [];
-                return XNode.create("section", {
-                  "data-element": "blog-item"
-                }, XNode.create("h4", {
-                  "data-element": "title"
-                }, XNode.create("a", {
-                  href: UrlService.toBlogUrl(channelID, email.emailID, email.subject),
-                  text: email.subject
-                })), XNode.create("h6", {
-                  "data-element": "date",
-                  text: DateFormats.relative.short(email.dateSent)
-                }), XNode.create("h5", {
-                  text: email.senderName
-                }), XNode.create("section", {
-                  "data-element": "content"
-                }, XNode.create(LimitedText, {
-                  height: 200
-                }, XNode.create("section", Object.assign({}, renderMail({
-                  email
-                }))))), XNode.create("footer", null, ...engagements.map(x => XNode.create("span", {
-                  title: `View all ${x.engagement} ${x.count}`,
-                  text: `${x.engagement} ${x.count}`
-                }))));
-              }
-            }))), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(PopularPosts, null), XNode.create(RecentPosts, null)), XNode.create("footer", null));
-          });
+            return;
+          }
+          result = result * keySpaceLength + BigInt(value);
+        }
+        return result;
+      };
+      _export("Base36", Base36 = class Base36 {
+        static encode(n) {
+          return BigInt(n).toString(36);
+        }
+        static decode(n, throwOnFail = true) {
+          var _a;
+          return (_a = parseBigInt(n, throwOnFail)) === null || _a === void 0 ? void 0 : _a.toString();
         }
       });
-      __decorate([InjectProperty, __metadata("design:type", BlogService)], ChannelView.prototype, "blogService", void 0);
     }
   };
 });
-//# sourceMappingURL=ChannelMessageList.js.map
+//# sourceMappingURL=toBase36.js.map
 
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/ChannelMessageList");
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/toBase36");
 
-System.register(["./AtomBinder"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/web/controls/AtomControl", "./BlogService", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/view-model/Action", "./emoji/EmojiPopup", "../../style/GlobalStyle", "./styles/channelViewStyle", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/web-controls/dist/basic/AtomRepeater", "./PostView", "../../common/controls/buttons/CopyIcon", "./controls/TagCloud", "./controls/PostList", "./controls/RecentPosts", "./controls/BlogHeader", "@web-atoms/core/dist/Pack", "../../common/controls/repeater/InfiniteRepeater", "@web-atoms/core/dist/core/Bind", "./PostSummary", "../../common/toBase36"], function (_export, _context) {
   "use strict";
 
-  var AtomBinder, AtomList, ap;
-  _export("AtomList", void 0);
+  var __awaiter, __decorate, __metadata, InjectProperty, AtomControl, BlogService, XNode, Action, EmojiPopup, PopupService, AtomRepeater, PostView, CopyIcon, TagCloud, PopularPosts, RecentPosts, BlogHeader, Pack, InfiniteRepeater, Bind, PostSummary, Base36, _a, _b, url, channelID, type, p2, emailID, commentIcon, ChannelMessage;
   return {
-    setters: [function (_AtomBinder) {
-      AtomBinder = _AtomBinder.AtomBinder;
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreInjectProperty) {
+      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_BlogService) {
+      BlogService = _BlogService.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistViewModelAction) {
+      Action = _webAtomsCoreDistViewModelAction.default;
+    }, function (_emojiEmojiPopup) {
+      EmojiPopup = _emojiEmojiPopup.default;
+    }, function (_styleGlobalStyle) {}, function (_stylesChannelViewStyle) {}, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
+    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
+      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
+    }, function (_PostView) {
+      PostView = _PostView.default;
+    }, function (_commonControlsButtonsCopyIcon) {
+      CopyIcon = _commonControlsButtonsCopyIcon.default;
+    }, function (_controlsTagCloud) {
+      TagCloud = _controlsTagCloud.default;
+    }, function (_controlsPostList) {
+      PopularPosts = _controlsPostList.default;
+    }, function (_controlsRecentPosts) {
+      RecentPosts = _controlsRecentPosts.default;
+    }, function (_controlsBlogHeader) {
+      BlogHeader = _controlsBlogHeader.default;
+    }, function (_webAtomsCoreDistPack) {
+      Pack = _webAtomsCoreDistPack.default;
+    }, function (_commonControlsRepeaterInfiniteRepeater) {
+      InfiniteRepeater = _commonControlsRepeaterInfiniteRepeater.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_PostSummary) {
+      PostSummary = _PostSummary.default;
+    }, function (_commonToBase) {
+      Base36 = _commonToBase.Base36;
     }],
     execute: function () {
-      _export("AtomList", AtomList = class AtomList extends Array {
-        constructor() {
-          super();
-          this.startValue = 0;
-          this.totalValue = 0;
-          this.sizeValue = 10;
-          this["__proto__"] = AtomList.prototype;
-          this.next = () => {
-            this.start = this.start + this.size;
-          };
-          this.prev = () => {
-            if (this.start >= this.size) {
-              this.start = this.start - this.size;
-            }
-          };
-        }
-        get start() {
-          return this.startValue;
-        }
-        set start(v) {
-          if (v === this.startValue) {
-            return;
-          }
-          this.startValue = v;
-          AtomBinder.refreshValue(this, "start");
-        }
-        get total() {
-          return this.totalValue;
-        }
-        set total(v) {
-          if (v === this.totalValue) {
-            return;
-          }
-          this.totalValue = v;
-          AtomBinder.refreshValue(this, "total");
-        }
-        get size() {
-          return this.sizeValue;
-        }
-        set size(v) {
-          if (v === this.sizeValue) {
-            return;
-          }
-          this.sizeValue = v;
-          AtomBinder.refreshValue(this, "size");
-        }
-        add(item) {
-          const i = this.length;
-          const n = this.push(item);
-          AtomBinder.invokeItemsEvent(this, "add", i, item);
-          AtomBinder.refreshValue(this, "length");
-          return n;
-        }
-        addAll(items) {
-          for (const item of items) {
-            const i = this.length;
-            this.push(item);
-            AtomBinder.invokeItemsEvent(this, "add", i, item);
-            AtomBinder.refreshValue(this, "length");
-          }
-          const t = items["total"];
-          if (t) {
-            this.total = t;
-          }
-        }
-        replace(items, start, size) {
-          this.length = items.length;
-          for (let i = 0; i < items.length; i++) {
-            this[i] = items[i];
-          }
-          this.refresh();
-          const t = items["total"];
-          if (t) {
-            this.total = t;
-          }
-          if (start !== undefined) {
-            this.start = start;
-          }
-          if (size !== undefined) {
-            this.size = size;
-          }
-        }
-        insert(i, item) {
-          const n = this.splice(i, 0, item);
-          AtomBinder.invokeItemsEvent(this, "add", i, item);
-          AtomBinder.refreshValue(this, "length");
-        }
-        set(i, item) {
-          const old = this[i];
-          this[i] = item;
-          AtomBinder.invokeItemsEvent(this, "replace", i, item, old);
-          AtomBinder.refreshValue(this, "length");
-        }
-        removeAt(i) {
-          const item = this[i];
-          this.splice(i, 1);
-          AtomBinder.invokeItemsEvent(this, "remove", i, item);
-          AtomBinder.refreshValue(this, "length");
-          return item;
+      url = (_a = window.pageUrl) !== null && _a !== void 0 ? _a : new URL(location.href);
+      ({
+        1: channelID = url.searchParams.get("p0"),
+        2: type = url.searchParams.get("p1"),
+        3: p2 = url.searchParams.get("p2")
+      } = (_b = /^\/channels\/([^\/]+)\/([^\/]+)\/([^\/]+)\//.exec(url === null || url === void 0 ? void 0 : url.pathname)) !== null && _b !== void 0 ? _b : {});
+      if (channelID) {
+        channelID = Base36.decode(channelID);
+      }
+      type || (type = "");
+      if (p2) {
+        p2 = Base36.decode(p2);
+      }
+      emailID = type === "p" ? p2 : void 0;
+      commentIcon = "💬";
+      ChannelMessage = class ChannelMessage extends AtomControl {
+        constructor(app, e = document.createElement("section")) {
+          super(app, e);
+          this.search = "";
+          this.tagID = type === "t" ? p2 : null;
+          this.authorID = type === "a" ? p2 : null;
+          this.emails = [];
+          this.pushInit();
         }
-        remove(item) {
-          if (item instanceof Function) {
-            let removed = false;
-            for (let index = 0; index < this.length;) {
-              const it = this[index];
-              if (item(it)) {
-                this.splice(index, 1);
-                AtomBinder.invokeItemsEvent(this, "remove", index, it);
-                AtomBinder.refreshValue(this, "length");
-                removed = true;
-                continue;
-              }
-              index++;
+        init() {
+          var _a;
+          var _b;
+          return __awaiter(this, void 0, void 0, function* () {
+            const channel = yield this.blogService.getChannel(void 0, channelID, void 0);
+            this.channel = channel;
+            if (emailID) {
+              this.email = yield this.blogService.getEmail({
+                emailID,
+                channelID
+              });
+              (_a = (_b = this.email).engagements) !== null && _a !== void 0 ? _a : _b.engagements = [];
+              this.emails = [this.email];
             }
-            return removed;
-          }
-          const n = this.indexOf(item);
-          if (n !== -1) {
-            this.removeAt(n);
-            return true;
-          }
-          return false;
+            const search = Bind.twoWaysImmediate(() => this.search);
+            this.element.setAttribute("data-blog-list", "blog-list");
+            this.element.setAttribute("data-layout", "flex-center");
+            this.renderer = XNode.create("section", null, XNode.create(BlogHeader, {
+              search: search,
+              channel: channel
+            }), XNode.create("section", null, emailID ? XNode.create(AtomRepeater, {
+              items: this.emails,
+              "event-items-updated": () => this.itemsUpdated(),
+              itemRenderer: x => XNode.create(PostView, {
+                email: x
+              })
+            }) : XNode.create(AtomRepeater, Object.assign({
+              items: this.emails,
+              "event-items-updated": () => this.itemsUpdated(),
+              "data-auto-scroll": "false"
+            }, InfiniteRepeater.pagedItems(start => (c, e, cancelToken) => this.blogService.getEmails({
+              channelID: this.channel.mailboxID,
+              authorID: this.authorID,
+              tagID: this.tagID,
+              start,
+              search: this.search,
+              cancelToken
+            })), {
+              itemRenderer: x => XNode.create(PostSummary, {
+                mailboxEmail: x
+              })
+            }))), XNode.create("aside", null, XNode.create(TagCloud, null), XNode.create(PopularPosts, null), XNode.create(RecentPosts, null)), XNode.create("footer", null));
+          });
         }
-        clear() {
-          this.length = 0;
-          this.refresh();
+        itemsUpdated() {
+          window.pageReady = true;
         }
-        refresh() {
-          AtomBinder.invokeItemsEvent(this, "refresh", -1, null);
-          AtomBinder.refreshValue(this, "length");
+        reactEmail(email, ce) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              headerMessageID
+            } = email;
+            const emoji = yield EmojiPopup.showControl(ce.target, {
+              parentElement: ce.target
+            });
+            const {
+              channel
+            } = this;
+            const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
+            yield PopupService.alert({
+              message: XNode.create("div", {
+                "data-layout": "vertical-flex"
+              }, "To add your emoji to this post, email just the emoji ", emoji, " with given subject to the channel email address.", XNode.create("div", null, "To: ", channel.emailAddress.emailAddress, " ", XNode.create(CopyIcon, {
+                text: channel.emailAddress.emailAddress
+              }), " "), XNode.create("div", null, "Subject: ", subject, " ", XNode.create(CopyIcon, {
+                text: subject
+              })), XNode.create("div", null, "Body: ", emoji, " ", XNode.create(CopyIcon, {
+                text: emoji
+              })), XNode.create("br", null), XNode.create("div", null, "If you have email client configured, you can click on following link."), XNode.create("div", null, XNode.create("a", {
+                href: `mailto:${channel.emailAddress.emailAddress}?subject=${subject}&body=${emoji}&in-reply-to=${headerMessageID}`
+              }, "Email Now"))),
+              title: "Send Email"
+            });
+          });
         }
-        watch(f, wrap) {
-          if (wrap) {
-            const fx = f;
-            f = function () {
-              const p = [];
-              for (let i = 0; i < arguments.length; i++) {
-                const iterator = arguments[i];
-                p.push(iterator);
-              }
-              return fx.call(this, p);
-            };
-          }
-          return AtomBinder.add_CollectionChanged(this, f);
-        }
-        count(f) {
-          let total = 0;
-          for (const iterator of this) {
-            if (f(iterator)) {
-              total++;
-            }
-          }
-          return total;
-        }
-        avg(f) {
-          if (!this.length) {
-            return 0;
-          }
-          let sum = 0;
-          for (const iterator of this) {
-            sum += f(iterator);
-          }
-          return sum / this.length;
-        }
-        includes(item) {
-          return this.indexOf(item) !== -1;
-        }
-      });
-      ap = Array.prototype;
-      for (const key of Object.getOwnPropertyNames(AtomList.prototype)) {
-        const {
-          value
-        } = Object.getOwnPropertyDescriptor(AtomList.prototype, key);
-        switch (key) {
-          case "add":
-          case "addAll":
-          case "clear":
-          case "refresh":
-          case "set":
-          case "remove":
-          case "removeAt":
-          case "watch":
-          case "replace":
-          case "insert":
-          case "count":
-          case "avg":
-          case "includes":
-            if (key in ap) {
-              continue;
-            }
-            Object.defineProperty(ap, key, {
-              enumerable: false,
-              value,
-              configurable: true,
-              writable: true
+        replyEmail(email, ce) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const emoji = commentIcon;
+            const {
+              headerMessageID
+            } = email;
+            const {
+              channel
+            } = this;
+            const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
+            yield PopupService.alert({
+              message: XNode.create("div", {
+                "data-layout": "vertical-flex"
+              }, "To send comment to this post, email us your comment with given subject to the channel email address.", XNode.create("div", null, "To: ", channel.emailAddress.emailAddress, " ", XNode.create(CopyIcon, {
+                text: channel.emailAddress.emailAddress
+              })), XNode.create("div", null, "Subject: ", subject, " ", XNode.create(CopyIcon, {
+                text: subject
+              })), XNode.create("br", null), XNode.create("div", null, "If you have email client configured, you can click on following link."), XNode.create("div", null, XNode.create("a", {
+                href: `mailto:${channel.emailAddress.emailAddress}?subject=${subject}&in-reply-to=${headerMessageID}`
+              }, "Email Now"))),
+              title: "Send Email"
             });
-            continue;
-        }
-      }
-    }
-  };
-});
-//# sourceMappingURL=AtomList.js.map
-
-    AmdLoader.instance.setup("@web-atoms/core/dist/core/AtomList");
-
-System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
-  "use strict";
-
-  var styled;
-  return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }],
-    execute: function () {
-      styled.css`
-
-    div[data-desktop-app=desktop-app] {
-        width: 100%;
-    }
-
-    /* div[data-base-page=base-page] {
-        & > [data-page-element=title] {
-            overflow-y: visible;
-        }
-    } */
-
-`.withId("default-app-style").withOrder("medium").installGlobal();
-    }
-  };
-});
-//# sourceMappingURL=OverrideAppStyle.js.map
-
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/OverrideAppStyle");
-
-
-System.register([], function(_export, _context) {
-    return {
-        setters: [],
-        execute: function() {
-
-            // this is because in web atoms loader
-            // root url may not be set when the module is registered
-            setTimeout(() => {
-
-                const cssModule = _context.meta.resolve("./data-styles.css");
-                const cssURL = System.resolve(cssModule);
-
-                const link = document.createElement("link");
-                link.id = "data-styles";
-                link.setAttribute("href", cssURL);
-                link.setAttribute("rel", "stylesheet");
-                link.setAttribute("as", "style");
-                link.setAttribute("crossorigin", "anonymous");
-                const head = document.head;
-                const firstElementChild = head.firstElementChild;
-                if (firstElementChild) {
-                    head.insertBefore(link, firstElementChild);
-                } else {
-                    head.appendChild(link);
-                }
-            }, 1);
+          });
         }
-    };
-});
-    
-
-    AmdLoader.instance.setup("@web-atoms/data-styles/data-styles");
-
-System.register(["@web-atoms/core/dist/core/types", "@web-atoms/core/dist/core/AtomList", "./OverrideAppStyle", "@web-atoms/core/dist/style/styled", "@web-atoms/data-styles/data-styles"], function (_export, _context) {
-  "use strict";
-
-  var UMD, styled, ___UMD;
-  function addLinkTag(href, integrity, rel = "stylesheet") {
-    if (!document.head.querySelector(`[href="${href}"]`)) {
-      const fa = document.createElement("link");
-      fa.href = href;
-      fa.crossOrigin = "anonymous";
-      fa.as = "style";
-      fa.rel = "preload";
-      if (integrity) {
-        fa.integrity = integrity;
-      }
-      fa.onload = () => {
-        fa.onload = null;
-        fa.rel = rel;
       };
-      document.head.insertBefore(fa, document.head.firstElementChild);
-    }
-  }
-  return {
-    setters: [function (_webAtomsCoreDistCoreTypes) {
-      UMD = _webAtomsCoreDistCoreTypes.UMD;
-    }, function (_webAtomsCoreDistCoreAtomList) {}, function (_OverrideAppStyle) {}, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_webAtomsDataStylesDataStyles) {}],
-    execute: function () {
-      _export("___UMD", ___UMD = UMD);
-      addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
-      addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.2/css/all.min.css");
-      addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
-      addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
-      styled.css`
-
-:root {
-    --primary-color: #294D4A;
-    --accent-color: #ff6733;
-    --accent2-color: #ff673375;
-    --lighter-accent-color: #e6e6fa60;
-    --light-accent-color: #f2e5fa;
-    --accent-text-color: white;
-    --background-color: #f1f1f160;  
-    --window-background: #50505025;  
-    --media-bg-color: #9F33FF0F;
-    --font-size-small: 0.8125em;
-
-    --hover-color: #b8b88b20;
-    --command-bg-color: #50505025;
-    --hover-text-color: CanvasText;
-    --selection-color: #b8b88b60;
-    --selection-text-color: CanvasText;
-    --spacing: 5px;
-    --spacing-medium: 7px;
-    --spacing-large: 10px;
-}
-
-html, body {
-    margin:0;
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--accent-color) white;
-}
-
-
-::-webkit-scrollbar {
-    width: 5px;
-}
-::-webkit-scrollbar-track {
-    background: white;
-    border-radius: 20px;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--accent-color);
-    border-radius: 20px;
-}
-
-    body {
-    font-family: trebuchet ms, "Source Sans Pro";
-    font-size: 16px;
-    justify-content: stretch;
-
-    & * {
-        font-family: trebuchet ms, "Source Sans Pro";
-        box-sizing: border-box;
-    }
-
-    &::placeholder {
-        font-size: smaller;
-    }
-
-    & ul {
-        padding-inline-start: 15px;
-    }
-
-    & input[type=search] {
-        border: none;
-        outline: none;
-        border-radius: 9999px;
-        padding-right: 10px;
-        padding-left: 25px;
-        background: canvas url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 5px center;
-    }
-}
-
-`.withId("global-styles").withOrder("medium").installGlobal();
-    }
-  };
-});
-//# sourceMappingURL=GlobalStyle.js.map
-
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/style/GlobalStyle");
-
-System.register([], function (_export, _context) {
-  "use strict";
-
-  function Pack(...a) {}
-  _export("default", Pack);
-  return {
-    setters: [],
-    execute: function () {}
-  };
-});
-//# sourceMappingURL=Pack.js.map
-
-    AmdLoader.instance.setup("@web-atoms/core/dist/Pack");
-
-System.register(["tslib", "../../style/GlobalStyle", "@web-atoms/core/dist/Pack"], function (_export, _context) {
-  "use strict";
-
-  var __decorate, Pack, url, view, Empty;
-  return {
-    setters: [function (_tslib) {
-      __decorate = _tslib.__decorate;
-    }, function (_styleGlobalStyle) {}, function (_webAtomsCoreDistPack) {
-      Pack = _webAtomsCoreDistPack.default;
-    }],
-    execute: async function () {
-      url = new URL(location.href);
-      window.pageUrl = url;
-      ({
-        default: view
-      } = await (/\/channels\//.test(url.pathname) || url.searchParams.has("detail") ? _context.import("./ChannelMessage") : _context.import("./ChannelMessageList")));
-      Empty = class Empty extends view {};
-      Empty = __decorate([Pack], Empty);
-      _export("default", Empty);
+      __decorate([InjectProperty, __metadata("design:type", BlogService)], ChannelMessage.prototype, "blogService", void 0);
+      __decorate([Action({
+        onEvent: "react-email"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", [Object, CustomEvent]), __metadata("design:returntype", Promise)], ChannelMessage.prototype, "reactEmail", null);
+      __decorate([Action({
+        onEvent: "reply-email"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", [Object, CustomEvent]), __metadata("design:returntype", Promise)], ChannelMessage.prototype, "replyEmail", null);
+      ChannelMessage = __decorate([Pack, __metadata("design:paramtypes", [Object, Object])], ChannelMessage);
+      _export("default", ChannelMessage);
     }
   };
 });