Fixed id scrolling when clicking from Store

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -41,12 +41,23 @@ import {
 } from "../../../../types/components";
 import { gradients } from "../../../../utils/styleUtils";
 import { useStoreStore } from "../../../../stores/storeStore";
+import { useParams } from "react-router-dom";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
 
+  const { scrollId } = useParams();
+
+  useEffect(() => {
+    const element = document.getElementById(scrollId ?? "null");
+    if (element) {
+      // 👇 Will scroll smoothly to the top of the next section
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [scrollId]);
+
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE,
   );
@@ -272,9 +283,9 @@ export default function GeneralPage() {
               handleSaveKey();
             }}
           >
-            <Card x-chunk="dashboard-04-chunk-2">
+            <Card x-chunk="dashboard-04-chunk-2" id="api">
               <CardHeader>
-                <CardTitle>API Key</CardTitle>
+                <CardTitle>Store API Key</CardTitle>
                 <CardDescription>
                   {(hasApiKey && !validApiKey
                     ? INVALID_API_KEY

src/frontend/src/pages/StorePage/index.tsx

@@ -180,9 +180,6 @@ export default function StorePage(): JSX.Element {
       title={STORE_TITLE}
       description={STORE_DESC}
       button={
-        <>
-          {StoreApiKeyModal && (
-            <StoreApiKeyModal disabled={loading}>
         <Button
           data-testid="api-key-button-store"
           disabled={loading}
@@ -191,13 +188,13 @@ export default function StorePage(): JSX.Element {
             loading ? "cursor-not-allowed" : "",
           )}
           variant="primary"
+          onClick={() => {
+            navigate("/settings/general/api");
+          }}
         >
           <IconComponent name="Key" className="mr-2 w-4" />
           API Key
         </Button>
-            </StoreApiKeyModal>
-          )}
-        </>
       }
     >
       <div className="flex h-full w-full flex-col justify-between">

src/frontend/src/routes.tsx

@@ -56,7 +56,7 @@ const Router = () => {
       >
         <Route index element={<Navigate replace to={"general"} />} />
         <Route path="global-variables" element={<GlobalVariablesPage />} />
-        <Route path="general" element={<GeneralPage />} />
+        <Route path="general/:scrollId?" element={<GeneralPage />} />
         <Route path="shortcuts" element={<ShortcutsPage />} />
       </Route>
       <Route
@@ -80,8 +80,6 @@ const Router = () => {
         }
       />
       <Route path="/playground/:id/">
-        element=
-        {
         <Route
           path=""
           element={
@@ -90,7 +88,6 @@ const Router = () => {
             </ProtectedRoute>
           }
         />
-        }
       </Route>
       <Route path="/flow/:id/">
         <Route