fix: show folders and notes in one list

src/api/types.ts

@@ -1,4 +1,5 @@
 import type { RxCollection, RxDatabase, RxDocument } from 'rxdb';
+import type { QueryConstructor } from 'rxdb-hooks';
 
 export type NoteDocType = {
   date_created: string,
@@ -11,6 +12,7 @@ export type NoteDocType = {
 
 export type NoteDocument = RxDocument<NoteDocType>;
 export type NoteCollection = RxCollection<NoteDocType>;
+export type NoteQuery = QueryConstructor<NoteDocType>;
 
 export type MyDatabaseCollections = {
   notes: NoteCollection,

src/components/FolderList/FolderListItem.tsx

@@ -2,12 +2,11 @@ import { Disclosure } from '@headlessui/react';
 import { ChevronUpIcon } from '@heroicons/react/24/outline';
 import { useAtomValue } from 'jotai';
 import { useCallback } from 'react';
-import { useRxData, type QueryConstructor } from 'rxdb-hooks';
+import { useRxData } from 'rxdb-hooks';
 
-import { type NoteDocType } from '@/api/types';
+import type { NoteDocType, NoteQuery } from '@/api/types';
 import { Button } from '@/components/Button';
-// import { FolderContextMenu } from './FolderContextMenu';
-import { NotesList } from '@/components/NotesList';
+import { NotesList } from '@/components/NotesList'; // eslint-disable-line import/no-cycle
 import { notesSearchAtom } from '@/context/notesSearch';
 import { notesSortAtom, notesSortOptions } from '@/context/notesSort';
 import { classNames } from '@/utils/classNames';
@@ -18,7 +17,7 @@ export function FolderListItem({
 }: FolderListItemProps) {
   const search = useAtomValue(notesSearchAtom);
   const sort = useAtomValue(notesSortAtom);
-  const notesQuery: QueryConstructor<NoteDocType> = useCallback(
+  const notesQuery: NoteQuery = useCallback(
     (collection) => collection.find({
       selector: {
         folder: {
@@ -34,6 +33,7 @@ export function FolderListItem({
   );
 
   const { result: notes, isFetching } = useRxData<NoteDocType>('notes', notesQuery);
+
   return (
     <li
       key={folder}
@@ -57,13 +57,10 @@ export function FolderListItem({
             >
               {folder}
             </Disclosure.Button>
-            <Disclosure.Panel
-              className="w-full pl-8"
-            >
+            <Disclosure.Panel className="w-full pl-8 my-1">
               <NotesList
                 notes={notes}
                 isFetching={isFetching}
-                padding={false}
               />
             </Disclosure.Panel>
           </>

src/components/FolderList/types.ts

@@ -1,8 +1,3 @@
-// import type { RxDocument } from 'rxdb';
-
-// import type { NoteDocType } from '@/api/types';
-
 export type FolderListItemProps = {
   folder: string,
-  // folderNotes: RxDocument<NoteDocType>[],
 };

src/components/NotesList/index.tsx

@@ -1,20 +1,27 @@
 import { useAtomValue } from 'jotai';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { ViewportList } from 'react-viewport-list';
 
+import { FolderListItem } from '@/components/FolderList/FolderListItem';
 import { foldersAtom } from '@/context/folders';
 import { classNames } from '@/utils/classNames';
 import { NotesListItem } from './NotesListItem';
 import { NotesListProps } from './types';
 
 export function NotesList({
-  notes,
+  includeFolders,
   isFetching,
-  padding = false,
+  notes,
+  padding,
 }: NotesListProps) {
   const ref = useRef<HTMLUListElement | null>(null);
   const folders = useAtomValue(foldersAtom);
 
+  const items = useMemo(() => [
+    ...(includeFolders ? folders : []),
+    ...notes.filter((note) => (includeFolders ? !note.folder : true)),
+  ], [folders, includeFolders, notes]);
+
   return (
     <ul
       role="list"
@@ -32,9 +39,18 @@ export function NotesList({
       )}
       <ViewportList
         viewportRef={ref}
-        items={notes}
+        items={items}
       >
-        {(note) => <NotesListItem key={note.id} note={note} />}
+        {(note) => {
+          if (typeof note === 'string') {
+            return (
+              <FolderListItem key={note} folder={note} />
+            );
+          }
+          return (
+            <NotesListItem key={note.id} note={note} />
+          );
+        }}
       </ViewportList>
     </ul>
   );

src/components/NotesList/types.ts

@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
-import type { RxDocument } from 'rxdb';
 
-import type { NoteDocType, NoteDocument } from '@/api/types';
+import type { NoteDocument } from '@/api/types';
 
 export type NotesProps = {
   note: NoteDocument,
 };
 export type NotesListProps = {
-  notes?: RxDocument<NoteDocType>[],
+  includeFolders?: boolean,
   isFetching: boolean,
+  notes: NoteDocument[],
   padding?: boolean,
 };
 export type NotesContextMenuItemProps = {

src/components/Sidebar/Content.tsx

@@ -1,31 +1,21 @@
-import { useAtomValue } from 'jotai';
-import { useCallback } from 'react';
-import { useRxData, type QueryConstructor } from 'rxdb-hooks';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect } from 'react';
+import { useRxData } from 'rxdb-hooks';
 
-import type { NoteDocType } from '@/api/types';
+import type { NoteDocType, NoteQuery } from '@/api/types';
 import { Card } from '@/components/Card';
-import { FolderList } from '@/components/FolderList';
 import { NotesList } from '@/components/NotesList';
+import { foldersAtom } from '@/context/folders';
 import { notesSearchAtom } from '@/context/notesSearch';
 import { notesSortAtom, notesSortOptions } from '@/context/notesSort';
 
 export function Content() {
   const search = useAtomValue(notesSearchAtom);
   const sort = useAtomValue(notesSortAtom);
-  const notesQuery: QueryConstructor<NoteDocType> = useCallback(
+  const setFolders = useSetAtom(foldersAtom);
+  const notesQuery: NoteQuery = useCallback(
     (collection) => collection.find({
       selector: {
-        $or: [
-          {
-            folder: { $exists: false },
-          },
-          {
-            folder: { $eq: '' },
-          },
-          {
-            folder: { $eq: null },
-          },
-        ],
         text: {
           $regex: RegExp(search, 'i'),
         },
@@ -38,16 +28,24 @@ export function Content() {
   const { result: notes, isFetching } = useRxData<NoteDocType>('notes', notesQuery);
   // console.log(notes.map((folder) => folder.toJSON()));
 
+  useEffect(() => {
+    const allFolders = notes.map((note) => note.folder ?? '').filter(Boolean);
+    const newFolders = [...new Set(allFolders)].sort();
+    // console.log(newFolders);
+    setFolders(newFolders);
+  }, [notes, setFolders]);
+
   return (
     <Card
       as="nav"
-      className="flex-1 h-full overflow-hidden p-2"
+      className="flex-1 h-full overflow-hidden"
       aria-label="Sidebar"
     >
-      <FolderList />
       <NotesList
-        notes={notes}
+        includeFolders
         isFetching={isFetching}
+        notes={notes}
+        padding
       />
     </Card>
   );

src/routes/Note.tsx

@@ -8,13 +8,13 @@ import {
 import {
   StarIcon as StarSolidIcon,
 } from '@heroicons/react/24/solid';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRxData } from 'rxdb-hooks';
 
 import { deleteNote, favouriteNote, updateNote } from '@/api/notes';
-import type { NoteDocType } from '@/api/types';
+import type { NoteDocType, NoteQuery } from '@/api/types';
 import { Button } from '@/components/Button';
 import { Markdown } from '@/components/Markdown';
 import { ModalConfirm } from '@/components/ModalConfirm';
@@ -30,10 +30,11 @@ export function Note() {
   const [showMoreInformation, setShowMoreInformation] = useState(false);
   const [showDeleteNoteModal, setShowDeleteNoteModal] = useState(false);
   const [text, setText] = useState('');
-  const { result: [note] } = useRxData<NoteDocType>(
-    'notes',
+  const notesQuery: NoteQuery = useCallback(
     (collection) => collection.findOne(id),
+    [id],
   );
+  const { result: [note] } = useRxData<NoteDocType>('notes', notesQuery);
 
   const handleDeleteNote = () => {
     setShowDeleteNoteModal(false);