From 00fe6eafcd5e3ee0fe3228078aae3a38bb47fba0 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Mon, 7 Oct 2024 11:41:16 +0200
Subject: [PATCH] feat(app): changelog remove action

---
 apps/app/src/components/Changelog/Delete.tsx | 72 ++++++++++++++++++++
 apps/app/src/main.tsx                        | 24 ++++---
 apps/app/src/routes/changelog/$id.lazy.tsx   | 66 +++++++++++++++++-
 3 files changed, 149 insertions(+), 13 deletions(-)
 create mode 100644 apps/app/src/components/Changelog/Delete.tsx

diff --git a/apps/app/src/components/Changelog/Delete.tsx b/apps/app/src/components/Changelog/Delete.tsx
new file mode 100644
index 0000000..1712daa
--- /dev/null
+++ b/apps/app/src/components/Changelog/Delete.tsx
@@ -0,0 +1,72 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@boring.tools/ui'
+import { useNavigate } from '@tanstack/react-router'
+import { Trash2Icon } from 'lucide-react'
+import { useState } from 'react'
+import { useChangelogRemove } from '../../hooks/useChangelog'
+
+export const ChangelogDelete = ({ id }: { id: string }) => {
+  const remove = useChangelogRemove()
+  const navigate = useNavigate({ from: `/changelog/${id}` })
+  const [isOpen, setIsOpen] = useState(false)
+
+  const removeChangelog = () => {
+    remove.mutate(
+      { id },
+      {
+        onSuccess: () => {
+          setIsOpen(false)
+          navigate({ to: '/changelog' })
+        },
+      },
+    )
+  }
+  return (
+    <Tooltip>
+      <AlertDialog open={isOpen}>
+        <AlertDialogTrigger asChild>
+          <TooltipTrigger asChild>
+            <Button variant={'ghost'} onClick={() => setIsOpen(true)}>
+              <Trash2Icon strokeWidth={1.5} />
+            </Button>
+          </TooltipTrigger>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              changelog and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setIsOpen(false)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction asChild>
+              <Button onClick={removeChangelog} variant={'destructive'}>
+                Remove
+              </Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      <TooltipContent>
+        <p>Remove</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/app/src/main.tsx b/apps/app/src/main.tsx
index f364dbe..d19edb7 100644
--- a/apps/app/src/main.tsx
+++ b/apps/app/src/main.tsx
@@ -1,4 +1,4 @@
-import { ThemeProvider } from '@boring.tools/ui'
+import { ThemeProvider, TooltipProvider } from '@boring.tools/ui'
 import { ClerkProvider } from '@clerk/clerk-react'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { StrictMode } from 'react'
@@ -36,16 +36,18 @@ if (!rootElement.innerHTML) {
     <StrictMode>
       <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
         <ThemeProvider defaultTheme="dark" storageKey="ui-theme">
-          <QueryClientProvider client={queryClient}>
-            {import.meta.env.PROD && (
-              <script
-                defer
-                src="https://umami.hashdot.co/script.js"
-                data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
-              />
-            )}
-            <RouterProvider router={router} />
-          </QueryClientProvider>
+          <TooltipProvider delayDuration={350}>
+            <QueryClientProvider client={queryClient}>
+              {import.meta.env.PROD && (
+                <script
+                  defer
+                  src="https://umami.hashdot.co/script.js"
+                  data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
+                />
+              )}
+              <RouterProvider router={router} />
+            </QueryClientProvider>
+          </TooltipProvider>
         </ThemeProvider>
       </ClerkProvider>
     </StrictMode>,
diff --git a/apps/app/src/routes/changelog/$id.lazy.tsx b/apps/app/src/routes/changelog/$id.lazy.tsx
index 80b9362..d355ce0 100644
--- a/apps/app/src/routes/changelog/$id.lazy.tsx
+++ b/apps/app/src/routes/changelog/$id.lazy.tsx
@@ -1,5 +1,18 @@
-import { Button } from '@boring.tools/ui'
+import {
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@boring.tools/ui'
 import { createLazyFileRoute } from '@tanstack/react-router'
+import {
+  FileStackIcon,
+  Globe2Icon,
+  PencilIcon,
+  TerminalSquareIcon,
+  Trash2Icon,
+} from 'lucide-react'
+import { ChangelogDelete } from '../../components/Changelog/Delete'
 import { useChangelogById } from '../../hooks/useChangelog'
 
 const Component = () => {
@@ -21,7 +34,56 @@ const Component = () => {
     <div className="flex flex-col gap-5">
       {!isPending && data && (
         <div>
-          <h1 className="text-3xl">{data.title}</h1>
+          <div className="flex justify-between items-center">
+            <div className="flex gap-3 items-center">
+              <FileStackIcon
+                strokeWidth={1.5}
+                className="w-10 h-10 text-muted-foreground"
+              />
+              <div>
+                <h1 className="text-3xl">{data.title}</h1>
+
+                <p className="text-muted-foreground mt-2">{data.description}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant={'ghost'}>
+                    <TerminalSquareIcon strokeWidth={1.5} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>CLI</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant={'ghost'}>
+                    <Globe2Icon strokeWidth={1.5} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Public Page</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant={'ghost'}>
+                    <PencilIcon strokeWidth={1.5} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Edit</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <ChangelogDelete id={id} />
+            </div>
+          </div>
         </div>
       )}
     </div>