[Part 1]: Sidebar fixes (#6640)

models/chunter/src/actions.ts

@@ -308,14 +308,4 @@ function defineChannelActions (builder: Builder): void {
     target: notification.class.DocNotifyContext,
     context: { mode: ['context', 'browser'], group: 'tools' }
   })
-
-  createAction(builder, {
-    action: chunter.actionImpl.OpenInSidebarTab,
-    label: workbench.string.OpenInSidebarNewTab,
-    icon: view.icon.DetailsFilled,
-    input: 'focus',
-    category: chunter.category.Chunter,
-    target: notification.class.DocNotifyContext,
-    context: { mode: ['context', 'browser'], group: 'tools' }
-  })
 }

models/chunter/src/plugin.ts

@@ -52,7 +52,6 @@ export default mergeIds(chunterId, chunter, {
     DeleteChatMessage: '' as ViewAction,
     ReplyToThread: '' as ViewAction,
     OpenInSidebar: '' as ViewAction,
-    OpenInSidebarTab: '' as ViewAction,
     TranslateMessage: '' as ViewAction,
     ShowOriginalMessage: '' as ViewAction
   },

plugins/chunter-resources/src/components/ChannelHeader.svelte

@@ -35,6 +35,7 @@
   export let withSearch: boolean = true
   export let isAsideShown: boolean = false
   export let filters: Ref<ActivityMessagesFilter>[] = []
+  export let canOpenInSidebar: boolean = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -78,6 +79,7 @@
   {withAside}
   {isAsideShown}
   {withSearch}
+  {canOpenInSidebar}
   on:aside-toggled
   on:close
 >

plugins/chunter-resources/src/components/ChannelSidebarView.svelte

@@ -61,7 +61,6 @@
 </script>
 
 {#if object}
-  {#key object._id}
   <div class="channel" class:invisible={threadId !== undefined} style:height style:width>
     <ChannelHeader
       _id={object._id}
@@ -71,11 +70,13 @@
       withSearch={false}
       canOpen={true}
       allowClose={true}
+      canOpenInSidebar={false}
       on:close
     />
+    {#key object._id}
       <Channel {object} {context} syncLocation={false} />
-    </div>
     {/key}
+  </div>
 {/if}
 {#if threadId}
   <div class="thread" style:height style:width>

plugins/chunter-resources/src/components/ChannelView.svelte

@@ -103,6 +103,7 @@
     canOpen={isDocChat}
     allowClose={embedded}
     {isAsideShown}
+    canOpenInSidebar={true}
     on:close
     on:select={handleMessageSelect}
     on:aside-toggled={() => {

plugins/chunter-resources/src/components/Header.svelte

@@ -19,11 +19,12 @@
     Breadcrumbs,
     Button,
     Icon,
-    IconDetails,
     Label,
     SearchInput,
     Header,
-    HeaderAdaptive
+    HeaderAdaptive,
+    IconSettings,
+    IconDetailsFilled
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import view from '@hcengineering/view'
@@ -31,9 +32,11 @@
   import { getClient } from '@hcengineering/presentation'
   import { Doc, Ref } from '@hcengineering/core'
   import { ActivityMessagesFilter } from '@hcengineering/activity'
+  import workbench from '@hcengineering/workbench'
 
   import { userSearch } from '../index'
-  import { navigateToSpecial } from '../navigation'
+  import chunter from '../plugin'
+  import { navigateToSpecial, openChannelInSidebar } from '../navigation'
   import ChannelMessagesFilter from './ChannelMessagesFilter.svelte'
 
   export let object: Doc | undefined = undefined
@@ -53,6 +56,7 @@
   export let filters: Ref<ActivityMessagesFilter>[] = []
   export let adaptive: HeaderAdaptive = 'default'
   export let hideActions: boolean = false
+  export let canOpenInSidebar: boolean = false
 
   const client = getClient()
   const dispatch = createEventDispatcher()
@@ -131,23 +135,40 @@
   </svelte:fragment>
   <svelte:fragment slot="actions" let:doubleRow>
     <slot name="actions" {doubleRow} />
+    {#if canOpenInSidebar}
+      <Button
+        icon={IconDetailsFilled}
+        iconProps={{ size: 'small' }}
+        kind={'icon'}
+        showTooltip={{ label: workbench.string.OpenInSidebar }}
+        dataId="open-in-sidebar"
+        on:click={() => {
+          if (object !== undefined) {
+            void openChannelInSidebar(object._id, object._class, object, undefined, true)
+          }
+        }}
+      />
+    {/if}
     {#if canOpen && object}
       <Button
         icon={view.icon.Open}
         iconProps={{ size: 'small' }}
         kind={'icon'}
+        showTooltip={{ label: view.string.Open }}
         on:click={() => {
-          if (object) {
+          if (object !== undefined) {
-            openDoc(client.getHierarchy(), object)
+            void openDoc(client.getHierarchy(), object)
           }
         }}
       />
     {/if}
     {#if withAside}
       <Button
-        icon={IconDetails}
+        icon={IconSettings}
-        iconProps={{ size: 'medium', filled: isAsideShown }}
+        iconProps={{ size: 'medium' }}
         kind={'icon'}
+        dataId="aside-toggle"
+        showTooltip={{ label: chunter.string.Settings }}
         selected={isAsideShown}
         on:click={() => dispatch('aside-toggled')}
       />

plugins/chunter-resources/src/components/threads/ThreadSidebarView.svelte

@@ -23,11 +23,9 @@
 </script>
 
 {#if tab.data.thread}
-  {#key tab.data.thread}
   <div class="root" style:height style:width>
     <ThreadView _id={tab.data.thread} on:close />
   </div>
-  {/key}
 {/if}
 
 <style lang="scss">

plugins/chunter-resources/src/index.ts

@@ -61,7 +61,6 @@ import {
   getThreadLink,
   openChannelInSidebar,
   openChannelInSidebarAction,
-  openChannelInSidebarTabAction,
   replyToThread
 } from './navigation'
 import {
@@ -211,7 +210,6 @@ export default async (): Promise<Resources> => ({
     RemoveChannel: removeChannelAction,
     ReplyToThread: replyToThread,
     OpenInSidebar: openChannelInSidebarAction,
-    OpenInSidebarTab: openChannelInSidebarTabAction,
     TranslateMessage: translateMessage,
     ShowOriginalMessage: showOriginalMessage
   }

plugins/chunter-resources/src/navigation.ts

@@ -276,17 +276,9 @@ export async function openChannelInSidebar (
 export async function openChannelInSidebarAction (
   context: DocNotifyContext,
   _: Event,
-  props?: { object?: Doc, newTab?: boolean }
-): Promise<void> {
-  await openChannelInSidebar(context.objectId, context.objectClass, props?.object, undefined, props?.newTab ?? false)
-}
-
-export async function openChannelInSidebarTabAction (
-  context: DocNotifyContext,
-  event: Event,
   props?: { object?: Doc }
 ): Promise<void> {
-  await openChannelInSidebarAction(context, event, { newTab: true, object: props?.object })
+  await openChannelInSidebar(context.objectId, context.objectClass, props?.object, undefined, true)
 }
 
 export async function openThreadInSidebarChannel (
@@ -326,12 +318,29 @@ export async function openThreadInSidebar (_id: Ref<ActivityMessage>, msg?: Acti
   const name = (await getChannelName(object._id, object._class, object)) ?? (await translate(titleIntl, {}))
   const tabName = await translate(chunter.string.ThreadIn, { name })
   const loc = getCurrentLocation()
+  const allowedPath = loc.path.join('/')
+
+  const currentTAbs = get(sidebarStore).widgetsState.get(widget._id)?.tabs ?? []
+  const tabsToClose = currentTAbs
+    .filter((t) => t.isPinned !== true && t.allowedPath === allowedPath && (t as ChatWidgetTab).type === 'thread')
+    .map((t) => t.id)
+
+  if (tabsToClose.length > 0) {
+    sidebarStore.update((s) => {
+      const widgetState = s.widgetsState.get(widget._id)
+      if (widgetState === undefined) return s
+
+      const tabs = widgetState.tabs.filter((it) => !tabsToClose.includes(it.id))
+      s.widgetsState.set(widget._id, { ...widgetState, tabs })
+      return { ...s }
+    })
+  }
 
   const tab: ChatWidgetTab = {
     id: 'thread_' + _id,
     name: tabName,
     icon: chunter.icon.Thread,
-    allowedPath: loc.path.join('/'),
+    allowedPath,
     type: 'thread',
     data: {
       _id: object?._id,

plugins/love-resources/src/components/VideoWidget.svelte

@@ -43,5 +43,6 @@
     flex: 1;
     align-items: center;
     background-color: var(--theme-statusbar-color);
+    overflow: hidden;
   }
 </style>

plugins/workbench-resources/src/sidebar.ts

@@ -239,7 +239,7 @@ export function pinWidgetTab (widget: Widget, tabId: string): void {
   if (widgetState === undefined) return
 
   const tabs = widgetState.tabs
-    .map((it) => (it.id === tabId ? { ...it, isPinned: true } : it))
+    .map((it) => (it.id === tabId ? { ...it, isPinned: true, allowedPath: undefined } : it))
     .sort((a, b) => (a.isPinned === b.isPinned ? 0 : a.isPinned === true ? -1 : 1))
 
   widgetsState.set(widget._id, { ...widgetState, tabs })

tests/sanity/tests/model/channel-page.ts

@@ -62,7 +62,7 @@ export class ChannelPage extends CommonPage {
   readonly copyLinkButton = (): Locator => this.page.getByRole('button', { name: 'Copy link' })
   readonly deleteMessageButton = (): Locator => this.page.getByRole('button', { name: 'Delete' })
   readonly updateButton = (): Locator => this.page.getByRole('button', { name: 'Update' })
-  readonly openChannelDetails = (): Locator => this.page.locator('.hulyHeader-buttonsGroup > .antiButton')
+  readonly openChannelDetails = (): Locator => this.page.getByTestId('aside-toggle')
   readonly changeChannelNameConfirm = (): Locator => this.page.locator('.selectPopup button')
   readonly privateOrPublicChangeButton = (change: string, autoJoin: boolean): Locator =>
     this.page