From 4dd8ce8b170227b8c0cb7b0065f79099c4ad2ed0 Mon Sep 17 00:00:00 2001
From: johannes-hernehult <jhernehult@gmail.com>
Date: Wed, 17 Jun 2026 19:21:59 +0200
Subject: [PATCH] feat(guides): implement guide detail view with delete and
 export

- Render guide title, description, frames, and steps from context
- Add delete and export PDF actions via useGuide hook
- Add print media query to hide header, footer, and buttons
- Extract guide logic into useGuide hook
- Add Guide.css for view-specific styles
---
 src/features/guides/hooks/useGuide.ts | 22 ++++++++++++++++++
 src/features/guides/routes/Guide.css  |  4 ++++
 src/features/guides/routes/Guide.tsx  | 32 +++++++++++++++++++++++++--
 src/styles/App.css                    |  8 +++++++
 4 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/features/guides/hooks/useGuide.ts
 create mode 100644 src/features/guides/routes/Guide.css

diff --git a/src/features/guides/hooks/useGuide.ts b/src/features/guides/hooks/useGuide.ts
new file mode 100644
index 0000000..325760a
--- /dev/null
+++ b/src/features/guides/hooks/useGuide.ts
@@ -0,0 +1,22 @@
+import { useIDB } from "../../../lib/contexts/dbinit.context";
+import { useGuides } from "../../../lib/contexts/guide.context";
+
+export default function useGuide() {
+  const { setGuides } = useGuides();
+  const { db } = useIDB();
+
+  const deleteGuide = (id: string) => {
+    if (!db) return;
+    db.delete("guides", id);
+    setGuides((guides) => guides.filter((guide) => guide.id !== id));
+  };
+
+  const exportGuide = () => {
+    window.print();
+  };
+
+  return {
+    deleteGuide,
+    exportGuide,
+  };
+}
diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css
new file mode 100644
index 0000000..e9905fd
--- /dev/null
+++ b/src/features/guides/routes/Guide.css
@@ -0,0 +1,4 @@
+@media print {
+    .guide {
+    }
+}
diff --git a/src/features/guides/routes/Guide.tsx b/src/features/guides/routes/Guide.tsx
index 3c8e6af..b92c7f0 100644
--- a/src/features/guides/routes/Guide.tsx
+++ b/src/features/guides/routes/Guide.tsx
@@ -1,10 +1,38 @@
 import { useParams } from "react-router";
+import { useGuides } from "../../../lib/contexts/guide.context";
+import useGuide from "../hooks/useGuide";
 
 export default function Guide() {
   const { id } = useParams();
+  const { guides } = useGuides();
+  const { deleteGuide, exportGuide } = useGuide();
+  const guide = guides.find((g) => g.id === id);
+
+  if (!guide) return null;
+
   return (
-    <div>
-      <h1>Guide {id}</h1>
+    <div className="guide">
+      <h1>{guide.title}</h1>
+      <p>{guide.description}</p>
+
+      <div>
+        {guide.frames.map((frame, index) => (
+          <div key={index}>
+            <h2>{frame.title}</h2>
+            <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
+
+            <ol>
+              {frame.steps.map((step, stepIndex) => (
+                <li key={stepIndex}>{step.text}</li>
+              ))}
+            </ol>
+          </div>
+        ))}
+      </div>
+
+      <button onClick={() => deleteGuide(guide.id)}>Delete</button>
+      <button>Edit</button>
+      <button onClick={exportGuide}>Export PDF</button>
     </div>
   );
 }
diff --git a/src/styles/App.css b/src/styles/App.css
index 8715e74..ab718b6 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -85,3 +85,11 @@ textarea {
 :focus-visible {
     border-color: #ff7700 !important;
 }
+
+@media print {
+    header,
+    footer,
+    button {
+        display: none;
+    }
+}