🧼 Cleans up setting card

app/src/lib/components/SettingsCard.svelte

@@ -1,31 +1,24 @@
 <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 {
-		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
-		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
-			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?.()}
         {@render title?.()}
@@ -33,34 +26,32 @@
       <button
         class="btn btn-circle btn-ghost btn-sm"
         onclick={() => {
-					open = !open;
+          open = !open
-				}}
+        }}>
-			>
         <Down
-					class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
+          class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
-						? 'rotate-180'
+            'rotate-180'
-						: ''}"
+          : ''}" />
-				/>
       </button>
     </div>
     {#if open}
       <div
         class="flex flex-col gap-2 p-4 pt-0"
-				transition:slide|local={{ duration: 300, easing: cubicOut }}
+        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"
+    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">
         {@render icon?.()}
         {@render title?.()}
       </span>
+      {@render right?.()}
     </div>
     <div class="flex flex-col gap-2 p-4 pt-0">
       {@render children?.()}