Merge pull request #8 from devklick/dev

Dev

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -99,6 +99,7 @@ function BorderedApp({
           <StyledWindowMenus className="drag-to-move">
             {menus?.map((m) => (
               <BorderedAppMenu
+                appRef={appRef}
                 title={m.title}
                 items={m.items ?? []}
                 key={m.title}

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useDetectMouseDownOutside from "../../../hooks/useDetectMouseDownOutside";
 import MenuItems, { MenuItemProps } from "../../MenuItems";
 
@@ -7,18 +7,24 @@ import { StyledAppMenu } from "./styles";
 export interface BorderedAppMenuProps {
   title: string;
   items: Array<MenuItemProps>;
+  appRef: React.RefObject<HTMLDivElement>;
 }
 
-function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
+function BorderedAppMenu({ title, appRef, items }: BorderedAppMenuProps) {
   const [open, setOpen] = useState<boolean>(false);
   const elementRef = useRef<HTMLDivElement>(null);
   const position = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
   useEffect(() => {
     const rect = elementRef.current?.getBoundingClientRect();
-    // TODO: Look into where this -10 comes from
-    position.current = { x: (rect?.left ?? 0) - 10, y: rect?.height ?? 0 };
-  }, [elementRef]);
+    const appRect = appRef.current?.getBoundingClientRect();
+    if (!rect || !appRect) return;
+
+    position.current = {
+      x: (rect?.left ?? 0) - appRect.left,
+      y: rect?.height ?? 0,
+    };
+  }, [appRef, elementRef]);
 
   // Close the menu if an outside click occurs
   useDetectMouseDownOutside({

src/programs/Settings/Settings.tsx

@@ -13,6 +13,7 @@ import {
   StyledSections,
   StyledSettings,
 } from "./styles";
+import Button from "../../components/Button";
 
 interface SettingsSectionProps {
   title: string;
@@ -37,6 +38,8 @@ function SettingsSection(section: SettingsSectionProps) {
         return "color";
       case "url":
         return "url";
+      case "button":
+        return "button";
       default:
         return "text";
     }
@@ -62,15 +65,26 @@ function SettingsSection(section: SettingsSectionProps) {
     }, 1000);
   }
 
-  return (
-    <StyledSection>
-      <StyledSectionTitle>{section.title}</StyledSectionTitle>
-      <StyledSectionDescription>{section.description}</StyledSectionDescription>
+  function getInputField() {
+    const type = getInputType(section.type);
+    if (type === "button")
+      return (
+        <Button name="Restore" onClick={() => section.onValueChanged("")} />
+      );
+    return (
       <StyledSectionValue
         type={getInputType(section.type)}
         value={String(value)}
         onChange={handleChange}
-      ></StyledSectionValue>
+      />
+    );
+  }
+
+  return (
+    <StyledSection>
+      <StyledSectionTitle>{section.title}</StyledSectionTitle>
+      <StyledSectionDescription>{section.description}</StyledSectionDescription>
+      {getInputField()}
     </StyledSection>
   );
 }

src/programs/Settings/settingsPageConfig.ts

@@ -76,6 +76,13 @@ export function getPages(
             systemsSettings.setIconColor(value);
           },
         },
+        {
+          title: "Restore Default Theme",
+          description: "Revert to the default theme",
+          type: "button",
+          onValueChanged: () => systemsSettings.restoreDefaultTheme(),
+          currentValue: undefined,
+        },
       ],
     },
   };

src/stores/systemSettingsStore.ts

@@ -1,6 +1,24 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+type FunctionPropertyNames<T> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [K in keyof T]: T[K] extends Function ? K : never;
+}[keyof T];
+
+type Theme = Omit<
+  SystemSettingState,
+  FunctionPropertyNames<SystemSettingState>
+>;
+
+const defaultTheme: Theme = {
+  mainColor: "#2e3440",
+  accentColor: "#454e60",
+  fontColor: "#ffffff",
+  iconColor: "#9298b9",
+  background: "https://regolith-linux.org/images/releases/nord-dark.png",
+};
+
 export interface SystemSettingState {
   mainColor: string;
   accentColor: string;
@@ -12,16 +30,13 @@ export interface SystemSettingState {
   setFontColor: (color: string) => void;
   setIconColor: (color: string) => void;
   setBackground: (url: string) => void;
+  restoreDefaultTheme: () => void;
 }
 
 export const useSystemSettings = create<SystemSettingState>()(
   persist(
     (set) => ({
-      mainColor: "#2e3440",
-      accentColor: "#454e60",
-      fontColor: "#ffffff",
-      iconColor: "#9298b9",
-      background: "https://regolith-linux.org/images/releases/nord-dark.png",
+      ...defaultTheme,
       setAccentColor(accentColor) {
         set({ accentColor });
       },
@@ -37,6 +52,9 @@ export const useSystemSettings = create<SystemSettingState>()(
       setBackground(background) {
         set({ background });
       },
+      restoreDefaultTheme() {
+        set({ ...defaultTheme });
+      },
     }),
     {
       name: "system-settings",