Work on more

Author: hhvrc

src/routes/(authenticated)/hubs/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Plus } from '@lucide/svelte';
   import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
   import type { SortingState } from '@tanstack/table-core';
   import Container from '$lib/components/Container.svelte';
@@ -38,16 +39,28 @@
   });
   let sorting = $state<SortingState>([]);
 
+  let showAddHubModal = $state<boolean>(false);
+
   onMount(refreshOwnHubs);
 </script>
 
 <Container>
   <Card.Header class="w-full">
     <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
       Hubs
+      <div>
+        <Button onclick={() => (showAddHubModal = true)}>
+          <Plus />
+          Add Hub
+        </Button>
+        <Button onclick={refreshOwnHubs}>
+          <RotateCcw />
+          Refresh
+        </Button>
+      </div>
       <Button class="btn variant-filled-primary text-xl" onclick={() => {}}>
         <RotateCcw />
-        <span> Refresh </span>
+        <span> Add </span>
       </Button>
     </Card.Title>
     <Card.Description>This is a list of all hubs you own.</Card.Description>

src/routes/(authenticated)/hubs/dialog-hub-delete.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { hubManagementV1Api } from '$lib/api';
   import Button from '$lib/components/ui/button/button.svelte';
   import * as Dialog from '$lib/components/ui/dialog';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import type { Hub } from './columns';
 
   interface Props {
@@ -11,7 +13,10 @@
   let { open = $bindable<boolean>(), hub }: Props = $props();
 
   function deleteHub() {
-    console.log('deleteHub');
+    hubManagementV1Api
+      .devicesRemoveDevice(hub.id)
+      .then(() => (open = false))
+      .catch(handleApiError);
   }
 </script>
 
@@ -20,7 +25,8 @@
     <Dialog.Header>
       <Dialog.Title>Delete hub</Dialog.Title>
       <Dialog.Description>
-        Are you sure you want to delete <strong>{hub.name}</strong>?
+        Are you sure you want to delete <strong>{hub.name}</strong>?<br />
+        <strong>This action is irreversible.</strong>
       </Dialog.Description>
     </Dialog.Header>
     <Button variant="destructive" onclick={deleteHub}>Delete</Button>

src/routes/(authenticated)/settings/api-tokens/+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 type { TokenResponse } from '$lib/api/internal/v1';
@@ -40,8 +41,8 @@
       API Tokens
       <div>
         <Button onclick={() => (showGenerateTokenModal = true)}>
-          <RotateCcw />
-          <span> Generate Token </span>
+          <Plus />
+          Generate Token
         </Button>
         <Button onclick={refreshApiTokens}>
           <RotateCcw />