move all ui related functionality to a separate class

Signed-off-by: Nikita Skrynnik <[email protected]>

Author: NikitaSkrynnik

src/components/browser/Browser.tsx

@@ -150,11 +150,11 @@ class InputHandler {
     }
 
     canvas.onfocus = () => {
-      app.setBrowserFocused(true);
+      app.ui.setBrowserFocused(true);
       connection.page.focus(true);
     };
     canvas.onblur = () => {
-      app.setBrowserFocused(false);
+      app.ui.setBrowserFocused(false);
       connection.page.focus(false);
     };
   }

src/components/browser/BrowserContextMenu.tsx

@@ -1,7 +1,7 @@
 import { ContextMenu } from "@kobalte/core/context-menu";
 import { ArrowLeft, ArrowRight, RotateCcw } from "lucide-solid";
 import styles from "./BrowserContextMenu.module.scss";
-import { AppState } from "../state/state";
+import { AppState } from "../../state/state";
 import { createMemo, JSX, Show } from "solid-js";
 
 function BrowserContextMenu(props: { app: AppState, children: JSX.Element }) {

src/components/sidebar/Input.tsx

@@ -9,7 +9,7 @@ export default function Input(props: { app: AppState }) {
     let activeTabMemo = createMemo(() => props.app.getActiveTab());
 
     onMount(() => {
-        props.app.setFocusUrlCallback(() => ref.focus());
+        props.app.ui.setFocusUrlCallback(() => ref.focus());
     })
 
     createEffect(() => {

src/components/sidebar/Layout.tsx

@@ -17,7 +17,7 @@ export default function Sidebar(props: { app: AppState }) {
     const onNewTabClick = () => setShowInput(true);
 
     onMount(() => {
-        props.app.setShowNewTabInputCallback(() => setShowInput(true));
+        props.app.ui.setShowNewTabInputCallback(() => setShowInput(true));
     });
 
     return (

src/state/shortcuts.ts

@@ -27,7 +27,7 @@ export class Shortcuts {
                     action.execute();
                 }
 
-                if (action.ctx == "webpage" && app.browserFocused()) {
+                if (action.ctx == "webpage" && app.ui.browserFocused()) {
                     e.preventDefault();
                     action.execute();
                 }
@@ -50,7 +50,7 @@ export class Shortcuts {
         this.shortcuts.set("ctrl+shift+tab", "previousTab");
         this.shortcuts.set("ctrl+shift+t", "restoreSession");
 
-        this.actions.set("showInput", { ctx: "global", execute: () => app.showNewTabInput() });
+        this.actions.set("showInput", { ctx: "global", execute: () => app.ui.showNewTabInput() });
         this.actions.set("closeTab", { ctx: "global", execute: () => app.getActiveTab()?.close() });
         this.actions.set("reload", { ctx: "webpage", execute: () => app.getActiveTab()?.reload() });
         this.actions.set("selectAll", { ctx: "webpage", execute: () => app.getActiveTab()?.selectAll() });
@@ -59,7 +59,7 @@ export class Shortcuts {
         this.actions.set("cut", { ctx: "webpage", execute: () => app.getActiveTab()?.cut() });
         this.actions.set("undo", { ctx: "webpage", execute: () => app.getActiveTab()?.undo() });
         this.actions.set("redo", { ctx: "webpage", execute: () => app.getActiveTab()?.redo() });
-        this.actions.set("focusOnAddressBar", { ctx: "global", execute: () => app.focusUrl() });
+        this.actions.set("focusOnAddressBar", { ctx: "global", execute: () => app.ui.focusUrl() });
         this.actions.set("nextTab", { ctx: "global", execute: () => app.shiftTab(true) });
         this.actions.set("previousTab", { ctx: "global", execute: () => app.shiftTab(false) });
         this.actions.set("restoreSession", { ctx: "global", execute: () => app.restore() });

src/state/state.ts

@@ -3,10 +3,11 @@ import { createStore, SetStoreFunction } from "solid-js/store";
 import { ProfileManager } from "./profiles";
 import { isURL, isFQDN } from "validator";
 import { invoke } from "@tauri-apps/api/core";
-import { Accessor, createSignal, Setter } from "solid-js";
+import { Setter } from "solid-js";
 import { Shortcuts } from "./shortcuts";
 import { DownloadProgress, FileDialog } from "cef-client/dist/event_stream";
 import { Downloads } from "./downloads";
+import { UIState } from "./ui";
 import { open } from '@tauri-apps/plugin-dialog';
 
 type TabId = number;
@@ -49,26 +50,20 @@ export class AppState {
     downloads: Downloads;
     shortcuts: Shortcuts;
     profiles: ProfileManager | undefined;
+    ui: UIState;
 
     tabs: TabState[];
     setTabs: SetStoreFunction<TabState[]>;
     connections: Map<TabId, TabConnection> = new Map();
 
-    browserFocused: Accessor<boolean>;
-    setBrowserFocused: Setter<boolean>;
-
-    private focusUrlCallback: (() => void) | null = null;
-    private showNewTabInputCallback: (() => void) | null = null;
-
     constructor(client: Browser, profiles?: ProfileManager) {
         this.client = client;
 
         this.downloads = new Downloads();
         this.shortcuts = new Shortcuts(this);
         this.profiles = profiles;
+        this.ui = new UIState();
         [this.tabs, this.setTabs] = createStore<TabState[]>([]);
-
-        [this.browserFocused, this.setBrowserFocused] = createSignal(false);
     }
 
     async setClient(client: Browser) {
@@ -97,36 +92,7 @@ export class AppState {
         let tab = await this.client.openTab({ url })!;
         this.addTab(tab);
         this.setActiveTab(tab.id);
-        this.focusUrl();
-    }
-
-    setFocusUrlCallback(callback: () => void) {
-        this.focusUrlCallback = callback;
-    }
-
-    setShowNewTabInputCallback(callback: () => void) {
-        this.showNewTabInputCallback = callback;
-    }
-
-    focusUrl() {
-        if (this.focusUrlCallback) this.focusUrlCallback();
-    }
-
-    showNewTabInput() {
-        if (this.showNewTabInputCallback) {
-            this.showNewTabInputCallback();
-        } else {
-            console.warn("showNewTabInputCallback is not set");
-        }
-    }
-
-    isBrowserFocused(): boolean {
-        return this.browserFocused();
-    }
-
-    getStackTrace(): string {
-        const error = new Error();
-        return error.stack ?? 'No stack trace available';
+        this.ui.focusUrl();
     }
 
     getActiveTab(): TabState | undefined {

src/state/ui.ts

@@ -0,0 +1,48 @@
+import { Accessor, createSignal, Setter } from "solid-js";
+
+export interface UICallbacks {
+    focusUrl: (() => void) | null;
+    showNewTabInput: (() => void) | null;
+}
+
+export class UIState {
+    browserFocused: Accessor<boolean>;
+    setBrowserFocused: Setter<boolean>;
+
+    private callbacks: UICallbacks;
+
+    constructor() {
+        [this.browserFocused, this.setBrowserFocused] = createSignal(false);
+
+        this.callbacks = {
+            focusUrl: null,
+            showNewTabInput: null
+        };
+    }
+
+    setFocusUrlCallback(callback: () => void) {
+        this.callbacks.focusUrl = callback;
+    }
+
+    setShowNewTabInputCallback(callback: () => void) {
+        this.callbacks.showNewTabInput = callback;
+    }
+
+    focusUrl() {
+        if (this.callbacks.focusUrl) {
+            this.callbacks.focusUrl();
+        }
+    }
+
+    showNewTabInput() {
+        if (this.callbacks.showNewTabInput) {
+            this.callbacks.showNewTabInput();
+        } else {
+            console.warn("showNewTabInputCallback is not set");
+        }
+    }
+
+    isBrowserFocused(): boolean {
+        return this.browserFocused();
+    }
+}