افزودن نشان نسخه به پایین بخش کناری
یک حباب کوچک و شیشهای با فونت تکعرض در فوتر ستون کناری، کنار دکمهٔ خروج: - `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` یکی باشد. تستهای جدید: ۵ (نسخه و نشان نسخه در پوسته).
This commit is contained in:
@@ -7,8 +7,37 @@ import { Badge, Button, cx } from "@agy/ui";
|
|||||||
import { api } from "@/lib/api";
|
import { api } from "@/lib/api";
|
||||||
import { CommandPalette } from "@/components/CommandPalette";
|
import { CommandPalette } from "@/components/CommandPalette";
|
||||||
import { NAV_ITEMS } from "@/lib/nav";
|
import { NAV_ITEMS } from "@/lib/nav";
|
||||||
|
import { APP_VERSION_LABEL } from "@/lib/version";
|
||||||
import { useSession } from "@/lib/session";
|
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 (
|
||||||
|
<span
|
||||||
|
title={`نسخهٔ ${APP_VERSION_LABEL}`}
|
||||||
|
className="ltr-inline shrink-0 rounded-md border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[10px] leading-none tabular-nums text-slate-400 backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
{APP_VERSION_LABEL}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/** Credit badge — reads the organization's real balance, never a placeholder. */
|
/** Credit badge — reads the organization's real balance, never a placeholder. */
|
||||||
function CreditBadge({ organizationId }: { organizationId: string | undefined }) {
|
function CreditBadge({ organizationId }: { organizationId: string | undefined }) {
|
||||||
const [balance, setBalance] = React.useState<number | null>(null);
|
const [balance, setBalance] = React.useState<number | null>(null);
|
||||||
@@ -107,9 +136,12 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
|||||||
|
|
||||||
<div className="border-t border-surface-border p-3">
|
<div className="border-t border-surface-border p-3">
|
||||||
<p className="truncate text-xs text-slate-400">{user?.email}</p>
|
<p className="truncate text-xs text-slate-400">{user?.email}</p>
|
||||||
<Button variant="ghost" size="sm" className="mt-2 w-full" onClick={handleLogout}>
|
<div className="mt-2 flex items-center gap-2">
|
||||||
|
<Button variant="ghost" size="sm" className="flex-1" onClick={handleLogout}>
|
||||||
خروج
|
خروج
|
||||||
</Button>
|
</Button>
|
||||||
|
<VersionBadge />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
@@ -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}`;
|
||||||
@@ -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(<AppShell><p>بدنه</p></AppShell>);
|
||||||
|
expect(screen.getByText(APP_VERSION_LABEL)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("sets the direction explicitly so the RTL shell cannot reorder it", () => {
|
||||||
|
render(<AppShell><p>بدنه</p></AppShell>);
|
||||||
|
const badge = screen.getByText(APP_VERSION_LABEL);
|
||||||
|
expect(badge.className).toContain("ltr-inline");
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user