Skill dialog fixes.

GitOrigin-RevId: c49ae112d28753a836bd9cedecdc5bbd6fe1e8d0
nkzw-tech · Oct 28, 2024 · 68867d9 · 68867d9
1 parent 26a8b1b
commit 68867d9
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/hera/ui/SkillDialog.tsx b/hera/ui/SkillDialog.tsx
@@ -318,21 +318,13 @@ export function SkillContainer({
 
   useBlockInput('dialog');
 
+  const [hasUsedNavigation, setHasUsedNavigation] = useState(false);
   const offset = initialAvailableSkills.size > 1 ? 1 : 0;
   const [selected, , reset] = useMenuNavigation(
     offset + (enabledSkills?.length || 0),
     'dialog',
     true,
-    0,
-  );
-
-  const setGroup = useCallback(
-    (group: SkillGroupType) => {
-      setFavoriteList(new Set(favorites));
-      _setGroup(group);
-      reset();
-    },
-    [favorites, reset],
+    hasUsedNavigation ? 0 : -1,
   );
 
   const groupItems = 1 + skillGroups.size + (favorites ? 1 : 0);
@@ -347,6 +339,16 @@ export function SkillContainer({
         : [...skillGroups].indexOf(group) + 1,
   );
 
+  const setGroup = useCallback(
+    (group: SkillGroupType) => {
+      setFavoriteList(new Set(favorites));
+      _setGroup(group);
+      setHasUsedNavigation(activeGroup !== -1);
+      reset();
+    },
+    [activeGroup, favorites, reset],
+  );
+
   useInput(
     'accept',
     useCallback(
@@ -405,7 +407,7 @@ export function SkillContainer({
           </h1>
         )}
         {initialAvailableSkills.size > 1 && (
-          <Stack gap={16} nowrap>
+          <Stack gap={16}>
             <InlineLink
               active={activeGroup === 0}
               className={buttonStyle}
@@ -788,7 +790,7 @@ export function SkillIcon({
     <>
       <Stack
         alignCenter
-        className={pointerStyle}
+        className={cx(!hideDialog && pointerStyle)}
         gap
         onClick={!hideDialog ? () => setShowDialog(true) : undefined}
         start
@@ -797,7 +799,7 @@ export function SkillIcon({
           active={active}
           background={background}
           borderStyle={borderStyle}
-          button
+          button={!hideDialog}
           canActivate={canActivate}
           color={color}
           disabled={disabled}