feat: make ui suck less, frfr

16 files changed, 269 insertions, 432 deletions

diff --git a/src/api/lsfgApi.ts b/src/api/lsfgApi.ts
index 04d1309..8eaad98 100644
--- a/src/api/lsfgApi.ts
+++ b/src/api/lsfgApi.ts
@@ -32,12 +32,6 @@ export interface SteamBranchStatus {
 // Use centralized configuration data type
 export type LsfgConfig = ConfigurationData;
 
-export interface ConfigResult {
-  success: boolean;
-  config?: LsfgConfig;
-  error?: string;
-}
-
 export interface ConfigUpdateResult {
   success: boolean;
   message?: string;
@@ -51,10 +45,11 @@ export interface GameConfigEntry {
 }
 export interface InstalledGame { appid: string; name: string; nonSteam: boolean; }
 export interface InstalledGamesResult { success: boolean; games?: InstalledGame[]; error?: string; }
+export interface GlobalConfig { dll: string; no_fp16: boolean; }
 
 export interface GameConfigsResult {
   success: boolean;
-  default?: LsfgConfig;
+  global_config?: GlobalConfig;
   games?: GameConfigEntry[];
   error?: string;
 }
@@ -65,12 +60,6 @@ export interface GameConfigResult extends ConfigUpdateResult {
   config?: LsfgConfig;
 }
 
-export interface ConfigSchemaResult {
-  field_names: string[];
-  field_types: Record<string, string>;
-  defaults: ConfigurationData;
-}
-
 export interface FileContentResult {
   success: boolean;
   content?: string;
@@ -78,13 +67,6 @@ export interface FileContentResult {
   error?: string;
 }
 
-export interface FgmodCheckResult {
-  success: boolean;
-  exists: boolean;
-  path?: string;
-  error?: string;
-}
-
 // Flatpak management interfaces
 export interface FlatpakExtensionStatus {
   success: boolean;
@@ -123,10 +105,7 @@ export const installLsfgVk = callable<[], InstallationResult>("install_lsfg_vk")
 export const uninstallLsfgVk = callable<[], InstallationResult>("uninstall_lsfg_vk");
 export const checkLsfgVkInstalled = callable<[], InstallationStatus>("check_lsfg_vk_installed");
 export const getLosslessScalingBranchStatus = callable<[], SteamBranchStatus>("get_lossless_scaling_branch_status");
-export const getLsfgConfig = callable<[], ConfigResult>("get_lsfg_config");
-export const getConfigSchema = callable<[], ConfigSchemaResult>("get_config_schema");
 export const getConfigFileContent = callable<[], FileContentResult>("get_config_file_content");
-export const checkFgmodDirectory = callable<[], FgmodCheckResult>("check_fgmod_directory");
 
 // Flatpak management API functions
 export const checkFlatpakExtensionStatus = callable<[], FlatpakExtensionStatus>("check_flatpak_extension_status");
@@ -136,19 +115,8 @@ export const getFlatpakApps = callable<[], FlatpakAppInfo>("get_flatpak_apps");
 export const setFlatpakAppOverride = callable<[string], FlatpakOperationResult>("set_flatpak_app_override");
 export const removeFlatpakAppOverride = callable<[string], FlatpakOperationResult>("remove_flatpak_app_override");
 
-// Updated config function using object-based configuration (single source of truth)
-export const updateLsfgConfig = callable<
-  [ConfigurationData],
-  ConfigUpdateResult
->("update_lsfg_config");
 export const getGameConfigs = callable<[], GameConfigsResult>("get_game_configs");
 export const getInstalledGames = callable<[], InstalledGamesResult>("get_installed_games");
-export const getGameConfig = callable<[string], GameConfigResult>("get_game_config");
 export const updateGameConfig = callable<[string, string, LsfgConfig], GameConfigResult>("update_game_config");
 export const resetGameConfig = callable<[string], GameConfigResult>("reset_game_config");
 export const resetAllGameConfigs = callable<[], GameConfigsResult>("reset_all_game_configs");
-
-// Legacy helper function for backward compatibility
-export const updateLsfgConfigFromObject = async (config: ConfigurationData): Promise<ConfigUpdateResult> => {
-  return updateLsfgConfig(config);
-};
diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index c2bba7e..1f17264 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -10,19 +10,19 @@ interface ConfigurationSectionProps {
 export function ConfigurationSection({ config, onConfigChange }: ConfigurationSectionProps) {
   return <>
     <PanelSectionRow>
-      <SliderField label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`} description="Motion estimation resolution scale" value={config.flow_scale} min={0.25} max={1} step={0.01} onChange={(value) => onConfigChange(FLOW_SCALE, value)} />
+      <SliderField label={`Flow Scale (${Math.round(config.flow_scale * 100)}%)`} value={config.flow_scale} min={0.25} max={1} step={0.01} onChange={(value) => onConfigChange(FLOW_SCALE, value)} />
     </PanelSectionRow>
     <PanelSectionRow>
-      <ToggleField label="FP16 Acceleration" description="Use FP16 shaders when supported" checked={!config.no_fp16} onChange={(value) => onConfigChange(NO_FP16, !value)} />
+      <ToggleField label="FP16 Acceleration" checked={!config.no_fp16} onChange={(value) => onConfigChange(NO_FP16, !value)} />
     </PanelSectionRow>
     <PanelSectionRow>
-      <ToggleField label="Performance Mode" description="Use the lighter frame generation model" checked={config.performance_mode} onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)} />
+      <ToggleField label="Performance Mode" checked={config.performance_mode} onChange={(value) => onConfigChange(PERFORMANCE_MODE, value)} />
     </PanelSectionRow>
     <PanelSectionRow>
-      <ToggleField label="Present Mode Override" description="Force FIFO/VSync pacing" checked={config.override_present_mode} onChange={(value) => onConfigChange(OVERRIDE_PRESENT_MODE, value)} />
+      <ToggleField label="Present Mode Override" checked={config.override_present_mode} onChange={(value) => onConfigChange(OVERRIDE_PRESENT_MODE, value)} />
     </PanelSectionRow>
     <PanelSectionRow>
-      <ToggleField label="Preserve Swapchain Image Count" description="Do not change the application's swapchain image count" checked={config.preserve_swapchain_image_count} onChange={(value) => onConfigChange(PRESERVE_SWAPCHAIN_IMAGE_COUNT, value)} />
+      <ToggleField label="Preserve Swapchain Image Count" checked={config.preserve_swapchain_image_count} onChange={(value) => onConfigChange(PRESERVE_SWAPCHAIN_IMAGE_COUNT, value)} />
     </PanelSectionRow>
   </>;
 }
diff --git a/src/components/ConfigurationTab.tsx b/src/components/ConfigurationTab.tsx
index 6f3f474..dab6f19 100644
--- a/src/components/ConfigurationTab.tsx
+++ b/src/components/ConfigurationTab.tsx
@@ -1,19 +1,17 @@
-import { PanelSection } from "@decky/ui";
+import { ButtonItem, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import { useEffect, useRef, useState } from "react";
 import { ConfigurationData } from "../config/configSchema";
 import { GameTarget } from "../hooks/useGameConfiguration";
-import { ConfigurationSection } from "./ConfigurationSection";
-import { FgmodClipboardButton } from "./FgmodClipboardButton";
-import { FpsMultiplierControl } from "./FpsMultiplierControl";
+import { GameConfigurationControls } from "./GameConfigurationControls";
 import { GameConfigurationSelector } from "./GameConfigurationSelector";
-import t from "../i18n/i18n";
 
 interface ConfigurationTabProps {
   config: ConfigurationData;
   targets: GameTarget[];
   runningGame: GameTarget | null;
-  selectedAppId: string;
   onSelect: (appid: string) => void;
   onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
+  onEnable: (appid: string) => Promise<boolean>;
   onReset: () => Promise<void>;
   onResetAll: () => Promise<void>;
 }
@@ -22,33 +20,77 @@ export function ConfigurationTab({
   config,
   targets,
   runningGame,
-  selectedAppId,
   onSelect,
   onConfigChange,
+  onEnable,
   onReset,
   onResetAll,
 }: ConfigurationTabProps) {
-  return (
-    <>
-      <PanelSection title={t("CONTENT_FPS_MULTIPLIER", "FPS Multiplier")}>
-        <FpsMultiplierControl config={config} onConfigChange={onConfigChange} />
-      </PanelSection>
-      <PanelSection title="Game Profile">
+  const [detailAppId, setDetailAppId] = useState<string | null>(null);
+  const promptedRunningAppId = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!runningGame || runningGame.configured) {
+      promptedRunningAppId.current = null;
+      return;
+    }
+    if (promptedRunningAppId.current !== runningGame.appid && detailAppId === null) {
+      promptedRunningAppId.current = runningGame.appid;
+      setDetailAppId(runningGame.appid);
+    }
+  }, [detailAppId, runningGame?.appid, runningGame?.configured]);
+
+  const selectedTarget = detailAppId ? targets.find((target) => target.appid === detailAppId) : null;
+
+  if (detailAppId === null) {
+    return (
+      <PanelSection title="Games">
         <GameConfigurationSelector
           targets={targets}
           runningGame={runningGame}
-          selectedAppId={selectedAppId}
-          onSelect={onSelect}
-          onReset={onReset}
+          onSelect={(appid) => {
+            onSelect(appid);
+            setDetailAppId(appid);
+          }}
           onResetAll={onResetAll}
         />
       </PanelSection>
-      <PanelSection title="Options">
-        <ConfigurationSection config={config} onConfigChange={onConfigChange} />
-      </PanelSection>
-      <PanelSection>
-        <FgmodClipboardButton />
+    );
+  }
+
+  const profileLabel = selectedTarget?.name || "Game profile";
+  const running = selectedTarget?.appid === runningGame?.appid;
+  const profileDescription = selectedTarget
+    ? `${selectedTarget.nonSteam ? "Non-Steam" : "Steam"} · App ID ${selectedTarget.appid} · ${selectedTarget.configured ? running && !runningGame?.configured ? "Profile saved · applies next launch" : "Profile active" : "Not configured · changes apply next launch"}`
+    : "Game is no longer available";
+
+  return (
+    <Focusable onCancelButton={() => setDetailAppId(null)}>
+      <PanelSection title="Game Profile">
+        <PanelSectionRow>
+          <Field label={profileLabel} description={profileDescription} />
+        </PanelSectionRow>
+        <PanelSectionRow>
+          <ButtonItem layout="below" onClick={() => setDetailAppId(null)}>Back to games</ButtonItem>
+        </PanelSectionRow>
       </PanelSection>
-    </>
+      <GameConfigurationControls config={config} onConfigChange={onConfigChange} />
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          onClick={async () => {
+            if (selectedTarget?.configured) {
+              promptedRunningAppId.current = detailAppId;
+              await onReset();
+              setDetailAppId(null);
+            } else if (detailAppId) {
+              await onEnable(detailAppId);
+            }
+          }}
+        >
+          {selectedTarget?.configured ? "Remove profile" : "Enable for next launch"}
+        </ButtonItem>
+      </PanelSectionRow>
+    </Focusable>
   );
 }
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index de8f996..9281d39 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -1,6 +1,6 @@
 import { Tabs } from "@decky/ui";
-import { useEffect, useState } from "react";
-import { FaFileAlt, FaGamepad, FaLayerGroup, FaTools } from "react-icons/fa";
+import { useEffect, useRef, useState } from "react";
+import { FaFileAlt, FaGamepad, FaLayerGroup, FaList, FaTools } from "react-icons/fa";
 import { ConfigurationData } from "../config/configSchema";
 import { tabStyles } from "../styles";
 import { useGameConfiguration } from "../hooks/useGameConfiguration";
@@ -9,10 +9,12 @@ import { useInstallationStatus } from "../hooks/useLsfgHooks";
 import { ConfigFileTab } from "./ConfigFileTab";
 import { ConfigurationTab } from "./ConfigurationTab";
 import { FlatpaksTab } from "./FlatpaksTab";
+import { NowPlayingTab } from "./NowPlayingTab";
 import { SetupTab } from "./SetupTab";
 
 const tabIcons = {
-  configuration: <FaGamepad size={18} />,
+  nowPlaying: <FaGamepad size={18} />,
+  configuration: <FaList size={18} />,
   flatpak: <FaLayerGroup size={18} />,
   configFile: <FaFileAlt size={18} />,
   setup: <FaTools size={18} />,
@@ -33,9 +35,9 @@ export function Content() {
     config,
     targets,
     runningGame,
-    selectedAppId,
     setSelectedAppId,
     save,
+    enable,
     resetSelected,
     resetAll,
     reload,
@@ -48,10 +50,27 @@ export function Content() {
     steamBranchStatus?.success === true &&
     steamBranchStatus.installed &&
     !steamBranchStatus.needs_switch;
+  const previousRunningState = useRef<{ appid: string; configured: boolean } | null>(null);
 
   useEffect(() => {
-    setTab(setupComplete ? "Configuration" : "Setup");
-  }, [setupComplete]);
+    if (!setupComplete) {
+      setTab("Setup");
+      return;
+    }
+    setTab((current) => current === "Setup" ? (runningGame?.configured ? "NowPlaying" : "Configuration") : current);
+  }, [runningGame?.configured, setupComplete]);
+
+  useEffect(() => {
+    if (!setupComplete) return;
+    const current = runningGame ? { appid: runningGame.appid, configured: runningGame.configured } : null;
+    const previous = previousRunningState.current;
+    previousRunningState.current = current;
+    if (current?.appid && (current.appid !== previous?.appid || current.configured !== previous?.configured)) {
+      setTab(current.configured ? "NowPlaying" : "Configuration");
+    } else if (!current && previous) {
+      setTab((currentTab) => currentTab === "NowPlaying" ? "Configuration" : currentTab);
+    }
+  }, [runningGame?.appid, runningGame?.configured, setupComplete]);
 
   useEffect(() => {
     if (isInstalled) void reload();
@@ -88,6 +107,18 @@ export function Content() {
 
   const tabs = setupComplete
     ? [
+        ...(runningGame?.configured ? [{
+          id: "NowPlaying",
+          title: tabIcons.nowPlaying,
+          content: (
+            <NowPlayingTab
+              game={runningGame}
+              config={config}
+              onConfigChange={handleConfigChange}
+              onRemove={resetSelected}
+            />
+          ),
+        }] : []),
         {
           id: "Configuration",
           title: tabIcons.configuration,
@@ -96,9 +127,9 @@ export function Content() {
               config={config}
               targets={targets}
               runningGame={runningGame}
-              selectedAppId={selectedAppId}
               onSelect={setSelectedAppId}
               onConfigChange={handleConfigChange}
+              onEnable={enable}
               onReset={resetSelected}
               onResetAll={resetAll}
             />
diff --git a/src/components/FgmodClipboardButton.tsx b/src/components/FgmodClipboardButton.tsx
deleted file mode 100644
index efc5490..0000000
--- a/src/components/FgmodClipboardButton.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState, useEffect } from "react";
-import { PanelSectionRow, ButtonItem } from "@decky/ui";
-import { FaClipboard, FaCheck } from "react-icons/fa";
-import { checkFgmodDirectory } from "../api/lsfgApi";
-import { showClipboardErrorToast } from "../utils/toastUtils";
-import { copyWithVerification } from "../utils/clipboardUtils";
-import t from '../i18n/i18n';
-
-export function FgmodClipboardButton() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [showSuccess, setShowSuccess] = useState(false);
-  const [fgmodExists, setFgmodExists] = useState(false);
-  const [checkingFgmod, setCheckingFgmod] = useState(true);
-
-  // Check for fgmod directory on component mount
-  useEffect(() => {
-    const checkFgmod = async () => {
-      try {
-        const result = await checkFgmodDirectory();
-        setFgmodExists(result.exists);
-      } catch (error) {
-        console.error("Error checking fgmod directory:", error);
-        setFgmodExists(false);
-      } finally {
-        setCheckingFgmod(false);
-      }
-    };
-
-    checkFgmod();
-  }, []);
-
-  // Reset success state after 3 seconds
-  useEffect(() => {
-    if (showSuccess) {
-      const timer = setTimeout(() => {
-        setShowSuccess(false);
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [showSuccess]);
-
-  const copyToClipboard = async () => {
-    if (isLoading || showSuccess) return;
-    
-    setIsLoading(true);
-    try {
-      const text = "~/fgmod/fgmod ~/lsfg %command%";
-      const { success, verified } = await copyWithVerification(text);
-      
-      if (success) {
-        // Show success feedback in the button instead of toast
-        setShowSuccess(true);
-        if (!verified) {
-          // Copy worked but verification failed - still show success
-          console.log('Copy verification failed but copy likely worked');
-        }
-      } else {
-        showClipboardErrorToast();
-      }
-    } catch (error) {
-      showClipboardErrorToast();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Don't render if fgmod directory doesn't exist or we're still checking
-  if (checkingFgmod || !fgmodExists) {
-    return null;
-  }
-
-  return (
-    <PanelSectionRow>
-      <ButtonItem
-        layout="below"
-        onClick={copyToClipboard}
-        disabled={isLoading || showSuccess}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          {showSuccess ? (
-            <FaCheck style={{ 
-              color: "#4CAF50" // Green color for success
-            }} />
-          ) : isLoading ? (
-            <FaClipboard style={{ 
-              animation: "pulse 1s ease-in-out infinite",
-              opacity: 0.7 
-            }} />
-          ) : (
-            <FaClipboard />
-          )}
-          <div style={{ 
-            color: showSuccess ? "#4CAF50" : "inherit",
-            fontWeight: showSuccess ? "bold" : "normal"
-          }}>
-            {showSuccess ? t('CLIPBOARD_COPIED', 'Copied to clipboard') : isLoading ? t('CLIPBOARD_COPYING', 'Copying...') : t('CLIPBOARD_LSFG_FGMOD', 'LSFG + DeckyFG')}
-          </div>
-        </div>
-      </ButtonItem>
-      <style>{`
-        @keyframes pulse {
-          0% { opacity: 0.7; }
-          50% { opacity: 1; }
-          100% { opacity: 0.7; }
-        }
-      `}</style>
-    </PanelSectionRow>
-  );
-}
diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx
index 5069c9a..e197dc3 100644
--- a/src/components/FpsMultiplierControl.tsx
+++ b/src/components/FpsMultiplierControl.tsx
@@ -1,4 +1,4 @@
-import { PanelSectionRow, DialogButton, Focusable } from "@decky/ui";
+import { PanelSectionRow, SliderField } from "@decky/ui";
 import { ConfigurationData } from "../config/configSchema";
 import { MULTIPLIER } from "../config/generatedConfigSchema";
 import t from "../i18n/i18n";
@@ -12,62 +12,22 @@ export function FpsMultiplierControl({
   config,
   onConfigChange
 }: FpsMultiplierControlProps) {
+  const multiplierLabel = config.multiplier === 1
+    ? t("MULTIPLIER_OFF", "Off")
+    : `${config.multiplier}x`;
+
   return (
     <PanelSectionRow>
-      <Focusable
-        style={{
-          marginTop: "6px",
-          marginBottom: "6px",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }}
-        flow-children="horizontal"
-      >
-        <DialogButton
-          style={{
-            marginLeft: "0px",
-            height: "30px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "5px 0px 0px 0px",
-            minWidth: "40px",
-          }}
-          onClick={() => onConfigChange(MULTIPLIER, Math.max(1, config.multiplier - 1))}
-          disabled={config.multiplier <= 1}
-        >
-          −
-        </DialogButton>
-        <div
-          style={{
-            marginLeft: "20px",
-            marginRight: "20px",
-            fontSize: "16px",
-            fontWeight: "bold",
-            color: config.multiplier > 4 ? "red" : "white",
-            minWidth: "60px",
-            textAlign: "center"
-          }}
-        >
-          {config.multiplier === 1 ? t('MULTIPLIER_OFF', 'OFF') : `${config.multiplier}X`}
-        </div>
-        <DialogButton
-          style={{
-            marginLeft: "0px",
-            height: "30px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "5px 0px 0px 0px",
-            minWidth: "40px",
-          }}
-          onClick={() => onConfigChange(MULTIPLIER, Math.min(4, config.multiplier + 1))}
-          disabled={config.multiplier >= 4}
-        >
-          +
-        </DialogButton>
-      </Focusable>
+      <SliderField
+        label={`FPS multiplier · ${multiplierLabel}`}
+        value={config.multiplier}
+        min={1}
+        max={4}
+        step={1}
+        notchCount={4}
+        showValue={false}
+        onChange={(value) => void onConfigChange(MULTIPLIER, value)}
+      />
     </PanelSectionRow>
   );
 }
diff --git a/src/components/GameConfigurationControls.tsx b/src/components/GameConfigurationControls.tsx
new file mode 100644
index 0000000..bdf9985
--- /dev/null
+++ b/src/components/GameConfigurationControls.tsx
@@ -0,0 +1,17 @@
+import { ConfigurationData } from "../config/configSchema";
+import { ConfigurationSection } from "./ConfigurationSection";
+import { FpsMultiplierControl } from "./FpsMultiplierControl";
+
+interface Props {
+  config: ConfigurationData;
+  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
+}
+
+export function GameConfigurationControls({ config, onConfigChange }: Props) {
+  return (
+    <>
+      <FpsMultiplierControl config={config} onConfigChange={onConfigChange} />
+      <ConfigurationSection config={config} onConfigChange={onConfigChange} />
+    </>
+  );
+}
diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index a231477..fcdd0aa 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -1,29 +1,58 @@
-import { Dropdown, DropdownOption, PanelSectionRow, ButtonItem } from "@decky/ui";
+import { ButtonItem, Field, PanelSectionRow } from "@decky/ui";
 import { GameTarget } from "../hooks/useGameConfiguration";
 
 interface Props {
   targets: GameTarget[];
   runningGame: GameTarget | null;
-  selectedAppId: string;
   onSelect: (appid: string) => void;
-  onReset: () => Promise<void>;
   onResetAll: () => Promise<void>;
 }
 
-export function GameConfigurationSelector({ targets, runningGame, selectedAppId, onSelect, onReset, onResetAll }: Props) {
-  const options: DropdownOption[] = [
-    { data: "", label: runningGame ? `Default (editing template) · ${runningGame.name}` : "Default" },
-    ...targets.map((target) => ({ data: target.appid, label: `${target.nonSteam ? "Non-Steam · " : ""}${target.name} · ${target.appid}` })),
-  ];
-  return <>
-    <PanelSectionRow>
-      <Dropdown rgOptions={options} selectedOption={selectedAppId} onChange={(option) => onSelect(String(option.data))} />
-    </PanelSectionRow>
-    <PanelSectionRow>
-      <ButtonItem layout="below" onClick={() => void onReset()} disabled={!selectedAppId}>Reset selected game</ButtonItem>
-    </PanelSectionRow>
-    <PanelSectionRow>
-      <ButtonItem layout="below" onClick={() => void onResetAll()} disabled={!targets.some((target) => target.configured)}>Reset all game profiles</ButtonItem>
-    </PanelSectionRow>
-  </>;
+const profileDescription = (target: GameTarget, running: boolean, active: boolean) => [
+  running ? "Now playing" : "",
+  target.nonSteam ? "Non-Steam" : "Steam",
+  target.configured
+    ? active ? "Profile active" : "Profile saved · applies next launch"
+    : "Not configured · changes apply next launch",
+].filter(Boolean).join(" · ");
+
+export function GameConfigurationSelector({ targets, runningGame, onSelect, onResetAll }: Props) {
+  const games = [...targets].sort((a, b) => {
+    if (a.appid === runningGame?.appid) return -1;
+    if (b.appid === runningGame?.appid) return 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <>
+      {games.length === 0 && (
+        <PanelSectionRow>
+          <Field label="No installed games" description="Steam has not reported any eligible games" />
+        </PanelSectionRow>
+      )}
+      {games.map((game) => (
+        <PanelSectionRow key={game.appid}>
+          <Field
+            label={game.name}
+            description={profileDescription(
+              game,
+              game.appid === runningGame?.appid,
+              game.appid === runningGame?.appid ? runningGame.configured : game.configured,
+            )}
+            onActivate={() => onSelect(game.appid)}
+            highlightOnFocus
+          />
+        </PanelSectionRow>
+      ))}
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          onClick={() => void onResetAll()}
+          disabled={!targets.some((target) => target.configured)}
+        >
+          Remove all profiles
+        </ButtonItem>
+      </PanelSectionRow>
+    </>
+  );
 }
diff --git a/src/components/NowPlayingTab.tsx b/src/components/NowPlayingTab.tsx
new file mode 100644
index 0000000..956db4a
--- /dev/null
+++ b/src/components/NowPlayingTab.tsx
@@ -0,0 +1,32 @@
+import { ButtonItem, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import { ConfigurationData } from "../config/configSchema";
+import { GameTarget } from "../hooks/useGameConfiguration";
+import { GameConfigurationControls } from "./GameConfigurationControls";
+
+interface Props {
+  game: GameTarget;
+  config: ConfigurationData;
+  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string | string[]) => Promise<void>;
+  onRemove: () => Promise<void>;
+}
+
+export function NowPlayingTab({ game, config, onConfigChange, onRemove }: Props) {
+  return (
+    <Focusable>
+      <PanelSection title="Now Playing">
+        <PanelSectionRow>
+          <Field
+            label={game.name}
+            description={`${game.nonSteam ? "Non-Steam" : "Steam"} · App ID ${game.appid} · Profile active`}
+          />
+        </PanelSectionRow>
+      </PanelSection>
+      <GameConfigurationControls config={config} onConfigChange={onConfigChange} />
+      <PanelSectionRow>
+        <ButtonItem layout="below" onClick={() => void onRemove()}>
+          Remove profile
+        </ButtonItem>
+      </PanelSectionRow>
+    </Focusable>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 5089b6f..424a360 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,9 +3,10 @@ export { StatusDisplay } from "./StatusDisplay";
 export { InstallationButton } from "./InstallationButton";
 export { ConfigurationSection } from "./ConfigurationSection";
 export { FpsMultiplierControl } from "./FpsMultiplierControl";
-export { FgmodClipboardButton } from "./FgmodClipboardButton";
 export { ConfigurationTab } from "./ConfigurationTab";
 export { SetupTab } from "./SetupTab";
 export { ConfigFileTab } from "./ConfigFileTab";
 export { FlatpaksTab } from "./FlatpaksTab";
 export { GameConfigurationSelector } from "./GameConfigurationSelector";
+export { GameConfigurationControls } from "./GameConfigurationControls";
+export { NowPlayingTab } from "./NowPlayingTab";
diff --git a/src/hooks/useGameConfiguration.ts b/src/hooks/useGameConfiguration.ts
index b177551..d279a8c 100644
--- a/src/hooks/useGameConfiguration.ts
+++ b/src/hooks/useGameConfiguration.ts
@@ -1,37 +1,40 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Router } from "@decky/ui";
-import { getGameConfigs, getInstalledGames, updateGameConfig, updateLsfgConfig, resetGameConfig, resetAllGameConfigs, type GameConfigEntry, type InstalledGame } from "../api/lsfgApi";
+import { getGameConfigs, getInstalledGames, updateGameConfig, resetGameConfig, resetAllGameConfigs, type GameConfigEntry, type GlobalConfig, type InstalledGame } from "../api/lsfgApi";
 import { ConfigurationData, getDefaults } from "../config/configSchema";
 
 export interface GameTarget extends InstalledGame { configured: boolean; }
 
 export function useGameConfiguration() {
-  const [defaultConfig, setDefaultConfig] = useState<ConfigurationData>(getDefaults());
   const [games, setGames] = useState<GameConfigEntry[]>([]);
+  const [globalConfig, setGlobalConfig] = useState<GlobalConfig>({ dll: "", no_fp16: false });
   const [installedGames, setInstalledGames] = useState<InstalledGame[]>([]);
+  const [configsLoaded, setConfigsLoaded] = useState(false);
   const [selectedAppId, setSelectedAppId] = useState("");
   const [runningGame, setRunningGame] = useState<GameTarget | null>(null);
-  const autoSelected = useRef(false);
+  const previousRunningAppId = useRef<string | null>(null);
 
   const load = useCallback(async () => {
     const [result, installed] = await Promise.all([getGameConfigs(), getInstalledGames()]);
     if (result.success) {
-      setDefaultConfig(result.default || getDefaults());
+      setGlobalConfig(result.global_config || { dll: "", no_fp16: false });
       setGames(result.games || []);
     }
     if (installed.success) setInstalledGames(installed.games || []);
+    setConfigsLoaded(true);
   }, []);
 
   useEffect(() => { load(); }, [load]);
   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);
-      setRunningGame({
+      setRunningGame((current) => current?.appid === appid ? current : {
         ...(installed || { appid, name, nonSteam: false }),
         name,
         configured: games.some((game) => game.appid === appid),
@@ -40,13 +43,14 @@ export function useGameConfiguration() {
     poll();
     const interval = window.setInterval(poll, 2000);
     return () => window.clearInterval(interval);
-  }, [games, installedGames]);
+  }, [configsLoaded, games, installedGames]);
   useEffect(() => {
-    if (!autoSelected.current && runningGame) {
-      autoSelected.current = true;
-      setSelectedAppId(runningGame.appid);
+    const appid = runningGame?.appid || null;
+    if (appid !== previousRunningAppId.current) {
+      previousRunningAppId.current = appid;
+      setSelectedAppId(appid || "");
     }
-  }, [runningGame]);
+  }, [runningGame?.appid]);
 
   const targets = useMemo<GameTarget[]>(() => {
     const configured = installedGames.map((game) => ({ ...game, configured: games.some((item) => item.appid === game.appid) }));
@@ -54,25 +58,42 @@ export function useGameConfiguration() {
     if (runningGame && !configured.some((game) => game.appid === runningGame.appid)) configured.unshift(runningGame);
     return configured;
   }, [games, installedGames, runningGame]);
-  const selected = selectedAppId ? games.find((game) => game.appid === selectedAppId)?.config : defaultConfig;
-  const config = selected || defaultConfig;
+  const template = useMemo(() => ({ ...getDefaults(), ...globalConfig }), [globalConfig]);
+  const config = games.find((game) => game.appid === selectedAppId)?.config || template;
 
   const save = useCallback(async (next: ConfigurationData) => {
-    if (!selectedAppId) {
-      const result = await updateLsfgConfig(next);
-      if (result.success) setDefaultConfig(next);
-      return;
-    }
     const selectedTarget = targets.find((target) => target.appid === selectedAppId);
     if (!selectedTarget?.name) return;
     const result = await updateGameConfig(selectedAppId, selectedTarget.name, next);
     if (result.success) await load();
   }, [load, selectedAppId, targets]);
 
+  const enable = useCallback(async (appid: string) => {
+    const target = targets.find((item) => item.appid === appid);
+    if (!target?.name) return false;
+    const result = await updateGameConfig(appid, target.name, template);
+    if (result.success) await load();
+    return result.success;
+  }, [load, targets, template]);
+
   const resetSelected = useCallback(async () => {
-    if (selectedAppId) { await resetGameConfig(selectedAppId); setSelectedAppId(""); await load(); }
+    if (selectedAppId) {
+      const result = await resetGameConfig(selectedAppId);
+      if (result.success) {
+        setRunningGame((current) => current?.appid === selectedAppId ? { ...current, configured: false } : current);
+        setSelectedAppId("");
+        await load();
+      }
+    }
   }, [load, selectedAppId]);
-  const resetAll = useCallback(async () => { await resetAllGameConfigs(); setSelectedAppId(""); await load(); }, [load]);
+  const resetAll = useCallback(async () => {
+    const result = await resetAllGameConfigs();
+    if (result.success) {
+      setRunningGame((current) => current ? { ...current, configured: false } : current);
+      setSelectedAppId("");
+      await load();
+    }
+  }, [load]);
 
-  return { config, defaultConfig, games, targets, runningGame, selectedAppId, setSelectedAppId, save, resetSelected, resetAll, reload: load };
+  return { config, games, targets, runningGame, selectedAppId, setSelectedAppId, save, enable, resetSelected, resetAll, reload: load };
 }
diff --git a/src/hooks/useLsfgHooks.ts b/src/hooks/useLsfgHooks.ts
index ea8b3d0..0b71ee9 100644
--- a/src/hooks/useLsfgHooks.ts
+++ b/src/hooks/useLsfgHooks.ts
@@ -1,14 +1,9 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import {
   checkLsfgVkInstalled,
-  getLsfgConfig,
   getLosslessScalingBranchStatus,
-  updateLsfgConfigFromObject,
-  type ConfigUpdateResult,
   type SteamBranchStatus
 } from "../api/lsfgApi";
-import { ConfigurationData, getDefaults } from "../config/configSchema";
-import { showErrorToast, ToastMessages } from "../utils/toastUtils";
 
 export function useInstallationStatus() {
   const [isInstalled, setIsInstalled] = useState<boolean>(false);
@@ -60,57 +55,3 @@ export function useInstallationStatus() {
     checkInstallation
   };
 }
-
-export function useLsfgConfig() {
-  const [config, setConfig] = useState<ConfigurationData>(() => getDefaults());
-
-  const loadLsfgConfig = useCallback(async () => {
-    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());
-      }
-    } 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
-        );
-      }
-      return result;
-    } catch (error) {
-      showErrorToast(ToastMessages.CONFIG_UPDATE_ERROR.title, String(error));
-      return { success: false, error: String(error) };
-    }
-  }, []);
-
-  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
-  };
-}
diff --git a/src/i18n/languages.json b/src/i18n/languages.json
index 0528341..3132083 100644
--- a/src/i18n/languages.json
+++ b/src/i18n/languages.json
@@ -88,10 +88,7 @@
     "PROFILE_DELETE_DESC_SUFFIX": "この操作は取り消せません。",
     "PROFILE_DELETE_BTN": "削除",
     "PROFILE_CANNOT_RENAME_TITLE": "デフォルトプロファイルの名前は変更できません",
-    "PROFILE_CANNOT_RENAME_MSG": "デフォルトプロファイルの名前は変更できません",
-    "CLIPBOARD_COPIED": "クリップボードにコピーしました",
-    "CLIPBOARD_COPYING": "コピー中...",
-    "CLIPBOARD_LSFG_FGMOD": "LSFG + DeckyFG"
+    "PROFILE_CANNOT_RENAME_MSG": "デフォルトプロファイルの名前は変更できません"
   },
   "ko": {
     "CONTENT_FPS_MULTIPLIER": "FPS 배율",
@@ -182,10 +179,7 @@
     "PROFILE_DELETE_DESC_SUFFIX": "이 작업은 취소할 수 없습니다.",
     "PROFILE_DELETE_BTN": "삭제",
     "PROFILE_CANNOT_RENAME_TITLE": "기본 프로필 이름 변경 불가",
-    "PROFILE_CANNOT_RENAME_MSG": "기본 프로필의 이름은 변경할 수 없습니다",
-    "CLIPBOARD_COPIED": "클립보드에 복사됨",
-    "CLIPBOARD_COPYING": "복사 중...",
-    "CLIPBOARD_LSFG_FGMOD": "LSFG + DeckyFG"
+    "PROFILE_CANNOT_RENAME_MSG": "기본 프로필의 이름은 변경할 수 없습니다"
   },
   "language_metadata": {
     "ko": {
@@ -304,9 +298,6 @@
     "PROFILE_DELETE_DESC_SUFFIX": "? This action cannot be undone.",
     "PROFILE_DELETE_BTN": "Delete",
     "PROFILE_CANNOT_RENAME_TITLE": "Cannot rename default profile",
-    "PROFILE_CANNOT_RENAME_MSG": "The default profile cannot be renamed",
-    "CLIPBOARD_COPIED": "Copied to clipboard",
-    "CLIPBOARD_COPYING": "Copying...",
-    "CLIPBOARD_LSFG_FGMOD": "LSFG + DeckyFG"
+    "PROFILE_CANNOT_RENAME_MSG": "The default profile cannot be renamed"
   }
 }
diff --git a/src/styles.ts b/src/styles.ts
index fe40a59..1bc089b 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,5 +1,5 @@
 export const tabStyles = `
-  .lsfg-vk-tabs > div > div:first-child::before {
+  .lsfg-vk-tabs > div > div:first-child {
     background: #0D141C;
     box-shadow: none;
     backdrop-filter: none;
diff --git a/src/utils/clipboardUtils.ts b/src/utils/clipboardUtils.ts
deleted file mode 100644
index 8a04caa..0000000
--- a/src/utils/clipboardUtils.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Clipboard utilities for reliable copy operations across different environments
- */
-
-/**
- * Reliably copy text to clipboard using multiple fallback methods
- * This is especially important in gaming mode where clipboard APIs may behave differently
- */
-export async function copyToClipboard(text: string): Promise<boolean> {
-  const tempInput = document.createElement('input');
-  tempInput.value = text;
-  tempInput.style.position = 'absolute';
-  tempInput.style.left = '-9999px';
-  document.body.appendChild(tempInput);
-  
-  try {
-    tempInput.focus();
-    tempInput.select();
-    
-    let copySuccess = false;
-    try {
-      if (document.execCommand('copy')) {
-        copySuccess = true;
-      }
-    } catch (e) {
-      try {
-        await navigator.clipboard.writeText(text);
-        copySuccess = true;
-      } catch (clipboardError) {
-        console.error('Both copy methods failed:', e, clipboardError);
-      }
-    }
-    
-    return copySuccess;
-  } finally {
-    document.body.removeChild(tempInput);
-  }
-}
-
-/**
- * Verify that text was successfully copied to clipboard
- */
-export async function verifyCopy(expectedText: string): Promise<boolean> {
-  try {
-    const readBack = await navigator.clipboard.readText();
-    return readBack === expectedText;
-  } catch (e) {
-    return true;
-  }
-}
-
-/**
- * Copy text with verification and return success status
- */
-export async function copyWithVerification(text: string): Promise<{ success: boolean; verified: boolean }> {
-  const copySuccess = await copyToClipboard(text);
-  
-  if (!copySuccess) {
-    return { success: false, verified: false };
-  }
-  
-  const verified = await verifyCopy(text);
-  return { success: true, verified };
-}
diff --git a/src/utils/toastUtils.ts b/src/utils/toastUtils.ts
index dce0a59..cbbbc55 100644
--- a/src/utils/toastUtils.ts
+++ b/src/utils/toastUtils.ts
@@ -53,14 +53,6 @@ export const ToastMessages = {
   CONFIG_UPDATE_ERROR: {
     title: "Update Failed",
     body: "Failed to update configuration"
-  },
-  CLIPBOARD_SUCCESS: {
-    title: "Copied to Clipboard!",
-    body: "Launch option ready to paste"
-  },
-  CLIPBOARD_ERROR: {
-    title: "Copy Failed",
-    body: "Unable to copy to clipboard"
   }
 } as const;
 
@@ -99,17 +91,3 @@ export function showUninstallSuccessToast(): void {
 export function showUninstallErrorToast(error?: string): void {
   showErrorToast(ToastMessages.UNINSTALL_ERROR.title, error || ToastMessages.UNINSTALL_ERROR.body);
 }
-
-/**
- * Show clipboard success toast
- */
-export function showClipboardSuccessToast(): void {
-  showSuccessToast(ToastMessages.CLIPBOARD_SUCCESS.title, ToastMessages.CLIPBOARD_SUCCESS.body);
-}
-
-/**
- * Show clipboard error toast
- */
-export function showClipboardErrorToast(): void {
-  showErrorToast(ToastMessages.CLIPBOARD_ERROR.title, ToastMessages.CLIPBOARD_ERROR.body);
-}