From d56ed9d7868cbfc0b25807b0a5ddf41ff4f8f9c3 Mon Sep 17 00:00:00 2001
From: HorizonCode <horizoncode88@gmail.com>
Date: Wed, 4 Nov 2026 09:54:58 +0100
Subject: [PATCH] feat(themes): polish theme editor, updates, and card motion

- Lazy-load the theme editor, workshop, diagnostics, logs, and presence editor.
- Check installed themes for newer workshop versions and support updates with backup/restore.
- Preserve accordion state for the current editor session and add section icons.
- Animate installed and workshop cards on insertion, and fix the duplicate presence idle action.
---
 src/lib/communityThemes.ts                    |   5 +-
 .../theme/CommunityWorkshopView.svelte        |  24 +-
 .../components/theme/ThemeEditorWindow.svelte |  24 +-
 .../theme/ThemeElementInspector.svelte        |  42 +-
 .../theme/ThemeFilterControls.svelte          |   2 +
 .../theme/ThemeGroupInspector.svelte          |   7 +-
 .../components/theme/ThemeLinkedLogic.svelte  |   8 +-
 src/lib/components/theme/ThemeSection.svelte  |  18 +-
 .../theme/ThemeTextStyleControls.svelte       |   3 +-
 .../theme/ThemeTransformControls.svelte       |   1 +
 .../theme/ThemeVariableDefaults.svelte        |   9 +-
 src/lib/discordPresenceConfig.ts              |   4 +-
 src/lib/themeEditorUiState.ts                 |   8 +
 src/lib/themes.ts                             |   5 +-
 src/routes/+layout.svelte                     |  16 +-
 src/screens/Launch.svelte                     | 978 +++++++++++-------
 16 files changed, 720 insertions(+), 434 deletions(-)
 create mode 100644 src/lib/themeEditorUiState.ts

