feat: improve PWA version visibility and updates

.github/workflows/pwa-tdd.yml

@@ -0,0 +1,46 @@
+name: PWA TDD
+
+on:
+  pull_request:
+    branches: ["*"]
+    paths:
+      - "apps/web/components/pwa/**"
+      - "apps/web/components/shared/sidebar/SidebarVersion*"
+      - "apps/web/components/dashboard/header/ProfileOptions*"
+      - "apps/web/public/sw.js"
+      - "apps/web/lib/i18n/**"
+      - ".github/workflows/pwa-tdd.yml"
+
+jobs:
+  focused-web-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+
+      - name: Setup
+        uses: ./tooling/github/setup
+
+      - name: Focused PWA tests
+        run: >-
+          pnpm --filter @karakeep/web test --run
+          components/pwa/ServiceWorkerRegistration.test.tsx
+          components/pwa/sw.test.ts
+          components/shared/sidebar/SidebarVersion.test.tsx
+          components/dashboard/header/ProfileOptions.test.tsx
+
+      - name: Full web tests
+        run: pnpm --filter @karakeep/web test --run
+
+      - name: React Doctor diagnostics
+        if: always()
+        run: |
+          pnpm exec react-doctor --project @karakeep/web --scope full --blocking none --json > /tmp/react-doctor.json || true
+          cat /tmp/react-doctor.json
+
+      - name: Format diagnostics
+        if: always()
+        run: |
+          pnpm --filter @karakeep/web format:fix
+          git diff -- apps/web/components/dashboard/header/ProfileOptions.test.tsx apps/web/components/pwa/ServiceWorkerRegistration.tsx

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>