From 0fd50d94fc93d97aa43aa3b1ea83912f0df49f47 Mon Sep 17 00:00:00 2001 From: mjalmoudy94 Date: Tue, 13 Oct 2026 08:31:13 +0330 Subject: [PATCH] =?UTF-8?q?=D8=A7=D9=81=D8=B2=D9=88=D8=AF=D9=86=20=D9=86?= =?UTF-8?q?=D8=B4=D8=A7=D9=86=20=D9=86=D8=B3=D8=AE=D9=87=20=D8=A8=D9=87=20?= =?UTF-8?q?=D9=BE=D8=A7=DB=8C=DB=8C=D9=86=20=D8=A8=D8=AE=D8=B4=20=DA=A9?= =?UTF-8?q?=D9=86=D8=A7=D8=B1=DB=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit یک حباب کوچک و شیشه‌ای با فونت تک‌عرض در فوتر ستون کناری، کنار دکمهٔ خروج: - `font-mono` — پشتهٔ فونت‌های سیستمی (ui-monospace، SFMono، Menlo، Consolas) که همیشه نصب‌اند؛ پس نسخه روی هر دستگاه یکسان رندر می‌شود، بدون انتظار برای وب‌فونت، و رقم‌ها جابه‌جا نمی‌شوند. - شیشه‌ای با translucent و blur: `bg-white/5` + `border-white/10` + `backdrop-blur-sm`. بدون gradient و بدون shadow، مطابق §12 پلن. - `ltr-inline` تا الگوریتم bidi در پوستهٔ RTL رشتهٔ لاتین را جابه‌جا نکند، و `tabular-nums` تا عرض numeralها ثابت بماند. نسخه از `src/lib/version.ts` می‌آید — به‌جای import کردن کل `package.json` که کل manifest را برای یک رشته به باندل کلاینت می‌کشید. هزینهٔ این انتخاب drift است، پس `version.test.tsx` می‌سنجد که با `apps/web/package.json` یکی باشد. تست‌های جدید: ۵ (نسخه و نشان نسخه در پوسته). --- apps/web/src/components/AppShell.tsx | 38 +++++++++++++++-- apps/web/src/lib/version.ts | 18 ++++++++ apps/web/src/test/version.test.tsx | 64 ++++++++++++++++++++++++++++ 3 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 apps/web/src/lib/version.ts create mode 100644 apps/web/src/test/version.test.tsx diff --git a/apps/web/src/components/AppShell.tsx b/apps/web/src/components/AppShell.tsx index 344bd4f..1d7d32b 100644 --- a/apps/web/src/components/AppShell.tsx +++ b/apps/web/src/components/AppShell.tsx @@ -7,8 +7,37 @@ import { Badge, Button, cx } from "@agy/ui"; import { api } from "@/lib/api"; import { CommandPalette } from "@/components/CommandPalette"; import { NAV_ITEMS } from "@/lib/nav"; +import { APP_VERSION_LABEL } from "@/lib/version"; import { useSession } from "@/lib/session"; +/** + * The build version, bottom-left of the sidebar footer. + * + * `font-mono` on purpose: a version is the one string in this RTL shell that + * must never reflow, and Tailwind's mono stack (`ui-monospace`, `SFMono`, + * `Menlo`, `Consolas`, …) is made of system faces that are always installed. + * So it renders identically on every machine without waiting on a webfont — + * and digits never shift width while a page loads. + * + * Glass comes from translucency plus blur only. PLAN §12 bans gradients and + * drop shadows, so depth here is `bg-white/5` over the footer with a hairline + * `border-white/10` and `backdrop-blur-sm` — no shadow, no gradient. + * + * `ltr-inline` keeps the Latin string from being reordered by the RTL + * bidi algorithm, and `tabular-nums` stops the digits from jittering if the + * label is ever swapped live. + */ +function VersionBadge() { + return ( + + {APP_VERSION_LABEL} + + ); +} + /** Credit badge — reads the organization's real balance, never a placeholder. */ function CreditBadge({ organizationId }: { organizationId: string | undefined }) { const [balance, setBalance] = React.useState(null); @@ -107,9 +136,12 @@ export function AppShell({ children }: { children: React.ReactNode }) {

{user?.email}

- +
+ + +
diff --git a/apps/web/src/lib/version.ts b/apps/web/src/lib/version.ts new file mode 100644 index 0000000..a3a64e5 --- /dev/null +++ b/apps/web/src/lib/version.ts @@ -0,0 +1,18 @@ +/** + * The build version shown in the sidebar footer. + * + * Kept as a literal rather than imported from `package.json`: the value has to + * reach the client bundle, and a whole-JSON import either drags the entire + * manifest — every dependency range included — into it for one string, or + * breaks outright under a bundler that will not tree-shake named exports out + * of JSON. + * + * The trade-off is that this can drift from the manifest, so + * `src/test/version.test.ts` asserts the two agree. That turns a silent + * "the app is on the wrong version" bug into a failing test, which is the + * whole point of keeping them separate. + */ +export const APP_VERSION = "0.1.0"; + +/** What the footer pill renders — ``v`` prefix keeps it unambiguous in the UI. */ +export const APP_VERSION_LABEL = `v${APP_VERSION}`; diff --git a/apps/web/src/test/version.test.tsx b/apps/web/src/test/version.test.tsx new file mode 100644 index 0000000..9747101 --- /dev/null +++ b/apps/web/src/test/version.test.tsx @@ -0,0 +1,64 @@ +import { readFileSync } from "node:fs"; +import { join } from "node:path"; +import { describe, expect, it, vi } from "vitest"; +import { render, screen } from "@testing-library/react"; +import { AppShell } from "@/components/AppShell"; +import { APP_VERSION, APP_VERSION_LABEL } from "@/lib/version"; + +/** + * `APP_VERSION` is a literal rather than a `package.json` import, because a + * whole-JSON import drags the manifest into the client bundle for one string. + * The cost of that choice is drift, so these tests pay it off: if someone + * bumps the manifest and forgets the literal, the UI would quietly claim the + * wrong build — which is exactly the bug a version badge exists to prevent. + */ + +vi.mock("next/navigation", () => ({ + useRouter: () => ({ push: vi.fn(), replace: vi.fn() }), + usePathname: () => "/dashboard", +})); + +vi.mock("@/lib/session", () => ({ + useSession: () => ({ + ready: true, + token: "token", + user: { email: "owner@example.com", name: "مالک", is_platform_owner: false }, + organizations: [], + activeOrganization: null, + setActiveOrganization: vi.fn(), + logout: vi.fn(), + }), +})); + +const manifest = JSON.parse( + readFileSync(join(process.cwd(), "package.json"), "utf-8"), +) as { version: string }; + +describe("app version", () => { + it("matches the version in apps/web/package.json", () => { + expect(APP_VERSION).toBe(manifest.version); + }); + + it("renders with a v prefix so it reads as a version in the UI", () => { + expect(APP_VERSION_LABEL).toBe(`v${APP_VERSION}`); + }); + + it("is a plain semver triple with no pre-release or build metadata", () => { + // The pill is ~40px wide and offers no truncation affordance; anything + // longer than x.y.z would overflow the footer next to the logout button. + expect(APP_VERSION).toMatch(/^\d+\.\d+\.\d+$/); + }); +}); + +describe("sidebar version badge", () => { + it("shows the version in the shell footer", () => { + render(

بدنه

); + expect(screen.getByText(APP_VERSION_LABEL)).toBeInTheDocument(); + }); + + it("sets the direction explicitly so the RTL shell cannot reorder it", () => { + render(

بدنه

); + const badge = screen.getByText(APP_VERSION_LABEL); + expect(badge.className).toContain("ltr-inline"); + }); +});