first commit

frontend/src/components/dashboard/TemplatesFlyout.tsx

@@ -0,0 +1,108 @@
+import { useNavigate } from 'react-router-dom'
+import { X } from 'lucide-react'
+import { shedTemplates } from '../../data/createData'
+import {
+  createDocument,
+  getDefaultShedContent,
+  getDefaultTitle,
+} from '../../lib/documents'
+import { getStoredUser } from '../../lib/api'
+
+interface TemplatesFlyoutProps {
+  sidebarCollapsed: boolean
+  onClose: () => void
+}
+
+const siloStarters = [
+  { id: 'blank', label: 'Blank page', description: 'Empty Silo for your own content', html: '' },
+  {
+    id: 'meeting',
+    label: 'Meeting notes',
+    description: 'Silo starter for meetings',
+    html: '<h2>Meeting notes</h2><p>Date:</p><ul><li>Attendees</li><li>Agenda</li><li>Actions</li></ul>',
+  },
+  {
+    id: 'plan',
+    label: 'Project plan',
+    description: 'Silo starter for a project plan',
+    html: '<h2>Project plan</h2><p>Goals</p><ul><li>Milestone 1</li><li>Milestone 2</li></ul>',
+  },
+]
+
+export default function TemplatesFlyout({ sidebarCollapsed, onClose }: TemplatesFlyoutProps) {
+  const navigate = useNavigate()
+  const author = getStoredUser()?.full_name ?? 'You'
+
+  async function createShed(templateId: (typeof shedTemplates)[number]['id']) {
+    if (templateId === 'templates') return
+    const doc = await createDocument(
+      'shed',
+      getDefaultTitle('shed', templateId),
+      getDefaultShedContent(templateId),
+      templateId,
+      author,
+    )
+    onClose()
+    navigate(`/workspace/shed/${doc.id}`)
+  }
+
+  async function createSilo(html: string, label: string) {
+    const doc = await createDocument(
+      'silo',
+      `${label} — ${new Date().toLocaleDateString()}`,
+      { body: '', bodyHtml: html, status: 'draft' },
+      undefined,
+      author,
+    )
+    onClose()
+    navigate(`/workspace/silo/${doc.id}`)
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 top-12 z-40 bg-black/10" onClick={onClose} />
+      <aside
+        className={`fixed top-12 z-50 flex h-[calc(100vh-3rem)] w-80 flex-col border-r border-silos-cream-dark bg-white shadow-xl sm:w-96 ${
+          sidebarCollapsed ? 'left-14' : 'left-60'
+        }`}
+      >
+        <div className="flex items-center justify-between border-b border-silos-cream-dark px-4 py-3">
+          <h2 className="text-lg font-semibold text-silos-text">Templates</h2>
+          <button type="button" onClick={onClose} className="rounded-lg p-1.5 hover:bg-silos-cream">
+            <X className="h-4 w-4 text-silos-muted" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-3">
+          <p className="px-1 pb-2 text-xs font-semibold uppercase text-silos-muted">Shed — Live docs</p>
+          {shedTemplates.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              disabled={!t.available}
+              onClick={() => void createShed(t.id)}
+              className="mb-1 flex w-full items-start gap-3 rounded-lg px-3 py-3 text-left hover:bg-silos-cream disabled:opacity-50"
+            >
+              <span className="text-lg">{t.emoji}</span>
+              <div>
+                <p className="text-sm font-medium text-silos-text">{t.label}</p>
+                <p className="text-xs text-silos-muted">{t.description}</p>
+              </div>
+            </button>
+          ))}
+          <p className="mt-4 px-1 pb-2 text-xs font-semibold uppercase text-silos-muted">Silo — Pages</p>
+          {siloStarters.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => void createSilo(t.html, t.label)}
+              className="mb-1 flex w-full flex-col rounded-lg px-3 py-3 text-left hover:bg-silos-cream"
+            >
+              <p className="text-sm font-medium text-silos-text">{t.label}</p>
+              <p className="text-xs text-silos-muted">{t.description}</p>
+            </button>
+          ))}
+        </div>
+      </aside>
+    </>
+  )
+}