Refactor extension handlers and improve mobile UX

- Split extensionMessageHandler into separate handler files
  - Created handlers directory with individual files for database, filesystem, http, permissions, context, and storage
  - Reduced main handler file from 602 to 342 lines
  - Improved code organization and maintainability

- Add viewport utilities for safe area handling
  - New viewport.ts utility with helpers for fullscreen dimensions
  - Proper safe area inset calculations for mobile devices
  - Fixed window positioning on small screens to start at 0,0

- Create UiDrawer wrapper component
  - Automatically applies safe area insets
  - Uses TypeScript DrawerProps interface for code completion
  - Replaced all UDrawer instances with UiDrawer

- Improve window management
  - Windows on small screens now use full viewport with safe areas
  - Fixed maximize functionality to respect safe areas
  - Consolidated safe area logic in reusable utilities

src/utils/viewport.ts

@@ -0,0 +1,67 @@
+// Viewport and safe area utilities
+
+export interface ViewportDimensions {
+  width: number
+  height: number
+  safeAreaTop: number
+  safeAreaBottom: number
+  headerHeight: number
+}
+
+/**
+ * Get viewport dimensions with safe areas and header height
+ */
+export function getViewportDimensions(): ViewportDimensions {
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight - 60 // Subtract tab bar height
+
+  // Get safe-area-insets from CSS variables
+  const safeAreaTop = parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--safe-area-inset-top',
+    ) || '0',
+  )
+  const safeAreaBottom = parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--safe-area-inset-bottom',
+    ) || '0',
+  )
+
+  // Get header height from UI store
+  const { headerHeight } = useUiStore()
+
+  return {
+    width: viewportWidth,
+    height: viewportHeight,
+    safeAreaTop,
+    safeAreaBottom,
+    headerHeight,
+  }
+}
+
+/**
+ * Calculate available content height (viewport height minus safe areas)
+ * Note: viewport height already excludes header, so we only subtract safe areas
+ */
+export function getAvailableContentHeight(): number {
+  const dimensions = getViewportDimensions()
+  return (
+    dimensions.height -
+    dimensions.safeAreaTop -
+    dimensions.safeAreaBottom
+  )
+}
+
+/**
+ * Calculate fullscreen window dimensions (for small screens)
+ */
+export function getFullscreenDimensions() {
+  const dimensions = getViewportDimensions()
+
+  return {
+    x: 0,
+    y: 0,
+    width: dimensions.width,
+    height: getAvailableContentHeight(),
+  }
+}