feat: add logos, labels, and loading indicators to home page

Author: jacobtread

src/lib/api/runtimeAppData.ts

@@ -90,14 +90,8 @@ export function createOverlayURLQuery() {
   });
 }
 
-/**
- * Create a query to load the twitch URL
- */
-export function createTwitchOAuthURLQuery() {
-  return createQuery({
-    queryKey: ["twitch-oauth-url"],
-    queryFn: () => invoke<string>("get_twitch_oauth_uri"),
-  });
+export function getTwitchOAuthURI() {
+  return invoke<string>("get_twitch_oauth_uri");
 }
 
 /**
@@ -117,6 +111,8 @@ export function createDeriveModelCalibrated(
   return derived(
     [modelData, runtimeAppData],
     ([$modelData, $runtimeAppData]) => {
+      console.log($runtimeAppData.model_id, $modelData);
+
       // No model active
       if ($runtimeAppData.model_id === null) {
         return false;

src/lib/components/Card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = {
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { children, ...props }: Props = $props();
+</script>
+
+<div {...props} class="card">
+  {@render children?.()}
+</div>
+
+<style>
+  .card {
+    background-color: #1a1a1a;
+    border: 1px solid #2f2f2f;
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+</style>

src/lib/components/CardSkeleton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  import Card from "./Card.svelte";
+
+  type Props = {} & HTMLAttributes<HTMLDivElement>;
+
+  const props: Props = $props();
+</script>
+
+<Card {...props}>
+  <div class="row">
+    <div class="skeleton circle"></div>
+
+    <div class="column">
+      <div class="skeleton" style="width: 25%; height: 1.25rem"></div>
+      <div class="skeleton" style="width: 60%; height: 1.25rem"></div>
+    </div>
+  </div>
+</Card>
+
+<style>
+  .row {
+    display: flex;
+    gap: 1rem;
+    flex-flow: row;
+    align-items: center;
+  }
+
+  .circle {
+    width: 4rem;
+    height: 4rem;
+
+    border-radius: 100%;
+  }
+
+  .column {
+    flex: auto;
+    display: flex;
+    gap: 1rem;
+    flex-flow: column;
+  }
+</style>

src/lib/components/Label.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    color?: "red" | "green" | "blue" | "yellow" | "purple";
+    size?: "small" | "medium" | "large";
+    children?: Snippet;
+  };
+
+  const { color = "green", size = "small", children }: Props = $props();
+</script>
+
+<span class="label" data-color={color} data-size={size}>
+  {@render children?.()}
+</span>
+
+<style>
+  .label {
+    display: inline-block;
+    margin: 0 0.2rem;
+    background-color: #222;
+    border: 1px solid #111;
+    color: #ccc;
+    font-size: 0.9rem;
+    font-weight: normal;
+
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.75rem;
+
+    vertical-align: middle;
+  }
+
+  .label[data-size="small"] {
+    font-size: 0.8rem;
+    padding: 0.15rem 0.5rem;
+  }
+
+  .label[data-color="purple"] {
+    border-color: #dd82f0;
+    background-color: #3c1b42;
+    color: #dd82f0;
+  }
+
+  .label[data-color="red"] {
+    border-color: #f08282;
+    background-color: #421b1b;
+    color: #f08282;
+  }
+
+  .label[data-color="yellow"] {
+    border-color: #eef082;
+    background-color: #423f1b;
+    color: #f0ee82;
+  }
+
+  .label[data-color="green"] {
+    border-color: #a1f082;
+    background-color: #1b421b;
+    color: #a1f082;
+  }
+
+  .label[data-color="blue"] {
+    border-color: #82bbf0;
+    background-color: #1b2f42;
+    color: #82bbf0;
+  }
+</style>

src/lib/styles/global.scss

@@ -6,6 +6,22 @@ body {
   font-family: "Roboto", sans-serif;
 }
 
+.skeleton {
+  border-radius: 1rem;
+  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
 .text-stack {
   display: flex;
   flex-flow: column;