افزودن نشان نسخه به پایین بخش کناری
یک حباب کوچک و شیشهای با فونت تکعرض در فوتر ستون کناری، کنار دکمهٔ خروج: - `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 { 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user