scroll to selected

src/Settings.tsx

@@ -1,4 +1,4 @@
-import { common, components } from "replugged";
+import { common, components, webpack } from "replugged";
 import { cfg } from ".";
 
 import themes from "./themes.json";
@@ -8,19 +8,30 @@ const { React } = common;
 const { SelectItem, ErrorBoundary } = components;
 
 import previews from "./previews.json";
-console.log(previews);
+
+const classes = await webpack.waitForProps<Record<string, string>>("select", "lookFilled");
+
+function updateTheme(theme: string) {
+  cfg.set("theme", theme);
+
+  const themeStylesheet = document.getElementById("hljs-theme") as HTMLLinkElement;
+  if (themeStylesheet)
+    themeStylesheet.href = `https://cdn.jsdelivr.net/gh/qwerty-mods/better-codeblocks@master/src/themes/${cfg.get(
+      "theme",
+    )}.min.css`;
+}
 
 export function Settings(): React.ReactElement {
-  const [ previewID, setPreviewID ] = React.useState(0);
+  const [previewID, setPreviewID] = React.useState(0);
 
   React.useEffect(() => {
     const interval = setInterval(() => {
-      setPreviewID(prevID => (prevID + 1) % previews.length);
+      setPreviewID((prevID) => (prevID + 1) % previews.length);
     }, 10e3);
 
     return () => {
       clearInterval(interval);
-    }
+    };
   }, []);
 
   return (
@@ -33,14 +44,18 @@ export function Settings(): React.ReactElement {
         options={themes.map((theme) => {
           return { label: theme, value: theme };
         })}
-        onChange={(theme) => {
-          cfg.set("theme", theme);
-
-          const themeStylesheet = document.getElementById("hljs-theme") as HTMLLinkElement;
-          if (themeStylesheet)
-            themeStylesheet.href = `https://cdn.jsdelivr.net/gh/qwerty-mods/better-codeblocks@master/src/themes/${theme}.min.css`;
-        }}
-        isSelected={(theme) => cfg.get("theme") === theme}>
+        onChange={updateTheme}
+        isSelected={(theme) => theme === cfg.get("theme")}
+        closeOnSelect={false}
+        maxVisibleItems={8}
+        onOpen={() => {
+          setTimeout(() => {
+            const selected = document
+              .getElementsByClassName(classes.popout)[0]
+              .getElementsByClassName(classes.selectedIcon)[0];
+            selected.scrollIntoView(false);
+          }, 50);
+        }}>
         Preferred Theme
       </SelectItem>
     </>

src/langs.json

@@ -12,6 +12,10 @@
     "name": "Ada",
     "id": "ada"
   },
+  {
+    "name": "Ansi",
+    "id": "ansi"
+  },
   {
     "name": "Apex",
     "id": "apex"