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, and whether editors can share. */

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: `username:${m.name}`, label: `${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 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."}

</p>

<ul>

{members.map((m) => (

116

117

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

) : (

)}

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

124

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

125

</span>

126

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

127

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

142

onClick={async () => {

143

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

144

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

145

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

146

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

147

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>

162

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

163

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

164

<Archive size={14} /> Archive space

165

</Button>

166

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

167

168

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.

169

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

170

</p>

171

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

172

<Trash2 size={14} /> Delete space

</Button>

</section>

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

179

180

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

181

</AlertDialogDescription>

</AlertDialogHeader>

<AlertDialogAction

onClick={async () => {

187