🧼 Cleans up setting card

app/src/lib/components/SettingsCard.svelte

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