Merge pull request #155 from rainlanguage/2024-01-30-gui-breadcrumbs

feat(tauri/ui): replace back button with breadcrumbs
rainlanguage · Jan 31, 2024 · 2a5c011 · 2a5c011
2 parents 659c1ef + 7a155ba
commit 2a5c011
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 48 deletions.
diff --git a/tauri-app/src/lib/components/ButtonBack.svelte b/tauri-app/src/lib/components/ButtonBack.svelte
diff --git a/tauri-app/src/lib/components/PageHeader.svelte b/tauri-app/src/lib/components/PageHeader.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Breadcrumb, BreadcrumbItem } from "flowbite-svelte";
+
+  export let title: string;
+</script>
+
+<div class="flex w-full items-center mb-8">
+  <div class="flex-1">
+    <Breadcrumb aria-label="Default breadcrumb example">
+      <BreadcrumbItem href="/" home></BreadcrumbItem>
+      <slot name="breadcrumbs"></slot>
+      <BreadcrumbItem spanClass="ms-1 text-sm font-medium text-gray-700 md:ms-2 dark:text-gray-300">{title}</BreadcrumbItem>
+    </Breadcrumb>
+  </div>
+  <h1 class="flex-0 text-4xl font-bold text-gray-900 dark:text-white">{title}</h1>
+  <div class="flex-1">
+    <div class="flex justify-end space-x-2">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</div>
diff --git a/tauri-app/src/routes/help/+page.svelte b/tauri-app/src/routes/help/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Heading } from 'flowbite-svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 </script>
 
