create share code dialog

Author: LucHeart

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

@@ -3,20 +3,23 @@
   import type { V2UserShares, V2UserSharesListItem } from '$lib/api/internal/v2';
   import * as Table from '$lib/components/ui/table';
   import { onMount } from 'svelte';
-  import UserShareItem from './UserShareItem.svelte';
+  import UserShareItem from './user-share-item.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Plus, RectangleEllipsis, User } from '@lucide/svelte';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import DialogShareCodeCreate from './dialog-share-code-create.svelte';
   import { OwnHubsStore, refreshOwnHubs } from '$lib/stores/HubsStore';
   import EditShare from './edit-share.svelte';
+  import DialogShareCodeCreated from './dialog-share-code-created.svelte';
 
   let createDialogOpen = $state(false);
   let userShares = $state<V2UserShares>({ outgoing: [], incoming: [] });
   let editShareDrawerOpen = $state(false);
   let editShareDrawerOpenCount = $state(0);
   let editIndex = $state(0);
 
+  let createdCode = $state<string | null>(null);
+
   function refreshUserShares() {
     shockerSharesV2Api
       .sharesGetSharesByUsers()
@@ -28,6 +31,11 @@
       });
   }
 
+  function onCreatedCode(code: string) {
+    createdCode = code;
+    refreshUserShares();
+  }
+
   onMount(() => {
     refreshUserShares()
     refreshOwnHubs()
@@ -40,7 +48,8 @@
   }
 </script>
 
-<DialogShareCodeCreate bind:open={createDialogOpen} onCreated={refreshUserShares} />
+<DialogShareCodeCreate bind:open={createDialogOpen} onCreated={onCreatedCode} />
+<DialogShareCodeCreated bind:code={createdCode} />
 
 {#key editShareDrawerOpenCount}
   {#if userShares.outgoing[editIndex] !== undefined}

src/routes/(authenticated)/shares/user/dialog-share-code-create.svelte

@@ -6,6 +6,7 @@
   import MultiSelectCombobox from '$lib/components/ui/multi-select-combobox/multi-select-combobox.svelte';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { OwnHubsStore } from '$lib/stores/HubsStore';
+  import RestrictionsSelector from './restrictions-selector.svelte';
 
   let availableShockers = $derived(
     Array.from($OwnHubsStore)
@@ -23,20 +24,33 @@
 
   let { open = $bindable(), onCreated }: Props = $props();
 
+  interface ShockerPermLimitPairButNotNull {
+        permissions: {
+        shock: boolean;
+        vibrate: boolean;
+        sound: boolean;
+        live: boolean;
+      };
+      limits: {
+        intensity: number;
+        duration: number;
+      };
+  }
+
   let shockerIds = $state<string[]>([]);
-  let restrictions = $state<ShockerPermLimitPair>(getDefaultRestrictions());
+  let restrictions = $state<ShockerPermLimitPairButNotNull>(getDefaultRestrictions());
 
-  function getDefaultRestrictions(): ShockerPermLimitPair {
+  function getDefaultRestrictions(): ShockerPermLimitPairButNotNull {
     return {
       limits: {
-        duration: 30_000,
-        intensity: 100,
+        duration: 10_000,
+        intensity: 25,
       },
       permissions: {
-        shock: false,
-        vibrate: false,
-        sound: false,
-        live: false,
+        shock: true,
+        vibrate: true,
+        sound: true,
+        live: true,
       },
     };
   }
@@ -53,10 +67,10 @@
     try {
       const createdCode = await shockerSharesV2Api.sharesCreateShareInvite({
         shockers: shockerIds.map((id) => ({
-          shockerId: id,
-          permissions: restrictions.permissions,
-          limits: restrictions.limits,
-        })),
+          id: id,
+          permissions: { ...restrictions.permissions },
+          limits: { ...restrictions.limits },
+        }))
       });
       onCreated(createdCode);
       open = false;
@@ -81,6 +95,8 @@
         placeholder="Select shockers to share..."
         noMatchText="Not matching shockers"
       ></MultiSelectCombobox>
+
+      <RestrictionsSelector bind:permissions={restrictions.permissions} bind:limits={restrictions.limits} />
     </form>
     <Button onclick={onFormSubmit}>Create</Button>
   </Dialog.Content>

src/routes/(authenticated)/shares/user/dialog-share-code-created.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import KeyRound from '@lucide/svelte/icons/key-round';
+  import CopyInput from '$lib/components/CopyInput.svelte';
+  import * as Dialog from '$lib/components/ui/dialog';
+
+  interface Props {
+    code: string | null;
+  }
+
+  let { code = $bindable() }: Props = $props();
+
+  function onOpenChanged(open: boolean) {
+    if (!open) {
+      code = null;
+    }
+  }
+</script>
+
+<Dialog.Root bind:open={() => code !== null, onOpenChanged}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Share Code Generated</Dialog.Title>
+      <Dialog.Description>
+        Please copy share code!
+      </Dialog.Description>
+    </Dialog.Header>
+    <div class="flex flex-col items-center space-y-4">
+      <div class="flex w-full items-center justify-between rounded-md p-2">
+        <CopyInput value={code!}>
+          {#snippet icon()}
+            <KeyRound size="20" />
+          {/snippet}
+        </CopyInput>
+      </div>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

src/routes/(authenticated)/shares/user/edit-share.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { Volume2, Waves, Zap } from '@lucide/svelte';
   import { shockersV1Api } from '$lib/api';
   import type { V2UserSharesListItem } from '$lib/api/internal/v2';
   import { ComparePermissionsAndLimits } from '$lib/comparers/UserShareComparer';
@@ -8,14 +7,11 @@
   import { Badge } from '$lib/components/ui/badge';
   import { Button } from '$lib/components/ui/button';
   import * as Drawer from '$lib/components/ui/drawer';
-  import Label from '$lib/components/ui/label/label.svelte';
-  import Slider from '$lib/components/ui/slider/slider.svelte';
   import * as Tabs from '$lib/components/ui/tabs';
   import MultiPauseToggle from '$lib/components/utils/MultiPauseToggle.svelte';
   import PauseToggle from '$lib/components/utils/PauseToggle.svelte';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
-  import PermissionSwitch from './PermissionSwitch.svelte';
   import RestrictionsSelector from './restrictions-selector.svelte';
 
   interface Props {

…ted)/shares/user/PermissionSwitch.svelte …ed)/shares/user/permission-switch.sveltesrc/routes/(authenticated)/shares/user/PermissionSwitch.svelte renamed to src/routes/(authenticated)/shares/user/permission-switch.svelte src/routes/(authenticated)/shares/user/PermissionSwitch.svelte renamed to src/routes/(authenticated)/shares/user/permission-switch.svelte

@@ -2,8 +2,7 @@
   import { ChartNoAxesGantt, Volume2, Waves, Zap } from '@lucide/svelte';
   import Label from '$lib/components/ui/label/label.svelte';
   import { Slider } from '$lib/components/ui/slider';
-  import MultiPauseToggle from '$lib/components/utils/MultiPauseToggle.svelte';
-  import PermissionSwitch from './PermissionSwitch.svelte';
+  import PermissionSwitch from './permission-switch.svelte';
 
   interface Props {
     permissions: {

src/routes/(authenticated)/shares/user/restrictions-selector.svelte

@@ -8,7 +8,6 @@
   import * as Tooltip from '$lib/components/ui/tooltip';
   import MultiPauseToggle from '$lib/components/utils/MultiPauseToggle.svelte';
   import { Zap } from '@lucide/svelte';
-  import EditShare from './edit-share.svelte';
 
   interface Props {
     userShare: V2UserSharesListItem;