added share and save

Paperback-iOS · Nov 2, 2024 · a1d5b3c · a1d5b3c
1 parent ea4e1b9
commit a1d5b3c
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 11 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -8,6 +8,7 @@
 
   type SourceInfo = _SourceInfo & { id: string; repository: string }
   type SelectedPlugin = [string, string]
+  let readonly = $state(false)
 
   let searchQuery = $state("")
   let selectedPlugins: SelectedPlugin[] = $state([])
@@ -66,6 +67,24 @@
     }
   }
 
+  function saveCurrentRepositories() {
+    let repoSet: Set<string> = new Set()
+    const savedRepositories = localStorage.getItem("repositories")
+    if (savedRepositories) {
+      const repos = JSON.parse(savedRepositories)
+      repoSet = repoSet.union(new Set(repos))
+    }
+    repoSet = repoSet.union(new Set(repositories))
+    localStorage.setItem("repositories", JSON.stringify(Array.from(repoSet)))
+    window.location.href = window.location.origin
+  }
+
+  function shareCurrentRepositories() {
+    const currentLocation = window.location.origin + window.location.pathname
+    console.log(currentLocation)
+    window.open(currentLocation + '?data=' + btoa(JSON.stringify(repositories)))
+  }
+
   async function removeRepository(url: string) {
     repositories = repositories.filter((repo) => repo !== url)
     localStorage.setItem("repositories", JSON.stringify(repositories))
@@ -157,6 +176,18 @@
     if (savedRepositories) {
       repositories = JSON.parse(savedRepositories)
     }
+
+    const searchParams = new URLSearchParams(window.location.search)
+    const base64Data = searchParams.get("data")
+    const dataJSON = atob(base64Data ?? "")
+    if (dataJSON) {
+      const data: string[] = JSON.parse(dataJSON)
+      if (data && data.length) {
+        repositories = data
+        readonly = true
+      }
+    }
+
     fetchPlugins()
   })
 </script>
@@ -174,6 +205,9 @@
         onRemoveRepository={(url: string) => {
           removeRepository(url)
         }}
+        {readonly}
+        onSaveClick={() => {saveCurrentRepositories()}}
+        onShareClick={() => {shareCurrentRepositories()}}
       />
 
       <!-- Search and Install Bar -->

diff --git a/src/components/AddRepositoryModal.svelte b/src/components/AddRepositoryModal.svelte
@@ -20,7 +20,6 @@
 <div
   id="repo-modal"
   class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  on:click={(e) => onClose()}
 >
   <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
     <div class="flex justify-between items-center mb-4">

diff --git a/src/components/InstallConfirmModal.svelte b/src/components/InstallConfirmModal.svelte
@@ -14,7 +14,6 @@
 <div
   id="install-modal"
   class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  on:click={(e) => onClose()}
 >
   <div
     class="bg-white rounded-lg w-full max-w-md mx-4 flex flex-col max-h-[80vh]"

diff --git a/src/components/RepositoryList.svelte b/src/components/RepositoryList.svelte
@@ -1,14 +1,31 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-svelte"
+  import {
+    ChevronDown,
+    ChevronRight,
+    Plus,
+    Trash2,
+    Share,
+    Save,
+  } from "lucide-svelte"
 
   type Props = {
     repositories: string[]
+    readonly: boolean
+    onShareClick: () => void
+    onSaveClick: () => void
     onAddClick: () => void
     onRemoveRepository: (url: string) => void
   }
 
-  const { repositories = [], onAddClick, onRemoveRepository }: Props = $props()
+  const {
+    repositories = [],
+    readonly,
+    onSaveClick,
+    onShareClick,
+    onAddClick,
+    onRemoveRepository,
+  }: Props = $props()
   let isExpanded = $state(true)
 
   onMount(() => {
@@ -34,14 +51,40 @@
         <ChevronRight class="w-5 h-5 text-gray-500" />
       {/if}
       <h2 class="text-lg font-medium">Repositories</h2>
+      {#if readonly}
+        <span
+          class="px-2 py-1 text-xs font-semibold text-red-600 bg-red-100 rounded-full"
+        >
+          READONLY
+        </span>
+      {/if}
     </div>
-    <button
-      class="px-3 py-1.5 text-sm font-medium border border-gray-200 rounded-lg hover:bg-white transition-colors flex items-center"
-      on:click|stopPropagation={onAddClick}
-    >
-      <Plus class="w-4 h-4 mr-1.5" />
-      Add Repository
-    </button>
+    {#if !readonly}
+      <div class="flex items-center space-x-2">
+        <button
+          class="px-3 py-1.5 text-sm font-medium border border-gray-200 rounded-lg hover:bg-white transition-colors flex items-center"
+          on:click|stopPropagation={onShareClick}
+        >
+          <Share class="w-4 h-4 mr-1.5" />
+          Share
+        </button>
+        <button
+          class="px-3 py-1.5 text-sm font-medium border border-gray-200 rounded-lg hover:bg-white transition-colors flex items-center"
+          on:click|stopPropagation={onAddClick}
+        >
+          <Plus class="w-4 h-4 mr-1.5" />
+          Add Repository
+        </button>
+      </div>
+    {:else}
+      <button
+        class="px-3 py-1.5 text-sm font-medium border border-gray-200 rounded-lg hover:bg-white transition-colors flex items-center"
+        on:click|stopPropagation={onSaveClick}
+      >
+        <Save class="w-4 h-4 mr-1.5" />
+        Save
+      </button>
+    {/if}
   </div>
 
   {#if isExpanded}