From 58477f579e198cb5ba9182b6cdbbc8c79f6f704f Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Fri, 11 Apr 2025 22:02:06 +0200
Subject: [PATCH] updated button

fixed flickering on re-render (due to having color classes state be initialized empty) and made code cleaner
---
 .../resources/ResourceEditPage.svelte         |  6 +-
 src/lib/components/ui/Button.svelte           | 63 +++++++------------
 src/routes/dashboard/devices/+page.svelte     | 12 ++--
 .../dashboard/devices/[slug]/+page.svelte     |  6 +-
 .../dashboard/groups/[slug]/+page.svelte      |  2 +-
 .../dashboard/users/[slug]/+page.svelte       |  2 +-
 6 files changed, 38 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/resources/ResourceEditPage.svelte b/src/lib/components/resources/ResourceEditPage.svelte
index 22210e3..7fd0415 100644
--- a/src/lib/components/resources/ResourceEditPage.svelte
+++ b/src/lib/components/resources/ResourceEditPage.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
+	import IconChevronLeft from "~icons/tabler/chevron-left";
+	import IconEclamationCircle from "~icons/tabler/exclamation-circle";
 	import Button from "../ui/Button.svelte";
 	import HorizontalSpacer from "../ui/HorizontalSpacer.svelte";
 	import ResourcePageHeader from "./ResourcePageHeader.svelte";
