```
## apps/web/src/components/CommandPaletteAddProject.tsx
Status: added; +171; −0
```diff
@@ -1,0 +1,171 @@
+import {
+ type AddProjectRemoteSource,
+ type NewProjectPublishTarget,
+} from "@t3tools/client-runtime/operations/projects";
+import { sourceControlClients } from "@t3tools/client-runtime/source-control-clients";
+import type { SourceControlProviderKind } from "@t3tools/contracts";
+import { FolderGit2Icon, LinkIcon } from "lucide-react";
+import { type ReactNode, useState } from "react";
+
+import { sourceControlIcon } from "~/sourceControlPresentation";
+import { ITEM_ICON_CLASS } from "./CommandPalette.logic";
+import { CommandPaletteTitleIcon } from "./CommandPaletteResults";
+import { Button } from "./ui/button";
+import { Kbd, KbdGroup } from "./ui/kbd";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
+
+export function remoteProjectSourceIcon(
+ source: AddProjectRemoteSource,
+ className: string,
+): ReactNode {
+ if (source === "url") return
;
+ const Icon = sourceControlIcon(sourceControlClients.get(source));
+ return
;
+}
+
+export function sourceControlHostIcon(
+ definition: NewProjectPublishTarget["definition"],
+ className: string,
+): ReactNode {
+ const Icon = sourceControlIcon(definition);
+ return
;
+}
+
+/** The input's trailing submit button for the add-project, clone, and new-project flows. */
+export function CommandPaletteSubmitButton(props: {
+ readonly label: ReactNode;
+ readonly shortcutLabel: string;
+ readonly ariaLabel: string;
+ readonly tooltip: ReactNode;
+ readonly disabled: boolean;
+ readonly onSubmit: () => void;
+}) {
+ return (
+
+ {
+ event.preventDefault();
+ }}
+ onClick={props.onSubmit}
+ />
+ }
+ >
+ {props.label}
+
+ {props.shortcutLabel}
+
+
+ {props.tooltip}
+
+ );
+}
+
+/**
+ * Picks which host a new project publishes to. The row it sits in toggles on click, so the
+ * picker keeps its clicks to itself. The row also cancels pointerdown to keep focus in the
+ * input, which drops the mousedown Select opens on, so the picker opens on click instead.
+ */
+export function NewProjectPublishHostPicker(props: {
+ readonly disabled: boolean;
+ readonly targets: ReadonlyArray
;
+ readonly value: SourceControlProviderKind;
+ readonly onValueChange: (kind: SourceControlProviderKind) => void;
+}) {
+ const [open, setOpen] = useState(false);
+ return (
+ {
+ event.stopPropagation();
+ // React bubbles the popup's clicks here through its portal; only the
+ // trigger opens the picker.
+ if (!event.currentTarget.contains(event.target as Node)) return;
+ if (!props.disabled) setOpen(true);
+ }}
+ >
+
+
+ );
+}
+
+export function NewProjectSummary(props: {
+ readonly name: string;
+ readonly pathPreview: string;
+ readonly projectsRoot: string | null;
+ readonly environmentLabel: string | null;
+}) {
+ return (
+
+
+
+
+
+
+
+ {props.name.length > 0 ? props.name : "New project"}
+
+
+ {props.name.length > 0
+ ? `Creates ${props.pathPreview}`
+ : `Goes in ${props.projectsRoot}`}
+ {props.environmentLabel === null ? null : ` on ${props.environmentLabel}`}
+
+
+
+
+
Repository
+
+
+ {remoteProjectSourceIcon(props.source, ITEM_ICON_CLASS)}
+
+
+ {props.title}
+ {props.description}
+
+
+