First pass at system settings & theming

devklick · devklick · commit 88a80edfa9a1 · 2023-10-10T22:11:35.000+01:00
diff --git a/src/components/AppSideBar/AppSideBar.scss b/src/components/AppSideBar/AppSideBar.scss
@@ -0,0 +1,23 @@
+.app-side-bar {
+  grid-area: side-bar;
+  width: 100%;
+  height: 100%;
+  &__items {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  &__item {
+    border-radius: 10px;
+    padding: 6px 10px;
+    box-sizing: border-box;
+    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0);
+    &:hover {
+      backdrop-filter: brightness(150%);
+      transition: ease-in 0.2s;
+    }
+    &:active {
+      box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
+    }
+  }
+}
diff --git a/src/components/AppSideBar/AppSideBar.tsx b/src/components/AppSideBar/AppSideBar.tsx
@@ -0,0 +1,33 @@
+import "./AppSideBar.scss";
+
+interface SideBarItem {
+  title: string;
+  onClick: () => void;
+  isActive?: boolean;
+}
+
+interface AppSideBarProps {
+  items: Array<SideBarItem>;
+}
+
+function AppSideBar({ items }: AppSideBarProps) {
+  return (
+    <div className="app-side-bar">
+      <div className="app-side-bar__items">
+        {items.map((item) => {
+          return (
+            <div
+              className={`app-side-bar__item ${item.isActive ? "active" : ""} `}
+              onClick={item.onClick}
+              key={item.title}
+            >
+              {item.title}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default AppSideBar;
diff --git a/src/components/AppSideBar/index.ts b/src/components/AppSideBar/index.ts
@@ -0,0 +1,3 @@
+import AppSideBar from "./AppSideBar";
+
+export default AppSideBar;
diff --git a/src/components/BorderedApp/BorderedApp.tsx b/src/components/BorderedApp/BorderedApp.tsx
@@ -9,6 +9,7 @@ import BorderedAppMenu, {
 import usePositionableElement from "../../hooks/usePositionableElement";
 
 import "./BorderedApp.scss";
+import useSystemSettings from "../../stores/systemSettingsStore";
 interface BorderedAppProps extends BaseProps {
   title: string;
   type: string;
@@ -30,6 +31,7 @@ function BorderedApp({
   zIndex,
 }: React.PropsWithChildren<BorderedAppProps>) {
   const winMan = useWindowManagerStore();
+  const settings = useSystemSettings();
 
   // Need a ref to point to the app for moving it around the screen
   const appRef = useRef<HTMLDivElement>(null);
@@ -64,6 +66,7 @@ function BorderedApp({
         width: initialDimensions.width,
         height: initialDimensions.height,
         zIndex,
+        backgroundColor: settings.mainColor,
       }}
     >
       <div className="bordered-app__corner-nw" ref={resizeHandleNW} />
diff --git a/src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.scss b/src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.scss
@@ -6,9 +6,10 @@
     width: auto;
     position: fixed;
     box-sizing: border-box;
+    box-shadow: 0 0 2px rgb(0, 0, 0, 0.5);
     // Cant use backdrop-filter on fixed elements :(
     //   backdrop-filter: blur(8px) brightness(130%);
-    background-color: darkmagenta;
+    // background-color: darkmagenta;
 
     &__content {
       box-sizing: border-box;
diff --git a/src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx b/src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import "./BorderedAppMenu.scss";
+import useSystemSettings from "../../../stores/systemSettingsStore";
 
 export interface BorderedAppMenuItemProps {
   title: string;
@@ -88,12 +89,14 @@ function BorderedAppMenuItems({
   items: Array<BorderedAppMenuItemProps>;
   position: { x: number; y: number };
 }) {
+  const settings = useSystemSettings();
   return (
     <div
       className="bordered-app-menu-items"
       style={{
         left: position.x,
         top: position.y,
+        backgroundColor: settings.mainColor,
       }}
     >
       <div className="bordered-app-menu-items__content">
@@ -116,6 +119,7 @@ function BorderedAppMenu({ title, items }: BorderedAppMenuProps) {
   const [open, setOpen] = useState<boolean>(false);
   const elementRef = useRef<HTMLDivElement>(null);
   const position = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const settings = useSystemSettings();
 
   useEffect(() => {
     const rect = elementRef.current?.getBoundingClientRect();
diff --git a/src/components/BottomBar/BottomBar.tsx b/src/components/BottomBar/BottomBar.tsx
@@ -1,22 +1,26 @@
 import CalculatorLauncher from "../../programs/Calculator/CalculatorLauncher";
 import FileBrowserLauncher from "../../programs/FileBrowser/FileBrowserLauncher";
+import SettingsLauncher from "../../programs/Settings/SettingsLauncher";
 import TextEditorLauncher from "../../programs/TextEditor/TextEditorLauncher";
 import WebBrowserLauncher from "../../programs/WebBrowser/WebBrowserLauncher";
+import useSystemSettings from "../../stores/systemSettingsStore";
 
 import "./BottomBar.scss";
 
 interface BottomBarProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function BottomBar({}: BottomBarProps) {
+  const settings = useSystemSettings();
   return (
     <div id="bottom-bar__container">
-      <div id="bottom-bar">
+      <div id="bottom-bar" style={{ backgroundColor: settings.mainColor }}>
         <div id="bottom-bar__contents">
           <TextEditorLauncher />
           <CalculatorLauncher />
           <WebBrowserLauncher />
           <FileBrowserLauncher />
+          <SettingsLauncher />
         </div>
       </div>
     </div>
diff --git a/src/components/Desktop/Desktop.scss b/src/components/Desktop/Desktop.scss
@@ -20,8 +20,8 @@
     // background: url("https://cdn.dribbble.com/users/1658867/screenshots/4721860/attachments/1064507/wallpaper_1280x720.jpg");
     /** Background credit to https://dribbble.com/erikalam **/
 
-    background: url("https://images.pling.com/img/00/00/66/42/38/1904144/nord-lake.png");
-    background: url("https://regolith-linux.org/images/releases/nord-dark.png");
+    // background: url("https://images.pling.com/img/00/00/66/42/38/1904144/nord-lake.png");
+    // background: url("https://regolith-linux.org/images/releases/nord-dark.png");
 
     background-size: cover;
     background-repeat: no-repeat;
diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx
@@ -3,14 +3,21 @@ import Content from "../Content";
 import BottomBar from "../BottomBar";
 
 import "./Desktop.scss";
+import useSystemSettings from "../../stores/systemSettingsStore";
 
 interface DesktopProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function Desktop({}: DesktopProps) {
+  const settings = useSystemSettings();
   return (
     <div id="desktop">
-      <div id="desktop__background" />
+      <div
+        id="desktop__background"
+        style={{
+          backgroundImage: `url(${settings.background})`,
+        }}
+      />
       <TopBar />
       <Content />
       <BottomBar />
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
@@ -1,3 +1,4 @@
+import useSystemSettings from "../../stores/systemSettingsStore";
 import ClockMenu from "./ClockMenu";
 import FocusedWindowMenu from "./FocusedWindowMenu";
 import SystemTray from "./SystemTray";
@@ -7,9 +8,10 @@ interface TopBarProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function TopBar({}: TopBarProps) {
+  const settings = useSystemSettings();
   return (
     <div id="top-bar__container">
-      <div id="top-bar">
+      <div id="top-bar" style={{ backgroundColor: settings.mainColor }}>
         <div id="top-bar__contents">
           <FocusedWindowMenu />
           <ClockMenu />
diff --git a/src/programs/FileBrowser/FileBrowser.tsx b/src/programs/FileBrowser/FileBrowser.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { ReactComponent as FolderIcon } from "../../assets/icons/folder-icon.svg";
 
-import { FSDirectory, FSObject, isFSDirectory } from "../../stores/localFS";
+import { FSObject, isFSDirectory } from "../../stores/localFS";
 import useLocalFSWithHistory from "../../hooks/useLocalFSWithHistory";
 
 import "./FileBrowser.scss";
+import AppSideBar from "../../components/AppSideBar";
 const defaultPath = "/home/user";
 
 interface FileBrowserProps {
@@ -51,32 +52,6 @@ function TopBar({
   );
 }
 
-interface SideBarProps {
-  favorites: Array<FSDirectory>;
-  openFSObject: (fsObject: FSObject) => void;
-  currentPath: string;
-}
-
-function SideBar({ favorites, openFSObject, currentPath }: SideBarProps) {
-  return (
-    <div className="file-browser__side-bar">
-      <div className="file-browser__side-bar__favorites">
-        {favorites.map((fav) => (
-          <div
-            className={`file-browser__side-bar__favorite ${
-              fav.path === currentPath ? "active" : ""
-            } `}
-            onClick={() => openFSObject(fav)}
-            key={fav.path}
-          >
-            {fav.name}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 interface MainContentProps {
   dirContents: Record<string, FSObject>;
   openFSObject: (fsObject: FSObject) => void;
@@ -138,10 +113,12 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
         navForward={fs.navForward}
       />
 
-      <SideBar
-        favorites={fs.favorites}
-        openFSObject={fs.navToObject}
-        currentPath={fs.currentDirectory.path}
+      <AppSideBar
+        items={fs.favorites.map((fav) => ({
+          title: fav.name,
+          isActive: fav.path === fs.currentDirectory.path,
+          onClick: () => fs.navToObject(fav),
+        }))}
       />
 
       <MainContent
diff --git a/src/programs/Settings/Settings.scss b/src/programs/Settings/Settings.scss
@@ -0,0 +1,12 @@
+.settings {
+  display: grid;
+  grid-template-columns: 150px auto;
+  grid-template-areas: "side-bar main-content";
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+
+  &__page {
+    overflow: auto;
+  }
+}
diff --git a/src/programs/Settings/Settings.tsx b/src/programs/Settings/Settings.tsx
@@ -0,0 +1,92 @@
+import AppSideBar from "../../components/AppSideBar";
+import { getPages } from "./settingsPageConfig";
+
+import "./Settings.scss";
+import { HTMLInputTypeAttribute, useRef, useState } from "react";
+import useSystemSettings from "../../stores/systemSettingsStore";
+
+interface SettingsSectionProps {
+  title: string;
+  description: string;
+  type: string;
+  currentValue: unknown;
+  validValues?: Array<unknown>;
+  valueValidation?: (value: string) => string | undefined;
+  onValueChanged: (value: string) => void;
+}
+
+function SettingsSection(section: SettingsSectionProps) {
+  function getInputType(type: string): HTMLInputTypeAttribute {
+    switch (type) {
+      case "color":
+        return "color";
+      case "url":
+        return "url";
+      default:
+        return "text";
+    }
+  }
+  return (
+    <div className="settings__page-section">
+      <h1>{section.title}</h1>
+      <p>{section.description}</p>
+      <input
+        type={getInputType(section.type)}
+        value={String(section.currentValue)}
+        onChange={(e) => {
+          console.log("value changed to", e.currentTarget.value);
+          section.onValueChanged(e.currentTarget.value);
+        }}
+      ></input>
+    </div>
+  );
+}
+
+export interface SettingsPageProps {
+  name: string;
+  sections: Array<SettingsSectionProps>;
+}
+
+function SettingsPage({ sections }: SettingsPageProps) {
+  return (
+    <div className="settings__page">
+      <div className="settings__page-sections">
+        {sections.map((section) => (
+          <SettingsSection {...section} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface SettingsProps {}
+
+// eslint-disable-next-line no-empty-pattern
+function Settings({}: SettingsProps) {
+  const systemSettings = useSystemSettings();
+  const pages = getPages(systemSettings);
+  const [currentPage, setCurrentPage] = useState<string>(Object.keys(pages)[0]);
+
+  function getAppBar() {
+    return (
+      <AppSideBar
+        items={Object.entries<SettingsPageProps>(pages).map(([type, page]) => {
+          return {
+            title: page.name,
+            isActive: currentPage === type,
+            onClick: () => setCurrentPage(type),
+          };
+        })}
+      />
+    );
+  }
+
+  return (
+    <div className="settings">
+      {getAppBar()}
+      <SettingsPage {...pages[currentPage]} />
+    </div>
+  );
+}
+
+export default Settings;
diff --git a/src/programs/Settings/SettingsLauncher/SettingsLauncher.scss b/src/programs/Settings/SettingsLauncher/SettingsLauncher.scss
diff --git a/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx b/src/programs/Settings/SettingsLauncher/SettingsLauncher.tsx
@@ -0,0 +1,22 @@
+import Settings from "..";
+import Launcher from "../../../components/BottomBar/Launcher";
+import "./SettingsLauncher.scss";
+
+interface SettingsLauncherProps {}
+
+// eslint-disable-next-line no-empty-pattern
+function SettingsLauncher({}: SettingsLauncherProps) {
+  return (
+    <Launcher
+      windowType={"settings"}
+      WindowTitle="Settings"
+      initialDimensions={{ height: 500, width: 500 }}
+      menus={[]}
+      appContent={<Settings />}
+      icon=""
+      // icon={icon}
+    ></Launcher>
+  );
+}
+
+export default SettingsLauncher;
diff --git a/src/programs/Settings/SettingsLauncher/index.ts b/src/programs/Settings/SettingsLauncher/index.ts
diff --git a/src/programs/Settings/index.ts b/src/programs/Settings/index.ts
diff --git a/src/programs/Settings/settingsPageConfig.ts b/src/programs/Settings/settingsPageConfig.ts
diff --git a/src/stores/systemSettingsStore.ts b/src/stores/systemSettingsStore.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import AppSideBar from "./AppSideBar";`
	`2`	`+`
	`3`	`+export default AppSideBar;`