feat: improve PWA version visibility and updates

apps/web/@types/i18next.d.ts

@@ -1,12 +1,14 @@
 import "i18next";
 
+import profileMenu from "../lib/i18n/locales/en/profile_menu.json";
 import translation from "../lib/i18n/locales/en/translation.json";
 
 declare module "i18next" {
   // Extend CustomTypeOptions
   interface CustomTypeOptions {
     defaultNS: "translation";
     resources: {
+      profile_menu: typeof profileMenu;
       translation: typeof translation;
     };
   }

apps/web/components/dashboard/header/ProfileOptions.test.tsx

@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import ProfileOptions from "./ProfileOptions";
+
+const mocks = vi.hoisted(() => ({
+  push: vi.fn(),
+  toggleTheme: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+  useRouter: () => ({ push: mocks.push }),
+}));
+
+vi.mock("@/components/theme-provider", () => ({
+  useToggleTheme: () => mocks.toggleTheme,
+}));
+
+vi.mock("@teispace/next-themes", () => ({
+  useTheme: () => ({ theme: "light" }),
+}));
+
+vi.mock("@/lib/auth/client", () => ({
+  useSession: () => ({
+    data: {
+      user: {
+        email: "daffa@example.com",
+        name: "Daffa",
+        role: "user",
+      },
+    },
+  }),
+}));
+
+vi.mock("@karakeep/shared-react/hooks/users", () => ({
+  useWhoAmI: () => ({ data: { image: null } }),
+}));
+
+vi.mock("@/lib/i18n/client", () => ({
+  useTranslation: (namespace?: string) => ({
+    t: (key: string) => {
+      if (namespace === "profile_menu") {
+        const profileTranslations: Record<string, string> = {
+          apps_extensions: "Apps & extensions",
+          coming_soon: "Coming soon",
+          documentation: "Documentation",
+        };
+        return profileTranslations[key] ?? key;
+      }
+
+      const translations: Record<string, string> = {
+        "actions.sign_out": "Sign out",
+        "cleanups.cleanups": "Cleanups",
+        "options.dark_mode": "Dark mode",
+        "options.light_mode": "Light mode",
+        "settings.user_settings": "Settings",
+      };
+      return translations[key] ?? key;
+    },
+  }),
+}));
+
+vi.mock("../../admin/AdminNotices", () => ({
+  AdminNoticeBadge: () => null,
+}));
+
+vi.mock("@/components/shared/sidebar/SidebarVersion", () => ({
+  default: ({ placement }: { placement?: string }) => (
+    <div data-placement={placement} data-testid="sidebar-version" />
+  ),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children }: { children: React.ReactNode }) => (
+    <button type="button">{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/separator", () => ({
+  Separator: ({ className }: { className?: string }) => (
+    <div className={className} role="separator" />
+  ),
+}));
+
+vi.mock("@/components/ui/user-avatar", () => ({
+  UserAvatar: ({ name }: { name?: string | null }) => (
+    <div data-testid="user-avatar">{name}</div>
+  ),
+}));
+
+vi.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    disabled,
+  }: {
+    children: React.ReactNode;
+    disabled?: boolean;
+  }) => <div data-disabled={disabled ? "true" : "false"}>{children}</div>,
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+describe("ProfileOptions", () => {
+  beforeEach(() => {
+    mocks.push.mockReset();
+    mocks.toggleTheme.mockReset();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("replaces upstream actions with disabled Marka coming-soon features", () => {
+    const { container } = render(<ProfileOptions />);
+
+    expect(container.textContent).toContain("Apps & extensions");
+    expect(container.textContent).toContain("Documentation");
+    expect(container.textContent?.match(/Coming soon/g)?.length).toBe(2);
+
+    const hrefs = [...container.querySelectorAll("a")].map((link) =>
+      link.getAttribute("href"),
+    );
+    expect(hrefs).not.toContain("https://karakeep.app/apps");
+    expect(hrefs).not.toContain("https://docs.karakeep.app");
+    expect(hrefs).not.toContain("https://x.com/karakeep_app");
+    expect(container.textContent).not.toContain(
+      "Follow upstream Karakeep on X",
+    );
+
+    const disabledItems = container.querySelectorAll('[data-disabled="true"]');
+    expect(disabledItems).toHaveLength(2);
+  });
+
+  it("shows the shared build footer only in the mobile profile layout", () => {
+    render(<ProfileOptions />);
+
+    const version = screen.getByTestId("sidebar-version");
+    expect(version.getAttribute("data-placement")).toBe("profile");
+    expect(version.parentElement?.className).toContain("sm:hidden");
+  });
+});

apps/web/components/dashboard/header/ProfileOptions.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import Link from "next/link";
 import { redirect, useRouter } from "next/navigation";
+import SidebarVersion from "@/components/shared/sidebar/SidebarVersion";
 import { useToggleTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,7 +25,6 @@ import {
   Settings,
   Shield,
   Sun,
-  Twitter,
 } from "lucide-react";
 import { useTheme } from "@teispace/next-themes";
 
@@ -53,8 +53,31 @@ function DarkModeToggle() {
   }
 }
 
+function ComingSoonFeature({
+  icon,
+  label,
+  comingSoon,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  comingSoon: string;
+}) {
+  return (
+    <DropdownMenuItem disabled className="items-start">
+      <span className="mr-2 mt-0.5 shrink-0">{icon}</span>
+      <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
+        <span className="truncate">{label}</span>
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {comingSoon}
+        </span>
+      </div>
+    </DropdownMenuItem>
+  );
+}
+
 export default function SidebarProfileOptions() {
   const { t } = useTranslation();
+  const { t: tProfile } = useTranslation("profile_menu");
   const toggleTheme = useToggleTheme();
   const { data: session } = useSession();
   const { data: whoami } = useWhoAmI();
@@ -126,25 +149,21 @@ export default function SidebarProfileOptions() {
           <DarkModeToggle />
         </DropdownMenuItem>
         <Separator className="my-2" />
-        <DropdownMenuItem asChild>
-          <a href="https://karakeep.app/apps" target="_blank" rel="noreferrer">
-            <Puzzle className="mr-2 size-4" />
-            Upstream Karakeep apps and extensions
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <a href="https://docs.karakeep.app" target="_blank" rel="noreferrer">
-            <BookOpen className="mr-2 size-4" />
-            Upstream Karakeep documentation
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <a href="https://x.com/karakeep_app" target="_blank" rel="noreferrer">
-            <Twitter className="mr-2 size-4" />
-            Follow upstream Karakeep on X
-          </a>
-        </DropdownMenuItem>
+        <ComingSoonFeature
+          icon={<Puzzle className="size-4" />}
+          label={tProfile("apps_extensions")}
+          comingSoon={tProfile("coming_soon")}
+        />
+        <ComingSoonFeature
+          icon={<BookOpen className="size-4" />}
+          label={tProfile("documentation")}
+          comingSoon={tProfile("coming_soon")}
+        />
         <Separator className="my-2" />
+        <div className="sm:hidden">
+          <SidebarVersion placement="profile" />
+        </div>
+        <Separator className="my-2 sm:hidden" />
         <DropdownMenuItem onClick={() => router.push("/logout")}>
           <LogOut className="mr-2 size-4" />
           <span>{t("actions.sign_out")}</span>

apps/web/components/pwa/ServiceWorkerRegistration.readiness.test.tsx

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import ServiceWorkerRegistration, {
+  usePwaLifecycle,
+} from "./ServiceWorkerRegistration";
+
+const mocks = vi.hoisted(() => ({
+  register: vi.fn(),
+  getRegistration: vi.fn(),
+  fetch: vi.fn(),
+  messagePort: { postMessage: vi.fn() },
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+}));
+
+vi.mock("@/lib/auth/client", () => ({
+  useSession: () => ({
+    data: { user: { id: "user-1" } },
+    status: "authenticated",
+  }),
+}));
+
+function Probe() {
+  const { updateStatus } = usePwaLifecycle();
+  return <span data-testid="update-status">{updateStatus}</span>;
+}
+
+function installServiceWorkerMock() {
+  Object.defineProperty(navigator, "serviceWorker", {
+    configurable: true,
+    value: {
+      addEventListener: mocks.addEventListener,
+      controller: mocks.messagePort,
+      getRegistration: mocks.getRegistration,
+      register: mocks.register,
+      removeEventListener: mocks.removeEventListener,
+    },
+  });
+}
+
+describe("ServiceWorkerRegistration readiness", () => {
+  beforeEach(() => {
+    installServiceWorkerMock();
+    vi.stubGlobal("fetch", mocks.fetch);
+    mocks.getRegistration.mockResolvedValue(undefined);
+    mocks.fetch.mockResolvedValue(
+      new Response(JSON.stringify({ version: "bbbbbbb" }), {
+        headers: { "content-type": "application/json" },
+        status: 200,
+      }),
+    );
+    Object.defineProperty(document, "visibilityState", {
+      configurable: true,
+      value: "visible",
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    mocks.register.mockReset();
+    mocks.getRegistration.mockReset();
+    mocks.fetch.mockReset();
+    mocks.messagePort.postMessage.mockReset();
+    mocks.addEventListener.mockReset();
+    mocks.removeEventListener.mockReset();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("marks an update ready when installation finished before the state listener was attached", async () => {
+    const installedWorker = {
+      state: "installed",
+      onstatechange: null as (() => void) | null,
+      scriptURL: "https://karakeep.test/sw.js?v=bbbbbbb",
+    };
+    let waitingReads = 0;
+    const updateRegistration = {
+      active: mocks.messagePort,
+      installing: installedWorker,
+      get waiting() {
+        waitingReads += 1;
+        return waitingReads === 1 ? null : installedWorker;
+      },
+    };
+
+    mocks.register
+      .mockResolvedValueOnce({ active: mocks.messagePort })
+      .mockResolvedValueOnce(updateRegistration);
+
+    render(
+      <ServiceWorkerRegistration>
+        <Probe />
+      </ServiceWorkerRegistration>,
+    );
+
+    await waitFor(() => {
+      expect(mocks.register).toHaveBeenCalledWith("/sw.js?v=bbbbbbb", {
+        scope: "/",
+        updateViaCache: "none",
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("update-status").textContent).toBe("ready");
+    });
+  });
+});