feat: Initialize Capacitor Android project with PWA assets and update API session SameSite configuration.

k-notes-frontend/src/App.tsx

@@ -6,9 +6,11 @@ import RegisterPage from "@/pages/register";
 import DashboardPage from "@/pages/dashboard";
 import Layout from "@/components/layout";
 import { useSync } from "@/lib/sync";
+import { useMobileStatusBar } from "@/hooks/use-mobile-status-bar";
 
 function App() {
   useSync();
+  useMobileStatusBar();
 
   return (
     <Routes>

k-notes-frontend/src/hooks/use-mobile-status-bar.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { StatusBar, Style } from '@capacitor/status-bar';
+import { Capacitor } from '@capacitor/core';
+import { useTheme } from 'next-themes';
+
+export const useMobileStatusBar = () => {
+    const { resolvedTheme } = useTheme();
+
+    useEffect(() => {
+        // Only run on native platforms
+        if (Capacitor.isNativePlatform()) {
+            const setStatusBarStyle = async () => {
+                try {
+                    // On Android, make sure the status bar overlays the WebView (transparent)
+                    if (Capacitor.getPlatform() === 'android') {
+                        await StatusBar.setOverlaysWebView({ overlay: true });
+                    }
+
+                    // Determine style based on theme
+                    // If theme is dark => Use Dark style (usually white text)
+                    // If theme is light => Use Light style (usually dark text)
+                    const style = resolvedTheme === 'dark' ? Style.Dark : Style.Light;
+
+                    await StatusBar.setStyle({ style });
+                } catch (e) {
+                    console.error('Failed to configure status bar:', e);
+                }
+            };
+
+            setStatusBarStyle();
+        }
+    }, [resolvedTheme]);
+};

k-notes-frontend/src/index.css

@@ -121,5 +121,9 @@
 
   body {
     @apply bg-background text-foreground;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
   }
 }