feat: notification center frontend core (PR-3)
- 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
This commit is contained in:
+157
-148
@@ -1,167 +1,176 @@
|
||||
import React from "react";
|
||||
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,
|
||||
DotsSixVertical,
|
||||
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,
|
||||
DotsSixVertical,
|
||||
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"
|
||||
| "drag";
|
||||
| "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"
|
||||
| "drag"
|
||||
| "bell";
|
||||
|
||||
const iconMap: Record<IconName, React.ComponentType<{ size?: number | string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }>> = {
|
||||
dashboard: House,
|
||||
projects: Folder,
|
||||
repositories: GitBranch,
|
||||
settings: Gear,
|
||||
profile: User,
|
||||
logout: SignOut,
|
||||
add: Plus,
|
||||
edit: PencilSimple,
|
||||
delete: Trash,
|
||||
save: FloppyDisk,
|
||||
cancel: X,
|
||||
refresh: ArrowsClockwise,
|
||||
copy: Copy,
|
||||
search: MagnifyingGlass,
|
||||
menu: List,
|
||||
close: X,
|
||||
success: Check,
|
||||
error: X,
|
||||
warning: Warning,
|
||||
info: Info,
|
||||
loading: Spinner,
|
||||
branch: GitBranch,
|
||||
commit: GitCommit,
|
||||
merge: GitMerge,
|
||||
history: ClockCounterClockwise,
|
||||
pull: ArrowDown,
|
||||
push: ArrowUp,
|
||||
fetch: ArrowsClockwise,
|
||||
file: File,
|
||||
folder: Folder,
|
||||
code: Code,
|
||||
document: FileText,
|
||||
image: Image,
|
||||
binary: Binary,
|
||||
external: ArrowSquareOut,
|
||||
play: Play,
|
||||
stop: Stop,
|
||||
terminal: Terminal,
|
||||
"arrow-left": ArrowLeft,
|
||||
drag: DotsSixVertical,
|
||||
const iconMap: Record<
|
||||
IconName,
|
||||
React.ComponentType<{
|
||||
size?: number | string;
|
||||
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
||||
}>
|
||||
> = {
|
||||
dashboard: House,
|
||||
projects: Folder,
|
||||
repositories: GitBranch,
|
||||
settings: Gear,
|
||||
profile: User,
|
||||
logout: SignOut,
|
||||
add: Plus,
|
||||
edit: PencilSimple,
|
||||
delete: Trash,
|
||||
save: FloppyDisk,
|
||||
cancel: X,
|
||||
refresh: ArrowsClockwise,
|
||||
copy: Copy,
|
||||
search: MagnifyingGlass,
|
||||
menu: List,
|
||||
close: X,
|
||||
success: Check,
|
||||
error: X,
|
||||
warning: Warning,
|
||||
info: Info,
|
||||
loading: Spinner,
|
||||
branch: GitBranch,
|
||||
commit: GitCommit,
|
||||
merge: GitMerge,
|
||||
history: ClockCounterClockwise,
|
||||
pull: ArrowDown,
|
||||
push: ArrowUp,
|
||||
fetch: ArrowsClockwise,
|
||||
file: File,
|
||||
folder: Folder,
|
||||
code: Code,
|
||||
document: FileText,
|
||||
image: Image,
|
||||
binary: Binary,
|
||||
external: ArrowSquareOut,
|
||||
play: Play,
|
||||
stop: Stop,
|
||||
terminal: Terminal,
|
||||
"arrow-left": ArrowLeft,
|
||||
drag: DotsSixVertical,
|
||||
bell: Bell,
|
||||
};
|
||||
|
||||
export interface IconProps {
|
||||
name: IconName;
|
||||
size?: "sm" | "md" | "lg" | "xl";
|
||||
color?: string;
|
||||
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
||||
className?: string;
|
||||
ariaLabel?: string;
|
||||
name: IconName;
|
||||
size?: "sm" | "md" | "lg" | "xl";
|
||||
color?: string;
|
||||
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
||||
className?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
|
||||
sm: 16,
|
||||
md: 20,
|
||||
lg: 24,
|
||||
xl: 32,
|
||||
sm: 16,
|
||||
md: 20,
|
||||
lg: 24,
|
||||
xl: 32,
|
||||
};
|
||||
|
||||
export const Icon: React.FC<IconProps> = ({
|
||||
name,
|
||||
size = "md",
|
||||
color,
|
||||
weight = "regular",
|
||||
className,
|
||||
ariaLabel,
|
||||
name,
|
||||
size = "md",
|
||||
color,
|
||||
weight = "regular",
|
||||
className,
|
||||
ariaLabel,
|
||||
}) => {
|
||||
const IconComponent = iconMap[name];
|
||||
const sizeValue = sizeMap[size];
|
||||
const IconComponent = iconMap[name];
|
||||
const sizeValue = sizeMap[size];
|
||||
|
||||
if (!IconComponent) {
|
||||
return null;
|
||||
}
|
||||
if (!IconComponent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`icon icon-${size}${className ? ` ${className}` : ""}`}
|
||||
style={{ color }}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role="img"
|
||||
>
|
||||
<IconComponent size={sizeValue} weight={weight} />
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span
|
||||
className={`icon icon-${size}${className ? ` ${className}` : ""}`}
|
||||
style={{ color }}
|
||||
aria-label={ariaLabel}
|
||||
aria-hidden={!ariaLabel}
|
||||
role="img"
|
||||
>
|
||||
<IconComponent size={sizeValue} weight={weight} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user