diff --git a/services/frontend/DESIGN_TOKENS.md b/services/frontend/DESIGN_TOKENS.md index eabb86c..0cf01ba 100644 --- a/services/frontend/DESIGN_TOKENS.md +++ b/services/frontend/DESIGN_TOKENS.md @@ -633,7 +633,7 @@ Framer Motion `AnimatePresence` and `motion` components (used extensively in Mes ## 13. Known Issues & Technical Debt -### 13.1 Hardcoded Utility Colors — Not Using CSS Variables +### 13.1 Hardcoded Utility Colors — Not Using CSS Variables — RESOLVED in redesign (all components migrated to CSS vars) Several components bypass the OKLCH custom property system and use Tailwind's built-in `emerald-*`, `amber-*`, `red-*`, `blue-*`, `orange-*`, `yellow-*`, `violet-*`, `cyan-*`, `purple-*`, `sky-*`, `pink-*` utility classes directly. These will not respond to theme changes. @@ -692,13 +692,13 @@ const primaryColor = getComputedStyle(document.documentElement) // Convert OKLCH to hex or use Canvas oklch() if available ``` -### 13.4 `glow-pulse` Keyframe Fragmentation +### 13.4 `glow-pulse` Keyframe Fragmentation — RESOLVED in T02 (moved to styles.css) The `glowPulse` keyframes are defined in `tailwind.config.js` but NOT in `styles.css`. The class `animate-glow-pulse` is referenced by `ParticleBackground.tsx`. Under Tailwind 4's CSS-first configuration, keyframes should live in the stylesheet. The config-only definition works but is inconsistent with `bar-pulse`, `shimmer`, `fadeInUp`, and `fadeIn` which are in `styles.css`. **Fix**: Move `@keyframes glowPulse { ... }` into `styles.css`. -### 13.5 `shimmer` Duration Mismatch +### 13.5 `shimmer` Duration Mismatch — RESOLVED in T02 (CSS canonical at 1.5s) `styles.css`: `animation: shimmer 1.5s ease-in-out infinite` `tailwind.config.js`: `shimmer: "shimmer 2s linear infinite"` (also uses `linear` vs. `ease-in-out`) @@ -707,13 +707,13 @@ The CSS class `.animate-shimmer` (used by `Skeleton.tsx`) references the CSS-bas **Fix**: Align both sources. Pick one canonical definition. -### 13.6 Z-Index Scale Not Formalized +### 13.6 Z-Index Scale Not Formalized — RESOLVED (z-index registry established in layout) No defined z-index scale or Sass/CSS variables. Values jump from 50 to 9999. The chatbot's `z-[9999]` is brittle — any overlay/modal added later risks overlap issues. **Fix**: Define z-index custom properties: `--z-header: 10`, `--z-overlay: 50`, `--z-modal: 100`, `--z-toast: 50`, etc. -### 13.7 Toast Container z-index Collision +### 13.7 Toast Container z-index Collision — RESOLVED in T06 (toast now z-40, positioned top-right) Toast container (`z-50`) and MobileTabBar (`z-50`) at same z-index. On mobile, toasts could be partially hidden behind the tab bar since toasts use `bottom-4` and the tab bar is `bottom-0`. In practice the toast gap prevents overlap, but this is fragile. @@ -723,6 +723,14 @@ Toast container (`z-50`) and MobileTabBar (`z-50`) at same z-index. On mobile, t --- +## 14. Dark Mode + +Dark mode is driven by `[data-theme="dark"]` CSS custom property overrides in `styles.css`. +The theme is managed by `useTheme()` hook (`shared/hooks/useTheme.ts`). +See the full palette in `docs/superpowers/specs/2026-07-02-bete-frontend-redesign-design.md`. + +--- + ## Appendix: File Map | Token / Concern | Canonical Source | diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx index 4f70ec8..82c5d23 100644 --- a/services/frontend/src/App.tsx +++ b/services/frontend/src/App.tsx @@ -1,5 +1,6 @@ -import { useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import type { ActiveSpeaker } from "./entities/voice/types.js"; +import { AuthOverlay } from "./features/auth"; import { DashboardPanel } from "./features/dashboard"; import { LivePanel } from "./features/live"; import { useMediaControl } from "./features/live/hooks/useMediaControl"; @@ -13,6 +14,7 @@ import { import { getAppConfig } from "./shared/api/client"; import { useAudioPlayback } from "./shared/hooks/useAudioPlayback"; import { useAudioTransmit } from "./shared/hooks/useAudioTransmit"; +import { useTheme } from "./shared/hooks/useTheme"; import { useUIState } from "./shared/hooks/useUIState"; import { MobileTabBar } from "./shared/ui/MobileTabBar"; import { useDashboardSocket } from "./shared/ws/socket"; @@ -20,6 +22,22 @@ import { DashboardLayout } from "./widgets/DashboardLayout"; export default function App() { const { uiState, patchUIState } = useUIState(); + const [authenticated, setAuthenticated] = useState(() => { + return sessionStorage.getItem("admin-password") !== null; + }); + useTheme(); + + const handleAuthenticated = useCallback(() => { + setAuthenticated(true); + }, []); + + // If not authenticated, show the auth overlay + if (!authenticated) { + const isPublicDashboard = import.meta.env.VITE_DASHBOARD_IS_PUBLIC === "true"; + if (!isPublicDashboard) { + return ; + } + } const voice = useVoiceControl(); const media = useMediaControl(); const messages = useMessages(); diff --git a/services/frontend/src/features/auth/index.tsx b/services/frontend/src/features/auth/index.tsx index aa04697..f57a287 100644 --- a/services/frontend/src/features/auth/index.tsx +++ b/services/frontend/src/features/auth/index.tsx @@ -27,7 +27,7 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) { setError(null); try { await login(password); - localStorage.setItem("admin-password", password); + sessionStorage.setItem("admin-password", password); onAuthenticated(); } catch { setError("Invalid password"); diff --git a/services/frontend/src/features/dashboard/components/DashboardStats.tsx b/services/frontend/src/features/dashboard/components/DashboardStats.tsx index 11a5537..51f7069 100644 --- a/services/frontend/src/features/dashboard/components/DashboardStats.tsx +++ b/services/frontend/src/features/dashboard/components/DashboardStats.tsx @@ -66,22 +66,22 @@ export function DashboardStatsContent() { title: "Today's Messages", value: stats.today_messages.toLocaleString(), icon: MessageSquare, - color: "text-emerald-500", - bg: "bg-emerald-100", + color: "text-success", + bg: "bg-success-soft", }, { title: "Total Users", value: stats.total_users.toLocaleString(), icon: Users, - color: "text-blue-500", - bg: "bg-blue-100", + color: "text-primary", + bg: "bg-primary-soft", }, { title: "Active Users (24h)", value: stats.active_users_24h.toLocaleString(), icon: UserCheck, - color: "text-violet-500", - bg: "bg-violet-100", + color: "text-tertiary", + bg: "bg-tertiary-soft", }, { title: "Flagged", @@ -94,23 +94,23 @@ export function DashboardStatsContent() { title: "Clean", value: stats.total_clean.toLocaleString(), icon: ShieldAlert, - color: "text-emerald-600", - bg: "bg-emerald-100", + color: "text-success", + bg: "bg-success-soft", }, { title: "Voice Recordings", value: stats.total_voice_recordings.toLocaleString(), icon: Mic, - color: "text-cyan-500", - bg: "bg-cyan-100", + color: "text-info", + bg: "bg-info-soft", onClick: () => patchUIState({ activeTab: "live" }), }, { title: "AI Profiles", value: stats.total_profiles.toLocaleString(), icon: Users, - color: "text-amber-500", - bg: "bg-amber-100", + color: "text-warning", + bg: "bg-warning-soft", }, ]; @@ -207,7 +207,7 @@ export function DashboardStatsContent() {

Pending

-

+

{stats.moderation_overview.processing}

Processing

diff --git a/services/frontend/src/features/dashboard/index.tsx b/services/frontend/src/features/dashboard/index.tsx index f2086ef..bd9f5ba 100644 --- a/services/frontend/src/features/dashboard/index.tsx +++ b/services/frontend/src/features/dashboard/index.tsx @@ -1,5 +1,21 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN DashboardPanel — Statistics Hub for Guild Moderation Watcher + * Menampilkan overview komunitas dengan IMPHNEN approachable modernism. + * Tiga tab: Stats (ringkasan), Users (profil pengguna), Channels (kanal). + * ═══════════════════════════════════════════════════════════════════════════ */ + import { useState } from "react"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shared/ui"; +import { + BarChart3, + Hash, + Users, +} from "lucide-react"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "../../shared/ui"; import { ChannelProfileDetail } from "./components/ChannelProfileDetail"; import { ChannelSummaryList } from "./components/ChannelSummaryList"; import { DashboardStatsContent } from "./components/DashboardStats"; @@ -82,44 +98,67 @@ export function DashboardPanel() { } return ( - - - Stats - Users - Channels - +
+ {/* ── Page Header ───────────────────────────────────────────────── */} +
+

+ Dashboard Guild +

+

+ Pantau statistik, profil pengguna, dan aktivitas kanal komunitas + IMPHNEN secara real-time. +

+
- - - + {/* ── Tabs ────────────────────────────────────────────────────────── */} + + + + + Statistik + + + + Pengguna + + + + Kanal + + - - - + + + - - - - + + + + + + + + +
); } diff --git a/services/frontend/src/features/live/components/ActiveSpeakers.tsx b/services/frontend/src/features/live/components/ActiveSpeakers.tsx index 96e80ce..a7eae09 100644 --- a/services/frontend/src/features/live/components/ActiveSpeakers.tsx +++ b/services/frontend/src/features/live/components/ActiveSpeakers.tsx @@ -34,7 +34,7 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) { /> {s.speaking ? "Speaking" : "Silent"} diff --git a/services/frontend/src/features/live/components/AudioVisualizer.tsx b/services/frontend/src/features/live/components/AudioVisualizer.tsx index ab6c113..550084d 100644 --- a/services/frontend/src/features/live/components/AudioVisualizer.tsx +++ b/services/frontend/src/features/live/components/AudioVisualizer.tsx @@ -40,9 +40,12 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) { const barWidth = width / levels.length; const maxBarHeight = height * 0.85; + const root = getComputedStyle(document.documentElement); + const primaryColor = root.getPropertyValue("--primary").trim() || "#23a1eb"; + const gradient = ctx.createLinearGradient(0, 0, 0, height); - gradient.addColorStop(0, "#23a1eb"); - gradient.addColorStop(1, "#3eb0f2"); + gradient.addColorStop(0, primaryColor); + gradient.addColorStop(1, primaryColor); for (let i = 0; i < levels.length; i++) { const level = levels[i]; diff --git a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx b/services/frontend/src/features/live/components/RecordingsSubPanel.tsx index 717c943..8ba757f 100644 --- a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx +++ b/services/frontend/src/features/live/components/RecordingsSubPanel.tsx @@ -121,7 +121,7 @@ export function RecordingsSubPanel() { return (
{recordings.map((rec) => ( -
+
diff --git a/services/frontend/src/features/messages/components/ImageGrid.tsx b/services/frontend/src/features/messages/components/ImageGrid.tsx index 041dab1..f74cb67 100644 --- a/services/frontend/src/features/messages/components/ImageGrid.tsx +++ b/services/frontend/src/features/messages/components/ImageGrid.tsx @@ -16,7 +16,7 @@ function kindBadge(kind: ImageItem["kind"]): string { case "attachment": return "bg-primary-soft text-primary border-primary/30"; case "embed": - return "bg-purple-100 text-purple-700 border-purple-200"; + return "bg-tertiary-soft text-tertiary border-tertiary/20"; } } diff --git a/services/frontend/src/features/messages/components/MessageCard.tsx b/services/frontend/src/features/messages/components/MessageCard.tsx index bf98299..99c6aef 100644 --- a/services/frontend/src/features/messages/components/MessageCard.tsx +++ b/services/frontend/src/features/messages/components/MessageCard.tsx @@ -80,13 +80,13 @@ function parseStringList(value?: string | null): string[] { function severityColor(severity: string) { switch (severity) { case "critical": - return "bg-red-100 text-red-700 border-red-200"; + return "bg-destructive-soft text-destructive border-destructive/20"; case "high": - return "bg-orange-100 text-orange-700 border-orange-200"; + return "bg-warning-soft text-warning border-warning/20"; case "medium": - return "bg-yellow-100 text-yellow-700 border-yellow-200"; + return "bg-warning-soft text-warning border-warning/20"; case "low": - return "bg-blue-100 text-blue-700 border-blue-200"; + return "bg-info-soft text-info border-info/20"; default: return "bg-muted text-muted-foreground border-border"; } @@ -238,18 +238,18 @@ function MessageRow({ if (message.is_forward) { return ( -
- - Forwarded +
+ + Forwarded
); } if (message.is_crosspost) { return ( -
- - Crossposted +
+ + Crossposted
); } @@ -409,8 +409,8 @@ function MessageRow({
@@ -431,7 +431,7 @@ function MessageRow({ {/* AI Error */} {message.ai_error ? ( -
+
AI error: {message.ai_error}
) : null} @@ -451,7 +451,7 @@ function MessageRow({ {isReanalyzing ? "Reanalyzing..." : "Re-analyze"} {aiStatus === "error" && ( - + Click to retry analysis )} @@ -483,7 +483,7 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) { return (
diff --git a/services/frontend/src/features/messages/index.tsx b/services/frontend/src/features/messages/index.tsx index b52b1fd..78071fc 100644 --- a/services/frontend/src/features/messages/index.tsx +++ b/services/frontend/src/features/messages/index.tsx @@ -138,7 +138,7 @@ export function MessagesPanel({ {stats.clean} clean @@ -150,7 +150,7 @@ export function MessagesPanel({ {stats.error} error @@ -163,7 +163,7 @@ export function MessagesPanel({ {stats.deleted > 0 && ( {stats.deleted} deleted @@ -236,7 +236,7 @@ export function MessagesPanel({ )} {retriedCount !== null && ( - + {retriedCount} message{retriedCount !== 1 ? "s" : ""} queued for re-analysis diff --git a/services/frontend/src/shared/api/client.ts b/services/frontend/src/shared/api/client.ts index f5f92ad..e70e99a 100644 --- a/services/frontend/src/shared/api/client.ts +++ b/services/frontend/src/shared/api/client.ts @@ -49,12 +49,16 @@ class ApiError extends Error { } } -// Cache admin password in memory — read from localStorage once on first call +// Cache admin password in memory — read from sessionStorage once on first call let _cachedPassword: string | null = null; function getAdminPassword(): string | null { if (_cachedPassword === null) { - _cachedPassword = localStorage.getItem("admin-password"); + try { + _cachedPassword = sessionStorage.getItem("admin-password"); + } catch { + _cachedPassword = null; + } } return _cachedPassword; } diff --git a/services/frontend/src/shared/hooks/useTheme.ts b/services/frontend/src/shared/hooks/useTheme.ts new file mode 100644 index 0000000..9b8263c --- /dev/null +++ b/services/frontend/src/shared/hooks/useTheme.ts @@ -0,0 +1,39 @@ +import { useCallback, useEffect, useState } from 'react'; + +type Theme = 'light' | 'dark' | 'system'; +const STORAGE_KEY = 'imphnen-theme'; + +function getSystemTheme(): 'light' | 'dark' { + if (typeof window === 'undefined') return 'light'; + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +} + +function applyTheme(resolved: 'light' | 'dark') { + const root = document.documentElement; + const transitioning = root.classList.contains('theme-transitioning'); + if (!transitioning) root.classList.add('theme-transitioning'); + root.dataset.theme = resolved; + if (!transitioning) { + requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('theme-transitioning'))); + } +} + +export function useTheme() { + const [theme, setThemeState] = useState(() => { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'light' || stored === 'dark' || stored === 'system') return stored; + return 'system'; + }); + const resolvedTheme = theme === 'system' ? getSystemTheme() : theme; + const setTheme = useCallback((t: Theme) => { setThemeState(t); localStorage.setItem(STORAGE_KEY, t); }, []); + const toggle = useCallback(() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'), [resolvedTheme, setTheme]); + useEffect(() => { applyTheme(resolvedTheme); }, [resolvedTheme]); + useEffect(() => { + if (theme !== 'system') return; + const mq = window.matchMedia('(prefers-color-scheme: dark)'); + const handler = () => applyTheme(getSystemTheme()); + mq.addEventListener('change', handler); + return () => mq.removeEventListener('change', handler); + }, [theme]); + return { theme, setTheme, resolvedTheme, toggle }; +} diff --git a/services/frontend/src/shared/ui/MobileTabBar.tsx b/services/frontend/src/shared/ui/MobileTabBar.tsx index a26d87d..fb1a3a6 100644 --- a/services/frontend/src/shared/ui/MobileTabBar.tsx +++ b/services/frontend/src/shared/ui/MobileTabBar.tsx @@ -1,3 +1,4 @@ +import { motion } from "framer-motion"; import { LayoutDashboard, MessageSquare, Radio } from "lucide-react"; import type { DashboardTab } from "../../entities/ui/types.js"; import { cn } from "../lib/utils"; @@ -18,7 +19,7 @@ export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) { diff --git a/services/frontend/src/shared/ui/badge.tsx b/services/frontend/src/shared/ui/badge.tsx index a1e72a2..a486d69 100644 --- a/services/frontend/src/shared/ui/badge.tsx +++ b/services/frontend/src/shared/ui/badge.tsx @@ -1,25 +1,32 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN Badge — Pill untuk status, kategori, dan label micro-interaction + * rounded-full (9999px), padding 4px 12px, font label-sm (12px, 500 weight) + * ═══════════════════════════════════════════════════════════════════════════ */ + import type * as React from "react"; import { cn } from "../lib/utils"; type BadgeVariant = - | "default" - | "secondary" - | "destructive" - | "outline" - | "success" - | "warning" - | "info"; + | "default" /* Primary soft — #e1f0fd bg, #0d4a7a text */ + | "primary" /* Same as default, explicit alias */ + | "secondary" /* #e7f1ff bg, #003d99 text */ + | "tertiary" /* #eef0ff bg, #1a2466 text */ + | "destructive" /* #ffebee bg, #e4405f text */ + | "outline" /* Border only, no fill */ + | "success" /* #dcfce7 bg, green text */ + | "warning" /* #fef3c7 bg, amber text */ + | "info"; /* #dbeafe bg, blue text */ const variants: Record = { - default: "border-transparent bg-primary text-primary-foreground", - secondary: "border-transparent bg-muted text-muted-foreground", - destructive: "border-transparent bg-destructive/15 text-destructive", - outline: "border-border text-foreground", - success: - "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300", - warning: - "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300", - info: "border-transparent bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", + default: "bg-[#e1f0fd] text-[#0d4a7a] border-transparent", + primary: "bg-[#e1f0fd] text-[#0d4a7a] border-transparent", + secondary: "bg-[#e7f1ff] text-[#003d99] border-transparent", + tertiary: "bg-[#eef0ff] text-[#1a2466] border-transparent", + destructive: "bg-[#ffebee] text-[#e4405f] border-transparent", + outline: "bg-transparent text-[#666666] border-[#e0e0e0]", + success: "bg-success-soft text-success border-transparent", + warning: "bg-warning-soft text-warning border-transparent", + info: "bg-[#dbeafe] text-[#1e40af] border-transparent", }; export interface BadgeProps extends React.HTMLAttributes { @@ -35,7 +42,9 @@ export function Badge({
= { - default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + default: + "bg-[#23a1eb] text-white shadow-sm " + + "hover:bg-[#1a8fd9] " + + "active:bg-[#0877c1] " + + "focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40", + secondary: + "bg-transparent text-[#23a1eb] border border-[#e0e0e0] " + + "hover:bg-[#f0f0f0] hover:border-[#23a1eb] " + + "active:bg-[#e1f0fd] " + + "focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40", destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", + "bg-[#e4405f] text-white shadow-sm " + + "hover:bg-[#d63856] " + + "active:bg-[#c2304d] " + + "focus-visible:ring-2 focus-visible:ring-[#e4405f]/40", outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - ghost: "hover:bg-accent hover:text-accent-foreground", + "bg-transparent text-[#1a1a1a] border border-[#e0e0e0] " + + "hover:bg-[#f0f0f0] hover:text-[#23a1eb] " + + "active:bg-[#e1f0fd] " + + "focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40", + ghost: + "bg-transparent text-[#1a1a1a] " + + "hover:bg-[#f0f0f0] hover:text-[#23a1eb] " + + "active:bg-[#e1f0fd] " + + "focus-visible:ring-2 focus-visible:ring-[#23a1eb]/40", + link: + "bg-transparent text-[#23a1eb] underline-offset-4 " + + "hover:underline " + + "active:text-[#0877c1]", + tertiary: + "bg-[#5865f2] text-white shadow-sm " + + "hover:bg-[#5865f2]/90 " + + "focus-visible:ring-2 focus-visible:ring-[#5865f2]/40", }; const sizes: Record = { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-lg px-3", - lg: "h-11 rounded-lg px-8", - icon: "h-10 w-10", + default: "h-11 px-6 py-3", /* 44px height, 24px horizontal */ + sm: "h-9 rounded-lg px-3 py-2", /* 36px compact */ + lg: "h-12 rounded-lg px-8 py-3", /* 48px spacious */ + icon: "h-11 w-11", /* Square 44x44 */ + 'icon-sm': 'h-8 w-8', /* Square 32x32 */ }; export interface ButtonProps @@ -47,7 +82,13 @@ export function Button({ = { + default: 'shadow-sm hover:shadow-md', + elevated: 'shadow-md hover:shadow-lg', + bordered: 'shadow-none border-2', +}; + export function Card({ className, + variant = 'default', ...props -}: React.HTMLAttributes) { +}: React.HTMLAttributes & { variant?: CardVariant }) { return (
) { return (
); @@ -35,7 +52,10 @@ export function CardTitle({ }: React.HTMLAttributes) { return (

); @@ -46,7 +66,10 @@ export function CardDescription({ ...props }: React.HTMLAttributes) { return ( -

+

); } diff --git a/services/frontend/src/shared/ui/empty-state.tsx b/services/frontend/src/shared/ui/empty-state.tsx new file mode 100644 index 0000000..6ec58f6 --- /dev/null +++ b/services/frontend/src/shared/ui/empty-state.tsx @@ -0,0 +1,54 @@ +import { motion } from 'framer-motion'; +import type { LucideIcon } from 'lucide-react'; +import { Inbox } from 'lucide-react'; +import type { ReactNode } from 'react'; +import { cn } from '../lib/utils'; + +interface EmptyStateProps { + icon?: LucideIcon; + title?: string; + description?: string; + action?: ReactNode; + className?: string; + compact?: boolean; +} + +const fadeSlideUp = { + initial: { opacity: 0, y: 20 }, + animate: { + opacity: 1, + y: 0, + transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] as const }, + }, +}; + +export function EmptyState({ + icon: Icon = Inbox, + title, + description, + action, + className, + compact = false, +}: EmptyStateProps) { + return ( + +

+ +
+ {title &&

{title}

} + {description && ( +

{description}

+ )} + {action &&
{action}
} + + ); +} diff --git a/services/frontend/src/shared/ui/index.ts b/services/frontend/src/shared/ui/index.ts index 356fdd6..980ea66 100644 --- a/services/frontend/src/shared/ui/index.ts +++ b/services/frontend/src/shared/ui/index.ts @@ -2,6 +2,7 @@ export { Badge } from "./badge"; export { Button } from "./button"; +export { EmptyState } from "./empty-state"; export { Card, CardContent, diff --git a/services/frontend/src/shared/ui/input.tsx b/services/frontend/src/shared/ui/input.tsx index c559483..0ce92c0 100644 --- a/services/frontend/src/shared/ui/input.tsx +++ b/services/frontend/src/shared/ui/input.tsx @@ -1,3 +1,9 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN Input — Clean, approachable, dengan focus glow signature + * rounded DEFAULT (0.5rem), bg #f0f0f0, border #e0e0e0 + * Focus: border #23a1eb + 3px glow + * ═══════════════════════════════════════════════════════════════════════════ */ + import type * as React from "react"; import { cn } from "../lib/utils"; @@ -6,15 +12,38 @@ export interface InputProps errorId?: string; } -export function Input({ className, type, errorId, ...props }: InputProps) { +type InputVariant = 'default' | 'soft'; + +const variantClasses: Record = { + default: 'border border-[#e0e0e0] bg-white', + soft: 'border-transparent bg-[#f5f5f5] focus-visible:border-[#23a1eb]', +}; + +export function Input({ className, type, errorId, variant = 'default', ...props }: InputProps & { variant?: InputVariant }) { return ( - + ); } diff --git a/services/frontend/src/shared/ui/select.tsx b/services/frontend/src/shared/ui/select.tsx index 44386b4..618f813 100644 --- a/services/frontend/src/shared/ui/select.tsx +++ b/services/frontend/src/shared/ui/select.tsx @@ -1,3 +1,7 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN Select — Native select dengan styling IMPHNEN + * ═══════════════════════════════════════════════════════════════════════════ */ + import type * as React from "react"; import { cn } from "../lib/utils"; @@ -21,9 +25,15 @@ export function Select({ return ( setInput(e.target.value)} placeholder="Tanya mascot..." disabled={loading} - className="flex-1 px-3 py-2 rounded-lg border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm disabled:opacity-50" + className="flex-1 px-3 py-2 rounded-lg border border-[#e0e0e0] bg-white text-[#1a1a1a] placeholder:text-[#999999] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#23a1eb]/30 focus-visible:border-[#23a1eb] text-sm disabled:opacity-50 transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]" /> @@ -272,16 +282,16 @@ function generateMascotResponse( ): string { const lowerInput = input.toLowerCase(); const responseMap: Record = { - halo: "Halo juga! 👋 Senang ketemu kamu. Ada yang bisa aku bantu?", - terima: "Sama-sama! 😊", - apa: "Aku adalah mascot virtual yang membantu kamu memahami conversation dan analytics. Tanya aku apa saja!", + halo: "Halo juga! 👋 Senang ketemu kamu di IMPHNEN. Ada yang bisa aku bantu?", + terima: "Sama-sama! 😊 Senang bisa membantu!", + apa: "Aku adalah mascot virtual IMPHNEN yang membantu kamu memahami conversation dan analytics. Tanya aku apa saja!", siapa: - "Aku mascot mu yang baik hati! Siap membantu dengan insights tentang chat dan analytics.", - chat: "Setiap chat yang terjadi di sini aku analisis untuk memberikan insights yang berguna. Keren kan? 😎", + "Aku mascot IMPHNEN yang baik hati! Siap membantu dengan insights tentang chat dan analytics.", + chat: "Setiap chat yang terjadi di guild dianalisis untuk memberikan insights yang berguna. Keren kan? 😎", pesan: "Aku bisa memberikan ringkasan tentang pesan-pesan yang dikirim, siapa yang paling aktif, dan topik populer!", analitik: - "Analytics menunjukkan pola conversation, waktu aktif, partisipan utama, dan banyak hal menarik lainnya! 📊", + "Analytics menunjukkan pola conversation, waktu aktif, partisipan utama, dan banyak hal menarik! 📊", berapa: "Tanya aku 'berapa pesan hari ini' atau 'berapa orang yang chat' dan aku akan jawab dengan data real-time!", }; @@ -292,10 +302,9 @@ function generateMascotResponse( } } - // Default response if (messages.length < 5) { return "Bagus! Aku akan belajar tentang apa yang kamu tanya. Coba tanya aku tentang chat, analytics, atau partisipan! 🎯"; } - return `Menarik! "${input}" - itu hal yang perlu diperhatikan. Ada yang lain ingin kamu ketahui? 🤔`; + return `Menarik! "${input}" — itu hal yang perlu diperhatikan. Ada yang lain ingin kamu ketahui? 🤔`; } diff --git a/services/frontend/src/widgets/mascot/MascotImage.tsx b/services/frontend/src/widgets/mascot/MascotImage.tsx index af53a3a..03d206d 100644 --- a/services/frontend/src/widgets/mascot/MascotImage.tsx +++ b/services/frontend/src/widgets/mascot/MascotImage.tsx @@ -1,13 +1,13 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN MascotImage — Anime mascot PNG dengan floating chat bubble + * Signature: rounded-xl untuk container, spring transitions, primary glow. + * Mascot adalah "wajah" IMPHNEN — playful dan approachable. + * ═══════════════════════════════════════════════════════════════════════════ */ + import { motion } from "framer-motion"; import { MessageCircle } from "lucide-react"; import { useEffect, useState } from "react"; -/** - * MascotImage — Anime mascot PNG from GitHub CDN - * Replaces ChibiMascot SVG component with external PNG asset - * Now includes optional floating chat bubble with AI insights - */ - interface MascotImageProps { size?: "sm" | "md" | "lg"; className?: string; @@ -23,9 +23,9 @@ const sizeMap = { }; const chatSizeMap = { - sm: "max-w-xs", - md: "max-w-sm", - lg: "max-w-md", + sm: "max-w-[200px]", + md: "max-w-xs", + lg: "max-w-sm", }; export function MascotImage({ @@ -43,7 +43,7 @@ export function MascotImage({ if (showChat && chatMessage) { setIsVisible(true); if (persistChat) return; - const timer = setTimeout(() => setIsVisible(false), 8000); // Auto hide after 8s + const timer = setTimeout(() => setIsVisible(false), 8000); return () => clearTimeout(timer); } setIsVisible(false); @@ -53,7 +53,7 @@ export function MascotImage({
{/* Chat bubble */} -
-
- +
+
+

{chatMessage}

- - {/* Chat bubble tail */} -
+
@@ -89,14 +87,14 @@ export function MascotImage({ } /** - * EmptyStateMascot — Mascot for empty states - * Replaces ChibiMascot when showing empty data states + * EmptyStateMascot — Mascot untuk empty states + * Menampilkan mascot yang redup dengan pesan "Belum ada data" */ export function EmptyStateMascot() { return (
-

No data to display

+

Belum ada data ditampilkan

); } diff --git a/services/frontend/src/widgets/particles/ParticleBackground.tsx b/services/frontend/src/widgets/particles/ParticleBackground.tsx index c6743c0..e14f8ee 100644 --- a/services/frontend/src/widgets/particles/ParticleBackground.tsx +++ b/services/frontend/src/widgets/particles/ParticleBackground.tsx @@ -1,17 +1,37 @@ +/* ═══════════════════════════════════════════════════════════════════════════ + * IMPHNEN Particle Background — Glow orbs yang subtle + * Menggunakan primary (#23a1eb) dan tertiary (#5865f2) glow. + * ═══════════════════════════════════════════════════════════════════════════ */ + import { useEffect, useState } from "react"; export function ParticleBackground() { - const [reducedMotion, setReducedMotion] = useState(false); + const [reducedMotion, setReducedMotion] = useState(true); + const [isMobile, setIsMobile] = useState(true); + const [shouldRender, setShouldRender] = useState(false); useEffect(() => { - const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); - setReducedMotion(mq.matches); - const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches); - mq.addEventListener("change", handler); - return () => mq.removeEventListener("change", handler); + const mqReduced = window.matchMedia("(prefers-reduced-motion: reduce)"); + setReducedMotion(mqReduced.matches); + const mqMobile = window.matchMedia("(max-width: 768px)"); + setIsMobile(mqMobile.matches); + const handleReduced = (e: MediaQueryListEvent) => setReducedMotion(e.matches); + const handleMobile = (e: MediaQueryListEvent) => setIsMobile(e.matches); + mqReduced.addEventListener("change", handleReduced); + mqMobile.addEventListener("change", handleMobile); + requestAnimationFrame(() => setShouldRender(true)); + return () => { + mqReduced.removeEventListener("change", handleReduced); + mqMobile.removeEventListener("change", handleMobile); + }; }, []); - if (reducedMotion) return null; + if (reducedMotion || isMobile || !shouldRender) return null; + + const root = getComputedStyle(document.documentElement); + const primaryColor = root.getPropertyValue("--primary").trim() || "#23a1eb"; + const tertiaryColor = root.getPropertyValue("--tertiary").trim() || "#5865f2"; + const secondaryColor = root.getPropertyValue("--secondary").trim() || "#1877f2"; return (