feat(themes): add revert for unsynced themes

Restore the published Workshop version after confirmation, keeping a backup of
local edits. Owner reverts send auth headers so themes-service skips the
download counter.

src-tauri/src/commands.rs

@@ -3,7 +3,7 @@ use hardware_id::get_id;
 use reqwest::Client;
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
-use std::collections::HashSet;
+use std::collections::{HashMap, HashSet};
 use std::io::Read;
 use std::path::{Path, PathBuf};
 #[cfg(not(target_os = "macos"))]
@@ -1688,14 +1688,19 @@ pub async fn download_and_extract_community_theme(
     download_url: String,
     theme_folder: String,
     theme_name: String,
+    request_headers: Option<HashMap<String, String>>,
 ) -> Result<(), String> {
     let client = reqwest::Client::new();
-    let response = client
+    let mut request = client.get(&download_url).header(
-        .get(&download_url)
-        .header(
         "User-Agent",
         "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36",
-        )
+    );
+    if let Some(headers) = request_headers {
+        for (name, value) in headers {
+            request = request.header(name.as_str(), value.as_str());
+        }
+    }
+    let response = request
         .send()
         .await
         .map_err(|e| format!("Failed to download theme: {}", e))?;

src/lib/theme/communityThemes.ts

@@ -953,12 +953,27 @@ export async function reviewCommunityTheme(
 export async function downloadAndInstallCommunityTheme(
   theme: CommunityTheme,
   onProgress?: (status: string, percentage: number) => void,
-  options?: { folderName?: string }
+  options?: { folderName?: string; skipDownloadCount?: boolean }
 ): Promise<{ success: boolean; folderName: string }> {
   const { onProgress: reportProgress = () => {} } = { onProgress };
   const baseThemesDir = await themesDirectory();
   const folderName = options?.folderName?.trim() || theme.id;
   const targetFolder = await path.join(baseThemesDir, folderName);
+  const skipDownloadCount = options?.skipDownloadCount === true;
+  const downloadUrl = skipDownloadCount
+    ? (() => {
+        const url = new URL(theme.downloadUrl);
+        url.searchParams.set('skipDownloadCount', '1');
+        return url.toString();
+      })()
+    : theme.downloadUrl;
+  let requestHeaders: Record<string, string> | undefined;
+  if (skipDownloadCount) {
+    requestHeaders = await getAuthHeaders();
+    if (!requestHeaders['X-Username'] || !requestHeaders['X-Password']) {
+      throw new Error('Please log in again before reverting this theme.');
+    }
+  }
 
   reportProgress('Downloading theme package...', 10);
 
@@ -987,9 +1002,10 @@ export async function downloadAndInstallCommunityTheme(
   try {
     try {
       await invoke('download_and_extract_community_theme', {
-        downloadUrl: theme.downloadUrl,
+        downloadUrl,
         themeFolder: targetFolder,
         themeName: theme.name,
+        ...(requestHeaders ? { requestHeaders } : {}),
       });
     } catch (err) {
       // Fallback for legacy themes directly to git repo

src/screens/Launch.svelte

@@ -315,6 +315,7 @@
   let restoringTheme = $state(false);
   let uninstallCandidate = $state<Theme | undefined>(undefined);
   let uninstallingTheme = $state(false);
+  let revertCandidate = $state<Theme | undefined>(undefined);
   let installedReportOpen = $state(false);
   let installedReportTarget = $state<CommunityTheme | null>(null);
   let installedReportLoading = $state(false);
@@ -768,8 +769,8 @@
     }
   };
 
-  const updateInstalledTheme = async (theme: Theme) => {
+  const updateInstalledTheme = async (theme: Theme, mode: 'update' | 'revert' = 'update') => {
-    if (theme.status !== 'installed' || updatingThemeFolder) return;
+    if (theme.status !== 'installed' || updatingThemeFolder) return false;
 
     const wasActive = $active_custom_theme?.folder_name === theme.folder_name;
     updatingThemeFolder = theme.folder_name;
@@ -785,12 +786,19 @@
         try {
           backup = await invoke<string>('backup_theme_folder', { themeFolder });
         } catch (error) {
+          if (mode === 'revert') {
+            throw new Error(
+              'Could not back up the current theme before reverting. Your local changes were left untouched.',
+              { cause: error }
+            );
+          }
           console.warn('Could not back up the theme before updating it', error);
         }
 
         try {
           await downloadAndInstallCommunityTheme(target, () => {}, {
             folderName: theme.folder_name,
+            skipDownloadCount: mode === 'revert',
           });
         } catch (error) {
           if (backup) {
@@ -820,21 +828,40 @@
 
       themeContentHashCache.delete(theme.folder_name);
       communityThemeCache.delete(theme.folder_name);
+      await refreshThemeSyncState(theme.folder_name);
       sileo.success({
-        title: 'Yaay!',
+        title: mode === 'revert' ? 'Theme reverted' : 'Yaay!',
-        description: 'Theme updated successfully!',
+        description:
+          mode === 'revert'
+            ? `"${theme.name}" was restored to the published Workshop version.`
+            : 'Theme updated successfully!',
       });
+      return true;
     } catch (error) {
       console.error(error);
       sileo.error({
-        title: 'Could not update theme',
+        title: mode === 'revert' ? 'Could not revert theme' : 'Could not update theme',
         description: error instanceof Error ? error.message : String(error),
       });
+      return false;
     } finally {
       updatingThemeFolder = undefined;
     }
   };
 
+  const requestThemeRevert = (theme: Theme) => {
+    if (theme.status !== 'installed' || !theme.workshopId || updatingThemeFolder) return;
+    revertCandidate = theme;
+  };
+
+  const confirmThemeRevert = async () => {
+    const theme = revertCandidate;
+    if (!theme) return;
+    if (await updateInstalledTheme(theme, 'revert')) {
+      revertCandidate = undefined;
+    }
+  };
+
   $effect(() => {
     const userId = $currentUser?.id;
     const themeCount = $custom_themes.length;
@@ -2427,29 +2454,40 @@
   </AlertDialog.Content>
 </AlertDialog.Root>
 
-<AlertDialog.Root open={uninstallCandidate !== undefined}>
+<AlertDialog.Root
-  <AlertDialog.Content
+  open={uninstallCandidate !== undefined}
-    class="bg-theme-950 border-theme-800 p-0 max-w-xl"
+  onOpenChange={(open) => {
-    escapeKeydownBehavior="ignore"
+    if (!open && !uninstallingTheme) uninstallCandidate = undefined;
-    interactOutsideBehavior="ignore"
+  }}
+>
+  <AlertDialog.Content class="max-w-md border-theme-800 bg-theme-950 text-white">
+    <AlertDialog.Header>
+      <AlertDialog.Title class="flex items-center gap-2 text-base">
+        <ThemeIcon name="trash" set={iconSet} class="size-4 text-red-400" />
+        Uninstall theme?
+      </AlertDialog.Title>
+      <AlertDialog.Description class="text-[11px] leading-relaxed text-muted-foreground">
+        Remove <span class="font-medium text-theme-100">{uninstallCandidate?.name}</span> from your library?
+        This deletes the local theme files from this computer.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+
+    {#if uninstallCandidate && uninstallCandidate.workshopId && isOwnInstalledTheme(uninstallCandidate)}
+      <p
+        class="flex items-start gap-2 rounded-md border border-theme-800 bg-theme-900/50 p-2.5 text-[11px] leading-relaxed text-muted-foreground"
       >
-    <div
+        <Globe class="mt-0.5 size-3.5 shrink-0 text-cyan-300" />
-      class="flex flex-col items-center justify-center gap-2 border-b border-theme-800 bg-black/40 rounded-t-lg p-4"
+        <span>
-    >
+          Your published Workshop copy stays online. Only this local copy and any unpublished
-      <ThemeIcon name="trash" set={iconSet} class="size-7 text-red-300" />
+          changes are removed.
-      <span class="font-semibold text-lg">Uninstall theme?</span>
+        </span>
-    </div>
+      </p>
-    <div
+    {/if}
-      class="mx-3 mt-3 rounded-lg border border-theme-800 bg-theme-900 p-3 text-xs leading-relaxed text-muted-foreground"
+
-    >
+    <AlertDialog.Footer class="gap-2">
-      Remove <strong class="text-theme-100">{uninstallCandidate?.name}</strong> from your library? This
-      deletes the local theme files and any unpublished changes. If the theme is published to the Workshop,
-      that copy is not affected.
-    </div>
-    <div class="flex items-center justify-center gap-3 p-4">
       <Button
-        variant="outline"
+        variant="ghost"
-        class="min-w-28"
+        size="sm"
         disabled={uninstallingTheme}
         onclick={() => (uninstallCandidate = undefined)}
       >
@@ -2457,18 +2495,66 @@
       </Button>
       <Button
         variant="destructive"
-        class="min-w-28"
+        size="sm"
+        class="gap-1.5"
         disabled={uninstallingTheme}
         onclick={confirmThemeUninstall}
       >
         {#if uninstallingTheme}
-          <ThemeIcon name="loader" set={iconSet} class="animate-spin" />
+          <ThemeIcon name="loader" set={iconSet} class="size-3.5 animate-spin" />
+          Uninstalling...
         {:else}
-          <ThemeIcon name="trash" set={iconSet} class="size-4" />
+          <ThemeIcon name="trash" set={iconSet} class="size-3.5" />
+          Uninstall theme
         {/if}
-        {uninstallingTheme ? 'Uninstalling...' : 'Uninstall theme'}
       </Button>
-    </div>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root
+  open={revertCandidate !== undefined}
+  onOpenChange={(open) => {
+    if (!open && updatingThemeFolder !== revertCandidate?.folder_name) revertCandidate = undefined;
+  }}
+>
+  <AlertDialog.Content class="max-w-md border-theme-800 bg-theme-950 text-white">
+    <AlertDialog.Header>
+      <AlertDialog.Title class="flex items-center gap-2 text-base">
+        <ThemeIcon name="rotate" set={iconSet} class="size-4 text-amber-300" />
+        Revert unsynced changes?
+      </AlertDialog.Title>
+      <AlertDialog.Description class="text-[11px] leading-relaxed text-muted-foreground">
+        Replace the local files for <span class="font-medium text-theme-100"
+          >{revertCandidate?.name}</span
+        > with the published Workshop version? Any unpublished changes will be removed. A backup of the
+        current local copy will be created first.
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer class="gap-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        disabled={updatingThemeFolder === revertCandidate?.folder_name}
+        onclick={() => (revertCandidate = undefined)}
+      >
+        Cancel
+      </Button>
+      <Button
+        size="sm"
+        class="gap-1.5"
+        disabled={updatingThemeFolder === revertCandidate?.folder_name}
+        onclick={confirmThemeRevert}
+      >
+        {#if updatingThemeFolder === revertCandidate?.folder_name}
+          <ThemeIcon name="loader" set={iconSet} class="size-3.5 animate-spin" />
+          Reverting...
+        {:else}
+          <ThemeIcon name="rotate" set={iconSet} class="size-3.5" />
+          Revert changes
+        {/if}
+      </Button>
+    </AlertDialog.Footer>
   </AlertDialog.Content>
 </AlertDialog.Root>
 
@@ -4343,6 +4429,10 @@
                               workshopVersion !== localVersion}
                             {@const isNotSynced =
                               isOwnTheme && (theme.isNotSynced === true || versionMismatch)}
+                            {@const canRevertTheme =
+                              isNotSynced &&
+                              theme.status === 'installed' &&
+                              Boolean(theme.workshopId)}
                             {@const canReportTheme =
                               Boolean($currentUser && ownedWorkshopLoaded) &&
                               !isOwnTheme &&
@@ -4357,6 +4447,7 @@
                               canEditTheme ||
                               canRestoreTheme ||
                               canUpdateTheme ||
+                              canRevertTheme ||
                               canReportTheme ||
                               canUninstallTheme}
                             <div
@@ -4633,7 +4724,7 @@
                                               Restore previous version
                                             </DropdownMenu.Item>
                                           {/if}
-                                          {#if canUpdateTheme}
+                                          {#if canUpdateTheme && !canRevertTheme}
                                             <DropdownMenu.Item
                                               class="gap-2 text-[11px]"
                                               disabled={updatingThemeFolder === theme.folder_name}
@@ -4647,6 +4738,20 @@
                                               Update theme
                                             </DropdownMenu.Item>
                                           {/if}
+                                          {#if canRevertTheme}
+                                            <DropdownMenu.Item
+                                              class="gap-2 text-[11px] text-amber-200 data-[highlighted]:bg-amber-500/10 data-[highlighted]:text-amber-100"
+                                              disabled={updatingThemeFolder === theme.folder_name}
+                                              onclick={() => requestThemeRevert(theme)}
+                                            >
+                                              <ThemeIcon
+                                                name="rotate"
+                                                set={iconSet}
+                                                class="size-3.5"
+                                              />
+                                              Revert unsynced changes
+                                            </DropdownMenu.Item>
+                                          {/if}
                                           {#if canReportTheme}
                                             <DropdownMenu.Item
                                               class="gap-2 text-[11px]"
@@ -4658,7 +4763,7 @@
                                             </DropdownMenu.Item>
                                           {/if}
                                           {#if canUninstallTheme}
-                                            {#if canEditTheme || canRestoreTheme || canUpdateTheme || canReportTheme}
+                                            {#if canEditTheme || canRestoreTheme || canUpdateTheme || canRevertTheme || canReportTheme}
                                               <DropdownMenu.Separator class="my-1 bg-theme-800" />
                                             {/if}
                                             <DropdownMenu.Item