feat(workshop): add role badges and streamline theme cards

Use the service owner, moderator, or supporter role for author badges, expose downloads for owned legacy themes, and move secondary card actions into a menu. Include theme tags in publish metadata and keep API 2.0 exports limited to theme.json and assets.

src-tauri/src/commands.rs

@@ -3088,7 +3088,18 @@ fn add_theme_folder_to_zip(
         }
 
         let entry_path = entry.path();
+        let relative = entry_path
+            .strip_prefix(root)
+            .map_err(|e| format!("Failed to build archive path: {e}"))?
+            .to_string_lossy()
+            .replace('\\', "/");
+
         if file_type.is_dir() {
+            // API 2.0 packages are limited to theme.json and assets/. Do not
+            // copy README files, editor artifacts, or any other root folder.
+            if asset_filter.is_some() && directory == root && relative != "assets" {
+                continue;
+            }
             add_theme_folder_to_zip(zip, root, &entry_path, asset_filter, options)?;
             continue;
         }
@@ -3096,19 +3107,18 @@ fn add_theme_folder_to_zip(
             continue;
         }
 
-        if let Some(filter) = asset_filter
+        if asset_filter.is_some() && directory == root && relative != "theme.json" {
-            && let Ok(asset_path) = entry_path.strip_prefix(&assets_root) {
+            continue;
-                let key = asset_path.to_string_lossy().replace('\\', "/");
+        }
-                if !filter.contains(&key) {
-                    continue;
-                }
-            }
 
-        let relative = entry_path
+        if let Some(filter) = asset_filter
-            .strip_prefix(root)
+            && let Ok(asset_path) = entry_path.strip_prefix(&assets_root)
-            .map_err(|e| format!("Failed to build archive path: {e}"))?
+        {
-            .to_string_lossy()
+            let key = asset_path.to_string_lossy().replace('\\', "/");
-            .replace('\\', "/");
+            if !filter.contains(&key) {
+                continue;
+            }
+        }
 
         zip.start_file(relative, options)
             .map_err(|e| format!("Failed to add a file to the theme archive: {e}"))?;

src/lib/communityThemes.ts

@@ -9,6 +9,7 @@ export interface CommunityThemeAuthor {
   id: number;
   name: string;
   donor: boolean;
+  role?: 'owner' | 'moderator' | 'supporter' | null;
   avatarUrl: string;
 }
 

src/lib/components/theme/CommunityWorkshopView.svelte

@@ -32,6 +32,7 @@
   import { isThemeTrusted } from '$lib/themeTrust';
   import type { Theme } from '$lib/themes';
   import { Button } from '$lib/components/ui/button';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import { Input } from '$lib/components/ui/input';
   import Badge from '$lib/components/ui/badge/badge.svelte';
   import ScrollContainer from '$lib/components/ui/scroll-container/ScrollContainer.svelte';
@@ -46,7 +47,9 @@
     ChevronDown,
     Code2,
     CopyPlus,
+    Crown,
     Download,
+    Ellipsis,
     ExternalLink,
     Eye,
     EyeOff,
@@ -1255,6 +1258,13 @@
             {@const isDeleted = Boolean(theme.deletedAt)}
             {@const hasUpdate = Boolean(!isDeleted && localTheme && localTheme.version !== theme.version)}
             {@const owned = isOwnedByCurrentUser(theme)}
+            {@const isLegacy =
+              theme.apiVersion === '1.0' || Boolean(theme.tags?.includes('legacy'))}
+            {@const showOverflowMenu =
+              !isDeleted &&
+              (owned ||
+                canModerate ||
+                Boolean($currentUser && !isLegacy && !theme.isHidden && !theme.isQuarantined))}
 
             <div
               class="group flex flex-col overflow-hidden rounded-xl border bg-theme-900/30 {isActive
@@ -1289,20 +1299,7 @@
                         </span>
                       {/snippet}
                     </WorkshopTooltip>
