AI Changes: offline handling, fullscreen handling

.gitea/workflows/build-docker.yaml

@@ -2,8 +2,6 @@ name: Build dev docker image
 
 on:
   push:
-    branches:
-      - main
     tags:
       - '*'
   workflow_dispatch:
@@ -84,6 +82,6 @@ jobs:
         tag_name: ${{ gitea.ref_name }}
         name: ${{ gitea.ref_name }}
         body: |
-          "## Docker images"
-          "`gitea.furb.it/${{ gitea.repository }}:${{ gitea.ref_name }}`"
-          "`gitea.furb.it/${{ gitea.repository }}:latest`"
+          ## Docker images
+          `gitea.furb.it/${{ gitea.repository }}:${{ gitea.ref_name }}`
+          `gitea.furb.it/${{ gitea.repository }}:latest`

.gitea/workflows/test-build.yaml

@@ -0,0 +1,35 @@
+name: Build dev docker image
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+
+      # Checkout repository for build
+      - name: Checkout beer-inventory repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ gitea.ref }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      # Install NPM packages
+      - name: Install NPM packages
+        run: npm ci
+
+      # Build project
+      - name: Build project
+        run: |
+          npx zenstack generate
+          npx remix vite:build

app/root.tsx

@@ -8,7 +8,7 @@ import {
   isRouteErrorResponse,
   useRouteError
 } from "@remix-run/react";
-import type { PropsWithChildren } from "react";
+import React, { useEffect, useState, type PropsWithChildren } from "react";
 
 import stylesheet from "bootstrap/dist/css/bootstrap.min.css?url";
 
@@ -53,6 +53,45 @@ export default function App() {
 export function ErrorBoundary() {
   const error = useRouteError();
 
+  const [isOnline, setIsOnline] = useState<boolean>(
+    typeof navigator !== "undefined" ? navigator.onLine : true
+  );
+
+  const tryRefresh = async () => {
+    if (typeof window === "undefined") return;
+    try {
+      const res = await fetch(window.location.href, { method: "GET", cache: "no-store" });
+      if (res && res.ok) {
+        window.location.reload();
+      }
+    } catch (e) {
+      // network still down; ignore, we'll retry on the next interval or when online
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleOnline = () => {
+      setIsOnline(true);
+      tryRefresh();
+    };
+    const handleOffline = () => setIsOnline(false);
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    const hourly = window.setInterval(() => {
+      tryRefresh();
+    }, 60 * 60 * 1000);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+      window.clearInterval(hourly);
+    };
+  }, []);
+
   if (isRouteErrorResponse(error)) {
     return (
       <Document 
@@ -64,6 +103,25 @@ export function ErrorBoundary() {
                 <div className="h-100 p-5 text-bg-dark rounded-3">
                     <h1>{error.status}</h1>
                     {error.statusText}
+                    <div className="mt-3">
+                      <button
+                        className="btn btn-primary me-2"
+                        onClick={() => {
+                          if (typeof window !== "undefined") window.location.reload();
+                        }}
+                      >
+                        Reload page
+                      </button>
+                      <button
+                        className="btn btn-outline-secondary"
+                        onClick={() => {
+                          tryRefresh();
+                        }}
+                      >
+                        Try refresh now
+                      </button>
+                      <div className="mt-2">Status: {isOnline ? "Online" : "Offline"}. Will retry automatically every hour.</div>
+                    </div>
                 </div>
             </Col>
           </Row>
@@ -84,6 +142,25 @@ export function ErrorBoundary() {
                 <div className="h-100 p-5 text-bg-dark rounded-3">
                     <h1>App Error</h1>
                     {errorMessage}
+                    <div className="mt-3">
+                      <button
+                        className="btn btn-primary me-2"
+                        onClick={() => {
+                          if (typeof window !== "undefined") window.location.reload();
+                        }}
+                      >
+                        Reload page
+                      </button>
+                      <button
+                        className="btn btn-outline-secondary"
+                        onClick={() => {
+                          tryRefresh();
+                        }}
+                      >
+                        Try refresh now
+                      </button>
+                      <div className="mt-2">Status: {isOnline ? "Online" : "Offline"}. Will retry automatically every hour.</div>
+                    </div>
                 </div>
             </Col>
           </Row>

app/routes/scan/route.tsx

@@ -65,6 +65,7 @@ export async function action({
 export default function ScanRoute() {
     const aData = useActionData<typeof action>();
     const lData = useLoaderData<typeof loader>();
+    const fullscreenBtnRef = useRef<HTMLButtonElement | null>(null);
 
     const [lastScanned, setLastScanned] = useState<{name:string;image:string|null} | null>(null);
     const [showLastScanned, setShowLastScanned] = useState(false);
@@ -76,6 +77,19 @@ export default function ScanRoute() {
       window.setTimeout(() => inputRef.current?.focus(), 0);
     };
 
+    const toggleFullscreen = async () => {
+      if (typeof document === "undefined") return;
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        } else {
+          await document.documentElement.requestFullscreen();
+        }
+      } catch (e) {
+        // ignore errors (user gesture required in some contexts)
+      }
+    };
+
     useEffect(() => {
       focusInput();
     }, []);
@@ -116,8 +130,8 @@ export default function ScanRoute() {
       <Container fluid className="mt-3">
           <Row>
             <Col xs={12} md={6} className="mb-3">
-              <h3>History</h3>
-              <div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+              <h3 onClick={() => fullscreenBtnRef.current?.click()} style={{cursor: 'pointer'}}>History</h3>
+              <div>
                 <Table striped size="sm">
                   <thead>
                     <tr>
@@ -139,9 +153,16 @@ export default function ScanRoute() {
               </div>
             </Col>
             <Col xs={12} md={6}>
-              <h3>Scan Barcode</h3>
+              <h3 onClick={() => fullscreenBtnRef.current?.click()} style={{cursor: 'pointer'}}>Scan Barcode</h3>
               <Row className="mb-3">
                 <Col>
+                  {/* Hidden fullscreen toggle button - triggered by clicking the h3 headers */}
+                  <button
+                    ref={fullscreenBtnRef}
+                    onClick={toggleFullscreen}
+                    style={{ display: 'none' }}
+                    aria-hidden="true"
+                  />
                   <Form method="post" action="/scan?index" noValidate>
                     <Form.Group>
                       <Form.Control