More work on publish shares page

Author: hhvrc

src/routes/(authenticated)/shares/public/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Plus from '@lucide/svelte/icons/plus';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
   import type { SortingState } from '@tanstack/table-core';
   import { publicShockerSharesApi } from '$lib/api';
@@ -13,6 +14,8 @@
   let data = $state<OwnPublicShareResponse[]>([]);
   let sorting = $state<SortingState>([]);
 
+  let showAddShareModal = $state<boolean>(false);
+
   function refreshPublicShares() {
     publicShockerSharesApi
       .shareLinksList()
@@ -35,12 +38,18 @@
   <Card.Header class="w-full">
     <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
       Public Shares
-      <Button class="text-xl" onclick={refreshPublicShares}>
-        <RotateCcw />
-        <span> Refresh </span>
-      </Button>
+      <div>
+        <Button onclick={() => (showAddShareModal = true)}>
+          <Plus />
+          Add Share
+        </Button>
+        <Button onclick={refreshPublicShares}>
+          <RotateCcw />
+          Refresh
+        </Button>
+      </div>
     </Card.Title>
-    <Card.Description>This is a list of all the public shares you control.</Card.Description>
+    <Card.Description>This is a list of all the public shares you own.</Card.Description>
   </Card.Header>
   <Card.Content class="w-full">
     <DataTable {data} {columns} {sorting} />

src/routes/(authenticated)/shares/public/[shareId=guid]/edit/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Pause, Play } from '@lucide/svelte';
+  import { page } from '$app/state';
+  import { publicShockerSharesApi } from '$lib/api';
+  import type { PublicShareResponse } from '$lib/api/internal/v1';
+  import { Button } from '$lib/components/ui/button';
+  import { onMount } from 'svelte';
+
+  let shareId = $derived(page.params.shareId);
+
+  let details = $state<PublicShareResponse>();
+
+  onMount(() => {
+    publicShockerSharesApi.publicGetPublicShare(shareId).then((response) => {
+      details = response.data;
+      console.log(response);
+    });
+  });
+</script>
+
+<ul>
+  {#each details?.devices ?? [] as device}
+    {#each device.shockers ?? [] as shocker}
+      <li class="m-2 flex items-center gap-2">
+        <Button>
+          <Pause />
+          <Play />
+        </Button>
+        {shocker.name}
+        <div class="flex-1"></div>
+        <Button>Shock</Button>
+        <Button>Vibrate</Button>
+        <Button>Sound</Button>
+        <Button>Remove</Button>
+      </li>
+    {/each}
+  {/each}
+</ul>

src/routes/(authenticated)/shares/public/data-table-actions.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
   import Ellipsis from '@lucide/svelte/icons/ellipsis';
+  import { goto } from '$app/navigation';
   import type { OwnPublicShareResponse } from '$lib/api/internal/v1';
   import { Button } from '$lib/components/ui/button';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import { toast } from 'svelte-sonner';
-  import SharelinkDeleteDialog from './dialog-sharelink-delete.svelte';
-  import SharelinkEditDialog from './dialog-sharelink-edit.svelte';
+  import SharelinkDeleteDialog from './dialog-publicshare-delete.svelte';
 
   interface Props {
     publicShare: OwnPublicShareResponse;
   }
 
   let { publicShare }: Props = $props();
 
-  let editDialogOpen = $state<boolean>(false);
   let deleteDialogOpen = $state<boolean>(false);
 
   function copyId() {
@@ -22,7 +21,6 @@
   }
 </script>
 
-<SharelinkEditDialog bind:open={editDialogOpen} {publicShare} />
 <SharelinkDeleteDialog bind:open={deleteDialogOpen} {publicShare} />
 
 <DropdownMenu.Root>
@@ -36,7 +34,9 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>
     <DropdownMenu.Item onclick={copyId}>Copy ID</DropdownMenu.Item>
-    <DropdownMenu.Item onclick={() => (editDialogOpen = true)}>Edit</DropdownMenu.Item>
+    <DropdownMenu.Item onclick={() => goto(`/shares/public/${publicShare.id}/edit`)}
+      >Edit</DropdownMenu.Item
+    >
     <DropdownMenu.Item onclick={() => (deleteDialogOpen = true)}>Delete</DropdownMenu.Item>
   </DropdownMenu.Content>
 </DropdownMenu.Root>