| ... | @@ -21,9 +21,10 @@ import type { | ... | @@ -21,9 +21,10 @@ import type { |
| 21 | } from "@t3tools/contracts"; | 21 | } from "@t3tools/contracts"; |
| 22 | import { resolveEnvModeLabel } from "../BranchToolbar.logic"; | 22 | import { resolveEnvModeLabel } from "../BranchToolbar.logic"; |
| 23 | import { createModelSelection } from "@t3tools/shared/model"; | 23 | import { createModelSelection } from "@t3tools/shared/model"; |
| 24 | import { useLocation, useNavigate } from "@tanstack/react-router"; | 24 | import { DEFAULT_RESOLVED_KEYBINDINGS } from "@t3tools/shared/keybindings"; |
| | 25 | import { useCanGoBack, useNavigate } from "@tanstack/react-router"; |
| 25 | import * as Cause from "effect/Cause"; | 26 | import * as Cause from "effect/Cause"; |
| 26 | import { CopyIcon, FolderIcon, PlusIcon, ServerIcon, SettingsIcon, Trash2Icon } from "lucide-react"; | 27 | import { ChevronDownIcon, CopyIcon, PlusIcon, SettingsIcon, Trash2Icon } from "lucide-react"; |
| 27 | import { useCallback, useEffect, useMemo, useRef, useState } from "react"; | 28 | import { useCallback, useEffect, useMemo, useRef, useState } from "react"; |
| 28 | | 29 | |
| 29 | import { useComposerDraftStore } from "../../composerDraftStore"; | 30 | import { useComposerDraftStore } from "../../composerDraftStore"; |
| ... | @@ -59,11 +60,7 @@ import { | ... | @@ -59,11 +60,7 @@ import { |
| 59 | import { useEnvironments, usePrimaryEnvironmentId } from "../../state/environments"; | 60 | import { useEnvironments, usePrimaryEnvironmentId } from "../../state/environments"; |
| 60 | import { useProjects, useThreadShells } from "../../state/entities"; | 61 | import { useProjects, useThreadShells } from "../../state/entities"; |
| 61 | import { projectEnvironment } from "../../state/projects"; | 62 | import { projectEnvironment } from "../../state/projects"; |
| 62 | import { | 63 | import { primaryServerProvidersAtom, serverEnvironment } from "../../state/server"; |
| 63 | primaryServerKeybindingsAtom, | | |
| 64 | primaryServerProvidersAtom, | | |
| 65 | serverEnvironment, | | |
| 66 | } from "../../state/server"; | | |
| 67 | import { useAtomCommand } from "../../state/use-atom-command"; | 64 | import { useAtomCommand } from "../../state/use-atom-command"; |
| 68 | import { ProviderModelPicker } from "../chat/ProviderModelPicker"; | 65 | import { ProviderModelPicker } from "../chat/ProviderModelPicker"; |
| 69 | import { TraitsPicker } from "../chat/TraitsPicker"; | 66 | import { TraitsPicker } from "../chat/TraitsPicker"; |
| ... | @@ -76,9 +73,21 @@ import { | ... | @@ -76,9 +73,21 @@ import { |
| 76 | type NewProjectScriptInput, | 73 | type NewProjectScriptInput, |
| 77 | type ProjectScriptEditorRequest, | 74 | type ProjectScriptEditorRequest, |
| 78 | } from "../projectScriptEditor"; | 75 | } from "../projectScriptEditor"; |
| | 76 | import { cn } from "../../lib/utils"; |
| | 77 | import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../../workspaceTitlebar"; |
| 79 | import { Button } from "../ui/button"; | 78 | import { Button } from "../ui/button"; |
| 80 | import { Input } from "../ui/input"; | 79 | import { Input } from "../ui/input"; |
| | 80 | import { |
| | 81 | Menu, |
| | 82 | MenuGroup, |
| | 83 | MenuGroupLabel, |
| | 84 | MenuItem, |
| | 85 | MenuPopup, |
| | 86 | MenuSeparator, |
| | 87 | MenuTrigger, |
| | 88 | } from "../ui/menu"; |
| 81 | import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select"; | 89 | import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select"; |
| | 90 | import { SidebarInset } from "../ui/sidebar"; |
| 82 | import { stackedThreadToast, toastManager } from "../ui/toast"; | 91 | import { stackedThreadToast, toastManager } from "../ui/toast"; |
| 83 | import { | 92 | import { |
| 84 | SettingResetButton, | 93 | SettingResetButton, |
| ... | @@ -123,34 +132,115 @@ function memberKey(member: { environmentId: string; id: string }): string { | ... | @@ -123,34 +132,115 @@ function memberKey(member: { environmentId: string; id: string }): string { |
| 123 | return `${member.environmentId}:${member.id}`; | 132 | return `${member.environmentId}:${member.id}`; |
| 124 | } | 133 | } |
| 125 | | 134 | |
| 126 | export function ProjectSettingsPanel({ | 135 | export function ProjectSettingsPage({ projectKey }: { projectKey: string }) { |
| 127 | selectedProjectKey, | | |
| 128 | }: { | | |
| 129 | selectedProjectKey: string | null; | | |
| 130 | }) { | | |
| 131 | const groups = useSettingsProjectGroups(); | | |
| 132 | const navigate = useNavigate(); | 136 | const navigate = useNavigate(); |
| 133 | const currentHash = useLocation({ select: (location) => location.hash }); | 137 | const canGoBack = useCanGoBack(); |
| | 138 | const navigateBackWithinApp = useCallback(() => { |
| | 139 | if (canGoBack) { |
| | 140 | window.history.back(); |
| | 141 | return; |
| | 142 | } |
| | 143 | void navigate({ to: "/" }); |
| | 144 | }, [canGoBack, navigate]); |
| 134 | | 145 | |
| 135 | // The index route auto-selects the first project so /settings/projects is | | |
| 136 | // never a dead end. Hash is preserved for settings-search jumps. | | |
| 137 | useEffect(() => { | 146 | useEffect(() => { |
| 138 | if (selectedProjectKey !== null) return; | 147 | const onKeyDown = (event: KeyboardEvent) => { |
| 139 | const first = groups[0]; | 148 | if (event.defaultPrevented) return; |
| 140 | if (!first) return; | 149 | if (event.key !== "Escape") return; |
| 141 | void navigate({ | 150 | event.preventDefault(); |
| 142 | to: "/settings/projects/$projectKey", | 151 | const activeElement = document.activeElement; |
| 143 | params: { projectKey: first.projectKey }, | 152 | if (activeElement instanceof HTMLElement) { |
| 144 | ...(currentHash ? { hash: currentHash } : {}), | 153 | activeElement.blur(); |
| 145 | replace: true, | 154 | } |
| 146 | hashScrollIntoView: false, | 155 | navigateBackWithinApp(); |
| 147 | }); | 156 | }; |
| 148 | }, [currentHash, groups, navigate, selectedProjectKey]); | 157 | window.addEventListener("keydown", onKeyDown); |
| | 158 | return () => window.removeEventListener("keydown", onKeyDown); |
| | 159 | }, [navigateBackWithinApp]); |
| 149 | | 160 | |
| 150 | const selected = | 161 | return ( |
| 151 | selectedProjectKey === null | 162 | <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate"> |
| 152 | ? null | 163 | <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground"> |
| 153 | : (groups.find((group) => group.projectKey === selectedProjectKey) ?? null); | 164 | {!isElectron && ( |
| | 165 | <header |
| | 166 | className={cn( |
| | 167 | "workspace-topbar px-3 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none sm:px-5", |
| | 168 | COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS, |
| | 169 | )} |
| | 170 | > |
| | 171 | <ProjectSettingsBreadcrumb projectKey={projectKey} /> |
| | 172 | </header> |
| | 173 | )} |
| | 174 | {isElectron && ( |
| | 175 | <div |
| | 176 | className={cn( |
| | 177 | "drag-region flex h-[52px] shrink-0 items-center px-5 transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]", |
| | 178 | COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS, |
| | 179 | )} |
| | 180 | > |
| | 181 | <ProjectSettingsBreadcrumb projectKey={projectKey} /> |
| | 182 | </div> |
| | 183 | )} |
| | 184 | <ProjectSettingsPanel projectKey={projectKey} /> |
| | 185 | </div> |
| | 186 | </SidebarInset> |
| | 187 | ); |
| | 188 | } |
| | 189 | |
| | 190 | function ProjectSettingsBreadcrumb({ projectKey }: { projectKey: string }) { |
| | 191 | const groups = useSettingsProjectGroups(); |
| | 192 | const navigate = useNavigate(); |
| | 193 | const selected = groups.find((group) => group.projectKey === projectKey) ?? null; |
| | 194 | |
| | 195 | return ( |
| | 196 | <nav |
| | 197 | aria-label="Project settings breadcrumb" |
| | 198 | className="flex min-w-0 items-center gap-2 overflow-hidden [-webkit-app-region:no-drag] sm:gap-3" |
| | 199 | > |
| | 200 | <span className="shrink-0 text-sm font-medium text-muted-foreground">Projects</span> |
| | 201 | <span aria-hidden="true" className="shrink-0 text-icon-muted"> |
| | 202 | / |
| | 203 | </span> |
| | 204 | {selected ? ( |
| | 205 | <Select |
| | 206 | value={selected.projectKey} |
| | 207 | onValueChange={(value) => |
| | 208 | void navigate({ |
| | 209 | to: "/projects/$projectKey", |
| | 210 | params: { projectKey: String(value) }, |
| | 211 | replace: true, |
| | 212 | hashScrollIntoView: false, |
| | 213 | }) |
| | 214 | } |
| | 215 | > |
| | 216 | <SelectTrigger |
| | 217 | aria-label="Switch project" |
| | 218 | className="h-auto min-h-0 min-w-0 max-w-64 gap-1 border-0 px-0 py-0 text-sm font-medium text-foreground sm:h-auto sm:min-h-0 sm:text-sm" |
| | 219 | size="xs" |
| | 220 | variant="ghost" |
| | 221 | > |
| | 222 | <SelectValue>{selected.displayName}</SelectValue> |
| | 223 | </SelectTrigger> |
| | 224 | <SelectPopup align="start" alignItemWithTrigger={false}> |
| | 225 | {groups.map((candidate) => ( |
| | 226 | <SelectItem key={candidate.projectKey} hideIndicator value={candidate.projectKey}> |
| | 227 | {candidate.displayName} |
| | 228 | </SelectItem> |
| | 229 | ))} |
| | 230 | </SelectPopup> |
| | 231 | </Select> |
| | 232 | ) : ( |
| | 233 | <span className="truncate text-sm text-muted-foreground">Unavailable project</span> |
| | 234 | )} |
| | 235 | </nav> |
| | 236 | ); |
| | 237 | } |
| | 238 | |
| | 239 | export function ProjectSettingsPanel({ projectKey }: { projectKey: string }) { |
| | 240 | const groups = useSettingsProjectGroups(); |
| | 241 | const navigate = useNavigate(); |
| | 242 | |
| | 243 | const selected = groups.find((group) => group.projectKey === projectKey) ?? null; |
| 154 | | 244 | |
| 155 | // Remember the members of the last rendered group so a grouping-rule change | 245 | // Remember the members of the last rendered group so a grouping-rule change |
| 156 | // (which changes the group key) can follow the project to its new group. | 246 | // (which changes the group key) can follow the project to its new group. |
| ... | @@ -163,112 +253,43 @@ export function ProjectSettingsPanel({ | ... | @@ -163,112 +253,43 @@ export function ProjectSettingsPanel({ |
| 163 | }; | 253 | }; |
| 164 | }, [selected]); | 254 | }, [selected]); |
| 165 | | 255 | |
| 166 | // Recover when the selected key stops matching (regroup, removal, or a | 256 | // A grouping-rule change replaces the group key mid-visit; follow the |
| 167 | // stale deep link) instead of parking on a dead-end message. | 257 | // project to its new key instead of parking on the not-found state. |
| 168 | useEffect(() => { | 258 | useEffect(() => { |
| 169 | if (selectedProjectKey === null || selected !== null || groups.length === 0) return; | 259 | if (selected !== null) return; |
| 170 | const last = lastSelectionRef.current; | 260 | const last = lastSelectionRef.current; |
| 171 | const successor = | 261 | if (last?.key !== projectKey) return; |
| 172 | last?.key === selectedProjectKey | 262 | const successor = groups.find((group) => |
| 173 | ? (groups.find((group) => | 263 | group.memberProjects.some((member) => last.memberKeys.includes(member.physicalProjectKey)), |
| 174 | group.memberProjects.some((member) => | 264 | ); |
| 175 | last.memberKeys.includes(member.physicalProjectKey), | | |
| 176 | ), | | |
| 177 | ) ?? null) | | |
| 178 | : null; | | |
| 179 | if (successor) { | 265 | if (successor) { |
| 180 | void navigate({ | 266 | void navigate({ |
| 181 | to: "/settings/projects/$projectKey", | 267 | to: "/projects/$projectKey", |
| 182 | params: { projectKey: successor.projectKey }, | 268 | params: { projectKey: successor.projectKey }, |
| 183 | replace: true, | 269 | replace: true, |
| 184 | hashScrollIntoView: false, | 270 | hashScrollIntoView: false, |
| 185 | }); | 271 | }); |
| 186 | } else { | | |
| 187 | void navigate({ to: "/settings/projects", replace: true, hashScrollIntoView: false }); | | |
| 188 | } | 272 | } |
| 189 | }, [groups, navigate, selected, selectedProjectKey]); | 273 | }, [groups, navigate, projectKey, selected]); |
| 190 | | 274 | |
| 191 | const selectProject = useCallback( | 275 | if (!selected) { |
| 192 | (projectKey: string) => { | 276 | return ( |
| 193 | void navigate({ | 277 | <div className="flex flex-1 items-center justify-center p-8 text-sm text-muted-foreground"> |
| 194 | to: "/settings/projects/$projectKey", | 278 | {groups.length === 0 |
| 195 | params: { projectKey }, | 279 | ? "Add a project from the sidebar to configure it here." |
| 196 | replace: true, | 280 | : "This project is no longer available."} |
| 197 | hashScrollIntoView: false, | 281 | </div> |
| 198 | }); | 282 | ); |
| 199 | }, | 283 | } |
| 200 | [navigate], | 284 | return <ProjectDetail key={selected.projectKey} group={selected} />; |
| 201 | ); | | |
| 202 | | | |
| 203 | return ( | | |
| 204 | <div className="flex min-h-0 flex-1"> | | |
| 205 | <nav | | |
| 206 | aria-label="Projects" | | |
| 207 | className="w-60 shrink-0 space-y-0.5 overflow-y-auto border-e border-border/40 p-3 pt-10 max-sm:hidden sm:pt-12" | | |
| 208 | > | | |
| 209 | {groups.map((group) => { | | |
| 210 | const isActive = group.projectKey === selected?.projectKey; | | |
| 211 | return ( | | |
| 212 | <button | | |
| 213 | key={group.projectKey} | | |
| 214 | type="button" | | |
| 215 | onClick={() => selectProject(group.projectKey)} | | |
| 216 | className={`flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring ${ | | |
| 217 | isActive | | |
| 218 | ? "bg-accent text-foreground" | | |
| 219 | : "text-muted-foreground hover:bg-accent/60 hover:text-foreground" | | |
| 220 | }`} | | |
| 221 | > | | |
| 222 | <ProjectFavicon | | |
| 223 | environmentId={group.environmentId} | | |
| 224 | cwd={group.workspaceRoot} | | |
| 225 | faviconPath={group.faviconPath} | | |
| 226 | className="size-4 shrink-0" | | |
| 227 | /> | | |
| 228 | <span className="min-w-0 flex-1 truncate">{group.displayName}</span> | | |
| 229 | {group.groupedProjectCount > 1 ? ( | | |
| 230 | <span className="shrink-0 text-xs text-muted-foreground/70"> | | |
| 231 | {group.groupedProjectCount} | | |
| 232 | </span> | | |
| 233 | ) : null} | | |
| 234 | </button> | | |
| 235 | ); | | |
| 236 | })} | | |
| 237 | {groups.length === 0 ? ( | | |
| 238 | <p className="px-2 py-4 text-sm text-muted-foreground">No projects yet.</p> | | |
| 239 | ) : null} | | |
| 240 | </nav> | | |
| 241 | {selected ? ( | | |
| 242 | <ProjectDetail | | |
| 243 | key={selected.projectKey} | | |
| 244 | group={selected} | | |
| 245 | groups={groups} | | |
| 246 | onSelectProject={selectProject} | | |
| 247 | /> | | |
| 248 | ) : ( | | |
| 249 | <div className="flex flex-1 items-center justify-center p-8 text-sm text-muted-foreground"> | | |
| 250 | {groups.length === 0 ? "Add a project from the sidebar to configure it here." : null} | | |
| 251 | </div> | | |
| 252 | )} | | |
| 253 | </div> | | |
| 254 | ); | | |
| 255 | } | 285 | } |
| 256 | | 286 | |
| 257 | function ProjectDetail({ | 287 | function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) { |
| 258 | group, | | |
| 259 | groups, | | |
| 260 | onSelectProject, | | |
| 261 | }: { | | |
| 262 | group: SidebarProjectSnapshot; | | |
| 263 | groups: ReadonlyArray<SidebarProjectSnapshot>; | | |
| 264 | onSelectProject: (projectKey: string) => void; | | |
| 265 | }) { | | |
| 266 | const navigate = useNavigate(); | 288 | const navigate = useNavigate(); |
| 267 | const settings = usePrimarySettings(); | 289 | const settings = usePrimarySettings(); |
| 268 | const updateClientSettings = useUpdateClientSettings(); | 290 | const updateClientSettings = useUpdateClientSettings(); |
| 269 | const projectGroupingSettings = useClientSettings(selectProjectGroupingSettings); | 291 | const projectGroupingSettings = useClientSettings(selectProjectGroupingSettings); |
| 270 | const serverProviders = useAtomValue(primaryServerProvidersAtom); | 292 | const serverProviders = useAtomValue(primaryServerProvidersAtom); |
| 271 | const keybindings = useAtomValue(primaryServerKeybindingsAtom); | | |
| 272 | const threads = useThreadShells(); | 293 | const threads = useThreadShells(); |
| 273 | const updateProject = useAtomCommand(projectEnvironment.update, { reportFailure: false }); | 294 | const updateProject = useAtomCommand(projectEnvironment.update, { reportFailure: false }); |
| 274 | const deleteProject = useAtomCommand(projectEnvironment.delete, { reportFailure: false }); | 295 | const deleteProject = useAtomCommand(projectEnvironment.delete, { reportFailure: false }); |
| ... | @@ -307,11 +328,6 @@ function ProjectDetail({ | ... | @@ -307,11 +328,6 @@ function ProjectDetail({ |
| 307 | } | 328 | } |
| 308 | return counts; | 329 | return counts; |
| 309 | }, [threads]); | 330 | }, [threads]); |
| 310 | const groupThreadCount = group.memberProjects.reduce( | | |
| 311 | (total, member) => total + (threadCountByMember.get(memberKey(member)) ?? 0), | | |
| 312 | 0, | | |
| 313 | ); | | |
| 314 | | | |
| 315 | const reportFailure = useCallback((title: string, result: AtomCommandResult<void, unknown>) => { | 331 | const reportFailure = useCallback((title: string, result: AtomCommandResult<void, unknown>) => { |
| 316 | if (result._tag !== "Failure" || isAtomCommandInterrupted(result)) return; | 332 | if (result._tag !== "Failure" || isAtomCommandInterrupted(result)) return; |
| 317 | const error = squashAtomCommandFailure(result); | 333 | const error = squashAtomCommandFailure(result); |
| ... | @@ -324,15 +340,15 @@ function ProjectDetail({ | ... | @@ -324,15 +340,15 @@ function ProjectDetail({ |
| 324 | ); | 340 | ); |
| 325 | }, []); | 341 | }, []); |
| 326 | | 342 | |
| 327 | // Group-shared fields (default model, scripts) live on each physical | 343 | // Group-shared fields live on each physical project record, so a |
| 328 | // project record, so a group-level edit fans out to every member. | 344 | // group-level edit fans out to every member. |
| 329 | const updateAllMembers = useCallback( | 345 | const updateAllMembers = useCallback( |
| 330 | async ( | 346 | async ( |
| 331 | input: Partial<{ | 347 | input: Partial<{ |
| | 348 | title: string; |
| 332 | defaultModelSelection: ModelSelection | null; | 349 | defaultModelSelection: ModelSelection | null; |
| 333 | defaultThreadEnvMode: ThreadEnvMode | null; | 350 | defaultThreadEnvMode: ThreadEnvMode | null; |
| 334 | faviconPath: string | null; | 351 | faviconPath: string | null; |
| 335 | scripts: ReadonlyArray<ReturnType<typeof buildProjectScript>>; | | |
| 336 | }>, | 352 | }>, |
| 337 | failureTitle: string, | 353 | failureTitle: string, |
| 338 | ): Promise<AtomCommandResult<void, unknown>> => { | 354 | ): Promise<AtomCommandResult<void, unknown>> => { |
| ... | @@ -361,6 +377,20 @@ function ProjectDetail({ | ... | @@ -361,6 +377,20 @@ function ProjectDetail({ |
| 361 | [group.memberProjects, reportFailure, updateProject], | 377 | [group.memberProjects, reportFailure, updateProject], |
| 362 | ); | 378 | ); |
| 363 | | 379 | |
| | 380 | const renameGroup = useCallback( |
| | 381 | async (nextTitle: string) => { |
| | 382 | const title = nextTitle.trim(); |
| | 383 | if (!title) { |
| | 384 | toastManager.add({ type: "warning", title: "Project title cannot be empty" }); |
| | 385 | return; |
| | 386 | } |
| | 387 | if (title === group.displayName) return; |
| | 388 | if (group.memberProjects.every((member) => member.title === title)) return; |
| | 389 | await updateAllMembers({ title }, "Failed to rename project"); |
| | 390 | }, |
| | 391 | [group.displayName, group.memberProjects, updateAllMembers], |
| | 392 | ); |
| | 393 | |
| 364 | // ----- default model ----- | 394 | // ----- default model ----- |
| 365 | const storedSelection = representative.defaultModelSelection; | 395 | const storedSelection = representative.defaultModelSelection; |
| 366 | const resolvedSelection = resolveDefaultProviderModelSelection(serverProviders, storedSelection); | 396 | const resolvedSelection = resolveDefaultProviderModelSelection(serverProviders, storedSelection); |
| ... | @@ -414,14 +444,25 @@ function ProjectDetail({ | ... | @@ -414,14 +444,25 @@ function ProjectDetail({ |
| 414 | [updateAllMembers], | 444 | [updateAllMembers], |
| 415 | ); | 445 | ); |
| 416 | | 446 | |
| 417 | // ----- scripts ----- | 447 | // ----- checkout selection and scripts ----- |
| 418 | const scripts = representative.scripts; | 448 | const [selectedCheckoutKey, setSelectedCheckoutKey] = useState(representative.physicalProjectKey); |
| | 449 | const selectedCheckout = |
| | 450 | group.memberProjects.find((member) => member.physicalProjectKey === selectedCheckoutKey) ?? |
| | 451 | representative; |
| | 452 | const selectedServerConfig = useAtomValue( |
| | 453 | serverEnvironment.configValueAtom(selectedCheckout.environmentId), |
| | 454 | ); |
| | 455 | const keybindings = selectedServerConfig?.keybindings ?? DEFAULT_RESOLVED_KEYBINDINGS; |
| | 456 | const scripts = selectedCheckout.scripts; |
| 419 | const [editorRequest, setEditorRequest] = useState<ProjectScriptEditorRequest | null>(null); | 457 | const [editorRequest, setEditorRequest] = useState<ProjectScriptEditorRequest | null>(null); |
| 420 | // Script writes replace the whole array, so two overlapping writes computed | 458 | // Script writes replace the whole array, so two overlapping writes computed |
| 421 | // from the same snapshot would drop each other's changes. One at a time. | 459 | // from the same snapshot would drop each other's changes. One at a time. |
| 422 | const [isSavingScripts, setIsSavingScripts] = useState(false); | 460 | const [isSavingScripts, setIsSavingScripts] = useState(false); |
| 423 | const savingScriptsRef = useRef(false); | 461 | const savingScriptsRef = useRef(false); |
| 424 | const t3File = useT3ProjectFileState(representative.environmentId, representative.workspaceRoot); | 462 | const t3File = useT3ProjectFileState( |
| | 463 | selectedCheckout.environmentId, |
| | 464 | selectedCheckout.workspaceRoot, |
| | 465 | ); |
| 425 | // What the "Default" option resolves to while no override is set: the | 466 | // What the "Default" option resolves to while no override is set: the |
| 426 | // repo's t3.json value when present, otherwise the global setting. | 467 | // repo's t3.json value when present, otherwise the global setting. |
| 427 | const inheritedEnvMode = t3File.file?.defaultThreadEnvMode ?? settings.defaultThreadEnvMode; | 468 | const inheritedEnvMode = t3File.file?.defaultThreadEnvMode ?? settings.defaultThreadEnvMode; |
| ... | @@ -456,20 +497,24 @@ function ProjectDetail({ | ... | @@ -456,20 +497,24 @@ function ProjectDetail({ |
| 456 | // Captured before the write so a cleared or deleted binding can be | 497 | // Captured before the write so a cleared or deleted binding can be |
| 457 | // removed from the keybindings config afterwards. | 498 | // removed from the keybindings config afterwards. |
| 458 | const previousKeybinding = keybindingValueForCommand(keybindings, keybindingCommand); | 499 | const previousKeybinding = keybindingValueForCommand(keybindings, keybindingCommand); |
| 459 | const updateResult = await updateAllMembers( | 500 | const updateResult = mapAtomCommandResult( |
| 460 | { scripts: nextScripts }, | 501 | await updateProject({ |
| 461 | "Failed to save scripts", | 502 | environmentId: selectedCheckout.environmentId, |
| | 503 | input: { projectId: selectedCheckout.id, scripts: nextScripts }, |
| | 504 | }), |
| | 505 | () => undefined, |
| 462 | ); | 506 | ); |
| 463 | if (updateResult._tag === "Failure") return updateResult; | 507 | if (updateResult._tag === "Failure") { |
| | 508 | reportFailure("Failed to save scripts", updateResult); |
| | 509 | return updateResult; |
| | 510 | } |
| 464 | | 511 | |
| 465 | const keybindingRule = decodeProjectScriptKeybindingRule({ | 512 | const keybindingRule = decodeProjectScriptKeybindingRule({ |
| 466 | keybinding, | 513 | keybinding, |
| 467 | command: keybindingCommand, | 514 | command: keybindingCommand, |
| 468 | }); | 515 | }); |
| 469 | if (!isElectron) return updateResult; | 516 | if (!isElectron) return updateResult; |
| 470 | const environmentIds = [ | 517 | const environmentIds = [selectedCheckout.environmentId]; |
| 471 | ...new Set(group.memberProjects.map((member) => member.environmentId)), | | |
| 472 | ]; | | |
| 473 | const previousTarget = previousKeybinding | 518 | const previousTarget = previousKeybinding |
| 474 | ? decodeProjectScriptKeybindingRule({ | 519 | ? decodeProjectScriptKeybindingRule({ |
| 475 | keybinding: previousKeybinding, | 520 | keybinding: previousKeybinding, |
| ... | @@ -512,11 +557,12 @@ function ProjectDetail({ | ... | @@ -512,11 +557,12 @@ function ProjectDetail({ |
| 512 | } | 557 | } |
| 513 | }, | 558 | }, |
| 514 | [ | 559 | [ |
| 515 | group.memberProjects, | | |
| 516 | keybindings, | 560 | keybindings, |
| 517 | removeKeybinding, | 561 | removeKeybinding, |
| 518 | reportFailure, | 562 | reportFailure, |
| 519 | updateAllMembers, | 563 | selectedCheckout.environmentId, |
| | 564 | selectedCheckout.id, |
| | 565 | updateProject, |
| 520 | upsertKeybinding, | 566 | upsertKeybinding, |
| 521 | ], | 567 | ], |
| 522 | ); | 568 | ); |
| ... | @@ -589,26 +635,6 @@ function ProjectDetail({ | ... | @@ -589,26 +635,6 @@ function ProjectDetail({ |
| 589 | ); | 635 | ); |
| 590 | | 636 | |
| 591 | // ----- checkouts ----- | 637 | // ----- checkouts ----- |
| 592 | const renameMember = useCallback( | | |
| 593 | async (member: SidebarProjectGroupMember, nextTitle: string) => { | | |
| 594 | const title = nextTitle.trim(); | | |
| 595 | if (!title) { | | |
| 596 | toastManager.add({ type: "warning", title: "Project title cannot be empty" }); | | |
| 597 | return; | | |
| 598 | } | | |
| 599 | if (title === member.title) return; | | |
| 600 | const result = mapAtomCommandResult( | | |
| 601 | await updateProject({ | | |
| 602 | environmentId: member.environmentId, | | |
| 603 | input: { projectId: member.id, title }, | | |
| 604 | }), | | |
| 605 | () => undefined, | | |
| 606 | ); | | |
| 607 | reportFailure("Failed to rename project", result); | | |
| 608 | }, | | |
| 609 | [reportFailure, updateProject], | | |
| 610 | ); | | |
| 611 | | | |
| 612 | const updateGroupingPreference = useCallback( | 638 | const updateGroupingPreference = useCallback( |
| 613 | (member: SidebarProjectGroupMember, selection: SidebarProjectGroupingMode | "inherit") => { | 639 | (member: SidebarProjectGroupMember, selection: SidebarProjectGroupingMode | "inherit") => { |
| 614 | const overrideKey = deriveProjectGroupingOverrideKey(member); | 640 | const overrideKey = deriveProjectGroupingOverrideKey(member); |
| ... | @@ -689,8 +715,10 @@ function ProjectDetail({ | ... | @@ -689,8 +715,10 @@ function ProjectDetail({ |
| 689 | draftStore.clearProjectDraftThreadId(projectRef); | 715 | draftStore.clearProjectDraftThreadId(projectRef); |
| 690 | } | 716 | } |
| 691 | | 717 | |
| | 718 | // The project's settings page just deleted itself; there is no projects |
| | 719 | // listing to fall back to, so leave settings entirely. |
| 692 | if (isWholeGroup) { | 720 | if (isWholeGroup) { |
| 693 | void navigate({ to: "/settings/projects", replace: true }); | 721 | void navigate({ to: "/", replace: true }); |
| 694 | } | 722 | } |
| 695 | }, | 723 | }, |
| 696 | [ | 724 | [ |
| ... | @@ -703,424 +731,420 @@ function ProjectDetail({ | ... | @@ -703,424 +731,420 @@ function ProjectDetail({ |
| 703 | ], | 731 | ], |
| 704 | ); | 732 | ); |
| 705 | | 733 | |
| 706 | const repositoryLine = | 734 | const selectedCheckoutThreadCount = threadCountByMember.get(memberKey(selectedCheckout)) ?? 0; |
| 707 | representative.repositoryIdentity?.displayName ?? | 735 | const selectedCheckoutGrouping = |
| 708 | representative.repositoryIdentity?.canonicalKey ?? | 736 | projectGroupingSettings.sidebarProjectGroupingOverrides?.[ |
| 709 | "No git remote detected"; | 737 | deriveProjectGroupingOverrideKey(selectedCheckout) |
| 710 | const environmentCount = new Set(group.memberProjects.map((member) => member.environmentId)).size; | 738 | ] ?? "inherit"; |
| | 739 | const selectedCheckoutLabel = selectedCheckout.environmentLabel ?? "This machine"; |
| 711 | | 740 | |
| 712 | return ( | 741 | return ( |
| 713 | <SettingsPageContainer className="gap-10"> | 742 | <> |
| 714 | <div className="flex items-center gap-3 px-3 sm:px-4"> | 743 | <SettingsPageContainer> |
| 715 | <ProjectFavicon | 744 | <SettingsSection title="Project"> |
| 716 | environmentId={group.environmentId} | 745 | <SettingsRow |
| 717 | cwd={group.workspaceRoot} | 746 | title="Name" |
| 718 | faviconPath={group.faviconPath} | 747 | description="The shared name for this project group in the sidebar and thread lists." |
| 719 | className="size-8 shrink-0" | 748 | control={ |
| 720 | /> | 749 | <Input |
| 721 | <div className="min-w-0 flex-1"> | 750 | key={`${group.projectKey}:${group.displayName}`} |
| 722 | <h1 className="truncate text-xl font-semibold tracking-[-0.02em] text-foreground"> | 751 | className="w-full sm:w-64" |
| 723 | {group.displayName} | 752 | aria-label="Project name" |
| 724 | </h1> | 753 | defaultValue={group.displayName} |
| 725 | <p className="truncate text-[13px] text-muted-foreground"> | 754 | onBlur={(event) => { |
| 726 | {repositoryLine} | 755 | void renameGroup(event.currentTarget.value); |
| 727 | {" · "} | 756 | }} |
| 728 | {group.memberProjects.length === 1 | 757 | onKeyDown={(event) => { |
| 729 | ? "1 checkout" | 758 | if (event.key === "Enter") event.currentTarget.blur(); |
| 730 | : `${group.memberProjects.length} checkouts`} | 759 | }} |
| 731 | {environmentCount > 1 ? ` across ${environmentCount} environments` : ""} | | |
| 732 | {" · "} | | |
| 733 | {groupThreadCount === 1 ? "1 thread" : `${groupThreadCount} threads`} | | |
| 734 | </p> | | |
| 735 | </div> | | |
| 736 | <Select value={group.projectKey} onValueChange={(value) => onSelectProject(String(value))}> | | |
| 737 | <SelectTrigger className="sm:hidden" aria-label="Switch project"> | | |
| 738 | <SelectValue>{group.displayName}</SelectValue> | | |
| 739 | </SelectTrigger> | | |
| 740 | <SelectPopup align="end" alignItemWithTrigger={false}> | | |
| 741 | {groups.map((candidate) => ( | | |
| 742 | <SelectItem key={candidate.projectKey} hideIndicator value={candidate.projectKey}> | | |
| 743 | {candidate.displayName} | | |
| 744 | </SelectItem> | | |
| 745 | ))} | | |
| 746 | </SelectPopup> | | |
| 747 | </Select> | | |
| 748 | </div> | | |
| 749 | | | |
| 750 | <SettingsSection title="Appearance"> | | |
| 751 | <SettingsRow | | |
| 752 | id="project-favicon" | | |
| 753 | title="Project icon" | | |
| 754 | description={faviconPath ?? "Automatic"} | | |
| 755 | resetAction={ | | |
| 756 | faviconPath !== null ? ( | | |
| 757 | <SettingResetButton | | |
| 758 | label="project icon" | | |
| 759 | disabled={isSavingFavicon} | | |
| 760 | onClick={() => void setFaviconPath(null)} | | |
| 761 | /> | | |
| 762 | ) : null | | |
| 763 | } | | |
| 764 | control={ | | |
| 765 | <div className="flex items-center gap-2"> | | |
| 766 | <ProjectFavicon | | |
| 767 | environmentId={representative.environmentId} | | |
| 768 | cwd={representative.workspaceRoot} | | |
| 769 | faviconPath={faviconPath} | | |
| 770 | className="size-6" | | |
| 771 | /> | | |
| 772 | <Button | | |
| 773 | size="xs" | | |
| 774 | variant="outline" | | |
| 775 | type="button" | | |
| 776 | aria-label="Choose a project icon file" | | |
| 777 | disabled={isSavingFavicon} | | |
| 778 | onClick={() => setFaviconPickerOpen(true)} | | |
| 779 | > | | |
| 780 | Choose file | | |
| 781 | </Button> | | |
| 782 | </div> | | |
| 783 | } | | |
| 784 | /> | | |
| 785 | </SettingsSection> | | |
| 786 | | | |
| 787 | <SettingsSection title="Model"> | | |
| 788 | <SettingsRow | | |
| 789 | id="project-default-model" | | |
| 790 | title="Default model" | | |
| 791 | description="New threads in this project start with this model. Applies to every checkout in this group." | | |
| 792 | resetAction={ | | |
| 793 | storedSelection !== null ? ( | | |
| 794 | <SettingResetButton | | |
| 795 | label="project default model" | | |
| 796 | onClick={() => setDefaultModel(null)} | | |
| 797 | /> | 760 | /> |
| 798 | ) : null | 761 | } |
| 799 | } | 762 | /> |
| 800 | control={ | 763 | <SettingsRow |
| 801 | resolvedSelection && activeEntry ? ( | 764 | title="Project icon" |
| 802 | <div className="flex flex-wrap items-center justify-end gap-1.5"> | 765 | description={faviconPath ?? "Automatic"} |
| 803 | <ProviderModelPicker | 766 | resetAction={ |
| 804 | activeInstanceId={resolvedSelection.instanceId} | 767 | faviconPath !== null ? ( |
| 805 | model={resolvedSelection.model} | 768 | <SettingResetButton |
| 806 | lockedProvider={null} | 769 | label="project icon" |
| 807 | instanceEntries={instanceEntries} | 770 | disabled={isSavingFavicon} |
| 808 | modelOptionsByInstance={modelOptionsByInstance} | 771 | onClick={() => void setFaviconPath(null)} |
| 809 | triggerVariant="outline" | | |
| 810 | triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground" | | |
| 811 | onInstanceModelChange={(instanceId, model) => { | | |
| 812 | setDefaultModel(createModelSelection(instanceId, model)); | | |
| 813 | }} | | |
| 814 | /> | 772 | /> |
| 815 | <TraitsPicker | 773 | ) : null |
| 816 | provider={activeEntry.driverKind as ProviderDriverKind} | 774 | } |
| 817 | models={activeEntry.models} | 775 | control={ |
| 818 | model={resolvedSelection.model} | 776 | <div className="flex items-center gap-2"> |
| 819 | prompt="" | 777 | <ProjectFavicon |
| 820 | onPromptChange={() => {}} | 778 | environmentId={representative.environmentId} |
| 821 | modelOptions={resolvedSelection.options ?? []} | 779 | cwd={representative.workspaceRoot} |
| 822 | allowPromptInjectedEffort={false} | 780 | faviconPath={faviconPath} |
| 823 | triggerVariant="outline" | 781 | className="size-6" |
| 824 | triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground" | | |
| 825 | onModelOptionsChange={(nextOptions) => { | | |
| 826 | setDefaultModel( | | |
| 827 | createModelSelection( | | |
| 828 | resolvedSelection.instanceId, | | |
| 829 | resolvedSelection.model, | | |
| 830 | nextOptions, | | |
| 831 | ), | | |
| 832 | ); | | |
| 833 | }} | | |
| 834 | /> | 782 | /> |
| | 783 | <Button |
| | 784 | size="xs" |
| | 785 | variant="outline" |
| | 786 | type="button" |
| | 787 | aria-label="Choose a project icon file" |
| | 788 | disabled={isSavingFavicon} |
| | 789 | onClick={() => setFaviconPickerOpen(true)} |
| | 790 | > |
| | 791 | Choose file |
| | 792 | </Button> |
| 835 | </div> | 793 | </div> |
| 836 | ) : ( | 794 | } |
| 837 | <span className="text-sm text-muted-foreground">No providers available</span> | 795 | /> |
| 838 | ) | 796 | </SettingsSection> |
| 839 | } | | |
| 840 | /> | | |
| 841 | </SettingsSection> | | |
| 842 | | 797 | |
| 843 | <SettingsSection title="New threads"> | 798 | <SettingsSection title="New threads"> |
| 844 | <SettingsRow | 799 | <SettingsRow |
| 845 | id="project-new-thread-workspace" | 800 | title="Model" |
| 846 | title="Workspace" | 801 | description="New threads in this project start with this model. Applies to every checkout in this group." |
| 847 | description="Where new threads in this project start. Overrides t3.json and the global default; applies to every checkout in this group." | 802 | resetAction={ |
| 848 | resetAction={ | 803 | storedSelection !== null ? ( |
| 849 | storedEnvMode !== null ? ( | 804 | <SettingResetButton |
| 850 | <SettingResetButton | 805 | label="project default model" |
| 851 | label="project workspace default" | 806 | onClick={() => setDefaultModel(null)} |
| 852 | onClick={() => setDefaultThreadEnvMode(null)} | 807 | /> |
| 853 | /> | 808 | ) : null |
| 854 | ) : null | 809 | } |
| 855 | } | 810 | control={ |
| 856 | control={ | 811 | resolvedSelection && activeEntry ? ( |
| | 812 | <div className="flex flex-wrap items-center justify-end gap-1.5"> |
| | 813 | <ProviderModelPicker |
| | 814 | activeInstanceId={resolvedSelection.instanceId} |
| | 815 | model={resolvedSelection.model} |
| | 816 | lockedProvider={null} |
| | 817 | instanceEntries={instanceEntries} |
| | 818 | modelOptionsByInstance={modelOptionsByInstance} |
| | 819 | triggerVariant="outline" |
| | 820 | triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground" |
| | 821 | onInstanceModelChange={(instanceId, model) => { |
| | 822 | setDefaultModel(createModelSelection(instanceId, model)); |
| | 823 | }} |
| | 824 | /> |
| | 825 | <TraitsPicker |
| | 826 | provider={activeEntry.driverKind as ProviderDriverKind} |
| | 827 | models={activeEntry.models} |
| | 828 | model={resolvedSelection.model} |
| | 829 | prompt="" |
| | 830 | onPromptChange={() => {}} |
| | 831 | modelOptions={resolvedSelection.options ?? []} |
| | 832 | allowPromptInjectedEffort={false} |
| | 833 | triggerVariant="outline" |
| | 834 | triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground" |
| | 835 | onModelOptionsChange={(nextOptions) => { |
| | 836 | setDefaultModel( |
| | 837 | createModelSelection( |
| | 838 | resolvedSelection.instanceId, |
| | 839 | resolvedSelection.model, |
| | 840 | nextOptions, |
| | 841 | ), |
| | 842 | ); |
| | 843 | }} |
| | 844 | /> |
| | 845 | </div> |
| | 846 | ) : ( |
| | 847 | <span className="text-sm text-muted-foreground">No providers available</span> |
| | 848 | ) |
| | 849 | } |
| | 850 | /> |
| | 851 | <SettingsRow |
| | 852 | title="Workspace" |
| | 853 | description="Where new threads in this project start. Overrides t3.json and the global default; applies to every checkout in this group." |
| | 854 | resetAction={ |
| | 855 | storedEnvMode !== null ? ( |
| | 856 | <SettingResetButton |
| | 857 | label="project workspace default" |
| | 858 | onClick={() => setDefaultThreadEnvMode(null)} |
| | 859 | /> |
| | 860 | ) : null |
| | 861 | } |
| | 862 | control={ |
| | 863 | <Select |
| | 864 | value={storedEnvMode ?? "inherit"} |
| | 865 | onValueChange={(value) => { |
| | 866 | if (value === "worktree" || value === "local") { |
| | 867 | setDefaultThreadEnvMode(value); |
| | 868 | } else if (value === "inherit") { |
| | 869 | setDefaultThreadEnvMode(null); |
| | 870 | } |
| | 871 | }} |
| | 872 | > |
| | 873 | <SelectTrigger aria-label="New-thread workspace"> |
| | 874 | <SelectValue> |
| | 875 | {storedEnvMode === null |
| | 876 | ? group.memberProjects.length > 1 |
| | 877 | ? "Default (per checkout)" |
| | 878 | : `Default (${resolveEnvModeLabel(inheritedEnvMode).toLowerCase()})` |
| | 879 | : resolveEnvModeLabel(storedEnvMode)} |
| | 880 | </SelectValue> |
| | 881 | </SelectTrigger> |
| | 882 | <SelectPopup align="end" alignItemWithTrigger={false}> |
| | 883 | <SelectItem value="inherit"> |
| | 884 | {group.memberProjects.length > 1 |
| | 885 | ? "Default (each checkout's t3.json or global setting)" |
| | 886 | : `Default (${inheritedEnvModeSource}: ${resolveEnvModeLabel(inheritedEnvMode).toLowerCase()})`} |
| | 887 | </SelectItem> |
| | 888 | <SelectItem value="worktree">{resolveEnvModeLabel("worktree")}</SelectItem> |
| | 889 | <SelectItem value="local">{resolveEnvModeLabel("local")}</SelectItem> |
| | 890 | </SelectPopup> |
| | 891 | </Select> |
| | 892 | } |
| | 893 | /> |
| | 894 | </SettingsSection> |
| | 895 | |
| | 896 | <SettingsSection |
| | 897 | title="Checkout" |
| | 898 | headerAction={ |
| 857 | <Select | 899 | <Select |
| 858 | value={storedEnvMode ?? "inherit"} | 900 | value={selectedCheckout.physicalProjectKey} |
| 859 | onValueChange={(value) => { | 901 | onValueChange={(value) => setSelectedCheckoutKey(String(value))} |
| 860 | if (value === "worktree" || value === "local") { | | |
| 861 | setDefaultThreadEnvMode(value); | | |
| 862 | } else if (value === "inherit") { | | |
| 863 | setDefaultThreadEnvMode(null); | | |
| 864 | } | | |
| 865 | }} | | |
| 866 | > | 902 | > |
| 867 | <SelectTrigger aria-label="New-thread workspace"> | 903 | <SelectTrigger className="max-w-64" aria-label="Selected checkout"> |
| 868 | <SelectValue> | 904 | <SelectValue>{selectedCheckoutLabel}</SelectValue> |
| 869 | {storedEnvMode === null | | |
| 870 | ? `Default (${resolveEnvModeLabel(inheritedEnvMode).toLowerCase()})` | | |
| 871 | : resolveEnvModeLabel(storedEnvMode)} | | |
| 872 | </SelectValue> | | |
| 873 | </SelectTrigger> | 905 | </SelectTrigger> |
| 874 | <SelectPopup align="end" alignItemWithTrigger={false}> | 906 | <SelectPopup align="end" alignItemWithTrigger={false}> |
| 875 | <SelectItem value="inherit"> | 907 | {group.memberProjects.map((member) => ( |
| 876 | Default ({inheritedEnvModeSource}:{" "} | 908 | <SelectItem |
| 877 | {resolveEnvModeLabel(inheritedEnvMode).toLowerCase()}) | 909 | key={member.physicalProjectKey} |
| 878 | </SelectItem> | 910 | hideIndicator |
| 879 | <SelectItem value="worktree">{resolveEnvModeLabel("worktree")}</SelectItem> | 911 | value={member.physicalProjectKey} |
| 880 | <SelectItem value="local">{resolveEnvModeLabel("local")}</SelectItem> | 912 | > |
| | 913 | {member.environmentLabel ?? "This machine"} · {member.workspaceRoot} |
| | 914 | </SelectItem> |
| | 915 | ))} |
| 881 | </SelectPopup> | 916 | </SelectPopup> |
| 882 | </Select> | 917 | </Select> |
| 883 | } | 918 | } |
| 884 | /> | 919 | > |
| 885 | </SettingsSection> | 920 | <div className="px-3 py-2 sm:px-4"> |
| 886 | | 921 | <div className="flex min-w-0 items-center rounded-lg bg-muted/30 p-1 text-base text-muted-foreground sm:text-sm"> |
| 887 | <SettingsSection | 922 | <button |
| 888 | id="project-scripts" | 923 | aria-label="Copy checkout path" |
| 889 | title="Scripts" | 924 | className="group flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left outline-none hover:bg-accent/60 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring" |
| 890 | headerAction={ | 925 | title="Copy path" |
| 891 | <Button | 926 | type="button" |
| 892 | size="xs" | 927 | onClick={() => |
| 893 | variant="outline" | 928 | copyPathToClipboard(selectedCheckout.workspaceRoot, { |
| 894 | disabled={isSavingScripts} | 929 | path: selectedCheckout.workspaceRoot, |
| 895 | onClick={() => | 930 | }) |
| 896 | setEditorRequest({ scriptId: null, initial: EMPTY_PROJECT_SCRIPT_INPUT }) | 931 | } |
| | 932 | > |
| | 933 | <code className="min-w-0 flex-1 truncate font-mono"> |
| | 934 | {selectedCheckout.workspaceRoot} |
| | 935 | </code> |
| | 936 | <CopyIcon className="size-4 shrink-0 opacity-60 group-hover:opacity-100" /> |
| | 937 | </button> |
| | 938 | <div className="shrink-0 border-l border-border/60 px-2 tabular-nums"> |
| | 939 | {selectedCheckoutThreadCount === 1 |
| | 940 | ? "1 thread" |
| | 941 | : `${selectedCheckoutThreadCount} threads`} |
| | 942 | </div> |
| | 943 | </div> |
| | 944 | </div> |
| | 945 | <SettingsRow |
| | 946 | title="Project grouping" |
| | 947 | description="How this checkout joins project groups in the sidebar. Changing it can move you to a different project group." |
| | 948 | control={ |
| | 949 | <Select |
| | 950 | value={selectedCheckoutGrouping} |
| | 951 | onValueChange={(value) => { |
| | 952 | if ( |
| | 953 | value === "inherit" || |
| | 954 | value === "repository" || |
| | 955 | value === "repository_path" || |
| | 956 | value === "separate" |
| | 957 | ) { |
| | 958 | updateGroupingPreference(selectedCheckout, value); |
| | 959 | } |
| | 960 | }} |
| | 961 | > |
| | 962 | <SelectTrigger aria-label={`Grouping rule for ${selectedCheckoutLabel}`}> |
| | 963 | <SelectValue> |
| | 964 | {selectedCheckoutGrouping === "inherit" |
| | 965 | ? `Default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})` |
| | 966 | : PROJECT_GROUPING_MODE_LABELS[selectedCheckoutGrouping]} |
| | 967 | </SelectValue> |
| | 968 | </SelectTrigger> |
| | 969 | <SelectPopup align="end" alignItemWithTrigger={false}> |
| | 970 | <SelectItem hideIndicator value="inherit"> |
| | 971 | Use global default |
| | 972 | </SelectItem> |
| | 973 | <SelectItem hideIndicator value="repository"> |
| | 974 | {PROJECT_GROUPING_MODE_LABELS.repository} |
| | 975 | </SelectItem> |
| | 976 | <SelectItem hideIndicator value="repository_path"> |
| | 977 | {PROJECT_GROUPING_MODE_LABELS.repository_path} |
| | 978 | </SelectItem> |
| | 979 | <SelectItem hideIndicator value="separate"> |
| | 980 | {PROJECT_GROUPING_MODE_LABELS.separate} |
| | 981 | </SelectItem> |
| | 982 | </SelectPopup> |
| | 983 | </Select> |
| 897 | } | 984 | } |
| 898 | > | 985 | /> |
| 899 | <PlusIcon className="size-3.5" /> | 986 | {group.memberProjects.length > 1 ? ( |
| 900 | Add action | 987 | <SettingsRow |
| 901 | </Button> | 988 | title="Remove checkout" |
| 902 | } | 989 | description="Removes this checkout and its threads from the project group. Files on disk are not touched." |
| 903 | > | 990 | control={ |
| 904 | {scripts.length === 0 ? ( | 991 | <Button |
| 905 | <p className="px-3 py-2 text-sm text-muted-foreground sm:px-4"> | 992 | size="xs" |
| 906 | No scripts yet. Scripts run in a project terminal from the thread top bar; one script | 993 | variant="destructive-outline" |
| 907 | can run automatically when a worktree is created. | 994 | onClick={() => void removeMembers([selectedCheckout])} |
| 908 | </p> | 995 | > |
| 909 | ) : ( | 996 | <Trash2Icon className="size-3.5" /> |
| 910 | <div className="space-y-0.5"> | 997 | Remove checkout |
| 911 | {scripts.map((script) => { | 998 | </Button> |
| | 999 | } |
| | 1000 | /> |
| | 1001 | ) : null} |
| | 1002 | <div className="flex min-h-8 flex-col items-start gap-3 px-3 pt-4 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-4"> |
| | 1003 | <div className="min-w-0"> |
| | 1004 | <h3 className="text-base font-semibold text-foreground">Actions</h3> |
| | 1005 | <p className="text-pretty text-sm text-muted-foreground"> |
| | 1006 | Saved and run only in {selectedCheckoutLabel}. |
| | 1007 | </p> |
| | 1008 | </div> |
| | 1009 | <div className="flex w-full flex-wrap gap-1.5 sm:w-auto sm:shrink-0 sm:justify-end"> |
| | 1010 | {importableScripts.length > 0 ? ( |
| | 1011 | <Menu> |
| | 1012 | <MenuTrigger |
| | 1013 | render={ |
| | 1014 | <Button size="xs" variant="ghost" disabled={isSavingScripts} type="button" /> |
| | 1015 | } |
| | 1016 | > |
| | 1017 | Import scripts |
| | 1018 | <ChevronDownIcon className="size-3.5" /> |
| | 1019 | </MenuTrigger> |
| | 1020 | <MenuPopup align="end" className="w-72"> |
| | 1021 | <MenuGroup> |
| | 1022 | <MenuGroupLabel>Import from t3.json</MenuGroupLabel> |
| | 1023 | <p className="px-2 pb-2 text-pretty text-sm text-muted-foreground"> |
| | 1024 | Add actions declared by this checkout without editing them first. |
| | 1025 | </p> |
| | 1026 | </MenuGroup> |
| | 1027 | <MenuSeparator /> |
| | 1028 | {importableScripts.map((fileScript) => ( |
| | 1029 | <MenuItem |
| | 1030 | key={`${fileScript.name} ${fileScript.command}`} |
| | 1031 | onClick={() => void importFileScript(fileScript)} |
| | 1032 | > |
| | 1033 | <ScriptIcon icon={fileScript.icon ?? "play"} className="size-4 shrink-0" /> |
| | 1034 | <div className="min-w-0 flex-1"> |
| | 1035 | <div className="truncate font-medium">{fileScript.name}</div> |
| | 1036 | <div className="truncate font-mono text-muted-foreground"> |
| | 1037 | {fileScript.command} |
| | 1038 | </div> |
| | 1039 | </div> |
| | 1040 | </MenuItem> |
| | 1041 | ))} |
| | 1042 | </MenuPopup> |
| | 1043 | </Menu> |
| | 1044 | ) : null} |
| | 1045 | <Button |
| | 1046 | size="xs" |
| | 1047 | variant="outline" |
| | 1048 | disabled={isSavingScripts} |
| | 1049 | onClick={() => |
| | 1050 | setEditorRequest({ scriptId: null, initial: EMPTY_PROJECT_SCRIPT_INPUT }) |
| | 1051 | } |
| | 1052 | > |
| | 1053 | <PlusIcon className="size-3.5" /> |
| | 1054 | Add action |
| | 1055 | </Button> |
| | 1056 | </div> |
| | 1057 | </div> |
| | 1058 | {scripts.length === 0 ? ( |
| | 1059 | <p className="px-3 py-2 text-base text-muted-foreground sm:px-4 sm:text-sm"> |
| | 1060 | No actions configured for this checkout. |
| | 1061 | </p> |
| | 1062 | ) : ( |
| | 1063 | scripts.map((script) => { |
| 912 | const shortcutLabel = shortcutLabelForCommand( | 1064 | const shortcutLabel = shortcutLabelForCommand( |
| 913 | keybindings, | 1065 | keybindings, |
| 914 | commandForProjectScript(script.id), | 1066 | commandForProjectScript(script.id), |
| 915 | ); | 1067 | ); |
| 916 | return ( | 1068 | return ( |
| 917 | <div | 1069 | <SettingsRow |
| 918 | key={script.id} | 1070 | key={script.id} |
| 919 | className="group flex min-w-0 items-center gap-3 rounded-lg px-3 py-2 hover:bg-accent/50 sm:px-4" | 1071 | className="group py-2" |
| 920 | > | 1072 | title={ |
| 921 | <ScriptIcon | 1073 | <span className="flex min-w-0 items-center gap-2"> |
| 922 | icon={script.icon} | 1074 | <ScriptIcon |
| 923 | className="size-4 shrink-0 text-muted-foreground" | 1075 | icon={script.icon} |
| 924 | /> | 1076 | className="size-4 shrink-0 text-muted-foreground" |
| 925 | <span className="shrink-0 text-sm font-medium text-foreground"> | 1077 | /> |
| 926 | {script.name} | 1078 | <span className="max-w-40 shrink-0 truncate">{script.name}</span> |
| 927 | </span> | 1079 | <code className="min-w-0 flex-1 truncate font-mono font-normal text-muted-foreground"> |
| 928 | {script.runOnWorktreeCreate ? ( | 1080 | {script.command} |
| 929 | <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] text-muted-foreground"> | 1081 | </code> |
| 930 | setup | 1082 | {script.runOnWorktreeCreate ? ( |
| | 1083 | <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] font-normal text-muted-foreground"> |
| | 1084 | setup |
| | 1085 | </span> |
| | 1086 | ) : null} |
| | 1087 | {script.previewUrl ? ( |
| | 1088 | <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] font-normal text-muted-foreground max-sm:hidden"> |
| | 1089 | preview · desktop only |
| | 1090 | </span> |
| | 1091 | ) : null} |
| 931 | </span> | 1092 | </span> |
| 932 | ) : null} | 1093 | } |
| 933 | {script.previewUrl ? ( | 1094 | control={ |
| 934 | <span className="shrink-0 rounded-sm border border-border/60 px-1.5 py-px text-[11px] text-muted-foreground max-sm:hidden"> | 1095 | <> |
| 935 | preview · desktop only | 1096 | {shortcutLabel ? ( |
| 936 | </span> | 1097 | <span className="text-xs text-muted-foreground">{shortcutLabel}</span> |
| 937 | ) : null} | 1098 | ) : null} |
| 938 | <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground/80"> | 1099 | <Button |
| 939 | {script.command} | 1100 | size="icon-xs" |
| 940 | </span> | 1101 | variant="ghost" |
| 941 | {shortcutLabel ? ( | 1102 | className="shrink-0 text-muted-foreground opacity-0 group-focus-within:opacity-100 group-hover:opacity-100" |
| 942 | <span className="shrink-0 text-xs text-muted-foreground">{shortcutLabel}</span> | 1103 | aria-label={`Edit ${script.name}`} |
| 943 | ) : null} | 1104 | disabled={isSavingScripts} |
| 944 | <Button | 1105 | onClick={() => |
| 945 | size="icon-xs" | 1106 | setEditorRequest(editorRequestForScript(script, keybindings)) |
| 946 | variant="ghost" | 1107 | } |
| 947 | className="shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 group-focus-within:opacity-100" | 1108 | > |
| 948 | aria-label={`Edit ${script.name}`} | 1109 | <SettingsIcon className="size-3.5" /> |
| 949 | disabled={isSavingScripts} | 1110 | </Button> |
| 950 | onClick={() => setEditorRequest(editorRequestForScript(script, keybindings))} | 1111 | </> |
| 951 | > | 1112 | } |
| 952 | <SettingsIcon className="size-3.5" /> | 1113 | /> |
| 953 | </Button> | | |
| 954 | </div> | | |
| 955 | ); | 1114 | ); |
| 956 | })} | 1115 | }) |
| 957 | </div> | 1116 | )} |
| 958 | )} | 1117 | {t3File.status === "invalid" ? ( |
| 959 | {t3File.status === "invalid" ? ( | 1118 | <SettingsRow |
| 960 | <SettingsRow | 1119 | title="t3.json is invalid" |
| 961 | title="t3.json is invalid" | 1120 | description="A t3.json exists in this checkout but fails to parse, so every action and icon it declares is ignored. Check the JSON syntax and icon values." |
| 962 | description="A t3.json exists at the workspace root but fails to parse, so every script and icon it declares is ignored. Check the JSON syntax and icon values." | 1121 | className="text-warning" |
| 963 | className="text-warning" | 1122 | /> |
| 964 | /> | 1123 | ) : null} |
| 965 | ) : null} | 1124 | </SettingsSection> |
| 966 | {importableScripts.length > 0 ? ( | 1125 | |
| | 1126 | <SettingsSection title="Danger"> |
| 967 | <SettingsRow | 1127 | <SettingsRow |
| 968 | title="Import from t3.json" | 1128 | title={ |
| 969 | description={`${importableScripts.length} script${importableScripts.length === 1 ? "" : "s"} declared in this repo's t3.json ${importableScripts.length === 1 ? "is" : "are"} not set up yet.`} | 1129 | group.memberProjects.length > 1 ? "Remove this project everywhere" : "Remove project" |
| | 1130 | } |
| | 1131 | description={ |
| | 1132 | group.memberProjects.length > 1 |
| | 1133 | ? `Deletes all ${group.memberProjects.length} checkout entries and their threads on every machine. Files on disk are not touched.` |
| | 1134 | : "Deletes the project entry and its threads. Files on disk are not touched." |
| | 1135 | } |
| 970 | control={ | 1136 | control={ |
| 971 | <div className="flex flex-wrap justify-end gap-1.5"> | 1137 | <Button |
| 972 | {importableScripts.map((fileScript) => ( | 1138 | variant="destructive-outline" |
| 973 | <Button | 1139 | onClick={() => void removeMembers(group.memberProjects)} |
| 974 | key={`${fileScript.name} ${fileScript.command}`} | 1140 | > |
| 975 | size="xs" | 1141 | <Trash2Icon /> |
| 976 | variant="outline" | 1142 | {group.memberProjects.length > 1 ? "Remove all entries" : "Remove project"} |
| 977 | disabled={isSavingScripts} | 1143 | </Button> |
| 978 | onClick={() => void importFileScript(fileScript)} | | |
| 979 | > | | |
| 980 | <ScriptIcon icon={fileScript.icon ?? "play"} className="size-3.5" /> | | |
| 981 | {fileScript.name} | | |
| 982 | </Button> | | |
| 983 | ))} | | |
| 984 | </div> | | |
| 985 | } | 1144 | } |
| 986 | /> | 1145 | /> |
| 987 | ) : null} | 1146 | </SettingsSection> |
| 988 | </SettingsSection> | 1147 | </SettingsPageContainer> |
| 989 | | | |
| 990 | <SettingsSection id="project-checkouts" title="Checkouts"> | | |
| 991 | <div className="space-y-2 px-3 sm:px-4"> | | |
| 992 | {group.memberProjects.map((member) => { | | |
| 993 | const threadCount = threadCountByMember.get(memberKey(member)) ?? 0; | | |
| 994 | const groupingOverride = | | |
| 995 | projectGroupingSettings.sidebarProjectGroupingOverrides?.[ | | |
| 996 | deriveProjectGroupingOverrideKey(member) | | |
| 997 | ] ?? "inherit"; | | |
| 998 | return ( | | |
| 999 | <div | | |
| 1000 | key={member.physicalProjectKey} | | |
| 1001 | className="space-y-3 rounded-lg border border-border/50 p-3" | | |
| 1002 | > | | |
| 1003 | <div className="flex min-w-0 items-center gap-2"> | | |
| 1004 | <ServerIcon className="size-3.5 shrink-0 text-muted-foreground" /> | | |
| 1005 | <span className="min-w-0 truncate text-sm font-medium text-foreground"> | | |
| 1006 | {member.environmentLabel ?? "Current environment"} | | |
| 1007 | </span> | | |
| 1008 | <span className="ms-auto shrink-0 text-xs text-muted-foreground"> | | |
| 1009 | {threadCount === 1 ? "1 thread" : `${threadCount} threads`} | | |
| 1010 | </span> | | |
| 1011 | {group.memberProjects.length > 1 ? ( | | |
| 1012 | <Button | | |
| 1013 | size="icon-xs" | | |
| 1014 | variant="ghost" | | |
| 1015 | className="shrink-0 text-muted-foreground hover:text-destructive-foreground" | | |
| 1016 | aria-label={`Remove checkout ${member.workspaceRoot}`} | | |
| 1017 | onClick={() => void removeMembers([member])} | | |
| 1018 | > | | |
| 1019 | <Trash2Icon className="size-3.5" /> | | |
| 1020 | </Button> | | |
| 1021 | ) : null} | | |
| 1022 | </div> | | |
| 1023 | <div className="flex min-w-0 items-center gap-1.5"> | | |
| 1024 | <FolderIcon className="size-3.5 shrink-0 text-muted-foreground/70" /> | | |
| 1025 | <span className="min-w-0 truncate font-mono text-xs text-muted-foreground"> | | |
| 1026 | {member.workspaceRoot} | | |
| 1027 | </span> | | |
| 1028 | <Button | | |
| 1029 | size="icon-xs" | | |
| 1030 | variant="ghost" | | |
| 1031 | className="size-4 shrink-0 rounded-sm" | | |
| 1032 | aria-label="Copy project path" | | |
| 1033 | onClick={() => | | |
| 1034 | copyPathToClipboard(member.workspaceRoot, { path: member.workspaceRoot }) | | |
| 1035 | } | | |
| 1036 | > | | |
| 1037 | <CopyIcon className="size-3" /> | | |
| 1038 | </Button> | | |
| 1039 | </div> | | |
| 1040 | <div className="grid gap-3 sm:grid-cols-2"> | | |
| 1041 | <label className="grid min-w-0 gap-1.5"> | | |
| 1042 | <span className="text-xs font-medium text-muted-foreground">Name</span> | | |
| 1043 | <Input | | |
| 1044 | key={`${member.physicalProjectKey}:${member.title}`} | | |
| 1045 | aria-label={`Project name in ${member.environmentLabel ?? "current environment"}`} | | |
| 1046 | defaultValue={member.title} | | |
| 1047 | onBlur={(event) => { | | |
| 1048 | void renameMember(member, event.currentTarget.value); | | |
| 1049 | }} | | |
| 1050 | onKeyDown={(event) => { | | |
| 1051 | if (event.key === "Enter") event.currentTarget.blur(); | | |
| 1052 | }} | | |
| 1053 | /> | | |
| 1054 | </label> | | |
| 1055 | <label className="grid min-w-0 gap-1.5"> | | |
| 1056 | <span className="text-xs font-medium text-muted-foreground">Grouping rule</span> | | |
| 1057 | <Select | | |
| 1058 | value={groupingOverride} | | |
| 1059 | onValueChange={(value) => { | | |
| 1060 | if ( | | |
| 1061 | value === "inherit" || | | |
| 1062 | value === "repository" || | | |
| 1063 | value === "repository_path" || | | |
| 1064 | value === "separate" | | |
| 1065 | ) { | | |
| 1066 | updateGroupingPreference(member, value); | | |
| 1067 | } | | |
| 1068 | }} | | |
| 1069 | > | | |
| 1070 | <SelectTrigger | | |
| 1071 | className="w-full" | | |
| 1072 | aria-label={`Grouping rule for ${member.environmentLabel ?? "current environment"}`} | | |
| 1073 | > | | |
| 1074 | <SelectValue> | | |
| 1075 | {groupingOverride === "inherit" | | |
| 1076 | ? `Default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})` | | |
| 1077 | : PROJECT_GROUPING_MODE_LABELS[groupingOverride]} | | |
| 1078 | </SelectValue> | | |
| 1079 | </SelectTrigger> | | |
| 1080 | <SelectPopup align="start" alignItemWithTrigger={false}> | | |
| 1081 | <SelectItem hideIndicator value="inherit"> | | |
| 1082 | Use global default | | |
| 1083 | </SelectItem> | | |
| 1084 | <SelectItem hideIndicator value="repository"> | | |
| 1085 | {PROJECT_GROUPING_MODE_LABELS.repository} | | |
| 1086 | </SelectItem> | | |
| 1087 | <SelectItem hideIndicator value="repository_path"> | | |
| 1088 | {PROJECT_GROUPING_MODE_LABELS.repository_path} | | |
| 1089 | </SelectItem> | | |
| 1090 | <SelectItem hideIndicator value="separate"> | | |
| 1091 | {PROJECT_GROUPING_MODE_LABELS.separate} | | |
| 1092 | </SelectItem> | | |
| 1093 | </SelectPopup> | | |
| 1094 | </Select> | | |
| 1095 | </label> | | |
| 1096 | </div> | | |
| 1097 | </div> | | |
| 1098 | ); | | |
| 1099 | })} | | |
| 1100 | </div> | | |
| 1101 | </SettingsSection> | | |
| 1102 | | | |
| 1103 | <SettingsSection title="Danger"> | | |
| 1104 | <SettingsRow | | |
| 1105 | title={ | | |
| 1106 | group.memberProjects.length > 1 ? "Remove this project everywhere" : "Remove project" | | |
| 1107 | } | | |
| 1108 | description={ | | |
| 1109 | group.memberProjects.length > 1 | | |
| 1110 | ? `Deletes all ${group.memberProjects.length} checkout entries and their threads on every machine. Files on disk are not touched.` | | |
| 1111 | : "Deletes the project entry and its threads. Files on disk are not touched." | | |
| 1112 | } | | |
| 1113 | control={ | | |
| 1114 | <Button | | |
| 1115 | variant="destructive-outline" | | |
| 1116 | onClick={() => void removeMembers(group.memberProjects)} | | |
| 1117 | > | | |
| 1118 | <Trash2Icon /> | | |
| 1119 | {group.memberProjects.length > 1 ? "Remove all entries" : "Remove project"} | | |
| 1120 | </Button> | | |
| 1121 | } | | |
| 1122 | /> | | |
| 1123 | </SettingsSection> | | |
| 1124 | | 1148 | |
| 1125 | <ProjectScriptEditorDialog | 1149 | <ProjectScriptEditorDialog |
| 1126 | request={editorRequest} | 1150 | request={editorRequest} |
| ... | @@ -1138,6 +1162,6 @@ function ProjectDetail({ | ... | @@ -1138,6 +1162,6 @@ function ProjectDetail({ |
| 1138 | open={faviconPickerOpen} | 1162 | open={faviconPickerOpen} |
| 1139 | projectName={group.displayName} | 1163 | projectName={group.displayName} |
| 1140 | /> | 1164 | /> |
| 1141 | </SettingsPageContainer> | 1165 | </> |
| 1142 | ); | 1166 | ); |
| 1143 | } | 1167 | } |
Julius Marminge <julius0216@outlook.com> 2026-08-10 02:57:39+02:00
GitHub <noreply@github.com> 2026-08-10 02:57:39+02:00