-<Heading tag="h1" class="text-center text-4xl font-bold">Help</Heading>
+<PageHeader title="Help">
+</PageHeader>
diff --git a/tauri-app/src/routes/orders/+page.svelte b/tauri-app/src/routes/orders/+page.svelte
@@ -18,6 +18,7 @@
   import { orderRemove } from '$lib/utils/orderRemove';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
   import { walletAddressMatchesOrBlank } from '$lib/stores/settings';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 
   function gotoOrder(id: string) {
     goto(`/orders/${id}`);
@@ -27,15 +28,11 @@
   ordersList.refetch();
 </script>
 
-<div class="flex w-full">
-  <div class="flex-1"></div>
-  <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Orders</h1>
-  <div class="flex-1">
-    <div class="flex justify-end space-x-2">
-      <Button color="green" size="xs" >Add</Button>
-    </div>
-  </div>
-</div>
+<PageHeader title="Orders">
+  <svelte:fragment slot="actions">
+    <Button color="green" size="xs">Add</Button>
+  </svelte:fragment>
+</PageHeader>
 
 {#if $ordersList.length === 0}
   <div class="text-center text-gray-900 dark:text-white">No Orders found</div>

diff --git a/tauri-app/src/routes/orders/[id]/+page.svelte b/tauri-app/src/routes/orders/[id]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { Card } from 'flowbite-svelte';
+  import { BreadcrumbItem, Card } from 'flowbite-svelte';
   import { orderDetail } from '$lib/stores/orderDetail';
   import { walletAddressMatchesOrBlank } from '$lib/stores/settings';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
   import BadgeActive from '$lib/components/BadgeActive.svelte';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
   import ButtonVaultLink from '$lib/components/ButtonVaultLink.svelte';
-  import ButtonBack from '$lib/components/ButtonBack.svelte';
   import { orderRemove } from '$lib/utils/orderRemove';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 
   export let data: { id: string };
   let isSubmitting = false;
@@ -26,13 +26,12 @@
   orderDetail.refetch(data.id);
 </script>
 
-<div class="flex w-full">
-  <div class="flex-1">
-    <ButtonBack />
-  </div>
-  <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Order</h1>
-  <div class="flex-1"></div>
-</div>
+<PageHeader title="Order">
+  <svelte:fragment slot="breadcrumbs">
+    <BreadcrumbItem href="/orders">Orders</BreadcrumbItem>
+  </svelte:fragment>
+</PageHeader>
+
 {#if order === undefined}
   <div class="text-center text-gray-900 dark:text-white">Order not found</div>
 {:else}

diff --git a/tauri-app/src/routes/settings/+page.svelte b/tauri-app/src/routes/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Alert, Heading, Label, Input, Helper } from 'flowbite-svelte';
+  import { Alert, Label, Input, Helper } from 'flowbite-svelte';
   import BadgeExternalLink from '$lib/components/BadgeExternalLink.svelte';
   import {
     rpcUrl,
@@ -14,9 +14,11 @@
   } from '$lib/stores/settings';
   import { activeChain } from '$lib/stores/chain';
   import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 </script>
 
-<Heading tag="h1" class="mb-8 text-center text-4xl font-bold">Settings</Heading>
+<PageHeader title="Settings">
+</PageHeader>
 
 <div class="flex w-full justify-center">
   <div class="max-w-screen-lg">

diff --git a/tauri-app/src/routes/vaults/+page.svelte b/tauri-app/src/routes/vaults/+page.svelte
@@ -14,6 +14,7 @@
   import ModalVaultDepositGeneric from '$lib/components/ModalVaultDepositGeneric.svelte';
   import ModalVaultWithdrawGeneric from '$lib/components/ModalVaultWithdrawGeneric.svelte';
   import { toHex } from 'viem';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 
   let showDepositModal = false;
   let showWithdrawModal = false;
@@ -33,16 +34,12 @@
   vaultsList.refetch();
 </script>
 
-<div class="flex w-full">
-  <div class="flex-1"></div>
-  <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Vaults</h1>
-  <div class="flex-1">
-    <div class="flex justify-end space-x-2">
-      <Button color="green" size="xs" on:click={toggleDepositModal}>Deposit</Button>
-      <Button color="blue" size="xs" on:click={toggleWithdrawModal}>Withdraw</Button>
-    </div>
-  </div>
-</div>
+<PageHeader title="Vaults">
+  <svelte:fragment slot="actions">
+    <Button color="green" size="xs" on:click={toggleDepositModal}>Deposit</Button>
+    <Button color="blue" size="xs" on:click={toggleWithdrawModal}>Withdraw</Button>
+  </svelte:fragment>
+</PageHeader>
 
 {#if $vaultsList.length === 0}
   <div class="text-center text-gray-900 dark:text-white">No Vaults found</div>

diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte
@@ -9,14 +9,15 @@
     TableBody,
     TableBodyRow,
     TableBodyCell,
+    BreadcrumbItem,
   } from 'flowbite-svelte';
   import { vaultDetail } from '$lib/stores/vaultDetail';
   import ModalVaultDeposit from '$lib/components/ModalVaultDeposit.svelte';
   import ModalVaultWithdraw from '$lib/components/ModalVaultWithdraw.svelte';
   import { walletAddress } from '$lib/stores/settings';
   import { toHex } from 'viem';
   import { formatTimestampSecondsAsLocal } from '$lib/utils/time';
-  import ButtonBack from '$lib/components/ButtonBack.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
 
   export let data: { id: string };
   let showDepositModal = false;
@@ -33,13 +34,12 @@
   }
 </script>
 
-<div class="flex w-full">
-  <div class="flex-1">
-    <ButtonBack />
-  </div>
-  <h1 class="flex-0 mb-8 text-4xl font-bold text-gray-900 dark:text-white">Vault</h1>
-  <div class="flex-1"></div>
-</div>
+<PageHeader title="Vault">
+  <svelte:fragment slot="breadcrumbs">
+    <BreadcrumbItem href="/vaults">Vaults</BreadcrumbItem>
+  </svelte:fragment>
+</PageHeader>
+
 {#if vault === undefined}
   <div class="text-center text-gray-900 dark:text-white">Vault not found</div>
 {:else}