# Files changed · PR \#22699 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22699/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[refactor\(web\): the command palette's project items and pure helpers live in their own files](https://git.cafe/pingdotgg/t3code/pull/22699.md)

Version: 5

Head commit: 7e7936fe093e918a198bcd32dbe84a3fd45d118b

Base commit: 0dd1a0aff8312a8fa4bf0467e2bb2eae5aa9b3e3

Comparison base: 0dd1a0aff8312a8fa4bf0467e2bb2eae5aa9b3e3

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/web/src/components/CommandPalette.logic.ts

Status: modified; +94; −0

```diff
@@ -1,9 +1,19 @@
 import { threadPullRequestSearchTerms } from "@t3tools/shared/threadPullRequests";
 import type { CommandPaletteLinkedThreads } from "../commandPaletteBus";
 import {
+  addProjectRemoteSourceLabel,
+  addProjectRemoteSourcePathHint,
+  buildAddProjectRemoteSourceReadiness,
+  type AddProjectRemoteSource,
+  type AddProjectRemoteSourceReadiness,
+} from "@t3tools/client-runtime/operations/projects";
+import {
   type EnvironmentId,
+  type EnvironmentMachineKind,
   type FilesystemBrowseEntry,
   type KeybindingCommand,
+  type SourceControlDiscoveryResult,
+  type SourceControlRepositoryInfo,
   THREAD_JUMP_KEYBINDING_COMMANDS,
 } from "@t3tools/contracts";
 import { filterFilesystemBrowseEntries } from "@t3tools/client-runtime/state/filesystem";
@@ -657,3 +667,87 @@
       return "Enter path (e.g. ~/projects/my-app)";
   }
 }
+
+export function getEnvironmentBrowsePlatform(os: string | null | undefined): string {
+  if (os === "windows") {
+    return "Win32";
+  }
+  if (os === "darwin") {
+    return "MacIntel";
+  }
+  if (os === "linux") {
+    return "Linux";
+  }
+  return typeof navigator === "undefined" ? "" : navigator.platform;
+}
+
+export interface AddProjectEnvironmentOption {
+  readonly environmentId: EnvironmentId;
+  readonly label: string;
+  readonly machine: EnvironmentMachineKind;
+  readonly isPrimary: boolean;
+  readonly isConnected: boolean;
+  readonly status: string;
+}
+
+export type AddProjectCloneFlow =
+  | {
+      readonly step: "repository";
+      readonly environmentId: EnvironmentId;
+      readonly source: AddProjectRemoteSource;
+    }
+  | {
+      readonly step: "confirm";
+      readonly environmentId: EnvironmentId;
+      readonly source: AddProjectRemoteSource;
+      readonly repositoryInput: string;
+      readonly repository: SourceControlRepositoryInfo | null;
+      readonly remoteUrl: string;
+    };
+
+export function remoteProjectInputPlaceholder(flow: AddProjectCloneFlow | null): string | null {
+  if (!flow) return null;
+  if (flow.step === "confirm") return null;
+  if (flow.source === "url") {
+    return "Enter Git clone URL";
+  }
+  return `Enter ${addProjectRemoteSourceLabel(flow.source)} repository (${addProjectRemoteSourcePathHint(flow.source)})`;
+}
+
+export function buildPaletteRemoteSourceReadiness(
+  discovery: SourceControlDiscoveryResult | null,
+): AddProjectRemoteSourceReadiness {
+  const readiness = buildAddProjectRemoteSourceReadiness(discovery);
+  return (source) => {
+    const entry = readiness(source);
+    return entry.hint === null
+      ? entry
+      : {
+          ...entry,
+          hint: entry.hint.replace(
+            "Open Source Control settings",
+            "Open Settings -> Source Control",
+          ),
+        };
+  };
+}
+
+export function errorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+  return "An error occurred.";
+}
+
+const OVERLAY_MODE_BY_COMMAND = {
+  "commandPalette.toggle": "command",
+  "filePicker.toggle": "files",
+  "projectSearch.toggle": "content",
+} as const satisfies Partial<Record<string, SearchOverlayMode>>;
+
+export function overlayModeForCommand(command: string | null): SearchOverlayMode | null {
+  if (command === null) return null;
+  return command in OVERLAY_MODE_BY_COMMAND
+    ? OVERLAY_MODE_BY_COMMAND[command as keyof typeof OVERLAY_MODE_BY_COMMAND]
+    : null;
+}
```

