From 88f594ee509a0d4be3fbffc181415e06d973569e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Fri, 30 Jun 2023 00:07:14 +0200
Subject: [PATCH 01/10] feat: Added some primitive components and routing setup

---
 package.json                              |  1 +
 src-tauri/tauri.conf.json                 | 84 +++++++++++------------
 src/App.svelte                            | 17 ++++-
 src/components/.gitkeep                   |  0
 src/components/primitives/Button.svelte   | 42 ++++++++++++
 src/components/primitives/Typeface.svelte | 31 +++++++++
 src/pages/.gitkeep                        |  0
 src/pages/Dashboard.svelte                |  1 +
 src/pages/Discovery.svelte                | 13 ++++
 src/styles.css                            |  2 +-
 svelte.config.js                          | 12 ++--
 yarn.lock                                 |  5 ++
 12 files changed, 157 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/.gitkeep
 create mode 100644 src/components/primitives/Button.svelte
 create mode 100644 src/components/primitives/Typeface.svelte
 delete mode 100644 src/pages/.gitkeep
 create mode 100644 src/pages/Dashboard.svelte
 create mode 100644 src/pages/Discovery.svelte

diff --git a/package.json b/package.json
index 74a19ef..b972791 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
         "svelte": "^3.54.0",
         "svelte-check": "^3.0.0",
         "svelte-preprocess": "^5.0.3",
+        "svelte-routing": "^1.10.0",
         "tailwind-scrollbar": "^3.0.4",
         "tailwindcss": "^3.3.1",
         "tslib": "^2.4.1",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 0c0445a..972a200 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,46 +1,46 @@
 {
-  "build": {
-    "beforeDevCommand": "yarn dev:client",
-    "beforeBuildCommand": "yarn build:client",
-    "devPath": "http://localhost:1420",
-    "distDir": "../dist",
-    "withGlobalTauri": false
-  },
-  "package": {
-    "productName": "huehuehue",
-    "version": "0.0.1"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false,
-      "shell": {
-        "all": false,
-        "open": true
-      }
+    "build": {
+        "beforeDevCommand": "yarn dev:client",
+        "beforeBuildCommand": "yarn build:client",
+        "devPath": "http://localhost:1420",
+        "distDir": "../dist",
+        "withGlobalTauri": false
     },
-    "bundle": {
-      "active": true,
-      "targets": "all",
-      "identifier": "com.huehuehue.dev",
-      "icon": [
-        "icons/32x32.png",
-        "icons/128x128.png",
-        "icons/128x128@2x.png",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ]
+    "package": {
+        "productName": "huehuehue",
+        "version": "0.0.1"
     },
-    "security": {
-      "csp": null
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "resizable": true,
-        "title": "huehuehue",
-        "width": 800,
-        "height": 600
-      }
-    ]
-  }
+    "tauri": {
+        "allowlist": {
+            "all": false,
+            "shell": {
+                "all": false,
+                "open": true
+            }
+        },
+        "bundle": {
+            "active": true,
+            "targets": "all",
+            "identifier": "com.huehuehue.dev",
+            "icon": [
+                "icons/32x32.png",
+                "icons/128x128.png",
+                "icons/128x128@2x.png",
+                "icons/icon.icns",
+                "icons/icon.ico"
+            ]
+        },
+        "security": {
+            "csp": null
+        },
+        "windows": [
+            {
+                "fullscreen": false,
+                "resizable": true,
+                "title": "huehuehue",
+                "width": 800,
+                "height": 600
+            }
+        ]
+    }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 853cb19..730516b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,19 @@
 <script lang="ts">
+    import { Route, Router } from 'svelte-routing';
+    import Dashboard from './pages/Dashboard.svelte';
+    import Discovery from './pages/Discovery.svelte';
+
+    /**
+     * To actually decide if the discovery is needed, get the state from the
+     * rust backend.
+     */
+    let needsDiscovery = true;
+    let originalURL = needsDiscovery ? '/discovery' : '/';
 </script>
 
-<div class="h-screen w-screen bg-ink-500">
-    <h1 class="text-4xl bg-nebula-400 text-snow-500">hello world!</h1>
+<div class="h-screen w-screen bg-ink-400 p-6">
+    <Router url={originalURL}>
+        <Route path="/" component={Dashboard} />
+        <Route path="/discovery" component={Discovery} />
+    </Router>
 </div>
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/primitives/Button.svelte b/src/components/primitives/Button.svelte
new file mode 100644
index 0000000..2ea6734
--- /dev/null
+++ b/src/components/primitives/Button.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { cva, type VariantProps } from 'class-variance-authority';
+
+    let styling = cva('transition-colors px-4 py-2 font-semibold', {
+        variants: {
+            coloring: {
+                default: 'bg-ink-500 enabled:hover:bg-ink-600 text-snow-500',
+                nebula: 'bg-nebula-500 enabled:hover:bg-nebula-600 text-ink-400',
+            },
+            rounding: {
+                full: 'rounded-full',
+                xl: 'rounded-xl',
+                lg: 'rounded-lg',
+                md: 'rounded-md',
+                sm: 'rounded-sm',
+            },
+            fullWidth: {
+                true: 'w-full grow',
+            },
+            disabled: {
+                true: 'contrast-75 opacity-80',
+            },
+        },
+        defaultVariants: {
+            coloring: 'default',
+            rounding: 'lg',
+        },
+    });
+
+    export let label: string;
+    export let onClick: () => void;
+    export let disabled: boolean = false;
+    export let fullWidth: boolean = false;
+    export let coloring: VariantProps<typeof styling>['coloring'] = 'default';
+    export let rounding: VariantProps<typeof styling>['rounding'] = 'lg';
+</script>
+
+<button
+    class={styling({ coloring, rounding, fullWidth, disabled })}
+    on:click={onClick}
+    {disabled}>{label}</button
+>
diff --git a/src/components/primitives/Typeface.svelte b/src/components/primitives/Typeface.svelte
new file mode 100644
index 0000000..b021c2e
--- /dev/null
+++ b/src/components/primitives/Typeface.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { cva, type VariantProps } from 'class-variance-authority';
+
+    let styling = cva('', {
+        variants: {
+            variant: {
+                light: 'text-snow-500',
+                dark: 'text-ink-400',
+                code: 'text-snow-500 font-mono',
+            },
+            size: {
+                xxl: 'text-4xl font-black',
+                xl: 'text-2xl font-extrabold',
+                lg: 'text-xl font-bold',
+                md: 'text-base',
+                sm: 'text-sm',
+            },
+        },
+        defaultVariants: {
+            variant: 'light',
+            size: 'md',
+        },
+    });
+
+    export let variant: VariantProps<typeof styling>['variant'] = 'light';
+    export let size: VariantProps<typeof styling>['size'] = 'md';
+</script>
+
+<p {...$$props} class={styling({ variant, size, class: $$props.class })}>
+    <slot />
+</p>
diff --git a/src/pages/.gitkeep b/src/pages/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/Dashboard.svelte b/src/pages/Dashboard.svelte
new file mode 100644
index 0000000..a3e6922
--- /dev/null
+++ b/src/pages/Dashboard.svelte
@@ -0,0 +1 @@
+<p>dashboard</p>
diff --git a/src/pages/Discovery.svelte b/src/pages/Discovery.svelte
new file mode 100644
index 0000000..b686fc6
--- /dev/null
+++ b/src/pages/Discovery.svelte
@@ -0,0 +1,13 @@
+<script>
+    import Button from '../components/primitives/Button.svelte';
+    import Typeface from '../components/primitives/Typeface.svelte';
+</script>
+
+<Typeface>this is text</Typeface>
+<Button
+    label="lable"
+    onClick={() => {}}
+    coloring="nebula"
+    rounding="lg"
+    fullWidth
+/>
diff --git a/src/styles.css b/src/styles.css
index a051e6d..153f6d3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,7 +4,7 @@
 
 @font-face {
     font-family: 'Inter';
-    src: url('/public/Inter.ttf');
+    src: url('/Inter.ttf');
     font-feature-settings: 'tnum';
     font-weight: 100 900;
 }
diff --git a/svelte.config.js b/svelte.config.js
index 678adc0..9c449b8 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,11 +1,11 @@
-import preprocess from "svelte-preprocess";
+import preprocess from 'svelte-preprocess';
 
 const config = {
-  preprocess: [
-    preprocess({
-      postcss: true,
-    }),
-  ],
+    preprocess: [
+        preprocess({
+            postcss: true,
+        }),
+    ],
 };
 
 export default config;
diff --git a/yarn.lock b/yarn.lock
index df83982..87ce665 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2022,6 +2022,11 @@ svelte-preprocess@^5.0.3:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
+svelte-routing@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/svelte-routing/-/svelte-routing-1.10.0.tgz#4095484b95f636134e555b6b51c877ea6dfa159e"
+  integrity sha512-ZYQEj7FK03iVHpzNg1Uk7svlD8siFks0a+IPUxn7ckaEL7H1uQl17gTdYRMjuEw2f7ZtgE77l6WDjmGql14JbA==
+
 svelte@^3.54.0:
   version "3.59.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.59.2.tgz#a137b28e025a181292b2ae2e3dca90bf8ec73aec"

From b7303148edffe179532a0064e16a787d348b415f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Fri, 30 Jun 2023 12:38:03 +0200
Subject: [PATCH 02/10] feat: Added `Icon` primitive component

This commit adds a working `Icon` component which uses FontAwesome icons.
---
 package.json                            |  3 +++
 src/components/primitives/Button.svelte | 22 +++++++++++++++-------
 src/components/primitives/Icon.svelte   | 22 ++++++++++++++++++++++
 src/pages/Discovery.svelte              | 12 ++++--------
 tailwind.config.cjs                     |  6 ++++--
 yarn.lock                               | 24 ++++++++++++++++++++++++
 6 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 src/components/primitives/Icon.svelte

diff --git a/package.json b/package.json
index b972791..cc5c326 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,13 @@
         "release": "standard-version"
     },
     "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@tauri-apps/api": "^1.4.0",
         "class-variance-authority": "^0.6.1",
         "prettier": "^2.8.8",
         "prettier-plugin-svelte": "^2.10.1",
