fix: resolve build errors and implement VSCode-style status bar

batalabs · batalabs · commit 82e3ebb8ff86 · 2025-09-05T07:11:40.000-04:00
- Fix JSX syntax error by wrapping return statement in React Fragment
  - Replace non-existent setImage() commands with insertContent() for image insertion
  - Simplify ReactNodeViewRenderer component props to resolve type conflicts
  - Remove unused addCommands method causing return type issues
  - Fix unused parameter warnings by prefixing with underscore
  - Add 'starred' option to SortOption type definition
  - Implement VSCode-style status bar with word/character counts and save status
  - Move word counts to left side of status bar for better UX
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/src/components/editor/extensions/ImageUpload.tsx b/src/components/editor/extensions/ImageUpload.tsx
@@ -35,7 +35,10 @@ export function ImageUpload({ editor }: ImageUploadProps) {
             editor
               .chain()
               .focus()
-              .setImage({ src: result })
+              .insertContent({
+                type: 'image',
+                attrs: { src: result }
+              })
               .run();
           }
         };
diff --git a/src/components/editor/extensions/ResizableImage.tsx b/src/components/editor/extensions/ResizableImage.tsx
@@ -1,10 +1,12 @@
 import { Node, mergeAttributes } from '@tiptap/core';
-import { ReactNodeViewRenderer, NodeViewProps } from '@tiptap/react';
+import { ReactNodeViewRenderer } from '@tiptap/react';
 import { NodeViewWrapper } from '@tiptap/react';
 import { useState, useRef, useEffect } from 'react';
 import { X, Maximize2 } from 'lucide-react';
 
-const ImageComponent = ({ node, deleteNode, updateAttributes }: NodeViewProps) => {
+
+const ImageComponent = (props: any) => {
+  const { node, deleteNode, updateAttributes } = props;
   const [showControls, setShowControls] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
   const imageRef = useRef<HTMLImageElement>(null);
@@ -185,15 +187,4 @@ export const ResizableImage = Node.create({
   addNodeView() {
     return ReactNodeViewRenderer(ImageComponent);
   },
-
-  addCommands() {
-    return {
-      setImage: (options: { src: string; alt?: string; title?: string }) => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options,
-        });
-      },
-    };
-  },
 });
diff --git a/src/components/editor/extensions/SlashCommands.tsx b/src/components/editor/extensions/SlashCommands.tsx
@@ -276,7 +276,10 @@ const commands: CommandItem[] = [
             editor
               .chain()
               .focus()
-              .setImage({ src: result })
+              .insertContent({
+                type: 'image',
+                attrs: { src: result }
+              })
               .run();
           }
         };
diff --git a/src/components/editor/extensions/TableOfContents.tsx b/src/components/editor/extensions/TableOfContents.tsx
@@ -1,6 +1,7 @@
 import { Node, mergeAttributes } from '@tiptap/core';
-import { ReactNodeViewRenderer, NodeViewProps } from '@tiptap/react';
+import { ReactNodeViewRenderer } from '@tiptap/react';
 import { NodeViewWrapper } from '@tiptap/react';
+import type { Editor } from '@tiptap/react';
 import { useEffect, useState, useCallback } from 'react';
 import { ChevronRight, ChevronDown, FileText, X } from 'lucide-react';
 
@@ -10,7 +11,12 @@ interface Heading {
   id: string;
 }
 
