fix(dashboard): swap Analytics/Monitor tab order, shrink Sagi avatar size

Sagi avatar 90->68px, tab buttons render Analytics before Monitor.
This commit is contained in:
2026-08-26 08:39:57 +07:00
parent 2c1e163608
commit 64fc713440
4 changed files with 33 additions and 33 deletions
+1 -1
View File
@@ -76,7 +76,7 @@ if (typeof window !== "undefined") {
});
}
export function SagiAvatar({ mood, reducedMotion, size = 90 }: SagiAvatarProps) {
export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps) {
const rootRef = useRef<SVGSVGElement | null>(null);
const rafRef = useRef<number>();
const [pupil, setPupil] = useState({ x: 0, y: 0 });
@@ -74,7 +74,7 @@ import { sagiPrefs, type SagiPos } from "./prefs";
import type { PointerEvent as ReactPointerEvent } from "react";
// Avatar footprint + edge gap, in px. SIZE matches SagiAvatar's default size.
export const SAGI_SIZE = 90;
export const SAGI_SIZE = 68;
export const SAGI_MARGIN = 16;
const DRAG_THRESHOLD = 5;
+10 -10
View File
@@ -2554,16 +2554,6 @@ export function Dashboard() {
<div className="flex items-center gap-3">
{/* Tabs */}
<div className="flex bg-surface-2 rounded-lg p-0.5 border border-border">
<button
onClick={() => setActiveTab("monitor")}
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
activeTab === "monitor"
? "bg-accent/15 text-accent shadow-sm"
: "text-fg-muted hover:text-fg-secondary"
}`}
>
<Activity className="w-3.5 h-3.5" /> Monitor
</button>
<button
onClick={() => setActiveTab("analytics")}
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
@@ -2574,6 +2564,16 @@ export function Dashboard() {
>
<BarChart3 className="w-3.5 h-3.5" /> Analytics
</button>
<button
onClick={() => setActiveTab("monitor")}
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
activeTab === "monitor"
? "bg-accent/15 text-accent shadow-sm"
: "text-fg-muted hover:text-fg-secondary"
}`}
>
<Activity className="w-3.5 h-3.5" /> Monitor
</button>
<button
onClick={() => setActiveTab("health")}
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 ${
@@ -2557,27 +2557,6 @@ exports[`screen snapshots > Dashboard 1`] = `
<div
class="flex bg-surface-2 rounded-lg p-0.5 border border-border"
>
<button
class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
>
<svg
class="lucide lucide-activity w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
/>
</svg>
Monitor
</button>
<button
class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 bg-accent/15 text-accent shadow-sm"
>
@@ -2608,6 +2587,27 @@ exports[`screen snapshots > Dashboard 1`] = `
</svg>
Analytics
</button>
<button
class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
>
<svg
class="lucide lucide-activity w-3.5 h-3.5"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
/>
</svg>
Monitor
</button>
<button
class="px-2.5 py-1.5 rounded-md text-xs font-medium transition-all flex items-center gap-2 text-fg-muted hover:text-fg-secondary"
>