Built theme manager

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@tauri-apps/api": "^1.0.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "recoil": "^0.7.5"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.0.5",

src-tauri/tauri.conf.json

@@ -11,6 +11,14 @@
   },
   "tauri": {
     "allowlist": {
+      "fs": {
+        "all": true,
+        "scope": [
+          "$APP/*",
+          "$DESKTOP/*",
+          "$RESOURCE/*"
+        ]
+      },
       "all": true
     },
     "bundle": {
@@ -54,6 +62,7 @@
     },
     "windows": [
       {
+        "decorations": false,
         "fullscreen": false,
         "height": 1200,
         "resizable": true,

src/App.tsx

@@ -1,11 +1,22 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/tauri";
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { Titlebar } from "./components/Titlebar";
+import { PlutoLib, pluto_lib } from "./lib/PlutoLib";
+import { PlutoLibState } from "./state/PlutoLib.state";
 
 function App() {
+  const [plutoState, setPlutoState] = useRecoilState(PlutoLibState);
+
+  useEffect(() => {
+    if (!plutoState) {
+      setPlutoState(pluto_lib);
+    }
+  }, []);
+
   return (
     <div className="app-root">
-      <h1>Pluto Editor</h1>
+      <Titlebar />
+      <h1 className="text-3xl">Pluto Editor</h1>
     </div>
   );
 }

src/components/Titlebar.tsx

@@ -0,0 +1,48 @@
+import { appWindow } from "@tauri-apps/api/window";
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { PlutoLibState } from "../state/PlutoLib.state";
+
+export const Titlebar = () => {
+  const [plutoState, setPlutoState] = useRecoilState(PlutoLibState);
+
+  useEffect(() => {
+    document
+      .getElementById("titlebar-minimize")
+      ?.addEventListener("click", () => appWindow.minimize());
+    document
+      .getElementById("titlebar-maximize")
+      ?.addEventListener("click", () => appWindow.toggleMaximize());
+    document
+      .getElementById("titlebar-close")
+      ?.addEventListener("click", () => appWindow.close());
+  }, []);
+
+  return (
+    <div
+      data-tauri-drag-region
+      className="h-[38px] flex items-center justify-between"
+      style={plutoState?.Theme.getClassName("title-bar")}
+    >
+      <div className="left"></div>
+      <div className="middle"></div>
+      <div className="right flex">
+        <div className="px-2 bg-white" id="titlebar-minimize">
+          <img
+            src="https://api.iconify.design/mdi:window-minimize.svg"
+            alt="minimize"
+          />
+        </div>
+        <div className="px-2 bg-white" id="titlebar-maximize">
+          <img
+            src="https://api.iconify.design/mdi:window-maximize.svg"
+            alt="maximize"
+          />
+        </div>
+        <div className="px-2 bg-white" id="titlebar-close">
+          <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
+        </div>
+      </div>
+    </div>
+  );
+};

src/lib/PlutoLib.ts

@@ -0,0 +1,12 @@
+import { THEME_AVAILABILITY } from "./theming/Theme.types";
+import { ThemeManager } from "./theming/ThemeManager";
+
+export class PlutoLib {
+  Theme!: ThemeManager;
+
+  constructor() {
+    this.Theme = new ThemeManager({ theme_id: THEME_AVAILABILITY.PLUTO_DARK });
+  }
+}
+
+export const pluto_lib = new PlutoLib();

src/lib/theming/Theme.state.ts

@@ -1,8 +1,8 @@
 import { LibModuleState, ModuleStatus } from "../types/generic";
 
-interface ThemeState extends LibModuleState {}
+export interface ThemeState extends LibModuleState {}
 
-export const theme_state: ThemeState = {
+export const default_theme_state: ThemeState = {
   module_id: "modules/theme",
   status: ModuleStatus.OFF,
 };

src/lib/theming/Theme.types.ts

@@ -1,6 +1,6 @@
 export type ThemeElement = {
   id: string;
-  defaultThemeSettings: string[];
+  defaultThemeSettings: Record<string, string>;
 };
 
 export enum THEME_AVAILABILITY {
@@ -11,3 +11,8 @@ export enum THEME_AVAILABILITY {
 export type ThemeManagerConfig = {
   theme_id: THEME_AVAILABILITY;
 };
+
+export type FSThemeJSON = {
+  theme_id: string;
+  elements: ThemeElement[];
+};

src/lib/theming/ThemeManager.ts

@@ -1,33 +1,55 @@
+import { ModuleStatus } from "../types/generic";
+import { default_theme_state, ThemeState } from "./Theme.state";
 import {
   ThemeElement,
   ThemeManagerConfig,
   THEME_AVAILABILITY,
 } from "./Theme.types";
+import { theme_reader } from "./_utils";
 
 const DEFAULT_CONFIG: ThemeManagerConfig = {
   theme_id: THEME_AVAILABILITY.PLUTO_DARK,
 };
 
 export class ThemeManager {
-  private config: ThemeManagerConfig;
-  private theme_elements: ThemeElement[];
+  state: ThemeState;
+  config: ThemeManagerConfig;
+
+  theme_elements!: ThemeElement[];
 
   constructor(config: ThemeManagerConfig = DEFAULT_CONFIG) {
     this.config = { ...config };
+
     this.theme_elements = [];
 
+    this.state = { ...default_theme_state };
+
+    this.state.status = ModuleStatus.INITIALIZING;
+
     this.on_theme_init();
   }
 
-  private on_theme_init() {}
+  private async on_theme_init() {
+    const elements: any = await theme_reader(this.config);
+
+    if (!elements) {
+      this.state.status = ModuleStatus.FAILED;
+      return;
+    }
+
+    this.theme_elements = elements;
+
+    this.state.status = ModuleStatus.RUNNING;
+  }
 
-  public getClassName(id: string): ThemeElement {
+  public getClassName(id: string) {
     const theme_element = this.theme_elements.find((x) => x.id === id);
 
     if (!theme_element) {
-      throw new Error("Requesting theme for non-configured element");
+      console.warn("Requesting theme for non-configured element");
+      return {};
     }
 
-    return theme_element;
+    return theme_element.defaultThemeSettings;
   }
 }

src/lib/theming/_utils.ts

@@ -1,8 +1,38 @@
 import { fs } from "@tauri-apps/api";
-import { ThemeElement, ThemeManagerConfig } from "./Theme.types";
+import { BaseDirectory } from "@tauri-apps/api/fs";
+import {
+  FSThemeJSON,
+  ThemeElement,
+  ThemeManagerConfig,
+  THEME_AVAILABILITY,
+} from "./Theme.types";
 
 export const theme_reader = async (
   config: ThemeManagerConfig
-): Promise<Record<string, ThemeElement>> => {
-  return {};
+): Promise<ThemeElement[]> => {
+  const filePath = `themes/[${THEME_AVAILABILITY[config.theme_id]}].json`;
+  console.info("Attempting Load From " + filePath);
+
+  let data!: FSThemeJSON;
+
+  try {
+    const raw = await fs.readTextFile(filePath, {
+      dir: BaseDirectory.Resource,
+    });
+
+    const fsThemeData: FSThemeJSON = JSON.parse(raw);
+
+    if (fsThemeData) {
+      data = fsThemeData;
+    }
+  } catch (e) {
+    console.error(e);
+    throw new Error("Error Loading Theme From Path: " + filePath);
+  }
+
+  if (!data) {
+    return [];
+  } else {
+    return data.elements;
+  }
 };

src/main.tsx

@@ -1,8 +1,14 @@
 import ReactDOM from "react-dom/client";
+
+import { RecoilRoot } from "recoil";
+
 import "./index.css";
+import "./styles/titlebar.css";
 
 import App from "./App";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <App />
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>
 );

src/state/PlutoLib.state.ts

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { PlutoLib } from "../lib/PlutoLib";
+
+export const PlutoLibState = atom<PlutoLib | null>({
+  key: "pluto_lib_state",
+  default: null,
+});

src/styles/titlebar.css

@@ -0,0 +1,24 @@
+/* .titlebar {
+  height: 38px;
+  background: #329ea3;
+  user-select: none;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.titlebar-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+}
+
+.titlebar-button:hover {
+  background: #5bbec3;
+} */