Add hub creation dialog

Closes #129

Author: hhvrc

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

@@ -12,6 +12,7 @@
   import { onMount } from 'svelte';
   import { type Hub, columns } from './columns';
   import DataTableActions from './data-table-actions.svelte';
+  import HubCreateDialog from './dialog-hub-create.svelte';
 
   const isMobile = new IsMobile();
 
@@ -48,6 +49,8 @@
   onMount(refreshOwnHubs);
 </script>
 
+<HubCreateDialog bind:open={showAddHubModal} />
+
 <Container>
   <Card.Header class="w-full">
     <Card.Title class="flex items-center justify-between space-x-2 text-3xl">

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { hubManagementV1Api } from '$lib/api';
+  import { Button } from '$lib/components/ui/button';
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+
+  interface Props {
+    open: boolean;
+  }
+
+  let { open = $bindable<boolean>() }: Props = $props();
+
+  function onSubmit() {
+    hubManagementV1Api
+      .devicesCreateDevice()
+      .catch(handleApiError)
+      .finally(() => (open = false));
+  }
+</script>
+
+<Dialog.Root bind:open={() => open, (o) => (open = o)}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Create hub</Dialog.Title>
+    </Dialog.Header>
+    <Button onclick={onSubmit}>Create</Button>
+  </Dialog.Content>
+</Dialog.Root>