From 80a0ce990096b8e438ba6db909f29d9da6c950e5 Mon Sep 17 00:00:00 2001 From: Juliet Date: Sun, 31 Aug 2025 15:23:28 +0200 Subject: [PATCH] add create/edit/delete notif --- src/components/create.tsx | 3 +++ src/layout.tsx | 23 ++++++++++++++++++----- src/utils/copy.ts | 10 ++-------- src/views/collection.tsx | 19 ++++++++++--------- src/views/record.tsx | 2 ++ 5 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/components/create.tsx b/src/components/create.tsx index 4045773..c2fbf02 100644 --- a/src/components/create.tsx +++ b/src/components/create.tsx @@ -10,6 +10,7 @@ import { remove } from "@mary/exif-rm"; import { TextInput } from "./text-input.jsx"; import { Modal } from "./modal.jsx"; import { Button } from "./button.jsx"; +import { setNotif } from "../layout.jsx"; export const RecordEditor = (props: { create: boolean; record?: any; refetch?: any }) => { const navigate = useNavigate(); @@ -66,6 +67,7 @@ export const RecordEditor = (props: { create: boolean; record?: any; refetch?: a return; } setOpenDialog(false); + setNotif({ show: true, icon: "lucide--file-check", text: "Record created" }); navigate(`/${res.data.uri}`); }; @@ -119,6 +121,7 @@ export const RecordEditor = (props: { create: boolean; record?: any; refetch?: a } } setOpenDialog(false); + setNotif({ show: true, icon: "lucide--file-check", text: "Record edited" }); props.refetch(); } catch (err: any) { setNotice(err.message); diff --git a/src/layout.tsx b/src/layout.tsx index 8006271..3c7e50c 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -1,4 +1,4 @@ -import { createEffect, ErrorBoundary, Show, Suspense } from "solid-js"; +import { createEffect, createSignal, ErrorBoundary, Show, Suspense } from "solid-js"; import { A, RouteSectionProps, useLocation, useNavigate, useParams } from "@solidjs/router"; import { agent } from "./components/login.jsx"; import { RecordEditor } from "./components/create.jsx"; @@ -10,12 +10,18 @@ import { resolveHandle } from "./utils/api.js"; import { Meta, MetaProvider } from "@solidjs/meta"; import { Settings } from "./components/settings.jsx"; import { Handle } from "@atcute/lexicons"; -import { copyNotice } from "./utils/copy.js"; + +export const [notif, setNotif] = createSignal<{ + show: boolean; + icon?: string; + text?: string; +}>({ show: false }); const Layout = (props: RouteSectionProps) => { const params = useParams(); const location = useLocation(); const navigate = useNavigate(); + let timeout: number; createEffect(async () => { if (params.repo && !params.repo.startsWith("did:")) { @@ -24,6 +30,13 @@ const Layout = (props: RouteSectionProps) => { } }); + createEffect(() => { + if (notif().show) { + clearTimeout(timeout); + timeout = setTimeout(() => setNotif({ show: false }), 3000); + } + }); + return (
@@ -80,10 +93,10 @@ const Layout = (props: RouteSectionProps) => {
- +
- - Copied to clipboard + + {notif().text}
diff --git a/src/utils/copy.ts b/src/utils/copy.ts index cf8b97c..fbdd78e 100644 --- a/src/utils/copy.ts +++ b/src/utils/copy.ts @@ -1,12 +1,6 @@ -import { createSignal } from "solid-js"; - -export const [copyNotice, setCopyNotice] = createSignal(false); - -let timeout: number; +import { setNotif } from "../layout"; export const addToClipboard = (text: string) => { navigator.clipboard.writeText(text); - setCopyNotice(true); - clearTimeout(timeout); - timeout = setTimeout(() => setCopyNotice(false), 3000); + setNotif({ show: true, icon: "lucide--clipboard-check", text: "Copied to clipboard" }); }; diff --git a/src/views/collection.tsx b/src/views/collection.tsx index 2b82f8e..fe039a7 100644 --- a/src/views/collection.tsx +++ b/src/views/collection.tsx @@ -12,6 +12,7 @@ import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons"; import { ComAtprotoRepoApplyWrites, ComAtprotoRepoGetRecord } from "@atcute/atproto"; import { TextInput } from "../components/text-input.jsx"; import { Button } from "../components/button.jsx"; +import { setNotif } from "../layout.jsx"; interface AtprotoRecord { rkey: string; @@ -106,15 +107,14 @@ const CollectionView = () => { const [response, { refetch }] = createResource(fetchRecords); const deleteRecords = async () => { - const writes = records - .filter((record) => record.toDelete) - .map((record): $type.enforce => { - return { - $type: "com.atproto.repo.applyWrites#delete", - collection: params.collection as `${string}.${string}.${string}`, - rkey: record.rkey, - }; - }); + const recsToDel = records.filter((record) => record.toDelete); + const writes = recsToDel.map((record): $type.enforce => { + return { + $type: "com.atproto.repo.applyWrites#delete", + collection: params.collection as `${string}.${string}.${string}`, + rkey: record.rkey, + }; + }); const BATCHSIZE = 200; rpc = new Client({ handler: agent()! }); @@ -126,6 +126,7 @@ const CollectionView = () => { }, }); } + setNotif({ show: true, icon: "lucide--trash-2", text: `${recsToDel.length} records deleted` }); setBatchDelete(false); setRecords([]); setCursor(undefined); diff --git a/src/views/record.tsx b/src/views/record.tsx index d6cb1e7..51470da 100644 --- a/src/views/record.tsx +++ b/src/views/record.tsx @@ -19,6 +19,7 @@ import { addToClipboard } from "../utils/copy.js"; import Tooltip from "../components/tooltip.jsx"; import { Modal } from "../components/modal.jsx"; import { Button } from "../components/button.jsx"; +import { setNotif } from "../layout.jsx"; export const RecordView = () => { const navigate = useNavigate(); @@ -98,6 +99,7 @@ export const RecordView = () => { rkey: params.rkey, }, }); + setNotif({ show: true, icon: "lucide--trash-2", text: "Record deleted" }); navigate(`/at://${params.repo}/${params.collection}`); }; -- 2.51.2