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

1

import type { DocSpace } from "@g1t/contracts";

2

import { Archive, Check, Plus, RotateCcw, Trash2 } from "lucide-react";

3

import { useState } from "react";

4

import { Link, data } from "react-router";

5

6

import type { Route } from "./+types/spaces";

7

import { useFoliosAction, useFoliosData } from "../../../components/folios/actions";

8

import { SpaceIcon, spaceKindLabel } from "../../../components/folios/parts";

9

import { EmptyState, ErrorText, TimeAgo } from "../../../components/ui";

10

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

11

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

12

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

13

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

14

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

15

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

16

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

17

18

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

19

return page(args, { title: `Spaces · Artifacts · ${params.owner} · g1t` });

20

}

21

22

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ spaces: DocSpace[] | null }> {

23

const viewer = requireUser(context, request);

24

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

25

const found = await docs.spaces(params.owner.toLowerCase(), viewer).catch(() => null);

26

return { spaces: found?.ok ? found.value : null };

}

/**

* Every space the viewer can open. Open spaces are joined to show in the

31

* sidebar, so it doesn't fill up; team and members-only spaces show

32

* there already. Archived spaces are listed apart at the bottom, where

33

* they are brought back or deleted.

34

*/

35

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

36

const slug = params.owner.toLowerCase();

37

const layout = useFoliosData();

38

const { send, busy, error } = useFoliosAction(slug);

39

const shown = new Set((layout?.sidebar?.spaces ?? []).map((s) => s.id));

40

const owner = layout?.role === "owner";

41

const [deleting, setDeleting] = useState<DocSpace | null>(null);

42

const spaces = loaderData.spaces;

43

const live = (spaces ?? []).filter((s) => !s.archived_at);

44

const archived = (spaces ?? []).filter((s) => s.archived_at);

return (

<div>

<h1 className="text-xl font-semibold tracking-tight">Spaces</h1>

50

<p className="mt-1 text-sm text-muted">A space holds artifacts for a team, a project or a topic. Join an open space to see it in your sidebar.</p>

</div>

<Plus size={15} /> New space

</Link>

</Button>

</div>

{error && (

<ErrorText>{error}</ErrorText>

</div>

)}

{spaces === null ? (

<EmptyState title="Artifacts didn't answer">Try again in a moment.</EmptyState>

66

) : live.length === 0 ? (

67

<EmptyState title="No spaces yet">Make one for a team, a project or a topic. Artifacts in no space live in their owners' Private.</EmptyState>

) : (

<ul>

{live.map((s) => {

const joined = shown.has(s.id);

73

const joinable = s.kind === "workspace" && !s.is_default;

return (

</span>

{s.name}

</Link>

{spaceKindLabel(s.kind)}

85

{s.description ? ` · ${s.description}` : ""}

</span>

</span>

{joinable ? (

<Button type="button" size="sm" variant={joined ? "outline" : "accent"} disabled={busy} onClick={() => send(joined ? "leave_space" : "join_space", { space_id: s.id })} className="shrink-0">

90

{joined ? "Leave" : "Join"}

</Button>

) : (

<Check size={13} /> In your sidebar

</span>

)}

</li>

);

})}

</ul>

</Card>

)}

</div>

{archived.length > 0 && (

105

106

107

<Archive size={14} className="text-faint" /> Archived

108

</h2>

109

<p className="mt-1 mb-4 text-xs leading-relaxed text-faint">Out of the sidebar and search, with everything in them kept. Bring one back, or delete it: its artifacts go to the trash.</p>

110

111

<ul>

112

{archived.map((s) => {

113

const manages = canDo(s.viewer_role, "manage") || owner;

return (

</span>

{spaceKindLabel(s.kind)} · archived {s.archived_at ? <TimeAgo at={s.archived_at} /> : null}

</span>

</span>

{manages && (

<>

<Button type="button" size="sm" variant="outline" disabled={busy} onClick={() => send("update_space", { space_id: s.id, space_change: { archived: false } })} className="shrink-0 text-xs font-normal">

128

<RotateCcw size={13} /> Restore

129

</Button>

130

<Button type="button" size="sm" variant="destructive" disabled={busy} onClick={() => setDeleting(s)} className="shrink-0 text-xs font-normal">

131

<Trash2 size={13} /> <span className="max-sm:hidden">Delete</span>

</Button>

</>

)}

</li>

);

})}

</ul>

</Card>

</section>

)}

<AlertDialog open={!!deleting} onOpenChange={(open) => !open && setDeleting(null)}>

143

144

145

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

146

147

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.

148

{deleting?.is_default ? " The workspace will have no General space; none takes its place." : ""}

149

</AlertDialogDescription>

</AlertDialogHeader>

<AlertDialogAction

onClick={() => {