@neurocode-ai/app 1.18.8

package/src/pages/session/v2/session-file-browser-tab.tsx

@@ -0,0 +1,181 @@
+import { createMemo, createSignal, createUniqueId, Show } from "solid-js"
+import { createQuery } from "@tanstack/solid-query"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { SessionFilePanelV2, SessionFilePanelV2Empty } from "@neurocode-ai/session-ui/v2/session-file-panel-v2"
+import { SessionReviewV2Sidebar } from "@neurocode-ai/session-ui/v2/session-review-v2"
+import FileTreeV2, { type Kind } from "@/components/file-tree-v2"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useSDK } from "@/context/sdk"
+import { displayName } from "@/pages/layout/helpers"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { SessionFileView } from "@/pages/session/file-tabs"
+import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+import { pathKey } from "@/utils/path-key"
+
+const emptyFiles: string[] = []
+
+export type SessionFileBrowserState = {
+  sidebarOpened: () => boolean
+  sidebarWidth: () => number
+  sidebarTransition: () => boolean
+  resizeSidebar: (width: number) => void
+  toggleSidebar: () => void
+}
+
+export function SessionFileBrowserTab(props: {
+  tab: string
+  placeholder: boolean
+  active?: string
+  kinds: ReadonlyMap<string, Kind>
+  state: SessionFileBrowserState
+  onSelect: (path: string) => void
+  onSelectPermanent: (path: string) => void
+  filterRef?: (element: HTMLInputElement) => void
+}) {
+  const file = useFile()
+  const language = useLanguage()
+  const layout = useLayout()
+  const sdk = useSDK()
+  const { workspaceKey } = useSessionLayout()
+  const resultsID = `session-file-browser-results-${createUniqueId()}`
+  const [filter, setFilter] = createSignal("")
+  const [explicitHighlight, setExplicitHighlight] = createSignal<string>()
+  const sidebarOpened = () => props.placeholder || props.state.sidebarOpened()
+  const query = createMemo(() => filter().trim())
+  const search = createQuery(() => {
+    const value = query()
+    return {
+      queryKey: ["session-open-file", workspaceKey(), value] as const,
+      enabled: value.length > 0,
+      queryFn: ({ signal }) => file.searchFiles(value, { limit: 200, signal }),
+    }
+  })
+  const files = createMemo(() => {
+    if (!query() || search.isPending) return emptyFiles
+    return [...new Set(search.data ?? emptyFiles)]
+  })
+  const highlighted = createMemo(() => {
+    const values = files()
+    if (values.length === 0) return undefined
+    const explicit = explicitHighlight()
+    if (explicit && values.includes(explicit)) return explicit
+    return values[0]
+  })
+  const loading = createMemo(() => query().length > 0 && search.isPending)
+  const project = createMemo(() => {
+    const directory = pathKey(sdk().directory)
+    return layout.projects
+      .list()
+      .find(
+        (item) =>
+          pathKey(item.worktree) === directory || item.sandboxes?.some((sandbox) => pathKey(sandbox) === directory),
+      )
+  })
+  const title = createMemo(() => displayName(project() ?? { worktree: sdk().directory }))
+  const optionID = (path: string) => `${resultsID}-option-${files().indexOf(path)}`
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (event.key === "Escape" && query()) {
+      event.preventDefault()
+      setFilter("")
+      return
+    }
+    if (!query()) return
+    applyFileListKeyDown(event, files(), highlighted(), {
+      onHighlight: setExplicitHighlight,
+      onSelect: props.onSelectPermanent,
+    })
+  }
+
+  // Keep the sidebar outside Kobalte Tabs.Content: a morphing content value
+  // unmounts the whole panel on every file-tab switch and resets sidebar scroll.
+  return (
+    <SessionFilePanelV2
+      toolbar={false}
+      sidebar={
+        <SessionReviewV2Sidebar
+          open={sidebarOpened()}
+          transition={props.state.sidebarTransition()}
+          title={<span class="truncate">{title()}</span>}
+          filter={filter()}
+          onFilterChange={setFilter}
+          onFilterKeyDown={onFilterKeyDown}
+          filterAutofocus={props.placeholder}
+          filterRef={props.filterRef}
+          filterControls={resultsID}
+          filterActiveDescendant={highlighted() ? optionID(highlighted()!) : undefined}
+          filterExpanded={query().length > 0 && files().length > 0}
+          width={props.state.sidebarWidth()}
+          onWidthChange={props.state.resizeSidebar}
+        >
+          <Show
+            when={query()}
+            fallback={
+              <FileTreeV2
+                active={props.active}
+                kinds={props.kinds}
+                onFileClick={(node) => props.onSelect(node.path)}
+                onFileDoubleClick={(node) => props.onSelectPermanent(node.path)}
+              />
+            }
+          >
+            <Show
+              when={!loading()}
+              fallback={
+                <div role="status" class="px-2 py-2 text-12-regular text-text-weak">
+                  {language.t("common.loading")}
+                  {language.t("common.loading.ellipsis")}
+                </div>
+              }
+            >
+              <Show
+                when={files().length > 0}
+                fallback={
+                  <div role="status" class="px-2 py-2 text-12-regular text-text-weak">
+                    {language.t("palette.empty")}
+                  </div>
+                }
+              >
+                <SessionFileListV2
+                  id={resultsID}
+                  role="listbox"
+                  optionID={optionID}
+                  files={files()}
+                  kinds={props.kinds}
+                  active={props.active}
+                  highlighted={highlighted()}
+                  onFileClick={(path) => {
+                    setExplicitHighlight(path)
+                    props.onSelect(path)
+                  }}
+                  onFileDoubleClick={props.onSelectPermanent}
+                />
+              </Show>
+            </Show>
+          </Show>
+        </SessionReviewV2Sidebar>
+      }
+    >
+      <Show
+        when={!props.placeholder}
+        fallback={
+          <SessionFilePanelV2Empty>
+            <div class="flex flex-col items-center gap-3 text-center text-text-weak">
+              <Icon name="file-tree" size="large" />
+              <div class="text-14-medium text-text-strong">{language.t("command.file.open")}</div>
+              <div class="text-13-regular">{language.t("session.files.selectToOpen")}</div>
+            </div>
+          </SessionFilePanelV2Empty>
+        }
+      >
+        <div class="min-h-0 flex-1">
+          <Show when={props.tab} keyed>
+            {(tab) => <SessionFileView tab={tab} />}
+          </Show>
+        </div>
+      </Show>
+    </SessionFilePanelV2>
+  )
+}

