@jetcrab/pi-desk 1.1.22-dev → 1.1.23-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetcrab/pi-desk",
-  "version": "1.1.22-dev",
+  "version": "1.1.23-dev",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/client/l2_biz/project-preview/l2-project-preview-dialog.tsx

@@ -54,7 +54,7 @@ export function L2ProjectPreviewDialog({
           refreshOnFocus
           onEscape={onClose}
           title={
-            <L4AppDialogTitle className="truncate" title={cwd}>
+            <L4AppDialogTitle className="truncate text-sm" title={cwd}>
               {projectName}
             </L4AppDialogTitle>
           }

package/src/client/l2_biz/project-preview/l2-project-preview-page.tsx

@@ -45,7 +45,7 @@ export function L2ProjectPreviewPage({
           refreshOnFocus={false}
           onUnauthorized={onUnauthorized}
           actions={
-            <Button size="sm" variant="outline" onClick={() => onSelect(null)}>
+            <Button size="sm" variant="ghost" onClick={() => onSelect(null)}>
               <FolderOpenIcon className="size-4" />
               <span>{t('switchProject')}</span>
             </Button>

package/src/client/l2_biz/project-preview/l2-project-preview.tsx

@@ -78,6 +78,7 @@ export function L2ProjectPreview({
     <L3ProjectFileBrowser
       cwd={cwd}
       projectName={projectName}
+      showRootTitle={false}
       runtime={files}
       gitRuntime={git}
       onOpenGitBranches={openGit}
@@ -85,25 +86,26 @@ export function L2ProjectPreview({
     />
   )
   const code = (
-    <div className="flex size-full min-h-0 min-w-0 flex-col">
-      <L3ProjectFileTabs
-        cwd={cwd}
-        gitRuntime={git}
-        paths={state.tabs}
-        activePath={state.activePath}
-        diffPath={diffPath}
-        mobile={narrow}
-        onActivate={(path) => files.openFile(path)}
-        onClose={(path, scope) => files.closeTabs(path, scope)}
-      />
-      <L3ProjectDocumentView
-        runtime={files}
-        gitRuntime={git}
-        compact={width < 1100}
-        refreshOnFocus={refreshOnFocus}
-        onEscape={onEscape}
-      />
-    </div>
+    <L3ProjectDocumentView
+      runtime={files}
+      gitRuntime={git}
+      compact={width < 1100}
+      refreshOnFocus={refreshOnFocus}
+      onEscape={onEscape}
+      renderHeader={(actions) => (
+        <L3ProjectFileTabs
+          cwd={cwd}
+          gitRuntime={git}
+          paths={state.tabs}
+          activePath={state.activePath}
+          diffPath={diffPath}
+          mobile={narrow}
+          actions={actions}
+          onActivate={(path) => files.openFile(path)}
+          onClose={(path, scope) => files.closeTabs(path, scope)}
+        />
+      )}
+    />
   )
   const gitView = (
     <div className="flex size-full min-h-0 min-w-0 flex-col">
@@ -226,7 +228,7 @@ export function L2ProjectPreview({
       className="flex size-full min-h-0 min-w-0 flex-col overflow-hidden"
       data-testid="project-preview"
     >
-      <header className="flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b bg-muted px-3 py-2 pt-[max(8px,env(safe-area-inset-top))]">
+      <header className="flex min-h-9 shrink-0 items-center gap-1 bg-muted px-2 py-1 pt-[max(4px,env(safe-area-inset-top))]">
         {!stacked ? (
           <Button
             size="icon-sm"
@@ -241,15 +243,11 @@ export function L2ProjectPreview({
             )}
           </Button>
         ) : null}
-        <div className="min-w-0 flex-1">
-          {title ?? (
-            <h1 className="truncate text-lg font-semibold" title={cwd}>
-              {projectName}
-            </h1>
-          )}
-          <p className="truncate text-xs text-muted-foreground" title={cwd}>
-            {cwd}
-          </p>
+        <div className="flex min-w-0 flex-1 items-baseline gap-3" title={cwd}>
+          <div className="min-w-0 shrink-0 max-w-[50%] max-sm:max-w-full max-sm:shrink">
+            {title ?? <h1 className="truncate text-sm font-semibold">{projectName}</h1>}
+          </div>
+          <p className="min-w-0 truncate text-xs text-muted-foreground max-sm:hidden">{cwd}</p>
         </div>
         <Button
           size="sm"
@@ -272,11 +270,7 @@ export function L2ProjectPreview({
       ) : null}
       {stacked ? (
         <>
-          <div
-            className="flex shrink-0 gap-1 border-b px-2 py-1"
-            role="group"
-            aria-label={t('previewArea')}
-          >
+          <div className="flex shrink-0 gap-1 px-2 py-1" role="group" aria-label={t('previewArea')}>
             <Button
               size="sm"
               variant={page === 'files' ? 'secondary' : 'ghost'}

package/src/client/l3_modules/project-files/l3-project-document-view.tsx

@@ -19,6 +19,7 @@ import {
   useRef,
   useState,
   useSyncExternalStore,
+  type ReactNode,
   type Ref
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -55,7 +56,8 @@ export function L3ProjectDocumentView({
   visible = true,
   refreshOnFocus = true,
   onEscape,
-  onSwitchPane
+  onSwitchPane,
+  renderHeader
 }: {
   ref?: Ref<L3ProjectDocumentHandle>
   runtime: L3ProjectFileRuntime
@@ -65,6 +67,7 @@ export function L3ProjectDocumentView({
   refreshOnFocus?: boolean
   onEscape: () => void
   onSwitchPane?: () => void
+  renderHeader?: (actions: ReactNode) => ReactNode
 }): React.JSX.Element {
   const { t } = useTranslation('projectFiles')
   const { wrapLines, diffViewMode, collapseUnchanged } = useL4CodePreferences()
@@ -149,6 +152,160 @@ export function L3ProjectDocumentView({
       else toast.error(t('copyContentFailed'))
     })
   }
+  const actions =
+    activeDiff || activePath ? (
+      <>
+        {activeDiff ? (
+          <>
+            <span className="mr-auto shrink-0 px-1 text-xs text-muted-foreground">
+              {activeDiff.label ?? t('headToWorking')}
+              {activeDiff.status === 'text' &&
+              activeDiff.original.content === activeDiff.modified.content
+                ? t('noDiffChanges')
+                : ''}
+            </span>
+            <L3CodeSurfaceToolbarButton
+              label={t('previousChange')}
+              onClick={() => diffRef.current?.previousChange()}
+            >
+              <ArrowUpIcon className="size-4" />
+            </L3CodeSurfaceToolbarButton>
+            <L3CodeSurfaceToolbarButton
+              label={t('nextChange')}
+              onClick={() => diffRef.current?.nextChange()}
+            >
+              <ArrowDownIcon className="size-4" />
+            </L3CodeSurfaceToolbarButton>
+            {!compact ? (
+              <L3CodeSurfaceToolbarButton
+                label={diffViewMode === 'side-by-side' ? t('inlineDiff') : t('sideBySideDiff')}
+                active={diffViewMode === 'inline'}
+                onClick={() =>
+                  runtime.setDiffViewMode(
+                    diffViewMode === 'side-by-side' ? 'inline' : 'side-by-side'
+                  )
+                }
+              >
+                <Columns2Icon className="size-4" />
+              </L3CodeSurfaceToolbarButton>
+            ) : null}
+            <L3CodeSurfaceToolbarButton
+              label={t(wrapLines ? 'wrapOff' : 'wrapOn')}
+              active={wrapLines}
+              onClick={() => runtime.setDiffWrapLines(!wrapLines)}
+            >
+              <WrapTextIcon className="size-4" />
+            </L3CodeSurfaceToolbarButton>
+            <L3CodeSurfaceToolbarButton
+              label={t(collapseUnchanged ? 'expandUnchanged' : 'collapseUnchanged')}
+              active={collapseUnchanged}
+              onClick={() => runtime.setDiffCollapseUnchanged(!collapseUnchanged)}
+            >
+              <FoldVerticalIcon className="size-4" />
+            </L3CodeSurfaceToolbarButton>
+            <L3CodeSurfaceToolbarButton
+              label={t('reloadDiff')}
+              onClick={() => runtime.reloadDiff()}
+            >
+              <RefreshCwIcon className="size-4" />
+            </L3CodeSurfaceToolbarButton>
+          </>
+        ) : (
+          <>
+            {previewKind && document?.status === 'text' && activePath ? (
+              <div
+                className="mr-auto flex shrink-0"
+                role="group"
+                aria-label={t(previewKind === 'markdown' ? 'markdownMode' : 'htmlMode')}
+              >
+                {(['preview', 'source'] as const).map((mode) => (
+                  <Button
+                    key={mode}
+                    variant={document.viewMode === mode ? 'secondary' : 'ghost'}
+                    size="sm"
+                    aria-pressed={document.viewMode === mode}
+                    onClick={() => {
+                      savePosition()
+                      runtime.setTextViewMode(activePath, mode)
+                    }}
+                  >
+                    {t(mode === 'preview' ? 'previewMode' : 'sourceMode')}
+                  </Button>
+                ))}
+              </div>
+            ) : null}
+            {showSource && gitStatus ? (
+              <span
+                data-testid="file-git-status"
+                role="status"
+                className="mr-auto min-w-0 truncate text-xs text-muted-foreground"
+                title={comparison?.status === 'error' ? comparison.error : gitStatus}
+              >
+                {compact && comparison?.status === 'ready' && typeof count === 'number'
+                  ? t('gitChangesCompact', { count })
+                  : gitStatus}
+              </span>
+            ) : null}
+            {showSource && comparison?.status === 'ready' ? (
+              <>
+                {typeof count === 'number' && count > 0 ? (
+                  <>
+                    <L3CodeSurfaceToolbarButton
+                      label={t('previousChange')}
+                      onClick={() => previewRef.current?.previousChange()}
+                    >
+                      <ArrowUpIcon className="size-4" />
+                    </L3CodeSurfaceToolbarButton>
+                    <L3CodeSurfaceToolbarButton
+                      label={t('nextChange')}
+                      onClick={() => previewRef.current?.nextChange()}
+                    >
+                      <ArrowDownIcon className="size-4" />
+                    </L3CodeSurfaceToolbarButton>
+                  </>
+                ) : null}
+                <L3CodeSurfaceToolbarButton label={t('viewDiff')} onClick={() => openDiff()}>
+                  <GitCompareArrowsIcon className="size-4" />
+                </L3CodeSurfaceToolbarButton>
+              </>
+            ) : null}
+            {showSource && activePath ? (
+              <>
+                <L3CodeSurfaceToolbarButton
+                  label={t('findInFile')}
+                  onClick={() => previewRef.current?.openSearch()}
+                >
+                  <SearchIcon className="size-4" />
+                </L3CodeSurfaceToolbarButton>
+                {!compact ? (
+                  <L3CodeSurfaceToolbarButton
+                    label={t('goToLine')}
+                    onClick={() => previewRef.current?.gotoLine()}
+                  >
+                    <ListOrderedIcon className="size-4" />
+                  </L3CodeSurfaceToolbarButton>
+                ) : null}
+                <L3CodeSurfaceToolbarButton
+                  label={t(wrapLines ? 'wrapOff' : 'wrapOn')}
+                  active={wrapLines}
+                  onClick={() => runtime.setWrapLines(activePath, !wrapLines)}
+                >
+                  <WrapTextIcon className="size-4" />
+                </L3CodeSurfaceToolbarButton>
+                <L3CodeSurfaceToolbarButton label={t('copySelectionOrAll')} onClick={copyText}>
+                  <CopyIcon className="size-4" />
+                </L3CodeSurfaceToolbarButton>
+              </>
+            ) : null}
+            {activePath ? (
+              <L3CodeSurfaceToolbarButton label={t('reloadCurrentFile')} onClick={refresh}>
+                <RefreshCwIcon className="size-4" />
+              </L3CodeSurfaceToolbarButton>
+            ) : null}
+          </>
+        )}
+      </>
+    ) : null
   return (
     <div
       ref={hostRef}
@@ -162,160 +319,14 @@ export function L3ProjectDocumentView({
           hostRef.current?.querySelector<HTMLElement>('[data-testid="markdown-preview"]')?.focus()
       }}
     >
-      {activeDiff || activePath ? (
+      {renderHeader ? (
+        renderHeader(actions)
+      ) : actions ? (
         <div
           className="flex min-h-9 shrink-0 flex-wrap items-center justify-end gap-2 border-b px-3 py-1"
           aria-label={t('fileActions')}
         >
-          {activeDiff ? (
-            <>
-              <span className="mr-auto shrink-0 px-1 text-xs text-muted-foreground">
-                {activeDiff.label ?? t('headToWorking')}
-                {activeDiff.status === 'text' &&
-                activeDiff.original.content === activeDiff.modified.content
-                  ? t('noDiffChanges')
-                  : ''}
-              </span>
-              <L3CodeSurfaceToolbarButton
-                label={t('previousChange')}
-                onClick={() => diffRef.current?.previousChange()}
-              >
-                <ArrowUpIcon className="size-4" />
-              </L3CodeSurfaceToolbarButton>
-              <L3CodeSurfaceToolbarButton
-                label={t('nextChange')}
-                onClick={() => diffRef.current?.nextChange()}
-              >
-                <ArrowDownIcon className="size-4" />
-              </L3CodeSurfaceToolbarButton>
-              {!compact ? (
-                <L3CodeSurfaceToolbarButton
-                  label={diffViewMode === 'side-by-side' ? t('inlineDiff') : t('sideBySideDiff')}
-                  active={diffViewMode === 'inline'}
-                  onClick={() =>
-                    runtime.setDiffViewMode(
-                      diffViewMode === 'side-by-side' ? 'inline' : 'side-by-side'
-                    )
-                  }
-                >
-                  <Columns2Icon className="size-4" />
-                </L3CodeSurfaceToolbarButton>
-              ) : null}
-              <L3CodeSurfaceToolbarButton
-                label={t(wrapLines ? 'wrapOff' : 'wrapOn')}
-                active={wrapLines}
-                onClick={() => runtime.setDiffWrapLines(!wrapLines)}
-              >
-                <WrapTextIcon className="size-4" />
-              </L3CodeSurfaceToolbarButton>
-              <L3CodeSurfaceToolbarButton
-                label={t(collapseUnchanged ? 'expandUnchanged' : 'collapseUnchanged')}
-                active={collapseUnchanged}
-                onClick={() => runtime.setDiffCollapseUnchanged(!collapseUnchanged)}
-              >
-                <FoldVerticalIcon className="size-4" />
-              </L3CodeSurfaceToolbarButton>
-              <L3CodeSurfaceToolbarButton
-                label={t('reloadDiff')}
-                onClick={() => runtime.reloadDiff()}
-              >
-                <RefreshCwIcon className="size-4" />
-              </L3CodeSurfaceToolbarButton>
-            </>
-          ) : (
-            <>
-              {previewKind && document?.status === 'text' && activePath ? (
-                <div
-                  className="mr-auto flex shrink-0"
-                  role="group"
-                  aria-label={t(previewKind === 'markdown' ? 'markdownMode' : 'htmlMode')}
-                >
-                  {(['preview', 'source'] as const).map((mode) => (
-                    <Button
-                      key={mode}
-                      variant={document.viewMode === mode ? 'secondary' : 'ghost'}
-                      size="sm"
-                      aria-pressed={document.viewMode === mode}
-                      onClick={() => {
-                        savePosition()
-                        runtime.setTextViewMode(activePath, mode)
-                      }}
-                    >
-                      {t(mode === 'preview' ? 'previewMode' : 'sourceMode')}
-                    </Button>
-                  ))}
-                </div>
-              ) : null}
-              {showSource && gitStatus ? (
-                <span
-                  data-testid="file-git-status"
-                  role="status"
-                  className="mr-auto min-w-0 truncate text-xs text-muted-foreground"
-                  title={comparison?.status === 'error' ? comparison.error : gitStatus}
-                >
-                  {compact && comparison?.status === 'ready' && typeof count === 'number'
-                    ? t('gitChangesCompact', { count })
-                    : gitStatus}
-                </span>
-              ) : null}
-              {showSource && comparison?.status === 'ready' ? (
-                <>
-                  {typeof count === 'number' && count > 0 ? (
-                    <>
-                      <L3CodeSurfaceToolbarButton
-                        label={t('previousChange')}
-                        onClick={() => previewRef.current?.previousChange()}
-                      >
-                        <ArrowUpIcon className="size-4" />
-                      </L3CodeSurfaceToolbarButton>
-                      <L3CodeSurfaceToolbarButton
-                        label={t('nextChange')}
-                        onClick={() => previewRef.current?.nextChange()}
-                      >
-                        <ArrowDownIcon className="size-4" />
-                      </L3CodeSurfaceToolbarButton>
-                    </>
-                  ) : null}
-                  <L3CodeSurfaceToolbarButton label={t('viewDiff')} onClick={() => openDiff()}>
-                    <GitCompareArrowsIcon className="size-4" />
-                  </L3CodeSurfaceToolbarButton>
-                </>
-              ) : null}
-              {showSource && activePath ? (
-                <>
-                  <L3CodeSurfaceToolbarButton
-                    label={t('findInFile')}
-                    onClick={() => previewRef.current?.openSearch()}
-                  >
-                    <SearchIcon className="size-4" />
-                  </L3CodeSurfaceToolbarButton>
-                  {!compact ? (
-                    <L3CodeSurfaceToolbarButton
-                      label={t('goToLine')}
-                      onClick={() => previewRef.current?.gotoLine()}
-                    >
-                      <ListOrderedIcon className="size-4" />
-                    </L3CodeSurfaceToolbarButton>
-                  ) : null}
-                  <L3CodeSurfaceToolbarButton
-                    label={t(wrapLines ? 'wrapOff' : 'wrapOn')}
-                    active={wrapLines}
-                    onClick={() => runtime.setWrapLines(activePath, !wrapLines)}
-                  >
-                    <WrapTextIcon className="size-4" />
-                  </L3CodeSurfaceToolbarButton>
-                  <L3CodeSurfaceToolbarButton label={t('copySelectionOrAll')} onClick={copyText}>
-                    <CopyIcon className="size-4" />
-                  </L3CodeSurfaceToolbarButton>
-                </>
-              ) : null}
-              {activePath ? (
-                <L3CodeSurfaceToolbarButton label={t('reloadCurrentFile')} onClick={refresh}>
-                  <RefreshCwIcon className="size-4" />
-                </L3CodeSurfaceToolbarButton>
-              ) : null}
-            </>
-          )}
+          {actions}
         </div>
       ) : null}
       <div className="min-h-0 flex-1 overflow-hidden pb-[env(safe-area-inset-bottom)]">

package/src/client/l3_modules/project-files/l3-project-file-browser.module.css

@@ -0,0 +1,30 @@
+.tree [role='tree'] {
+  padding: 0;
+}
+
+.tree [role='tree'] > div {
+  padding: 0 4px;
+}
+
+.tree [data-slot='collapsible-content'] > div {
+  border-left-color: color-mix(in oklab, var(--border) 50%, transparent);
+}
+
+@media (pointer: fine) {
+  .tree [role='treeitem']:not([aria-expanded]),
+  .tree [role='treeitem'][aria-expanded] > div:first-child {
+    min-height: 24px;
+    gap: 4px;
+    padding: 0 4px;
+  }
+
+  .tree [role='treeitem'][aria-expanded] > div:first-child > button {
+    min-height: 24px;
+    gap: 4px;
+  }
+
+  .tree [data-slot='collapsible-content'] > div {
+    margin-left: 8px;
+    padding-left: 3px;
+  }
+}