chore: Split Settings from Beta Flags

package.json

@@ -110,6 +110,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^25.0.9",
     "@types/react": "^19.2.8",
@@ -128,10 +129,10 @@
     "jsdom": "^27.4.0",
     "knip": "^5.82.1",
     "prettier": "^3.8.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
-    "vitest": "^3.0.5",
-    "tsx": "^4.21.0"
+    "vitest": "^3.0.5"
   }
 }

src/betaFlags.ts

@@ -9,45 +9,52 @@ export const ExistingBetaFlags = {
     description:
       "Highlight the tasks on the Pipeline canvas when the component is hovered over in the component library.",
     default: false,
+    category: "beta",
   } as BetaFlag,
 
   ["remote-component-library-search"]: {
     name: "Published Components Library",
     description: "Enable the Published Components Library feature.",
     default: isRemoteComponentLibraryEnabled,
+    category: "beta",
   } as BetaFlag,
 
   ["github-component-library"]: {
     name: "GitHub Component Library",
     description:
       "Enable the GitHub Component Library. All lib folders will be based on GitHub components",
     default: false,
+    category: "beta",
   } as BetaFlag,
 
   ["redirect-on-new-pipeline-run"]: {
     name: "Redirect on new pipeline run",
     description: "Automatically open a new tab after starting a new execution.",
     default: false,
+    category: "setting",
   } as BetaFlag,
 
   ["created-by-me-default"]: {
     name: "Default created by me filter",
     description:
       "Automatically select the 'Created by me' filter when viewing the pipeline run list.",
     default: false,
+    category: "setting",
   } as BetaFlag,
 
   ["in-app-component-editor"]: {
     name: "In-app component editor",
     description:
       "Enable the in-app component editor for creating and editing pipeline components.",
     default: true,
+    category: "beta",
   } as BetaFlag,
 
   ["partial-selection"]: {
     name: "Partial Node Selection",
     description:
       "Allow nodes to be selected when partially covered by the selection box. Use Shift+drag for full selection, or Shift+Cmd+drag (Shift+Ctrl on Windows) for partial selection.",
     default: false,
+    category: "beta",
   } as BetaFlag,
 };

src/components/shared/Settings/BetaFeatures.tsx

@@ -0,0 +1,28 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import type { Flag } from "@/types/configuration";
+
+import { Setting } from "./Setting";
+
+interface BetaFeaturesProps {
+  betaFlags: Flag[];
+  onChange: (key: string, enabled: boolean) => void;
+}
+
+export function BetaFeatures({ betaFlags, onChange }: BetaFeaturesProps) {
+  return (
+    <BlockStack gap="4">
+      <Paragraph weight="semibold">Beta Features</Paragraph>
+      {betaFlags.length === 0 && (
+        <Paragraph>No beta features available.</Paragraph>
+      )}
+      {betaFlags.map((flag) => (
+        <Setting
+          key={flag.key}
+          setting={flag}
+          onChange={(enabled) => onChange(flag.key, enabled)}
+        />
+      ))}
+    </BlockStack>
+  );
+}

src/components/shared/Settings/PersonalPreferencesDialog.tsx

@@ -9,10 +9,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { BlockStack } from "@/components/ui/layout";
-import { Paragraph } from "@/components/ui/typography";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import { Setting } from "./Setting";
+import { BetaFeatures } from "./BetaFeatures";
+import { Settings } from "./Settings";
 import { useBetaFlagsReducer } from "./useBetaFlagReducer";
 
 interface PersonalPreferencesDialogProps {
@@ -24,12 +24,19 @@ export function PersonalPreferencesDialog({
   open,
   setOpen,
 }: PersonalPreferencesDialogProps) {
-  const [betaFlags, dispatch] = useBetaFlagsReducer(ExistingBetaFlags);
+  const [allFlags, dispatch] = useBetaFlagsReducer(ExistingBetaFlags);
 
   const handleSetFlag = (flag: string, enabled: boolean) => {
     dispatch({ type: "setFlag", payload: { key: flag, enabled } });
   };
 
+  const betaFlags = Object.values(allFlags).filter(
+    (flag) => flag.category === "beta",
+  );
+  const settings = Object.values(allFlags).filter(
+    (flag) => flag.category === "setting",
+  );
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
@@ -45,16 +52,19 @@ export function PersonalPreferencesDialog({
           Configure your personal preferences.
         </DialogDescription>
 
-        <BlockStack gap="4">
-          <Paragraph weight="semibold">Beta Features</Paragraph>
-          {betaFlags.map((flag) => (
-            <Setting
-              key={flag.key}
-              setting={flag}
-              onChange={(enabled) => handleSetFlag(flag.key, enabled)}
-            />
-          ))}
-        </BlockStack>
+        <Tabs defaultValue="settings" className="w-full gap-4">
+          <TabsList>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+            <TabsTrigger value="betas">Beta Features</TabsTrigger>
+          </TabsList>
+          <TabsContent value="settings">
+            <Settings settings={settings} onChange={handleSetFlag} />
+          </TabsContent>
+          <TabsContent value="betas">
+            <BetaFeatures betaFlags={betaFlags} onChange={handleSetFlag} />
+          </TabsContent>
+        </Tabs>
+
         <DialogFooter>
           <DialogClose asChild>
             <Button

src/components/shared/Settings/Settings.tsx

@@ -0,0 +1,26 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import type { Flag } from "@/types/configuration";
+
+import { Setting } from "./Setting";
+
+interface SettingsProps {
+  settings: Flag[];
+  onChange: (key: string, enabled: boolean) => void;
+}
+
+export function Settings({ settings, onChange }: SettingsProps) {
+  return (
+    <BlockStack gap="4">
+      <Paragraph weight="semibold">Settings</Paragraph>
+      {settings.length === 0 && <Paragraph>No settings available.</Paragraph>}
+      {settings.map((setting) => (
+        <Setting
+          key={setting.key}
+          setting={setting}
+          onChange={(enabled) => onChange(setting.key, enabled)}
+        />
+      ))}
+    </BlockStack>
+  );
+}