-    import IconEclamationCircle from "~icons/tabler/exclamation-circle";
-    import IconChevronLeft from "~icons/tabler/chevron-left";
 
     let {
         heading,
@@ -32,7 +32,7 @@
 
     {#if error}
         <div transition:fade>
-            <Button Icon={IconEclamationCircle} type="button" color="red" onclick={() => error = null}>{error} (Click to dismiss)</Button>
+            <Button Icon={IconEclamationCircle} type="button" color="danger" onclick={() => error = null}>{error} (Click to dismiss)</Button>
         </div>
     {/if}
 </div>
\ No newline at end of file
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index b946989..5ac8a2c 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -1,15 +1,6 @@
 <script lang="ts">
 	import type { ClassValue, HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 
-    type Props = {
-        a?: boolean,
-        color?: "neutral" | "red" | "green",
-        inverted?: boolean,
-        Icon?: any,
-        extra?: ClassValue,
-        children?: any
-    } & HTMLButtonAttributes & HTMLAnchorAttributes;
-
     let { 
         a,
         color,
@@ -18,42 +9,36 @@
         children,
         extra,
         ...others
-    }: Props = $props();
+    }: {
+        a?: boolean,
+        color?: "primary" | "danger" | "success",
+        inverted?: boolean,
+        Icon?: any,
+        extra?: ClassValue,
+        children?: any
+    } & HTMLButtonAttributes & HTMLAnchorAttributes = $props();
 
-    let baseClasses = $state("block flex items-center text-sm px-4 py-2 cursor-pointer rounded transition-all duration-300 ease-in-out");
+    const baseClasses = "block flex items-center text-sm px-4 py-2 cursor-pointer rounded transition-all duration-300 ease-in-out";
     
-    const defaultColors = "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent";
-    let colorClasses = $state(defaultColors);
+    const colors = {
+        "normal": {
+            "danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
+            "success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
+            "primary": "bg-neutral-800 hover:bg-neutral-600 text-white border border-transparent",
+        },
+        "inverted": {
+            "danger": "bg-white hover:bg-red-100 text-red-500 border border-red-500",
+            "success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
+            "primary": "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800",
+        },
+    };
+
+    let colorClasses = $derived(colors[inverted ? "inverted" : "normal"][color ?? "primary"]);
 
     let fullClasses = $derived(baseClasses + " " + extra + " " + colorClasses);
-
-    $effect(() => {
-        if (!inverted) {
-            switch (color) {
-                case "red":
-                    colorClasses = "bg-red-500 hover:bg-red-600 text-white border border-transparent";
-                    break;
-                case "green":
-                    colorClasses = "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent";
-                    break;
-                default:
-                    colorClasses= defaultColors;
-            }
-        } else {
-            switch (color) {
-                case "red":
-                    colorClasses = "bg-white hover:bg-red-100 text-red-500 border border-red-500";
-                    break;
-                case "green":
-                    colorClasses = "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500";
-                    break;
-                default:
-                    colorClasses = "bg-white hover:bg-neutral-100 text-neutral-800 border border-neutral-800";
-            }
-        }
-    });
 </script>
 
+
 {#if a}
     <a class={fullClasses} {...others}>
         {#if Icon}
diff --git a/src/routes/dashboard/devices/+page.svelte b/src/routes/dashboard/devices/+page.svelte
index 5a01c7a..4ffea14 100644
--- a/src/routes/dashboard/devices/+page.svelte
+++ b/src/routes/dashboard/devices/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import IconPlus from "~icons/tabler/plus";
+    import { enhance } from "$app/forms";
+    import ResourceCard from "$lib/components/resources/ResourceCard.svelte";
+    import ResourceListPage from "$lib/components/resources/ResourceListPage.svelte";
+    import Button from "$lib/components/ui/Button.svelte";
     import IconEdit from "~icons/tabler/edit";
     import IconPlayerPlay from "~icons/tabler/player-play";
-	import Button from "$lib/components/ui/Button.svelte";
-	import ResourceListPage from "$lib/components/resources/ResourceListPage.svelte";
-	import ResourceCard from "$lib/components/resources/ResourceCard.svelte";
-	import { enhance } from "$app/forms";
+    import IconPlus from "~icons/tabler/plus";
 
     let { data } = $props();
 </script>
@@ -29,7 +29,7 @@
                                 <Button Icon={IconEdit} a href="/dashboard/devices/{device.id}" extra="!p-2"/>
                             {/if}
                             <form method="POST" action="/dashboard/devices/{device.id}?/wake" use:enhance>
-                                <Button Icon={IconPlayerPlay} type="submit" color="green" extra="!p-2"></Button>
+                                <Button Icon={IconPlayerPlay} type="submit" color="success" extra="!p-2"></Button>
                             </form>
                         {/snippet}
                     </ResourceCard>
diff --git a/src/routes/dashboard/devices/[slug]/+page.svelte b/src/routes/dashboard/devices/[slug]/+page.svelte
index 9787224..fcfd30e 100644
--- a/src/routes/dashboard/devices/[slug]/+page.svelte
+++ b/src/routes/dashboard/devices/[slug]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
-	import Button from "$lib/components/ui/Button.svelte";
-	import Collapsible from "$lib/components/ui/Collapsible.svelte";
 	import InputText from "$lib/components/forms/InputText.svelte";
 	import ResourceEditPage from "$lib/components/resources/ResourceEditPage.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Collapsible from "$lib/components/ui/Collapsible.svelte";
 	import IconDeviceFloppy from "~icons/tabler/device-floppy";
 	import IconTrash from "~icons/tabler/trash";
 
@@ -44,7 +44,7 @@
 		<div class="flex gap-5 items-center">
 			<Button Icon={IconDeviceFloppy}>{data.device ? "Update" : "Create"}</Button>
 			{#if data.device}
-				<Button Icon={IconTrash} color="red" inverted formaction="?/delete">Delete</Button>
+				<Button Icon={IconTrash} color="danger" inverted formaction="?/delete">Delete</Button>
 			{/if}
 		</div>
 	</form>
diff --git a/src/routes/dashboard/groups/[slug]/+page.svelte b/src/routes/dashboard/groups/[slug]/+page.svelte
index 534dc70..833e75d 100644
--- a/src/routes/dashboard/groups/[slug]/+page.svelte
+++ b/src/routes/dashboard/groups/[slug]/+page.svelte
@@ -30,7 +30,7 @@
         <div class="flex gap-5 items-center">
             <Button Icon={IconDeviceFloppy}>{data.group ? "Update" : "Create"}</Button>
             {#if data.group}
-                <Button Icon={IconTrash} color="red" inverted formaction="?/delete">Delete</Button>
+                <Button Icon={IconTrash} color="danger" inverted formaction="?/delete">Delete</Button>
             {/if}
         </div>
     </form>
diff --git a/src/routes/dashboard/users/[slug]/+page.svelte b/src/routes/dashboard/users/[slug]/+page.svelte
index 0725a79..08c7db0 100644
--- a/src/routes/dashboard/users/[slug]/+page.svelte
+++ b/src/routes/dashboard/users/[slug]/+page.svelte
@@ -53,7 +53,7 @@
         <div class="flex gap-5 items-center">
             <Button Icon={IconDeviceFloppy}>{data.user ? "Update" : "Create"}</Button>
             {#if data.user}
-                <Button Icon={IconTrash} color="red" inverted formaction="?/delete">Delete</Button>
+                <Button Icon={IconTrash} color="danger" inverted formaction="?/delete">Delete</Button>
             {/if}
         </div>
     </form>