rename packs to drives

fix bugs

src/App.svelte

@@ -3,27 +3,38 @@
   import NotFound from "./pages/404.svelte";
   import Home from "./pages/Home.svelte";
   import TopNav from "./components/TopNav.svelte";
-  import { activeUser } from "./services/ndk";
+  import { activeUser, loginWithExtension } from "./services/ndk";
   import Servers from "./pages/Servers.svelte";
   import Files from "./pages/Files.svelte";
   import Misc from "./pages/Misc.svelte";
-  import Pack from "./pages/Pack.svelte";
+  import Drive from "./pages/Drive.svelte";
+  import { Button, Checkbox } from "flowbite-svelte";
+
+  let remember = localStorage.getItem("auto-login") === "true";
+
+  $: {
+    localStorage.setItem("auto-login", remember ? "true" : "false");
+  }
 
   const routes = {
     "/files": Files,
     "/servers": Servers,
     "/misc": Misc,
-    "/pack/:naddr": Pack,
+    "/drive/:naddr": Drive,
     "/": Home,
     "*": NotFound,
   };
 </script>
 
-<TopNav />
 <div class="flex w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-900">
   {#if $activeUser}
+    <TopNav />
     <Router {routes} />
   {:else}
-    <h1>Login first</h1>
+    <div class="flex h-full w-full flex-col items-center gap-4">
+      <h1 class="text-4xl" style="margin-bottom: 20vh; margin-top: 10vh;">🌸 Blossom Drive</h1>
+      <Button size="xl" on:click={loginWithExtension}>Login with nostr</Button>
+      <Checkbox bind:checked={remember}>Stay logged in</Checkbox>
+    </div>
   {/if}
 </div>

src/components/FileCard.svelte

@@ -15,6 +15,10 @@
     ? "border border-primary-200 dark:border-primary-700"
     : "border border-gray-200 dark:border-gray-700";
 
+  $: link = $servers[0]
+    ? new URL(file.hash + (file.mimeType ? "." + mime.getExtension(file.mimeType) : ""), $servers[0]).toString()
+    : undefined;
+
   function toggleSelect() {
     if (selected) dispatch("unselect", file.name);
     else dispatch("select", file.name);
@@ -28,7 +32,7 @@
 </script>
 
 <a
-  href={new URL(file.hash + (file.mimeType ? "." + mime.getExtension(file.mimeType) : ""), $servers[0]).toString()}
+  href={link}
   class={"relative flex aspect-square min-w-40 flex-col divide-gray-200 rounded-md border 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}

src/components/NewPackModal.svelte → src/components/NewDriveModal.svelte

@@ -25,9 +25,9 @@
   };
 </script>
 
-<Modal bind:open size="xs" class="w-full" title="New Pack" outsideclose>
+<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="Pack name" required bind:value={name} />
+    <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>

src/components/NewFolderModal.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import { Button, Modal, Input } from "flowbite-svelte";
-  import { getFileTree, getFolder, parsePath, setPackFileTree } from "../helpers/tree";
+  import { getFileTree, getFolder, parsePath, setDriveFileTree } from "../helpers/tree";
   import { cloneEvent } from "../helpers/event";
-  import { handleEvent } from "../services/packs";
+  import { handleEvent } from "../services/drives";
   export let open = false;
 
-  export let pack: NDKEvent;
+  export let drive: NDKEvent;
   export let path: string;
 
   let name = "";
@@ -15,10 +15,10 @@
     e.preventDefault();
     loading = true;
 
-    const draft = cloneEvent(pack);
+    const draft = cloneEvent(drive);
     const tree = getFileTree(draft);
     getFolder(tree, parsePath(path).concat(name));
-    setPackFileTree(draft, tree);
+    setDriveFileTree(draft, tree);
     await draft.sign();
     handleEvent(draft);
     open = false;

src/components/SpeedDialMenu.svelte

@@ -1,46 +1,45 @@
 <script lang="ts">
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import { SpeedDial, SpeedDialButton } from "flowbite-svelte";
-  import { UploadSolid, FolderSolid, GiftBoxSolid, UserHeadsetOutline } from "flowbite-svelte-icons";
+  import { UploadSolid, FolderSolid, GiftBoxSolid } from "flowbite-svelte-icons";
   import UploadFileModal from "./UploadFileModal.svelte";
-  import NewPackModal from "./NewPackModal.svelte";
+  import NewDriveModal from "./NewDriveModal.svelte";
   import NewFolderModal from "./NewFolderModal.svelte";
 
-  export let pack: NDKEvent | undefined = undefined;
+  export let drive: NDKEvent | undefined = undefined;
   export let path: string | undefined = undefined;
 
   let uploadFileModal = false;
   let newFolderModal = false;
-  let newPackModal = false;
+  let newDriveModal = false;
 
-  const createdPack = (event: CustomEvent<NDKEvent>) => {
-    newPackModal = false;
-    location.hash = "#/pack/" + event.detail.encode;
+  const createdDrive = (event: CustomEvent<NDKEvent>) => {
+    location.hash = "#/drive/" + event.detail.encode;
   };
 </script>
 
 <SpeedDial defaultClass="absolute end-6 bottom-6">
   <SpeedDialButton name="Upload" on:click={() => (uploadFileModal = true)}>
     <UploadSolid class="h-6 w-6" />
   </SpeedDialButton>
-  {#if pack}
+  {#if drive}
     <SpeedDialButton name="Folder" on:click={() => (newFolderModal = true)}>
       <FolderSolid class="h-6 w-6" />
     </SpeedDialButton>
   {/if}
-  <SpeedDialButton name="Pack" on:click={() => (newPackModal = true)}>
+  <SpeedDialButton name="Drive" on:click={() => (newDriveModal = true)}>
     <GiftBoxSolid class="h-6 w-6" />
   </SpeedDialButton>
 </SpeedDial>
 
 {#if uploadFileModal}
-  <UploadFileModal bind:open={uploadFileModal} {pack} {path} />
+  <UploadFileModal bind:open={uploadFileModal} {drive} {path} />
 {/if}
 
-{#if newFolderModal && pack}
-  <NewFolderModal bind:open={newFolderModal} {pack} path={path || "/"} />
+{#if newFolderModal && drive}
+  <NewFolderModal bind:open={newFolderModal} {drive} path={path || "/"} />
 {/if}
 
-{#if newPackModal}
-  <NewPackModal bind:open={newPackModal} on:created={createdPack} />
+{#if newDriveModal}
+  <NewDriveModal bind:open={newDriveModal} on:created={createdDrive} />
 {/if}

src/components/TopNav.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
   import { Button, DarkMode, Avatar } from "flowbite-svelte";
-  import { activeUser, ndk } from "../services/ndk";
-  import { NDKNip07Signer } from "@nostr-dev-kit/ndk";
+  import { activeUser, loginWithExtension } from "../services/ndk";
   import { CogSolid } from "flowbite-svelte-icons";
-
-  async function loginWithExt() {
-    const signer: NDKNip07Signer = (ndk.signer = new NDKNip07Signer());
-    await signer.blockUntilReady();
-    const user = await signer.user();
-    await user.fetchProfile();
-    await user.relayList();
-    $activeUser = user;
-  }
 </script>
 
 <div class="flex items-center gap-2 bg-gray-50 px-6 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200">
@@ -26,6 +16,6 @@
   {#if $activeUser}
     <Avatar src={$activeUser.profile?.image} />
   {:else}
-    <Button on:click={loginWithExt}>Login</Button>
+    <Button on:click={loginWithExtension}>Login</Button>
   {/if}
 </div>

src/components/UploadFileModal.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
   import { Button, Input, Label, Modal, Select, Spinner } from "flowbite-svelte";
   import { BlossomClient } from "blossom-client";
-  import { handleEvent, packs } from "../services/packs";
+  import { handleEvent, drives } from "../services/drives";
   import { NDKEvent } from "@nostr-dev-kit/ndk";
-  import { getFileTree, parsePath, setFile, setPackFileTree } from "../helpers/tree";
+  import { getFileTree, parsePath, setFile, setDriveFileTree } from "../helpers/tree";
   import { servers } from "../services/servers";
   import type { Blob } from "../services/blobs";
-  import { ndk, signEventTemplate } from "../services/ndk";
+  import { signEventTemplate } from "../services/ndk";
   import { cloneEvent } from "../helpers/event";
-  import { getPackName } from "../helpers/packs";
+  import { getDriveName } from "../helpers/drives";
 
   export let open = false;
-  export let pack: NDKEvent | undefined = undefined;
+  export let drive: NDKEvent | undefined = undefined;
   export let path: string = "";
 
-  let packId = "";
+  let driveId = "";
   let file: File | undefined = undefined;
   let name = "";
 
-  let selectedPack: NDKEvent | undefined = undefined;
-  $: selectedPack = pack || $packs[packId];
+  let selectedDrive: NDKEvent | undefined = undefined;
+  $: selectedDrive = drive || $drives[driveId];
 
   function fileChange(e: Event) {
     if (e.target instanceof HTMLInputElement) {
@@ -32,7 +32,7 @@
   async function upload(e: SubmitEvent) {
     e.preventDefault();
     if (!file) return;
-    if (!selectedPack) return;
+    if (!selectedDrive) return;
 
     loading = "Signing Auth";
     const auth = await BlossomClient.getUploadAuth(file, signEventTemplate);
@@ -53,14 +53,14 @@
       return;
     }
 
-    const draft = cloneEvent(selectedPack);
+    const draft = cloneEvent(selectedDrive);
     const tree = getFileTree(draft);
 
     setFile(tree, [...parsePath(path), name], { hash: blob.sha256, size: blob.size, mimeType: blob.type });
 
-    setPackFileTree(draft, tree);
+    setDriveFileTree(draft, tree);
 
-    loading = "Adding to pack...";
+    loading = "Adding to drive...";
     await draft.sign();
     handleEvent(draft);
     await draft.publish();
@@ -79,12 +79,12 @@
   {:else}
     <form class="flex flex-col space-y-4" on:submit={upload}>
       <Input type="file" name="file" required on:change={fileChange} />
-      {#if !pack}
+      {#if !drive}
         <Label>
-          <span>Add to Pack</span>
-          <Select bind:value={packId} required>
-            {#each Object.entries($packs) as [d, pack]}
-              <option value={d}>{getPackName(pack)}</option>
+          <span>Add to Drive</span>
+          <Select bind:value={driveId} required>
+            {#each Object.entries($drives) as [d, drive]}
+              <option value={d}>{getDriveName(drive)}</option>
             {/each}
           </Select>
         </Label>

src/helpers/drives.ts

@@ -0,0 +1,9 @@
+import type { NDKEvent } from "@nostr-dev-kit/ndk";
+import { getTagValue } from "./event";
+
+export function getDriveName(drive: NDKEvent) {
+  return getTagValue(drive, "name");
+}
+export function getDriveSummary(drive: NDKEvent) {
+  return getTagValue(drive, "summary") || drive.content;
+}

src/helpers/tree.ts

@@ -61,10 +61,10 @@ export function getFile(dir: TreeFolder, pathname: string) {
   const folder = getFolder(dir, parts, true);
   return folder[name] as TreeFile | undefined;
 }
-export function getFileTree(pack: NDKEvent) {
+export function getFileTree(drive: NDKEvent) {
   const tree: TreeFolder = {};
 
-  for (const tag of pack.tags) {
+  for (const tag of drive.tags) {
     if (tag[0] === "x") {
       const [_, hash, pathname, sizeStr, mimeType] = tag;
       const size = parseInt(sizeStr);
@@ -98,7 +98,7 @@ export function getTreeTags(entry: TreeFolder | TreeFile, path: string[] = []):
     .flat();
 }
 
-export function setPackFileTree(draft: NDKEvent, tree: TreeFolder) {
+export function setDriveFileTree(draft: NDKEvent, tree: TreeFolder) {
   draft.tags = draft.tags.filter((t) => t[0] !== "x" && t[0] !== "folder");
   draft.tags = draft.tags.concat(getTreeTags(tree));
 }