package/src/pages/session/v2/session-file-list-v2.tsx

@@ -0,0 +1,166 @@
+import { FileIcon } from "@neurocode-ai/ui/file-icon"
+import "@neurocode-ai/ui/v2/file-tree-v2.css"
+import { getDirectory, getFilename } from "@neurocode-ai/core/util/path"
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
+import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
+import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
+import { virtualScrollElement } from "@/components/virtual-scroll-element"
+
+// Drives the highlight/selection of the flat search-result list from the filter
+// input's keyboard events.
+export function applyFileListKeyDown(
+  event: KeyboardEvent,
+  files: readonly string[],
+  highlighted: string | undefined,
+  options: { onHighlight: (path: string) => void; onSelect: (path: string) => void },
+) {
+  if (files.length === 0) return
+
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    const currentIndex = highlighted ? files.indexOf(highlighted) : -1
+    const delta = event.key === "ArrowDown" ? 1 : -1
+    const start = currentIndex === -1 ? (delta > 0 ? 0 : files.length - 1) : currentIndex + delta
+    const index = Math.max(0, Math.min(files.length - 1, start))
+    options.onHighlight(files[index]!)
+    event.preventDefault()
+    return
+  }
+
+  if (event.key !== "Enter") return
+  const target = highlighted ?? files[0]
+  if (!target) return
+  options.onSelect(target)
+  event.preventDefault()
+}
+
+// Flat variant of FileTreeV2 for filtered results: reuses its data-component and
+// row data-slots on purpose so file-tree-v2.css styles both. data-highlighted has
+// no CSS of its own — it folds into data-selected below and only exists as the
+// scrollIntoView query hook.
+export function SessionFileListV2(props: {
+  files: readonly string[]
+  active?: string
+  highlighted?: string
+  kinds?: ReadonlyMap<string, Kind>
+  id?: string
+  role?: "listbox"
+  optionID?: (path: string) => string
+  onFileClick: (path: string) => void
+  onFileDoubleClick?: (path: string) => void
+}) {
+  const active = () => normalizePath(props.active ?? "")
+  const highlighted = () => normalizePath(props.highlighted ?? "")
+  const normalized = createMemo(() => props.files.map(normalizePath))
+  const [root, setRoot] = createSignal<HTMLDivElement>()
+  const [focused, setFocused] = createSignal<string>()
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    get count() {
+      return props.files.length
+    },
+    getScrollElement: () => virtualScrollElement(root()),
+    initialRect: { width: 0, height: 600 },
+    estimateSize: () => 28,
+    gap: 2,
+    overscan: 10,
+    get getItemKey() {
+      const files = props.files
+      return (index: number) => files[index] ?? index
+    },
+    rangeExtractor: (range) => {
+      const indexes = defaultRangeExtractor(range)
+      const path = focused()
+      const index = path ? props.files.indexOf(path) : -1
+      if (index < 0 || indexes.includes(index)) return indexes
+      return [...indexes, index].sort((a, b) => a - b)
+    },
+  })
+
+  createEffect(() => {
+    const index = normalized().indexOf(highlighted())
+    if (index < 0) return
+    queueMicrotask(() => {
+      if (virtualizer.range && index >= virtualizer.range.startIndex && index <= virtualizer.range.endIndex) return
+      virtualizer.scrollToIndex(index, { align: "auto" })
+    })
+  })
+  const virtualItemByKey = createMemo(
+    () => new Map(virtualizer.getVirtualItems().map((item) => [item.key, item] as const)),
+  )
+  const virtualRowKeys = createMemo(() => virtualizer.getVirtualItems().map((item) => item.key))
+
+  return (
+    <div
+      ref={setRoot}
+      id={props.id}
+      role={props.role}
+      data-component="file-tree-v2"
+      data-total-rows={props.files.length}
+      style={{ position: "relative", height: `${virtualizer.getTotalSize()}px` }}
+    >
+      <For each={virtualRowKeys()}>
+        {(key) => {
+          const path = key as string
+          const value = normalizePath(path)
+          const selected = () => (highlighted() ? highlighted() === value : active() === value)
+          const highlightedRow = () => highlighted() === value
+          const kind = () => props.kinds?.get(value)
+          const directory = () => (value.includes("/") ? getDirectory(value) : undefined)
+          const filename = () => getFilename(value)
+          return (
+            <Show when={virtualItemByKey().get(key)}>
+              {(item) => (
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    height: `${item().size}px`,
+                    transform: `translateY(${item().start}px)`,
+                  }}
+                >
+                  <button
+                    type="button"
+                    id={props.optionID?.(path)}
+                    role={props.role ? "option" : undefined}
+                    aria-selected={props.role ? selected() : undefined}
+                    data-slot="file-tree-v2-row"
+                    data-path={path}
+                    data-selected={selected() ? "" : undefined}
+                    data-highlighted={highlightedRow() ? "" : undefined}
+                    style="padding-left: 8px"
+                    onFocus={() => setFocused(path)}
+                    onBlur={() => setFocused(undefined)}
+                    onClick={() => props.onFileClick(path)}
+                    onDblClick={() => props.onFileDoubleClick?.(path)}
+                  >
+                    <span class="filetree-iconpair size-4">
+                      <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--color" />
+                      <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--mono" mono />
+                    </span>
+                    <span class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap">
+                      <Show when={directory()}>
+                        {(value) => (
+                          <span class="text-12-medium text-text-muted truncate min-w-0 shrink">{value()}</span>
+                        )}
+                      </Show>
+                      <span class="text-12-medium text-text-base truncate min-w-0 shrink-0">{filename()}</span>
+                    </span>
+                    <Show when={kind()}>
+                      {(value) => (
+                        <span data-slot="file-tree-v2-change" data-change={kindChange(value())}>
+                          {kindLabel(value())}
+                        </span>
+                      )}
+                    </Show>
+                  </button>
+                </div>
+              )}
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}