feat: Add word count display to editor toolbar

apps/desktop/src/lib/components/shared/editor/editor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { saveNote } from '@/api/notes';
 	import { SHORTCUTS } from '@/constants';
-	import { activeFile, collectionSettings, editor } from '@/store';
+	import { activeFile, collectionSettings, editor, wordCount } from '@/store';
 	import { Editor } from '@tiptap/core';
 	import CharacterCount from '@tiptap/extension-character-count';
 	import Document from '@tiptap/extension-document';
@@ -68,6 +68,14 @@
 				// force re-render so `editor.isActive` works as expected
 				tiptapEditor = tiptapEditor;
 				editor.set(tiptapEditor);
+
+				// Calculate word count
+				const text = tiptapEditor.getText();
+				const words = text
+					.trim()
+					.split(/\s+/)
+					.filter((word) => word.length > 0);
+				wordCount.set(words.length);
 			},
 			onUpdate: async () => {
 				// If timeout before 500ms, clear it

apps/desktop/src/lib/components/shared/editor/toolbar.svelte

@@ -12,7 +12,8 @@
 		editorSearchActive,
 		isNoteDetailSidebarOpen,
 		isPageSidebarOpen,
-		noteHistory
+		noteHistory,
+		wordCount
 	} from '@/store';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
@@ -166,6 +167,12 @@
 				</Button>
 			{/if}
 		</p>
+		{#if $wordCount > 0}
+			<div class="flex items-center gap-1 ml-2 text-muted-foreground">
+				<Icon name="layer" class="w-3.5 h-3.5" />
+				<span class="text-[13px]">{$wordCount} {$wordCount === 1 ? 'word' : 'words'}</span>
+			</div>
+		{/if}
 	</div>
 	<div class="flex gap-1.5 w-fit">
 		<Tooltip

apps/desktop/src/lib/store.ts

@@ -5,6 +5,7 @@ import type { AppSettingsParams, CollectionSettingsParams, SettingsStateParams }
 
 const editor = createEditorStore();
 const platform = writable<'darwin' | 'linux' | 'windows'>();
+const wordCount = writable<number>(0);
 
 const activeFile = writable<string | null>(null);
 const noteHistory = writable<string[]>([]);
@@ -51,5 +52,6 @@ export {
 	pageSidebarWidth,
 	resizingNoteDetailSidebar,
 	resizingPageSidebar,
-	tooltipsOpen
+	tooltipsOpen,
+	wordCount
 };

apps/desktop/src/lib/utils.ts

@@ -7,7 +7,7 @@ import { cubicOut } from 'svelte/easing';
 import { get } from 'svelte/store';
 import type { TransitionConfig } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
-import { appTheme, editor, platform } from './store';
+import { appTheme, editor, platform, wordCount } from './store';
 import type { ShortcutParams } from './types';
 
 export function cn(...inputs: ClassValue[]) {
@@ -93,6 +93,14 @@ export function setEditorContent(content: string) {
 	});
 	$editor.view.updateState(newEditorState);
 
+	// Update word count
+	const text = $editor.getText();
+	const words = text
+		.trim()
+		.split(/\s+/)
+		.filter((word) => word.length > 0);
+	wordCount.set(words.length);
+
 	// Focus first line
 	$editor.chain().focus().run();
 }

apps/web/src/lib/components/shared/editor/editor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { Editor } from '@tiptap/core';
-	import { editor, activeFile, collectionSettings } from '@/store';
+	import { editor, activeFile, collectionSettings, wordCount } from '@/store';
 	import StarterKit from '@tiptap/starter-kit';
 	import Document from '@tiptap/extension-document';
 	import { Typography } from '@tiptap/extension-typography';
@@ -68,6 +68,14 @@
 				// force re-render so `editor.isActive` works as expected
 				tiptapEditor = tiptapEditor;
 				editor.set(tiptapEditor);
+
+				// Calculate word count
+				const text = tiptapEditor.getText();
+				const words = text
+					.trim()
+					.split(/\s+/)
+					.filter((word) => word.length > 0);
+				wordCount.set(words.length);
 			},
 			onUpdate: async () => {
 				// If timeout before 500ms, clear it

apps/web/src/lib/components/shared/editor/toolbar.svelte

@@ -12,7 +12,8 @@
 		editorSearchActive,
 		isNoteDetailSidebarOpen,
 		isPageSidebarOpen,
-		noteHistory
+		noteHistory,
+		wordCount
 	} from '@/store';
 	import Button from '@haptic/ui/components/button/button.svelte';
 	import { cn } from '@haptic/ui/lib/utils';
@@ -165,6 +166,14 @@
 					{$activeFile?.replace($collection, '').split('/')?.slice(-1)[0] ?? ''}
 				</Button>
 			{/if}
+			{#if $wordCount > 0}
+				<div class="flex items-center gap-1 ml-2">
+					<Icon name="layer" class="w-3.5 h-3.5" />
+					<span class="text-[13px] font-normal"
+						>{$wordCount} {$wordCount === 1 ? 'word' : 'words'}</span
+					>
+				</div>
+			{/if}
 		</p>
 	</div>
 	<div class="flex gap-1.5">

apps/web/src/lib/store.ts

@@ -15,6 +15,7 @@ const noteHistory = writable<string[]>([]);
 const editorMode = writable<'edit' | 'view'>('edit');
 const editorSearchValue = writable<string>('');
 const editorSearchActive = writable<boolean>(false);
+const wordCount = writable<number>(0);
 
 const collection = writable<string>();
 const collectionEntries = writable<FileEntry[]>([]);
@@ -54,5 +55,6 @@ export {
 	pageSidebarWidth,
 	resizingNoteDetailSidebar,
 	resizingPageSidebar,
-	tooltipsOpen
+	tooltipsOpen,
+	wordCount
 };

apps/web/src/lib/utils.ts

@@ -8,7 +8,7 @@ import { get, readable } from 'svelte/store';
 import type { TransitionConfig } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 import { pgClient } from './database/client';
-import { collection, editor } from './store';
+import { collection, editor, wordCount } from './store';
 import type { FileEntry, SearchResultParams, ShortcutParams } from './types';
 
 export function cn(...inputs: ClassValue[]) {
@@ -94,6 +94,14 @@ export function setEditorContent(content: string) {
 	});
 	$editor.view.updateState(newEditorState);
 
+	// Update word count
+	const text = $editor.getText();
+	const words = text
+		.trim()
+		.split(/\s+/)
+		.filter((word) => word.length > 0);
+	wordCount.set(words.length);
+
 	// Focus first line
 	$editor.chain().focus().run();
 }