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 { SelectField } from "../../../components/ui/select";

14

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

15

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

16

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

17

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

18

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

19

20

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

21

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

22

}

23

24

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

25

const viewer = requireUser(context, request);

26

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

27

const slug = params.owner.toLowerCase();

28

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

29

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

30

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

31

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

32

}

33

34

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

35

36

/** 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. */

37

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

38

const slug = params.owner.toLowerCase();

39

const { space, members, teams } = loaderData;

40

const layout = useFoliosData();

41

const navigate = useNavigate();

42

const settings = useFoliosAction(slug);

43

const people = useFoliosAction(slug);

44

const sharing = useFoliosAction(slug);

45

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

46

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

47

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

48

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

49

const candidates = [

50

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

51

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

52

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

62

63

<SpaceForm

64

initial={initialSpace(space)}

65

teams={teams}

66

isDefault={space.is_default}

67

submitLabel="Save"

68

busy={settings.busy}

69

error={settings.error}

70

onSubmit={async (value) => {

71

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

72

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

}}

/>

</div>

<SectionTitle>Sharing</SectionTitle>

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

83

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

84

</span>

85

<Switch

86

checked={space.editors_can_share}

87

disabled={sharing.busy}

88

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

89

aria-label="Editors can share"

/>

</label>

{sharing.error && (

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

</div>

)}

</section>

<SectionTitle>Members</SectionTitle>

101

102

{space.kind === "private"

103

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

104

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

105

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

106

</p>

107

108

{members.map((m) => (

109

110

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

) : (

)}

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

117

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

118

</span>

119

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

120

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

Remove

</button>

</li>

))}