feat(frontend): Add comprehensive PWA capabilities with dynamic theme support

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/contexts/ThemeContext.tsx

@@ -10,6 +10,12 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
+// Theme colors for different modes
+const THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#0f0f23", // Dark background color that matches typical dark themes
+} as const;
+
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => {
     const stored = localStorage.getItem("theme") as Theme;
@@ -40,6 +46,28 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
       // Add resolved theme class
       root.classList.add(resolvedTheme);
+
+      // Update theme-color meta tags for PWA status bar
+      const themeColor = THEME_COLORS[resolvedTheme];
+      
+      // Update theme-color meta tag
+      const themeColorMeta = document.getElementById("theme-color-meta") as HTMLMetaElement;
+      if (themeColorMeta) {
+        themeColorMeta.content = themeColor;
+      }
+
+      // Update Microsoft tile color
+      const msThemeColorMeta = document.getElementById("ms-theme-color-meta") as HTMLMetaElement;
+      if (msThemeColorMeta) {
+        msThemeColorMeta.content = themeColor;
+      }
+
+      // Update Apple status bar style for better iOS integration
+      const appleStatusBarMeta = document.getElementById("apple-status-bar-meta") as HTMLMetaElement;
+      if (appleStatusBarMeta) {
+        // Use 'black-translucent' for dark theme, 'default' for light theme
+        appleStatusBarMeta.content = resolvedTheme === "dark" ? "black-translucent" : "default";
+      }
     };
 
     updateActualTheme();

frontend/src/hooks/usePWA.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+interface PWAUpdate {
+  updateAvailable: boolean;
+  updateSW: () => Promise<void>;
+}
+
+export function usePWA(): PWAUpdate {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [updateSW, setUpdateSW] = useState<() => Promise<void>>(() => async () => {});
+
+  useEffect(() => {
+    // Check if SW registration is available
+    if ("serviceWorker" in navigator) {
+      // Import the registerSW function
+      import("virtual:pwa-register").then(({ registerSW }) => {
+        const updateSWFunction = registerSW({
+          onNeedRefresh() {
+            setUpdateAvailable(true);
+            setUpdateSW(() => updateSWFunction);
+          },
+          onOfflineReady() {
+            console.log("App ready to work offline");
+          },
+        });
+      }).catch(() => {
+        // PWA not available in development mode or when disabled
+        console.log("PWA registration not available");
+      });
+    }
+  }, []);
+
+  return {
+    updateAvailable,
+    updateSW,
+  };
+}

frontend/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />