alex
2bec205a30
- Bell icon in icon registry (Phosphor Bell) - NotificationProvider context with polling (15s unread / 30s list) - useNotifications() hook with optimistic updates - NotificationCenter component: bell + badge + dropdown panel - NotificationItem component: severity icon, title, relative time, actions - AppShell integration: mount in header-actions, hidden on mobile - CSS styles: dropdown, items, unread/read states, empty state - formatRelativeTime utility (custom, no new deps) - 25 frontend tests (9 hook + 6 item + 10 center) Quality gates: vitest 25 passed, tsc clean, eslint clean
181 lines
2.4 KiB
TypeScript
181 lines
2.4 KiB
TypeScript
import {
|
|
House,
|
|
Folder,
|
|
GitBranch,
|
|
Gear,
|
|
User,
|
|
SignOut,
|
|
Plus,
|
|
PencilSimple,
|
|
Trash,
|
|
FloppyDisk,
|
|
X,
|
|
ArrowsClockwise,
|
|
Copy,
|
|
MagnifyingGlass,
|
|
List,
|
|
Check,
|
|
Warning,
|
|
Info,
|
|
Spinner,
|
|
GitCommit,
|
|
GitMerge,
|
|
ClockCounterClockwise,
|
|
ArrowDown,
|
|
ArrowUp,
|
|
File,
|
|
FileText,
|
|
Image,
|
|
Binary,
|
|
Code,
|
|
ArrowSquareOut,
|
|
Play,
|
|
Stop,
|
|
Terminal,
|
|
ArrowLeft,
|
|
Bell,
|
|
} from "@phosphor-icons/react";
|
|
|
|
export type IconName =
|
|
| "dashboard"
|
|
| "projects"
|
|
| "repositories"
|
|
| "settings"
|
|
| "profile"
|
|
| "logout"
|
|
| "add"
|
|
| "edit"
|
|
| "delete"
|
|
| "save"
|
|
| "cancel"
|
|
| "refresh"
|
|
| "copy"
|
|
| "search"
|
|
| "menu"
|
|
| "close"
|
|
| "success"
|
|
| "error"
|
|
| "warning"
|
|
| "info"
|
|
| "loading"
|
|
| "branch"
|
|
| "commit"
|
|
| "merge"
|
|
| "history"
|
|
| "pull"
|
|
| "push"
|
|
| "fetch"
|
|
| "file"
|
|
| "folder"
|
|
| "code"
|
|
| "document"
|
|
| "image"
|
|
| "binary"
|
|
| "external"
|
|
| "play"
|
|
| "stop"
|
|
| "terminal"
|
|
| "arrow-left"
|
|
| "bell";
|
|
|
|
export const iconRegistry: Record<
|
|
IconName,
|
|
React.ComponentType<{
|
|
size?: number | string;
|
|
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
|
}>
|
|
> = {
|
|
// Navigation
|
|
dashboard: House,
|
|
projects: Folder,
|
|
repositories: GitBranch,
|
|
settings: Gear,
|
|
profile: User,
|
|
logout: SignOut,
|
|
|
|
// Actions
|
|
add: Plus,
|
|
edit: PencilSimple,
|
|
delete: Trash,
|
|
save: FloppyDisk,
|
|
cancel: X,
|
|
refresh: ArrowsClockwise,
|
|
copy: Copy,
|
|
search: MagnifyingGlass,
|
|
menu: List,
|
|
close: X,
|
|
|
|
// Status
|
|
success: Check,
|
|
error: X,
|
|
warning: Warning,
|
|
info: Info,
|
|
loading: Spinner,
|
|
|
|
// Git
|
|
branch: GitBranch,
|
|
commit: GitCommit,
|
|
merge: GitMerge,
|
|
history: ClockCounterClockwise,
|
|
pull: ArrowDown,
|
|
push: ArrowUp,
|
|
fetch: ArrowsClockwise,
|
|
|
|
// Files
|
|
file: File,
|
|
folder: Folder,
|
|
code: Code,
|
|
document: FileText,
|
|
image: Image,
|
|
binary: Binary,
|
|
|
|
// Instance actions
|
|
external: ArrowSquareOut,
|
|
play: Play,
|
|
stop: Stop,
|
|
terminal: Terminal,
|
|
"arrow-left": ArrowLeft,
|
|
bell: Bell,
|
|
};
|
|
|
|
export const iconCategories = {
|
|
navigation: [
|
|
"dashboard",
|
|
"projects",
|
|
"repositories",
|
|
"settings",
|
|
"profile",
|
|
"logout",
|
|
] as IconName[],
|
|
actions: [
|
|
"add",
|
|
"edit",
|
|
"delete",
|
|
"save",
|
|
"cancel",
|
|
"refresh",
|
|
"copy",
|
|
"search",
|
|
"menu",
|
|
"close",
|
|
] as IconName[],
|
|
status: ["success", "error", "warning", "info", "loading"] as IconName[],
|
|
git: [
|
|
"branch",
|
|
"commit",
|
|
"merge",
|
|
"history",
|
|
"pull",
|
|
"push",
|
|
"fetch",
|
|
] as IconName[],
|
|
files: [
|
|
"file",
|
|
"folder",
|
|
"code",
|
|
"document",
|
|
"image",
|
|
"binary",
|
|
] as IconName[],
|
|
};
|