Add fullscreen & fix notes

dashboard/package.json

@@ -15,7 +15,13 @@
     "build:unpack": "npm run build && electron-builder --dir",
     "build:win": "npm run build && electron-builder --win",
     "build:mac": "npm run build && electron-builder --mac",
-    "build:linux": "npm run build && electron-builder --linux"
+    "build:linux": "npm run build && electron-builder --linux",
+    "fullscreen": "KIOSK=false npm run start",
+    "kiosk": "KIOSK=true npm run start",
+    "electron": "electron",
+    "electron:kiosk": "electron . --kiosk",
+    "electron:fullscreen": "electron .",
+    "test:fullscreen": "node test-fullscreen.js"
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",

dashboard/src/main/index.js

@@ -1,4 +1,4 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, screen } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
@@ -6,22 +6,79 @@ import icon from '../../resources/icon.png?asset'
 let mainWindow
 
 const createWindow = () => {
+  // Get the primary display dimensions
+  const primaryDisplay = screen.getPrimaryDisplay()
+  const { width, height } = primaryDisplay.workAreaSize
+
+  // Check for kiosk mode - enable if in production, has kiosk flag, or KIOSK env var
+  const isKioskMode = process.env.NODE_ENV === 'production' || 
+                      process.argv.includes('--kiosk') || 
+                      process.env.KIOSK === 'true'
+
   mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
+    width: width,
+    height: height,
     show: false,
     autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
+    fullscreen: true,
+    kiosk: isKioskMode,
+    frame: false, // Remove window frame for true fullscreen experience
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
       nodeIntegration: false,
-      contextIsolation: true
+      contextIsolation: true,
+      webSecurity: false // Allow loading external resources
+    },
+    ...(process.platform === 'linux' ? { icon } : {})
+  })
+
+  // Disable zoom and context menu for touch interface
+  mainWindow.webContents.on('before-input-event', (event, input) => {
+    // Prevent zooming with Ctrl++ and Ctrl+-
+    if (input.control && (input.key === '+' || input.key === '-' || input.key === '=' || input.key === '0')) {
+      event.preventDefault()
     }
+    // Prevent F11 fullscreen toggle in kiosk mode
+    if (isKioskMode && input.key === 'F11') {
+      event.preventDefault()
+    }
+  })
+
+  // Disable right-click context menu
+  mainWindow.webContents.on('context-menu', (event) => {
+    event.preventDefault()
   })
 
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
+    // Ensure fullscreen mode is enabled
+    if (!mainWindow.isFullScreen()) {
+      mainWindow.setFullScreen(true)
+    }
+    // Focus the window
+    mainWindow.focus()
+  })
+
+  // Prevent accidentally leaving fullscreen in kiosk mode
+  mainWindow.on('leave-full-screen', () => {
+    if (isKioskMode) {
+      mainWindow.setFullScreen(true)
+    }
+  })
+
+  // Handle window focus events to maintain fullscreen in kiosk mode
+  mainWindow.on('focus', () => {
+    if (isKioskMode && !mainWindow.isFullScreen()) {
+      mainWindow.setFullScreen(true)
+    }
+  })
+
+  // Prevent window from being minimized in kiosk mode
+  mainWindow.on('minimize', () => {
+    if (isKioskMode) {
+      mainWindow.restore()
+    }
   })
 
   mainWindow.webContents.setWindowOpenHandler((details) => {

dashboard/src/renderer/src/index.sass

@@ -4,11 +4,22 @@
   margin: 0
   padding: 0
   box-sizing: border-box
+  // Improve touch interactions
+  -webkit-tap-highlight-color: transparent
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
 
 html, body
   height: 100vh
   width: 100vw
   overflow: hidden
+  // Prevent scrolling and bouncing on touch devices
+  -webkit-overflow-scrolling: touch
+  overscroll-behavior: none
 
 body
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
@@ -22,12 +33,17 @@ body
   line-height: 1.5
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
+  // Prevent pull-to-refresh and other touch gestures
+  overscroll-behavior-y: none
+  -webkit-user-select: none
 
 #root
   height: 100vh
   width: 100vw
   display: flex
   flex-direction: column
+  // Prevent touch scrolling
+  touch-action: none
 
 // App Layout Styles
 .app
@@ -35,6 +51,8 @@ body
   width: 100vw
   display: flex
   flex-direction: column
+  // Prevent touch scrolling
+  touch-action: none
 
   &__main
     flex: 1
@@ -68,4 +86,46 @@ body
       font-size: 1.25rem
       color: rgba(30, 41, 59, 0.8)
       font-weight: 500
-      line-height: 1.6
+      line-height: 1.6
+
+// Touch-friendly interactive elements
+button, a, [role="button"], .interactive
+  // Improve touch target size
+  min-height: 44px
+  min-width: 44px
+  // Add touch feedback
+  transition: all 0.2s ease
+  cursor: pointer
+  
+  &:hover, &:focus
+    transform: scale(1.05)
+  
+  &:active
+    transform: scale(0.95)
+    opacity: 0.8
+
+// Prevent text selection on interactive elements
+button, a, [role="button"], .nav-item, .interactive
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+// Allow text selection on input fields and content areas
+input, textarea, [contenteditable], .selectable
+  -webkit-user-select: text
+  -moz-user-select: text
+  -ms-user-select: text
+  user-select: text
+  // Re-enable touch actions for inputs
+  touch-action: manipulation
+
+// Fullscreen specific styles
+@media (display-mode: fullscreen)
+  body
+    background-attachment: fixed
+    
+  .app
+    // Ensure content fits fullscreen properly
+    min-height: 100vh
+    max-height: 100vh

dashboard/src/renderer/src/pages/Notes.jsx

@@ -117,6 +117,47 @@ const Notes = () => {
     saveCanvasToStorage()
   }
 
+  // Touch event handlers for mobile/tablet support
+  const handleTouchStart = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    
+    // Only handle single touch
+    if (e.touches.length !== 1) return
+    
+    const touch = e.touches[0]
+    const mouseEvent = new MouseEvent('mousedown', {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      bubbles: true,
+      cancelable: true
+    })
+    startDrawing(mouseEvent)
+  }
+
+  const handleTouchMove = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    
+    // Only handle single touch
+    if (e.touches.length !== 1) return
+    
+    const touch = e.touches[0]
+    const mouseEvent = new MouseEvent('mousemove', {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      bubbles: true,
+      cancelable: true
+    })
+    draw(mouseEvent)
+  }
+
+  const handleTouchEnd = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    stopDrawing()
+  }
+
   const clearCanvas = () => {
     const canvas = canvasRef.current
     const ctx = canvas.getContext('2d')
@@ -193,6 +234,9 @@ const Notes = () => {
             onMouseMove={draw}
             onMouseUp={stopDrawing}
             onMouseLeave={stopDrawing}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
           />
         </div>
       </div>

dashboard/src/renderer/src/pages/Notes.sass

@@ -166,6 +166,9 @@
   background: rgba(255, 255, 255, 0.9)
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5)
   overflow: hidden
+  // Ensure touch events can reach the canvas
+  touch-action: auto !important
+  position: relative
 
 .drawing-canvas
   width: 100%
@@ -174,6 +177,12 @@
   display: block
   background: #ffffff
   border-radius: 20px
+  // Enable touch interactions - override global touch-action: none
+  touch-action: auto !important
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
 
   &.eraser-mode
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="black" stroke-width="2"/></svg>') 10 10, auto