@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/layout/AppShell.scss

@@ -2,18 +2,56 @@
   height: 100vh;
   display: flex;
   flex-direction: row;
+  gap: 0;
   overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0)),
+    var(--sub-bg-color);
+}
+
+.app-shell__sidebar-region {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  min-height: 0;
 }
 
 .app-shell__content {
   flex: 1;
   position: relative;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  padding: 4px 4px 4px 0;
+  transition: padding-left .3s cubic-bezier(.4, 0, .2, 1);
+  border-radius: 0;
+  background-color: var(--sub-bg-color);
+  box-shadow:
+    0 16px 40px rgba(15, 23, 42, .05),
+    0 2px 8px rgba(15, 23, 42, .04);
+}
+
+.app-shell__content.is-sidebar-collapsed {
+  padding-left: 4px;
+}
+
+.app-shell__content > * {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border-radius: 12px;
   overflow: hidden;
-  background-color: #fff;
 }
 
 .app-shell--dark {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)),
+    #111111;
+
   .app-shell__content {
-    background-color: #141414;
+    background-color: var(--sub-bg-color);
+    box-shadow: 0 18px 48px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .22);
   }
 }

package/src/components/layout/AppShell.tsx

@@ -1,12 +1,16 @@
 import './AppShell.scss'
 
 import { Layout } from 'antd'
+import { useSetAtom } from 'jotai'
+import { useEffect } from 'react'
 import type { PropsWithChildren } from 'react'
 
 import type { Session } from '@vibe-forge/core'
 
 import { NavRail } from '#~/components/NavRail'
 import { Sidebar } from '#~/components/Sidebar'