## apps/web/src/components/CommandPalette.tsx

Status: modified; +17; −196

```diff
@@ -17,7 +17,6 @@
   addProjectRemoteSourceLabel,
   addProjectRemoteSourcePathHint,
   addProjectRemoteSourceProvider,
-  buildAddProjectRemoteSourceReadiness,
   sortAddProjectProviderSources,
   type AddProjectRemoteSource,
   type AddProjectRemoteSourceReadiness,
@@ -42,11 +41,8 @@
   AuthFilesystemReadScope,
   type DesktopWslState,
   type EnvironmentId,
-  type EnvironmentMachineKind,
   type FilesystemBrowseResult,
-  type SourceControlDiscoveryResult,
   SourceControlProviderKind,
-  type SourceControlRepositoryInfo,
   PRIMARY_LOCAL_ENVIRONMENT_ID,
   resolveEnvironmentMachineKind,
 } from "@t3tools/contracts";
@@ -159,8 +155,6 @@
   ADDON_ICON_CLASS,
   browseInputEndPaddingClass,
   buildBrowseGroups,
-  buildCommandPaletteProjectMetadata,
-  buildProjectActionItems,
   buildRootGroups,
   buildLinkedThreadActionItems,
   buildCommandPaletteRows,
@@ -180,6 +174,13 @@
   RECENT_THREAD_LIMIT,
   reduceCommandPaletteUiState,
   createCommandPaletteSearchState,
+  type AddProjectCloneFlow,
+  type AddProjectEnvironmentOption,
+  buildPaletteRemoteSourceReadiness,
+  errorMessage,
+  getEnvironmentBrowsePlatform,
+  overlayModeForCommand,
+  remoteProjectInputPlaceholder,
   reduceCommandPaletteSearchState,
   type SearchOverlayMode,
 } from "./CommandPalette.logic";
@@ -191,6 +192,10 @@
   useProjectLookups,
   useSortedProjectGroups,
 } from "./CommandPaletteLookups";
+import {
+  buildNewThreadInProjectItems,
+  buildProjectSearchItems,
+} from "./CommandPaletteProjectItems";
 import { useCommandPaletteThreadItems } from "./CommandPaletteThreadItems";
 import {
   APPEARANCE_OPTIONS,
@@ -205,13 +210,11 @@
 import { sourceControlIcon } from "~/sourceControlPresentation";
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import { Checkbox } from "./ui/checkbox";
-import { ProjectFavicon } from "./ProjectFavicon";
 import { ProjectFilePicker } from "./files/ProjectFilePicker";
 import { openLinkPullRequestDialog } from "./pullRequest/LinkPullRequestDialog";
 import { ProjectContentSearchDialog } from "./search/ProjectContentSearchDialog";
 import { toggleThemeEditorForTheme } from "./settings/themeEditorStore";
 import { searchSettings, SETTINGS_SECTION_LABELS } from "./settings/settingsSearch";
-import { COMMAND_PALETTE_META_ICON_CLASS, CommandPaletteMetaDot } from "./ThreadCommandSubtitle";
 import { primaryServerKeybindingsAtom } from "../state/server";
 import { resolveShortcutCommand, threadJumpIndexFromCommand } from "../keybindings";
 import { CommandDialog, CommandDialogPopup, CommandFooterAction } from "./ui/command";
@@ -223,50 +226,12 @@
 import { ComposerHandleContext, useComposerHandleContext } from "../composerHandleContext";
 import type { ChatComposerHandle } from "./chat/ChatComposer";
 import { buildSidebarProjectPickerEntries } from "../sidebarProjectGrouping";
-import type { Project } from "../types";
 import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
 import { readPullRequestListPreferences } from "~/components/pullRequest/pullRequestListPreferences";
 import { useThreadRouteTarget } from "../hooks/useThreadRouteTarget";
 
 const EMPTY_BROWSE_ENTRIES: FilesystemBrowseResult["entries"] = [];
 
-function getEnvironmentBrowsePlatform(os: string | null | undefined): string {
-  if (os === "windows") {
-    return "Win32";
-  }
-  if (os === "darwin") {
-    return "MacIntel";
-  }
-  if (os === "linux") {
-    return "Linux";
-  }
-  return typeof navigator === "undefined" ? "" : navigator.platform;
-}
-
-interface AddProjectEnvironmentOption {
-  readonly environmentId: EnvironmentId;
-  readonly label: string;
-  readonly machine: EnvironmentMachineKind;
-  readonly isPrimary: boolean;
-  readonly isConnected: boolean;
-  readonly status: string;
-}
-
-type AddProjectCloneFlow =
-  | {
-      readonly step: "repository";
-      readonly environmentId: EnvironmentId;
-      readonly source: AddProjectRemoteSource;
-    }
-  | {
-      readonly step: "confirm";
-      readonly environmentId: EnvironmentId;
-      readonly source: AddProjectRemoteSource;
-      readonly repositoryInput: string;
-      readonly repository: SourceControlRepositoryInfo | null;
-      readonly remoteUrl: string;
-    };
-
 function remoteProjectSourceIcon(source: AddProjectRemoteSource, className: string): ReactNode {
   if (source === "url") return <LinkIcon className={className} />;
   const Icon = sourceControlIcon(sourceControlClients.get(source));
@@ -279,59 +244,8 @@
 ): ReactNode {
   const Icon = sourceControlIcon(definition);
   return <Icon className={className} />;
-}
-
-function projectFaviconIcon(project: Project): ReactNode {
-  return <ProjectFavicon project={project} className={ITEM_ICON_CLASS} />;
 }
 
-function remoteProjectInputPlaceholder(flow: AddProjectCloneFlow | null): string | null {
-  if (!flow) return null;
-  if (flow.step === "confirm") return null;
-  if (flow.source === "url") {
-    return "Enter Git clone URL";
-  }
-  return `Enter ${addProjectRemoteSourceLabel(flow.source)} repository (${addProjectRemoteSourcePathHint(flow.source)})`;
-}
-
-function buildPaletteRemoteSourceReadiness(
-  discovery: SourceControlDiscoveryResult | null,
-): AddProjectRemoteSourceReadiness {
-  const readiness = buildAddProjectRemoteSourceReadiness(discovery);
-  return (source) => {
-    const entry = readiness(source);
-    return entry.hint === null
-      ? entry
-      : {
-          ...entry,
-          hint: entry.hint.replace(
-            "Open Source Control settings",
-            "Open Settings -> Source Control",
-          ),
-        };
-  };
-}
-
-function errorMessage(error: unknown): string {
-  if (error instanceof Error && error.message.trim().length > 0) {
-    return error.message;
-  }
-  return "An error occurred.";
-}
-
-const OVERLAY_MODE_BY_COMMAND = {
-  "commandPalette.toggle": "command",
-  "filePicker.toggle": "files",
-  "projectSearch.toggle": "content",
-} as const satisfies Partial<Record<string, SearchOverlayMode>>;
-
-function overlayModeForCommand(command: string | null): SearchOverlayMode | null {
-  if (command === null) return null;
-  return command in OVERLAY_MODE_BY_COMMAND
-    ? OVERLAY_MODE_BY_COMMAND[command as keyof typeof OVERLAY_MODE_BY_COMMAND]
-    : null;
-}
-
 export function CommandPalette({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
   const [state, dispatch] = useReducer(reduceCommandPaletteUiState, {
@@ -940,39 +854,10 @@
     await handleNewThread(scopeProjectRef(project.environmentId, project.id));
   };
 
-  const projectSearchItems = buildProjectActionItems({
+  const projectSearchItems = buildProjectSearchItems({
     projects: pickerProjects,
-    valuePrefix: "project",
-    searchTerms: (project) => {
-      const members = projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`)
-        ?.memberProjects ?? [project];
-      return buildCommandPaletteProjectMetadata({
-        projects: members,
+    projectGroupByTargetKey,
+    locationByEnvironmentId: projectEnvironmentLocationById,
-        locationByEnvironmentId: projectEnvironmentLocationById,
-      }).searchTerms;
-    },
-    renderDescription: (project) => {
-      const members = projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`)
-        ?.memberProjects ?? [project];
-      const metadata = buildCommandPaletteProjectMetadata({
-        projects: members,
-        locationByEnvironmentId: projectEnvironmentLocationById,
-      });
-      const location = projectEnvironmentLocationById.get(project.environmentId) ?? {
-        kind: "remote" as const,
-        label: "Remote",
-        machine: "server" as const,
-      };
-      return (
-        <ProjectSearchDescription
-          environmentLabels={metadata.environmentLabels}
-          grouped={members.length > 1}
-          location={location}
-          workspaceRoot={project.workspaceRoot}
-        />
-      );
-    },
-    icon: projectFaviconIcon,
     runProject: openProjectFromSearch,
   });
 
@@ -980,42 +865,10 @@
     const isScratch = (project: CommandPaletteProject) =>
       isScratchProject(project, scratchWorkspaceRootFor(project.environmentId));
     const projectItems = enumerateCommandPaletteItems(
-      buildProjectActionItems({
+      buildNewThreadInProjectItems({
         projects: pickerProjects.filter((project) => !isScratch(project)),
-        valuePrefix: "new-thread-in",
-        searchTerms: (project) => {
-          const group = projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`);
-          const location = projectEnvironmentLocationById.get(project.environmentId);
-          return [
-            ...(group?.memberProjects.flatMap((member) => [member.title, member.workspaceRoot]) ??
-              []),
-            ...(location ? [location.label] : []),
-          ];
-        },
-        renderDescription: (project) => {
-          const location = projectEnvironmentLocationById.get(project.environmentId) ?? {
-            kind: "remote",
-            label: "Remote",
-            machine: "server" as const,
-          };
-          return (
-            <span className="flex min-w-0 items-center gap-1">
-              <span className="inline-flex min-w-0 items-center gap-1">
-                {location.kind === "remote" ? (
-                  <EnvironmentMachineIcon
-                    aria-hidden
-                    kind={location.machine}
-                    className={COMMAND_PALETTE_META_ICON_CLASS}
+        projectGroupByTargetKey,
+        locationByEnvironmentId: projectEnvironmentLocationById,
-                  />
-                ) : null}
-                <span className="truncate">{location.label}</span>
-              </span>
-              <CommandPaletteMetaDot />
-              <span className="truncate">{project.workspaceRoot}</span>
-            </span>
-          );
-        },
-        icon: projectFaviconIcon,
         runProject: async (project) => {
           const group = projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`);
           const contextualRefBelongsToGroup =
@@ -3021,35 +2874,3 @@
     </CommandPaletteContent>
   );
 }
-
-function ProjectSearchDescription(props: {
-  readonly environmentLabels: ReadonlyArray<string>;
-  readonly grouped: boolean;
-  readonly location: {
-    readonly kind: "local" | "remote";
-    readonly label: string;
-    readonly machine: EnvironmentMachineKind;
-  };
-  readonly workspaceRoot: string;
-}) {
-  if (!props.grouped) {
-    return (
-      <span className="flex min-w-0 items-center gap-1">
-        <span className="inline-flex min-w-0 items-center gap-1">
-          {props.location.kind === "remote" ? (
-            <EnvironmentMachineIcon
-              aria-hidden
-              kind={props.location.machine}
-              className={COMMAND_PALETTE_META_ICON_CLASS}
-            />
-          ) : null}
-          <span className="truncate">{props.location.label}</span>
-        </span>
-        <CommandPaletteMetaDot />
-        <span className="truncate">{props.workspaceRoot}</span>
-      </span>
-    );
-  }
-
-  return <span className="truncate">{props.environmentLabels.join(" · ")}</span>;
-}
```

## apps/web/src/components/CommandPaletteProjectItems.tsx

Status: added; +117; −0

```diff
@@ -1,0 +1,117 @@
+import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
+
+import type { SidebarProjectSnapshot } from "../sidebarProjectGrouping";
+import type { Project } from "../types";
+import {
+  buildCommandPaletteProjectMetadata,
+  buildProjectActionItems,
+  type CommandPaletteProject,
+  ITEM_ICON_CLASS,
+} from "./CommandPalette.logic";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { ProjectFavicon } from "./ProjectFavicon";
+import { COMMAND_PALETTE_META_ICON_CLASS, CommandPaletteMetaDot } from "./ThreadCommandSubtitle";
+
+export interface CommandPaletteProjectLocation {
+  readonly kind: "local" | "remote";
+  readonly label: string;
+  readonly machine: EnvironmentMachineKind;
+}
+
+const UNKNOWN_PROJECT_LOCATION: CommandPaletteProjectLocation = {
+  kind: "remote",
+  label: "Remote",
+  machine: "server",
+};
+
+interface ProjectItemsInput {
+  readonly projects: ReadonlyArray<CommandPaletteProject>;
+  readonly projectGroupByTargetKey: ReadonlyMap<string, SidebarProjectSnapshot>;
+  readonly locationByEnvironmentId: ReadonlyMap<EnvironmentId, CommandPaletteProjectLocation>;
+  readonly runProject: (project: CommandPaletteProject) => Promise<void>;
+}
+
+function projectFaviconIcon(project: Project) {
+  return <ProjectFavicon project={project} className={ITEM_ICON_CLASS} />;
+}
+
+/** Projects as root search results; a grouped project matches on every member. */
+export function buildProjectSearchItems(input: ProjectItemsInput) {
+  const membersOf = (project: CommandPaletteProject) =>
+    input.projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`)?.memberProjects ?? [
+      project,
+    ];
+  return buildProjectActionItems({
+    projects: input.projects,
+    valuePrefix: "project",
+    searchTerms: (project) =>
+      buildCommandPaletteProjectMetadata({
+        projects: membersOf(project),
+        locationByEnvironmentId: input.locationByEnvironmentId,
+      }).searchTerms,
+    renderDescription: (project) => {
+      const members = membersOf(project);
+      const metadata = buildCommandPaletteProjectMetadata({
+        projects: members,
+        locationByEnvironmentId: input.locationByEnvironmentId,
+      });
+      return members.length > 1 ? (
+        <span className="truncate">{metadata.environmentLabels.join(" · ")}</span>
+      ) : (
+        <ProjectLocationDescription
+          location={input.locationByEnvironmentId.get(project.environmentId)}
+          workspaceRoot={project.workspaceRoot}
+        />
+      );
+    },
+    icon: projectFaviconIcon,
+    runProject: input.runProject,
+  });
+}
+
+/** Projects as targets of the "New thread in..." submenu. */
+export function buildNewThreadInProjectItems(input: ProjectItemsInput) {
+  return buildProjectActionItems({
+    projects: input.projects,
+    valuePrefix: "new-thread-in",
+    searchTerms: (project) => {
+      const group = input.projectGroupByTargetKey.get(`${project.environmentId}:${project.id}`);
+      const location = input.locationByEnvironmentId.get(project.environmentId);
+      return [
+        ...(group?.memberProjects.flatMap((member) => [member.title, member.workspaceRoot]) ?? []),
+        ...(location ? [location.label] : []),
+      ];
+    },
+    renderDescription: (project) => (
+      <ProjectLocationDescription
+        location={input.locationByEnvironmentId.get(project.environmentId)}
+        workspaceRoot={project.workspaceRoot}
+      />
+    ),
+    icon: projectFaviconIcon,
+    runProject: input.runProject,
+  });
+}
+
+function ProjectLocationDescription(props: {
+  readonly location: CommandPaletteProjectLocation | undefined;
+  readonly workspaceRoot: string;
+}) {
+  const location = props.location ?? UNKNOWN_PROJECT_LOCATION;
+  return (
+    <span className="flex min-w-0 items-center gap-1">
+      <span className="inline-flex min-w-0 items-center gap-1">
+        {location.kind === "remote" ? (
+          <EnvironmentMachineIcon
+            aria-hidden
+            kind={location.machine}
+            className={COMMAND_PALETTE_META_ICON_CLASS}
+          />
+        ) : null}
+        <span className="truncate">{location.label}</span>
+      </span>
+      <CommandPaletteMetaDot />
+      <span className="truncate">{props.workspaceRoot}</span>
+    </span>
+  );
+}
```