♻️ Use clsx with svelte 5.16 (#810)

* ⬆️ Upgrade Svelte to v5.16.0
* ♻️ Change `class:*` to object
  ref. https://svelte.dev/docs/svelte/class

apps/web/package.json

@@ -35,7 +35,7 @@
     "@sveltejs/kit": "^2.12.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/vite": "4.0.0-beta.3",
-    "svelte": "5.1.0",
+    "svelte": "^5.16.0",
     "svelte-check": "^4.0.5",
     "tailwindcss": "4.0.0-beta.3",
     "tslib": "^2.8.0",

apps/web/src/lib/features/comment/Comment.svelte

@@ -95,8 +95,7 @@
 </script>
 
 <div
-  class="py-2.5 duration-200"
-  class:bg-slate-100={isDeleting}
+  class={['py-2.5 duration-200', { 'bg-slate-100': isDeleting }]}
   role="listitem"
   onmouseenter={() => (isActionVisible = card.me ? true : false)}
   onmouseleave={() => (isActionVisible = false)}

apps/web/src/routes/admin/AdminHeaderTabs.svelte

@@ -33,10 +33,14 @@
         {/if}
         <a
           {href}
-          class="relative inline-flex items-center justify-center space-x-1 rounded-md px-5 py-2 text-sm text-zinc-500 duration-200"
-          class:font-bold={isActive}
-          class:pointer-events-none={isActive}
-          class:text-zinc-500={!isActive}
+          class={[
+            'relative inline-flex items-center justify-center space-x-1 rounded-md px-5 py-2 text-sm text-zinc-500 duration-200',
+            {
+              'font-bold': isActive,
+              'pointer-events-none': isActive,
+              'text-zinc-500': !isActive,
+            },
+          ]}
         >
           {name}
         </a>