+        "svelte-fa": "^3.0.4",
         "tailwind-merge": "^1.13.2"
     },
     "devDependencies": {
diff --git a/src/components/primitives/Button.svelte b/src/components/primitives/Button.svelte
index 2ea6734..2050274 100644
--- a/src/components/primitives/Button.svelte
+++ b/src/components/primitives/Button.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+    import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
     import { cva, type VariantProps } from 'class-variance-authority';
+    import Icon from './Icon.svelte';
 
     let styling = cva('transition-colors px-4 py-2 font-semibold', {
         variants: {
-            coloring: {
-                default: 'bg-ink-500 enabled:hover:bg-ink-600 text-snow-500',
+            variant: {
+                dark: 'bg-ink-500 enabled:hover:bg-ink-600 text-snow-500',
+                light: 'bg-snow-500 enabled:hover:bg-snow-600 text-ink-400',
                 nebula: 'bg-nebula-500 enabled:hover:bg-nebula-600 text-ink-400',
             },
             rounding: {
@@ -12,7 +15,6 @@
                 xl: 'rounded-xl',
                 lg: 'rounded-lg',
                 md: 'rounded-md',
-                sm: 'rounded-sm',
             },
             fullWidth: {
                 true: 'w-full grow',
@@ -22,21 +24,27 @@
             },
         },
         defaultVariants: {
-            coloring: 'default',
+            variant: 'dark',
             rounding: 'lg',
         },
     });
 
+    export let icon: IconDefinition | undefined = undefined;
     export let label: string;
     export let onClick: () => void;
     export let disabled: boolean = false;
     export let fullWidth: boolean = false;
-    export let coloring: VariantProps<typeof styling>['coloring'] = 'default';
+    export let variant: VariantProps<typeof styling>['variant'] = 'dark';
     export let rounding: VariantProps<typeof styling>['rounding'] = 'lg';
 </script>
 
 <button
-    class={styling({ coloring, rounding, fullWidth, disabled })}
+    class={styling({ variant, rounding, fullWidth, disabled })}
     on:click={onClick}
-    {disabled}>{label}</button
+    {disabled}
 >
+    <span class="flex flex-row gap-2 items-center justify-center">
+        <Icon {icon} variant={variant === 'dark' ? 'light' : 'dark'} />
+        {label}</span
+    >
+</button>
diff --git a/src/components/primitives/Icon.svelte b/src/components/primitives/Icon.svelte
new file mode 100644
index 0000000..3261584
--- /dev/null
+++ b/src/components/primitives/Icon.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+    import { cva, type VariantProps } from 'class-variance-authority';
+    import Fa from 'svelte-fa/src/fa.svelte';
+
+    const styling = cva('transition-colors', {
+        variants: {
+            variant: {
+                light: 'text-snow-500',
+                dark: 'text-ink-400',
+                nebula: 'text-nebula-500',
+            },
+        },
+    });
+
+    export let icon: IconDefinition | undefined = undefined;
+    export let variant: VariantProps<typeof styling>['variant'] = 'dark';
+</script>
+
+{#if icon}
+    <Fa {icon} class={styling({ variant, class: $$props.class })} />
+{/if}
diff --git a/src/pages/Discovery.svelte b/src/pages/Discovery.svelte
index b686fc6..2ae55fe 100644
--- a/src/pages/Discovery.svelte
+++ b/src/pages/Discovery.svelte
@@ -1,13 +1,9 @@
-<script>
+<script lang="ts">
+    import { faAmbulance, faGears } from '@fortawesome/free-solid-svg-icons';
     import Button from '../components/primitives/Button.svelte';
+    import Icon from '../components/primitives/Icon.svelte';
     import Typeface from '../components/primitives/Typeface.svelte';
 </script>
 
 <Typeface>this is text</Typeface>
-<Button
-    label="lable"
-    onClick={() => {}}
-    coloring="nebula"
-    rounding="lg"
-    fullWidth
-/>
+<Button icon={faAmbulance} label="lable" onClick={() => {}} />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 20d8861..c001903 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,8 +6,8 @@ const config = {
         colors: {
             ink: {
                 400: '#16141D',
-                500: '#1D1A23',
-                600: '#2F2D34',
+                500: '#211C29',
+                600: '#302D3A',
             },
             nebula: {
                 400: '#542DC1',
@@ -18,7 +18,9 @@ const config = {
                 500: '#FF63F7',
             },
             snow: {
+                400: '#D2DFE3',
                 500: '#F0FBFF',
+                600: '#FCFEFF',
             },
         },
         extend: {},
diff --git a/yarn.lock b/yarn.lock
index 87ce665..19001a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -138,6 +138,25 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
   integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
 
+"@fortawesome/fontawesome-common-types@6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
+  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
+
+"@fortawesome/free-brands-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f"
+  integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
 "@hutson/parse-repository-url@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
@@ -2006,6 +2025,11 @@ svelte-check@^3.0.0:
     svelte-preprocess "^5.0.3"
     typescript "^5.0.3"
 
+svelte-fa@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-3.0.4.tgz#22543b801950fe4a9a801ba8d4769a53d80c0782"
+  integrity sha512-y04vEuAoV1wwVDItSCzPW7lzT6v1bj/y1p+W1V+NtIMpQ+8hj8MBkx7JFD7JHSnalPU1QiI8BVfguqheEA3nPg==
+
 svelte-hmr@^0.15.2:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.2.tgz#d2f6fc82e040f2734abd54cea5cbef46828f2538"

From 0284b8530bbee48a151b2fcdbb1f9178a3ad4a3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Fri, 30 Jun 2023 12:43:43 +0200
Subject: [PATCH 03/10] feat: `Typeface` now not selectable anymore

---
 src/components/primitives/Typeface.svelte | 2 +-
 src/pages/Discovery.svelte                | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/primitives/Typeface.svelte b/src/components/primitives/Typeface.svelte
index b021c2e..a7af0f3 100644
--- a/src/components/primitives/Typeface.svelte
+++ b/src/components/primitives/Typeface.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { cva, type VariantProps } from 'class-variance-authority';
 
-    let styling = cva('', {
+    let styling = cva('select-none', {
         variants: {
             variant: {
                 light: 'text-snow-500',
diff --git a/src/pages/Discovery.svelte b/src/pages/Discovery.svelte
index 2ae55fe..41e64eb 100644
--- a/src/pages/Discovery.svelte
+++ b/src/pages/Discovery.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { faAmbulance, faGears } from '@fortawesome/free-solid-svg-icons';
+    import { faAmbulance } from '@fortawesome/free-solid-svg-icons';
     import Button from '../components/primitives/Button.svelte';
-    import Icon from '../components/primitives/Icon.svelte';
     import Typeface from '../components/primitives/Typeface.svelte';
 </script>
 

From 139c3f11d165609973b84ca6ed2a60041557a136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Fri, 30 Jun 2023 13:44:57 +0200
Subject: [PATCH 04/10] feat: Now able to optionally add classes to the
 `Typeface`

---
 src/components/primitives/Typeface.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/primitives/Typeface.svelte b/src/components/primitives/Typeface.svelte
index a7af0f3..9b90ec8 100644
--- a/src/components/primitives/Typeface.svelte
+++ b/src/components/primitives/Typeface.svelte
@@ -24,8 +24,9 @@
 
     export let variant: VariantProps<typeof styling>['variant'] = 'light';
     export let size: VariantProps<typeof styling>['size'] = 'md';
+    export let className: string = '';
 </script>
 
-<p {...$$props} class={styling({ variant, size, class: $$props.class })}>
+<p {...$$props} class={styling({ variant, size, class: className })}>
     <slot />
 </p>

From 5dab19b84f8912ef018fd42b4b81a2d95604d8bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Fri, 30 Jun 2023 17:11:25 +0200
Subject: [PATCH 05/10] feat: WIP `Input` primitive component

---
 src/components/primitives/Button.svelte |  8 +++++++-
 src/components/primitives/Input.svelte  | 11 +++++++++++
 src/pages/Discovery.svelte              |  4 +++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/components/primitives/Input.svelte

diff --git a/src/components/primitives/Button.svelte b/src/components/primitives/Button.svelte
index 2050274..9ddfdaa 100644
--- a/src/components/primitives/Button.svelte
+++ b/src/components/primitives/Button.svelte
@@ -16,6 +16,10 @@
                 lg: 'rounded-lg',
                 md: 'rounded-md',
             },
+            size: {
+                lg: 'text-base',
+                md: 'text-sm tracking-wide',
+            },
             fullWidth: {
                 true: 'w-full grow',
             },
@@ -26,6 +30,7 @@
         defaultVariants: {
             variant: 'dark',
             rounding: 'lg',
+            size: 'lg',
         },
     });
 
@@ -36,10 +41,11 @@
     export let fullWidth: boolean = false;
     export let variant: VariantProps<typeof styling>['variant'] = 'dark';
     export let rounding: VariantProps<typeof styling>['rounding'] = 'lg';
+    export let size: VariantProps<typeof styling>['size'] = 'lg';
 </script>
 
 <button
-    class={styling({ variant, rounding, fullWidth, disabled })}
+    class={styling({ variant, rounding, fullWidth, disabled, size })}
     on:click={onClick}
     {disabled}
 >
diff --git a/src/components/primitives/Input.svelte b/src/components/primitives/Input.svelte
new file mode 100644
index 0000000..ef1ed8f
--- /dev/null
+++ b/src/components/primitives/Input.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { cva } from 'class-variance-authority';
+
+    let styling = cva('transition-colors', {
+        variants: {},
+    });
+
+    export let value: string = '';
+</script>
+
+<input {value} />
diff --git a/src/pages/Discovery.svelte b/src/pages/Discovery.svelte
index 41e64eb..3cef52f 100644
--- a/src/pages/Discovery.svelte
+++ b/src/pages/Discovery.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { faAmbulance } from '@fortawesome/free-solid-svg-icons';
     import Button from '../components/primitives/Button.svelte';
+    import Input from '../components/primitives/Input.svelte';
     import Typeface from '../components/primitives/Typeface.svelte';
 </script>
 
 <Typeface>this is text</Typeface>
-<Button icon={faAmbulance} label="lable" onClick={() => {}} />
+<Button icon={faAmbulance} label="lable" onClick={() => {}} size="md" />
+<Input />

From a3312a88bb529578ea99c9a2942d40269471506d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Mon, 10 Jul 2023 17:03:21 +0200
Subject: [PATCH 06/10] feat: Moved primitives into lib dir

---
 src/{components => lib}/primitives/Button.svelte   | 0
 src/{components => lib}/primitives/Icon.svelte     | 0
 src/{components => lib}/primitives/Input.svelte    | 0
 src/{components => lib}/primitives/Typeface.svelte | 0
 src/routes/+page.svelte                            | 8 ++++----
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{components => lib}/primitives/Button.svelte (100%)
 rename src/{components => lib}/primitives/Icon.svelte (100%)
 rename src/{components => lib}/primitives/Input.svelte (100%)
 rename src/{components => lib}/primitives/Typeface.svelte (100%)

diff --git a/src/components/primitives/Button.svelte b/src/lib/primitives/Button.svelte
similarity index 100%
rename from src/components/primitives/Button.svelte
rename to src/lib/primitives/Button.svelte
diff --git a/src/components/primitives/Icon.svelte b/src/lib/primitives/Icon.svelte
similarity index 100%
rename from src/components/primitives/Icon.svelte
rename to src/lib/primitives/Icon.svelte
diff --git a/src/components/primitives/Input.svelte b/src/lib/primitives/Input.svelte
similarity index 100%
rename from src/components/primitives/Input.svelte
rename to src/lib/primitives/Input.svelte
diff --git a/src/components/primitives/Typeface.svelte b/src/lib/primitives/Typeface.svelte
similarity index 100%
rename from src/components/primitives/Typeface.svelte
rename to src/lib/primitives/Typeface.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 84e6a5b..eebfef2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,9 @@
 <script>
+    import Greet from '$lib/Greet.svelte';
+    import Button from '$lib/primitives/Button.svelte';
+    import Input from '$lib/primitives/Input.svelte';
+    import Typeface from '$lib/primitives/Typeface.svelte';
     import { faGauge } from '@fortawesome/free-solid-svg-icons';
-    import Button from '../components/primitives/Button.svelte';
-    import Input from '../components/primitives/Input.svelte';
-    import Typeface from '../components/primitives/Typeface.svelte';
-    import Greet from '../lib/Greet.svelte';
 </script>
 
 <Typeface>Gaggi?</Typeface>

From 0219a3ed9e3074fafedd4da15bd8dd0d7d2aab4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Mon, 10 Jul 2023 17:49:13 +0200
Subject: [PATCH 07/10] feat: Rewriting the discovery UI

---
 src/lib/Greet.svelte                          | 19 ------------
 src/lib/components/LoadingWithLabel.svelte    | 11 +++++++
 .../{ => components}/primitives/Button.svelte |  0
 .../{ => components}/primitives/Icon.svelte   |  6 +++-
 .../{ => components}/primitives/Input.svelte  |  0
 .../primitives/LoadingSpinner.svelte          | 11 +++++++
 .../primitives/Typeface.svelte                |  0
 src/routes/+layout.svelte                     |  7 +++++
 src/routes/+page.svelte                       | 13 +-------
 src/routes/discovery/+page.svelte             | 30 +++++++++++++++++++
 tailwind.config.cjs                           |  5 ++++
 11 files changed, 70 insertions(+), 32 deletions(-)
 delete mode 100644 src/lib/Greet.svelte
 create mode 100644 src/lib/components/LoadingWithLabel.svelte
 rename src/lib/{ => components}/primitives/Button.svelte (100%)
 rename src/lib/{ => components}/primitives/Icon.svelte (77%)
 rename src/lib/{ => components}/primitives/Input.svelte (100%)
 create mode 100644 src/lib/components/primitives/LoadingSpinner.svelte
 rename src/lib/{ => components}/primitives/Typeface.svelte (100%)
 create mode 100644 src/routes/discovery/+page.svelte

diff --git a/src/lib/Greet.svelte b/src/lib/Greet.svelte
deleted file mode 100644
index 3fcf415..0000000
--- a/src/lib/Greet.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-    import { getDiscoveredBridges } from '../bindings';
-    const discoveredBridgesPromise = getDiscoveredBridges();
-</script>
-
-<div>
-    {#await discoveredBridgesPromise}
-        <h1 class="text-4xl bg-nebula-400 text-snow-500">hello world!</h1>
-        <p class="text-black">loading...</p>
-    {:then discoveredBridges}
-        <ul>
-            {#each discoveredBridges as [mdns, ip]}
-                <li>{`${mdns} - ${ip}`}</li>
-            {/each}
-        </ul>
-    {:catch error}
-        <p class="text-black">error: {error.message}</p>
-    {/await}
-</div>
diff --git a/src/lib/components/LoadingWithLabel.svelte b/src/lib/components/LoadingWithLabel.svelte
new file mode 100644
index 0000000..fce4af7
--- /dev/null
+++ b/src/lib/components/LoadingWithLabel.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
+    import Typeface from '$lib/components/primitives/Typeface.svelte';
+</script>
+
+<span class="flex flex-col gap-3 items-center justify-center">
+    <LoadingSpinner />
+    <Typeface class="w-4/5 text-center text-snow-300 opacity-75" size="sm"
+        >Searching for Bridges in your network...</Typeface
+    >
+</span>
diff --git a/src/lib/primitives/Button.svelte b/src/lib/components/primitives/Button.svelte
similarity index 100%
rename from src/lib/primitives/Button.svelte
rename to src/lib/components/primitives/Button.svelte
diff --git a/src/lib/primitives/Icon.svelte b/src/lib/components/primitives/Icon.svelte
similarity index 77%
rename from src/lib/primitives/Icon.svelte
rename to src/lib/components/primitives/Icon.svelte
index 5c9b823..b2fca8c 100644
--- a/src/lib/primitives/Icon.svelte
+++ b/src/lib/components/primitives/Icon.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
     import { cva, type VariantProps } from 'class-variance-authority';
+    // @ts-ignore
     import Fa from 'svelte-fa/src/fa.svelte';
 
     const styling = cva('transition-colors', {
@@ -15,12 +16,15 @@
 
     interface $$Props extends VariantProps<typeof styling> {
         icon?: IconDefinition;
+        class?: string;
+        size?: `${number}x`;
     }
 
     export let icon: $$Props['icon'] = undefined;
     export let variant: $$Props['variant'] = 'dark';
+    export let size: $$Props['size'] = '1x';
 </script>
 
 {#if icon}
-    <Fa {icon} class={styling({ variant, class: $$props.class })} />
+    <Fa {icon} {size} fw class={styling({ variant, class: $$props.class })} />
 {/if}
diff --git a/src/lib/primitives/Input.svelte b/src/lib/components/primitives/Input.svelte
similarity index 100%
rename from src/lib/primitives/Input.svelte
rename to src/lib/components/primitives/Input.svelte
diff --git a/src/lib/components/primitives/LoadingSpinner.svelte b/src/lib/components/primitives/LoadingSpinner.svelte
new file mode 100644
index 0000000..91431de
--- /dev/null
+++ b/src/lib/components/primitives/LoadingSpinner.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+    import Icon from './Icon.svelte';
+</script>
+
+<Icon
+    variant="light"
+    size="2x"
+    icon={faCircleNotch}
+    class="animate-spin text-snow-300 opacity-75"
+/>
diff --git a/src/lib/primitives/Typeface.svelte b/src/lib/components/primitives/Typeface.svelte
similarity index 100%
rename from src/lib/primitives/Typeface.svelte
rename to src/lib/components/primitives/Typeface.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c022bac..7a8c11b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import '../styles.css';
+
+    let needsDiscovery = true;
+
+    if (needsDiscovery) {
+        goto('/discovery');
+    }
 </script>
 
 <div class="bg-ink-400 w-screen h-screen p-6"><slot /></div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index eebfef2..278eb5e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1 @@
-<script>
-    import Greet from '$lib/Greet.svelte';
-    import Button from '$lib/primitives/Button.svelte';
-    import Input from '$lib/primitives/Input.svelte';
-    import Typeface from '$lib/primitives/Typeface.svelte';
-    import { faGauge } from '@fortawesome/free-solid-svg-icons';
-</script>
-
-<Typeface>Gaggi?</Typeface>
-<Greet />
-<Button label="asdasd" icon={faGauge} />
-<Input />
+<p>main route</p>
diff --git a/src/routes/discovery/+page.svelte b/src/routes/discovery/+page.svelte
new file mode 100644
index 0000000..567a4fd
--- /dev/null
+++ b/src/routes/discovery/+page.svelte
@@ -0,0 +1,30 @@
+<script>
+    import LoadingWithLabel from '$lib/components/LoadingWithLabel.svelte';
+    import Typeface from '$lib/components/primitives/Typeface.svelte';
+    import { getDiscoveredBridges } from '../../bindings';
+
+    const bridges = getDiscoveredBridges();
+</script>
+
+<div class="h-full w-full flex items-center justify-center">
+    <div class="w-3/5 flex flex-col gap-9 items-center">
+        <Typeface class="text-center" size="lg">Select your Hue Bridge</Typeface
+        >
+
+        {#await bridges}
+            <LoadingWithLabel />
+        {:then bridges}
+            {#if bridges.length === 0}
+                <LoadingWithLabel />
+            {:else}
+                <ul>
+                    {#each bridges as [mdns, ip]}
+                        <li>{`${mdns} - ${ip}`}</li>
+                    {/each}
+                </ul>
+            {/if}
+        {:catch error}
+            <Typeface>{error.message}</Typeface>
+        {/await}
+    </div>
+</div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c001903..568804d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,3 +1,7 @@
+/**
+ * Colors link: https://coolors.co/16141d-1d1a23-2f2d34-f0fbff-542dc1-6f00ff-8666fb-ff63f7
+ */
+
 /** @type {import('tailwindcss').Config}*/
 const config = {
     content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -18,6 +22,7 @@ const config = {
                 500: '#FF63F7',
             },
             snow: {
+                300: '#B7C4C8',
                 400: '#D2DFE3',
                 500: '#F0FBFF',
                 600: '#FCFEFF',

From 111aa089bc1d354b2a1088f6f88b84024af62a15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Mon, 10 Jul 2023 18:15:22 +0200
Subject: [PATCH 08/10] feat: Extends discovery UI to better display found
 bridges

---
 src/lib/components/LoadingWithLabel.svelte    |  4 +-
 .../components/discovery/BridgesList.svelte   | 14 ++++++
 .../discovery/BridgesListItem.svelte          | 12 +++++
 .../primitives/LoadingSpinner.svelte          |  6 ++-
 src/routes/discovery/+page.svelte             | 46 +++++++++++++++----
 5 files changed, 69 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/discovery/BridgesList.svelte
 create mode 100644 src/lib/components/discovery/BridgesListItem.svelte

diff --git a/src/lib/components/LoadingWithLabel.svelte b/src/lib/components/LoadingWithLabel.svelte
index fce4af7..f31276a 100644
--- a/src/lib/components/LoadingWithLabel.svelte
+++ b/src/lib/components/LoadingWithLabel.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
     import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
     import Typeface from '$lib/components/primitives/Typeface.svelte';
+
+    export let label: string = '';
 </script>
 
 <span class="flex flex-col gap-3 items-center justify-center">
     <LoadingSpinner />
     <Typeface class="w-4/5 text-center text-snow-300 opacity-75" size="sm"
-        >Searching for Bridges in your network...</Typeface
+        >{label}</Typeface
     >
 </span>
diff --git a/src/lib/components/discovery/BridgesList.svelte b/src/lib/components/discovery/BridgesList.svelte
new file mode 100644
index 0000000..ef1821a
--- /dev/null
+++ b/src/lib/components/discovery/BridgesList.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import BridgesListItem from './BridgesListItem.svelte';
+
+    export let bridges: [string, string][];
+</script>
+
+<ul class="bg-ink-500 p-3 rounded-lg flex flex-col gap-1">
+    {#each bridges as [mdns, ip]}
+        <BridgesListItem {mdns} {ip} />
+    {/each}
+    <BridgesListItem mdns="0017884119b9.local" ip="192.168.1.219" />
+    <BridgesListItem mdns="0017884119ba.local" ip="192.168.1.220" />
+    <BridgesListItem mdns="0017884119bb.local" ip="192.168.1.221" />
+</ul>
diff --git a/src/lib/components/discovery/BridgesListItem.svelte b/src/lib/components/discovery/BridgesListItem.svelte
new file mode 100644
index 0000000..8877996
--- /dev/null
+++ b/src/lib/components/discovery/BridgesListItem.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import Typeface from '../primitives/Typeface.svelte';
+
+    export let mdns: string;
+    export let ip: string;
+</script>
+
+<li
+    class="flex flex-row px-2 py-1 rounded-md hover:bg-ink-600 cursor-pointer transition-colors"
+>
+    <Typeface>{ip} ({mdns})</Typeface>
+</li>
diff --git a/src/lib/components/primitives/LoadingSpinner.svelte b/src/lib/components/primitives/LoadingSpinner.svelte
index 91431de..7a7f7a4 100644
--- a/src/lib/components/primitives/LoadingSpinner.svelte
+++ b/src/lib/components/primitives/LoadingSpinner.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
     import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
     import Icon from './Icon.svelte';
+
+    export let size: `${number}x` = '2x';
 </script>
 
 <Icon
     variant="light"
-    size="2x"
+    {size}
     icon={faCircleNotch}
-    class="animate-spin text-snow-300 opacity-75"
+    class="animate-spin text-snow-300"
 />
diff --git a/src/routes/discovery/+page.svelte b/src/routes/discovery/+page.svelte
index 567a4fd..195b834 100644
--- a/src/routes/discovery/+page.svelte
+++ b/src/routes/discovery/+page.svelte
@@ -1,27 +1,53 @@
-<script>
+<script lang="ts">
     import LoadingWithLabel from '$lib/components/LoadingWithLabel.svelte';
+    import BridgesList from '$lib/components/discovery/BridgesList.svelte';
+    import Button from '$lib/components/primitives/Button.svelte';
+    import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
     import Typeface from '$lib/components/primitives/Typeface.svelte';
     import { getDiscoveredBridges } from '../../bindings';
 
     const bridges = getDiscoveredBridges();
+
+    let selectedBridge: [string, string] | undefined = undefined;
 </script>
 
 <div class="h-full w-full flex items-center justify-center">
-    <div class="w-3/5 flex flex-col gap-9 items-center">
+    <div class="w-3/5 flex flex-col gap-6 items-center">
         <Typeface class="text-center" size="lg">Select your Hue Bridge</Typeface
         >
 
         {#await bridges}
-            <LoadingWithLabel />
+            <LoadingWithLabel
+                label="Searching for Bridges in your network..."
+            />
         {:then bridges}
-            {#if bridges.length === 0}
-                <LoadingWithLabel />
+            {#if bridges.length !== 0}
+                <LoadingWithLabel
+                    label="Searching for Bridges in your network..."
+                />
             {:else}
-                <ul>
-                    {#each bridges as [mdns, ip]}
-                        <li>{`${mdns} - ${ip}`}</li>
-                    {/each}
-                </ul>
+                <div class="flex flex-col gap-3">
+                    <!-- <ul class="bg-ink-500 p-3 rounded-lg">
+                        {#each bridges as [mdns, ip]}
+                            <li><Typeface>{`${mdns} - ${ip}`}</Typeface></li>
+                        {/each}
+                        <li>
+                            <Typeface
+                                >0017884119b9.local - 192.168.1.219</Typeface
+                            >
+                        </li>
+                    </ul> -->
+                    <BridgesList {bridges} />
+                    <span
+                        class="bg-ink-500 px-3 py-2 rounded-lg flex flex-row gap-3 items-center justify-center opacity-75"
+                    >
+                        <LoadingSpinner size="1.5x" />
+                        <Typeface size="sm"
+                            >Don't worry, HueHueHue is still searching for
+                            Bridges if yours isn't listed yet.</Typeface
+                        ></span
+                    >
+                </div>
             {/if}
         {:catch error}
             <Typeface>{error.message}</Typeface>

From efd98bf025e82a7432ad109083df0072cdc238ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Mon, 10 Jul 2023 21:59:54 +0200
Subject: [PATCH 09/10] feat: Made the bridges selectable in the UI (no logic
 integrated)

---
 .../components/discovery/BridgesList.svelte   | 36 +++++++++--
 .../discovery/BridgesListItem.svelte          | 16 +++--
 src/lib/components/primitives/Button.svelte   | 11 +++-
 src/lib/components/primitives/Checkbox.svelte | 64 +++++++++++++++++++
 src/routes/discovery/+page.svelte             | 29 +++++----
 5 files changed, 134 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/primitives/Checkbox.svelte

diff --git a/src/lib/components/discovery/BridgesList.svelte b/src/lib/components/discovery/BridgesList.svelte
index ef1821a..82c98e9 100644
--- a/src/lib/components/discovery/BridgesList.svelte
+++ b/src/lib/components/discovery/BridgesList.svelte
@@ -2,13 +2,41 @@
     import BridgesListItem from './BridgesListItem.svelte';
 
     export let bridges: [string, string][];
+    export let selected: [string, string] | undefined = undefined;
+    export let onSelectedBridge: (bridge: [string, string]) => void;
 </script>
 
 <ul class="bg-ink-500 p-3 rounded-lg flex flex-col gap-1">
     {#each bridges as [mdns, ip]}
-        <BridgesListItem {mdns} {ip} />
+        <BridgesListItem
+            {mdns}
+            {ip}
+            onSelect={onSelectedBridge}
+            isSelected={selected && selected[0] === mdns && selected[1] === ip}
+        />
     {/each}
-    <BridgesListItem mdns="0017884119b9.local" ip="192.168.1.219" />
-    <BridgesListItem mdns="0017884119ba.local" ip="192.168.1.220" />
-    <BridgesListItem mdns="0017884119bb.local" ip="192.168.1.221" />
+    <BridgesListItem
+        mdns="0017884119b9.local"
+        ip="192.168.1.219"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119b9.local' &&
+            selected[1] === '192.168.1.219'}
+    />
+    <BridgesListItem
+        mdns="0017884119ba.local"
+        ip="192.168.1.220"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119ba.local' &&
+            selected[1] === '192.168.1.220'}
+    />
+    <BridgesListItem
+        mdns="0017884119bb.local"
+        ip="192.168.1.221"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119bb.local' &&
+            selected[1] === '192.168.1.221'}
+    />
 </ul>
diff --git a/src/lib/components/discovery/BridgesListItem.svelte b/src/lib/components/discovery/BridgesListItem.svelte
index 8877996..76cb383 100644
--- a/src/lib/components/discovery/BridgesListItem.svelte
+++ b/src/lib/components/discovery/BridgesListItem.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
+    import Checkbox from '../primitives/Checkbox.svelte';
     import Typeface from '../primitives/Typeface.svelte';
 
     export let mdns: string;
     export let ip: string;
+    export let isSelected: boolean = false;
+    export let onSelect: (bridge: [string, string]) => void;
 </script>
 
-<li
-    class="flex flex-row px-2 py-1 rounded-md hover:bg-ink-600 cursor-pointer transition-colors"
->
-    <Typeface>{ip} ({mdns})</Typeface>
+<li>
+    <button
+        class="w-full flex flex-row items-center px-2 py-1 rounded-md hover:bg-ink-600
+cursor-pointer transition-colors"
+        on:click={() => onSelect([mdns, ip])}
+    >
+        <Typeface>{ip} ({mdns})</Typeface>
+        <Checkbox checked={isSelected} class="ml-auto" />
+    </button>
 </li>
diff --git a/src/lib/components/primitives/Button.svelte b/src/lib/components/primitives/Button.svelte
index ace8015..be1ec58 100644
--- a/src/lib/components/primitives/Button.svelte
+++ b/src/lib/components/primitives/Button.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
     import { cva, type VariantProps } from 'class-variance-authority';
+    import Fa from 'svelte-fa/src/fa.svelte';
     import type { HTMLButtonAttributes } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
     import Icon from './Icon.svelte';
 
     let styling = cva('transition-colors px-4 py-2 font-semibold', {
@@ -43,11 +45,13 @@
         extends Partial<HTMLButtonAttributes>,
             Omit<VariantProps<typeof styling>, 'disabled'> {
         icon?: IconDefinition;
+        iconOnRight?: boolean;
         label: string;
         fullWidth?: boolean;
     }
 
     export let icon: $$Props['icon'] = undefined;
+    export let iconOnRight: $$Props['iconOnRight'] = false;
     export let label: $$Props['label'] = '';
     export let disabled: $$Props['disabled'] = false;
     export let fullWidth: $$Props['fullWidth'] = false;
@@ -68,7 +72,12 @@
         class: $$props.class,
     })}
 >
-    <span class="flex flex-row gap-2 items-center justify-center">
+    <span
+        class={twMerge(
+            'flex flex-row gap-2 items-center justify-center',
+            iconOnRight ? 'flex-row-reverse' : ''
+        )}
+    >
         <Icon {icon} variant={variant === 'dark' ? 'light' : 'dark'} />
         {label}</span
     >
diff --git a/src/lib/components/primitives/Checkbox.svelte b/src/lib/components/primitives/Checkbox.svelte
new file mode 100644
index 0000000..ee82a5b
--- /dev/null
+++ b/src/lib/components/primitives/Checkbox.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { faCheck } from '@fortawesome/free-solid-svg-icons';
+    import { cva, type VariantProps } from 'class-variance-authority';
+    import Icon from './Icon.svelte';
+
+    let styling = cva('flex items-center justify-center rounded-sm', {
+        variants: {
+            variant: {
+                dark: 'bg-ink-400 text-nebula-500',
+                light: 'bg-snow-500 text-ink-500',
+                nebula: 'bg-nebula-500 text-ink-400',
+            },
+            checked: {
+                true: 'bg-opacity-100 hover:bg-opacity-75',
+                false: 'bg-opacity-0 hover:bg-opacity-40',
+            },
+            outline: {
+                true: 'border-2',
+            },
+            size: {
+                md: 'h-5 w-5',
+                lg: 'h-6 w-6',
+            },
+        },
+        defaultVariants: {
+            outline: true,
+            variant: 'nebula',
+            size: 'md',
+        },
+        compoundVariants: [
+            {
+                variant: 'dark',
+                outline: true,
+                class: 'border-ink-400',
+            },
+            {
+                variant: 'light',
+                outline: true,
+                class: 'border-snow-500',
+            },
+            {
+                variant: 'nebula',
+                outline: true,
+                class: 'border-nebula-500',
+            },
+        ],
+    });
+
+    interface $$Props extends VariantProps<typeof styling> {
+        checked: boolean;
+        class?: string;
+    }
+
+    export let checked: $$Props['checked'] = true;
+    export let variant: $$Props['variant'] = 'nebula';
+    export let outline: $$Props['outline'] = true;
+    export let size: $$Props['size'] = 'md';
+</script>
+
+<div class={styling({ variant, outline, size, checked, class: $$props.class })}>
+    {#if checked}
+        <Icon icon={faCheck} variant={variant === 'dark' ? 'light' : 'dark'} />
+    {/if}
+</div>
diff --git a/src/routes/discovery/+page.svelte b/src/routes/discovery/+page.svelte
index 195b834..ecc15d4 100644
--- a/src/routes/discovery/+page.svelte
+++ b/src/routes/discovery/+page.svelte
@@ -4,10 +4,10 @@
     import Button from '$lib/components/primitives/Button.svelte';
     import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
     import Typeface from '$lib/components/primitives/Typeface.svelte';
+    import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
     import { getDiscoveredBridges } from '../../bindings';
 
     const bridges = getDiscoveredBridges();
-
     let selectedBridge: [string, string] | undefined = undefined;
 </script>
 
@@ -27,19 +27,22 @@
                 />
             {:else}
                 <div class="flex flex-col gap-3">
-                    <!-- <ul class="bg-ink-500 p-3 rounded-lg">
-                        {#each bridges as [mdns, ip]}
-                            <li><Typeface>{`${mdns} - ${ip}`}</Typeface></li>
-                        {/each}
-                        <li>
-                            <Typeface
-                                >0017884119b9.local - 192.168.1.219</Typeface
-                            >
-                        </li>
-                    </ul> -->
-                    <BridgesList {bridges} />
+                    <BridgesList
+                        {bridges}
+                        selected={selectedBridge}
+                        onSelectedBridge={(bridge) => {
+                            selectedBridge = bridge;
+                        }}
+                    />
+                    <Button
+                        icon={faArrowRight}
+                        iconOnRight
+                        label="Continue"
+                        disabled={selectedBridge === undefined}
+                        variant="nebula"
+                    />
                     <span
-                        class="bg-ink-500 px-3 py-2 rounded-lg flex flex-row gap-3 items-center justify-center opacity-75"
+                        class="mt-3 bg-ink-500 px-3 py-2 rounded-lg flex flex-row gap-3 items-center justify-center opacity-75"
                     >
                         <LoadingSpinner size="1.5x" />
                         <Typeface size="sm"

From 493c07e616b7c5aee1e40513dddc557774631219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Soryn=20B=C3=A4chli?= <soryn.baechli@gmail.com>
Date: Tue, 11 Jul 2023 17:48:00 +0200
Subject: [PATCH 10/10] feat: Merged loading components into new
 `LoadingIndicator` + slight UI update

---
 src/lib/components/LoadingWithLabel.svelte    | 13 ---
 .../discovery/BridgesListItem.svelte          |  9 +-
 src/lib/components/primitives/Button.svelte   |  9 +-
 src/lib/components/primitives/Checkbox.svelte | 94 +++++++++++--------
 src/lib/components/primitives/Icon.svelte     |  3 +-
 .../primitives/LoadingIndicator.svelte        | 29 ++++++
 .../primitives/LoadingSpinner.svelte          | 13 ---
 src/lib/components/primitives/types.ts        |  2 +
 src/routes/discovery/+page.svelte             | 36 +++----
 tailwind.config.cjs                           |  2 +
 10 files changed, 124 insertions(+), 86 deletions(-)
 delete mode 100644 src/lib/components/LoadingWithLabel.svelte
 create mode 100644 src/lib/components/primitives/LoadingIndicator.svelte
 delete mode 100644 src/lib/components/primitives/LoadingSpinner.svelte
 create mode 100644 src/lib/components/primitives/types.ts

diff --git a/src/lib/components/LoadingWithLabel.svelte b/src/lib/components/LoadingWithLabel.svelte
deleted file mode 100644
index f31276a..0000000
--- a/src/lib/components/LoadingWithLabel.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
-    import Typeface from '$lib/components/primitives/Typeface.svelte';
-
-    export let label: string = '';
-</script>
-
-<span class="flex flex-col gap-3 items-center justify-center">
-    <LoadingSpinner />
-    <Typeface class="w-4/5 text-center text-snow-300 opacity-75" size="sm"
-        >{label}</Typeface
-    >
-</span>
diff --git a/src/lib/components/discovery/BridgesListItem.svelte b/src/lib/components/discovery/BridgesListItem.svelte
index 76cb383..d342e12 100644
--- a/src/lib/components/discovery/BridgesListItem.svelte
+++ b/src/lib/components/discovery/BridgesListItem.svelte
@@ -14,7 +14,12 @@
 cursor-pointer transition-colors"
         on:click={() => onSelect([mdns, ip])}
     >
-        <Typeface>{ip} ({mdns})</Typeface>
-        <Checkbox checked={isSelected} class="ml-auto" />
+        <Typeface
+            >{ip}
+            <Typeface class="inline-flex opacity-50" size="sm"
+                >({mdns})</Typeface
+            ></Typeface
+        >
+        <Checkbox checked={isSelected} shadow class="ml-auto" />
     </button>
 </li>
diff --git a/src/lib/components/primitives/Button.svelte b/src/lib/components/primitives/Button.svelte
index be1ec58..46115c0 100644
--- a/src/lib/components/primitives/Button.svelte
+++ b/src/lib/components/primitives/Button.svelte
@@ -6,12 +6,14 @@
     import { twMerge } from 'tailwind-merge';
     import Icon from './Icon.svelte';
 
-    let styling = cva('transition-colors px-4 py-2 font-semibold', {
+    let styling = cva('transition-all px-4 py-2 font-semibold', {
         variants: {
             variant: {
                 dark: 'bg-ink-500 enabled:hover:bg-ink-600 text-snow-500',
                 light: 'bg-snow-500 enabled:hover:bg-snow-600 text-ink-400',
                 nebula: 'bg-nebula-500 enabled:hover:bg-nebula-600 text-ink-400',
+                nebulaSlightGradient:
+                    'bg-gradient-to-br from-nebula-400 to-nebula-600 hover:brightness-110',
             },
             rounding: {
                 full: 'rounded-full',
@@ -29,6 +31,9 @@
             disabled: {
                 true: 'contrast-75 opacity-80',
             },
+            shadow: {
+                true: 'shadow-md shadow-deepDark/10',
+            },
         },
         defaultVariants: {
             variant: 'dark',
@@ -58,6 +63,7 @@
     export let variant: $$Props['variant'] = 'dark';
     export let rounding: $$Props['rounding'] = 'lg';
     export let size: $$Props['size'] = 'lg';
+    export let shadow: $$Props['shadow'] = false;
 </script>
 
 <button
@@ -69,6 +75,7 @@
         fullWidth,
         disabled,
         size,
+        shadow,
         class: $$props.class,
     })}
 >
diff --git a/src/lib/components/primitives/Checkbox.svelte b/src/lib/components/primitives/Checkbox.svelte
index ee82a5b..cff723c 100644
--- a/src/lib/components/primitives/Checkbox.svelte
+++ b/src/lib/components/primitives/Checkbox.svelte
@@ -3,48 +3,54 @@
     import { cva, type VariantProps } from 'class-variance-authority';
     import Icon from './Icon.svelte';
 
-    let styling = cva('flex items-center justify-center rounded-sm', {
-        variants: {
-            variant: {
-                dark: 'bg-ink-400 text-nebula-500',
-                light: 'bg-snow-500 text-ink-500',
-                nebula: 'bg-nebula-500 text-ink-400',
+    let styling = cva(
+        'aspect-square flex items-center justify-center rounded-sm',
+        {
+            variants: {
+                variant: {
+                    dark: 'bg-ink-400 text-nebula-500',
+                    light: 'bg-snow-500 text-ink-500',
+                    nebula: 'bg-nebula-500 text-ink-400',
+                },
+                checked: {
+                    true: 'bg-opacity-100 hover:bg-opacity-75',
+                    false: 'bg-opacity-0 hover:bg-opacity-40',
+                },
+                outline: {
+                    true: 'border-2',
+                },
+                size: {
+                    md: 'h-5 w-5',
+                    lg: 'h-6 w-6',
+                },
+                shadow: {
+                    true: 'shadow-md shadow-deepDark/10',
+                },
             },
-            checked: {
-                true: 'bg-opacity-100 hover:bg-opacity-75',
-                false: 'bg-opacity-0 hover:bg-opacity-40',
-            },
-            outline: {
-                true: 'border-2',
-            },
-            size: {
-                md: 'h-5 w-5',
-                lg: 'h-6 w-6',
-            },
-        },
-        defaultVariants: {
-            outline: true,
-            variant: 'nebula',
-            size: 'md',
-        },
-        compoundVariants: [
-            {
-                variant: 'dark',
+            defaultVariants: {
                 outline: true,
-                class: 'border-ink-400',
-            },
-            {
-                variant: 'light',
-                outline: true,
-                class: 'border-snow-500',
-            },
-            {
                 variant: 'nebula',
-                outline: true,
-                class: 'border-nebula-500',
+                size: 'md',
             },
-        ],
-    });
+            compoundVariants: [
+                {
+                    variant: 'dark',
+                    outline: true,
+                    class: 'border-ink-400',
+                },
+                {
+                    variant: 'light',
+                    outline: true,
+                    class: 'border-snow-500',
+                },
+                {
+                    variant: 'nebula',
+                    outline: true,
+                    class: 'border-nebula-500',
+                },
+            ],
+        }
+    );
 
     interface $$Props extends VariantProps<typeof styling> {
         checked: boolean;
@@ -55,9 +61,19 @@
     export let variant: $$Props['variant'] = 'nebula';
     export let outline: $$Props['outline'] = true;
     export let size: $$Props['size'] = 'md';
+    export let shadow: $$Props['shadow'] = false;
 </script>
 
-<div class={styling({ variant, outline, size, checked, class: $$props.class })}>
+<div
+    class={styling({
+        variant,
+        outline,
+        size,
+        checked,
+        shadow,
+        class: $$props.class,
+    })}
+>
     {#if checked}
         <Icon icon={faCheck} variant={variant === 'dark' ? 'light' : 'dark'} />
     {/if}
diff --git a/src/lib/components/primitives/Icon.svelte b/src/lib/components/primitives/Icon.svelte
index b2fca8c..82df3d9 100644
--- a/src/lib/components/primitives/Icon.svelte
+++ b/src/lib/components/primitives/Icon.svelte
@@ -3,6 +3,7 @@
     import { cva, type VariantProps } from 'class-variance-authority';
     // @ts-ignore
     import Fa from 'svelte-fa/src/fa.svelte';
+    import type { IconSize } from './types';
 
     const styling = cva('transition-colors', {
         variants: {
@@ -17,7 +18,7 @@
     interface $$Props extends VariantProps<typeof styling> {
         icon?: IconDefinition;
         class?: string;
-        size?: `${number}x`;
+        size?: IconSize;
     }
 
     export let icon: $$Props['icon'] = undefined;
diff --git a/src/lib/components/primitives/LoadingIndicator.svelte b/src/lib/components/primitives/LoadingIndicator.svelte
new file mode 100644
index 0000000..7b42ac0
--- /dev/null
+++ b/src/lib/components/primitives/LoadingIndicator.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+    import { twMerge } from 'tailwind-merge';
+    import Icon from './Icon.svelte';
+    import Typeface from './Typeface.svelte';
+    import type { IconSize, TypefaceSize } from './types';
+
+    export let iconSize: IconSize = '2x';
+    export let label: string | undefined = undefined;
+    export let labelSize: TypefaceSize = 'sm';
+    export let layout: 'row' | 'col' = 'col';
+</script>
+
+<span
+    class={twMerge(
+        'flex gap-3 items-center justify-center',
+        layout === 'row' ? 'flex-row' : 'flex-col'
+    )}
+>
+    <Icon
+        variant="light"
+        size={iconSize}
+        icon={faCircleNotch}
+        class="animate-spin text-snow-300"
+    />
+    {#if label}
+        <Typeface size={labelSize}>{label}</Typeface>
+    {/if}
+</span>
diff --git a/src/lib/components/primitives/LoadingSpinner.svelte b/src/lib/components/primitives/LoadingSpinner.svelte
deleted file mode 100644
index 7a7f7a4..0000000
--- a/src/lib/components/primitives/LoadingSpinner.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-    import Icon from './Icon.svelte';
-
-    export let size: `${number}x` = '2x';
-</script>
-
-<Icon
-    variant="light"
-    {size}
-    icon={faCircleNotch}
-    class="animate-spin text-snow-300"
-/>
diff --git a/src/lib/components/primitives/types.ts b/src/lib/components/primitives/types.ts
new file mode 100644
index 0000000..57914eb
--- /dev/null
+++ b/src/lib/components/primitives/types.ts
@@ -0,0 +1,2 @@
+export type IconSize = `${number}x`;
+export type TypefaceSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm';
diff --git a/src/routes/discovery/+page.svelte b/src/routes/discovery/+page.svelte
index ecc15d4..01f4a62 100644
--- a/src/routes/discovery/+page.svelte
+++ b/src/routes/discovery/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import LoadingWithLabel from '$lib/components/LoadingWithLabel.svelte';
     import BridgesList from '$lib/components/discovery/BridgesList.svelte';
     import Button from '$lib/components/primitives/Button.svelte';
-    import LoadingSpinner from '$lib/components/primitives/LoadingSpinner.svelte';
+    import LoadingIndicator from '$lib/components/primitives/LoadingIndicator.svelte';
     import Typeface from '$lib/components/primitives/Typeface.svelte';
     import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
     import { getDiscoveredBridges } from '../../bindings';
@@ -12,21 +11,31 @@
 </script>
 
 <div class="h-full w-full flex items-center justify-center">
-    <div class="w-3/5 flex flex-col gap-6 items-center">
-        <Typeface class="text-center" size="lg">Select your Hue Bridge</Typeface
+    <div class="w-3/5 flex flex-col gap-3 items-center">
+        <Typeface class="text-center mb-6" size="xxl"
+            >Select your Hue Bridge</Typeface
         >
 
         {#await bridges}
-            <LoadingWithLabel
+            <LoadingIndicator
                 label="Searching for Bridges in your network..."
             />
         {:then bridges}
             {#if bridges.length !== 0}
-                <LoadingWithLabel
+                <LoadingIndicator
                     label="Searching for Bridges in your network..."
                 />
             {:else}
-                <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-6 w-2/3 min-w-[400px]">
+                    <div class="opacity-70">
+                        <LoadingIndicator
+                            label="Still searching for Bridges in your network..."
+                            iconSize="1.5x"
+                            labelSize="sm"
+                            layout="row"
+                        />
+                    </div>
+
                     <BridgesList
                         {bridges}
                         selected={selectedBridge}
@@ -34,22 +43,15 @@
                             selectedBridge = bridge;
                         }}
                     />
+
                     <Button
                         icon={faArrowRight}
                         iconOnRight
                         label="Continue"
                         disabled={selectedBridge === undefined}
-                        variant="nebula"
+                        variant="nebulaSlightGradient"
+                        shadow
                     />
-                    <span
-                        class="mt-3 bg-ink-500 px-3 py-2 rounded-lg flex flex-row gap-3 items-center justify-center opacity-75"
-                    >
-                        <LoadingSpinner size="1.5x" />
-                        <Typeface size="sm"
-                            >Don't worry, HueHueHue is still searching for
-                            Bridges if yours isn't listed yet.</Typeface
-                        ></span
-                    >
                 </div>
             {/if}
         {:catch error}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 568804d..c94b2b4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,6 +8,8 @@ const config = {
 
     theme: {
         colors: {
+            deepDark: '#000000',
+            albino: '#FFFFFF',
             ink: {
                 400: '#16141D',
                 500: '#211C29',