Merge pull request #264 from xXJSONDeruloXx/chore/migrate

the big one

6 files changed, 888 insertions, 362 deletions

diff --git a/src/hooks/useFlatpakConfiguration.ts b/src/hooks/useFlatpakConfiguration.ts
new file mode 100644
index 0000000..f936271
--- /dev/null
+++ b/src/hooks/useFlatpakConfiguration.ts
@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  enableFlatpakApp,
+  getFlatpakApps,
+  getRunningFlatpakApps,
+  removeFlatpakApp,
+  setFlatpakWorkaroundState,
+  updateFlatpakConfig,
+  type FlatpakApp,
+  type LsfgConfig,
+  type RunningFlatpakApp,
+  type WorkaroundState,
+} from "../api/lsfgApi";
+import { selectMostRecentRunningFlatpak } from "../utils/nowPlaying";
+import { showErrorToast } from "../utils/toastUtils";
+
+type FlatpakOperationResult = {
+  success: boolean;
+  error?: string | null;
+  config?: LsfgConfig | null;
+  state?: WorkaroundState | null;
+};
+
+export function useFlatpakConfiguration(enabled: boolean) {
+  const [apps, setApps] = useState<FlatpakApp[]>([]);
+  const [runningApps, setRunningApps] = useState<RunningFlatpakApp[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [busyAppId, setBusyAppId] = useState("");
+
+  const reload = useCallback(async () => {
+    if (!enabled) {
+      setApps([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const result = await getFlatpakApps();
+      if (!result.success) throw new Error(result.error || "Could not list Flatpak applications");
+      setApps(result.apps || []);
+    } catch (error) {
+      showErrorToast("Flatpak unavailable", error instanceof Error ? error.message : String(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [enabled]);
+
+  const pollRunning = useCallback(async () => {
+    if (!enabled) {
+      setRunningApps([]);
+      return;
+    }
+    try {
+      const result = await getRunningFlatpakApps();
+      if (result.success) setRunningApps(result.apps || []);
+    } catch {}
+  }, [enabled]);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  useEffect(() => {
+    void pollRunning();
+    if (!enabled) return;
+    const interval = window.setInterval(() => void pollRunning(), 2000);
+    return () => window.clearInterval(interval);
+  }, [enabled, pollRunning]);
+
+  const operate = useCallback(async (
+    appId: string,
+    operation: () => Promise<FlatpakOperationResult>,
+    refresh = true,
+  ): Promise<FlatpakOperationResult> => {
+    if (busyAppId) return { success: false };
+    setBusyAppId(appId);
+    try {
+      const result = await operation();
+      if (!result.success) throw new Error(result.error || "Flatpak operation failed");
+      if (refresh) {
+        await reload();
+        await pollRunning();
+      }
+      return result;
+    } catch (error) {
+      showErrorToast("Flatpak operation failed", error instanceof Error ? error.message : String(error));
+      return { success: false, error: error instanceof Error ? error.message : String(error) };
+    } finally {
+      setBusyAppId("");
+    }
+  }, [busyAppId, pollRunning, reload]);
+
+  const enableApp = useCallback(async (appId: string) => (
+    await operate(appId, () => enableFlatpakApp(appId))
+  ).success, [operate]);
+  const removeApp = useCallback(async (appId: string) => (
+    await operate(appId, () => removeFlatpakApp(appId))
+  ).success, [operate]);
+  const enableAll = useCallback(async (): Promise<void> => {
+    if (busyAppId) return;
+    const available = apps.filter((app) => (
+      !app.enabled && !(app.prepared && !app.owned) && !app.error
+    ));
+    for (const app of available) {
+      const result = await operate(app.app_id, () => enableFlatpakApp(app.app_id), false);
+      if (!result.success) break;
+    }
+    await reload();
+    await pollRunning();
+  }, [apps, busyAppId, operate, pollRunning, reload]);
+  const removeAll = useCallback(async (): Promise<void> => {
+    if (busyAppId) return;
+    for (const app of apps.filter((item) => item.enabled)) {
+      const result = await operate(app.app_id, () => removeFlatpakApp(app.app_id), false);
+      if (!result.success) break;
+    }
+    await reload();
+    await pollRunning();
+  }, [apps, busyAppId, operate, pollRunning, reload]);
+  const updateConfig = useCallback(
+    async (appId: string, config: LsfgConfig) => {
+      const result = await operate(appId, () => updateFlatpakConfig(appId, config), false);
+      if (result.success) {
+        setApps((current) => current.map((app) => (
+          app.app_id === appId ? { ...app, config: result.config || config } : app
+        )));
+      }
+      return result.success;
+    },
+    [operate],
+  );
+  const updateWorkarounds = useCallback(
+    async (appId: string, state: WorkaroundState) => {
+      const result = await operate(appId, () => setFlatpakWorkaroundState(appId, state), false);
+      if (result.success) {
+        setApps((current) => current.map((app) => (
+          app.app_id === appId ? { ...app, workarounds: result.state || state } : app
+        )));
+      }
+      return result.success;
+    },
+    [operate],
+  );
+
+  const runningApp = useMemo(() => selectMostRecentRunningFlatpak(apps, runningApps), [apps, runningApps]);
+
+  return {
+    apps,
+    runningApps,
+    runningApp,
+    loading,
+    busyAppId,
+    reload,
+    enableApp,
+    enableAll,
+    removeApp,
+    removeAll,
+    updateConfig,
+    updateWorkarounds,
+  };
+}
diff --git a/src/hooks/useGameConfiguration.ts b/src/hooks/useGameConfiguration.ts
new file mode 100644
index 0000000..deb68ff
--- /dev/null
+++ b/src/hooks/useGameConfiguration.ts
@@ -0,0 +1,378 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQuickAccessVisible } from "@decky/api";
+import { Router } from "@decky/ui";
+import { getGameConfigs, getInstalledGames, getWorkaroundApps, getWorkaroundState, removeWorkaroundState, resetGameConfig, resetGameConfigs, setWorkaroundState, updateGameConfig, updateGlobalConfig as saveGlobalConfig, type GameConfigEntry, type GlobalConfig, type InstalledGame, type WorkaroundApp, type WorkaroundState } from "../api/lsfgApi";
+import { ConfigurationData, getDefaults } from "../config/configSchema";
+import { getDefaultWrapperPath, installWrapperIntegration, removeWrapperIntegration } from "../utils/steamLaunchOptions";
+import { getTargetSource, mergeGameTargets, type GameTarget, type KnownGameSource } from "../utils/gameTargets";
+import { showErrorToast } from "../utils/toastUtils";
+
+export type { GameSource, GameTarget, KnownGameSource } from "../utils/gameTargets";
+
+async function getSteamShortcuts(): Promise<InstalledGame[]> {
+  const apps = (globalThis as any).SteamClient?.Apps;
+  if (typeof apps?.GetAllShortcuts !== "function") return [];
+
+  try {
+    const shortcuts = await apps.GetAllShortcuts();
+    if (!Array.isArray(shortcuts)) return [];
+    return shortcuts.flatMap((shortcut: any) => {
+      const appid = Number(shortcut?.appid);
+      const name = shortcut?.data?.strAppName;
+      if (!Number.isInteger(appid) || appid === 0 || typeof name !== "string" || !name) return [];
+      return [{
+        appid: String(appid >>> 0),
+        name,
+        nonSteam: true,
+      }];
+    });
+  } catch {
+    return [];
+  }
+}
+
+function mergeInstalledGames(backendGames: InstalledGame[], shortcutGames: InstalledGame[]) {
+  const games = new Map(backendGames.map((game) => [game.appid, game]));
+  for (const game of shortcutGames) {
+    const existing = games.get(game.appid);
+    games.set(game.appid, existing ? { ...existing, name: game.name, nonSteam: true } : game);
+  }
+  return Array.from(games.values());
+}
+
+const DEFAULT_WORKAROUND_STATE: WorkaroundState = {
+  dxvkFrameRate: 0,
+  disableGamescopeWsi: true,
+  disableHdr: true,
+  disableSteamdeckMode: false,
+  disableVkbasalt: false,
+  enableZink: false,
+};
+
+function asError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error));
+}
+
+export function useGameConfiguration() {
+  const [games, setGames] = useState<GameConfigEntry[]>([]);
+  const [globalConfig, setGlobalConfig] = useState<GlobalConfig>({ dll: "", no_fp16: false });
+  const [installedGames, setInstalledGames] = useState<InstalledGame[]>([]);
+  const [workaroundApps, setWorkaroundApps] = useState<WorkaroundApp[]>([]);
+  const [configsLoaded, setConfigsLoaded] = useState(false);
+  const [selectedAppId, setSelectedAppId] = useState("");
+  const [runningGame, setRunningGame] = useState<GameTarget | null>(null);
+  const [bulkOperationBusy, setBulkOperationBusy] = useState(false);
+  const bulkOperationLock = useRef(false);
+  const previousRunningAppId = useRef<string | null>(null);
+  const previousQuickAccessVisible = useRef<boolean | null>(null);
+  const quickAccessVisible = useQuickAccessVisible();
+
+  const load = useCallback(async () => {
+    const [result, installed, shortcuts, workaroundResult] = await Promise.all([
+      getGameConfigs(),
+      getInstalledGames(),
+      getSteamShortcuts(),
+      getWorkaroundApps(),
+    ]);
+    if (result.success) {
+      setGlobalConfig(result.global_config || { dll: "", no_fp16: false });
+      setGames(result.games || []);
+    }
+    setInstalledGames(mergeInstalledGames(installed.success ? installed.games || [] : [], shortcuts));
+    setWorkaroundApps(workaroundResult.success ? workaroundResult.apps || [] : []);
+    setConfigsLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    const initialLoad = previousQuickAccessVisible.current === null;
+    const becameVisible = quickAccessVisible && previousQuickAccessVisible.current === false;
+    previousQuickAccessVisible.current = quickAccessVisible;
+    if (initialLoad || becameVisible) void load();
+  }, [load, quickAccessVisible]);
+
+  useEffect(() => {
+    const poll = () => {
+      if (!configsLoaded) return;
+      const app = Router.MainRunningApp as any;
+      if (!app?.appid) return setRunningGame(null);
+      const appid = String(app.appid);
+      const installed = installedGames.find((game) => game.appid === appid);
+      const name = app.display_name || installed?.name;
+      if (!name) return setRunningGame(null);
+      const source = getTargetSource(appid, installedGames, workaroundApps);
+      const next: GameTarget = {
+        ...(installed || { appid, name, nonSteam: source === "nonSteam" }),
+        name,
+        nonSteam: source === "nonSteam",
+        source,
+        configured: games.some((game) => game.appid === appid),
+      };
+      setRunningGame((current) => (
+        current?.appid === next.appid
+        && current.name === next.name
+        && current.nonSteam === next.nonSteam
+        && current.source === next.source
+        && current.configured === next.configured
+          ? current
+          : next
+      ));
+    };
+    poll();
+    const interval = window.setInterval(poll, 2000);
+    return () => window.clearInterval(interval);
+  }, [configsLoaded, games, installedGames, workaroundApps]);
+
+  useEffect(() => {
+    const appid = runningGame?.appid || null;
+    if (appid !== previousRunningAppId.current) {
+      previousRunningAppId.current = appid;
+      setSelectedAppId(appid || "");
+    }
+  }, [runningGame?.appid]);
+
+  const targets = useMemo<GameTarget[]>(() => {
+    return mergeGameTargets(games, installedGames, workaroundApps, runningGame);
+  }, [games, installedGames, runningGame, workaroundApps]);
+  const template = useMemo(() => ({ ...getDefaults(), ...globalConfig }), [globalConfig]);
+  const config = games.find((game) => game.appid === selectedAppId)?.config || template;
+  const runningConfig = runningGame
+    ? games.find((game) => game.appid === runningGame.appid)?.config || template
+    : template;
+
+  const ensureTargetWorkarounds = useCallback(async (target: GameTarget): Promise<boolean> => {
+    if (target.source === "unknown") {
+      showErrorToast("Could not initialize workarounds", "The target source is unknown; re-discover the game before enabling it");
+      return false;
+    }
+    if (!installedGames.some((game) => game.appid === target.appid)) return true;
+    const appId = Number(target.appid);
+    let integration: Awaited<ReturnType<typeof installWrapperIntegration>> | null = null;
+    let newState = false;
+    let stateWriteAttempted = false;
+    let wrapperPath = getDefaultWrapperPath();
+    try {
+      const existing = await getWorkaroundState(target.appid);
+      if (!existing.success) throw new Error(existing.error || "Could not read workaround state");
+      wrapperPath = existing.wrapper_path || getDefaultWrapperPath();
+      const state = existing.state || { ...DEFAULT_WORKAROUND_STATE };
+      const commandTokenAdded = existing.command_token_added === true;
+      newState = !existing.state;
+      integration = await installWrapperIntegration(
+        appId,
+        target.nonSteam,
+        wrapperPath,
+        commandTokenAdded,
+      );
+      stateWriteAttempted = true;
+      const saved = await setWorkaroundState(
+        target.appid,
+        state,
+        integration.commandTokenAdded,
+        target.nonSteam,
+      );
+      if (!saved.success) throw new Error(saved.error || "Could not save workaround state");
+      return true;
+    } catch (error) {
+      let rollbackSucceeded = true;
+      if (integration?.changed) {
+        try {
+          await removeWrapperIntegration(
+            appId,
+            target.nonSteam,
+            wrapperPath,
+            integration.commandTokenAdded,
+          );
+        } catch (rollbackError) {
+          showErrorToast("Workaround rollback failed", asError(rollbackError).message);
+          rollbackSucceeded = false;
+        }
+      }
+      if (rollbackSucceeded && newState && stateWriteAttempted) {
+        const restored = await removeWorkaroundState(target.appid);
+        if (!restored.success) {
+          showErrorToast("Workaround rollback failed", restored.error || "Could not roll back workaround state");
+          rollbackSucceeded = false;
+        }
+      }
+      showErrorToast("Could not initialize workarounds", asError(error).message);
+      return false;
+    }
+  }, [installedGames]);
+
+  const removeTargetWorkarounds = useCallback(async (target: GameTarget): Promise<boolean> => {
+    const installed = installedGames.some((game) => game.appid === target.appid);
+    if (target.source === "unknown" && installed) return true;
+    const appId = Number(target.appid);
+    try {
+      const existing = await getWorkaroundState(target.appid);
+      if (!existing.success) throw new Error(existing.error || "Could not read workaround state");
+      const wrapperPath = existing.wrapper_path || getDefaultWrapperPath();
+      if (installed) {
+        await removeWrapperIntegration(
+          appId,
+          target.nonSteam,
+          wrapperPath,
+          existing.command_token_added === true,
+        );
+      }
+      const removed = await removeWorkaroundState(target.appid);
+      if (!removed.success) throw new Error(removed.error || "Could not remove workaround state");
+      return true;
+    } catch (error) {
+      showErrorToast("Could not clean up game workarounds", asError(error).message);
+      return false;
+    }
+  }, [installedGames]);
+
+  const acquireBulkOperation = useCallback(() => {
+    if (bulkOperationLock.current) return false;
+    bulkOperationLock.current = true;
+    setBulkOperationBusy(true);
+    return true;
+  }, []);
+
+  const releaseBulkOperation = useCallback(() => {
+    bulkOperationLock.current = false;
+    setBulkOperationBusy(false);
+  }, []);
+
+  const cleanupAllWorkarounds = useCallback(async (): Promise<boolean> => {
+    try {
+      const result = await getWorkaroundApps();
+      if (!result.success) throw new Error(result.error || "Could not read workaround state");
+      const cleaned = new Set<string>();
+      const wrapperPath = result.wrapper_path || getDefaultWrapperPath();
+
+      for (const entry of result.apps || []) {
+        await removeWrapperIntegration(
+          Number(entry.appid),
+          entry.non_steam,
+          wrapperPath,
+          entry.command_token_added,
+        );
+        const removed = await removeWorkaroundState(entry.appid);
+        if (!removed.success) throw new Error(removed.error || "Could not remove workaround state");
+        cleaned.add(entry.appid);
+      }
+
+      // Also clean configured targets whose sidecar entry was lost. This
+      // removes an old wrapper and only the plugin-managed launch pieces.
+      for (const target of targets.filter((item) => item.configured && installedGames.some((game) => game.appid === item.appid))) {
+        if (!cleaned.has(target.appid) && !(await removeTargetWorkarounds(target))) return false;
+      }
+      return true;
+    } catch (error) {
+      showErrorToast("Could not clean up game launch options", asError(error).message);
+      return false;
+    }
+  }, [installedGames, removeTargetWorkarounds, targets]);
+
+  const saveFor = useCallback(async (appid: string, next: ConfigurationData, cleanupLaunchOptions = false) => {
+    const target = targets.find((item) => item.appid === appid);
+    if (!target?.name) return false;
+    if (cleanupLaunchOptions && !(await ensureTargetWorkarounds(target))) return false;
+    const result = await updateGameConfig(appid, target.name, next);
+    if (result.success) await load();
+    return result.success;
+  }, [ensureTargetWorkarounds, load, targets]);
+
+  const save = useCallback(
+    async (next: ConfigurationData, cleanupLaunchOptions = false) => {
+      if (!selectedAppId) return false;
+      return saveFor(selectedAppId, next, cleanupLaunchOptions);
+    },
+    [saveFor, selectedAppId],
+  );
+
+  const updateGlobal = useCallback(async (next: GlobalConfig): Promise<boolean> => {
+    const result = await saveGlobalConfig(next);
+    if (!result.success) return false;
+    setGlobalConfig(result.global_config || next);
+    return true;
+  }, []);
+
+  const enable = useCallback(async (appid: string) => {
+    const target = targets.find((item) => item.appid === appid);
+    if (!target?.name) return false;
+    if (!(await ensureTargetWorkarounds(target))) return false;
+    const result = await updateGameConfig(appid, target.name, template);
+    if (result.success) await load();
+    else await removeTargetWorkarounds(target);
+    return result.success;
+  }, [ensureTargetWorkarounds, load, removeTargetWorkarounds, targets, template]);
+
+  const enableAll = useCallback(async (source: KnownGameSource): Promise<void> => {
+    if (!acquireBulkOperation()) return;
+    try {
+      const available = targets.filter((target) => target.source === source && !target.configured && target.name);
+      if (available.length === 0) return;
+      for (const target of available) {
+        if (!(await ensureTargetWorkarounds(target))) {
+          await load();
+          return;
+        }
+        const result = await updateGameConfig(target.appid, target.name, template);
+        if (!result.success) {
+          await removeTargetWorkarounds(target);
+          showErrorToast(
+            "Could not enable all games",
+            result.error || `Could not create a profile for ${target.name}`,
+          );
+          await load();
+          return;
+        }
+      }
+      await load();
+    } finally {
+      releaseBulkOperation();
+    }
+  }, [acquireBulkOperation, ensureTargetWorkarounds, load, removeTargetWorkarounds, releaseBulkOperation, targets, template]);
+
+  const repair = useCallback(async (appid: string): Promise<boolean> => {
+    const target = targets.find((item) => item.appid === appid);
+    if (!target) return false;
+    const success = await ensureTargetWorkarounds(target);
+    if (success) await load();
+    return success;
+  }, [ensureTargetWorkarounds, load, targets]);
+
+  const resetSelected = useCallback(async () => {
+    if (selectedAppId) {
+      const selectedTarget = targets.find((target) => target.appid === selectedAppId);
+      if (selectedTarget && !(await removeTargetWorkarounds(selectedTarget))) return;
+      const result = await resetGameConfig(selectedAppId);
+      if (result.success) {
+        setRunningGame((current) => current?.appid === selectedAppId ? { ...current, configured: false } : current);
+        setSelectedAppId("");
+        await load();
+      }
+    }
+  }, [load, removeTargetWorkarounds, selectedAppId, targets]);
+
+  const resetAll = useCallback(async (source: KnownGameSource) => {
+    if (!acquireBulkOperation()) return;
+    try {
+      const selectedTargets = targets.filter((item) => item.configured && item.source === source);
+      if (selectedTargets.length === 0) return;
+      for (const target of selectedTargets) {
+        if (!(await removeTargetWorkarounds(target))) {
+          await load();
+          return;
+        }
+      }
+      const result = await resetGameConfigs(selectedTargets.map((target) => target.appid));
+      if (!result.success) {
+        showErrorToast("Could not remove all profiles", result.error || "Could not remove the selected profiles");
+        await load();
+        return;
+      }
+      setRunningGame((current) => current?.source === source ? { ...current, configured: false } : current);
+      setSelectedAppId("");
+      await load();
+    } finally {
+      releaseBulkOperation();
+    }
+  }, [acquireBulkOperation, load, removeTargetWorkarounds, releaseBulkOperation, targets]);
+
+  return { config, runningConfig, globalConfig, targets, runningGame, selectedAppId, setSelectedAppId, save, saveFor, updateGlobal, enable, enableAll, repair, resetSelected, resetAll, bulkOperationBusy, cleanupAllWorkarounds, reload: load };
+}
diff --git a/src/hooks/useInstallationActions.ts b/src/hooks/useInstallationActions.ts
deleted file mode 100644
index f184145..0000000
--- a/src/hooks/useInstallationActions.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { installLsfgVk, uninstallLsfgVk } from "../api/lsfgApi";
-import { 
-  showInstallSuccessToast, 
-  showInstallErrorToast,
-  showUninstallSuccessToast, 
-  showUninstallErrorToast 
-} from "../utils/toastUtils";
-
-export function useInstallationActions() {
-  const [isInstalling, setIsInstalling] = useState<boolean>(false);
-  const [isUninstalling, setIsUninstalling] = useState<boolean>(false);
-
-  const handleInstall = async (
-    setIsInstalled: (value: boolean) => void,
-    setInstallationStatus: (value: string) => void,
-    reloadConfig?: () => Promise<void>
-  ) => {
-    setIsInstalling(true);
-    setInstallationStatus("Installing lsfg-vk...");
-
-    try {
-      const result = await installLsfgVk();
-      if (result.success) {
-        setIsInstalled(true);
-        setInstallationStatus("lsfg-vk installed");
-        showInstallSuccessToast();
-
-        // Reload lsfg config after installation
-        if (reloadConfig) {
-          await reloadConfig();
-        }
-      } else {
-        setInstallationStatus(`Installation failed: ${result.error}`);
-        showInstallErrorToast(result.error);
-      }
-    } catch (error) {
-      setInstallationStatus(`Installation failed: ${error}`);
-      showInstallErrorToast(String(error));
-    } finally {
-      setIsInstalling(false);
-    }
-  };
-
-  const handleUninstall = async (
-    setIsInstalled: (value: boolean) => void,
-    setInstallationStatus: (value: string) => void
-  ) => {
-    setIsUninstalling(true);
-    setInstallationStatus("Uninstalling lsfg-vk...");
-
-    try {
-      const result = await uninstallLsfgVk();
-      if (result.success) {
-        setIsInstalled(false);
-        setInstallationStatus("lsfg-vk uninstalled successfully!");
-        showUninstallSuccessToast();
-      } else {
-        setInstallationStatus(`Uninstallation failed: ${result.error}`);
-        showUninstallErrorToast(result.error);
-      }
-    } catch (error) {
-      setInstallationStatus(`Uninstallation failed: ${error}`);
-      showUninstallErrorToast(String(error));
-    } finally {
-      setIsUninstalling(false);
-    }
-  };
-
-  return {
-    isInstalling,
-    isUninstalling,
-    handleInstall,
-    handleUninstall
-  };
-}
diff --git a/src/hooks/useLsfgHooks.ts b/src/hooks/useLsfgHooks.ts
index d9bbe3e..0f51e90 100644
--- a/src/hooks/useLsfgHooks.ts
+++ b/src/hooks/useLsfgHooks.ts
@@ -1,125 +1,117 @@
-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useState } from "react";
 import {
   checkLsfgVkInstalled,
-  checkLosslessScalingDll,
-  getLsfgConfig,
-  updateLsfgConfigFromObject,
-  type ConfigUpdateResult
+  getLosslessScalingBranchStatus,
+  installLsfgVk,
+  uninstallLsfgVk,
+  type SteamBranchStatus,
 } from "../api/lsfgApi";
-import { ConfigurationData, getDefaults } from "../config/configSchema";
-import { showErrorToast, ToastMessages } from "../utils/toastUtils";
+import {
+  showInstallErrorToast,
+  showInstallSuccessToast,
+  showUninstallErrorToast,
+  showUninstallSuccessToast,
+} from "../utils/toastUtils";
 
-export function useInstallationStatus() {
-  const [isInstalled, setIsInstalled] = useState<boolean>(false);
-  const [installationStatus, setInstallationStatus] = useState<string>("");
+export function useInstallation(
+  reloadConfig?: () => Promise<void>,
+  beforeUninstall?: () => Promise<boolean>,
+) {
+  const [isInstalled, setIsInstalled] = useState(false);
+  const [installationStatus, setInstallationStatus] = useState("");
+  const [losslessScalingInstalled, setLosslessScalingInstalled] = useState(false);
+  const [losslessScalingStatus, setLosslessScalingStatus] = useState("");
+  const [steamBranchStatus, setSteamBranchStatus] = useState<SteamBranchStatus | null>(null);
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [isUninstalling, setIsUninstalling] = useState(false);
 
   const checkInstallation = async () => {
     try {
+      setSteamBranchStatus(await getLosslessScalingBranchStatus());
+    } catch (error) {
+      console.error("Error checking Lossless Scaling Steam branch:", error);
+      setSteamBranchStatus(null);
+    }
+
+    try {
       const status = await checkLsfgVkInstalled();
       setIsInstalled(status.installed);
-      if (status.installed) {
-        setInstallationStatus("lsfg-vk Installed");
-      } else {
-        setInstallationStatus("lsfg-vk Not Installed");
-      }
+      setLosslessScalingInstalled(status.lossless_scaling_installed);
+      setLosslessScalingStatus(status.lossless_scaling_status || "Lossless Scaling Not Installed");
+      setInstallationStatus(status.installed ? "lsfg-vk Installed" : "lsfg-vk Not Installed");
       return status.installed;
-    } catch (error) {
+    } catch {
+      setSteamBranchStatus(null);
+      setLosslessScalingInstalled(false);
+      setLosslessScalingStatus("Lossless Scaling Not Installed");
       setInstallationStatus("lsfg-vk Not Installed");
       return false;
     }
   };
 
   useEffect(() => {
-    checkInstallation();
+    void checkInstallation();
   }, []);
 
-  return {
-    isInstalled,
-    installationStatus,
-    setIsInstalled,
-    setInstallationStatus,
-    checkInstallation
-  };
-}
-
-export function useDllDetection() {
-  const [dllDetected, setDllDetected] = useState<boolean>(false);
-  const [dllDetectionStatus, setDllDetectionStatus] = useState<string>("");
-
-  const checkDllDetection = async () => {
+  const install = async () => {
+    setIsInstalling(true);
+    setInstallationStatus("Installing lsfg-vk...");
     try {
-      const result = await checkLosslessScalingDll();
-      setDllDetected(result.detected);
-      if (result.detected) {
-        setDllDetectionStatus("Lossless Scaling Installed");
-      } else {
-        setDllDetectionStatus("Lossless Scaling Not Installed");
+      const result = await installLsfgVk();
+      if (!result.success) {
+        setInstallationStatus(`Installation failed: ${result.error}`);
+        showInstallErrorToast(result.error ?? undefined);
+        return;
       }
+      setIsInstalled(true);
+      setInstallationStatus("lsfg-vk installed");
+      showInstallSuccessToast();
+      await reloadConfig?.();
+      await checkInstallation();
     } catch (error) {
-      setDllDetectionStatus("Lossless Scaling Not Installed");
+      setInstallationStatus(`Installation failed: ${error}`);
+      showInstallErrorToast(String(error));
+    } finally {
+      setIsInstalling(false);
     }
   };
 
-  useEffect(() => {
-    checkDllDetection();
-  }, []);
-
-  return {
-    dllDetected,
-    dllDetectionStatus
-  };
-}
-
-export function useLsfgConfig() {
-  const [config, setConfig] = useState<ConfigurationData>(() => getDefaults());
-
-  const loadLsfgConfig = useCallback(async () => {
+  const uninstall = async () => {
+    setIsUninstalling(true);
+    setInstallationStatus("Uninstalling lsfg-vk...");
     try {
-      const result = await getLsfgConfig();
-      if (result.success && result.config) {
-        setConfig(result.config);
-      } else {
-        console.log("lsfg config not available, using defaults:", result.error);
-        setConfig(getDefaults());
+      if (beforeUninstall && !(await beforeUninstall())) {
+        setInstallationStatus("Uninstallation cancelled: could not clean up launch options");
+        return;
       }
-    } catch (error) {
-      console.error("Error loading lsfg config:", error);
-      setConfig(getDefaults());
-    }
-  }, []);
-
-  const updateConfig = useCallback(async (newConfig: ConfigurationData): Promise<ConfigUpdateResult> => {
-    try {
-      const result = await updateLsfgConfigFromObject(newConfig);
-      if (result.success) {
-        setConfig(newConfig);
-      } else {
-        showErrorToast(
-          ToastMessages.CONFIG_UPDATE_ERROR.title, 
-          result.error || ToastMessages.CONFIG_UPDATE_ERROR.body
-        );
+      const result = await uninstallLsfgVk();
+      if (!result.success) {
+        setInstallationStatus(`Uninstallation failed: ${result.error}`);
+        showUninstallErrorToast(result.error ?? undefined);
+        return;
       }
-      return result;
+      setIsInstalled(false);
+      setInstallationStatus("lsfg-vk uninstalled successfully!");
+      await checkInstallation();
+      showUninstallSuccessToast();
     } catch (error) {
-      showErrorToast(ToastMessages.CONFIG_UPDATE_ERROR.title, String(error));
-      return { success: false, error: String(error) };
+      setInstallationStatus(`Uninstallation failed: ${error}`);
+      showUninstallErrorToast(String(error));
+    } finally {
+      setIsUninstalling(false);
     }
-  }, []);
-
-  const updateField = useCallback(async (fieldName: keyof ConfigurationData, value: boolean | number | string): Promise<ConfigUpdateResult> => {
-    const newConfig = { ...config, [fieldName]: value };
-    return updateConfig(newConfig);
-  }, [config, updateConfig]);
-
-  useEffect(() => {
-    loadLsfgConfig();
-  }, []);
+  };
 
   return {
-    config,
-    setConfig,
-    loadLsfgConfig,
-    updateConfig,
-    updateField
+    isInstalled,
+    installationStatus,
+    losslessScalingInstalled,
+    losslessScalingStatus,
+    steamBranchStatus,
+    isInstalling,
+    isUninstalling,
+    install,
+    uninstall,
+    checkInstallation,
   };
 }
diff --git a/src/hooks/usePerAppWorkarounds.ts b/src/hooks/usePerAppWorkarounds.ts
new file mode 100644
index 0000000..ab33bb2
--- /dev/null
+++ b/src/hooks/usePerAppWorkarounds.ts
@@ -0,0 +1,266 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  getWorkaroundState,
+  removeWorkaroundState,
+  setWorkaroundState,
+  type WorkaroundState,
+} from "../api/lsfgApi";
+import {
+  getDefaultWrapperPath,
+  installWrapperIntegration,
+  isWrapperIntegrationInstalled,
+  readSteamLaunchOptions,
+  removeWrapperIntegration,
+  subscribeSteamLaunchOptions,
+  type SteamLaunchOptionsSnapshot,
+} from "../utils/steamLaunchOptions";
+import { showErrorToast } from "../utils/toastUtils";
+
+export type WorkaroundField = keyof WorkaroundState;
+export type WorkaroundLoadStatus = "loading" | "ready" | "error";
+
+const SLIDER_DEBOUNCE_MS = 250;
+
+const DEFAULT_WORKAROUND_STATE: WorkaroundState = {
+  dxvkFrameRate: 0,
+  disableGamescopeWsi: true,
+  disableHdr: true,
+  disableSteamdeckMode: false,
+  disableVkbasalt: false,
+  enableZink: false,
+};
+
+interface PendingSliderUpdate {
+  timer: number;
+  value: number;
+  waiters: Array<(success: boolean) => void>;
+}
+
+export interface WorkaroundSnapshot {
+  steam: SteamLaunchOptionsSnapshot;
+  state: WorkaroundState;
+  wrapperPath: string;
+  wrapperOwned: boolean;
+  integrationInstalled: boolean;
+  commandTokenAdded: boolean;
+}
+
+interface PerAppWorkarounds {
+  status: WorkaroundLoadStatus;
+  snapshot: WorkaroundSnapshot | null;
+  refresh: () => Promise<void>;
+  update: (field: WorkaroundField, value: boolean | number) => Promise<boolean>;
+  error: string | null;
+}
+
+function asError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error));
+}
+
+function makeSnapshot(
+  steam: SteamLaunchOptionsSnapshot,
+  result: Awaited<ReturnType<typeof getWorkaroundState>>,
+  nonSteam: boolean,
+): WorkaroundSnapshot {
+  if (!result.state) throw new Error("Workaround state is not initialized for this profile");
+  const wrapperPath = result.wrapper_path || getDefaultWrapperPath();
+  return {
+    steam,
+    state: result.state,
+    wrapperPath,
+    wrapperOwned: result.wrapper_owned === true,
+    integrationInstalled: isWrapperIntegrationInstalled(steam, nonSteam, wrapperPath),
+    commandTokenAdded: result.command_token_added === true,
+  };
+}
+
+async function adoptWorkaroundState(
+  appId: string,
+  nonSteam: boolean,
+  wrapperPath: string,
+): Promise<WorkaroundSnapshot> {
+  let integration: Awaited<ReturnType<typeof installWrapperIntegration>> | null = null;
+  try {
+    integration = await installWrapperIntegration(Number(appId), nonSteam, wrapperPath, false);
+    const finalized = await setWorkaroundState(
+      appId,
+      DEFAULT_WORKAROUND_STATE,
+      integration.commandTokenAdded,
+      nonSteam,
+    );
+    if (!finalized.success) throw new Error(finalized.error || "Could not finalize workaround state");
+    return makeSnapshot(integration.snapshot, finalized, nonSteam);
+  } catch (error) {
+    let rollbackSucceeded = true;
+    if (integration?.changed) {
+      try {
+        await removeWrapperIntegration(
+          Number(appId),
+          nonSteam,
+          wrapperPath,
+          integration.commandTokenAdded,
+        );
+      } catch {
+        rollbackSucceeded = false;
+      }
+    }
+    if (rollbackSucceeded) {
+      const removed = await removeWorkaroundState(appId);
+      if (!removed.success) throw new Error(removed.error || "Could not roll back workaround state");
+    }
+    throw error;
+  }
+}
+
+export function usePerAppWorkarounds(appId: string, nonSteam: boolean): PerAppWorkarounds {
+  const [status, setStatus] = useState<WorkaroundLoadStatus>("loading");
+  const [snapshot, setSnapshot] = useState<WorkaroundSnapshot | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const pendingSliderUpdate = useRef<PendingSliderUpdate | null>(null);
+  const numericAppId = Number(appId);
+
+  const loadSnapshot = useCallback(async () => {
+    const [result, steam] = await Promise.all([
+      getWorkaroundState(appId),
+      readSteamLaunchOptions(numericAppId, nonSteam),
+    ]);
+    if (!result.success) throw new Error(result.error || "Could not read workaround state");
+    if (!result.state) {
+      return adoptWorkaroundState(
+        appId,
+        nonSteam,
+        result.wrapper_path || getDefaultWrapperPath(),
+      );
+    }
+    return makeSnapshot(steam, result, nonSteam);
+  }, [appId, nonSteam, numericAppId]);
+
+  const applySnapshot = useCallback((next: WorkaroundSnapshot) => {
+    setSnapshot(next);
+    setStatus("ready");
+    setError(null);
+  }, []);
+
+  const refresh = useCallback(async () => {
+    setStatus("loading");
+    setError(null);
+    try {
+      applySnapshot(await loadSnapshot());
+    } catch (refreshError) {
+      const nextError = asError(refreshError);
+      setStatus("error");
+      setError(nextError.message);
+    }
+  }, [applySnapshot, loadSnapshot]);
+
+  useEffect(() => {
+    let active = true;
+    setStatus("loading");
+    setSnapshot(null);
+    setError(null);
+    let unsubscribe = () => {};
+    try {
+      unsubscribe = subscribeSteamLaunchOptions(
+        numericAppId,
+        nonSteam,
+        (steam) => {
+          if (!active) return;
+          setSnapshot((current) => current ? {
+            ...current,
+            steam,
+            integrationInstalled: isWrapperIntegrationInstalled(steam, nonSteam, current.wrapperPath),
+          } : current);
+        },
+        (subscriptionError) => {
+          if (!active) return;
+          setStatus("error");
+          setError(subscriptionError.message);
+        },
+      );
+    } catch (subscriptionError) {
+      if (active) {
+        setStatus("error");
+        setError(asError(subscriptionError).message);
+      }
+    }
+    void loadSnapshot()
+      .then((next) => { if (active) applySnapshot(next); })
+      .catch((readError) => {
+        if (active) {
+          setStatus("error");
+          setError(asError(readError).message);
+        }
+      });
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, [applySnapshot, loadSnapshot, nonSteam, numericAppId]);
+
+  const persistUpdate = useCallback(async (field: WorkaroundField, value: boolean | number): Promise<boolean> => {
+    const current = snapshot;
+    if (!current) return false;
+    setError(null);
+    const nextState = { ...current.state, [field]: value } as WorkaroundState;
+    try {
+      const result = await setWorkaroundState(
+        appId,
+        nextState,
+        current.commandTokenAdded,
+        nonSteam,
+      );
+      if (!result.success || !result.state) throw new Error(result.error || "Could not save workaround state");
+      applySnapshot({
+        ...current,
+        state: result.state,
+        wrapperPath: result.wrapper_path || current.wrapperPath,
+        wrapperOwned: result.wrapper_owned === true,
+        commandTokenAdded: result.command_token_added === true,
+      });
+      return true;
+    } catch (updateError) {
+      const nextError = asError(updateError);
+      setStatus("error");
+      setError(nextError.message);
+      showErrorToast("Workaround update failed", nextError.message);
+      return false;
+    }
+  }, [appId, applySnapshot, snapshot]);
+
+  const flushSliderUpdate = useCallback(async (): Promise<boolean> => {
+    const pending = pendingSliderUpdate.current;
+    if (!pending) return true;
+    pendingSliderUpdate.current = null;
+    clearTimeout(pending.timer);
+    const success = await persistUpdate("dxvkFrameRate", pending.value);
+    pending.waiters.forEach((resolve) => resolve(success));
+    return success;
+  }, [persistUpdate]);
+
+  const update = useCallback(async (field: WorkaroundField, value: boolean | number): Promise<boolean> => {
+    if (field === "dxvkFrameRate") {
+      setError(null);
+      return new Promise<boolean>((resolve) => {
+        const pending = pendingSliderUpdate.current || { timer: 0, value: 0, waiters: [] };
+        window.clearTimeout(pending.timer);
+        pending.value = Number(value);
+        pending.waiters.push(resolve);
+        pending.timer = window.setTimeout(() => { void flushSliderUpdate(); }, SLIDER_DEBOUNCE_MS);
+        pendingSliderUpdate.current = pending;
+      });
+    }
+    const sliderSuccess = await flushSliderUpdate();
+    if (!sliderSuccess) return false;
+    return persistUpdate(field, value);
+  }, [flushSliderUpdate, persistUpdate]);
+
+  useEffect(() => () => {
+    const pending = pendingSliderUpdate.current;
+    if (!pending) return;
+    window.clearTimeout(pending.timer);
+    pendingSliderUpdate.current = null;
+    pending.waiters.forEach((resolve) => resolve(false));
+  }, [numericAppId, nonSteam]);
+
+  return useMemo(() => ({ status, snapshot, refresh, update, error }), [error, refresh, snapshot, status, update]);
+}
diff --git a/src/hooks/useProfileManagement.ts b/src/hooks/useProfileManagement.ts
deleted file mode 100644
index a5f2a07..0000000
--- a/src/hooks/useProfileManagement.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import {
-  getProfiles,
-  createProfile,
-  deleteProfile,
-  renameProfile,
-  setCurrentProfile,
-  updateProfileConfig,
-  type ProfilesResult,
-  type ProfileResult,
-  type ConfigUpdateResult
-} from "../api/lsfgApi";
-import { ConfigurationData } from "../config/configSchema";
-import { showSuccessToast, showErrorToast } from "../utils/toastUtils";
-
-export function useProfileManagement() {
-  const [profiles, setProfiles] = useState<string[]>([]);
-  const [currentProfile, setCurrentProfileState] = useState<string>("decky-lsfg-vk");
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Load profiles on hook initialization
-  const loadProfiles = useCallback(async () => {
-    try {
-      const result: ProfilesResult = await getProfiles();
-      if (result.success && result.profiles) {
-        setProfiles(result.profiles);
-        if (result.current_profile) {
-          setCurrentProfileState(result.current_profile);
-        }
-        return result;
-      } else {
-        console.error("Failed to load profiles:", result.error);
-        showErrorToast("Failed to load profiles", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error loading profiles:", error);
-      showErrorToast("Error loading profiles", String(error));
-      return { success: false, error: String(error) };
-    }
-  }, []);
-
-  // Create a new profile
-  const handleCreateProfile = useCallback(async (profileName: string, sourceProfile?: string) => {
-    setIsLoading(true);
-    try {
-      const result: ProfileResult = await createProfile(profileName, sourceProfile || currentProfile);
-      if (result.success) {
-        // Use the normalized name returned from backend (spaces converted to dashes)
-        const actualProfileName = result.profile_name || profileName;
-        showSuccessToast("Profile created", `Created profile: ${actualProfileName}`);
-        await loadProfiles();
-        return result;
-      } else {
-        console.error("Failed to create profile:", result.error);
-        showErrorToast("Failed to create profile", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error creating profile:", error);
-      showErrorToast("Error creating profile", String(error));
-      return { success: false, error: String(error) };
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentProfile, loadProfiles]);
-
-  // Delete a profile
-  const handleDeleteProfile = useCallback(async (profileName: string) => {
-    if (profileName === "decky-lsfg-vk") {
-      showErrorToast("Cannot delete default profile", "The default profile cannot be deleted");
-      return { success: false, error: "Cannot delete default profile" };
-    }
-
-    setIsLoading(true);
-    try {
-      const result: ProfileResult = await deleteProfile(profileName);
-      if (result.success) {
-        showSuccessToast("Profile deleted", `Deleted profile: ${profileName}`);
-        await loadProfiles();
-        // If we deleted the current profile, it should have switched to default
-        if (currentProfile === profileName) {
-          setCurrentProfileState("decky-lsfg-vk");
-        }
-        return result;
-      } else {
-        console.error("Failed to delete profile:", result.error);
-        showErrorToast("Failed to delete profile", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error deleting profile:", error);
-      showErrorToast("Error deleting profile", String(error));
-      return { success: false, error: String(error) };
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentProfile, loadProfiles]);
-
-  // Rename a profile
-  const handleRenameProfile = useCallback(async (oldName: string, newName: string) => {
-    if (oldName === "decky-lsfg-vk") {
-      showErrorToast("Cannot rename default profile", "The default profile cannot be renamed");
-      return { success: false, error: "Cannot rename default profile" };
-    }
-
-    setIsLoading(true);
-    try {
-      const result: ProfileResult = await renameProfile(oldName, newName);
-      if (result.success) {
-        // Use the normalized name returned from backend (spaces converted to dashes)
-        const actualNewName = result.profile_name || newName;
-        showSuccessToast("Profile renamed", `Renamed profile to: ${actualNewName}`);
-        await loadProfiles();
-        // Update current profile if it was renamed
-        if (currentProfile === oldName) {
-          setCurrentProfileState(actualNewName);
-        }
-        return result;
-      } else {
-        console.error("Failed to rename profile:", result.error);
-        showErrorToast("Failed to rename profile", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error renaming profile:", error);
-      showErrorToast("Error renaming profile", String(error));
-      return { success: false, error: String(error) };
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentProfile, loadProfiles]);
-
-  // Set the current active profile
-  const handleSetCurrentProfile = useCallback(async (profileName: string) => {
-    setIsLoading(true);
-    try {
-      const result: ProfileResult = await setCurrentProfile(profileName);
-      if (result.success) {
-        setCurrentProfileState(profileName);
-        showSuccessToast("Profile switched", `Switched to profile: ${profileName}`);
-        return result;
-      } else {
-        console.error("Failed to switch profile:", result.error);
-        showErrorToast("Failed to switch profile", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error switching profile:", error);
-      showErrorToast("Error switching profile", String(error));
-      return { success: false, error: String(error) };
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // Update configuration for a specific profile
-  const handleUpdateProfileConfig = useCallback(async (profileName: string, config: ConfigurationData) => {
-    setIsLoading(true);
-    try {
-      const result: ConfigUpdateResult = await updateProfileConfig(profileName, config);
-      if (result.success) {
-        return result;
-      } else {
-        console.error("Failed to update profile config:", result.error);
-        showErrorToast("Failed to update profile config", result.error || "Unknown error");
-        return result;
-      }
-    } catch (error) {
-      console.error("Error updating profile config:", error);
-      showErrorToast("Error updating profile config", String(error));
-      return { success: false, error: String(error) };
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentProfile]);
-
-  // Initialize profiles on mount
-  useEffect(() => {
-    loadProfiles();
-  }, [loadProfiles]);
-
-  return {
-    profiles,
-    currentProfile,
-    isLoading,
-    loadProfiles,
-    createProfile: handleCreateProfile,
-    deleteProfile: handleDeleteProfile,
-    renameProfile: handleRenameProfile,
-    setCurrentProfile: handleSetCurrentProfile,
-    updateProfileConfig: handleUpdateProfileConfig
-  };
-}