From 569c19ad1dbd1afeddbe32f81424483d1c036f78 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Thu, 20 Mar 2025 15:31:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=BC=20Cleans=20up=20setting=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/SettingsCard.svelte | 115 ++++++++++-----------
 1 file changed, 53 insertions(+), 62 deletions(-)

diff --git a/app/src/lib/components/SettingsCard.svelte b/app/src/lib/components/SettingsCard.svelte
index f9d3cc9..364be63 100644
--- a/app/src/lib/components/SettingsCard.svelte
+++ b/app/src/lib/components/SettingsCard.svelte
@@ -1,69 +1,60 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
-	import { Down } from './icons';
-	interface Props {
-		open?: boolean;
-		collapsible?: boolean;
-		icon?: import('svelte').Snippet;
-		title?: import('svelte').Snippet;
-		children?: import('svelte').Snippet;
-	}
+  import { slide } from 'svelte/transition'
+  import { cubicOut } from 'svelte/easing'
+  import { Down } from './icons'
+  interface Props {
+    open?: boolean
+    collapsible?: boolean
+    icon?: import('svelte').Snippet
+    title?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+    right?: import('svelte').Snippet
+  }
 
-	let {
-		open = $bindable(true),
-		collapsible = true,
-		icon,
-		title,
-		children
-	}: Props = $props();
+  let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props()
 </script>
 
 {#if collapsible}
-	<div
-		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-	>
-		<div
-			class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
-		>
-			<span class="inline-flex items-baseline">
-				{@render icon?.()}
-				{@render title?.()}
-			</span>
-			<button
-				class="btn btn-circle btn-ghost btn-sm"
-				onclick={() => {
-					open = !open;
-				}}
-			>
-				<Down
-					class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
-						? 'rotate-180'
-						: ''}"
-				/>
-			</button>
-		</div>
-		{#if open}
-			<div
-				class="flex flex-col gap-2 p-4 pt-0"
-				transition:slide|local={{ duration: 300, easing: cubicOut }}
-			>
-				{@render children?.()}
-			</div>
-		{/if}
-	</div>
+  <div
+    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
+    <div
+      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+      <span class="inline-flex items-baseline">
+        {@render icon?.()}
+        {@render title?.()}
+      </span>
+      <button
+        class="btn btn-circle btn-ghost btn-sm"
+        onclick={() => {
+          open = !open
+        }}>
+        <Down
+          class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
+            'rotate-180'
+          : ''}" />
+      </button>
+    </div>
+    {#if open}
+      <div
+        class="flex flex-col gap-2 p-4 pt-0"
+        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        {@render children?.()}
+      </div>
+    {/if}
+  </div>
 {:else}
-	<div
-		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-	>
-		<div class="min-h-16 w-full p-4 text-xl font-medium">
-			<span class="inline-flex items-baseline">
-				{@render icon?.()}
-				{@render title?.()}
-			</span>
-		</div>
-		<div class="flex flex-col gap-2 p-4 pt-0">
-			{@render children?.()}
-		</div>
-	</div>
+  <div
+    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
+    <div
+      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+      <span class="inline-flex items-baseline">
+        {@render icon?.()}
+        {@render title?.()}
+      </span>
+      {@render right?.()}
+    </div>
+    <div class="flex flex-col gap-2 p-4 pt-0">
+      {@render children?.()}
+    </div>
+  </div>
 {/if}