feat: Discovery UI/UX

.gitignore

@@ -24,3 +24,5 @@ build
 *.njsproj
 *.sln
 *.sw?
+
+src/bindings.ts

package.json

@@ -15,10 +15,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": {
@@ -37,6 +40,7 @@
         "svelte": "^4.0.0",
         "svelte-check": "^3.4.3",
         "svelte-preprocess": "^5.0.3",
+        "svelte-routing": "^1.10.0",
         "tailwind-scrollbar": "^3.0.4",
         "tailwindcss": "^3.3.1",
         "tslib": "^2.4.1",

src-tauri/tauri.conf.json

@@ -1,46 +1,46 @@
 {
-  "build": {
-    "beforeDevCommand": "yarn dev:client",
-    "beforeBuildCommand": "yarn build:client",
-    "devPath": "http://localhost:1420",
-    "distDir": "../build",
-    "withGlobalTauri": true
-  },
-  "package": {
-    "productName": "huehuehue",
-    "version": "0.0.5"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false,
-      "shell": {
-        "all": false,
-        "open": true
-      }
+    "build": {
+        "beforeDevCommand": "yarn dev:client",
+        "beforeBuildCommand": "yarn build:client",
+        "devPath": "http://localhost:1420",
+        "distDir": "../build",
+        "withGlobalTauri": 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"
-      ]
+    "package": {
+        "productName": "huehuehue",
+        "version": "0.0.5"
     },
-    "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
+            }
+        ]
+    }
 }

src/lib/components/discovery/BridgesList.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    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}
+            onSelect={onSelectedBridge}
+            isSelected={selected && selected[0] === mdns && selected[1] === ip}
+        />
+    {/each}
+    <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>

src/lib/components/discovery/BridgesListItem.svelte

@@ -0,0 +1,25 @@
+<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>
+    <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}
+            <Typeface class="inline-flex opacity-50" size="sm"
+                >({mdns})</Typeface
+            ></Typeface
+        >
+        <Checkbox checked={isSelected} shadow class="ml-auto" />
+    </button>
+</li>

src/lib/components/primitives/Button.svelte

@@ -0,0 +1,91 @@
+<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-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',
+                xl: 'rounded-xl',
+                lg: 'rounded-lg',
+                md: 'rounded-md',
+            },
+            size: {
+                lg: 'text-base',
+                md: 'text-sm tracking-wide',
+            },
+            fullWidth: {
+                true: 'w-full grow',
+            },
+            disabled: {
+                true: 'contrast-75 opacity-80',
+            },
+            shadow: {
+                true: 'shadow-md shadow-deepDark/10',
+            },
+        },
+        defaultVariants: {
+            variant: 'dark',
+            rounding: 'lg',
+            size: 'lg',
+        },
+    });
+
+    /**
+     * This defines the props for this component.
+     * NOTE: 'disabled' is omit from the cva to use the actual button disabled prop.
+     */
+    interface $$Props
+        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;
+    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
+    on:click
+    {...$$props}
+    class={styling({
+        variant,
+        rounding,
+        fullWidth,
+        disabled,
+        size,
+        shadow,
+        class: $$props.class,
+    })}
+>
+    <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
+    >
+</button>

src/lib/components/primitives/Checkbox.svelte

@@ -0,0 +1,80 @@
+<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(
+        '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',
+                },
+            },
+            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';
+    export let shadow: $$Props['shadow'] = false;
+</script>
+
+<div
+    class={styling({
+        variant,
+        outline,
+        size,
+        checked,
+        shadow,
+        class: $$props.class,
+    })}
+>
+    {#if checked}
+        <Icon icon={faCheck} variant={variant === 'dark' ? 'light' : 'dark'} />
+    {/if}
+</div>