feat: add document templates for quick note creation

batalabs · batalabs · commit 163100e257da · 2025-09-05T12:18:42.000-04:00
- Add 5 pre-built note templates (Meeting Notes, Project Plan, Daily Notes, Research Notes, Blank)
  - Implement template dropdown in note creation button
  - Update note creation flow to accept template content
diff --git a/src/components/editor/Editor/Toolbar.tsx b/src/components/editor/Editor/Toolbar.tsx
@@ -83,7 +83,7 @@ export function Toolbar({ editor }: ToolbarProps) {
   };
 
   return (
-    <div className="border-border bg-muted flex flex-wrap items-center gap-1 border-b p-2">
+    <div className="border-border bg-muted dark:bg-gray-800 flex flex-wrap items-center gap-1 border-b p-2">
       <Button
         variant="ghost"
         size="sm"
@@ -297,6 +297,7 @@ export function Toolbar({ editor }: ToolbarProps) {
       >
         <Minus className="h-4 w-4" />
       </Button>
+
     </div>
   );
 }
diff --git a/src/components/folders/index.tsx b/src/components/folders/index.tsx
@@ -32,7 +32,7 @@ interface FolderPanelProps {
   archivedCount: number;
   trashedCount: number;
   expandedFolders: Set<string>;
-  onCreateNote: () => void;
+  onCreateNote: (templateContent?: { title: string; content: string }) => void;
   onCreateFolder: (name: string, color: string, parentId?: string) => void;
   onUpdateFolder: (
     folderId: string,
@@ -338,7 +338,7 @@ export default function FolderPanel({
                   }
                   onClick={() => window.open('https://github.com/typelets/typelets-app/issues', '_blank')}
                 />
-                {hasPassword && (
+                {hasPassword ? (
                   <UserButton.Action
                     label="Change Master Password"
                     labelIcon={
@@ -366,6 +366,34 @@ export default function FolderPanel({
                     }
                     onClick={() => setShowChangePassword(true)}
                   />
+                ) : (
+                  <UserButton.Action
+                    label="Setup Master Password"
+                    labelIcon={
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <rect
+                          x="3"
+                          y="11"
+                          width="18"
+                          height="11"
+                          rx="2"
+                          ry="2"
+                        ></rect>
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                      </svg>
+                    }
+                    onClick={() => setShowChangePassword(true)}
+                  />
                 )}
               </UserButton.MenuItems>
             </UserButton>
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
@@ -45,8 +45,8 @@ export default function MainLayout() {
     refetch,
   } = useNotes();
 
-  const handleCreateNote = useCallback(() => {
-    void createNote();
+  const handleCreateNote = useCallback((templateContent?: { title: string; content: string }) => {
+    void createNote(undefined, templateContent);
     if (!filesPanelOpen) setFilesPanelOpen(true);
   }, [createNote, filesPanelOpen]);
 
diff --git a/src/components/notes/NotesPanel/index.tsx b/src/components/notes/NotesPanel/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Plus, PanelLeftClose, PanelLeftOpen, Filter, FilterX } from 'lucide-react';
+import { Plus, PanelLeftClose, PanelLeftOpen, Filter, FilterX, ChevronDown } from 'lucide-react';
 import NotesList from '@/components/notes/NotesPanel/NotesList.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import {
@@ -9,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { NOTE_TEMPLATES } from '@/constants/templates';
 import type { Note, Folder as FolderType, ViewMode } from '@/types/note.ts';
 
 type SortOption = 'updated' | 'created' | 'title' | 'starred';
@@ -33,7 +34,7 @@ interface FilesPanelProps {
   isFolderPanelOpen: boolean;
   onSelectNote: (note: Note) => void;
   onToggleStar: (noteId: string) => void;
-  onCreateNote: () => void;
+  onCreateNote: (templateContent?: { title: string; content: string }) => void;
   onToggleFolderPanel: () => void;
   onEmptyTrash?: () => Promise<void>;
   isMobile?: boolean;
@@ -207,7 +208,7 @@ export default function FilesPanel({
                   style={{ backgroundColor: selectedFolder.color ?? '#6b7280' }}
                 />
               )}
-              <span className="text-xs opacity-80">
+              <span className="text-[11px] opacity-80">
                 {sortedNotes.length} note{sortedNotes.length !== 1 ? 's' : ''}
                 {sortedNotes.length !== notes.length && ` (${notes.length} total)`}
               </span>
@@ -231,7 +232,7 @@ export default function FilesPanel({
                 )}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end" className="w-52" sideOffset={8}>
               <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                 FILTER
               </div>
@@ -290,15 +291,34 @@ export default function FilesPanel({
           </DropdownMenu>
 
           {!isTrashView && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onCreateNote}
-              className={`flex items-center justify-center ${isMobile ? 'h-9 w-9 touch-manipulation p-0' : 'h-6 w-6 p-0'} `}
-              title="Create new note"
-            >
-              <Plus className={isMobile ? 'h-4 w-4' : 'h-3 w-3'} />
-            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className={`flex items-center justify-center gap-1 ${isMobile ? 'h-9 px-3 touch-manipulation' : 'h-6 px-2'}`}
+                  title="Create new note from template"
+                >
+                  <Plus className={isMobile ? 'h-4 w-4' : 'h-3 w-3'} />
+                  {!isMobile && <ChevronDown className="h-2 w-2" />}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-64" sideOffset={8}>
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                  CREATE FROM TEMPLATE
+                </div>
+                {NOTE_TEMPLATES.map((template, index) => (
+                  <DropdownMenuItem
+                    key={template.id}
+                    onClick={() => onCreateNote({ title: template.title, content: template.content })}
+                    className="flex flex-col items-start gap-1 py-2"
+                  >
+                    <div className="font-medium">{template.name}</div>
+                    <div className="text-xs text-muted-foreground">{template.description}</div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
           )}
         </div>
       </div>
diff --git a/src/constants/templates.ts b/src/constants/templates.ts
@@ -0,0 +1,45 @@
+export interface NoteTemplate {
+  id: string;
+  name: string;
+  description: string;
+  title: string;
+  content: string;
+}
+
+export const NOTE_TEMPLATES: NoteTemplate[] = [
+  {
+    id: 'blank',
+    name: 'Blank Note',
+    description: 'Start with a clean slate',
+    title: 'Untitled Note',
+    content: '',
+  },
+  {
+    id: 'meeting-notes',
+    name: 'Meeting Notes',
+    description: 'Structured template for meetings',
+    title: 'Meeting Notes - [Date]',
+    content: `<h1>Meeting: [Title]</h1><p><strong>Date:</strong> ${new Date().toLocaleDateString()}<br><strong>Attendees:</strong></p><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li></ul><h2>Agenda</h2><ol><li><p></p></li><li><p></p></li><li><p></p></li></ol><h2>Discussion</h2><p></p><h2>Action Items</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Task 1 - @person - Due: [date]</p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Task 2 - @person - Due: [date]</p></div></li></ul><h2>Next Steps</h2><p></p>`,
+  },
+  {
+    id: 'project-plan',
+    name: 'Project Plan',
+    description: 'Plan and track project progress',
+    title: 'Project: [Name]',
+    content: `<h1>Project: [Name]</h1><h2>Overview</h2><p>Brief description of the project...</p><h2>Goals &amp; Objectives</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Primary goal 1</p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Primary goal 2</p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Secondary goal 1</p></div></li></ul><h2>Timeline</h2><table><tbody><tr><th><p>Phase</p></th><th><p>Start Date</p></th><th><p>End Date</p></th><th><p>Status</p></th></tr><tr><td><p>Planning</p></td><td><p></p></td><td><p></p></td><td><p>⏳ Planned</p></td></tr><tr><td><p>Development</p></td><td><p></p></td><td><p></p></td><td><p>⏳ Planned</p></td></tr><tr><td><p>Testing</p></td><td><p></p></td><td><p></p></td><td><p>⏳ Planned</p></td></tr><tr><td><p>Launch</p></td><td><p></p></td><td><p></p></td><td><p>⏳ Planned</p></td></tr></tbody></table><h2>Resources</h2><ul><li><p><strong>Budget:</strong></p></li><li><p><strong>Team Members:</strong></p></li><li><p><strong>Tools/Software:</strong></p></li></ul><h2>Risks &amp; Mitigation</h2><ul><li><p><strong>Risk 1:</strong><br><em>Mitigation:</em></p></li><li><p><strong>Risk 2:</strong><br><em>Mitigation:</em></p></li></ul><h2>Next Actions</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Action item 1</p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>Action item 2</p></div></li></ul>`,
+  },
+  {
+    id: 'daily-notes',
+    name: 'Daily Notes',
+    description: 'Daily journal and task tracking',
+    title: `Daily Notes - ${new Date().toLocaleDateString()}`,
+    content: `<h1>${new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</h1><h2>Today's Focus</h2><p><em>What are the 3 most important things to accomplish today?</em></p><ol><li><p></p></li><li><p></p></li><li><p></p></li></ol><h2>Tasks</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li></ul><h2>Notes &amp; Thoughts</h2><p></p><h2>Wins &amp; Progress</h2><ul><li><p></p></li><li><p></p></li></ul><h2>Tomorrow's Priorities</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li></ul>`,
+  },
+  {
+    id: 'research-notes',
+    name: 'Research Notes',
+    description: 'Structured research documentation',
+    title: 'Research: [Topic]',
+    content: `<h1>Research: [Topic]</h1><h2>Research Question</h2><p><em>What am I trying to find out?</em></p><p></p><h2>Sources</h2><ul><li><p></p></li><li><p></p></li><li><p></p></li></ul><h2>Key Findings</h2><h3>Finding 1</h3><p></p><h3>Finding 2</h3><p></p><h3>Finding 3</h3><p></p><h2>Summary &amp; Conclusions</h2><p></p><h2>Next Steps</h2><ul data-type="taskList"><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li><li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p></p></div></li></ul><hr><p><em>Research conducted on: ${new Date().toLocaleDateString()}</em></p>`,
+  },
+];
diff --git a/src/hooks/useNotes.ts b/src/hooks/useNotes.ts
@@ -159,7 +159,7 @@ export function useNotes() {
     });
   }, [notes, searchQuery, currentView, selectedFolder, folders]);
 
-  const createNote = async (folderId?: string) => {
+  const createNote = async (folderId?: string, templateContent?: { title: string; content: string }) => {
     try {
       if (!encryptionReady) {
         throw new Error(
@@ -168,8 +168,8 @@ export function useNotes() {
       }
 
       const apiNote = await api.createNote({
-        title: 'Untitled Note',
-        content: '',
+        title: templateContent?.title || 'Untitled Note',
+        content: templateContent?.content || '',
         folderId: folderId ?? selectedFolder?.id ?? null,
         starred: false,
         tags: [],
diff --git a/src/types/layout.ts b/src/types/layout.ts
@@ -19,7 +19,7 @@ export interface FolderPanelProps {
     folderId: string,
     parentId: string | null
   ) => Promise<void>;
-  onCreateNote: () => void;
+  onCreateNote: (templateContent?: { title: string; content: string }) => void;
   onCreateFolder: (name: string, color: string, parentId?: string) => void;
   onDeleteFolder: (folderId: string) => Promise<void>;
   onReorderFolders: (folderId: string, newIndex: number) => Promise<void>;
@@ -38,7 +38,7 @@ export interface FilesPanelProps {
   isFolderPanelOpen: boolean;
   onSelectNote: (note: Note) => void;
   onToggleStar: (noteId: string) => Promise<void>;
-  onCreateNote: () => void;
+  onCreateNote: (templateContent?: { title: string; content: string }) => void;
   onToggleFolderPanel: () => void;
   onEmptyTrash: () => Promise<void>;
   isMobile?: boolean;
