3 files changed, 32 insertions, 59 deletions
diff --git a/src/components/CollapsibleItemGroup.tsx b/src/components/CollapsibleItemGroup.tsx
index 29fe945..a4e4092 100644
--- a/src/components/CollapsibleItemGroup.tsx
+++ b/src/components/CollapsibleItemGroup.tsx
@@ -6,6 +6,7 @@ export interface CollapsibleItem {
   id: string;
   label: string;
   description: string;
+  disabled?: boolean;
 }
 
 export const collapsibleItemGroupStyles = `
@@ -91,7 +92,8 @@ export function CollapsibleItemGroup({
           <Field
             label={item.label}
             description={item.description}
-            onActivate={() => onSelect(item.id)}
+            disabled={item.disabled}
+            onActivate={item.disabled ? undefined : () => onSelect(item.id)}
             highlightOnFocus
           />
         </PanelSectionRow>
diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx
index 2c50be1..523e8b3 100644
--- a/src/components/FpsMultiplierControl.tsx
+++ b/src/components/FpsMultiplierControl.tsx
@@ -1,4 +1,4 @@
-import { DialogButton, Focusable, PanelSectionRow } from "@decky/ui";
+import { Focusable, PanelSectionRow, SliderField } from "@decky/ui";
 import { useEffect, useRef } from "react";
 import { ConfigurationData } from "../config/configSchema";
 import { MULTIPLIER } from "../config/generatedConfigSchema";
@@ -31,63 +31,32 @@ export function FpsMultiplierControl({
     return () => cancelAnimationFrame(frame);
   }, [autoFocus, onAutoFocus]);
 
+  const multiplierLabel = config.multiplier === 1
+    ? t("MULTIPLIER_OFF", "Off")
+    : `${config.multiplier}x`;
+
   return (
     <PanelSectionRow>
-      <Focusable
-        ref={focusableRef}
-        noFocusRing
-        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={() => void 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 < 2 ? 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={() => void onConfigChange(MULTIPLIER, Math.min(4, config.multiplier + 1))}
-          disabled={config.multiplier >= 4}
-        >
-          +
-        </DialogButton>
+      <Focusable ref={focusableRef} noFocusRing>
+        <SliderField
+          label={`FPS multiplier · ${multiplierLabel}`}
+          value={config.multiplier}
+          min={1}
+          max={6}
+          step={1}
+          notchCount={6}
+          notchLabels={[
+            { notchIndex: 0, label: "OFF", value: 1 },
+            { notchIndex: 1, label: "2X", value: 2 },
+            { notchIndex: 2, label: "3X", value: 3 },
+            { notchIndex: 3, label: "4X", value: 4 },
+            { notchIndex: 4, label: "5X", value: 5 },
+            { notchIndex: 5, label: "6X", value: 6 },
+          ]}
+          notchTicksVisible={true}
+          showValue={false}
+          onChange={(value) => void onConfigChange(MULTIPLIER, value)}
+        />
       </Focusable>
     </PanelSectionRow>
   );
diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index ad3537d..91dc3df 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -20,6 +20,7 @@ const ENABLED_COLLAPSED_KEY = "lsfg-enabled-games-collapsed-v4";
 const AVAILABLE_COLLAPSED_KEY = "lsfg-available-games-collapsed-v3";
 
 function targetDescription(game: GameTarget): string {
+  if (game.isFlatpakShortcut) return "Non-Steam | Use Flatpak Tab";
   return game.source === "unknown"
     ? "Unknown source · excluded from bulk actions"
     : sourceLabel(game.source);
@@ -43,8 +44,8 @@ export function GameConfigurationSelector({
   });
   const enabledGames = sortGames(targets.filter((game) => game.configured));
   const availableGames = sortGames(targets.filter((game) => !game.configured));
-  const enableableGames = availableGames.filter((game) => game.source === source);
-  const removableGames = enabledGames.filter((game) => game.source === source);
+  const enableableGames = availableGames.filter((game) => game.source === source && !game.isFlatpakShortcut);
+  const removableGames = enabledGames.filter((game) => game.source === source && !game.isFlatpakShortcut);
   const sourceName = source === "nonSteam" ? "non-Steam shortcuts" : "Steam games";
   const emptyDescription = source === "nonSteam"
     ? "Steam has not reported any eligible non-Steam shortcuts"
@@ -53,6 +54,7 @@ export function GameConfigurationSelector({
     id: game.appid,
     label: game.name,
     description: targetDescription(game),
+    disabled: game.isFlatpakShortcut,
   });
   const [enabledCollapsed, toggleEnabled] = usePersistentCollapsed(`${ENABLED_COLLAPSED_KEY}-${source}`);
   const [availableCollapsed, toggleAvailable] = usePersistentCollapsed(`${AVAILABLE_COLLAPSED_KEY}-${source}`);