diff --git a/src/lib/communityThemes.ts b/src/lib/communityThemes.ts
index 2169c9f..074498e 100644
--- a/src/lib/communityThemes.ts
+++ b/src/lib/communityThemes.ts
@@ -951,11 +951,12 @@ export async function reviewCommunityTheme(
  */
 export async function downloadAndInstallCommunityTheme(
   theme: CommunityTheme,
-  onProgress?: (status: string, percentage: number) => void
+  onProgress?: (status: string, percentage: number) => void,
+  options?: { folderName?: string }
 ): Promise<{ success: boolean; folderName: string }> {
   const { onProgress: reportProgress = () => {} } = { onProgress };
   const baseThemesDir = await themesDirectory();
-  const folderName = theme.id;
+  const folderName = options?.folderName?.trim() || theme.id;
   const targetFolder = await path.join(baseThemesDir, folderName);
 
   reportProgress('Downloading theme package...', 10);
diff --git a/src/lib/components/theme/CommunityWorkshopView.svelte b/src/lib/components/theme/CommunityWorkshopView.svelte
index 08a3d15..c6a6b41 100644
--- a/src/lib/components/theme/CommunityWorkshopView.svelte
+++ b/src/lib/components/theme/CommunityWorkshopView.svelte
@@ -51,6 +51,7 @@
   import { normalizeThemeTags } from '$lib/themeV2';
   import { reloadThemes, updateInstalledThemeTags, type Theme } from '$lib/themes';
   import { currentUser } from '$lib/userAuthentication';
+  import { reduceAnimations } from '$lib/userSettings';
   import WorkshopTooltip from './WorkshopTooltip.svelte';
   import {
     Archive,
@@ -87,6 +88,7 @@
   import { sileo } from 'sileo';
   import { onDestroy, onMount } from 'svelte';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+  import { fade } from 'svelte/transition';
 
   let {
     onApplyTheme,
@@ -2051,7 +2053,7 @@
           </div>
         {:else}
           <div class="grid grid-cols-3 gap-3 pb-4">
-            {#each themes as theme (theme.id)}
+            {#each themes as theme, index (theme.id)}
               {@const localTheme =
                 localThemeMap.get(theme.id.toLowerCase()) ||
                 localThemeMap.get(theme.name.toLowerCase())}
@@ -2077,6 +2079,9 @@
                 class="group flex flex-col overflow-hidden rounded-xl border bg-theme-900/30 {isActive
                   ? 'border-primary/60 ring-1 ring-primary/20'
                   : 'border-theme-800/60'} transition-all duration-300 hover:-translate-y-0.5 hover:border-white/20 hover:bg-theme-900/50 hover:shadow-xl hover:shadow-black/30"
+                class:workshop-card-enter={!$reduceAnimations}
+                style="animation-delay: {Math.min(index * 24, 144)}ms"
+                out:fade={{ duration: $reduceAnimations ? 0 : 140 }}
               >
                 <!-- 16:9 Thumbnail -->
                 <div
@@ -4481,3 +4486,20 @@
     </AlertDialog.Content>
   </AlertDialog.Root>
 </Tooltip.Provider>
+
+<style>
+  .workshop-card-enter {
+    animation: workshop-card-in 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+  }
+
+  @keyframes workshop-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/src/lib/components/theme/ThemeEditorWindow.svelte b/src/lib/components/theme/ThemeEditorWindow.svelte
index 482d123..089c0e9 100644
--- a/src/lib/components/theme/ThemeEditorWindow.svelte
+++ b/src/lib/components/theme/ThemeEditorWindow.svelte
@@ -110,6 +110,8 @@
   import { formatBytes, openURL } from '$lib/utils';
   import {
     AlertTriangle,
+    AlignCenter,
+    AlignHorizontalSpaceAround,
     Boxes,
     Check,
     CheckCircle2,
@@ -128,12 +130,14 @@
     Download,
     Eye,
     EyeOff,
+    FileText,
     Film,
     Gauge,
     Globe,
     GripVertical,
     Hand,
     Image as ImageIcon,
+    Info,
     Keyboard,
     Layers,
     LayoutGrid,
@@ -5075,7 +5079,12 @@
         </div>
       {:else}
         <div class="min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
-          <ThemeSection title="Theme details" bordered={false} contentClass="space-y-3 pt-2">
+          <ThemeSection
+            title="Theme details"
+            icon={Info}
+            bordered={false}
+            contentClass="space-y-3 pt-2"
+          >
             <div class="space-y-1.5">
               <Label for="theme-name" class={labelClass}>Name</Label>
               <Input
@@ -5234,7 +5243,11 @@
             onchange={setVariableDefault}
           />
 
-          <ThemeSection title="Launcher Layout & Chrome" contentClass="space-y-3 pt-2.5">
+          <ThemeSection
+            title="Launcher Layout & Chrome"
+            icon={LayoutGrid}
+            contentClass="space-y-3 pt-2.5"
+          >
             <div class="space-y-1.5">
               <Label class={labelClass}>Layout Preset</Label>
               <div class="grid grid-cols-3 gap-1 rounded-md bg-black/30 p-1">
@@ -5419,7 +5432,7 @@
             </div>
           </ThemeSection>
 
-          <ThemeSection title="Background" contentClass="space-y-3 pt-2.5">
+          <ThemeSection title="Background" icon={ImageIcon} contentClass="space-y-3 pt-2.5">
             <div class="grid grid-cols-4 gap-1 rounded-md bg-black/30 p-1">
               {#each backgroundTypes as option (option.value)}
                 <Button
@@ -6230,6 +6243,7 @@
         <div class="min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
           <ThemeSection
             title="Align"
+            icon={AlignCenter}
             bordered={false}
             headingClass="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
             contentClass="space-y-2 pt-2"
@@ -6275,6 +6289,7 @@
           </ThemeSection>
           <ThemeSection
             title="Distribute"
+            icon={AlignHorizontalSpaceAround}
             headingClass="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
             contentClass="space-y-2 pt-2.5"
           >
@@ -6298,6 +6313,7 @@
           </ThemeSection>
           <ThemeSection
             title="Layers"
+            icon={Layers}
             headingClass="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
             contentClass="space-y-2 pt-2.5"
           >
@@ -6621,6 +6637,7 @@
 
           <ThemeSection
             title="Theme summary"
+            icon={FileText}
             class="mt-4"
             bordered={false}
             contentClass="space-y-2 pt-2"
@@ -6649,6 +6666,7 @@
 
           <ThemeSection
             title="Shortcuts"
+            icon={Keyboard}
             class="mt-4"
             bordered={false}
             open={false}
diff --git a/src/lib/components/theme/ThemeElementInspector.svelte b/src/lib/components/theme/ThemeElementInspector.svelte
index 6fd9e3a..1f7ac89 100644
--- a/src/lib/components/theme/ThemeElementInspector.svelte
+++ b/src/lib/components/theme/ThemeElementInspector.svelte
@@ -38,12 +38,15 @@
     Film,
     Gauge,
     Image as ImageIcon,
+    Layers,
     LayoutGrid,
     Megaphone,
     MousePointerClick,
+    Move,
     Play,
     RefreshCw,
     Repeat,
+    Scan,
     Shapes,
     Sparkles,
     Spline,
@@ -221,7 +224,7 @@
     </div>
   </div>
 
-  <ThemeSection title="Position & size" bordered={false} contentClass="space-y-3 pt-2">
+  <ThemeSection title="Position & size" icon={Move} bordered={false} contentClass="space-y-3 pt-2">
     <div class="space-y-1">
       <Label for="element-name" class={label}>Layer name</Label>
       <Input
@@ -290,6 +293,7 @@
 
   <ThemeSection
     title="Layer state"
+    icon={Layers}
     contentClass="flex flex-wrap items-center gap-x-4 gap-y-2 pt-2.5"
   >
     <div class="flex items-center gap-1.5">
@@ -402,7 +406,11 @@
   />
 
   {#if element.type === 'text' || element.type === 'data'}
-    <ThemeSection title={element.type === 'data' ? 'Data' : 'Text'} contentClass="space-y-3 pt-2.5">
+    <ThemeSection
+      title={element.type === 'data' ? 'Data' : 'Text'}
+      icon={Type}
+      contentClass="space-y-3 pt-2.5"
+    >
       {#if element.type === 'data'}
         <div class="space-y-1.5">
           <Label for="element-data-field" class={label}>Value</Label>
@@ -695,7 +703,7 @@
       <ThemeTextStyleControls {element} onchange={(patch) => Object.assign(element, patch)} />
     </ThemeSection>
   {:else if element.type === 'svelte'}
-    <ThemeSection title="Svelte component" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Svelte component" icon={Component} contentClass="space-y-3 pt-2.5">
       <div
         class="rounded-md border border-amber-500/25 bg-amber-500/10 p-2 text-[9px] leading-relaxed text-amber-100"
       >
@@ -721,7 +729,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'image' || element.type === 'video'}
-    <ThemeSection title="Media" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Media" icon={ImageIcon} contentClass="space-y-3 pt-2.5">
       <div class="rounded-md border border-theme-800 bg-black/20 p-2">
         <p class="text-[10px] uppercase tracking-wide text-muted-foreground">Asset</p>
         <p class="mt-1 truncate font-mono text-[10px] text-theme-100">{element.src}</p>
@@ -829,7 +837,7 @@
       {/if}
     </ThemeSection>
   {:else if element.type === 'lottie'}
-    <ThemeSection title="Lottie animation" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Lottie animation" icon={Film} contentClass="space-y-3 pt-2.5">
       <div class="rounded-md border border-theme-800 bg-black/20 p-2">
         <p class="text-[10px] uppercase tracking-wide text-muted-foreground">Animation</p>
         <p class="mt-1 truncate font-mono text-[10px] text-theme-100">{element.src}</p>
@@ -885,7 +893,7 @@
       </p>
     </ThemeSection>
   {:else if element.type === 'shape'}
-    <ThemeSection title="Shape" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Shape" icon={Shapes} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-shape" class={label}>Shape</Label>
         <Select.Root
@@ -1153,7 +1161,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'icon'}
-    <ThemeSection title="Icon" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Icon" icon={Sparkles} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-icon" class={label}>Icon</Label>
         <ThemeIconPicker bind:value={element.icon} {iconSet} />
@@ -1185,7 +1193,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'repeater'}
-    <ThemeSection title="Repeater" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Repeater" icon={Repeat} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-repeater-source" class={label}>Tile</Label>
         <Select.Root
@@ -1307,7 +1315,7 @@
       </p>
     </ThemeSection>
   {:else if element.type === 'gauge'}
-    <ThemeSection title="Gauge" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Gauge" icon={Gauge} contentClass="space-y-3 pt-2.5">
       <div class="grid grid-cols-2 gap-2">
         <div class="space-y-1">
           <Label for="element-gauge-mode" class={label}>Style</Label>
@@ -1423,7 +1431,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'ticker'}
-    <ThemeSection title="Ticker" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Ticker" icon={Type} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-ticker-text" class={label}>Text</Label>
         <Textarea
@@ -1520,7 +1528,7 @@
       {/if}
     </ThemeSection>
   {:else if element.type === 'button'}
-    <ThemeSection title="Button" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Button" icon={MousePointerClick} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-button-label" class={label}>Label</Label>
         <Input id="element-button-label" class={field} bind:value={element.label} />
@@ -1704,7 +1712,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'path'}
-    <ThemeSection title="Vector path" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Vector path" icon={Spline} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-path-data" class={label}>SVG path data</Label>
         <Textarea
@@ -1850,7 +1858,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'particles'}
-    <ThemeSection title="Particles" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Particles" icon={Sparkles} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-particles-preset" class={label}>Preset</Label>
         <Select.Root
@@ -1954,7 +1962,7 @@
       </p>
     </ThemeSection>
   {:else if element.type === 'clock'}
-    <ThemeSection title="Clock" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Clock" icon={Clock} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1">
         <Label for="element-clock-mode" class={label}>Style</Label>
         <Select.Root
@@ -2121,7 +2129,7 @@
       </p>
     </ThemeSection>
   {:else if element.type === 'countdown'}
-    <ThemeSection title="Countdown" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Countdown" icon={Timer} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1.5">
         <Label for="element-countdown-target" class={label}>Target date & time</Label>
         <DatePicker
@@ -2220,7 +2228,7 @@
       </div>
     </ThemeSection>
   {:else if element.type === 'widget'}
-    <ThemeSection title="Widget" contentClass="space-y-3 pt-2.5">
+    <ThemeSection title="Widget" icon={LayoutGrid} contentClass="space-y-3 pt-2.5">
       <div class="space-y-1.5">
         <Label for="element-widget-type" class={label}>Widget Type</Label>
         <Select.Root
@@ -2558,7 +2566,7 @@
     </ThemeSection>
   {/if}
 
-  <ThemeSection title="Mask" contentClass="space-y-3 pt-2.5">
+  <ThemeSection title="Mask" icon={Scan} contentClass="space-y-3 pt-2.5">
     <div class="space-y-1">
       <Label for="element-mask-shape" class={label}>Clip shape</Label>
       <Select.Root
diff --git a/src/lib/components/theme/ThemeFilterControls.svelte b/src/lib/components/theme/ThemeFilterControls.svelte
index 10d87c6..5481059 100644
--- a/src/lib/components/theme/ThemeFilterControls.svelte
+++ b/src/lib/components/theme/ThemeFilterControls.svelte
@@ -3,6 +3,7 @@
   import Button from '$lib/components/ui/button/button.svelte';
   import Slider from '$lib/components/ui/slider/slider.svelte';
   import type { ThemeV2Filters } from '$lib/themeV2';
+  import { SlidersHorizontal } from '@lucide/svelte';
 
   let {
     filters,
@@ -67,6 +68,7 @@
 
 <ThemeSection
   title="Filters"
+  icon={SlidersHorizontal}
   open={false}
   actions={filterActions}
   contentClass="space-y-2.5 pt-2.5"
diff --git a/src/lib/components/theme/ThemeGroupInspector.svelte b/src/lib/components/theme/ThemeGroupInspector.svelte
index 973bf01..886f2f4 100644
--- a/src/lib/components/theme/ThemeGroupInspector.svelte
+++ b/src/lib/components/theme/ThemeGroupInspector.svelte
@@ -17,7 +17,7 @@
     type ThemeV2Group,
     type ThemeV2MaskShape,
   } from '$lib/themeV2';
-  import { Boxes, RefreshCw, Ungroup } from '@lucide/svelte';
+  import { Boxes, Layers, RefreshCw, Scan, Ungroup } from '@lucide/svelte';
 
   let {
     group = $bindable(),
@@ -58,7 +58,7 @@
     </div>
   </div>
 
-  <ThemeSection title="Group" bordered={false} contentClass="space-y-3 pt-2">
+  <ThemeSection title="Group" icon={Boxes} bordered={false} contentClass="space-y-3 pt-2">
     <div class="space-y-1">
       <Label for="group-name" class={label}>Group name</Label>
       <Input
@@ -96,6 +96,7 @@
 
   <ThemeSection
     title="Group state"
+    icon={Layers}
     contentClass="flex flex-wrap items-center gap-x-4 gap-y-2 pt-2.5"
   >
     <div class="flex items-center gap-1.5">
@@ -167,7 +168,7 @@
     ondelete={ondeleterule}
   />
 
-  <ThemeSection title="Mask" contentClass="space-y-3 pt-2.5">
+  <ThemeSection title="Mask" icon={Scan} contentClass="space-y-3 pt-2.5">
     <div class="space-y-1">
       <Label for="group-mask-shape" class={label}>Clip shape</Label>
       <Select.Root
diff --git a/src/lib/components/theme/ThemeLinkedLogic.svelte b/src/lib/components/theme/ThemeLinkedLogic.svelte
index b69c9aa..f07f6b6 100644
--- a/src/lib/components/theme/ThemeLinkedLogic.svelte
+++ b/src/lib/components/theme/ThemeLinkedLogic.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import ThemeBehaviorInspector from '$lib/components/theme/ThemeBehaviorInspector.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
+  import { themeEditorSectionOpen } from '$lib/themeEditorUiState';
   import { themeBehaviorSummary, themeGroupInteractiveCount } from '$lib/themeLogic';
   import type {
     ThemeV2Behavior,
@@ -30,8 +31,13 @@
     ondelete: (id: string) => void;
   } = $props();
 
-  let open = $state(false);
+  const sectionKey = 'Logic';
+  let open = $state(themeEditorSectionOpen.get(sectionKey) ?? false);
   let selectedId = $state<string | undefined>(undefined);
+
+  $effect(() => {
+    themeEditorSectionOpen.set(sectionKey, open);
+  });
   let section = $state<HTMLElement>();
   let lastFocusToken = 0;
 
diff --git a/src/lib/components/theme/ThemeSection.svelte b/src/lib/components/theme/ThemeSection.svelte
index bc552ac..7c7a51f 100644
--- a/src/lib/components/theme/ThemeSection.svelte
+++ b/src/lib/components/theme/ThemeSection.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { themeEditorSectionOpen } from '$lib/themeEditorUiState';
   import { ChevronDown } from '@lucide/svelte';
+  import { untrack } from 'svelte';
   import type { Component, Snippet } from 'svelte';
 
   let {
     title,
-    open = $bindable(true),
+    open: initialOpen = true,
     icon: Icon,
     badge,
     description,
@@ -27,6 +29,12 @@
     headingClass?: string;
     bordered?: boolean;
   } = $props();
+
+  let isOpen = $state(untrack(() => themeEditorSectionOpen.get(title) ?? initialOpen));
+
+  $effect(() => {
+    themeEditorSectionOpen.set(title, isOpen);
+  });
 </script>
 
 <section class="{bordered ? 'border-t border-theme-800 pt-3 ' : ''}{className}">
@@ -34,8 +42,8 @@
     <button
       type="button"
       class="group flex min-w-0 flex-1 items-center gap-1.5 rounded-md py-0.5 text-left transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
-      aria-expanded={open}
-      onclick={() => (open = !open)}
+      aria-expanded={isOpen}
+      onclick={() => (isOpen = !isOpen)}
     >
       {#if Icon}
         <Icon class="size-3.5 shrink-0 text-primary" />
@@ -49,7 +57,7 @@
         </span>
       {/if}
       <ChevronDown
-        class="ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 {open
+        class="ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 {isOpen
           ? 'rotate-180'
           : ''}"
       />
@@ -61,7 +69,7 @@
     {/if}
   </div>
 
-  {#if open}
+  {#if isOpen}
     <div class={contentClass}>
       {#if description}
         <p class="text-[10px] leading-relaxed text-muted-foreground">{description}</p>
diff --git a/src/lib/components/theme/ThemeTextStyleControls.svelte b/src/lib/components/theme/ThemeTextStyleControls.svelte
index 6d8f267..33e30ea 100644
--- a/src/lib/components/theme/ThemeTextStyleControls.svelte
+++ b/src/lib/components/theme/ThemeTextStyleControls.svelte
@@ -5,7 +5,7 @@
   import Label from '$lib/components/ui/label/label.svelte';
   import * as Select from '$lib/components/ui/select';
   import type { ThemeV2TextDecoration, ThemeV2TextStyle, ThemeV2TextTransform } from '$lib/themeV2';
-  import { Bold, Italic, RotateCcw, Strikethrough, Underline } from '@lucide/svelte';
+  import { Bold, Italic, RotateCcw, Strikethrough, Type, Underline } from '@lucide/svelte';
 
   let {
     element,
@@ -89,6 +89,7 @@
 
 <ThemeSection
   title="Text style"
+  icon={Type}
   open={false}
   actions={textStyleActions}
   contentClass="space-y-2 pt-2.5"
diff --git a/src/lib/components/theme/ThemeTransformControls.svelte b/src/lib/components/theme/ThemeTransformControls.svelte
index 6ebb241..460faa5 100644
--- a/src/lib/components/theme/ThemeTransformControls.svelte
+++ b/src/lib/components/theme/ThemeTransformControls.svelte
@@ -112,6 +112,7 @@
 
 <ThemeSection
   title="Transform"
+  icon={RotateCw}
   open={false}
   actions={transformActions}
   contentClass="space-y-2 pt-2.5"
diff --git a/src/lib/components/theme/ThemeVariableDefaults.svelte b/src/lib/components/theme/ThemeVariableDefaults.svelte
index efb71b7..08e8f61 100644
--- a/src/lib/components/theme/ThemeVariableDefaults.svelte
+++ b/src/lib/components/theme/ThemeVariableDefaults.svelte
@@ -3,7 +3,7 @@
   import Button from '$lib/components/ui/button/button.svelte';
   import Input from '$lib/components/ui/input/input.svelte';
   import type { ThemeV2ScriptValue } from '$lib/themeV2';
-  import { RotateCcw } from '@lucide/svelte';
+  import { Braces, RotateCcw } from '@lucide/svelte';
 
   let {
     variables,
@@ -38,7 +38,12 @@
   };
 </script>
 
-<ThemeSection title="Variables" badge={variables.length} contentClass="space-y-2 pt-2">
+<ThemeSection
+  title="Variables"
+  icon={Braces}
+  badge={variables.length}
+  contentClass="space-y-2 pt-2"
+>
   <p class="text-[10px] leading-relaxed text-muted-foreground">
     Starting values for
     <code class="rounded bg-theme-900 px-1 py-0.5 text-theme-100">{'{name}'}</code>
diff --git a/src/lib/discordPresenceConfig.ts b/src/lib/discordPresenceConfig.ts
index 8f38e56..82c1aec 100644
--- a/src/lib/discordPresenceConfig.ts
+++ b/src/lib/discordPresenceConfig.ts
@@ -125,8 +125,8 @@ export const DISCORD_PRESENCE_PRESETS: DiscordPresencePreset[] = [
       },
       button2: {
         enabled: true,
-        label: 'View Profile',
-        url: '{profileUrl}',
+        label: 'Join EZPPFarm',
+        url: 'https://ez-pp.farm/discord',
       },
     },
   },
diff --git a/src/lib/themeEditorUiState.ts b/src/lib/themeEditorUiState.ts
new file mode 100644
index 0000000..e077e3b
--- /dev/null
+++ b/src/lib/themeEditorUiState.ts
@@ -0,0 +1,8 @@
+import { SvelteMap } from 'svelte/reactivity';
+
+/**
+ * Open state for accordion sections in the current theme-editor WebView session.
+ * This module is re-evaluated when the editor window closes, so the state is not
+ * persisted across app launches.
+ */
+export const themeEditorSectionOpen = new SvelteMap<string, boolean>();
diff --git a/src/lib/themes.ts b/src/lib/themes.ts
index 0570227..a57e890 100644
--- a/src/lib/themes.ts
+++ b/src/lib/themes.ts
@@ -522,6 +522,7 @@ export const reloadThemes = async () => {
         if (ACTIVE_STATUSES.has(storeTheme.status)) return storeTheme;
         const theme = installedMap.get(storeTheme.name);
         if (!theme) return storeTheme;
+        const versionChanged = storeTheme.version !== theme.version;
 
         // Replace the object rather than mutating it so the theme cards see the
         // new values when the list is rendered from a filtered derived array.
@@ -538,8 +539,8 @@ export const reloadThemes = async () => {
           nsfw: theme.nsfw,
           workshopId: theme.workshopId,
           definition: theme.definition,
-          updateAvailable: theme.updateAvailable,
-          availableVersion: theme.availableVersion,
+          updateAvailable: versionChanged ? false : storeTheme.updateAvailable,
+          availableVersion: versionChanged ? undefined : storeTheme.availableVersion,
           cssStyle: theme.cssStyle,
           backups: theme.backups ?? storeTheme.backups,
         };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 00609aa..fbd7756 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import Logo from '$assets/logo.png';
-  import DiscordPresenceEditor from '$lib/components/presence/DiscordPresenceEditor.svelte';
-  import ThemeEditorWindow from '$lib/components/theme/ThemeEditorWindow.svelte';
   import ThemeV2Background from '$lib/components/theme/ThemeV2Background.svelte';
   import * as AlertDialog from '$lib/components/ui/alert-dialog';
   import AnimatedBg from '$lib/components/ui/animated-bg/AnimatedBg.svelte';
@@ -449,9 +447,19 @@
 />
 
 {#if editorWindow}
-  <ThemeEditorWindow />
+  {#await import('$lib/components/theme/ThemeEditorWindow.svelte')}
+    <div class="h-screen w-screen bg-theme-950"></div>
+  {:then editorModule}
+    {@const ThemeEditorWindow = editorModule.default}
+    <ThemeEditorWindow />
+  {/await}
 {:else if presenceEditorWindow}
-  <DiscordPresenceEditor standalone />
+  {#await import('$lib/components/presence/DiscordPresenceEditor.svelte')}
+    <div class="h-screen w-screen bg-theme-950"></div>
+  {:then presenceModule}
+    {@const DiscordPresenceEditor = presenceModule.default}
+    <DiscordPresenceEditor standalone />
+  {/await}
 {:else}
   {#if editorOpen}
     <div
diff --git a/src/screens/Launch.svelte b/src/screens/Launch.svelte
index 4ae5d33..c555645 100644
--- a/src/screens/Launch.svelte
+++ b/src/screens/Launch.svelte
@@ -3,15 +3,12 @@
   import Logo from '$assets/logo.png';
   import { ezppfarm } from '$lib/api/ezpp';
   import {
+    downloadAndInstallCommunityTheme,
     fetchCommunityThemeDetails,
     fetchCommunityThemes,
     type CommunityTheme,
   } from '$lib/communityThemes';
-  import DiagnosticsPanel from '$lib/components/diagnostics/DiagnosticsPanel.svelte';
-  import LogViewer from '$lib/components/logs/LogViewer.svelte';
   import NotificationHub from '$lib/components/notifications/NotificationHub.svelte';
-  import DiscordPresenceEditor from '$lib/components/presence/DiscordPresenceEditor.svelte';
-  import CommunityWorkshopView from '$lib/components/theme/CommunityWorkshopView.svelte';
   import ThemeIcon from '$lib/components/theme/ThemeIcon.svelte';
   import ThemeReportDialog from '$lib/components/theme/ThemeReportDialog.svelte';
   import ThemeV2Elements from '$lib/components/theme/ThemeV2Elements.svelte';
@@ -113,6 +110,7 @@
   import { isThemeTrusted, themeCodeKind, trustTheme } from '$lib/themeTrust';
   import {
     normalizeChrome,
+    normalizeThemeVersion,
     themeAssetUrl,
     themeV2ThumbnailStyle,
     type ThemeV2ButtonAction,
@@ -179,9 +177,10 @@
   import { getCurrentWindow } from '@tauri-apps/api/window';
   import { open } from '@tauri-apps/plugin-dialog';
   import { animate } from 'animejs';
+  import semver from 'semver';
   import { sileo } from 'sileo';
-  import { onMount } from 'svelte';
-  import { SvelteSet } from 'svelte/reactivity';
+  import { onMount, untrack } from 'svelte';
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity';
   import { get } from 'svelte/store';
   import { fade, fly, scale } from 'svelte/transition';
   import { TextMorph } from 'torph/svelte';
@@ -321,6 +320,12 @@
   let ownedThemesRequestId = 0;
   let logViewerOpen = $state(false);
   let presenceEditorOpen = $state(false);
+  let checkingThemeUpdates = $state(false);
+  let themeUpdateCheckFailed = $state(false);
+  let updatingThemeFolder = $state<string | undefined>(undefined);
+
+  const communityThemeCache = new SvelteMap<string, CommunityTheme>();
+  let lastThemeUpdateCheck = 0;
 
   const themeFilterOptions = [
     { id: 'all', label: 'All themes', icon: 'all-themes' },
@@ -450,6 +455,7 @@
   });
 
   const themeButtonLabel = (theme: Theme, activeFolder: string | undefined) => {
+    if (updatingThemeFolder === theme.folder_name) return 'Updating Theme...';
     if (activeFolder === theme.folder_name) return 'Theme in use';
     if (theme.status === 'downloading') {
       return `${theme.updateAvailable ? 'Updating' : 'Downloading'} Theme... (${Math.round(theme.progress * 100)}%)`;
@@ -537,34 +543,145 @@
     }
   };
 
-  const updateInstalledTheme = async (theme: Theme) => {
-    const wasActive = $active_custom_theme?.folder_name === theme.folder_name;
-    const updateResult = await downloadTheme(theme, true);
-    if (!updateResult.success) {
-      sileo.error({
-        title: 'Uhhm..',
-        description: updateResult.error || 'Failed to update theme.',
-      });
+  const checkInstalledThemeUpdates = async (force = false) => {
+    if (checkingThemeUpdates) return;
+    const now = Date.now();
+    if (!force && now - lastThemeUpdateCheck < 60_000) return;
+    lastThemeUpdateCheck = now;
+
+    const installed = get(custom_themes).filter(
+      (theme) =>
+        theme.status === 'installed' &&
+        theme.name !== 'Default' &&
+        typeof theme.workshopId === 'string' &&
+        theme.workshopId.length > 0
+    );
+    if (installed.length === 0) {
+      themeUpdateCheckFailed = false;
       return;
     }
 
-    if (wasActive) {
-      const updatedTheme = get(custom_themes).find((candidate) => candidate.name === theme.name);
-      if (updatedTheme) {
+    checkingThemeUpdates = true;
+    themeUpdateCheckFailed = false;
+    const remoteThemes = new SvelteMap<string, { theme: CommunityTheme; version: string }>();
+    let cursor = 0;
+
+    const checkNext = async () => {
+      while (cursor < installed.length) {
+        const theme = installed[cursor++];
+        const workshopId = theme.workshopId;
+        if (!workshopId) continue;
+
+        try {
+          const remote = await fetchCommunityThemeDetails(workshopId);
+          const remoteVersion = normalizeThemeVersion(remote.version);
+          if (!remoteVersion) throw new Error('The workshop returned an invalid theme version.');
+          remoteThemes.set(theme.folder_name, { theme: remote, version: remoteVersion });
+          communityThemeCache.set(theme.folder_name, remote);
+        } catch (error) {
+          console.warn(`[Themes] Could not check "${theme.name}" for updates:`, error);
+          themeUpdateCheckFailed = true;
+          communityThemeCache.delete(theme.folder_name);
+        }
+      }
+    };
+
+    try {
+      const workers = Math.min(4, installed.length);
+      await Promise.all(Array.from({ length: workers }, () => checkNext()));
+
+      custom_themes.update((themes) =>
+        themes.map((theme) => {
+          const remote = remoteThemes.get(theme.folder_name);
+          if (!remote) return theme;
+          const localVersion = normalizeThemeVersion(theme.version);
+          if (!localVersion) return theme;
+
+          const updateAvailable = semver.gt(remote.version, localVersion);
+          return {
+            ...theme,
+            updateAvailable,
+            availableVersion: updateAvailable ? remote.version : undefined,
+          };
+        })
+      );
+    } finally {
+      checkingThemeUpdates = false;
+    }
+  };
+
+  const updateInstalledTheme = async (theme: Theme) => {
+    if (theme.status !== 'installed' || updatingThemeFolder) return;
+
+    const wasActive = $active_custom_theme?.folder_name === theme.folder_name;
+    updatingThemeFolder = theme.folder_name;
+
+    try {
+      if (theme.workshopId) {
+        const target =
+          communityThemeCache.get(theme.folder_name) ??
+          (await fetchCommunityThemeDetails(theme.workshopId));
+        const themeFolder = await path.join(await themesDirectory(), theme.folder_name);
+        let backup: string | undefined;
+
+        try {
+          backup = await invoke<string>('backup_theme_folder', { themeFolder });
+        } catch (error) {
+          console.warn('Could not back up the theme before updating it', error);
+        }
+
+        try {
+          await downloadAndInstallCommunityTheme(target, () => {}, {
+            folderName: theme.folder_name,
+          });
+        } catch (error) {
+          if (backup) {
+            await restoreThemeBackup(themeFolder, backup).catch((restoreError) =>
+              console.error('Could not restore the theme after a failed update', restoreError)
+            );
+          }
+          throw error;
+        }
+      } else {
+        const updateResult = await downloadTheme(theme, true);
+        if (!updateResult.success) {
+          throw new Error(updateResult.error || 'Failed to update theme.');
+        }
+      }
+
+      const updatedTheme = get(custom_themes).find(
+        (candidate) => candidate.folder_name === theme.folder_name
+      );
+      if (wasActive && updatedTheme) {
         if (!isThemeTrusted(updatedTheme)) {
           requestThemeTrust(updatedTheme);
         } else {
           await applyInstalledTheme(updatedTheme);
         }
       }
-    }
 
-    sileo.success({
-      title: 'Yaay!',
-      description: 'Theme updated successfully!',
-    });
+      communityThemeCache.delete(theme.folder_name);
+      sileo.success({
+        title: 'Yaay!',
+        description: 'Theme updated successfully!',
+      });
+    } catch (error) {
+      console.error(error);
+      sileo.error({
+        title: 'Could not update theme',
+        description: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      updatingThemeFolder = undefined;
+    }
   };
 
+  $effect(() => {
+    if (selectedView === 'THEMES') {
+      untrack(() => void checkInstalledThemeUpdates());
+    }
+  });
+
   const openInstalledReport = async (theme: Theme) => {
     if (!$currentUser) {
       sileo.error({
@@ -769,6 +886,7 @@
     refreshingThemes = true;
     try {
       await reloadThemes();
+      void checkInstalledThemeUpdates(true);
     } catch (error) {
       console.error(error);
       sileo.error({ title: 'Could not refresh themes' });
@@ -3553,7 +3671,16 @@
                             </section>
                           {:else if activeSettingsTab === 'diagnostics'}
                             <section>
-                              <DiagnosticsPanel onRepair={openSetupWizard} />
+                              {#await import('$lib/components/diagnostics/DiagnosticsPanel.svelte')}
+                                <div
+                                  class="flex min-h-[240px] items-center justify-center text-xs text-muted-foreground"
+                                >
+                                  Loading diagnostics…
+                                </div>
+                              {:then diagnosticsModule}
+                                {@const DiagnosticsPanel = diagnosticsModule.default}
+                                <DiagnosticsPanel onRepair={openSetupWizard} />
+                              {/await}
                             </section>
                           {:else if activeSettingsTab === 'logging'}
                             <section>
@@ -3928,398 +4055,432 @@
               {/if}
             </header>
 
-            <div class="min-h-0 flex-1 px-5 pt-4 pb-1">
+            <div class="relative min-h-0 flex-1 px-5 pt-4 pb-1">
               {#if activeThemesTab === 'workshop'}
-                <CommunityWorkshopView
-                  onApplyTheme={applyInstalledTheme}
-                  onRequestTrust={(theme) => requestThemeTrust(theme, false)}
-                  onEditTheme={openThemeEditor}
-                />
+                <div
+                  class="absolute inset-0"
+                  in:fly={{ duration: $reduceAnimations ? 0 : 240, y: 8, opacity: 0 }}
+                  out:fade={{ duration: $reduceAnimations ? 0 : 160 }}
+                >
+                  {#await import('$lib/components/theme/CommunityWorkshopView.svelte')}
+                    <div
+                      class="flex h-full min-h-[320px] items-center justify-center text-xs text-muted-foreground"
+                    >
+                      Loading workshop…
+                    </div>
+                  {:then workshopModule}
+                    {@const CommunityWorkshopView = workshopModule.default}
+                    <CommunityWorkshopView
+                      onApplyTheme={applyInstalledTheme}
+                      onRequestTrust={(theme) => requestThemeTrust(theme, false)}
+                      onEditTheme={openThemeEditor}
+                    />
+                  {/await}
+                </div>
               {:else}
-                <ScrollContainer class="pr-2">
-                  {#if filteredThemes.length > 0}
-                    {#key themeFilter}
-                      <div class="grid grid-cols-3 gap-3 pb-4 pr-1">
-                        {#each filteredThemes as theme, index (theme.folder_name)}
-                          {@const isActive =
-                            $active_custom_theme?.folder_name === theme.folder_name}
-                          {@const canEditTheme =
-                            theme.status === 'installed' && Boolean(theme.definition)}
-                          {@const canRestoreTheme =
-                            theme.status === 'installed' && (theme.backups?.length ?? 0) > 0}
-                          {@const canUpdateTheme =
-                            theme.status === 'installed' && theme.updateAvailable}
-                          {@const canReportTheme =
-                            Boolean($currentUser && ownedWorkshopLoaded) &&
-                            !isOwnInstalledTheme(theme) &&
-                            theme.status === 'installed' &&
-                            theme.name !== 'Default' &&
-                            theme.folder_name !== 'default'}
-                          {@const canUninstallTheme =
-                            (theme.status === 'installed' || theme.status === 'deleting') &&
-                            !isActive &&
-                            theme.name !== 'Default'}
-                          {@const hasThemeMenu =
-                            canEditTheme ||
-                            canRestoreTheme ||
-                            canUpdateTheme ||
-                            canReportTheme ||
-                            canUninstallTheme}
-                          <div
-                            class="group flex flex-col overflow-hidden rounded-xl border bg-theme-900/30 {isActive
-                              ? 'border-primary/60 ring-1 ring-primary/15'
-                              : 'border-theme-800/60'} {$reduceAnimations
-                              ? ''
-                              : 'transition-all duration-300 hover:-translate-y-0.5 hover:border-white/20 hover:bg-theme-900/50 hover:shadow-xl hover:shadow-black/25'}"
-                            in:fly={{
-                              duration: $reduceAnimations ? 0 : 260,
-                              delay: $reduceAnimations ? 0 : Math.min(index * 35, 210),
-                              y: 8,
-                              opacity: 0,
-                            }}
-                          >
+                <div
+                  class="absolute inset-0"
+                  in:fly={{ duration: $reduceAnimations ? 0 : 240, y: 8, opacity: 0 }}
+                  out:fade={{ duration: $reduceAnimations ? 0 : 160 }}
+                >
+                  <ScrollContainer class="pr-2">
+                    {#if filteredThemes.length > 0}
+                      {#key themeFilter}
+                        <div class="grid grid-cols-3 gap-3 pb-4 pr-1">
+                          {#each filteredThemes as theme, index (theme.folder_name)}
+                            {@const isActive =
+                              $active_custom_theme?.folder_name === theme.folder_name}
+                            {@const canEditTheme =
+                              theme.status === 'installed' && Boolean(theme.definition)}
+                            {@const canRestoreTheme =
+                              theme.status === 'installed' && (theme.backups?.length ?? 0) > 0}
+                            {@const canUpdateTheme =
+                              theme.status === 'installed' && theme.updateAvailable}
+                            {@const canReportTheme =
+                              Boolean($currentUser && ownedWorkshopLoaded) &&
+                              !isOwnInstalledTheme(theme) &&
+                              theme.status === 'installed' &&
+                              theme.name !== 'Default' &&
+                              theme.folder_name !== 'default'}
+                            {@const canUninstallTheme =
+                              (theme.status === 'installed' || theme.status === 'deleting') &&
+                              !isActive &&
+                              theme.name !== 'Default'}
+                            {@const hasThemeMenu =
+                              canEditTheme ||
+                              canRestoreTheme ||
+                              canUpdateTheme ||
+                              canReportTheme ||
+                              canUninstallTheme}
                             <div
-                              class="relative aspect-video w-full shrink-0 overflow-hidden bg-theme-950/60"
+                              class="group flex flex-col overflow-hidden rounded-xl border bg-theme-900/30 {isActive
+                                ? 'border-primary/60 ring-1 ring-primary/15'
+                                : 'border-theme-800/60'} {$reduceAnimations
+                                ? ''
+                                : 'transition-all duration-300 hover:-translate-y-0.5 hover:border-white/20 hover:bg-theme-900/50 hover:shadow-xl hover:shadow-black/25'}"
+                              class:installed-theme-card-enter={!$reduceAnimations}
+                              style="animation-delay: {Math.min(index * 24, 144)}ms"
+                              out:fade={{ duration: $reduceAnimations ? 0 : 160 }}
                             >
                               <div
-                                class="h-full w-full {$reduceAnimations
-                                  ? ''
-                                  : 'transition-transform duration-500 ease-out group-hover:scale-[1.03]'} {theme.nsfw &&
-                                !revealedNsfw.includes(theme.name)
-                                  ? 'scale-105 blur-2xl'
-                                  : ''}"
+                                class="relative aspect-video w-full shrink-0 overflow-hidden bg-theme-950/60"
                               >
-                                {#if theme.preview}
-                                  <img
-                                    src={theme.preview}
-                                    alt="Preview of {theme.name}"
-                                    class="pointer-events-none h-full w-full object-cover object-center select-none"
-                                  />
-                                {:else if themeBackgroundVideo(theme)}
-                                  <video
-                                    src={themeBackgroundVideo(theme)}
-                                    class="pointer-events-none h-full w-full object-cover object-center"
-                                    autoplay
-                                    loop
-                                    muted
-                                    playsinline
-                                  ></video>
-                                {:else if theme.definition}
-                                  <div
-                                    class="h-full w-full"
-                                    style={themeV2ThumbnailStyle(theme.definition, theme.assets)}
-                                  ></div>
-                                {:else}
-                                  <img
-                                    src={DefaultThemePreview}
-                                    alt="Preview of {theme.name}"
-                                    class="pointer-events-none h-full w-full object-cover object-center select-none"
-                                  />
-                                {/if}
-                              </div>
-                              <div
-                                class="pointer-events-none absolute inset-0 bg-gradient-to-t from-theme-950/75 via-transparent to-transparent"
-                              ></div>
-                              <div
-                                class="absolute top-1.5 left-1.5 flex max-w-[calc(100%-4.5rem)] flex-wrap items-center gap-1"
-                              >
-                                {#if isActive}
-                                  <Badge class="text-[9px]">In use</Badge>
-                                {/if}
-                                {#if theme.name !== 'Default' && theme.folder_name !== 'default' && theme.apiVersion}
-                                  <Badge
-                                    variant="secondary"
-                                    class="bg-black/50 px-1.5 py-0 text-[9px] backdrop-blur-sm"
-                                  >
-                                    API {theme.apiVersion.startsWith('2') ? '2.0' : '1.0'}
-                                  </Badge>
-                                {/if}
-                              </div>
-                              <div class="absolute top-1.5 right-1.5 flex items-center gap-1">
-                                {#if theme.nsfw}
-                                  <Badge
-                                    variant="destructive"
-                                    class="px-1.5 py-0 text-[9px]"
-                                    title="Adult content"
-                                  >
-                                    18+
-                                  </Badge>
-                                {/if}
-                                <span
-                                  class="rounded-md bg-black/60 px-1.5 py-0.5 text-[9px] font-medium text-white/90 backdrop-blur-sm"
+                                <div
+                                  class="h-full w-full {$reduceAnimations
+                                    ? ''
+                                    : 'transition-transform duration-500 ease-out group-hover:scale-[1.03]'} {theme.nsfw &&
+                                  !revealedNsfw.includes(theme.name)
+                                    ? 'scale-105 blur-2xl'
+                                    : ''}"
                                 >
-                                  v{theme.version}
-                                </span>
-                              </div>
-                              {#if theme.nsfw && !revealedNsfw.includes(theme.name)}
-                                <button
-                                  type="button"
-                                  class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-1 bg-black/20 text-white transition hover:bg-black/30"
-                                  onclick={() => toggleNsfwPreview(theme.name)}
-                                >
-                                  <ThemeIcon name="eye" set={iconSet} class="size-5" />
-                                  <span class="text-[9px] font-semibold uppercase tracking-wide">
-                                    Adult preview
-                                  </span>
-                                  <span class="text-[8px] text-white/70">Click to reveal</span>
-                                </button>
-                              {:else if theme.nsfw}
-                                <button
-                                  type="button"
-                                  class="absolute right-1.5 bottom-10 z-10 flex items-center gap-1 rounded-full bg-black/60 px-1.5 py-0.5 text-[8px] font-medium text-white/80 backdrop-blur-sm hover:bg-black/75 hover:text-white"
-                                  onclick={() => toggleNsfwPreview(theme.name)}
-                                >
-                                  <ThemeIcon name="eye-off" set={iconSet} class="size-3" />
-                                  Hide preview
-                                </button>
-                              {/if}
-                              <div
-                                class="absolute right-2 bottom-2 left-2 flex items-center justify-between gap-2"
-                              >
-                                <div class="flex min-w-0 items-center gap-1.5">
-                                  <Avatar.Root
-                                    class="size-5 shrink-0 border border-white/20 bg-theme-800"
-                                  >
-                                    <Avatar.Image
-                                      src={themeAuthorAvatarUrl(theme)}
-                                      alt={theme.author || 'Unknown author'}
-                                      class="object-cover"
+                                  {#if theme.preview}
+                                    <img
+                                      src={theme.preview}
+                                      alt="Preview of {theme.name}"
+                                      class="pointer-events-none h-full w-full object-cover object-center select-none"
                                     />
-                                    <Avatar.Fallback
-                                      class="text-[9px] font-bold text-white/80 uppercase"
+                                  {:else if themeBackgroundVideo(theme)}
+                                    <video
+                                      src={themeBackgroundVideo(theme)}
+                                      class="pointer-events-none h-full w-full object-cover object-center"
+                                      autoplay
+                                      loop
+                                      muted
+                                      playsinline
+                                    ></video>
+                                  {:else if theme.definition}
+                                    <div
+                                      class="h-full w-full"
+                                      style={themeV2ThumbnailStyle(theme.definition, theme.assets)}
+                                    ></div>
+                                  {:else}
+                                    <img
+                                      src={DefaultThemePreview}
+                                      alt="Preview of {theme.name}"
+                                      class="pointer-events-none h-full w-full object-cover object-center select-none"
+                                    />
+                                  {/if}
+                                </div>
+                                <div
+                                  class="pointer-events-none absolute inset-0 bg-gradient-to-t from-theme-950/75 via-transparent to-transparent"
+                                ></div>
+                                <div
+                                  class="absolute top-1.5 left-1.5 flex max-w-[calc(100%-4.5rem)] flex-wrap items-center gap-1"
+                                >
+                                  {#if isActive}
+                                    <Badge class="text-[9px]">In use</Badge>
+                                  {/if}
+                                  {#if theme.name !== 'Default' && theme.folder_name !== 'default' && theme.apiVersion}
+                                    <Badge
+                                      variant="secondary"
+                                      class="bg-black/50 px-1.5 py-0 text-[9px] backdrop-blur-sm"
                                     >
-                                      {theme.author.trim().charAt(0) || '?'}
-                                    </Avatar.Fallback>
-                                  </Avatar.Root>
+                                      API {theme.apiVersion.startsWith('2') ? '2.0' : '1.0'}
+                                    </Badge>
+                                  {/if}
+                                </div>
+                                <div class="absolute top-1.5 right-1.5 flex items-center gap-1">
+                                  {#if theme.nsfw}
+                                    <Badge
+                                      variant="destructive"
+                                      class="px-1.5 py-0 text-[9px]"
+                                      title="Adult content"
+                                    >
+                                      18+
+                                    </Badge>
+                                  {/if}
                                   <span
-                                    class="truncate text-[11px] font-semibold text-white/95 drop-shadow-sm"
+                                    class="rounded-md bg-black/60 px-1.5 py-0.5 text-[9px] font-medium text-white/90 backdrop-blur-sm"
                                   >
-                                    {theme.author || 'Unknown author'}
+                                    v{theme.version}
                                   </span>
                                 </div>
-                                <span
-                                  class="shrink-0 text-[9px] {theme.updateAvailable
-                                    ? 'text-primary'
-                                    : 'text-muted-foreground/90'}"
-                                >
-                                  {theme.updateAvailable ? 'Update available' : 'Installed'}
-                                </span>
-                              </div>
-                            </div>
-                            <div class="flex flex-1 flex-col gap-2 p-3">
-                              <h3 class="truncate text-[13px] font-bold text-theme-50">
-                                {theme.name}
-                              </h3>
-                              {#if theme.description}
-                                <p
-                                  class="line-clamp-2 text-[10px] leading-relaxed text-muted-foreground"
-                                >
-                                  {theme.description}
-                                </p>
-                              {/if}
-                              <div
-                                class="mt-auto flex items-center justify-between gap-2 border-t border-theme-800/40 pt-2.5"
-                              >
-                                <span class="min-w-0 truncate text-[9px] text-muted-foreground">
-                                  {#if theme.updateAvailable && theme.availableVersion}
-                                    <span class="text-primary"
-                                      >v{theme.availableVersion} available</span
-                                    >
-                                  {:else if isActive}
-                                    Active theme
-                                  {:else}
-                                    Installed
-                                  {/if}
-                                </span>
-                                <div class="flex shrink-0 items-center gap-1">
-                                  <Button
-                                    class="relative h-7 min-w-0 max-w-44 overflow-hidden px-2.5 text-xs {theme.status ===
-                                      'downloading' || theme.status === 'extracting'
-                                      ? 'disabled:bg-primary disabled:opacity-100'
-                                      : ''}"
-                                    size="sm"
-                                    aria-busy={theme.status === 'downloading' ||
-                                      theme.status === 'extracting'}
-                                    disabled={isActive ||
-                                      theme.status === 'downloading' ||
-                                      theme.status === 'extracting' ||
-                                      theme.status === 'deleting'}
-                                    onclick={() => requestThemeApply(theme)}
+                                {#if theme.nsfw && !revealedNsfw.includes(theme.name)}
+                                  <button
+                                    type="button"
+                                    class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-1 bg-black/20 text-white transition hover:bg-black/30"
+                                    onclick={() => toggleNsfwPreview(theme.name)}
                                   >
-                                    {#if theme.status === 'downloading' || theme.status === 'extracting'}
-                                      <span
-                                        class="absolute inset-y-0 left-0 bg-white/20 transition-[width] duration-300 ease-out"
-                                        style={`width: ${Math.min(100, Math.max(0, theme.progress * 100))}%`}
-                                      ></span>
-                                      {#if !$reduceAnimations}
-                                        <span
-                                          class="theme-download-shimmer absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent via-white/25 to-transparent"
-                                        ></span>
-                                      {/if}
-                                    {/if}
-                                    <span
-                                      class="relative z-10 flex items-center justify-center gap-2"
-                                    >
-                                      {#if theme.status === 'extracting'}
-                                        <ThemeIcon
-                                          name="loader"
-                                          set={iconSet}
-                                          class="size-4 animate-spin"
-                                        />
-                                      {/if}
-                                      <TextMorph
-                                        text={themeButtonLabel(
-                                          theme,
-                                          $active_custom_theme?.folder_name
-                                        )}
-                                        duration={260}
-                                        ease="cubic-bezier(0.19, 1, 0.22, 1)"
-                                        disabled={$reduceAnimations}
-                                        class="whitespace-nowrap"
-                                      />
+                                    <ThemeIcon name="eye" set={iconSet} class="size-5" />
+                                    <span class="text-[9px] font-semibold uppercase tracking-wide">
+                                      Adult preview
                                     </span>
-                                  </Button>
-                                  {#if hasThemeMenu}
-                                    <DropdownMenu.Root>
-                                      <DropdownMenu.Trigger>
-                                        {#snippet child({ props })}
-                                          <Button
-                                            {...props}
-                                            variant="secondary"
-                                            size="icon"
-                                            class="size-7 shrink-0 text-muted-foreground hover:text-white"
-                                            title="More theme actions"
-                                            aria-label={`More actions for ${theme.name}`}
-                                          >
-                                            <Ellipsis class="size-3.5" />
-                                          </Button>
-                                        {/snippet}
-                                      </DropdownMenu.Trigger>
-                                      <DropdownMenu.Content
-                                        align="end"
-                                        class="w-48 border-theme-700 bg-theme-950 text-theme-50"
+                                    <span class="text-[8px] text-white/70">Click to reveal</span>
+                                  </button>
+                                {:else if theme.nsfw}
+                                  <button
+                                    type="button"
+                                    class="absolute right-1.5 bottom-10 z-10 flex items-center gap-1 rounded-full bg-black/60 px-1.5 py-0.5 text-[8px] font-medium text-white/80 backdrop-blur-sm hover:bg-black/75 hover:text-white"
+                                    onclick={() => toggleNsfwPreview(theme.name)}
+                                  >
+                                    <ThemeIcon name="eye-off" set={iconSet} class="size-3" />
+                                    Hide preview
+                                  </button>
+                                {/if}
+                                <div
+                                  class="absolute right-2 bottom-2 left-2 flex items-center justify-between gap-2"
+                                >
+                                  <div class="flex min-w-0 items-center gap-1.5">
+                                    <Avatar.Root
+                                      class="size-5 shrink-0 border border-white/20 bg-theme-800"
+                                    >
+                                      <Avatar.Image
+                                        src={themeAuthorAvatarUrl(theme)}
+                                        alt={theme.author || 'Unknown author'}
+                                        class="object-cover"
+                                      />
+                                      <Avatar.Fallback
+                                        class="text-[9px] font-bold text-white/80 uppercase"
                                       >
-                                        {#if canEditTheme}
-                                          <DropdownMenu.Item
-                                            class="gap-2 text-[11px]"
-                                            onclick={() => openThemeEditor(theme)}
-                                          >
-                                            <ThemeIcon name="edit" set={iconSet} class="size-3.5" />
-                                            Edit theme
-                                          </DropdownMenu.Item>
+                                        {theme.author.trim().charAt(0) || '?'}
+                                      </Avatar.Fallback>
+                                    </Avatar.Root>
+                                    <span
+                                      class="truncate text-[11px] font-semibold text-white/95 drop-shadow-sm"
+                                    >
+                                      {theme.author || 'Unknown author'}
+                                    </span>
+                                  </div>
+                                  <span
+                                    class="shrink-0 text-[9px] {theme.updateAvailable
+                                      ? 'text-primary'
+                                      : 'text-muted-foreground/90'}"
+                                  >
+                                    {theme.updateAvailable ? 'Update available' : 'Installed'}
+                                  </span>
+                                </div>
+                              </div>
+                              <div class="flex flex-1 flex-col gap-2 p-3">
+                                <h3 class="truncate text-[13px] font-bold text-theme-50">
+                                  {theme.name}
+                                </h3>
+                                {#if theme.description}
+                                  <p
+                                    class="line-clamp-2 text-[10px] leading-relaxed text-muted-foreground"
+                                  >
+                                    {theme.description}
+                                  </p>
+                                {/if}
+                                <div
+                                  class="mt-auto flex items-center justify-between gap-2 border-t border-theme-800/40 pt-2.5"
+                                >
+                                  <span class="min-w-0 truncate text-[9px] text-muted-foreground">
+                                    {#if updatingThemeFolder === theme.folder_name}
+                                      Updating…
+                                    {:else if theme.updateAvailable && theme.availableVersion}
+                                      <span class="text-primary"
+                                        >v{theme.availableVersion} available</span
+                                      >
+                                    {:else if isActive}
+                                      Active theme
+                                    {:else}
+                                      Installed
+                                    {/if}
+                                  </span>
+                                  <div class="flex shrink-0 items-center gap-1">
+                                    <Button
+                                      class="relative h-7 min-w-0 max-w-44 overflow-hidden px-2.5 text-xs {theme.status ===
+                                        'downloading' || theme.status === 'extracting'
+                                        ? 'disabled:bg-primary disabled:opacity-100'
+                                        : ''}"
+                                      size="sm"
+                                      aria-busy={theme.status === 'downloading' ||
+                                        theme.status === 'extracting'}
+                                      disabled={isActive ||
+                                        updatingThemeFolder === theme.folder_name ||
+                                        theme.status === 'downloading' ||
+                                        theme.status === 'extracting' ||
+                                        theme.status === 'deleting'}
+                                      onclick={() => requestThemeApply(theme)}
+                                    >
+                                      {#if theme.status === 'downloading' || theme.status === 'extracting'}
+                                        <span
+                                          class="absolute inset-y-0 left-0 bg-white/20 transition-[width] duration-300 ease-out"
+                                          style={`width: ${Math.min(100, Math.max(0, theme.progress * 100))}%`}
+                                        ></span>
+                                        {#if !$reduceAnimations}
+                                          <span
+                                            class="theme-download-shimmer absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent via-white/25 to-transparent"
+                                          ></span>
                                         {/if}
-                                        {#if canRestoreTheme}
-                                          <DropdownMenu.Item
-                                            class="gap-2 text-[11px]"
-                                            onclick={() =>
-                                              requestThemeRestore(theme, theme.backups![0])}
-                                          >
-                                            <ThemeIcon
-                                              name="history"
-                                              set={iconSet}
-                                              class="size-3.5"
-                                            />
-                                            Restore previous version
-                                          </DropdownMenu.Item>
+                                      {/if}
+                                      <span
+                                        class="relative z-10 flex items-center justify-center gap-2"
+                                      >
+                                        {#if theme.status === 'extracting'}
+                                          <ThemeIcon
+                                            name="loader"
+                                            set={iconSet}
+                                            class="size-4 animate-spin"
+                                          />
                                         {/if}
-                                        {#if canUpdateTheme}
-                                          <DropdownMenu.Item
-                                            class="gap-2 text-[11px]"
-                                            onclick={() => updateInstalledTheme(theme)}
-                                          >
-                                            <ThemeIcon
-                                              name="download"
-                                              set={iconSet}
-                                              class="size-3.5"
-                                            />
-                                            Update theme
-                                          </DropdownMenu.Item>
-                                        {/if}
-                                        {#if canReportTheme}
-                                          <DropdownMenu.Item
-                                            class="gap-2 text-[11px]"
-                                            disabled={installedReportLoading}
-                                            onclick={() => void openInstalledReport(theme)}
-                                          >
-                                            <Flag class="size-3.5" />
-                                            Report theme
-                                          </DropdownMenu.Item>
-                                        {/if}
-                                        {#if canUninstallTheme}
-                                          <DropdownMenu.Separator class="my-1 bg-theme-800" />
-                                          <DropdownMenu.Item
-                                            class="gap-2 text-[11px] text-red-300 data-[highlighted]:bg-red-500/15 data-[highlighted]:text-red-200"
-                                            disabled={theme.status !== 'installed'}
-                                            onclick={() => void uninstallInstalledTheme(theme)}
-                                          >
-                                            {#if theme.status === 'deleting'}
+                                        <TextMorph
+                                          text={themeButtonLabel(
+                                            theme,
+                                            $active_custom_theme?.folder_name
+                                          )}
+                                          duration={260}
+                                          ease="cubic-bezier(0.19, 1, 0.22, 1)"
+                                          disabled={$reduceAnimations}
+                                          class="whitespace-nowrap"
+                                        />
+                                      </span>
+                                    </Button>
+                                    {#if hasThemeMenu}
+                                      <DropdownMenu.Root>
+                                        <DropdownMenu.Trigger>
+                                          {#snippet child({ props })}
+                                            <Button
+                                              {...props}
+                                              variant="secondary"
+                                              size="icon"
+                                              class="size-7 shrink-0 text-muted-foreground hover:text-white"
+                                              title="More theme actions"
+                                              aria-label={`More actions for ${theme.name}`}
+                                            >
+                                              <Ellipsis class="size-3.5" />
+                                            </Button>
+                                          {/snippet}
+                                        </DropdownMenu.Trigger>
+                                        <DropdownMenu.Content
+                                          align="end"
+                                          class="w-48 border-theme-700 bg-theme-950 text-theme-50"
+                                        >
+                                          {#if canEditTheme}
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px]"
+                                              onclick={() => openThemeEditor(theme)}
+                                            >
                                               <ThemeIcon
-                                                name="loader"
-                                                set={iconSet}
-                                                class="size-3.5 animate-spin"
-                                              />
-                                              Uninstalling...
-                                            {:else}
-                                              <ThemeIcon
-                                                name="trash"
+                                                name="edit"
                                                 set={iconSet}
                                                 class="size-3.5"
                                               />
-                                              Uninstall theme
-                                            {/if}
-                                          </DropdownMenu.Item>
-                                        {/if}
-                                      </DropdownMenu.Content>
-                                    </DropdownMenu.Root>
-                                  {/if}
+                                              Edit theme
+                                            </DropdownMenu.Item>
+                                          {/if}
+                                          {#if canRestoreTheme}
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px]"
+                                              onclick={() =>
+                                                requestThemeRestore(theme, theme.backups![0])}
+                                            >
+                                              <ThemeIcon
+                                                name="history"
+                                                set={iconSet}
+                                                class="size-3.5"
+                                              />
+                                              Restore previous version
+                                            </DropdownMenu.Item>
+                                          {/if}
+                                          {#if canUpdateTheme}
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px]"
+                                              disabled={updatingThemeFolder === theme.folder_name}
+                                              onclick={() => updateInstalledTheme(theme)}
+                                            >
+                                              <ThemeIcon
+                                                name="download"
+                                                set={iconSet}
+                                                class="size-3.5"
+                                              />
+                                              Update theme
+                                            </DropdownMenu.Item>
+                                          {/if}
+                                          {#if canReportTheme}
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px]"
+                                              disabled={installedReportLoading}
+                                              onclick={() => void openInstalledReport(theme)}
+                                            >
+                                              <Flag class="size-3.5" />
+                                              Report theme
+                                            </DropdownMenu.Item>
+                                          {/if}
+                                          {#if canUninstallTheme}
+                                            <DropdownMenu.Separator class="my-1 bg-theme-800" />
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px] text-red-300 data-[highlighted]:bg-red-500/15 data-[highlighted]:text-red-200"
+                                              disabled={theme.status !== 'installed'}
+                                              onclick={() => void uninstallInstalledTheme(theme)}
+                                            >
+                                              {#if theme.status === 'deleting'}
+                                                <ThemeIcon
+                                                  name="loader"
+                                                  set={iconSet}
+                                                  class="size-3.5 animate-spin"
+                                                />
+                                                Uninstalling...
+                                              {:else}
+                                                <ThemeIcon
+                                                  name="trash"
+                                                  set={iconSet}
+                                                  class="size-3.5"
+                                                />
+                                                Uninstall theme
+                                              {/if}
+                                            </DropdownMenu.Item>
+                                          {/if}
+                                        </DropdownMenu.Content>
+                                      </DropdownMenu.Root>
+                                    {/if}
+                                  </div>
                                 </div>
                               </div>
                             </div>
-                          </div>
-                        {/each}
-                      </div>
-                    {/key}
-                  {:else}
-                    <div
-                      class="flex h-full min-h-[320px] flex-col items-center justify-center gap-2 px-6 text-center text-muted-foreground"
-                    >
-                      <div class="rounded-full bg-theme-900/60 p-3">
-                        <ThemeIcon name="search" set={iconSet} class="size-5 opacity-60" />
-                      </div>
-                      <p class="text-sm font-semibold text-theme-100">
-                        {#if themeSearch}
-                          No themes match "{themeSearch}"
-                        {:else if themeFilter === 'updates'}
-                          Everything is up to date
-                        {:else}
-                          No themes found
+                          {/each}
+                        </div>
+                      {/key}
+                    {:else}
+                      <div
+                        class="flex h-full min-h-[320px] flex-col items-center justify-center gap-2 px-6 text-center text-muted-foreground"
+                      >
+                        <div class="rounded-full bg-theme-900/60 p-3">
+                          <ThemeIcon name="search" set={iconSet} class="size-5 opacity-60" />
+                        </div>
+                        <p class="text-sm font-semibold text-theme-100">
+                          {#if themeSearch}
+                            No themes match "{themeSearch}"
+                          {:else if themeFilter === 'updates' && checkingThemeUpdates}
+                            Checking for updates…
+                          {:else if themeFilter === 'updates' && themeUpdateCheckFailed}
+                            Could not check for updates
+                          {:else if themeFilter === 'updates'}
+                            Everything is up to date
+                          {:else}
+                            No themes found
+                          {/if}
+                        </p>
+                        <p class="max-w-xs text-xs leading-relaxed">
+                          {#if themeSearch}
+                            Try a different name, author or API version.
+                          {:else if themeFilter === 'updates' && checkingThemeUpdates}
+                            Looking for newer workshop releases of your installed themes.
+                          {:else if themeFilter === 'updates' && themeUpdateCheckFailed}
+                            Some themes could not be checked. Refresh the list to try again.
+                          {:else if themeFilter === 'updates'}
+                            You are running the latest version of every installed theme.
+                          {:else}
+                            Discover themes in the Community Workshop or create a new API 2.0 theme.
+                          {/if}
+                        </p>
+                        {#if themeSearch || themeFilter !== 'all'}
+                          <Button
+                            class="mt-1"
+                            variant="secondary"
+                            size="sm"
+                            onclick={() => {
+                              themeSearch = '';
+                              themeFilter = 'all';
+                            }}
+                          >
+                            Clear filters
+                          </Button>
                         {/if}
-                      </p>
-                      <p class="max-w-xs text-xs leading-relaxed">
-                        {#if themeSearch}
-                          Try a different name, author or API version.
-                        {:else if themeFilter === 'updates'}
-                          You are running the latest version of every installed theme.
-                        {:else}
-                          Discover themes in the Community Workshop or create a new API 2.0 theme.
-                        {/if}
-                      </p>
-                      {#if themeSearch || themeFilter !== 'all'}
-                        <Button
-                          class="mt-1"
-                          variant="secondary"
-                          size="sm"
-                          onclick={() => {
-                            themeSearch = '';
-                            themeFilter = 'all';
-                          }}
-                        >
-                          Clear filters
-                        </Button>
-                      {/if}
-                    </div>
-                  {/if}
-                </ScrollContainer>
+                      </div>
+                    {/if}
+                  </ScrollContainer>
+                </div>
               {/if}
             </div>
           </div>
@@ -4382,10 +4543,30 @@
   {/if}
 
   {#if logViewerOpen}
-    <LogViewer onclose={() => (logViewerOpen = false)} />
+    {#await import('$lib/components/logs/LogViewer.svelte')}
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 text-xs text-muted-foreground backdrop-blur-sm"
+      >
+        Opening logs…
+      </div>
+    {:then logsModule}
+      {@const LogViewer = logsModule.default}
+      <LogViewer onclose={() => (logViewerOpen = false)} />
+    {/await}
   {/if}
 
-  <DiscordPresenceEditor bind:open={presenceEditorOpen} />
+  {#if presenceEditorOpen}
+    {#await import('$lib/components/presence/DiscordPresenceEditor.svelte')}
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 text-xs text-muted-foreground backdrop-blur-sm"
+      >
+        Opening editor…
+      </div>
+    {:then presenceModule}
+      {@const DiscordPresenceEditor = presenceModule.default}
+      <DiscordPresenceEditor bind:open={presenceEditorOpen} />
+    {/await}
+  {/if}
 </div>
 
 <style>
@@ -4402,6 +4583,21 @@
     animation: theme-download-shimmer 1.8s ease-in-out infinite;
   }
 
+  .installed-theme-card-enter {
+    animation: installed-theme-card-in 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+  }
+
+  @keyframes installed-theme-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .theme-download-shimmer {
       animation: none;