-const TableOfContentsComponent = ({ editor, deleteNode }: NodeViewProps) => {
+interface TableOfContentsComponentProps {
+  editor: Editor;
+  deleteNode: () => void;
+}
+
+const TableOfContentsComponent = ({ editor, deleteNode }: TableOfContentsComponentProps) => {
   const [headings, setHeadings] = useState<Heading[]>([]);
   const [expanded, setExpanded] = useState(true);
 
diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx
@@ -57,6 +57,8 @@ export default function Index({
   const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'error'>('saved');
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastContentRef = useRef<string>('');
+  const [wordCount, setWordCount] = useState(0);
+  const [charCount, setCharCount] = useState(0);
 
   const editor = useEditor(
     {
@@ -183,7 +185,7 @@ export default function Index({
 
           return false;
         },
-        handleDrop: (view, event, slice, moved) => {
+        handleDrop: (view, event, _slice, moved) => {
           if (moved) return false;
           
           const files = event.dataTransfer?.files;
@@ -227,6 +229,14 @@ export default function Index({
       },
       onUpdate: ({ editor }) => {
         if (!note) return;
+        
+        // Update word and character counts
+        const text = editor.state.doc.textContent;
+        const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+        const chars = text.length;
+        setWordCount(words);
+        setCharCount(chars);
+        
         const html = editor.getHTML();
         if (html !== note.content && html !== lastContentRef.current) {
           lastContentRef.current = html;
@@ -262,6 +272,13 @@ export default function Index({
       editor.commands.setContent(note.content || '', false);
       lastContentRef.current = note.content || '';
       
+      // Update word and character counts
+      const text = editor.state.doc.textContent;
+      const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+      const chars = text.length;
+      setWordCount(words);
+      setCharCount(chars);
+      
       try {
         const docSize = editor.state.doc.content.size;
         if (from <= docSize && to <= docSize) {
@@ -446,7 +463,8 @@ export default function Index({
   const currentFolder = getCurrentFolder();
 
   return (
-    <div className="flex h-full flex-1 flex-col">
+    <>
+      <div className="flex h-full flex-1 flex-col">
       <div className="border-border flex-shrink-0 border-b p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex flex-1 items-center gap-3">
@@ -460,23 +478,6 @@ export default function Index({
           </div>
 
           <div className="flex items-center gap-2">
-            {/* Save status indicator */}
-            <div className="flex items-center mr-2" title={
-              saveStatus === 'saving' ? 'Saving' : 
-              saveStatus === 'saved' ? 'Saved' : 
-              'Error saving'
-            }>
-              {saveStatus === 'saving' && (
-                <div className="h-3 w-3 rounded-full bg-orange-500 animate-pulse" />
-              )}
-              {saveStatus === 'saved' && (
-                <div className="h-3 w-3 rounded-full bg-green-500" />
-              )}
-              {saveStatus === 'error' && (
-                <div className="h-3 w-3 rounded-full bg-red-500" />
-              )}
-            </div>
-            
             <div className="relative">
               <Button
                 variant="ghost"
@@ -610,18 +611,62 @@ export default function Index({
         />
       </div>
 
-      <style dangerouslySetInnerHTML={{ __html: editorStyles }} />
+      {/* Status Bar - VSCode Style */}
+      <div className="border-t bg-primary/5 dark:bg-primary/10 px-3 py-0.5 flex items-center justify-between text-[11px] font-mono">
+        {/* Left side - Word and character count */}
+        <div className="flex items-center gap-3">
+          {(wordCount > 0 || charCount > 0) && (
+            <>
+              <span className="hover:bg-muted px-1.5 py-0.5 rounded cursor-default">
+                {wordCount} {wordCount === 1 ? 'word' : 'words'}
+              </span>
+              <span className="hover:bg-muted px-1.5 py-0.5 rounded cursor-default">
+                {charCount} {charCount === 1 ? 'character' : 'characters'}
+              </span>
+            </>
+          )}
+        </div>
+        
+        {/* Right side - Save status */}
+        <div className="flex items-center gap-1 px-1.5 py-0.5 hover:bg-muted rounded cursor-default" title={
+          saveStatus === 'saving' ? 'Saving changes...' : 
+          saveStatus === 'saved' ? 'All changes saved' : 
+          'Error saving changes'
+        }>
+          {saveStatus === 'saving' && (
+            <>
+              <div className="h-1.5 w-1.5 rounded-full bg-orange-500 animate-pulse" />
+              <span>Saving</span>
+            </>
+          )}
+          {saveStatus === 'saved' && (
+            <>
+              <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
+              <span>Saved</span>
+            </>
+          )}
+          {saveStatus === 'error' && (
+            <>
+              <div className="h-1.5 w-1.5 rounded-full bg-red-500" />
+                <span className="text-red-500">Error</span>
+              </>
+            )}
+          </div>
+        </div>
 
-      {note && (
-        <MoveNoteModal
-          isOpen={isMoveModalOpen}
-          onClose={() => setIsMoveModalOpen(false)}
-          onMove={handleMoveNote}
-          folders={folders || []}
-          currentFolderId={note.folderId}
-          noteTitle={note.title}
-        />
-      )}
-    </div>
+        <style dangerouslySetInnerHTML={{ __html: editorStyles }} />
+
+        {note && (
+          <MoveNoteModal
+            isOpen={isMoveModalOpen}
+            onClose={() => setIsMoveModalOpen(false)}
+            onMove={handleMoveNote}
+            folders={folders || []}
+            currentFolderId={note.folderId}
+            noteTitle={note.title}
+          />
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/components/notes/NotesPanel/index.tsx b/src/components/notes/NotesPanel/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import type { Note, Folder as FolderType, ViewMode } from '@/types/note.ts';
 
-type SortOption = 'updated' | 'created' | 'title';
+type SortOption = 'updated' | 'created' | 'title' | 'starred';
 
 interface SortConfig {
   option: SortOption;
