@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/git-controls/BranchTreeEntries.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from 'react'
+
+import type { GitBranchSummary } from '@vibe-forge/types'
+
+import type { GitBranchTreeEntry } from './git-branch-tree'
+
+export function BranchTreeEntries({
+  collapsedFolderKeys,
+  depth = 0,
+  hasSearchQuery,
+  isBusy,
+  treeEntries,
+  onSwitchBranch,
+  onToggleFolder
+}: {
+  collapsedFolderKeys: string[]
+  depth?: number
+  hasSearchQuery: boolean
+  isBusy: boolean
+  treeEntries: GitBranchTreeEntry[]
+  onSwitchBranch: (branch: GitBranchSummary) => void
+  onToggleFolder: (folderKey: string) => void
+}) {
+  const getTreeRowStyle = (value: number): CSSProperties => ({
+    ['--branch-depth' as string]: value
+  })
+
+  return treeEntries.map(entry => {
+    if (entry.type === 'folder') {
+      const isCollapsed = !hasSearchQuery && collapsedFolderKeys.includes(entry.folder.key)
+      return (
+        <div
+          key={`folder:${entry.folder.key}`}
+          className={`chat-header-git__branch-tree-folder ${isCollapsed ? 'is-collapsed' : ''}`}
+        >
+          <button
+            type='button'
+            className='chat-header-git__branch-folder-row'
+            aria-expanded={!isCollapsed}
+            style={getTreeRowStyle(depth)}
+            onClick={() => onToggleFolder(entry.folder.key)}
+          >
+            <span className='chat-header-git__row-icon chat-header-git__branch-folder-chevron material-symbols-rounded'>
+              expand_more
+            </span>
+            <span className='chat-header-git__row-icon material-symbols-rounded'>
+              {isCollapsed ? 'folder' : 'folder_open'}
+            </span>
+            <span className='chat-header-git__row-title'>{entry.folder.label}</span>
+          </button>
+          <div
+            className={`chat-header-git__branch-tree-collapse ${isCollapsed ? 'is-collapsed' : ''}`}
+            aria-hidden={isCollapsed}
+          >
+            <div className='chat-header-git__branch-tree-collapse-inner'>
+              <div className='chat-header-git__branch-tree-children'>
+                <BranchTreeEntries
+                  collapsedFolderKeys={collapsedFolderKeys}
+                  depth={depth + 1}
+                  hasSearchQuery={hasSearchQuery}
+                  isBusy={isBusy}
+                  treeEntries={entry.folder.entries}
+                  onSwitchBranch={onSwitchBranch}
+                  onToggleFolder={onToggleFolder}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <button
+        key={`${entry.branch.kind}:${entry.branch.name}`}
+        type='button'
+        className='chat-header-git__branch-row chat-header-git__branch-row--tree'
+        disabled={isBusy}
+        title={entry.branch.name}
+        style={getTreeRowStyle(depth)}
+        onClick={() => onSwitchBranch(entry.branch)}
+      >
+        <div className='chat-header-git__branch-row-main'>
+          <span className='chat-header-git__row-icon material-symbols-rounded'>
+            {entry.branch.kind === 'local' ? 'call_split' : 'cloud_sync'}
+          </span>
+          <span className='chat-header-git__row-copy'>
+            <span className='chat-header-git__row-title'>{entry.label}</span>
+          </span>
+        </div>
+        {entry.branch.isCurrent
+          ? (
+            <span className='chat-header-git__row-state material-symbols-rounded'>check</span>
+          )
+          : null}
+      </button>
+    )
+  })
+}

package/src/components/chat/git-controls/ChatGitControls.scss

@@ -2,6 +2,43 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+}
+
+.chat-draft-git {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0;
+  min-width: max-content;
+}
+
+.chat-header-git--compact,
+.chat-draft-git--compact .chat-header-git {
+  gap: 4px;
+}
+
+.chat-draft-git__controls {
+  flex-wrap: nowrap;
+  min-width: max-content;
+}
+
+.chat-draft-git__unavailable {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sub-text-color);
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+  }
 }
 
 .chat-header-git__split {
@@ -20,16 +57,17 @@
   background: transparent;
   color: var(--sub-text-color, #6b7280);
   box-shadow: none;
-  transition: background-color .2s ease, color .2s ease;
+  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
 
   .material-symbols-rounded {
     font-size: 14px;
     line-height: 1;
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: var(--nav-hover-bg, #f3f4f6);
     color: var(--text-color, #111827);
+    box-shadow: inset 0 0 0 1px var(--nav-hover-border, rgba(37, 99, 235, .14));
   }
 
   &:disabled {
@@ -65,6 +103,8 @@
   .chat-header-git__split-toggle.ant-btn.ant-btn-text {
     background-color: var(--nav-active-bg, #eff6ff);
     color: var(--nav-active-text, #2563eb);
+    box-shadow: inset 0 0 0 1px
+      var(--nav-active-border, rgba(37, 99, 235, .22));
   }
 }
 
@@ -83,6 +123,8 @@
   &.is-open {
     background-color: var(--nav-active-bg, #eff6ff);
     color: var(--nav-active-text, #2563eb);
+    box-shadow: inset 0 0 0 1px
+      var(--nav-active-border, rgba(37, 99, 235, .22));
   }
 
   &.is-disabled {
@@ -112,6 +154,83 @@
   font-weight: 500;
 }
 
+.chat-header-git__trigger--worktree.is-compact .chat-header-git__trigger-label {
+  display: none;
+}
+
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--worktree.is-compact {
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+  justify-content: center;
+  gap: 0;
+
+  .chat-header-git__trigger-main {
+    width: 100%;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .chat-header-git__trigger-chevron {
+    display: none;
+  }
+}
+
+.chat-header-git__trigger.ant-btn.ant-btn-text.chat-header-git__trigger--branch.is-compact {
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+  justify-content: center;
+  gap: 0;
+
+  .chat-header-git__trigger-label,
+  .chat-header-git__dirty-dot {
+    display: none;
+  }
+
+  .chat-header-git__trigger-main {
+    width: 100%;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .chat-header-git__trigger-chevron {
+    display: none;
+  }
+}
+
+.chat-header-git__split--operations.is-compact {
+  gap: 4px;
+
+  .chat-header-git__split-main.ant-btn.ant-btn-text {
+    width: 24px;
+    min-width: 24px;
+    padding: 0;
+    justify-content: center;
+    gap: 0;
+    border-radius: 6px;
+
+    .chat-header-git__trigger-label {
+      display: none;
+    }
+  }
+
+  .chat-header-git__split-divider {
+    display: none;
+  }
+
+  .chat-header-git__split-toggle.ant-btn.ant-btn-text {
+    width: 24px;
+    min-width: 24px;
+    padding: 0;
+    justify-content: center;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+}
+
 .chat-header-git__separator {
   width: 1px;
   height: 12px;
@@ -148,10 +267,101 @@
   width: 236px;
 }
 
-.chat-header-git__overlay--worktrees {
+.chat-header-git__overlay--worktree-root {
   width: 228px;
 }
 
+.chat-header-git__overlay--worktree-submenu {
+  position: absolute;
+  bottom: 0;
+  left: calc(100% + 6px);
+  width: 268px;
+}
+
+.chat-header-git__menu-shell {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+}
+
+.chat-header-git__menu-row {
+  width: 100%;
+  min-height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  cursor: pointer;
+  color: var(--text-color);
+  text-align: left;
+  transition: background-color .2s ease, color .2s ease;
+
+  &:hover:not(:disabled),
+  &.is-active {
+    background: var(--sub-bg-color, rgba(15, 23, 42, .05));
+  }
+
+  &:disabled,
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: .55;
+  }
+}
+
+.chat-header-git__menu-row-main,
+.chat-header-git__menu-row-trailing {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.chat-header-git__menu-row-main {
+  flex: 0 0 auto;
+}
+
+.chat-header-git__menu-row-trailing {
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-end;
+  color: var(--sub-text-color);
+
+  .material-symbols-rounded {
+    font-size: 16px;
+  }
+}
+
+.chat-header-git__menu-row-title {
+  min-width: 0;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.chat-header-git__menu-row-value {
+  min-width: 0;
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.chat-header-git__menu-row--toggle {
+  cursor: default;
+
+  &:hover:not(:disabled),
+  &.is-active {
+    background: transparent;
+  }
+}
+
 .chat-header-git__overlay-meta {
   font-size: 10px;
   line-height: 1.45;
@@ -159,6 +369,8 @@
 }
 
 .chat-header-git__search.ant-input-affix-wrapper {
+  flex: 1;
+  min-width: 0;
   min-height: 30px;
   border-radius: 9px;
   padding-inline: 8px;
@@ -168,6 +380,64 @@
   }
 }
 
+.chat-header-git__search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.chat-header-git__view-switch {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border-color);
+  border-radius: 9px;
+  background: var(--sub-bg-color, rgba(15, 23, 42, .03));
+}
+
+.chat-header-git__view-button {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--sub-text-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color .2s ease, color .2s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: var(--sub-bg-color, rgba(15, 23, 42, .08));
+    color: var(--text-color);
+  }
+
+  &.is-active {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #2563eb) 10%,
+      var(--bg-color)
+    );
+    color: var(--primary-color, #2563eb);
+  }
+}
+
+.chat-header-git__worktree-submenu-body {
+  min-height: 208px;
+  max-height: 208px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .chat-header-git__sections {
   display: flex;
   flex-direction: column;
@@ -224,10 +494,88 @@
   }
 }
 
+.chat-header-git__branch-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chat-header-git__branch-tree-folder,
+.chat-header-git__branch-tree-children {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.chat-header-git__branch-tree-folder.is-collapsed {
+  .chat-header-git__branch-folder-chevron {
+    transform: rotate(-90deg);
+  }
+}
+
+.chat-header-git__branch-folder-row {
+  width: 100%;
+  min-height: 28px;
+  padding: 5px 8px;
+  padding-left: calc(8px + var(--branch-depth, 0) * 12px);
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--sub-text-color);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color .2s ease, color .2s ease;
+
+  &:hover {
+    background: var(--sub-bg-color, rgba(15, 23, 42, .05));
+    color: var(--text-color);
+  }
+}
+
+.chat-header-git__branch-folder-chevron {
+  transition: transform .22s ease;
+  transform-origin: center;
+}
+
+.chat-header-git__branch-tree-collapse {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: grid-template-rows .22s ease, opacity .18s ease;
+
+  &.is-collapsed {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.chat-header-git__branch-tree-collapse-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-header-git__branch-row--tree {
+  padding-left: calc(8px + var(--branch-depth, 0) * 12px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-header-git__branch-folder-chevron,
+  .chat-header-git__branch-tree-collapse {
+    transition: none;
+  }
+}
+
 .chat-header-git__worktree-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .chat-header-git__worktree-row {
@@ -239,6 +587,36 @@
   justify-content: space-between;
   gap: 7px;
   color: var(--text-color);
+
+  &:hover {
+    background: var(--sub-bg-color, rgba(15, 23, 42, .05));
+  }
+}
+
+.chat-header-git__worktree-row--highlighted {
+  background: color-mix(
+    in srgb,
+    var(--primary-color, #2563eb) 6%,
+    var(--bg-color)
+  );
+  border: 1px solid
+    color-mix(in srgb, var(--primary-color, #2563eb) 18%, transparent);
+}
+
+.chat-header-git__worktree-chip {
+  flex-shrink: 0;
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: color-mix(
+    in srgb,
+    var(--primary-color, #2563eb) 10%,
+    transparent
+  );
+  color: var(--primary-color, #2563eb);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
 }
 
 .chat-header-git__branch-row-main,
@@ -286,6 +664,45 @@
   color: var(--primary-color, #2563eb);
 }
 
+.chat-header-git__detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-header-git__detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 10px;
+  color: var(--sub-text-color);
+}
+
+.chat-header-git__detail-label {
+  flex-shrink: 0;
+}
+
+.chat-header-git__detail-value {
+  min-width: 0;
+  text-align: right;
+  color: var(--text-color);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-header-git__workspace-error {
+  font-size: 11px;
+  line-height: 1.45;
+  color: #b45309;
+  background: color-mix(in srgb, #f59e0b 10%, transparent);
+  border: 1px solid color-mix(in srgb, #f59e0b 24%, transparent);
+  border-radius: 10px;
+  padding: 8px 10px;
+}
+
 .chat-header-git__create-row {
   border: 1px dashed
     color-mix(
@@ -304,6 +721,14 @@
   padding: 8px 0 2px;
 }
 
+.chat-header-git__empty--worktrees {
+  min-height: 208px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .chat-header-git__loading {
   padding: 8px 0;
   display: flex;
@@ -594,8 +1019,10 @@
 
 html.dark {
   .chat-header-git {
-    --nav-hover-bg: #1a1a1a;
-    --nav-active-bg: #111b26;
+    --nav-hover-bg: rgba(59, 130, 246, .14);
+    --nav-hover-border: rgba(96, 165, 250, .2);
+    --nav-active-bg: rgba(59, 130, 246, .2);
+    --nav-active-border: rgba(96, 165, 250, .28);
     --nav-active-text: #3b82f6;
   }
 
@@ -604,6 +1031,11 @@ html.dark {
     color: var(--sub-text-color);
   }
 
+  .chat-draft-git__toggle {
+    --nav-hover-bg: rgba(59, 130, 246, .14);
+    --nav-hover-border: rgba(96, 165, 250, .2);
+  }
+
   .chat-header-git__overlay {
     box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
   }