Add basic Notes UI

components/files/FilesBreadcrumb.tsx

@@ -1,9 +1,12 @@
 interface FilesBreadcrumbProps {
   path: string;
+  isShowingNotes?: boolean;
 }
 
-export default function FilesBreadcrumb({ path }: FilesBreadcrumbProps) {
-  if (path === '/') {
+export default function FilesBreadcrumb({ path, isShowingNotes }: FilesBreadcrumbProps) {
+  const routePath = isShowingNotes ? 'notes' : 'files';
+
+  if (!isShowingNotes && path === '/') {
     return (
       <h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
         All files
@@ -11,17 +14,29 @@ export default function FilesBreadcrumb({ path }: FilesBreadcrumbProps) {
     );
   }
 
+  if (isShowingNotes && path === '/Notes/') {
+    return (
+      <h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
+        All notes
+      </h3>
+    );
+  }
+
   const pathParts = path.slice(1, -1).split('/');
 
+  if (isShowingNotes) {
+    pathParts.shift();
+  }
+
   return (
     <h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
-      <a href={`/files?path=/`}>All files</a>
+      {isShowingNotes ? <a href={`/notes?path=/Notes/`}>All notes</a> : <a href={`/files?path=/`}>All files</a>}
       {pathParts.map((part, index) => {
         if (index === pathParts.length - 1) {
           return (
             <>
               <span class='ml-2 text-xs'>/</span>
-              <span class='ml-2'>{part}</span>
+              <span class='ml-2'>{decodeURIComponent(part)}</span>
             </>
           );
         }
@@ -35,7 +50,7 @@ export default function FilesBreadcrumb({ path }: FilesBreadcrumbProps) {
         return (
           <>
             <span class='ml-2 text-xs'>/</span>
-            <a href={`/files?path=/${fullPathForPart.join('/')}/`} class='ml-2'>{part}</a>
+            <a href={`/${routePath}?path=/${fullPathForPart.join('/')}/`} class='ml-2'>{decodeURIComponent(part)}</a>
           </>
         );
       })}

components/files/ListFiles.tsx

@@ -4,12 +4,13 @@ import { humanFileSize, TRASH_PATH } from '/lib/utils/files.ts';
 interface ListFilesProps {
   directories: Directory[];
   files: DirectoryFile[];
-  onClickOpenRenameDirectory: (parentPath: string, name: string) => void;
-  onClickOpenRenameFile: (parentPath: string, name: string) => void;
-  onClickOpenMoveDirectory: (parentPath: string, name: string) => void;
-  onClickOpenMoveFile: (parentPath: string, name: string) => void;
+  onClickOpenRenameDirectory?: (parentPath: string, name: string) => void;
+  onClickOpenRenameFile?: (parentPath: string, name: string) => void;
+  onClickOpenMoveDirectory?: (parentPath: string, name: string) => void;
+  onClickOpenMoveFile?: (parentPath: string, name: string) => void;
   onClickDeleteDirectory: (parentPath: string, name: string) => Promise<void>;
   onClickDeleteFile: (parentPath: string, name: string) => Promise<void>;
+  isShowingNotes?: boolean;
 }
 
 export default function ListFiles(
@@ -22,6 +23,7 @@ export default function ListFiles(
     onClickOpenMoveFile,
     onClickDeleteDirectory,
     onClickDeleteFile,
+    isShowingNotes,
   }: ListFilesProps,
 ) {
   const dateFormat = new Intl.DateTimeFormat('en-GB', {
@@ -33,6 +35,10 @@ export default function ListFiles(
     minute: '2-digit',
   });
 
+  const routePath = isShowingNotes ? 'notes' : 'files';
+  const itemSingleLabel = isShowingNotes ? 'note' : 'file';
+  const itemPluralLabel = routePath;
+
   return (
     <section class='mx-auto max-w-7xl my-8'>
       <table class='w-full border-collapse bg-gray-900 text-left text-sm text-slate-500 shadow-sm rounded-md'>
@@ -40,7 +46,7 @@ export default function ListFiles(
           <tr class='border-b border-slate-600'>
             <th scope='col' class='px-6 py-4 font-medium text-white'>Name</th>
             <th scope='col' class='px-6 py-4 font-medium text-white w-56'>Last update</th>
-            <th scope='col' class='px-6 py-4 font-medium text-white w-32'>Size</th>
+            {isShowingNotes ? null : <th scope='col' class='px-6 py-4 font-medium text-white w-32'>Size</th>}
             <th scope='col' class='px-6 py-4 font-medium text-white w-20'></th>
           </tr>
         </thead>
@@ -52,7 +58,7 @@ export default function ListFiles(
               <tr class='bg-slate-700 hover:bg-slate-600 group'>
                 <td class='flex gap-3 px-6 py-4'>
                   <a
-                    href={`/files?path=${fullPath}`}
+                    href={`/${routePath}?path=${fullPath}`}
                     class='flex items-center font-normal text-white'
                   >
                     <img
@@ -69,53 +75,58 @@ export default function ListFiles(
                 <td class='px-6 py-4 text-slate-200'>
                   {dateFormat.format(new Date(directory.updated_at))}
                 </td>
-                <td class='px-6 py-4 text-slate-200'>
-                  -
-                </td>
+                {isShowingNotes ? null : (
+                  <td class='px-6 py-4 text-slate-200'>
+                    -
+                  </td>
+                )}
                 <td class='px-6 py-4'>
-                  {fullPath === TRASH_PATH ? null : (
-                    <section class='flex items-center justify-end w-20'>
-                      <span
-                        class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                        onClick={() => onClickOpenRenameDirectory(directory.parent_path, directory.directory_name)}
-                      >
-                        <img
-                          src='/images/rename.svg'
-                          class='white drop-shadow-md'
-                          width={18}
-                          height={18}
-                          alt='Rename directory'
-                          title='Rename directory'
-                        />
-                      </span>
-                      <span
-                        class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                        onClick={() => onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
-                      >
-                        <img
-                          src='/images/move.svg'
-                          class='white drop-shadow-md'
-                          width={18}
-                          height={18}
-                          alt='Move directory'
-                          title='Move directory'
-                        />
-                      </span>
-                      <span
-                        class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100'
-                        onClick={() => onClickDeleteDirectory(directory.parent_path, directory.directory_name)}
-                      >
-                        <img
-                          src='/images/delete.svg'
-                          class='red drop-shadow-md'
-                          width={20}
-                          height={20}
-                          alt='Delete directory'
-                          title='Delete directory'
-                        />
-                      </span>
-                    </section>
-                  )}
+                  {(fullPath === TRASH_PATH || typeof onClickOpenRenameDirectory === 'undefined' ||
+                      typeof onClickOpenMoveDirectory === 'undefined')
+                    ? null
+                    : (
+                      <section class='flex items-center justify-end w-20'>
+                        <span
+                          class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
+                          onClick={() => onClickOpenRenameDirectory(directory.parent_path, directory.directory_name)}
+                        >
+                          <img
+                            src='/images/rename.svg'
+                            class='white drop-shadow-md'
+                            width={18}
+                            height={18}
+                            alt='Rename directory'
+                            title='Rename directory'
+                          />
+                        </span>
+                        <span
+                          class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
+                          onClick={() => onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
+                        >
+                          <img
+                            src='/images/move.svg'
+                            class='white drop-shadow-md'
+                            width={18}
+                            height={18}
+                            alt='Move directory'
+                            title='Move directory'
+                          />
+                        </span>
+                        <span
+                          class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100'
+                          onClick={() => onClickDeleteDirectory(directory.parent_path, directory.directory_name)}
+                        >
+                          <img
+                            src='/images/delete.svg'
+                            class='red drop-shadow-md'
+                            width={20}
+                            height={20}
+                            alt='Delete directory'
+                            title='Delete directory'
+                          />
+                        </span>
+                      </section>
+                    )}
                 </td>
               </tr>
             );
@@ -124,7 +135,7 @@ export default function ListFiles(
             <tr class='bg-slate-700 hover:bg-slate-600 group'>
               <td class='flex gap-3 px-6 py-4'>
                 <a
-                  href={`/files/open/${file.file_name}?path=${file.parent_path}`}
+                  href={`/${routePath}/open/${file.file_name}?path=${file.parent_path}`}
                   class='flex items-center font-normal text-white'
                   target='_blank'
                   rel='noopener noreferrer'
@@ -143,37 +154,43 @@ export default function ListFiles(
               <td class='px-6 py-4 text-slate-200'>
                 {dateFormat.format(new Date(file.updated_at))}
               </td>
-              <td class='px-6 py-4 text-slate-200'>
-                {humanFileSize(file.size_in_bytes)}
-              </td>
+              {isShowingNotes ? null : (
+                <td class='px-6 py-4 text-slate-200'>
+                  {humanFileSize(file.size_in_bytes)}
+                </td>
+              )}
               <td class='px-6 py-4'>
                 <section class='flex items-center justify-end w-20'>
-                  <span
-                    class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                    onClick={() => onClickOpenRenameFile(file.parent_path, file.file_name)}
-                  >
-                    <img
-                      src='/images/rename.svg'
-                      class='white drop-shadow-md'
-                      width={18}
-                      height={18}
-                      alt='Rename file'
-                      title='Rename file'
-                    />
-                  </span>
-                  <span
-                    class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
-                    onClick={() => onClickOpenMoveFile(file.parent_path, file.file_name)}
-                  >
-                    <img
-                      src='/images/move.svg'
-                      class='white drop-shadow-md'
-                      width={18}
-                      height={18}
-                      alt='Move file'
-                      title='Move file'
-                    />
-                  </span>
+                  {typeof onClickOpenRenameFile === 'undefined' ? null : (
+                    <span
+                      class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
+                      onClick={() => onClickOpenRenameFile(file.parent_path, file.file_name)}
+                    >
+                      <img
+                        src='/images/rename.svg'
+                        class='white drop-shadow-md'
+                        width={18}
+                        height={18}
+                        alt={`Rename ${itemSingleLabel}`}
+                        title={`Rename ${itemSingleLabel}`}
+                      />
+                    </span>
+                  )}
+                  {typeof onClickOpenMoveFile === 'undefined' ? null : (
+                    <span
+                      class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
+                      onClick={() => onClickOpenMoveFile(file.parent_path, file.file_name)}
+                    >
+                      <img
+                        src='/images/move.svg'
+                        class='white drop-shadow-md'
+                        width={18}
+                        height={18}
+                        alt={`Move ${itemSingleLabel}`}
+                        title={`Move ${itemSingleLabel}`}
+                      />
+                    </span>
+                  )}
                   <span
                     class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100'
                     onClick={() => onClickDeleteFile(file.parent_path, file.file_name)}
@@ -183,8 +200,8 @@ export default function ListFiles(
                       class='red drop-shadow-md'
                       width={20}
                       height={20}
-                      alt='Delete file'
-                      title='Delete file'
+                      alt={`Delete ${itemSingleLabel}`}
+                      title={`Delete ${itemSingleLabel}`}
                     />
                   </span>
                 </section>
@@ -196,7 +213,7 @@ export default function ListFiles(
               <tr>
                 <td class='flex gap-3 px-6 py-4 font-normal' colspan={4}>
                   <div class='text-md'>
-                    <div class='font-medium text-slate-400'>No files to show</div>
+                    <div class='font-medium text-slate-400'>No {itemPluralLabel} to show</div>
                   </div>
                 </td>
               </tr>

components/files/MainFiles.tsx

@@ -409,7 +409,7 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
               <button
                 class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
                 type='button'
-                title='Add new event'
+                title='Add new file or directory'
                 id='new-button'
                 aria-expanded='true'
                 aria-haspopup='true'

components/notes/CreateNoteModal.tsx

@@ -0,0 +1,60 @@
+import { useSignal } from '@preact/signals';
+
+interface CreateNoteModalProps {
+  isOpen: boolean;
+  onClickSave: (newNoteName: string) => Promise<void>;
+  onClose: () => void;
+}
+
+export default function CreateNoteModal(
+  { isOpen, onClickSave, onClose }: CreateNoteModalProps,
+) {
+  const newNoteName = useSignal<string>('');
+
+  return (
+    <>
+      <section
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+      >
+      </section>
+
+      <section
+        class={`fixed ${
+          isOpen ? 'block' : 'hidden'
+        } z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
+      >
+        <h1 class='text-2xl font-semibold my-5'>Create New Note</h1>
+        <section class='py-5 my-2 border-y border-slate-500'>
+          <fieldset class='block mb-2'>
+            <label class='text-slate-300 block pb-1' for='directory_name'>Name</label>
+            <input
+              class='input-field'
+              type='text'
+              name='directory_name'
+              id='directory_name'
+              value={newNoteName.value}
+              onInput={(event) => {
+                newNoteName.value = event.currentTarget.value;
+              }}
+              placeholder='Amazing'
+            />
+          </fieldset>
+        </section>
+        <footer class='flex justify-between'>
+          <button
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            onClick={() => onClickSave(newNoteName.value)}
+          >
+            Create
+          </button>
+          <button
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            onClick={() => onClose()}
+          >
+            Close
+          </button>
+        </footer>
+      </section>
+    </>
+  );
+}

components/notes/MainNotes.tsx

@@ -0,0 +1,302 @@
+import { useSignal } from '@preact/signals';
+
+import { Directory, DirectoryFile } from '/lib/types.ts';
+import { ResponseBody as UploadResponseBody } from '/routes/api/files/upload.tsx';
+import { RequestBody as DeleteRequestBody, ResponseBody as DeleteResponseBody } from '/routes/api/files/delete.tsx';
+import {
+  RequestBody as CreateDirectoryRequestBody,
+  ResponseBody as CreateDirectoryResponseBody,
+} from '/routes/api/files/create-directory.tsx';
+import {
+  RequestBody as DeleteDirectoryRequestBody,
+  ResponseBody as DeleteDirectoryResponseBody,
+} from '/routes/api/files/delete-directory.tsx';
+import ListFiles from '/components/files/ListFiles.tsx';
+import FilesBreadcrumb from '/components/files/FilesBreadcrumb.tsx';
+import CreateDirectoryModal from '/components/files/CreateDirectoryModal.tsx';
+import CreateNoteModal from './CreateNoteModal.tsx';
+
+interface MainNotesProps {
+  initialDirectories: Directory[];
+  initialFiles: DirectoryFile[];
+  initialPath: string;
+}
+
+export default function MainNotes({ initialDirectories, initialFiles, initialPath }: MainNotesProps) {
+  const isAdding = useSignal<boolean>(false);
+  const isDeleting = useSignal<boolean>(false);
+  const directories = useSignal<Directory[]>(initialDirectories);
+  const files = useSignal<DirectoryFile[]>(initialFiles);
+  const path = useSignal<string>(initialPath);
+  const areNewOptionsOption = useSignal<boolean>(false);
+  const isNewNoteModalOpen = useSignal<boolean>(false);
+  const isNewDirectoryModalOpen = useSignal<boolean>(false);
+
+  function onClickCreateNote() {
+    if (isNewNoteModalOpen.value) {
+      isNewNoteModalOpen.value = false;
+      return;
+    }
+
+    isNewNoteModalOpen.value = true;
+  }
+
+  async function onClickSaveNote(newNoteName: string) {
+    if (isAdding.value) {
+      return;
+    }
+
+    if (!newNoteName) {
+      return;
+    }
+
+    areNewOptionsOption.value = false;
+    isAdding.value = true;
+
+    const requestBody = new FormData();
+    requestBody.set('parent_path', path.value);
+    requestBody.set('name', `${newNoteName}.md`);
+    requestBody.set('contents', `# ${newNoteName}\n\nStart your new note!\n`);
+
+    try {
+      const response = await fetch(`/api/files/upload`, {
+        method: 'POST',
+        body: requestBody,
+      });
+      const result = await response.json() as UploadResponseBody;
+
+      if (!result.success) {
+        throw new Error('Failed to create note!');
+      }
+
+      files.value = [...result.newFiles];
+
+      isNewNoteModalOpen.value = false;
+    } catch (error) {
+      console.error(error);
+    }
+
+    isAdding.value = false;
+  }
+
+  function onCloseCreateNote() {
+    isNewNoteModalOpen.value = false;
+  }
+
+  function onClickCreateDirectory() {
+    if (isNewDirectoryModalOpen.value) {
+      isNewDirectoryModalOpen.value = false;
+      return;
+    }
+
+    isNewDirectoryModalOpen.value = true;
+  }
+
+  async function onClickSaveDirectory(newDirectoryName: string) {
+    if (isAdding.value) {
+      return;
+    }
+
+    if (!newDirectoryName) {
+      return;
+    }
+
+    areNewOptionsOption.value = false;
+    isAdding.value = true;
+
+    try {
+      const requestBody: CreateDirectoryRequestBody = {
+        parentPath: path.value,
+        name: newDirectoryName,
+      };
+      const response = await fetch(`/api/files/create-directory`, {
+        method: 'POST',
+        body: JSON.stringify(requestBody),
+      });
+      const result = await response.json() as CreateDirectoryResponseBody;
+
+      if (!result.success) {
+        throw new Error('Failed to create directory!');
+      }
+
+      directories.value = [...result.newDirectories];
+
+      isNewDirectoryModalOpen.value = false;
+    } catch (error) {
+      console.error(error);
+    }
+
+    isAdding.value = false;
+  }
+
+  function onCloseCreateDirectory() {
+    isNewDirectoryModalOpen.value = false;
+  }
+
+  function toggleNewOptionsDropdown() {
+    areNewOptionsOption.value = !areNewOptionsOption.value;
+  }
+
+  async function onClickDeleteDirectory(parentPath: string, name: string) {
+    if (confirm('Are you sure you want to delete this directory?')) {
+      if (isDeleting.value) {
+        return;
+      }
+
+      isDeleting.value = true;
+
+      try {
+        const requestBody: DeleteDirectoryRequestBody = {
+          parentPath,
+          name,
+        };
+        const response = await fetch(`/api/files/delete-directory`, {
+          method: 'POST',
+          body: JSON.stringify(requestBody),
+        });
+        const result = await response.json() as DeleteDirectoryResponseBody;
+
+        if (!result.success) {
+          throw new Error('Failed to delete directory!');
+        }
+
+        directories.value = [...result.newDirectories];
+      } catch (error) {
+        console.error(error);
+      }
+
+      isDeleting.value = false;
+    }
+  }
+
+  async function onClickDeleteFile(parentPath: string, name: string) {
+    if (confirm('Are you sure you want to delete this note?')) {
+      if (isDeleting.value) {
+        return;
+      }
+
+      isDeleting.value = true;
+
+      try {
+        const requestBody: DeleteRequestBody = {
+          parentPath,
+          name,
+        };
+        const response = await fetch(`/api/files/delete`, {
+          method: 'POST',
+          body: JSON.stringify(requestBody),
+        });
+        const result = await response.json() as DeleteResponseBody;
+
+        if (!result.success) {
+          throw new Error('Failed to delete note!');
+        }
+
+        files.value = [...result.newFiles];
+      } catch (error) {
+        console.error(error);
+      }
+
+      isDeleting.value = false;
+    }
+  }
+
+  return (
+    <>
+      <section class='flex flex-row items-center justify-between mb-4'>
+        <section class='flex items-center justify-end w-full'>
+          <FilesBreadcrumb path={path.value} isShowingNotes={true} />
+
+          <section class='relative inline-block text-left ml-2'>
+            <div>
+              <button
+                class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
+                type='button'
+                title='Add new note or directory'
+                id='new-button'
+                aria-expanded='true'
+                aria-haspopup='true'
+                onClick={() => toggleNewOptionsDropdown()}
+              >
+                <img
+                  src='/images/add.svg'
+                  alt='Add new note or directory'
+                  class={`white ${isAdding.value ? 'animate-spin' : ''}`}
+                  width={20}
+                  height={20}
+                />
+              </button>
+            </div>
+
+            <div
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+                !areNewOptionsOption.value ? 'hidden' : ''
+              }`}
+              role='menu'
+              aria-orientation='vertical'
+              aria-labelledby='new-button'
+              tabindex={-1}
+            >
+              <div class='py-1'>
+                <button
+                  class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
+                  onClick={() => onClickCreateNote()}
+                >
+                  New Note
+                </button>
+                <button
+                  class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
+                  onClick={() => onClickCreateDirectory()}
+                >
+                  New Directory
+                </button>
+              </div>
+            </div>
+          </section>
+        </section>
+      </section>
+
+      <section class='mx-auto max-w-7xl my-8'>
+        <ListFiles
+          directories={directories.value}
+          files={files.value}
+          onClickDeleteDirectory={onClickDeleteDirectory}
+          onClickDeleteFile={onClickDeleteFile}
+          isShowingNotes={true}
+        />
+
+        <span
+          class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
+        >
+          {isDeleting.value
+            ? (
+              <>
+                <img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Deleting...
+              </>
+            )
+            : null}
+          {isAdding.value
+            ? (
+              <>
+                <img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Creating...
+              </>
+            )
+            : null}
+          {!isDeleting.value && !isAdding.value ? <>&nbsp;</> : null}
+        </span>
+      </section>
+
+      <CreateDirectoryModal
+        isOpen={isNewDirectoryModalOpen.value}
+        onClickSave={onClickSaveDirectory}
+        onClose={onCloseCreateDirectory}
+      />
+
+      <CreateNoteModal
+        isOpen={isNewNoteModalOpen.value}
+        onClickSave={onClickSaveNote}
+        onClose={onCloseCreateNote}
+      />
+    </>
+  );
+}