Add Menubar app first version

NelsonBrandao · Oct 11, 2023 · 8fe492a · 8fe492a
1 parent a79dcca
commit 8fe492a
Show file tree

Hide file tree

Showing 42 changed files with 295 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Flexispot Menubar
+
+This project contains an ESPHome configuration file that will connect a ESP32 to the Flexispot table and a simple menubar app to interact with the table.
+
+![Demo image](/menubar/demo/demo.png)
diff --git a/menubar/.eslintrc.cjs b/menubar/.eslintrc.cjs
@@ -26,5 +26,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint', 'react'],
-  rules: {},
+  rules: {
+    'react/jsx-newline': 2,
+  },
 };
diff --git a/menubar/README.md b/menubar/README.md
diff --git a/menubar/demo/demo.png b/menubar/demo/demo.png
diff --git a/menubar/index.html b/menubar/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + TS</title>
+    <title>Flexispot Menubar</title>
   </head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+  <body class="h-full">
+    <div id="root" class="h-full"></div>
+    <script type="module" src="/src/windows/menubar/index.tsx"></script>
   </body>
 </html>
diff --git a/menubar/package-lock.json b/menubar/package-lock.json
diff --git a/menubar/package.json b/menubar/package.json
@@ -24,6 +24,7 @@
     "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.16",
+    "classnames": "^2.3.2",
     "eslint": "^8.50.0",
     "eslint-plugin-react": "^7.33.2",
     "postcss": "^8.4.31",

diff --git a/menubar/public/tauri.svg b/menubar/public/tauri.svg
diff --git a/menubar/public/vite.svg b/menubar/public/vite.svg
diff --git a/menubar/src-tauri/Cargo.toml b/menubar/src-tauri/Cargo.toml
@@ -13,7 +13,7 @@ edition = "2021"
 tauri-build = { version = "1.4", features = [] }
 
 [dependencies]
-tauri = { version = "1.4", features = [ "system-tray", "shell-open"] }
+tauri = { version = "1.4", features = [ "http-request", "system-tray", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 tauri-plugin-positioner = { version = "1.0.4", features = ["system-tray"] }

diff --git a/menubar/src-tauri/icons/128x128.png b/menubar/src-tauri/icons/128x128.png
diff --git a/menubar/src-tauri/icons/128x128@2x.png b/menubar/src-tauri/icons/128x128@2x.png
diff --git a/menubar/src-tauri/icons/32x32.png b/menubar/src-tauri/icons/32x32.png
diff --git a/menubar/src-tauri/icons/Square107x107Logo.png b/menubar/src-tauri/icons/Square107x107Logo.png
diff --git a/menubar/src-tauri/icons/Square142x142Logo.png b/menubar/src-tauri/icons/Square142x142Logo.png
diff --git a/menubar/src-tauri/icons/Square150x150Logo.png b/menubar/src-tauri/icons/Square150x150Logo.png
diff --git a/menubar/src-tauri/icons/Square284x284Logo.png b/menubar/src-tauri/icons/Square284x284Logo.png
diff --git a/menubar/src-tauri/icons/Square30x30Logo.png b/menubar/src-tauri/icons/Square30x30Logo.png
diff --git a/menubar/src-tauri/icons/Square310x310Logo.png b/menubar/src-tauri/icons/Square310x310Logo.png
diff --git a/menubar/src-tauri/icons/Square44x44Logo.png b/menubar/src-tauri/icons/Square44x44Logo.png
diff --git a/menubar/src-tauri/icons/Square71x71Logo.png b/menubar/src-tauri/icons/Square71x71Logo.png
diff --git a/menubar/src-tauri/icons/Square89x89Logo.png b/menubar/src-tauri/icons/Square89x89Logo.png
diff --git a/menubar/src-tauri/icons/StoreLogo.png b/menubar/src-tauri/icons/StoreLogo.png
diff --git a/menubar/src-tauri/icons/icon.icns b/menubar/src-tauri/icons/icon.icns
diff --git a/menubar/src-tauri/icons/icon.ico b/menubar/src-tauri/icons/icon.ico
diff --git a/menubar/src-tauri/icons/icon.png b/menubar/src-tauri/icons/icon.png
diff --git a/menubar/src-tauri/src/main.rs b/menubar/src-tauri/src/main.rs
@@ -1,25 +1,32 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
+use tauri::{
+    CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem,
+};
 use tauri_plugin_positioner::{Position, WindowExt};
 
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust!", name)
 }
 
 fn main() {
-    let system_tray_menu = SystemTrayMenu::new();
+    let quit = CustomMenuItem::new("quit".to_string(), "Quit");
+    let system_tray_menu = SystemTrayMenu::new()
+        .add_native_item(SystemTrayMenuItem::Separator)
+        .add_item(quit);
+
+    let system_tray = SystemTray::new().with_menu(system_tray_menu);
+
     tauri::Builder::default()
         .setup(|app| {
             // Disable dock icon on MacOS
             app.set_activation_policy(tauri::ActivationPolicy::Accessory);
             Ok(())
         })
         .plugin(tauri_plugin_positioner::init())
-        .system_tray(SystemTray::new().with_menu(system_tray_menu))
+        .system_tray(system_tray)
         .on_system_tray_event(|app, event| {
             tauri_plugin_positioner::on_tray_event(app, &event);
             match event {
@@ -39,6 +46,12 @@ fn main() {
                         window.set_focus().unwrap();
                     }
                 }
+                SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
+                    "quit" => {
+                        std::process::exit(0);
+                    }
+                    _ => {}
+                },
                 _ => {}
             }
         })