+import { useSidebarQueryState } from '#~/hooks/use-sidebar-query-state'
+import { isSidebarCollapsedAtom } from '#~/store/index'
 
 type AppShellProps = PropsWithChildren<{
   activeSessionId?: string
@@ -26,18 +30,29 @@ export function AppShell({
   showSidebar,
   sidebarWidth
 }: AppShellProps) {
+  const { isSidebarCollapsed } = useSidebarQueryState()
+  const setIsSidebarCollapsed = useSetAtom(isSidebarCollapsedAtom)
+
+  useEffect(() => {
+    setIsSidebarCollapsed(isSidebarCollapsed)
+  }, [isSidebarCollapsed, setIsSidebarCollapsed])
+
   return (
     <Layout className={`app-shell ${isDarkMode ? 'app-shell--dark' : ''}`}>
-      <NavRail />
-      {showSidebar && (
-        <Sidebar
-          width={sidebarWidth}
-          activeId={activeSessionId}
-          onSelectSession={onSelectSession}
-          onDeletedSession={onDeletedSession}
-        />
-      )}
-      <Layout.Content className='app-shell__content'>
+      <div className='app-shell__sidebar-region'>
+        <NavRail />
+        {showSidebar && (
+          <Sidebar
+            width={sidebarWidth}
+            activeId={activeSessionId}
+            onSelectSession={onSelectSession}
+            onDeletedSession={onDeletedSession}
+          />
+        )}
+      </div>
+      <Layout.Content
+        className={`app-shell__content ${isSidebarCollapsed ? 'is-sidebar-collapsed' : ''}`}
+      >
         {children}
       </Layout.Content>
     </Layout>

package/src/components/sidebar/SessionContextMenu.scss

@@ -0,0 +1,143 @@
+.session-context-menu {
+  min-width: 196px;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background-color: var(--bg-color);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.session-context-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-color);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--primary-color) 8%,
+      var(--bg-color)
+    );
+  }
+
+  &.is-confirming {
+    background-color: color-mix(
+      in srgb,
+      var(--primary-color) 12%,
+      var(--bg-color)
+    );
+  }
+
+  &.is-danger {
+    color: #dc2626;
+
+    &:hover {
+      background-color: rgba(220, 38, 38, .12);
+      color: #b91c1c;
+    }
+
+    &.is-confirming {
+      background-color: rgba(220, 38, 38, .12);
+    }
+  }
+}
+
+.session-context-menu__meta {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.session-context-menu__icon {
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.session-context-menu__item--star .session-context-menu__icon {
+  color: #d97706;
+}
+
+.session-context-menu__item--archive .session-context-menu__icon {
+  color: #dc2626;
+}
+
+.session-context-menu__item--delete .session-context-menu__icon {
+  color: #991b1b;
+}
+
+.session-context-menu__item--copy-session-link .session-context-menu__icon {
+  color: #2563eb;
+}
+
+.session-context-menu__item--copy-session-id .session-context-menu__icon {
+  color: #64748b;
+}
+
+.session-context-menu__item--copy-resume-command .session-context-menu__icon {
+  color: #0f766e;
+}
+
+.session-context-menu__label {
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.session-context-menu__confirm-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.session-context-menu__confirm-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &.is-accept:hover {
+    background-color: rgba(34, 197, 94, .14);
+    color: #15803d;
+  }
+
+  &.is-cancel:hover {
+    background-color: rgba(148, 163, 184, .18);
+    color: var(--text-color);
+  }
+}
+
+.session-context-menu__divider {
+  height: 1px;
+  margin: 4px 6px;
+  background-color: var(--border-color);
+}

package/src/components/sidebar/SessionContextMenu.tsx

@@ -0,0 +1,196 @@
+import './SessionContextMenu.scss'
+
+import { App, Dropdown, Input } from 'antd'
+import type { ReactElement } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { Session } from '@vibe-forge/core'
+
+import { buildSessionUrl } from '#~/utils/chat-links.js'
+import { copyTextWithFeedback } from '#~/utils/copy.js'
+import { SessionContextMenuContent } from './SessionContextMenuContent'
+import type { SessionContextMenuEntry } from './SessionContextMenuContent'
+
+interface SessionContextMenuProps {
+  children: ReactElement
+  session: Session
+  onArchive: (id: string) => void | Promise<void>
+  onDelete: (id: string) => void | Promise<void>
+  onRename: (id: string, title: string) => Promise<void>
+  onStar: (id: string, isStarred: boolean) => void | Promise<void>
+}
+
+type PendingSessionMenuAction = 'archive' | 'delete' | null
+
+export function SessionContextMenu({
+  children,
+  session,
+  onArchive,
+  onDelete,
+  onRename,
+  onStar
+}: SessionContextMenuProps) {
+  const { t } = useTranslation()
+  const { message, modal } = App.useApp()
+  const [open, setOpen] = useState(false)
+  const [pendingAction, setPendingAction] = useState<PendingSessionMenuAction>(null)
+
+  const closeMenu = () => {
+    setOpen(false)
+    setPendingAction(null)
+  }
+
+  const handleConfirmableActionClick = (action: Exclude<PendingSessionMenuAction, null>) => {
+    if (pendingAction === action) {
+      closeMenu()
+      if (action === 'archive') {
+        void onArchive(session.id)
+        return
+      }
+      void onDelete(session.id)
+      return
+    }
+
+    setPendingAction(action)
+  }
+
+  const entries = useMemo<SessionContextMenuEntry[]>(() => {
+    return [
+      {
+        key: 'star',
+        label: session.isStarred ? t('common.unstar') : t('common.star'),
+        icon: session.isStarred ? 'star' : 'star_border',
+        onClick: () => {
+          closeMenu()
+          void onStar(session.id, !session.isStarred)
+        }
+      },
+      {
+        key: 'rename',
+        label: t('common.rename'),
+        icon: 'edit',
+        onClick: () => {
+          closeMenu()
+          let nextTitle = session.title ?? ''
+
+          modal.confirm({
+            title: t('common.renameSession'),
+            okText: t('common.confirm'),
+            cancelText: t('common.cancel'),
+            content: (
+              <Input
+                autoFocus
+                defaultValue={session.title ?? ''}
+                placeholder={t('chat.enterTitle')}
+                onChange={(event) => {
+                  nextTitle = event.target.value
+                }}
+              />
+            ),
+            onOk: async () => {
+              const normalizedTitle = nextTitle.trim()
+              if (normalizedTitle === (session.title ?? '').trim()) {
+                return
+              }
+
+              try {
+                await onRename(session.id, normalizedTitle)
+                void message.success(t('chat.titleUpdated'))
+              } catch {
+                void message.error(t('common.operationFailed'))
+                throw new Error('rename-session-failed')
+              }
+            }
+          })
+        }
+      },
+      {
+        key: 'archive',
+        label: session.isArchived ? t('common.restore') : t('common.archive'),
+        confirmLabel: t('common.confirmAction', {
+          action: session.isArchived ? t('common.restore') : t('common.archive')
+        }),
+        icon: session.isArchived ? 'unarchive' : 'archive',
+        onClick: () => {
+          handleConfirmableActionClick('archive')
+        }
+      },
+      {
+        key: 'delete',
+        label: t('common.delete'),
+        confirmLabel: t('common.confirmAction', { action: t('common.delete') }),
+        icon: 'delete',
+        danger: true,
+        onClick: () => {
+          handleConfirmableActionClick('delete')
+        }
+      },
+      { key: 'divider-main', type: 'divider', label: '', icon: '', onClick: () => undefined },
+      {
+        key: 'copy-session-link',
+        label: t('common.copySessionLink'),
+        icon: 'link',
+        onClick: () => {
+          closeMenu()
+          void copyTextWithFeedback({
+            text: buildSessionUrl(session.id),
+            messageApi: message,
+            successMessage: t('common.sessionLinkCopied'),
+            failureMessage: t('common.copyFailed')
+          })
+        }
+      },
+      {
+        key: 'copy-session-id',
+        label: t('common.copySessionId'),
+        icon: 'fingerprint',
+        onClick: () => {
+          closeMenu()
+          void copyTextWithFeedback({
+            text: session.id,
+            messageApi: message,
+            successMessage: t('common.sessionIdCopied'),
+            failureMessage: t('common.copyFailed')
+          })
+        }
+      },
+      {
+        key: 'copy-resume-command',
+        label: t('common.copyResumeCommand'),
+        icon: 'terminal',
+        onClick: () => {
+          closeMenu()
+          void copyTextWithFeedback({
+            text: `vf --resume ${session.id}`,
+            messageApi: message,
+            successMessage: t('common.resumeCommandCopied'),
+            failureMessage: t('common.copyFailed')
+          })
+        }
+      }
+    ]
+  }, [message, modal, onArchive, onDelete, onRename, onStar, pendingAction, session, t])
+
+  return (
+    <Dropdown
+      trigger={['contextMenu']}
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (!nextOpen) {
+          setPendingAction(null)
+        }
+      }}
+      dropdownRender={() => (
+        <SessionContextMenuContent
+          entries={entries}
+          pendingAction={pendingAction}
+          onCancelConfirm={() => setPendingAction(null)}
+        />
+      )}
+    >
+      {children}
+    </Dropdown>
+  )
+}

