apps/web/app/routes/workspace/folios/space-settings.tsx · flagon-io/g1t

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../../components/ui/alert-dialog";

13

import { Button } from "../../../components/ui/button";

14

import { Card } from "../../../components/ui/card";

15

import { SelectField } from "../../../components/ui/select";

16

import { Switch } from "../../../components/ui/switch";

17

import { spacePath } from "../../../lib/folios";

18

import { page } from "../../../lib/meta";

19

import { docs, identity } from "../../../lib/services.server";

20

import { requireUser, roleIn } from "../../../lib/session.server";

21

22

export function meta({ loaderData: loaded, params, ...args }: Route.MetaArgs) {

23

return page(args, { title: `Settings · ${loaded?.space.name ?? "Space"} · Artifacts · ${params.owner} · g1t` });

24

}

25

26

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ space: DocSpace; members: DocSpaceMember[]; teams: { slug: string; name: string }[] }> {

27

const viewer = requireUser(context, request);

28

if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });

29

const slug = params.owner.toLowerCase();

30

const [found, teams] = await Promise.all([docs.space(slug, params.space, viewer), identity.listTeams(viewer, slug).catch(() => null)]);

31

if (!found.ok) throw data(null, { status: 404 });

32

if (found.value.space.viewer_role !== "manage") throw data(null, { status: 403 });

33

return { space: found.value.space, members: found.value.members, teams: teams?.ok ? teams.value.map((t) => ({ slug: t.slug, name: t.name })) : [] };

34

}

35

36

const ROLE_OPTIONS = DOC_ROLES.map((r) => ({ value: r, label: DOC_ROLE_LABELS[r], description: DOC_ROLE_SUMMARIES[r] }));

37

38

/** A space's settings: what it is, who it's for, its members and their roles, whether editors can share, and how agents work in it. */

39

export default function SpaceSettings({ loaderData, params }: Route.ComponentProps) {

40

const slug = params.owner.toLowerCase();

41

const { space, members, teams } = loaderData;

42

const layout = useFoliosData();

43

const navigate = useNavigate();

44

const settings = useFoliosAction(slug);

45

const people = useFoliosAction(slug);

46

const sharing = useFoliosAction(slug);

47

const [adding, setAdding] = useState("");

48

const [addRole, setAddRole] = useState<DocRole>("edit");

49

const [archiving, setArchiving] = useState(false);

50

const listed = new Set(members.map((m) => m.key));

51

const candidates = [

52

...(layout?.mentionables ?? []).map((m) => ({ value: m.kind === "agent" ? `agent:${m.id}` : `username:${m.name}`, label: m.kind === "agent" ? `${m.display_name} (agent)` : `${m.display_name} (@${m.name})` })),

53

...teams.map((t) => ({ value: `team:${t.slug}`, label: `${t.name} (team)` })),

54

].filter((c) => !listed.has(c.value));

return (

{space.name}

</Link>{" "}

/ Settings

</p>

<h1 className="mt-1 text-xl font-semibold tracking-tight">Space settings</h1>

64

65

<SpaceForm

66

initial={initialSpace(space)}

67

teams={teams}

68

isDefault={space.is_default}

69

submitLabel="Save"

70

busy={settings.busy}

71

error={settings.error}

72

onSubmit={async (value) => {

73

const saved = await settings.send<DocSpace>("update_space", { space_id: space.id, space_change: spaceInput(value) });

74

if (saved.ok && saved.value.slug !== space.slug) navigate(`${spacePath(slug, saved.value.slug)}/settings`, { replace: true });

}}

/>

</div>

<SectionTitle>Sharing</SectionTitle>

<label>

<span className="block text-sm text-fg">Editors can share</span>

86

<span className="mt-0.5 block text-xs leading-relaxed text-faint">People who can edit what's in this space can also share it with others, up to Can edit. Off: only people with full access can share.</span>

87

</span>

88

<Switch

89

checked={space.editors_can_share}

90

disabled={sharing.busy}

91

onCheckedChange={(on) => sharing.send("update_space", { space_id: space.id, space_change: { editors_can_share: on } })}

92

aria-label="Editors can share"

/>

</label>

</Card>

{sharing.error && (

<ErrorText>{sharing.error}</ErrorText>

</div>

)}

</section>

<SectionTitle>Members</SectionTitle>

105

106

{space.kind === "private"

107

? "Only the people, agents and teams here can open this space."

108

: "Everyone the space is for already has its base role; add people here to give them more. Workspace owners always have full access."}{" "}

109

An agent added here still never does more than the person it works for.

</p>

<ul>

{members.map((m) => (

114

115

{m.kind === "team" ? (

) : (

)}

<span className="block truncate text-sm">{m.display_name}</span>

122

<span className="block text-xs text-faint">{m.kind === "team" ? "Team" : m.kind === "agent" ? "Agent" : `@${m.name}`}</span>

123

</span>

124

<SelectField aria-label={`${m.display_name}'s role`} value={m.role} onValueChange={(role) => people.send("set_member", { space_id: space.id, member: m.key, role })} options={ROLE_OPTIONS} className="h-8 w-40" />

125

<Button type="button" onClick={() => people.send("set_member", { space_id: space.id, member: m.key, role: null })} variant="link" size="inline" className="text-xs text-faint hover:text-danger font-normal">

Remove

</Button>

</li>

))}