diff --git a/menubar/src-tauri/tauri.conf.json b/menubar/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
     "withGlobalTauri": false
   },
   "package": {
-    "productName": "menubar",
+    "productName": "Flexispot Menubar",
     "version": "0.0.0"
   },
   "tauri": {
@@ -16,12 +16,16 @@
       "shell": {
         "all": false,
         "open": true
+      },
+      "http": {
+        "scope": ["http://*"],
+        "request": true
       }
     },
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "com.tauri.dev",
+      "identifier": "dev.nelsonbrandao.flexispot-menubar",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",
@@ -41,15 +45,15 @@
     "windows": [
       {
         "fullscreen": false,
-        "height": 400,
+        "height": 100,
         "resizable": false,
         "title": "menubar",
-        "width": 200,
+        "width": 400,
         "visible": false,
         "hiddenTitle": true,
         "decorations": false,
         "focus": false,
-        "transparent": true,
+        "transparent": false,
         "skipTaskbar": true,
         "alwaysOnTop": true
       }

diff --git a/menubar/src/App.tsx b/menubar/src/App.tsx
diff --git a/menubar/src/api/Flexispot.ts b/menubar/src/api/Flexispot.ts
@@ -0,0 +1,38 @@
+import { FetchOptions, fetch } from '@tauri-apps/api/http';
+
+export enum Preset {
+  One = 'preset_1',
+  Two = 'preset_2',
+  Stand = 'stand',
+  Sit = 'sit',
+}
+
+interface SensorResponse {
+  id: string;
+  value: number;
+  state: string;
+}
+
+export class Flexispot {
+  constructor(private baseUrl: string) {}
+
+  triggerPreset(preset: Preset) {
+    return this.fetch<void>(`/switch/${preset}/turn_on`, { method: 'POST' });
+  }
+
+  async getUptime(): Promise<SensorResponse> {
+    const response = await this.fetch<SensorResponse>(`/sensor/uptime`, { method: 'GET' });
+
+    return response.data;
+  }
+
+  async getWifiSignal(): Promise<SensorResponse> {
+    const response = await this.fetch<SensorResponse>(`/sensor/wifi_signal`);
+
+    return response.data;
+  }
+
+  private fetch<T>(path: string, options?: FetchOptions) {
+    return fetch<T>(`${this.baseUrl}${path}`, options);
+  }
+}
diff --git a/menubar/src/assets/react.svg b/menubar/src/assets/react.svg
diff --git a/menubar/src/components/MenuItem.tsx b/menubar/src/components/MenuItem.tsx
@@ -0,0 +1,30 @@
+import classNames from 'classNames';
+
+interface MenuItemProps extends React.ComponentPropsWithoutRef<'button'> {
+  children: React.ReactNode;
+  hasError?: boolean;
+  icon: React.ReactNode;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+}
+
+export const MenuItem = ({ children, hasError, icon, isDisabled, isLoading, ...props }: MenuItemProps) => {
+  return (
+    <button
+      className={classNames(
+        'flex flex-col items-center rounded-lg p-3  cursor-pointer transition-all text-gray-700 fill-gray-700',
+        {
+          'hover:text-sky-500 hover:fill-sky-500 hover:bg-sky-100': !isDisabled,
+          'text-gray-300 fill-gray-300': isDisabled,
+          'animate-pulse': isLoading,
+          'animate-error': hasError,
+        },
+      )}
+      {...props}
+    >
+      <div>{icon}</div>
+
+      <p className='font-light text-sm tracking-wide pt-1'>{children}</p>
+    </button>
+  );
+};
diff --git a/menubar/src/components/icons/OneIcon.tsx b/menubar/src/components/icons/OneIcon.tsx
@@ -0,0 +1,15 @@
+import { IconProps } from './types';
+
+export const OneIcon = (props: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M11.98 17h1.976V7.033h-.212L9.622 8.51v1.606l2.358-.731V17Z' />
+
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'
+      />
+    </svg>
+  );
+};
diff --git a/menubar/src/components/icons/SeatIcon.tsx b/menubar/src/components/icons/SeatIcon.tsx
@@ -0,0 +1,11 @@
+import { IconProps } from './types';
+
+export const SeatIcon = (props: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' {...props}>
+      <path d='M356.875 103.922c27.761-10.39 41.815-41.317 31.363-69.109C377.849 7.082 346.901-6.971 319.17 3.429c-27.751 10.42-41.785 41.347-31.394 69.108 10.41 27.762 41.358 41.826 69.099 31.385zm38.894 207.214V167.261c-.367-21.798-18.358-39.159-40.156-38.772-21.808.376-39.201 18.328-38.824 40.136v129.761l-85.29 15.57c-18.236 3.094-32.911 15.845-33.002 35.232l2.595 129.984c-.05 15.142 12.192 27.517 27.386 27.6 15.173.02 27.538-12.212 27.598-27.395l7.988-102.05h73.475c41.256-.105 58.352-24.955 58.23-66.191z' />
+
+      <path d='M461.529 233.388c-11.245-2.412-22.306 4.792-24.698 16.058l-22.204 104.605c-1.71 7.367-3.918 13.199-6.402 17.758-3.837 6.818-7.918 10.888-14.054 14.38-6.117 3.398-14.888 5.984-27.284 6.95-3.277.274-6.778.468-10.523.498h-58.758c-11.52.183-20.668 9.739-20.476 21.249.194 11.51 9.688 20.668 21.208 20.485h58.453c4.601-.041 9.078-.336 13.403-.662 10.98-.895 21.136-2.778 30.601-6.054 14.166-4.844 26.683-13.22 35.842-24.658 9.24-11.388 15.01-25.167 18.592-40.493l.062-.244 22.306-105.174c2.393-11.266-4.802-22.338-16.068-24.698zm-252.173-7.653v-29.838H101.505L61.674 95.679 33.943 106.69l47.321 119.045zm41.683 14.634H35.673V512h38.213V282.011h177.153z' />
+    </svg>
+  );
+};
diff --git a/menubar/src/components/icons/StandIcon.tsx b/menubar/src/components/icons/StandIcon.tsx
@@ -0,0 +1,9 @@
+import { IconProps } from './types';
+
+export const StandIcon = (props: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' {...props}>
+      <path d='M370.875 103.922c27.761-10.39 41.815-41.317 31.363-69.109C391.849 7.082 360.901-6.971 333.17 3.429c-27.751 10.42-41.785 41.347-31.394 69.108 10.41 27.762 41.358 41.826 69.099 31.385Zm24.894 207.214V167.261c-.367-21.798-18.358-39.159-40.156-38.772-21.808.376-39.201 18.328-38.824 40.136v129.761l12.303 180.786c-.05 15.142 12.192 27.517 27.386 27.6 15.173.02 27.538-12.212 27.598-27.395 0 0 11.815-127.005 11.693-168.241ZM209.356 183.735v-31.838H101.505L61.674 51.679 33.943 62.69l47.321 121.045h128.092Zm41.683 14.634H35.673V512h38.213V240.011h177.153v-41.642Z' />
+    </svg>
+  );
+};
diff --git a/menubar/src/components/icons/TwoIcon.tsx b/menubar/src/components/icons/TwoIcon.tsx
@@ -0,0 +1,15 @@
+import { IconProps } from './types';
+
+export const TwoIcon = (props: IconProps) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M9.157 17h6.822v-1.593H11.7l2.263-2.386c.62-.679 1.057-1.273 1.312-1.784.256-.51.383-1.011.383-1.504 0-.897-.285-1.592-.854-2.085-.565-.492-1.36-.738-2.386-.738-.67 0-1.27.144-1.798.43a3.06 3.06 0 0 0-1.23 1.177 3.283 3.283 0 0 0-.431 1.66h1.982c0-.5.128-.904.383-1.21.26-.31.613-.464 1.06-.464.415 0 .733.128.957.383.223.25.335.597.335 1.039 0 .323-.107.665-.322 1.025-.21.36-.535.782-.977 1.265l-3.22 3.431V17Z' />
+
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'
+      />
+    </svg>
+  );
+};
diff --git a/menubar/src/components/icons/types.ts b/menubar/src/components/icons/types.ts
@@ -0,0 +1,5 @@
+export interface IconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}