package/src/components/sidebar/SessionContextMenuContent.tsx

@@ -0,0 +1,89 @@
+interface SessionContextMenuEntry {
+  confirmLabel?: string
+  danger?: boolean
+  icon: string
+  key: string
+  label: string
+  onClick: () => void
+  type?: 'divider'
+}
+
+export function SessionContextMenuContent({
+  entries,
+  pendingAction,
+  onCancelConfirm
+}: {
+  entries: SessionContextMenuEntry[]
+  pendingAction: string | null
+  onCancelConfirm: () => void
+}) {
+  return (
+    <div className='session-context-menu' onContextMenu={(event) => event.preventDefault()}>
+      {entries.map((entry) => {
+        if (entry.type === 'divider') {
+          return <div key={entry.key} className='session-context-menu__divider' />
+        }
+
+        const isConfirming = pendingAction === entry.key
+        return (
+          <div
+            key={entry.key}
+            role='button'
+            tabIndex={0}
+            className={`session-context-menu__item session-context-menu__item--${entry.key} ${
+              entry.danger ? 'is-danger' : ''
+            } ${isConfirming ? 'is-confirming' : ''}`}
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              entry.onClick()
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                entry.onClick()
+              }
+            }}
+          >
+            <div className='session-context-menu__meta'>
+              <span className='material-symbols-rounded session-context-menu__icon'>
+                {entry.icon}
+              </span>
+              <span className='session-context-menu__label'>
+                {isConfirming ? (entry.confirmLabel ?? entry.label) : entry.label}
+              </span>
+            </div>
+            {isConfirming && (
+              <div className='session-context-menu__confirm-actions'>
+                <button
+                  type='button'
+                  className='session-context-menu__confirm-btn is-accept'
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    entry.onClick()
+                  }}
+                >
+                  <span className='material-symbols-rounded'>check</span>
+                </button>
+                <button
+                  type='button'
+                  className='session-context-menu__confirm-btn is-cancel'
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    onCancelConfirm()
+                  }}
+                >
+                  <span className='material-symbols-rounded'>close</span>
+                </button>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export type { SessionContextMenuEntry }