update layout and config and hash

5 files changed, 77 insertions, 19 deletions

diff --git a/package.json b/package.json
index 6cd5ebc..8deb8a7 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     {
       "name": "lsfg-vk-2.0.0.tar.xz",
       "url": "https://builds.lsfg-vk.dev/lsfg-vk-2.0.0.tar.xz",
-      "sha256hash": "d8378b45d378150ea9aba803a0ba855d8ce91ad9b3366ee0eb2036b06b08380c"
+      "sha256hash": "08bdbdf373a111022df87dac7aa87e3b564bb841f961552e3ca85fea12b5aa74"
     },
     {
       "name": "org.freedesktop.Platform.VulkanLayer.lsfg_vk_23.08.flatpak",
diff --git a/src/components/ConfigurationTab.tsx b/src/components/ConfigurationTab.tsx
index b94522a..6ba8f5d 100644
--- a/src/components/ConfigurationTab.tsx
+++ b/src/components/ConfigurationTab.tsx
@@ -1,10 +1,11 @@
-import { ButtonItem, DialogButton, Field, Focusable, PanelSection, PanelSectionRow } from "@decky/ui";
+import { ButtonItem, DialogButton, Focusable, PanelSection, PanelSectionRow, gamepadDialogClasses } from "@decky/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { FaArrowLeft } from "react-icons/fa";
 import { ConfigurationData } from "../config/configSchema";
 import { GameTarget } from "../hooks/useGameConfiguration";
 import { GameConfigurationControls } from "./GameConfigurationControls";
 import { GameConfigurationSelector } from "./GameConfigurationSelector";
+import { ProfileDetails } from "./ProfileDetails";
 
 interface ConfigurationTabProps {
   config: ConfigurationData;
@@ -105,21 +106,35 @@ export function ConfigurationTab({
     <Focusable onCancelButton={closeDetails}>
       <PanelSection>
         <PanelSectionRow>
-          <Focusable noFocusRing>
+          <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+            <Focusable noFocusRing style={{ flex: "none" }}>
             <DialogButton
               aria-label="Back to games"
               onClick={closeDetails}
-              style={{ width: "48px", minWidth: "48px", height: "24px", minHeight: "24px", padding: "0 10px" }}
+              style={{
+                width: "48px",
+                minWidth: "48px",
+                height: "24px",
+                minHeight: "24px",
+                padding: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
             >
               <FaArrowLeft />
             </DialogButton>
-          </Focusable>
+            </Focusable>
+            <div
+              className={gamepadDialogClasses.FieldLabel}
+              style={{ flex: 1, minWidth: 0, marginLeft: "8px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+            >
+              {profileLabel}
+            </div>
+          </div>
         </PanelSectionRow>
       </PanelSection>
       <PanelSection>
-        <PanelSectionRow>
-          <Field label={profileLabel} />
-        </PanelSectionRow>
         {!selectedTarget?.configured && selectedTarget && (
           <PanelSectionRow>
             <Focusable ref={enableRef} noFocusRing>
@@ -141,9 +156,7 @@ export function ConfigurationTab({
           <ButtonItem layout="below" onClick={handleProfileAction}>Remove profile</ButtonItem>
         </PanelSectionRow>
       )}
-      <PanelSectionRow>
-        <Field focusable highlightOnFocus label="Details" description={profileDescription} />
-      </PanelSectionRow>
+      <ProfileDetails description={profileDescription} />
     </Focusable>
   );
 }
diff --git a/src/components/GameConfigurationSelector.tsx b/src/components/GameConfigurationSelector.tsx
index 15f2465..5f23b91 100644
--- a/src/components/GameConfigurationSelector.tsx
+++ b/src/components/GameConfigurationSelector.tsx
@@ -11,15 +11,15 @@ interface Props {
   onResetAll: () => Promise<void>;
 }
 
-const CONFIGURED_COLLAPSED_KEY = "lsfg-configured-games-collapsed-v2";
-const AVAILABLE_COLLAPSED_KEY = "lsfg-available-games-collapsed";
+const CONFIGURED_COLLAPSED_KEY = "lsfg-configured-games-collapsed-v3";
+const AVAILABLE_COLLAPSED_KEY = "lsfg-available-games-collapsed-v2";
 
 function usePersistentCollapsed(key: string) {
   const [collapsed, setCollapsed] = useState(() => {
     try {
-      return localStorage.getItem(key) === "true";
+      return localStorage.getItem(key) !== "false";
     } catch {
-      return false;
+      return true;
     }
   });
 
@@ -65,9 +65,9 @@ function GameGroup({
             onClick={onToggle}
           >
             {collapsed ? (
-              <RiArrowDownSFill style={{ transform: "translate(0, -13px)", fontSize: "1.5em" }} />
+              <RiArrowDownSFill />
             ) : (
-              <RiArrowUpSFill style={{ transform: "translate(0, -12px)", fontSize: "1.5em" }} />
+              <RiArrowUpSFill />
             )}
           </ButtonItem>
         </div>
@@ -132,7 +132,16 @@ export function GameConfigurationSelector({ targets, runningGame, onSelect, onEn
         {`
           .LSFG_GameGroupCollapseButton_Container > div > div > div > button,
           .LSFG_GameGroupCollapseButton_Container > div > div > div > div > button {
-            height: 10px !important;
+            height: 24px !important;
+            padding: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          }
+
+          .LSFG_GameGroupCollapseButton_Container svg {
+            display: block;
+            margin: 0;
           }
         `}
       </style>
diff --git a/src/components/NowPlayingTab.tsx b/src/components/NowPlayingTab.tsx
index 8d2d779..2ec12ca 100644
--- a/src/components/NowPlayingTab.tsx
+++ b/src/components/NowPlayingTab.tsx
@@ -16,7 +16,6 @@ export function NowPlayingTab({ game, config, onConfigChange }: Props) {
         <PanelSectionRow>
           <Field
             label={game.name}
-            description={`${game.nonSteam ? "Non-Steam" : "Steam"} | App ID ${game.appid}`}
           />
         </PanelSectionRow>
       </PanelSection>
diff --git a/src/components/ProfileDetails.tsx b/src/components/ProfileDetails.tsx
new file mode 100644
index 0000000..056abbb
--- /dev/null
+++ b/src/components/ProfileDetails.tsx
@@ -0,0 +1,37 @@
+import { ButtonItem, Field, Focusable, PanelSectionRow } from "@decky/ui";
+import { useEffect, useRef, useState } from "react";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+
+interface ProfileDetailsProps {
+  description: string;
+}
+
+export function ProfileDetails({ description }: ProfileDetailsProps) {
+  const [expanded, setExpanded] = useState(false);
+  const detailsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!expanded) return;
+    const frame = requestAnimationFrame(() => detailsRef.current?.scrollIntoView({ block: "nearest" }));
+    return () => cancelAnimationFrame(frame);
+  }, [expanded]);
+
+  return (
+    <Focusable ref={detailsRef} noFocusRing>
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
+          bottomSeparator={expanded ? "none" : "standard"}
+          onClick={() => setExpanded((value) => !value)}
+        >
+          {expanded ? <RiArrowUpSFill /> : <RiArrowDownSFill />} Details
+        </ButtonItem>
+      </PanelSectionRow>
+      {expanded && (
+        <PanelSectionRow>
+          <Field label="Details" description={description} />
+        </PanelSectionRow>
+        )}
+    </Focusable>
+  );
+}