افزودن نشان نسخه به پایین بخش کناری

یک حباب کوچک و شیشه‌ای با فونت تک‌عرض در فوتر ستون کناری، کنار دکمهٔ خروج:

- `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:
mjalmoudy94
2026-10-13 08:35:29 +03:30
parent 3d1e98f4fb
commit 0fd50d94fc
3 changed files with 117 additions and 3 deletions
+35 -3
View File
@@ -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 (
<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. */
function CreditBadge({ organizationId }: { organizationId: string | undefined }) {
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">
<p className="truncate text-xs text-slate-400">{user?.email}</p>
<Button variant="ghost" size="sm" className="mt-2 w-full" onClick={handleLogout}>
خروج
</Button>
<div className="mt-2 flex items-center gap-2">
<Button variant="ghost" size="sm" className="flex-1" onClick={handleLogout}>
خروج
</Button>
<VersionBadge />
</div>
</div>
</aside>