Stability and UX Improvements

packages/desktop/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "tauri": "tauri",
-    "dev": "vite"
+    "dev": "vite",
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "@google/generative-ai": "^0.14.1",

packages/desktop/src/App.tsx

@@ -371,6 +371,60 @@ export default function App() {
     : 0;
   let navbarWidth: number | string = settings.cameraMenu ? `${settings?.cameraMenuWidth}%` : 0;
 
+  let darkenCameraMenu = false;
+  let darkenTouchscreenMenu = false;
+  let darkenMain = false;
+
+  const DARKEN_FILTER = "opacity(25%) blur(1px) grayscale(100%)";
+
+  if (hotkeySelectorAEnabled) {
+    darkenCameraMenu = true;
+    darkenTouchscreenMenu = true;
+    darkenMain = true;
+
+    switch (settings.selectorAVisualFocus) {
+      case "CAMERA":
+        darkenCameraMenu = false;
+        break;
+      case "TOUCHSCREEN":
+        darkenTouchscreenMenu = false;
+        break;
+      case "GAME":
+        darkenMain = false;
+        break;
+
+      case "NONE":
+        darkenCameraMenu = false;
+        darkenTouchscreenMenu = false;
+        darkenMain = false;
+        break;
+    }
+  }
+
+  if (hotkeySelectorBEnabled) {
+    darkenCameraMenu = true;
+    darkenTouchscreenMenu = true;
+    darkenMain = true;
+
+    switch (settings.selectorBVisualFocus) {
+      case "CAMERA":
+        darkenCameraMenu = false;
+        break;
+      case "TOUCHSCREEN":
+        darkenTouchscreenMenu = false;
+        break;
+      case "GAME":
+        darkenMain = false;
+        break;
+
+      case "NONE":
+        darkenCameraMenu = false;
+        darkenTouchscreenMenu = false;
+        darkenMain = false;
+        break;
+    }
+  }
+
   if (firstTime) return null;
   else
     return (
@@ -392,7 +446,12 @@ export default function App() {
             breakpoint: 0,
           }}
         >
-          <AppShell.Main>
+          <AppShell.Main
+            style={{
+              filter: darkenMain ? DARKEN_FILTER : undefined,
+              transition: "filter 0.25s",
+            }}
+          >
             <Header
               active={settings.activeTab}
               setActive={(tab) => {
@@ -415,6 +474,9 @@ export default function App() {
                 flexDirection: "column",
                 justifyContent: "space-between",
                 height: "100%",
+
+                filter: darkenCameraMenu ? DARKEN_FILTER : undefined,
+                transition: "filter 0.25s",
               }}
             >
               <CameraMenu />
@@ -446,8 +508,32 @@ export default function App() {
             </AppShell.Navbar>
           )}
           {settings.touchscreenMenu && (
-            <AppShell.Aside>
+            <AppShell.Aside
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                height: "100%",
+                filter: darkenTouchscreenMenu ? DARKEN_FILTER : undefined,
+                transition: "filter 0.25s",
+              }}
+            >
               <TouchscreenMenu />
+              <Flex justify="center" style={{ marginTop: "auto" }} m="xs" gap="sm">
+                <Button
+                  fullWidth
+                  variant="subtle"
+                  color="red"
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      touchscreenMenu: false,
+                    });
+                  }}
+                >
+                  Close
+                </Button>
+              </Flex>
             </AppShell.Aside>
           )}
         </AppShell>