Merge pull request #80 from ImACoderImACoderImACoder/miniMode

mini mode almost ready

Author: ImACoderImACoderImACoder

.claude/settings.local.json

@@ -15,7 +15,11 @@
       "Bash(ls:*)",
       "Bash(node:*)",
       "Bash(find:*)",
-      "Bash(powershell:*)"
+      "Bash(powershell:*)",
+      "Bash(timeout 5 npm run dev)",
+      "Bash(npx eslint:*)",
+      "Bash(TASKKILL /F /IM node.exe)",
+      "Bash(git checkout:*)"
     ],
     "deny": []
   }

CLAUDE.md

@@ -77,4 +77,5 @@ No test commands are currently configured in package.json. Tests would use the @
 - Everything you do must work for mobile
 
 ## Code Best Practices
-- Always import the conversion function for changing between c and f instead of creating your own
+- Always import the conversion function for changing between c and f instead of creating your own
+- Always take the isF flag and the correct temperature conversion into account when dealing with temperature

public/fan-solid.svg

@@ -1,14 +1,13 @@
 import { useEffect } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import BleConnectButtonContainer from "./features/deviceBLEconnection/BleContainer";
 import VolcanoLoaderLoader from "./features/shared/OutletRenderer/VolcanoLoaderLoader";
 import Volcano from "./features/deviceInteraction/DeviceInteraction";
-import { DeviceInformationWithToggleControls } from "./features/deviceInformation/DeviceInformation";
 import ContactMe from "./features/contactMe/ContactMe";
 import { clearCache } from "./services/BleCharacteristicCache";
 import "bootstrap/dist/css/bootstrap.min.css";
 import Settings from "./features/settings/Settings";
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { ThemeProvider } from "styled-components";
 import { useSelector } from "react-redux";
 import GetTheme from "./themes/ThemeProvider";
@@ -19,6 +18,9 @@ import { TouchBackend } from "react-dnd-touch-backend";
 import Snowfall from "./features/shared/Snowfall";
 import { isMobile } from "./constants/constants";
 import DragPreview from "./features/workflowEditor/DND/DragPreview";
