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

12

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

13

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

14

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

15

import { folios } 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: `Trash · Artifacts · ${params.owner} · g1t` });

20

}

21

22

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

23

const viewer = requireUser(context, request);

24

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

25

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

26

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

27

}

28

29

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

30

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

31

const slug = params.owner.toLowerCase();

32

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

33

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

34

const items = loaderData.items;

35

return (

36

37

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

38

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

39

{error && (

40

41

<ErrorText>{error}</ErrorText>

</div>

)}

{items === null ? (

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

47

) : items.length === 0 ? (

) : (

<ul>

{items.map((f) => (

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

57

58

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

59

</span>

60

</span>

61

<Button type="button" onClick={() => send("restore", { folio_id: f.id })} variant="outline" size="sm" className="text-xs text-fg hover:bg-raised font-normal">

62

<RotateCcw size={13} /> Restore

63

</Button>

64