L7 Offline & PWA: submitOp über Outbox, Foto/Sprachnotiz über Upload-Warteschlange, Entwürfe in IndexedDB

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/(field)/m/(core)/profile/page.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
-import { LogOut } from "lucide-react";
 import { auth, signOut } from "@/server/auth";
 import { prisma } from "@/server/db";
 import { can } from "@/server/services/context";
@@ -8,6 +7,8 @@ import { activeTeamIds } from "@/server/services/work-orders/visibility";
 import { fieldPageContext } from "@/server/services/field/page-context";
 import { UiLocaleSwitcher } from "@/components/ui-locale-switcher";
 import { btnSecondary, card } from "@/components/field/ui";
+import { InstallHint } from "@/components/offline/install-hint";
+import { LogoutForm } from "@/components/offline/logout-form";
 
 /** `/m/profile` — name, team, company, language, sign out. */
 export default async function ProfilePage() {
@@ -62,12 +63,9 @@ export default async function ProfilePage() {
           {t("backoffice")}
         </Link>
       )}
-      <form action={logout}>
-        <button type="submit" className={btnSecondary}>
-          <LogOut className="size-5" aria-hidden />
-          {t("logout")}
-        </button>
-      </form>
+      <InstallHint />
+      {/* L7: deletes the local offline data of this tenant/user first (warning if unsent entries exist) */}
+      <LogoutForm action={logout} label={t("logout")} />
     </main>
   );
 }

src/app/(field)/m/layout.tsx

@@ -5,6 +5,7 @@ import { CraftviaLogo } from "@/components/brand/craftvia-logo";
 import { AccountInactiveNotice } from "@/components/account-inactive-notice";
 import { BottomNav } from "@/components/field/bottom-nav";
 import { OnlineBadge } from "@/components/field/online-badge";
+import { OfflineRuntime } from "@/components/offline/offline-runtime";
 
 /**
  * Mobile shell `/m` (ARCHITEKTUR §5): same session/account/MFA checks as the backoffice
@@ -24,6 +25,7 @@ export default async function FieldShell({ children }: Readonly<{ children: Reac
         </Link>
         <div className="flex items-center gap-2">
           {/* Slot für L6: <NotificationBell variant="mobile" /> aus src/components/notifications/bell.tsx */}
+          <OfflineRuntime />
           <OnlineBadge />
         </div>
       </header>