rebuild folder toolbar

src/blossom-drive-client/Upload.ts

@@ -3,6 +3,8 @@ import type Drive from "./Drive";
 
 export type UploadableItem = FileList | File | FileSystemDirectoryEntry;
 
+// NOTE: make sure to support webkitRelativePath on File if its defined
+
 export default class Upload {
   drive: Drive;
   servers: string[];

src/components/DriveEditModal.svelte

@@ -9,7 +9,6 @@
   let description = drive.description;
 
   const submit = async (e: SubmitEvent) => {
-    e.preventDefault();
     drive.name = name;
     drive.description = description;
     await drive.save();
@@ -18,7 +17,7 @@
 </script>
 
 <Modal bind:open size="xs" class="w-full" title="Edit Drive" outsideclose>
-  <form id="update-form" class="flex flex-col gap-2 py-0" on:submit={submit}>
+  <form id="update-form" class="flex flex-col gap-2 py-0" on:submit|preventDefault={submit}>
     <Input placeholder="Drive name" required bind:value={name} />
     <Textarea name="about" rows={4} placeholder="A short description" bind:value={description} />
     <div class="flex justify-end gap-2">

src/components/FileCard.svelte

@@ -35,10 +35,10 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={"relative flex aspect-square min-w-40 flex-col divide-gray-200 rounded-md border-4 bg-white text-gray-700 hover:bg-gray-100 dark:divide-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" +
+  class={"relative flex h-40 w-48 flex-col divide-gray-200 rounded-md border-2 bg-white text-gray-700 hover:bg-gray-100 dark:divide-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" +
     borderClass}
   on:dragstart={dragStart}
-  on:click={toggleSelect}
+  on:click|stopPropagation={toggleSelect}
   on:dblclick={() => window.open(link, "_blank")}
   role="row"
   tabindex={0}
@@ -101,7 +101,6 @@
 
 <style>
   .preview-image {
-    image-rendering: pixelated;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;

src/components/FolderCard.svelte

@@ -75,9 +75,9 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={"relative flex aspect-square min-w-40 flex-col divide-gray-200 rounded-md border-4 bg-white text-gray-700 hover:bg-gray-100 dark:divide-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" +
+  class={"relative flex h-40 w-48 flex-col divide-gray-200 rounded-md border-2 bg-white text-gray-700 hover:bg-gray-100 dark:divide-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" +
     borderClass}
-  on:click={toggleSelect}
+  on:click|stopPropagation={toggleSelect}
   on:dblclick={() => push(createDirLink(folder.name, $querystring))}
   on:drop={drop}
   on:dragover={dragover}

src/components/NewDriveModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { NDKEvent } from "@nostr-dev-kit/ndk";
-  import { Button, Modal, Input, Textarea } from "flowbite-svelte";
+  import { Button, Modal, Input, Textarea, Spinner } from "flowbite-svelte";
   import { createEventDispatcher } from "svelte";
   import { ndk } from "../services/ndk";
   import { nanoid } from "nanoid";
@@ -9,6 +9,8 @@
   let name = "";
   let description = "";
 
+  let loading = false;
+
   const dispatch = createEventDispatcher();
 
   const submit = async (e: SubmitEvent) => {
@@ -27,12 +29,16 @@
 </script>
 
 <Modal bind:open size="xs" class="w-full" title="New Drive" outsideclose>
-  <form id="new-folder-form" class="flex flex-col gap-2 py-0" on:submit={submit}>
-    <Input placeholder="Drive name" required bind:value={name} />
-    <Textarea name="about" rows={4} placeholder="A short description" bind:value={description} />
-    <div class="flex justify-end gap-2">
-      <Button color="alternative" on:click={() => (open = false)}>Cancel</Button>
-      <Button type="submit">Create</Button>
-    </div>
-  </form>
+  {#if loading}
+    <Spinner />
+  {:else}
+    <form id="new-folder-form" class="flex flex-col gap-2 py-0" on:submit={submit}>
+      <Input placeholder="Drive name" required bind:value={name} />
+      <Textarea name="about" rows={4} placeholder="A short description" bind:value={description} />
+      <div class="flex justify-end gap-2">
+        <Button color="alternative" on:click={() => (open = false)}>Cancel</Button>
+        <Button type="submit">Create</Button>
+      </div>
+    </form>
+  {/if}
 </Modal>

src/components/PathBreadcrumbs.svelte

@@ -9,7 +9,7 @@
   $: path = parsePath(parsed.get("path") ?? "");
 </script>
 
-<Breadcrumb>
+<Breadcrumb class={$$props.class}>
   <BreadcrumbItem href={"#" + $location} home>{root}</BreadcrumbItem>
   {#each path as name, i}
     <BreadcrumbItem href={"#" + $location + "?path=/" + [...path.slice(0, i), name].join("/")}>{name}</BreadcrumbItem>

src/pages/Drive/DriveFiles.svelte

@@ -1,7 +1,19 @@
 <script lang="ts">
-  import SpeedDialMenu from "../../components/SpeedDialMenu.svelte";
-  import { Button, CloseButton, Select, Spinner } from "flowbite-svelte";
-  import { TrashBinSolid } from "flowbite-svelte-icons";
+  import { Button, CloseButton, Select, Spinner, Tooltip } from "flowbite-svelte";
+  import {
+    ArrowLeftToBracketOutline,
+    CogOutline,
+    DownloadOutline,
+    EditOutline,
+    FileImportOutline,
+    FolderArrowRightOutline,
+    FolderPlusOutline,
+    InfoCircleOutline,
+    LinkOutline,
+    ListSolid,
+    TrashBinOutline,
+    TrashBinSolid,
+  } from "flowbite-svelte-icons";
 
   import FileCard from "../../components/FileCard.svelte";
   import FolderCard from "../../components/FolderCard.svelte";
@@ -15,16 +27,32 @@
   import TreeFile from "../../blossom-drive-client/FileTree/TreeFile";
   import { joinPath } from "../../blossom-drive-client/FileTree/methods";
   import DriveEditModal from "../../components/DriveEditModal.svelte";
+  import NewFolderModal from "../../components/NewFolderModal.svelte";
+  import UploadFileModal from "../../components/UploadFileModal.svelte";
+  import { servers } from "../../services/servers";
+  import { getBlobURL } from "../../helpers/blob";
 
   export let currentPath: string;
   export let drive: Drive;
   $: readableDrive = getReadableDrive(drive);
   $: subTree = $readableDrive.getFolder(currentPath);
 
   let editModal = false;
+  let newFolderModal = false;
+  let uploadFilesModal = false;
 
   let detailsModal = false;
   let detailsFile: TreeFile | null = null;
+  function showDetailsModal() {
+    if (selected[0]) {
+      const file = subTree.get(selected[0]);
+      if (file instanceof TreeFile) {
+        detailsFile = file;
+        detailsModal = true;
+      }
+    }
+  }
+
   let confirmDelete = false;
   let selected: string[] = [];
   function toggleSelect(e: CustomEvent<string>) {
@@ -54,6 +82,16 @@
     await drive.save();
   }
 
+  function copySelectedLink() {
+    if (selected[0]) {
+      const file = subTree.get(selected[0]);
+      if (file instanceof TreeFile) {
+        const url = getBlobURL(file, $servers[0]);
+        if (url) window.navigator.clipboard.writeText(url);
+      }
+    }
+  }
+
   async function deleteSelected() {
     for (const name of selected) drive.remove(joinPath(currentPath, name));
     selected = [];
@@ -152,19 +190,91 @@
   //   handleEvent(draft);
   //   await draft.publish();
   // }
+
+  let folderInput: HTMLInputElement;
+  let filesInput: HTMLInputElement;
 </script>
 
 {#if !drive}
   <Spinner />
 {:else}
-  <main class="flex flex-grow flex-col gap-4 p-4" on:drop={drop} on:dragover={dragover}>
-    <div class="flex gap-2">
-      <PathBreadcrumbs root={drive.name ?? "Drive"} />
-      <div class="flex-1" />
-      <Button on:click={() => (editModal = true)} color="alternative" size="xs">Edit</Button>
+  <main class="flex flex-grow flex-col" on:drop={drop} on:dragover={dragover}>
+    <div class="flex items-center gap-2 border-b border-gray-200 p-2 dark:border-gray-800">
+      <PathBreadcrumbs root={drive.name ?? "Drive"} class="mx-2" />
       <Button href="#/history/{drive.address}" color="alternative" size="xs">History</Button>
+
+      <div class="flex-1" />
+
+      {#if selected.length === 0}
+        <Button size="sm" class="!p-2" color="alternative" on:click={() => (newFolderModal = true)}>
+          <FolderPlusOutline />
+        </Button>
+        <Tooltip placement="bottom">Create Folder</Tooltip>
+
+        <div class="h-8 border border-gray-200 dark:border-gray-800" />
+
+        <input class="hidden" type="file" webkitdirectory multiple bind:this={folderInput} />
+        <Button size="sm" class="!p-2" color="alternative" on:click={() => folderInput.click()}>
+          <FolderArrowRightOutline />
+        </Button>
+        <Tooltip placement="bottom">Upload Folder</Tooltip>
+
+        <input class="hidden" type="file" multiple bind:this={filesInput} />
+        <Button size="sm" class="!p-2" color="alternative" on:click={() => filesInput.click()}>
+          <FileImportOutline />
+        </Button>
+        <Tooltip placement="bottom">Upload Files</Tooltip>
+      {:else}
+        {#if selected.length === 1}
+          <Button size="sm" class="!p-2" color="alternative" disabled>
+            <DownloadOutline />
+          </Button>
+          <Tooltip placement="bottom">Download</Tooltip>
+
+          <Button size="sm" class="!p-2" color="alternative" on:click={copySelectedLink}>
+            <LinkOutline />
+          </Button>
+          <Tooltip placement="bottom">Copy Link</Tooltip>
+
+          <div class="h-8 border border-gray-200 dark:border-gray-800" />
+
+          <Button size="sm" class="!p-2" color="alternative" disabled>
+            <ArrowLeftToBracketOutline />
+          </Button>
+          <Tooltip placement="bottom">Move</Tooltip>
+
+          <Button size="sm" class="!p-2" color="alternative" on:click={() => (renameModal = true)}>
+            <EditOutline />
+          </Button>
+          <Tooltip placement="bottom">Rename</Tooltip>
+
+          <Button size="sm" class="!p-2" color="alternative" on:click={showDetailsModal}>
+            <InfoCircleOutline />
+          </Button>
+          <Tooltip placement="bottom">Details</Tooltip>
+        {/if}
+
+        <div class="h-8 border border-gray-200 dark:border-gray-800" />
+
+        <Button size="sm" class="!p-2" color="alternative" on:click={() => (confirmDelete = true)}>
+          <TrashBinOutline />
+        </Button>
+        <Tooltip placement="bottom">Delete</Tooltip>
+      {/if}
+
+      <div class="h-8 border border-gray-200 dark:border-gray-800" />
+
+      <Button size="sm" class="!p-2" color="alternative" disabled>
+        <ListSolid />
+      </Button>
+      <Tooltip placement="bottom">Change Layout</Tooltip>
+
+      <Button size="sm" class="!p-2" color="alternative" on:click={() => (editModal = true)}>
+        <CogOutline />
+      </Button>
+      <Tooltip placement="bottom">Drive Settings</Tooltip>
     </div>
-    <div class="flex items-center gap-2 rounded-lg border border-gray-200 p-1 dark:border-gray-800">
+    <div class="flex items-center gap-2 rounded-lg px-4 pt-2">
       {#if selected.length > 0}
         <p class="ml-2">{selected.length} selected</p>
         <Button size="sm" color="none" class="!p-2" on:click={() => (confirmDelete = true)}><TrashBinSolid /></Button>
@@ -180,8 +290,12 @@
           <Button size="sm" on:click={() => (filterType = "")} color="alternative">Clear Filter</Button>
         {/if}
       {/if}
+
+      <div class="mx-auto"></div>
     </div>
-    <div class="flex flex-wrap items-start gap-4">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="flex flex-1 flex-wrap items-start gap-4 p-4" on:click={() => (selected = [])}>
       {#each folders as folder}
         <FolderCard
           {folder}
@@ -225,7 +339,6 @@
     </div>
   </main>
 {/if}
-<SpeedDialMenu drive={drive ?? undefined} path={currentPath} />
 
 {#if confirmDelete}
   <DeleteModal bind:open={confirmDelete} on:yes={deleteSelected} />
@@ -242,3 +355,11 @@
 {#if editModal}
   <DriveEditModal bind:open={editModal} drive={$readableDrive} />
 {/if}
+
+{#if newFolderModal && drive}
+  <NewFolderModal bind:open={newFolderModal} {drive} path={currentPath} />
+{/if}
+
+{#if uploadFilesModal}
+  <UploadFileModal bind:open={uploadFilesModal} {drive} path={currentPath} />
+{/if}