1import { EnvironmentId } from "@t3tools/contracts";
2
3import { ProjectSettingsPanel } from "./ProjectSettingsPanel";
4import { useSettingsScope } from "./SettingsScopeContext";
5import { SettingsScopeNotice } from "./SettingsScopeNotice";
6import { SettingsPageContainer } from "./settingsLayout";
7
8/** Project identity and checkout management for the selected project. */
9export function ProjectsSettings() {
10 const { search: value, scope } = useSettingsScope();
11 // The panel follows remembered members when grouping replaces a project key.
12 const projectScope =
13 scope.kind === "project" ||
14 scope.kind === "checkout" ||
15 (scope.kind === "unavailable" &&
16 (scope.reason === "project-missing" || scope.reason === "checkout-missing"));
17 return (
18 <div className="flex min-h-0 flex-1 flex-col">
19 {value.project && projectScope ? (
20 <ProjectSettingsPanel
21 projectKey={value.project}
22 environmentId={value.machine ? EnvironmentId.make(value.machine) : null}
23 checkoutKey={value.checkout ?? null}
24 />
25 ) : scope.kind === "unavailable" ? (
26 <SettingsPageContainer>
27 <p className="text-sm text-muted-foreground">{scope.message}</p>
28 </SettingsPageContainer>
29 ) : (
30 <SettingsScopeNotice target="project">
31 Choose a project to manage its name, icon, checkouts and actions.
32 </SettingsScopeNotice>
33 )}
34 </div>
35 );
36}