+import MinimalistLayout from "./features/shared/MinimalistLayout";
+import { convertToFahrenheitFromCelsius } from "./services/utils";
+import { DEGREE_SYMBOL, MIN_CELSIUS_TEMP, MAX_CELSIUS_TEMP } from "./constants/temperature";
 const Div = styled.div`
   color: ${(props) => props.theme.primaryFontColor};
   background-color: ${(props) => props.theme.backgroundColor};
@@ -27,6 +29,63 @@ const Div = styled.div`
   display: flex;
 `;
 
+const GlobalStyle = createGlobalStyle`
+  /* Custom scrollbar styling for Webkit browsers */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: ${props => props.theme.backgroundColor};
+    border-radius: 5px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: ${props => props.theme.buttonColorMain || props.theme.borderColor};
+    border-radius: 5px;
+    border: 1px solid ${props => props.theme.borderColor};
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: ${props => props.theme.buttonActive?.backgroundColor || props.theme.primaryFontColor};
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: ${props => props.theme.backgroundColor};
+  }
+
+  /* Firefox scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: ${props => props.theme.buttonColorMain || props.theme.borderColor} ${props => props.theme.backgroundColor};
+  }
+`;
+
+function AppRoutes({ isMinimalistMode }) {
+  const location = useLocation();
+  
+  // Show minimalist mode only when connected (not on home page)
+  const shouldShowMinimalistMode = isMinimalistMode && location.pathname !== "/";
+  
+  if (shouldShowMinimalistMode) {
+    return <MinimalistLayout />;
+  }
+  
+  return (
+    <Routes>
+      <Route path="/" element={<BleConnectButtonContainer />} />
+      <Route path="Volcano" element={<VolcanoLoaderLoader />}>
+        <Route path="App" element={<Volcano />} />
+        <Route path="Settings" element={<Settings />} />
+        <Route path="WorkflowEditor" element={<WorkflowEditor />} />
+        <Route path="ContactMe" element={<ContactMe />} />
+      </Route>
+      <Route path="*" element={<BleConnectButtonContainer />} />
+    </Routes>
+  );
+}
+
 function App() {
   useEffect(() => {
     window.onunhandledrejection = (event) => {
@@ -38,34 +97,64 @@ function App() {
   const themeId = useSelector(
     (state) => state.settings.config?.currentTheme || GetTheme().themeId
   );
+  const isMinimalistMode = useSelector((state) => state.settings.config?.isMinimalistMode || false);
+  
+  // Temperature state for page title
+  const currentTemperature = useSelector((state) => state.deviceInteraction.currentTemperature);
+  const targetTemperature = useSelector((state) => state.deviceInteraction.targetTemperature);
+  const isF = useSelector((state) => state.settings.isF);
+  const isHeatOn = useSelector((state) => state.deviceInteraction.isHeatOn);
 
   useEffect(() => {
     document.body.style = `background: ${GetTheme(themeId).backgroundColor};`;
   }, [themeId]);
 
+  // Update page title with current and target temperature (works for both regular and minimalist mode)
+  useEffect(() => {
+    const currentTemp = currentTemperature || currentTemperature === 0
+      ? isF
+        ? convertToFahrenheitFromCelsius(currentTemperature)
+        : currentTemperature
+      : currentTemperature;
+
+    const targetTemp = targetTemperature || targetTemperature === 0
+      ? isF
+        ? convertToFahrenheitFromCelsius(targetTemperature)
+        : targetTemperature
+      : targetTemperature;
+
+    const showCurrentTemp = (!isNaN(parseInt(currentTemperature)) &&
+      currentTemperature > MIN_CELSIUS_TEMP &&
+      currentTemperature <= MAX_CELSIUS_TEMP) || isHeatOn;
+
+    const displayCurrentTemperature = currentTemp && !isNaN(parseInt(currentTemp))
+      ? Math.round(currentTemp)
+      : null;
+      
+    const displayTargetTemperature = targetTemp && !isNaN(parseInt(targetTemp))
+      ? Math.round(targetTemp)
+      : null;
+    
+    if (displayCurrentTemperature && displayTargetTemperature && showCurrentTemp) {
+      document.title = `${displayCurrentTemperature}/${displayTargetTemperature}${DEGREE_SYMBOL}${isF ? "F" : "C"} - Onyx`;
+    } else if (displayCurrentTemperature && showCurrentTemp) {
+      document.title = `${displayCurrentTemperature}${DEGREE_SYMBOL}${isF ? "F" : "C"} - Onyx`;
+    } else {
+      document.title = "Onyx";
+    }
+  }, [currentTemperature, targetTemperature, isF, isHeatOn]);
+
   return (
     <>
       <DndProvider
         backend={window.ontouchstart || isMobile ? TouchBackend : HTML5Backend}
       >
         <ThemeProvider theme={GetTheme(themeId)}>
+          <GlobalStyle />
           <DragPreview />
           <Div>
             <BrowserRouter>
-              <Routes>
-                <Route path="/" element={<BleConnectButtonContainer />} />
-                <Route path="Volcano" element={<VolcanoLoaderLoader />}>
-                  <Route path="App" element={<Volcano />} />
-                  <Route
-                    path="DeviceInformation"
-                    element={<DeviceInformationWithToggleControls />}
-                  />
-                  <Route path="Settings" element={<Settings />} />
-                  <Route path="WorkflowEditor" element={<WorkflowEditor />} />
-                  <Route path="ContactMe" element={<ContactMe />} />
-                </Route>
-                <Route path="*" element={<BleConnectButtonContainer />} />
-              </Routes>
+              <AppRoutes isMinimalistMode={isMinimalistMode} />
             </BrowserRouter>
           </Div>
         </ThemeProvider>