-                  {:else if !theme.hasExecutableCode}
+                  {:else if theme.hasExecutableCode}
-                    <WorkshopTooltip content="Sandboxed Declarative Theme: pure styles, no executable JS code">
-                      {#snippet trigger(props)}
-                        <span
-                          {...props}
-                          tabindex="-1"
-                          class="flex items-center gap-1 rounded-md border border-emerald-500/30 bg-emerald-950/80 px-1.5 py-0.5 text-[9px] font-medium text-emerald-300 backdrop-blur-sm"
-                        >
-                          <ShieldCheck class="size-3" />
-                          Declarative
-                        </span>
-                      {/snippet}
-                    </WorkshopTooltip>
-                  {:else}
                     <WorkshopTooltip content="Contains custom Svelte 5 executable logic">
                       {#snippet trigger(props)}
                         <span
@@ -1389,13 +1386,39 @@
                     <span class="truncate text-[11px] font-semibold text-white/95 drop-shadow-sm">
                       {theme.author.name}
                     </span>
-                    {#if theme.author.donor}
+                    {#if theme.author.role === 'owner'}
+                      <WorkshopTooltip content="EZPPFarm owner">
+                        {#snippet trigger(props)}
+                          <span
+                            {...props}
+                            tabindex="-1"
+                            class="flex items-center gap-0.5 rounded-full border border-rose-500/30 bg-rose-500/20 px-1 py-0.5 text-[8px] font-bold text-rose-200"
+                          >
+                            <Crown class="size-2.5 fill-rose-300" />
+                            Owner
+                          </span>
+                        {/snippet}
+                      </WorkshopTooltip>
+                    {:else if theme.author.role === 'moderator'}
+                      <WorkshopTooltip content="Community Workshop moderator">
+                        {#snippet trigger(props)}
+                          <span
+                            {...props}
+                            tabindex="-1"
+                            class="flex items-center gap-0.5 rounded-full border border-cyan-500/30 bg-cyan-500/20 px-1 py-0.5 text-[8px] font-bold text-cyan-200"
+                          >
+                            <ShieldCheck class="size-2.5" />
+                            Moderator
+                          </span>
+                        {/snippet}
+                      </WorkshopTooltip>
+                    {:else if theme.author.role === 'supporter' || (!theme.author.role && theme.author.donor)}
                       <WorkshopTooltip content="EZPPFarm Supporter">
                         {#snippet trigger(props)}
                           <span
                             {...props}
                             tabindex="-1"
-                            class="flex items-center gap-0.5 rounded-full bg-amber-500/20 px-1 py-0.5 text-[8px] font-bold text-amber-300 border border-amber-500/30"
+                            class="flex items-center gap-0.5 rounded-full border border-amber-500/30 bg-amber-500/20 px-1 py-0.5 text-[8px] font-bold text-amber-300"
                           >
                             <Sparkles class="size-2.5 fill-amber-300" />
                             Supporter
@@ -1458,28 +1481,6 @@
                     </div>
                   {/if}
 
-                  {#if owned && !isDeleted}
-                    <WorkshopTooltip content="Edit this theme's tags">
-                      {#snippet trigger(props)}
-                        <button
-                          {...props}
-                          type="button"
-                          class="mt-2 flex items-center gap-1 text-[9px] text-muted-foreground transition-colors hover:text-cyan-200"
-                          onclick={() => void handleEditTags(theme)}
-                          disabled={tagEditingId === theme.id}
-                        >
-                          {#if tagEditingId === theme.id}
-                            <LoaderCircle class="size-3 animate-spin" />
-                            Saving tags...
-                          {:else}
-                            <Tag class="size-3" />
-                            {theme.tags.length > 0 ? 'Edit tags' : 'Add tags'}
-                          {/if}
-                        </button>
-                      {/snippet}
-                    </WorkshopTooltip>
-                  {/if}
-
                   {#if theme.searchMatch}
                     {@const searchMatch = theme.searchMatch}
                     <WorkshopTooltip
@@ -1550,35 +1551,32 @@
                       {/snippet}
                     </WorkshopTooltip>
                   {/if}
-
-                  {#if canModerate}
-                    <WorkshopTooltip content="View this theme's moderation history">
-                      {#snippet trigger(props)}
-                        <button
-                          {...props}
-                          type="button"
-                          class="mt-2 flex items-center gap-1 text-[9px] text-muted-foreground transition-colors hover:text-cyan-200"
-                          onclick={() => void openThemeHistory(theme.id, theme.name)}
-                        >
-                          <History class="size-3" />
-                          Moderation history
-                        </button>
-                      {/snippet}
-                    </WorkshopTooltip>
-                  {/if}
                 </div>
 
                 <!-- Footer Action Row -->
-                <div class="mt-2 flex items-center justify-between border-t border-theme-800/40 pt-2.5">
+                <div
-                  <div class="flex items-center gap-1 text-[10px] text-muted-foreground">
+                  class="mt-2 flex flex-wrap items-center justify-between gap-2 border-t border-theme-800/40 pt-2.5"
-                    <Download class="size-3" />
+                >
-                    <span class="tabular-nums">{theme.downloadCount}</span>
+                  <div class="flex min-w-0 items-center gap-2 text-[10px] text-muted-foreground">
+                    <span class="inline-flex items-center gap-1">
+                      <Download class="size-3" />
+                      <span class="tabular-nums">{theme.downloadCount}</span>
+                    </span>
+                    {#if isInstalled && !isActive}
+                      <span
+                        class="rounded-full bg-theme-800/50 px-1.5 py-0.5 text-[9px] text-muted-foreground"
+                      >
+                        Installed
+                      </span>
+                    {/if}
                   </div>
 
-                  <div class="flex items-center gap-1">
+                  <div class="flex shrink-0 items-center gap-1">
                     {#if isDownloading}
                       <div class="flex items-center gap-2">
-                        <span class="text-[10px] text-primary tabular-nums">{downloadProgress}%</span>
+                        <span class="text-[10px] text-primary tabular-nums"
+                          >{downloadProgress}%</span
+                        >
                         <div class="h-1.5 w-16 overflow-hidden rounded-full bg-theme-800">
                           <div
                             class="h-full bg-primary transition-all duration-200"
@@ -1598,8 +1596,8 @@
                       <span class="flex items-center gap-1 text-[10px] text-amber-300">
                         <LoaderCircle class="size-3 animate-spin" /> Updating
                       </span>
-                    {:else if owned}
+                    {:else if isDeleted}
-                      {#if isDeleted}
+                      {#if owned}
                         <Button
                           variant="secondary"
                           size="sm"
@@ -1616,63 +1614,15 @@
                           {/if}
                         </Button>
                       {:else}
-                        {#if canModerate && theme.apiVersion !== '1.0' && !theme.tags?.includes('legacy')}
+                        <Badge
-                          <WorkshopTooltip content={theme.isHidden ? 'Restore theme to the workshop' : 'Hide theme from the workshop'}>
+                          variant="outline"
-                            {#snippet trigger(props)}
+                          class="border-red-500/40 bg-red-950/20 text-red-300 text-[10px]"
-                              <Button
+                        >
-                                {...props}
+                          <Trash2 class="mr-1 size-3" /> Deleted
-                                variant="ghost"
+                        </Badge>
-                                size="icon"
+                      {/if}
-                                class="size-7 text-muted-foreground hover:text-amber-300"
+                    {:else}
-                                onclick={() => handleToggleVisibility(theme)}
+                      {#if owned && !isLegacy && isInstalled}
-                              >
-                                {#if theme.isHidden}
-                                  <Eye class="size-3.5" />
-                                {:else}
-                                  <EyeOff class="size-3.5" />
-                                {/if}
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
-                        {#if canModerate}
-                          <WorkshopTooltip content={theme.isQuarantined ? 'Lift takedown' : 'Take down theme'}>
-                            {#snippet trigger(props)}
-                              <Button
-                                {...props}
-                                variant="ghost"
-                                size="icon"
-                                class="size-7 text-muted-foreground hover:text-red-300"
-                                onclick={() => handleToggleQuarantine(theme)}
-                                disabled={quarantineId === theme.id}
-                              >
-                                {#if quarantineId === theme.id}
-                                  <LoaderCircle class="size-3.5 animate-spin" />
-                                {:else}
-                                  <Ban class="size-3.5" />
-                                {/if}
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
-                        {#if isInstalled && hasUpdate}
-                          <WorkshopTooltip
-                            content={`Replace local v${localTheme?.version} with workshop v${theme.version}`}
-                          >
-                            {#snippet trigger(props)}
-                              <Button
-                                {...props}
-                                variant="secondary"
-                                size="sm"
-                                class="h-7 gap-1 text-xs"
-                                onclick={() => handleRefreshOwnedTheme(theme)}
-                              >
-                                <RefreshCw class="size-3" />
-                                Refresh
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
                         <Button
                           size="sm"
                           class="h-7 gap-1 text-xs"
@@ -1681,131 +1631,153 @@
                           <Pencil class="size-3" />
                           Edit
                         </Button>
-                        <WorkshopTooltip content="Move theme to trash">
+                      {:else if isActive}
-                          {#snippet trigger(props)}
+                        <Badge
-                            <Button
+                          variant="outline"
-                              {...props}
+                          class="border-emerald-500/40 bg-emerald-950/20 text-emerald-300 text-[10px]"
-                              variant="ghost"
+                        >
-                              size="icon"
+                          <Check class="mr-1 size-3" /> In use
-                              class="size-7 text-muted-foreground hover:text-red-400"
-                              onclick={() => handleDeleteTheme(theme)}
-                            >
-                              <Trash2 class="size-3.5" />
-                            </Button>
-                          {/snippet}
-                        </WorkshopTooltip>
-                      {/if}
-                    {:else}
-                      {#if isDeleted}
-                        <Badge variant="outline" class="border-red-500/40 bg-red-950/20 text-red-300 text-[10px]">
-                          <Trash2 class="mr-1 size-3" /> Deleted
                         </Badge>
+                      {:else if isInstalled && hasUpdate}
+                        <Button
+                          size="sm"
+                          class="h-7 gap-1 text-xs bg-cyan-600 hover:bg-cyan-500 text-white font-medium"
+                          onclick={() => handleDownloadAndApply(theme)}
+                        >
+                          <Download class="size-3" />
+                          Update
+                        </Button>
+                      {:else if isInstalled}
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          class="h-7 text-xs"
+                          onclick={() => handleApplyExisting(theme)}
+                        >
+                          Apply
+                        </Button>
                       {:else}
-                        {#if canModerate && theme.apiVersion !== '1.0' && !theme.tags?.includes('legacy')}
+                        <Button
-                          <WorkshopTooltip content={theme.isHidden ? 'Restore theme to the workshop' : 'Hide theme from the workshop'}>
+                          size="sm"
-                            {#snippet trigger(props)}
+                          class="h-7 gap-1 text-xs"
-                              <Button
+                          onclick={() => handleDownloadAndApply(theme)}
-                                {...props}
+                        >
-                                variant="ghost"
+                          <Download class="size-3" />
-                                size="icon"
+                          Download & Apply
-                                class="size-7 text-muted-foreground hover:text-amber-300"
+                        </Button>
-                                onclick={() => handleToggleVisibility(theme)}
+                      {/if}
-                              >
+
-                                {#if theme.isHidden}
+                      {#if showOverflowMenu}
-                                  <Eye class="size-3.5" />
+                        <DropdownMenu.Root>
-                                {:else}
+                          <DropdownMenu.Trigger>
-                                  <EyeOff class="size-3.5" />
+                            {#snippet child({ props })}
-                                {/if}
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
-                        {#if canModerate}
-                          <WorkshopTooltip content={theme.isQuarantined ? 'Lift takedown' : 'Take down theme'}>
-                            {#snippet trigger(props)}
-                              <Button
-                                {...props}
-                                variant="ghost"
-                                size="icon"
-                                class="size-7 text-muted-foreground hover:text-red-300"
-                                onclick={() => handleToggleQuarantine(theme)}
-                                disabled={quarantineId === theme.id}
-                              >
-                                {#if quarantineId === theme.id}
-                                  <LoaderCircle class="size-3.5 animate-spin" />
-                                {:else}
-                                  <Ban class="size-3.5" />
-                                {/if}
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
-                        {#if $currentUser && !theme.isHidden && !theme.isQuarantined && theme.apiVersion !== '1.0' && !theme.tags?.includes('legacy')}
-                          <WorkshopTooltip content="Report this theme">
-                            {#snippet trigger(props)}
-                              <Button
-                                {...props}
-                                variant="ghost"
-                                size="icon"
-                                class="size-7 text-muted-foreground hover:text-amber-300"
-                                onclick={() => openReportDialog(theme)}
-                                disabled={reportSubmitting && reportTarget?.id === theme.id}
-                              >
-                                {#if reportSubmitting && reportTarget?.id === theme.id}
-                                  <LoaderCircle class="size-3.5 animate-spin" />
-                                {:else}
-                                  <Flag class="size-3.5" />
-                                {/if}
-                              </Button>
-                            {/snippet}
-                          </WorkshopTooltip>
-                        {/if}
-                        {#if theme.apiVersion !== '1.0' && !theme.tags?.includes('legacy')}
-                          <WorkshopTooltip content="Fork this theme into your account">
-                            {#snippet trigger(props)}
                               <Button
                                 {...props}
                                 variant="ghost"
                                 size="icon"
                                 class="size-7 text-muted-foreground hover:text-white"
+                                aria-label="More actions for {theme.name}"
+                              >
+                                <Ellipsis class="size-4" />
+                              </Button>
+                            {/snippet}
+                          </DropdownMenu.Trigger>
+                          <DropdownMenu.Content
+                            align="end"
+                            class="w-52 border-theme-700 bg-theme-950 text-theme-50"
+                          >
+                            {#if owned}
+                              <DropdownMenu.Item
+                                class="gap-2 text-[11px]"
+                                onclick={() => void handleEditTags(theme)}
+                                disabled={tagEditingId === theme.id}
+                              >
+                                {#if tagEditingId === theme.id}
+                                  <LoaderCircle class="size-3.5 animate-spin" />
+                                  Saving tags...
+                                {:else}
+                                  <Tag class="size-3.5" />
+                                  Edit tags
+                                {/if}
+                              </DropdownMenu.Item>
+                              {#if !isLegacy && isInstalled && hasUpdate}
+                                <DropdownMenu.Item
+                                  class="gap-2 text-[11px]"
+                                  onclick={() => handleRefreshOwnedTheme(theme)}
+                                >
+                                  <RefreshCw class="size-3.5" />
+                                  Refresh installed copy
+                                </DropdownMenu.Item>
+                              {/if}
+                            {:else if $currentUser && !isLegacy && !theme.isHidden && !theme.isQuarantined}
+                              <DropdownMenu.Item
+                                class="gap-2 text-[11px]"
+                                onclick={() => openReportDialog(theme)}
+                              >
+                                <Flag class="size-3.5" />
+                                Report theme
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                class="gap-2 text-[11px]"
                                 onclick={() => handleForkTheme(theme)}
                               >
                                 <CopyPlus class="size-3.5" />
-                              </Button>
+                                Fork theme
-                            {/snippet}
+                              </DropdownMenu.Item>
-                          </WorkshopTooltip>
+                            {/if}
-                        {/if}
+
-                        {#if isActive}
+                            {#if canModerate}
-                          <Badge variant="outline" class="border-emerald-500/40 bg-emerald-950/20 text-emerald-300 text-[10px]">
+                              {#if owned || ($currentUser && !isLegacy && !theme.isHidden && !theme.isQuarantined)}
-                            <Check class="mr-1 size-3" /> In use
+                                <DropdownMenu.Separator class="my-1 bg-theme-800" />
-                          </Badge>
+                              {/if}
-                        {:else if isInstalled && hasUpdate}
+                              {#if !isLegacy}
-                          <Button
+                                <DropdownMenu.Item
-                            size="sm"
+                                  class="gap-2 text-[11px]"
-                            class="h-7 text-xs bg-cyan-600 hover:bg-cyan-500 text-white font-medium"
+                                  onclick={() => handleToggleVisibility(theme)}
-                            onclick={() => handleDownloadAndApply(theme)}
+                                >
-                          >
+                                  {#if theme.isHidden}
-                            Update
+                                    <Eye class="size-3.5" />
-                          </Button>
+                                    Restore visibility
-                        {:else if isInstalled}
+                                  {:else}
-                          <Button
+                                    <EyeOff class="size-3.5" />
-                            variant="secondary"
+                                    Hide from workshop
-                            size="sm"
+                                  {/if}
-                            class="h-7 text-xs"
+                                </DropdownMenu.Item>
-                            onclick={() => handleApplyExisting(theme)}
+                              {/if}
-                          >
+                              <DropdownMenu.Item
-                            Apply
+                                class="gap-2 text-[11px]"
-                          </Button>
+                                onclick={() => handleToggleQuarantine(theme)}
-                        {:else}
+                                disabled={quarantineId === theme.id}
-                          <Button
+                              >
-                            size="sm"
+                                {#if quarantineId === theme.id}
-                            class="h-7 text-xs"
+                                  <LoaderCircle class="size-3.5 animate-spin" />
-                            onclick={() => handleDownloadAndApply(theme)}
+                                  Updating...
-                          >
+                                {:else}
-                            <Download class="mr-1 size-3" />
+                                  <Ban class="size-3.5" />
-                            Download & Apply
+                                  {theme.isQuarantined ? 'Lift takedown' : 'Take down theme'}
-                          </Button>
+                                {/if}
-                        {/if}
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                class="gap-2 text-[11px]"
+                                onclick={() => void openThemeHistory(theme.id, theme.name)}
+                              >
+                                <History class="size-3.5" />
+                                Moderation history
+                              </DropdownMenu.Item>
+                            {/if}
+
+                            {#if owned}
+                              <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"
+                                onclick={() => handleDeleteTheme(theme)}
+                              >
+                                <Trash2 class="size-3.5" />
+                                Move to trash
+                              </DropdownMenu.Item>
+                            {/if}
+                          </DropdownMenu.Content>
+                        </DropdownMenu.Root>
                       {/if}
                     {/if}
                   </div>

src/lib/components/theme/ThemeEditorWindow.svelte

@@ -72,6 +72,7 @@
     createThemeV2Behavior,
     createThemeV2Element,
     normalizeChrome,
+    normalizeThemeTags,
     normalizeThemeV2,
     themeAssetName,
     themeHasLaunchButton,
@@ -3333,11 +3334,8 @@
 
   let publishModalOpen = $state(false);
   let publishThemeId = $state('');
-  let publishName = $state('');
-  let publishDescription = $state('');
-  let publishVersion = $state('1.0.0');
-  let publishTags = $state('anime, video');
   let publishing = $state(false);
+  let tagInput = $state('');
   let publishStatusMessage = $state('');
   let publishProgress = $state(0);
 
@@ -3367,15 +3365,37 @@
     }
 
     publishThemeId = savedFolder || toSafeName(definition.name);
-    publishName = definition.name || 'My Theme';
-    publishDescription = definition.description || '';
-    publishVersion = definition.version || '1.0.0';
-    publishTags = 'workshop, v2';
     publishProgress = 0;
     publishStatusMessage = '';
     publishModalOpen = true;
   }
 
+  function addThemeTag() {
+    const value = tagInput.trim().toLowerCase();
+    if (!value) return;
+
+    const current = definition.tags ?? [];
+    if (current.length >= 10) {
+      notifyError('A theme may have at most 10 tags.');
+      return;
+    }
+
+    const tags = normalizeThemeTags([...current, value]);
+    if (!tags.includes(value)) {
+      notifyError(
+        'Tags may contain lowercase letters, numbers, dashes and underscores (max 24 characters).'
+      );
+      return;
+    }
+
+    definition.tags = tags;
+    tagInput = '';
+  }
+
+  function removeThemeTag(tag: string) {
+    definition.tags = (definition.tags ?? []).filter((candidate) => candidate !== tag);
+  }
+
   async function handlePublishToWorkshop() {
     if (publishing) return;
     if (!savedFolder) {
@@ -3390,18 +3410,16 @@
     try {
       const baseThemesDir = await themesDirectory();
       const themeFolder = await path.join(baseThemesDir, savedFolder);
+      const themeId = savedFolder || toSafeName(definition.name);
 
       await publishThemeToWorkshop({
         themeFolder,
-        themeId: publishThemeId,
+        themeId,
-        name: publishName,
+        name: definition.name,
-        description: publishDescription,
+        description: definition.description || '',
-        version: publishVersion,
+        version: definition.version || '1.0.0',
         apiVersion: definition.apiVersion || '2.0.0',
-        tags: publishTags
+        tags: definition.tags ?? [],
-          .split(',')
-          .map((t) => t.trim())
-          .filter(Boolean),
         onProgress: (msg, pct) => {
           publishStatusMessage = msg;
           publishProgress = pct;
@@ -3410,7 +3428,7 @@
 
       sileo.success({
         title: 'Published to Workshop!',
-        description: `"${publishName}" is now live in the Community Themes Workshop.`,
+        description: `"${definition.name}" is now live in the Community Themes Workshop.`,
       });
 
       publishModalOpen = false;
@@ -4963,6 +4981,63 @@
                 class="min-h-16 resize-y border-theme-800 bg-theme-950 text-xs text-theme-50"
               />
             </div>
+            <div class="space-y-1.5">
+              <div class="flex items-center justify-between">
+                <Label for="theme-tags" class={labelClass}>Tags</Label>
+                <span class="text-[9px] tabular-nums text-muted-foreground">
+                  {(definition.tags ?? []).length}/10
+                </span>
+              </div>
+              <div class="flex gap-2">
+                <Input
+                  id="theme-tags"
+                  bind:value={tagInput}
+                  class={fieldClass}
+                  placeholder="anime, dark, minimal"
+                  maxlength={24}
+                  onkeydown={(event) => {
+                    if (event.key === 'Enter' || event.key === ',') {
+                      event.preventDefault();
+                      addThemeTag();
+                    }
+                  }}
+                  onblur={addThemeTag}
+                />
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  class="h-9 shrink-0 gap-1 px-2.5"
+                  onclick={addThemeTag}
+                  disabled={!tagInput.trim()}
+                >
+                  <Plus class="size-3.5" />
+                  Add
+                </Button>
+              </div>
+              {#if (definition.tags ?? []).length > 0}
+                <div class="flex flex-wrap gap-1.5 pt-1">
+                  {#each definition.tags ?? [] as tag (tag)}
+                    <span
+                      class="inline-flex items-center gap-1 rounded-full border border-theme-700 bg-theme-900 px-2 py-1 text-[10px] text-theme-100"
+                    >
+                      {tag}
+                      <button
+                        type="button"
+                        class="rounded-full text-muted-foreground transition-colors hover:text-white"
+                        aria-label={`Remove ${tag} tag`}
+                        onclick={() => removeThemeTag(tag)}
+                      >
+                        <X class="size-3" />
+                      </button>
+                    </span>
+                  {/each}
+                </div>
+              {:else}
+                <p class="text-[10px] text-muted-foreground/70">
+                  Add tags to help people discover this theme.
+                </p>
+              {/if}
+            </div>
             <div
               class="flex items-start justify-between gap-3 rounded-md border border-theme-800 bg-theme-950 px-3 py-2.5"
             >
@@ -6805,58 +6880,52 @@
           </div>
         {/if}
 
-        <div class="mt-4 flex flex-col gap-3">
+        <div class="mt-4 space-y-3 rounded-xl border border-theme-800/70 bg-theme-900/25 p-4">
-          <div>
+          <div class="flex items-start justify-between gap-3">
-            <Label class="text-[11px] text-muted-foreground">Workshop Identifier (Slug)</Label>
+            <div class="min-w-0">
-            <Input
+              <p class="truncate text-sm font-semibold text-white">
-              class="mt-1 h-8 border-theme-800 bg-theme-900/50 text-xs font-mono"
+                {definition.name || 'Untitled theme'}
-              bind:value={publishThemeId}
+              </p>
-              placeholder="e.g. lucoa-theme"
+              <p class="mt-0.5 text-[10px] text-muted-foreground">
-              disabled={publishing}
+                by {definition.author || 'Unknown'} · v{definition.version || '1.0.0'}
-            />
+              </p>
+            </div>
+            <span
+              class="shrink-0 rounded-full border border-cyan-500/30 bg-cyan-500/10 px-2 py-0.5 font-mono text-[10px] text-cyan-300"
+            >
+              API {definition.apiVersion || '2.0.0'}
+            </span>
           </div>
-
+          <p class="text-xs leading-relaxed text-muted-foreground">
-          <div class="grid grid-cols-3 gap-2">
+            {definition.description?.trim() || 'No description yet.'}
-            <div class="col-span-2">
+          </p>
-              <Label class="text-[11px] text-muted-foreground">Theme Name</Label>
+          <div class="grid grid-cols-2 gap-3 border-t border-theme-800/60 pt-3">
-              <Input
+            <div class="min-w-0">
-                class="mt-1 h-8 border-theme-800 bg-theme-900/50 text-xs"
+              <span class="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                bind:value={publishName}
+                Workshop ID
-                placeholder="My Awesome Theme"
+              </span>
-                disabled={publishing}
+              <p class="mt-1 truncate font-mono text-[11px] text-theme-100">{publishThemeId}</p>
-              />
             </div>
             <div>
-              <Label class="text-[11px] text-muted-foreground">Version</Label>
+              <span class="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              <Input
+                Tags
-                class="mt-1 h-8 border-theme-800 bg-theme-900/50 text-xs font-mono"
+              </span>
-                bind:value={publishVersion}
+              {#if (definition.tags ?? []).length > 0}
-                placeholder="1.0.0"
+                <div class="mt-1 flex flex-wrap gap-1">
-                disabled={publishing}
+                  {#each definition.tags ?? [] as tag}
-              />
+                    <span class="rounded bg-theme-800 px-1.5 py-0.5 text-[10px] text-theme-100">
+                      {tag}
+                    </span>
+                  {/each}
+                </div>
+              {:else}
+                <p class="mt-1 text-[10px] text-muted-foreground">No tags</p>
+              {/if}
             </div>
           </div>
-
+          <p class="text-[10px] leading-relaxed text-muted-foreground/70">
-          <div>
+            These details come from the Theme tab. Change them there before publishing.
-            <Label class="text-[11px] text-muted-foreground">Description</Label>
+          </p>
-            <Textarea
-              class="mt-1 border-theme-800 bg-theme-900/50 text-xs leading-relaxed"
-              rows={2}
-              bind:value={publishDescription}
-              placeholder="Tell others about your theme..."
-              disabled={publishing}
-            />
-          </div>
-
-          <div>
-            <Label class="text-[11px] text-muted-foreground">Tags (comma-separated)</Label>
-            <Input
-              class="mt-1 h-8 border-theme-800 bg-theme-900/50 text-xs"
-              bind:value={publishTags}
-              placeholder="anime, video, clean"
-              disabled={publishing}
-            />
-          </div>
         </div>
 
         {#if publishing}
@@ -6890,7 +6959,7 @@
             size="sm"
             class="bg-cyan-600 hover:bg-cyan-500 text-white font-medium gap-1.5"
             onclick={handlePublishToWorkshop}
-            disabled={publishing || publishThemeId.trim().length < 2 || publishName.trim().length === 0}
+            disabled={publishing || publishThemeId.trim().length < 2 || definition.name.trim().length === 0}
           >
             {#if publishing}
               <LoaderCircle class="size-3.5 animate-spin" />

src/lib/themeV2.ts

@@ -647,6 +647,8 @@ export type ThemeV2Definition = {
   apiVersion: '2.0';
   author: string;
   description?: string;
+  /** Workshop discovery tags for this theme. */
+  tags?: string[];
   /** Marks the theme as adult content in the theme manager. */
   nsfw?: boolean;
   /** Optional preview image, relative to the theme's assets folder. */
@@ -724,6 +726,22 @@ export const themeClassTokens = (value: unknown): string[] => {
 /** Sanitized class attribute value for a layer or group. */
 export const themeClassNames = (value: unknown): string => themeClassTokens(value).join(' ');
 
+const THEME_TAG_PATTERN = /^[a-z0-9][a-z0-9_-]{0,23}$/;
+
+/** Keep workshop tags lowercase, unique, and within the service limits. */
+export const normalizeThemeTags = (raw: unknown): string[] => {
+  if (!Array.isArray(raw)) return [];
+  const tags: string[] = [];
+  for (const candidate of raw) {
+    if (typeof candidate !== 'string') continue;
+    const tag = candidate.trim().toLowerCase();
+    if (!THEME_TAG_PATTERN.test(tag) || tags.includes(tag)) continue;
+    tags.push(tag);
+    if (tags.length === 10) break;
+  }
+  return tags;
+};
+
 const clampInteger = (value: unknown, fallback: number, min: number, max: number) =>
   Math.round(clamp(value, fallback, min, max));
 
@@ -1754,6 +1772,7 @@ export const createDefaultThemeV2 = (): ThemeV2Definition => ({
   apiVersion: '2.0',
   author: '',
   description: '',
+  tags: [],
   nsfw: false,
   background: {
     type: 'gradient',
@@ -1881,6 +1900,7 @@ export const normalizeThemeV2 = (raw: Partial<ThemeV2Definition>): ThemeV2Defini
     apiVersion: '2.0',
     author: text(raw.author, 'Unknown'),
     description: text(raw.description),
+    tags: normalizeThemeTags(raw.tags),
     nsfw: raw.nsfw === true,
     preview: text(raw.preview),
     background,