Show chat purpose and the change dialog, if clicking title in topbar

The chat in-page title can be far far away, if the chat is long (many
messages), don't want to scroll all the way up to the top.

Also, fix a highlight-sidebar bug: calling `undefined.fn()` if not
already open.

Author: kajmagnus

client/app-more/page-dialogs/ChangePageModal.more.ts

@@ -31,6 +31,8 @@ interface ChangePageDiagState extends ChangePageDiagParams {
   store: Store
   isOpen: Bo
   atRect: Rect
+  pullLeft?: Bo
+  windowWidth?: Nr
 }
 
 
@@ -69,6 +71,9 @@ const ChangePageDialog = createComponent({
       ...props,
       isOpen: true,
       atRect,
+      pullLeft: props.pullLeft ||
+          props.showViewAnswerButton, // (hack) then it's the icon to the left of the title
+      windowWidth: window.innerWidth,
     } satisfies Partial<ChangePageDiagState>);
   },
 
@@ -90,6 +95,10 @@ const ChangePageDialog = createComponent({
     const isOwnOrCore = isOwnOrStaff || user_isTrustMinNotThreat(me, TrustLevel.CoreMember);
     const isStaffOrTrusted = isStaff(me) || user_isTrustMinNotThreat(me, TrustLevel.Trusted);
 
+    let anyChatPurpose: RElm | U;
+    let anyViewMembersBtn: RElm | U;
+    let anyEditPurposeBtn: RElm | U;
+    let anyLeaveButton: RElm | U;
     let anyViewAnswerButton;
     let changeStatusTitle;
     let setNewListItem;
@@ -138,6 +147,59 @@ const ChangePageDialog = createComponent({
 
       const origPost = page.postsByNr[BodyNr];
 
+      const isChat = page_isChat(page.pageRole);
+      if (isChat) {
+        anyChatPurpose = rFr({},
+            // Maybe it's obvious that this text is the chat purpose? It'd typically start with
+            // "Here you can ...". Could skip?  Or, show the title again, with an edit button
+            // just after? And an edit button after the purpose, too?
+            r.div({ className: 's_ExplDrp_Ttl n_Purp' }, t.c.Purpose), // [chat_purpose_header]
+            r.div({ className: 's_ExplDrp_DescIt' },
+              debiki2.page.PostBody({ store, post: origPost })));
+
+        // A list chat members button, unless it's a joinless chat (which one doesn't need
+        // to join to post messages, doesn't have members (unless type changed to joinless,
+        // when there already were members, hmm)). [0_joinless_chat_members]
+        anyViewMembersBtn = page.pageRole === PageRole.JoinlessChat ? null :
+            r.div({ className: 's_ExplDrp_ActIt' },
+              Button({
+                onClick: () => {
+                  // REFACTOR: Break out fn!  [break_out_view_chat_membs_fn]
+                  ReactActions.setPagebarOpen(true);
+                  sidebar.contextBar.showUsers();
+                  setTimeout(() => { // [highl_contextbar]
+                    sidebar.contextBar.highligtDuringMillis(700);
+                  })
+                  this.close();
+                }},
+                // Elsewhere, id: 'e2eWB_ViewPeopleB'
+                r.span({ className: 'e_ChPgD_ViewMembB'  }, t.wb.ViewChatMembers),
+                ));
+
+        const isChatMember = me_isPageMember(me, page);
+
+        // UX BUG, harmles: Can leave chat page, when editor open & typing a message already.
+        // Then, when submitting, there's this error:  [leave_chat_ux_bug]
+        //    "not a member of this chat channel [EsE4UGY7]".
+        anyLeaveButton = !isChatMember ? null : r.div({ className: 's_ExplDrp_ActIt' },
+            Button({
+                onClick: () => {
+                  Server.leavePage();
+                  this.close();
+                }},
+                // Elsewhere, id: 'e2eWB_LeaveB'
+                r.span({ className: 'e_ChPgD_LeaveB'  }, t.wb.LeaveThisChat),
+                ));
+
+        anyEditPurposeBtn = !isOwnOrStaff ? null : r.div({ className: 's_ExplDrp_ActIt' },
+            Button({ className: 'e_ChPgD_EdPurpB',
+                onClick: () => {
+                  editor.openToEditChatTitleAndPurpose();
+                  this.close();
+                }},
+                t.wb.EditChat));
+      }
+
       // Ideas and Problems can be solved [tpc_typ_solv], and then
       // pat cannot change their doing status, unless un-selecting
       // the solution post.
@@ -309,11 +371,46 @@ const ChangePageDialog = createComponent({
       }
     }
 
+    // If ever opening, although empty, that'd be a bug.  [empty_change_page_dlg]
+    // (It's safe to forget to update this list — there'll be a debug build assertion failure.)
+    // @ifdef DEBUG
+    dieIf(state.isOpen && !(
+          anyChatPurpose
+          || anyViewMembersBtn
+          || anyLeaveButton
+          || anyEditPurposeBtn
+          || anyViewAnswerButton
+          || changeStatusTitle
+          || setNewListItem
+          || setPlannedListItem
+          || setStartedListItem
+          || setDoneListItem
+          || assignBtn
+          || changeCategoryListItem
+          || changeTopicTypeListItem
+          || reopenListItem
+          || closeListItem
+          || deletePageListItem
+          || undeletePageListItem
+          || changeComtOrderListItem
+          || changeComtNestingListItem), 'TyEEMPYTCHAPAD');
+    // @endif
+
     return (
       DropdownModal({ show: state.isOpen, onHide: this.close, atRect: state.atRect,
-          pullLeft: state.showViewAnswerButton, // (hack) then it's the icon to the left of the title
-          showCloseButton: true, dialogClassName2: 's_ChPgD' },
+          pullLeft: state.pullLeft, windowWidth: state.windowWidth,
+          showCloseButton: true, dialogClassName2: 's_ChPgD',
+          allowWide: !!anyChatPurpose,
+          },
+        anyChatPurpose,
+        anyViewMembersBtn,
+        anyLeaveButton,
+        anyEditPurposeBtn,
         anyViewAnswerButton,
+        // If is a chat, and pat is a mod or the page owner, then, there's chat related
+        // buttons above, and alter page buttons below — then, nice with a separator line
+        // in between.
+        isOwnOrStaff && anyChatPurpose ? r.hr() : null,
         changeStatusTitle,
         setNewListItem,
         setPlannedListItem,

client/app-slim/model.ts

@@ -2693,6 +2693,7 @@ interface ShowNewPageParams {
 interface ChangePageDiagParams {
   page: Page,
   showViewAnswerButton?: true,
+  pullLeft?: Bo
 }
 
 
@@ -2991,6 +2992,7 @@ interface DropdownProps extends SharedDiagParams {
 interface SharedDiagParams {
   atRect?: Rect;
   pullLeft?: Bo;
+  allowWide?: Bo  // see [dropdown_width]
   allowFullWidth?: Bo;
   closeOnClickOutside?: false; // default true
   onHide?: () => V;

client/app-slim/oop-methods.ts

@@ -657,7 +657,7 @@ export function me_uiPrefs(me: Myself): UiPrefs {
 
 /// Oops should use at more places. [me_isPageMember]
 ///
-function me_isPageMember(me: Me, page: Page): Bo {
+export function me_isPageMember(me: Me, page: Page): Bo {
   if (page.pageMemberIds.indexOf(me.id) >= 0)
     return true;
 

client/app-slim/page/chat.ts

@@ -365,7 +365,7 @@ const TitleAndLastChatMessages = createComponent({
         title,
         r.div({ className: 'esChatChnl_about'},
           thisIsTheWhat,
-          r.div({}, t.c.Purpose),
+          r.div({}, t.c.Purpose), // [chat_purpose_header]
           origPostBody),
         scrollUpTips,
         messages,

client/app-slim/sidebar/sidebar.ts

@@ -194,6 +194,7 @@ export var Sidebar = createComponent({  // RENAME to ContextBar
   },
 
   highligtDuringMillis: function(millis: number) {
+    // But `fadingBackdrop` is undef, if called too soon. [highl_contextbar]
     this.refs.fadingBackdrop.showForMillis(millis);
   },
 

client/app-slim/slim-bundle.d.ts

@@ -256,6 +256,8 @@ declare namespace debiki2 {
       closeSidebar: () => void;
       openSidebar: () => void;
       showAdminGuide: () => void;
+      showUsers: () => V;
+      highligtDuringMillis: (ms: Nr) => V;
     }
   }
 
@@ -394,6 +396,7 @@ declare namespace debiki2 {
   function pat_name(pat: Me | Pat | LazyCreatedAnon | NewAnon): St;
   function pat_isMe(pat: UserInclDetails | Me | Pat | PatId): pat is Me;
   function pat_isMember(pat: UserInclDetails | Me | Pat | PatId): Bo;
+  function me_isPageMember(me: Me, page: Page): Bo;  // change to `pat_isPageMember`?
   var isGuest;
   function pat_isGuest(pat: UserInclDetails | Me | Pat): Bo;
   function user_isGuest(pat: UserInclDetails | Me | Pat): Bo;
@@ -406,6 +409,8 @@ declare namespace debiki2 {
   function anonStatus_toStr(anonStatus: AnonStatus, verb?: Verbosity): St;
   var page_isGroupTalk;
 
+  function pat_isAuthorOf(pat: Me | Pat, post: Post, patsById: PpsById): Bo;
+
   function store_getAuthorOrMissing(store: DiscStore, post: Post): Pat;
   function store_getUserOrMissing(store: DiscStore, userId: PatId, errorCode2?: St): Pat;
   function store_thisIsMyPage(store: DiscStore): Bo;
@@ -558,7 +563,8 @@ declare namespace debiki2 {
   }
 
   namespace page {
-    var Post;
+    function Post(props: PostProps): RElm;
+    function PostBody(props: PostProps): RElm;
     function CatsOrHomeLink(ps: { page: PageTypeAncestors,
           store: Store, forTopbar?: Bo, skipHome?: true }): RElm | N;
     namespace Hacks {

client/app-slim/topbar/topbar.styl

@@ -782,12 +782,20 @@ html.esSidebarsOverlayPage
     padding: 2px $paddingLeftRight 2px;
     position: relative;
     top: -4px;
+    // Or:
+    padding: 3px $paddingLeftRight 4px;  // simpler to click, if mobile?
+    top: -3px;
+
     pointer-events: auto;
     font-weight: bold;
     color: hsl(0 0% 25%);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    border: none; // removes .btn border (it's a dropdown button)
+    .caret
+      margin-left: 0.6ex;
+
     @media (max-height: $tallHeight - 1px)
       // Smaller screen, so smaller font — more space for the actual content.
       top: -2px;

client/app-slim/topbar/topbar.ts

@@ -297,9 +297,36 @@ export const TopBar = createComponent({
     const showTitle = isBitDown && anyUnsafeTitleSource;
 
     if (catsOrHomeLink || showTitle) {
-      const anyTitle = !showTitle ? null :
-          r.div({ className: 's_Tb_Pg_Ttl' },  // [title_plain_txt]
-            anyUnsafeTitleSource);
+      // The title, if clicked, shows the Change Page dialog, since when we've scrolled down
+      // on a page, the in-page title isn't visible any longer (especially if it's a long chat)
+      // but it's still nice to have access to the Change dialog.
+      // For chat pages, the Change dialog also shows the chat purpose — the orig post (with
+      // the purpose text) is typically is far, far away, at the beginning of the chat history.
+
+      // But if it's not a chat, and we're not the author or a mod, then, there'd be
+      // nothing in the Change dialog, so don't show it.
+      // But how do we know if it *would* be empty, if opened? The correct approach might be
+      // to break out a fn from  ChangePageDialog  that (depending on a param) either
+      // creates the dialog content, or just returns true iff there's sth to render,
+      // and call that fn from here. [empty_change_page_dlg]  But for now:
+      const isOwnPage = store_thisIsMyPage(store);
+      const isChat = page_isChat(page.pageRole);
+      // Sometimes, should show dialog, if is core member. Oh well, the *important* thing
+      // is to always show, if is a *chat* (so can see the chat purpose).
+      const showDiagOnClick = isOwnPage || isStaff(me) || isChat;
+
+      const className = 's_Tb_Pg_Ttl';
+      const anyTitle = !showTitle ? null : (
+          !showDiagOnClick
+            ? r.div({ className }, anyUnsafeTitleSource)  // [title_plain_txt]
+            : Button({ className,
+                onClick: (event: MouseEvent) => {
+                  const rect = cloneEventTargetRect(event);
+                  morebundle.openChangePageDialog(rect, { page, showViewAnswerButton: true });
+                }},
+                anyUnsafeTitleSource, r.span({ className: 'caret' })));  // [title_plain_txt]
+
+
       noCatsMaybeTitle = isSectionPage;
       CatsAndTitle = () =>
           r.div({ className: 's_Tb_Pg' },

client/app-slim/util/ExplainingDropdown.styl

@@ -1,17 +1,24 @@
 
 $sideSpace = 20px;
 
-.s_ExplDrp_Ttl
-  margin: 6px 50px 7px 12px;  // 50px = space for a close [X] button
-  font-size: 17px;
-  font-style: italic;
+.s_ExplDrp_Ttl,
+.s_ExplDrp_DescIt
+  margin: 9px 50px 3px 20px;  // 50px = space for a close [X] button
 
+.s_ExplDrp_Ttl
+  // If it's a "Purpose:" header, then, text follows below, so, add a bit more space.
+  &.n_Purp
+    margin-bottom: 0.6ex;
+  font-size: 15px;
+  font-weight: bold;
+  color: hsl(0 0% 33%); // otherwise bold is a bit too strong
 
 // If the action-item (e.g. a button) is at the top of the dialog, add some padding.
 .esCloseCross + .s_ExplDrp_ActIt
   padding-top: 7px;
 
 .s_ExplDrp_ActIt + .s_NotfPrefDD_Ttl,
+.s_ExplDrp_ActIt + .s_ExplDrp_ActIt,
 .esExplDrp_entry + .s_NotfPrefDD_Ttl
   margin-top: 14px;
 
@@ -25,6 +32,8 @@ $sideSpace = 20px;
   .esExplDrp_ActIt_Expl
     margin: 0 0 7px $sideSpace;
 
+  .e_AsgB
+    margin-left: 9px; // $sideSpace = 20px is a bit much
   // No hover. The button instead has some :hover style.
 
 

client/app-slim/utils/DropdownModal.styl

@@ -6,6 +6,7 @@
     width: 100%;
     height: 0;
 
+.esDropModal-NotSuperWide,
 .esDropModal-NotTooWide
   .esDropModal_content
     max-width: 89%; // so always some emptiness outside that one can click to close. [4YK8ST2]
@@ -16,6 +17,11 @@
     .esDropModal_content
       max-width: 560px; // or annoyingly wide. [dropdown_width]
 
+@media (min-width: 899px)  // (800px / 89% * 100% = 899px)
+  .esDropModal-NotSuperWide
+    .esDropModal_content
+      max-width: 800px; // [dropdown_width]
+
 .esDropModal_CloseB
   // This doesn't work well: sometimes overlaps long contents.
   // Wouldn't float: right be better? But need one extra <div>?  [close_cross_css]
@@ -34,6 +40,9 @@
   background: white;
   min-width: 150px;
   margin-right: 6px;
+  & > hr
+    margin: 5px 0 10px;
+    border-top: 1px solid hsl(0 0% 87%);
 
 .esDropModal_header
   font-style: italic;