feat: add note count to folders

src/api/types.ts

@@ -10,6 +10,11 @@ export type NoteDocType = {
   text: string,
 };
 
+export type FolderDocType = {
+  name: string,
+  count: number,
+};
+
 export type NoteDocument = RxDocument<NoteDocType>;
 export type NoteCollection = RxCollection<NoteDocType>;
 export type NoteQuery = QueryConstructor<NoteDocType>;

src/components/FolderList/FolderListItem.tsx

@@ -12,24 +12,29 @@ export function FolderListItem({
 
   return (
     <li
-      key={folder}
+      key={folder.name}
       className="group/folder-context-menu relative flex"
       onContextMenu={(event) => event.preventDefault()}
     >
       <Button
-        onClick={() => setCurrentFolder(folder)}
-        active={folder === currentFolder}
+        onClick={() => setCurrentFolder(folder.name)}
+        active={folder.name === currentFolder}
         Icon={FolderIcon}
+        secondaryAction={(
+          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full text-white bg-dark dark:text-dark text-xs font-medium leading-none">
+            {folder.count <= 99 ? folder.count : '99+'}
+          </span>
+        )}
       >
-        {folder || 'All Notes'}
+        {folder.name || 'All Notes'}
       </Button>
       <Button
         className="hidden group-hover/folder-context-menu:block"
         Icon={PlusIcon}
         iconOnly
         href={{
           pathname: '/note/',
-          search: folder ? `folder=${folder}` : undefined,
+          search: folder.name ? `folder=${folder.name}` : undefined,
         }}
       >
         Create Note in folder

src/components/FolderList/index.tsx

@@ -35,7 +35,7 @@ export function FolderList({
           items={folders}
         >
           {(folder) => (
-            <FolderListItem key={folder} folder={folder} />
+            <FolderListItem key={folder.name} folder={folder} />
           )}
         </ViewportList>
       </ul>

src/components/FolderList/types.ts

@@ -1,12 +1,14 @@
 import type { ReactElement } from 'react';
 
+import type { FolderDocType } from '@/api/types';
+
 export type FolderListProps = {
   children?: ReactElement,
-  folders: string[],
+  folders: FolderDocType[],
   isFetching: boolean,
   padding?: boolean,
 };
 
 export type FolderListItemProps = {
-  folder: string,
+  folder: FolderDocType,
 };

src/components/NotesMoveModal/index.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { moveNote } from '@/api/notes';
 import { Button } from '@/components/Button';
 import { Modal } from '@/components/Modal';
-import { foldersAtom } from '@/context/folders';
+import { folderNamesAtom } from '@/context/folders';
 import { classNames } from '@/utils/classNames';
 import { getTitle } from '@/utils/getTitle';
 import type { NotesMoveModalProps } from './types';
@@ -15,7 +15,7 @@ export function NotesMoveModal({
   setShowMoveNoteModal,
   showMoveNoteModal: note,
 }: NotesMoveModalProps) {
-  const folders = useAtomValue(foldersAtom);
+  const folders = useAtomValue(folderNamesAtom);
   const [selected, setSelected] = useState<string | null>(null);
   const [newFolderName, setNewFolderName] = useState('');
 

src/components/Sidebar/Content.tsx

@@ -37,7 +37,17 @@ export function Content() {
 
   useEffect(() => {
     const allFolders = notes.map((note) => note.folder ?? '').filter(Boolean);
-    const newFolders = [...new Set(['', ...allFolders])].sort();
+    const newFolders = [...new Set(['', ...allFolders])]
+      .sort()
+      .map((folder) => {
+        const numberOfNotesInFolder = allFolders.filter((item) => item === folder).length;
+
+        return {
+          name: folder,
+          count: folder === '' ? notes.length : numberOfNotesInFolder,
+        };
+      });
+
     // console.log(newFolders);
     setFolders(newFolders);
   }, [notes, setFolders]);

src/context/folders.ts

@@ -1,4 +1,7 @@
 import { atom } from 'jotai';
 
-export const foldersAtom = atom<string[]>([]);
+import type { FolderDocType } from '@/api/types';
+
+export const foldersAtom = atom<FolderDocType[]>([]);
+export const folderNamesAtom = atom((get) => get(foldersAtom).map((folder) => folder.name));
 export const currentFolderAtom = atom<string | null>(null);