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

1

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

2

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

3

import { useState } from "react";

4

import { data } from "react-router";

5

6

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

7

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

8

import { KindIcon } from "../../../components/folios/kinds";

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 { canDo } from "../../../lib/folios";

12

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

13

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

14

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

15

16

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

17

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

18

}

19

20

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

21

const viewer = requireUser(context, request);

22

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

23

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

24

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

25

}

26

27

/** Artifacts moved to the trash that the viewer can change: restore them, or delete them for good. After 30 days they go on their own. */

28

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

29

const slug = params.owner.toLowerCase();

30

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

31

const [forever, setForever] = useState<Folio | null>(null);

32

const items = loaderData.items;

33

return (

34

35

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

36

<p className="mt-1 text-sm text-muted">Artifacts come back with what was inside them. After 30 days in the trash they are deleted for good.</p>

37

{error && (

38

39

<ErrorText>{error}</ErrorText>

</div>

)}

{items === null ? (

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

45

) : items.length === 0 ? (

) : (

{items.map((f) => (

<span className="block truncate text-sm">{f.title || "Untitled"}</span>

54

55

{f.space?.name ?? "Private"} · trashed {f.trashed_at ? <TimeAgo at={f.trashed_at} /> : null}

56

</span>

57

</span>

58

<button type="button" onClick={() => send("restore", { folio_id: f.id })} className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-line px-2.5 text-xs text-fg hover:bg-raised">

59

<RotateCcw size={13} /> Restore

60

</button>

61

{canDo(f.viewer_role, "manage") && (

62

<button type="button" onClick={() => setForever(f)} className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-danger/40 px-2.5 text-xs text-danger hover:bg-danger/10">

63