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 [deleting, setDeleting] = useState(false);

51

// How many artifacts the sidebar shows in it, when it shows the space.

52

const inside = layout?.sidebar?.spaces.find((s) => s.id === space.id)?.page_count ?? null;

53

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

54

const candidates = [

55

...(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})` })),

56

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

57

].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>

67

68

<SpaceForm

69

initial={initialSpace(space)}

70

teams={teams}

71

isDefault={space.is_default}

72

submitLabel="Save"

73

busy={settings.busy}

74

error={settings.error}

75

onSubmit={async (value) => {

76

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

77

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>

89

<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>

90

</span>

91

<Switch

92

checked={space.editors_can_share}

93

disabled={sharing.busy}

94

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

95

aria-label="Editors can share"

/>

</label>

</Card>

{sharing.error && (

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

</div>

)}

</section>

<SectionTitle>Members</SectionTitle>

108

109

{space.kind === "private"

110

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

111

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

112

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

</p>

<ul>

{members.map((m) => (

117

118

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

) : (

)}

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

125

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

126

</span>

127

<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" />

128

<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>

))}

{members.length === 0 && <li className="px-4 py-3 text-sm text-muted">Nobody added yet.</li>}

</ul>

</Card>

<SelectField aria-label="Their role" value={addRole} onValueChange={(r) => setAddRole(r as DocRole)} options={ROLE_OPTIONS} className="h-9 w-40" />

<Button

type="button"

variant="outline"

disabled={!adding || people.busy}

143

onClick={async () => {

144

// People are named by username here; the service keys them by id.

145

const member = adding.startsWith("username:") ? await memberKey(slug, adding.slice(9)) : adding;

146

if (!member) return people.setError("That person isn't in the workspace.");

147

const done = await people.send("set_member", { space_id: space.id, member, role: addRole });

148

if (done.ok) setAdding("");

}}

>

Add

</Button>

</div>

{people.error && (

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

</div>

)}

</section>

<h2 className="text-sm font-semibold">Archive this space</h2>

163

<p className="mt-1 text-xs leading-relaxed text-muted">It leaves the sidebar and search. What's in it, its history and comments are kept, and it comes back from the Spaces page.</p>

164

<Button type="button" variant="destructive" onClick={() => setArchiving(true)} className="mt-3">

165

<Archive size={14} /> Archive space

166

</Button>

167

<h2 className="mt-6 text-sm font-semibold">Delete this space</h2>

168

169

Everything in it goes to the trash, where anyone who could edit it can restore it for 30 days. The space itself, its members and settings are gone for good.

170

{space.is_default ? " A workspace needs no General space; none takes its place." : ""}

171

</p>

172

<Button type="button" variant="destructive" onClick={() => setDeleting(true)} className="mt-3">

173

<Trash2 size={14} /> Delete space

</Button>

</section>

<AlertDialogTitle>Delete {space.name}?</AlertDialogTitle>

180

181

{inside === null ? "Everything in it goes" : inside === 1 ? "The artifact in it goes" : `The ${inside} artifacts in it go`} to the trash, where anyone who could edit it can restore it for 30 days. The space can't be brought back.

182

</AlertDialogDescription>

</AlertDialogHeader>

<AlertDialogAction

onClick={async () => {

188