web: simplify settings dialog markup

apps/web/src/dialogs/settings/index.tsx

@@ -185,112 +185,115 @@ export default function SettingsDialog(props: SettingsDialogProps) {
       <Flex
         sx={{
           height: "80vw",
-          overflow: "hidden"
+          overflow: "hidden",
+          "& #settings-side-menu": {
+            "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
+              {
+                backgroundColor: "bgTransparent",
+                backdropFilter: "blur(8px)"
+              }
+          }
         }}
       >
-        <FlexScrollContainer>
+        <FlexScrollContainer
-          <Flex
+          id="settings-side-menu"
-            sx={{
+          style={{
-              flexDirection: "column",
+            display: "flex",
-              width: 240,
+            flexDirection: "column",
-              overflow: "hidden",
+            borderRadius: "10px",
-              minHeight: "min-content",
+            width: 240,
-              bg: "bgSecondary",
+            overflow: "auto",
-              "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
+            minHeight: "min-content",
-                {
+            backgroundColor: "bgSecondary"
-                  bg: "bgTransparent",
+          }}
-                  backdropFilter: "blur(8px)"
+          data-test-id="settings-navigation-menu"
+        >
+          <Input
+            placeholder="Search"
+            data-test-id="settings-search"
+            sx={{ m: 2, mb: 2, width: "auto", bg: "bgSecondary", py: "7px" }}
+            onChange={(e) => {
+              const query = e.target.value.toLowerCase().trim();
+              if (!query)
+                return setActiveSettings(
+                  SettingsGroups.filter((g) => g.section === route)
+                );
+
+              const groups: SettingsGroup[] = [];
+              for (const group of SettingsGroups) {
+                const isTitleMatch =
+                  typeof group.header === "string" &&
+                  group.header.toLowerCase().includes(query);
+
+                if (isTitleMatch) {
+                  groups.push(group);
+                  continue;
                 }
+
+                const settings = group.settings.filter(
+                  (setting) =>
+                    setting.description?.toLowerCase().includes(query) ||
+                    setting.keywords?.some((keyword) =>
+                      keyword.toLowerCase().includes(query)
+                    ) ||
+                    setting.title.toLowerCase().includes(query)
+                );
+                if (!settings.length) continue;
+                groups.push({ ...group, settings });
+              }
+              setActiveSettings(groups);
             }}
-            data-test-id="settings-navigation-menu"
+          />
-          >
+          {sectionGroups.map((group) => (
-            <Input
+            <Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
-              placeholder="Search"
+              <Text
-              data-test-id="settings-search"
+                variant={"subBody"}
-              sx={{ m: 2, mb: 2, width: "auto", bg: "bgSecondary", py: "7px" }}
+                sx={{
-              onChange={(e) => {
+                  fontWeight: "bold",
-                const query = e.target.value.toLowerCase().trim();
+                  color: "text",
-                if (!query)
+                  mx: 3,
-                  return setActiveSettings(
+                  mb: 1
-                    SettingsGroups.filter((g) => g.section === route)
+                }}
-                  );
+              >
-
+                {group.title}
-                const groups: SettingsGroup[] = [];
+              </Text>
-                for (const group of SettingsGroups) {
+              {group.sections.map(
-                  const isTitleMatch =
+                (section) =>
-                    typeof group.header === "string" &&
+                  (!section.isHidden || !section.isHidden()) && (
-                    group.header.toLowerCase().includes(query);
+                    <NavigationItem
-
+                      key={section.key}
-                  if (isTitleMatch) {
+                      icon={section.icon}
-                    groups.push(group);
+                      title={section.title}
-                    continue;
+                      selected={section.key === route}
-                  }
+                      onClick={() => {
-
+                        setActiveSettings(
-                  const settings = group.settings.filter(
+                          SettingsGroups.filter(
-                    (setting) =>
+                            (g) => g.section === section.key
-                      setting.description?.toLowerCase().includes(query) ||
+                          )
-                      setting.keywords?.some((keyword) =>
+                        );
-                        keyword.toLowerCase().includes(query)
+                        setRoute(section.key);
-                      ) ||
+                      }}
-                      setting.title.toLowerCase().includes(query)
+                    />
-                  );
+                  )
-                  if (!settings.length) continue;
+              )}
-                  groups.push({ ...group, settings });
+            </Flex>
-                }
+          ))}
-                setActiveSettings(groups);
-              }}
-            />
-            {sectionGroups.map((group) => (
-              <Flex key={group.key} sx={{ flexDirection: "column", mb: 2 }}>
-                <Text
-                  variant={"subBody"}
-                  sx={{
-                    fontWeight: "bold",
-                    color: "text",
-                    mx: 3,
-                    mb: 1
-                  }}
-                >
-                  {group.title}
-                </Text>
-                {group.sections.map(
-                  (section) =>
-                    (!section.isHidden || !section.isHidden()) && (
-                      <NavigationItem
-                        key={section.key}
-                        icon={section.icon}
-                        title={section.title}
-                        selected={section.key === route}
-                        onClick={() => {
-                          setActiveSettings(
-                            SettingsGroups.filter(
-                              (g) => g.section === section.key
-                            )
-                          );
-                          setRoute(section.key);
-                        }}
-                      />
-                    )
-                )}
-              </Flex>
-            ))}
-          </Flex>
         </FlexScrollContainer>
         <FlexScrollContainer
-          style={{ flex: 1, backgroundColor: "var(--background)" }}
+          style={{
+            display: "flex",
+            backgroundColor: "var(--background)",
+            flex: 1,
+            flexDirection: "column",
+            padding: 20,
+            gap: 20,
+            minHeight: "min-content",
+            overflow: "auto"
+          }}
         >
-          <Flex
+          {activeSettings.map((group) => (
-            sx={{
+            <SettingsGroupComponent key={group.key} item={group} />
-              flexDirection: "column",
+          ))}
-              p: 4,
-              gap: 4,
-              overflow: "hidden"
-            }}
-          >
-            {activeSettings.map((group) => (
-              <SettingsGroupComponent key={group.key} item={group} />
-            ))}
-          </Flex>
         </FlexScrollContainer>
       </Flex>
     </Dialog>
@@ -307,7 +310,14 @@ function SettingsGroupComponent(props: { item: SettingsGroup }) {
 
   if (item.isHidden && item.isHidden()) return null;
   return (
-    <Flex sx={{ flexDirection: "column", gap: 2, overflow: "hidden" }}>
+    <Flex
+      sx={{
+        flexDirection: "column",
+        flexShrink: 0,
+        gap: 2,
+        overflow: "hidden"
+      }}
+    >
       {typeof item.header === "string" ? (
         <Text
           variant="subBody"