Implemented canvas persistance

Author: sheshbabu

commons/components/Icon.jsx

@@ -654,4 +654,13 @@ export function StickyNoteIcon() {
       <path d="M15 3v4a2 2 0 0 0 2 2h4" />
     </svg>
   );
-}
+}
+
+export function CopyIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-copy">
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}

commons/components/Sidebar.jsx

@@ -62,7 +62,7 @@ export default function Sidebar({ isOpen, onSidebarClose }) {
             <NotesIcon />
             Notes
           </Link>
-          <Link className="sidebar-button canvas" to="/canvas">
+          <Link className="sidebar-button canvas" activeClassName="is-active" to="/canvases/">
             <BoardIcon />
             Canvas
           </Link>

commons/http/ApiClient.js

@@ -1,9 +1,10 @@
 import { showToast } from "../components/Toast.jsx";
 
-async function request(method, url, payload) {
+async function request(method, url, payload, opts) {
   const options = {
     method: method,
-    headers: {}
+    headers: {},
+    ...opts,
   };
 
   if (payload instanceof FormData) {
@@ -319,6 +320,28 @@ async function deleteToken(tokenId) {
   return await request('DELETE', `/api/mcp/tokens/${tokenId}/`);
 }
 
+// Canvases
+
+async function getCanvases() {
+  return await request('GET', '/api/canvases/');
+}
+
+async function getCanvasById(canvasId) {
+  return await request('GET', `/api/canvases/${canvasId}/`);
+}
+
+async function createCanvas(canvas) {
+  return await request('POST', '/api/canvases/', canvas);
+}
+
+async function updateCanvas(canvasId, canvas, opts) {
+  return await request('PUT', `/api/canvases/${canvasId}/`, canvas, opts);
+}
+
+async function deleteCanvas(canvasId) {
+  return await request('DELETE', `/api/canvases/${canvasId}/`);
+}
+
 export default {
   request,
   checkUser,
@@ -362,5 +385,10 @@ export default {
   incrementTemplateUsage,
   getTokens,
   createToken,
-  deleteToken
-};
+  deleteToken,
+  getCanvases,
+  getCanvasById,
+  createCanvas,
+  updateCanvas,
+  deleteCanvas
+};

features/canvas/CanvasDeleteModal.css

@@ -0,0 +1,3 @@
+.canvas-delete-modal {
+  width: 400px;
+}

features/canvas/CanvasDeleteModal.jsx

@@ -0,0 +1,21 @@
+import { h } from "../../assets/preact.esm.js"
+import { ModalBackdrop, ModalContainer, ModalHeader, ModalContent, ModalFooter } from "../../commons/components/Modal.jsx";
+import Button from "../../commons/components/Button.jsx";
+import "./CanvasDeleteModal.css";
+
+export default function CanvasDeleteModal({ onDeleteClick, onCloseClick }) {
+  return (
+    <ModalBackdrop onClose={onCloseClick}>
+      <ModalContainer className="canvas-delete-modal">
+        <ModalHeader title="Delete Canvas" onClose={onCloseClick} />
+        <ModalContent>
+          <p className="modal-description">Are you sure you want to <b>permanently delete</b> this canvas?</p>
+        </ModalContent>
+        <ModalFooter isRightAligned>
+          <Button onClick={onCloseClick}>Cancel</Button>
+          <Button variant="danger" onClick={onDeleteClick}>Delete</Button>
+        </ModalFooter>
+      </ModalContainer>
+    </ModalBackdrop>
+  );
+}

features/canvas/CanvasPage.css

@@ -10,7 +10,7 @@
     flex: 1;
     position: relative;
     overflow: hidden;
-    background: var(--background-color);
+    background: var(--bg-primary);
   }
 
   .canvas-loading {
@@ -19,6 +19,6 @@
     justify-content: center;
     height: 100%;
     font-size: 1.125rem;
-    color: var(--text-muted);
+    color: var(--text-secondary);
   }
-}
+}