refactor(ui): update shared layout and UI components for new theme system
Update Header, ProjectMessageFavoritesDrawer, RepoHeader, sheet, EmptyState, ErrorState, LoadingState, PageHeader. Add ConfirmDialog component.
This commit is contained in:
ZhenYi
parent
16865117de
commit
c39ee1ce2a
@ -1,37 +1,45 @@
|
||||
import { memo, useCallback, useState } from "react";
|
||||
import { Link, useLocation, useParams } from "react-router-dom";
|
||||
import { Bookmark, ChevronRight, ChevronDown, Home, Settings } from "lucide-react";
|
||||
import { useProjectLayout } from "@/app/project/layout";
|
||||
import { useProjectsQuery } from "@/hooks/useProjectsQuery";
|
||||
import { useOptionalRoom } from "@/contexts/room";
|
||||
import { RoomSettingsModal } from "@/app/project/channel/RoomSettingsModal";
|
||||
import { ProjectMessageFavoritesDrawer } from "@/components/layout/ProjectMessageFavoritesDrawer";
|
||||
import { isProjectAdminRole } from "@/lib/project-permissions";
|
||||
import { modKey, altKey } from "@/lib/utils";
|
||||
import { openGlobalSearch } from "@/components/search/global-search-events";
|
||||
import { memo, useCallback, useState } from "react"
|
||||
import { Link, useLocation, useParams } from "react-router-dom"
|
||||
import {
|
||||
Bookmark,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Home,
|
||||
Settings,
|
||||
} from "lucide-react"
|
||||
import { useProjectLayout } from "@/app/project/layout"
|
||||
import { useProjectsQuery } from "@/hooks/useProjectsQuery"
|
||||
import { useOptionalRoom } from "@/contexts/room"
|
||||
import { RoomSettingsModal } from "@/app/project/channel/RoomSettingsModal"
|
||||
import { ProjectMessageFavoritesDrawer } from "@/components/layout/ProjectMessageFavoritesDrawer"
|
||||
import { isProjectAdminRole } from "@/lib/project-permissions"
|
||||
import { modKey, altKey } from "@/lib/utils"
|
||||
import { openGlobalSearch } from "@/components/search/global-search-events"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
|
||||
const UUID_RE =
|
||||
/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
|
||||
|
||||
function truncateUuid(s: string): string {
|
||||
return s.slice(0, 8);
|
||||
return s.slice(0, 8)
|
||||
}
|
||||
|
||||
interface BreadcrumbSegment {
|
||||
label: string;
|
||||
path: string;
|
||||
isLast: boolean;
|
||||
fullUuid?: string;
|
||||
label: string
|
||||
path: string
|
||||
isLast: boolean
|
||||
fullUuid?: string
|
||||
}
|
||||
|
||||
interface BreadcrumbSibling {
|
||||
label: string;
|
||||
path: string;
|
||||
label: string
|
||||
path: string
|
||||
}
|
||||
|
||||
const ME_NAV_SIBLINGS: BreadcrumbSibling[] = [
|
||||
@ -44,20 +52,23 @@ const ME_NAV_SIBLINGS: BreadcrumbSibling[] = [
|
||||
{ label: "Following", path: "/me/following" },
|
||||
{ label: "Followers", path: "/me/followers" },
|
||||
{ label: "Invitations", path: "/me/invitations" },
|
||||
];
|
||||
]
|
||||
|
||||
function getProjectNavSiblings(projectName: string, showSettings: boolean): BreadcrumbSibling[] {
|
||||
function getProjectNavSiblings(
|
||||
projectName: string,
|
||||
showSettings: boolean
|
||||
): BreadcrumbSibling[] {
|
||||
const items = [
|
||||
{ label: "Repository", path: `/${projectName}/repos` },
|
||||
{ label: "Issues", path: `/${projectName}/issues` },
|
||||
{ label: "Skills", path: `/${projectName}/skills` },
|
||||
{ label: "Board", path: `/${projectName}/board` },
|
||||
{ label: "Chat", path: `/${projectName}/chat` },
|
||||
];
|
||||
]
|
||||
if (showSettings) {
|
||||
items.push({ label: "Settings", path: `/${projectName}/settings` });
|
||||
items.push({ label: "Settings", path: `/${projectName}/settings` })
|
||||
}
|
||||
return items;
|
||||
return items
|
||||
}
|
||||
|
||||
function getRepoTabSiblings(repoBasePath: string): BreadcrumbSibling[] {
|
||||
@ -68,92 +79,92 @@ function getRepoTabSiblings(repoBasePath: string): BreadcrumbSibling[] {
|
||||
{ label: "Branches", path: `${repoBasePath}/branches` },
|
||||
{ label: "Tags", path: `${repoBasePath}/tags` },
|
||||
{ label: "Settings", path: `${repoBasePath}/settings` },
|
||||
];
|
||||
]
|
||||
}
|
||||
|
||||
function getSegmentSiblings(
|
||||
segment: BreadcrumbSegment,
|
||||
projects: Array<{ name: string; display_name: string }>,
|
||||
canManageProject = false,
|
||||
canManageProject = false
|
||||
): BreadcrumbSibling[] | null {
|
||||
if (segment.isLast) return null;
|
||||
if (segment.isLast) return null
|
||||
|
||||
const parts = segment.path.split("/").filter(Boolean);
|
||||
const depth = parts.length;
|
||||
const parts = segment.path.split("/").filter(Boolean)
|
||||
const depth = parts.length
|
||||
|
||||
if (depth === 1) {
|
||||
if (parts[0] === "me") return ME_NAV_SIBLINGS;
|
||||
if (parts[0] === "me") return ME_NAV_SIBLINGS
|
||||
if (projects.length > 1) {
|
||||
return projects.map((p) => ({
|
||||
label: p.display_name || p.name,
|
||||
path: `/${p.name}`,
|
||||
}));
|
||||
}))
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
if (depth === 2) {
|
||||
if (parts[0] === "me") return ME_NAV_SIBLINGS;
|
||||
return getProjectNavSiblings(parts[0], canManageProject);
|
||||
if (parts[0] === "me") return ME_NAV_SIBLINGS
|
||||
return getProjectNavSiblings(parts[0], canManageProject)
|
||||
}
|
||||
|
||||
if (depth >= 3 && parts[1] === "repo") {
|
||||
const repoBase = `/${parts[0]}/repo/${parts[2]}`;
|
||||
return getRepoTabSiblings(repoBase);
|
||||
const repoBase = `/${parts[0]}/repo/${parts[2]}`
|
||||
return getRepoTabSiblings(repoBase)
|
||||
}
|
||||
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
function useBreadcrumbs() {
|
||||
const location = useLocation();
|
||||
const location = useLocation()
|
||||
const params = useParams<{
|
||||
projectName?: string;
|
||||
repoName?: string;
|
||||
issueNumber?: string;
|
||||
skillSlug?: string;
|
||||
roomId?: string;
|
||||
}>();
|
||||
const roomContext = useOptionalRoom();
|
||||
const currentRoom = roomContext?.currentRoom;
|
||||
projectName?: string
|
||||
repoName?: string
|
||||
issueNumber?: string
|
||||
skillSlug?: string
|
||||
roomId?: string
|
||||
}>()
|
||||
const roomContext = useOptionalRoom()
|
||||
const currentRoom = roomContext?.currentRoom
|
||||
|
||||
const { data: projects = [] } = useProjectsQuery();
|
||||
const activeProject = projects.find((p) => p.name === params.projectName);
|
||||
const { data: projects = [] } = useProjectsQuery()
|
||||
const activeProject = projects.find((p) => p.name === params.projectName)
|
||||
|
||||
const segments: BreadcrumbSegment[] = [];
|
||||
const pathParts = location.pathname.split("/").filter(Boolean);
|
||||
const segments: BreadcrumbSegment[] = []
|
||||
const pathParts = location.pathname.split("/").filter(Boolean)
|
||||
|
||||
for (let i = 0; i < pathParts.length; i++) {
|
||||
const part = pathParts[i];
|
||||
const path = "/" + pathParts.slice(0, i + 1).join("/");
|
||||
const isLast = i === pathParts.length - 1;
|
||||
const part = pathParts[i]
|
||||
const path = "/" + pathParts.slice(0, i + 1).join("/")
|
||||
const isLast = i === pathParts.length - 1
|
||||
|
||||
let label = part;
|
||||
let fullUuid: string | undefined;
|
||||
let label = part
|
||||
let fullUuid: string | undefined
|
||||
|
||||
if (part === params.roomId && currentRoom) {
|
||||
label = `#${currentRoom.room_name}`;
|
||||
label = `#${currentRoom.room_name}`
|
||||
} else if (UUID_RE.test(part)) {
|
||||
fullUuid = part;
|
||||
label = truncateUuid(part);
|
||||
fullUuid = part
|
||||
label = truncateUuid(part)
|
||||
} else if (part === params.projectName && activeProject) {
|
||||
label = activeProject.display_name;
|
||||
label = activeProject.display_name
|
||||
} else if (part === params.repoName) {
|
||||
label = part;
|
||||
label = part
|
||||
} else if (part === params.issueNumber) {
|
||||
label = `#${part}`;
|
||||
label = `#${part}`
|
||||
} else if (part === params.skillSlug) {
|
||||
label = part;
|
||||
label = part
|
||||
} else if (part === "channel" && params.roomId && currentRoom) {
|
||||
label = currentRoom.room_name;
|
||||
label = currentRoom.room_name
|
||||
} else {
|
||||
label = part.charAt(0).toUpperCase() + part.slice(1);
|
||||
label = part.charAt(0).toUpperCase() + part.slice(1)
|
||||
}
|
||||
|
||||
segments.push({ label, path, isLast, fullUuid });
|
||||
segments.push({ label, path, isLast, fullUuid })
|
||||
}
|
||||
|
||||
return { segments, projects };
|
||||
return { segments, projects }
|
||||
}
|
||||
|
||||
const TOOLBAR_ICONS = [
|
||||
@ -173,189 +184,194 @@ const TOOLBAR_ICONS = [
|
||||
label: "Help",
|
||||
path: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
export const Header = memo(function Header() {
|
||||
const location = useLocation();
|
||||
const params = useParams<{ projectName?: string }>();
|
||||
const { segments, projects } = useBreadcrumbs();
|
||||
const { isProjectMember, projectInfo, showMembers, setShowMembers } = useProjectLayout();
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showFavorites, setShowFavorites] = useState(false);
|
||||
const roomContext = useOptionalRoom();
|
||||
const canManageProject = isProjectAdminRole(projectInfo?.role);
|
||||
const location = useLocation()
|
||||
const params = useParams<{ projectName?: string }>()
|
||||
const { segments, projects } = useBreadcrumbs()
|
||||
const { isProjectMember, projectInfo, showMembers, setShowMembers } =
|
||||
useProjectLayout()
|
||||
const [showSettings, setShowSettings] = useState(false)
|
||||
const [showFavorites, setShowFavorites] = useState(false)
|
||||
const roomContext = useOptionalRoom()
|
||||
const canManageProject = isProjectAdminRole(projectInfo?.role)
|
||||
|
||||
const handleCopy = useCallback((e: React.MouseEvent, text: string) => {
|
||||
e.preventDefault();
|
||||
navigator.clipboard.writeText(text);
|
||||
}, []);
|
||||
e.preventDefault()
|
||||
navigator.clipboard.writeText(text)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className="h-12 flex items-center justify-between px-4 shrink-0"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--border-subtle)",
|
||||
backgroundColor: "var(--surface-ground)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1 min-w-0 text-sm">
|
||||
<Link
|
||||
to="/me"
|
||||
className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors shrink-0"
|
||||
>
|
||||
<Home className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
<header
|
||||
className="sticky top-0 z-20 flex h-12 shrink-0 items-center justify-between border-b border-border/60 bg-background/85 px-4 backdrop-blur-xl supports-[backdrop-filter]:bg-background/70"
|
||||
style={{
|
||||
boxShadow:
|
||||
"0 1px 0 color-mix(in oklch, var(--border) 60%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-1 text-sm">
|
||||
<Link
|
||||
to="/me"
|
||||
className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<Home className="size-4" />
|
||||
</Link>
|
||||
|
||||
{segments.map((segment, idx) => {
|
||||
const siblings = getSegmentSiblings(segment, projects, canManageProject);
|
||||
{segments.map((segment, idx) => {
|
||||
const siblings = getSegmentSiblings(
|
||||
segment,
|
||||
projects,
|
||||
canManageProject
|
||||
)
|
||||
|
||||
return (
|
||||
<span key={segment.path + idx} className="flex items-center gap-1 min-w-0">
|
||||
<ChevronRight className="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
|
||||
{segment.isLast ? (
|
||||
<span
|
||||
className={`font-medium text-foreground truncate${segment.fullUuid ? " font-mono cursor-pointer hover:text-accent transition-colors" : ""}`}
|
||||
title={segment.fullUuid}
|
||||
{...(segment.fullUuid
|
||||
? { onClick: (e: React.MouseEvent) => handleCopy(e, segment.fullUuid!) }
|
||||
: {})}
|
||||
>
|
||||
{segment.label}
|
||||
</span>
|
||||
) : siblings && siblings.length > 0 ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded px-0.5 -mx-0.5"
|
||||
>
|
||||
<span className="truncate max-w-[180px]">{segment.label}</span>
|
||||
<ChevronDown className="w-3 h-3 shrink-0" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="min-w-36 max-h-64 overflow-y-auto">
|
||||
{siblings.map((s) => (
|
||||
<DropdownMenuItem key={s.path} asChild>
|
||||
<Link to={s.path} className="truncate">
|
||||
{s.label}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : segment.fullUuid ? (
|
||||
<Link
|
||||
to={segment.path}
|
||||
className="text-muted-foreground hover:text-foreground font-mono cursor-pointer transition-colors"
|
||||
title={segment.fullUuid}
|
||||
onClick={(e) => handleCopy(e, segment.fullUuid!)}
|
||||
>
|
||||
{segment.label}
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
to={segment.path}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{segment.label}
|
||||
</Link>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{location.pathname.startsWith("/me") ? null : (
|
||||
<>
|
||||
{isProjectMember && roomContext?.currentRoom && location.pathname.includes("/channel/") && (
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors hover:bg-hover-bg"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
title="Room Settings"
|
||||
>
|
||||
<Settings className="w-[18px] h-[18px]" />
|
||||
</button>
|
||||
)}
|
||||
{isProjectMember && (
|
||||
<button
|
||||
onClick={() => setShowMembers(!showMembers)}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors"
|
||||
style={
|
||||
showMembers
|
||||
? {
|
||||
color: "var(--text-primary)",
|
||||
backgroundColor: "var(--hover-bg-strong)",
|
||||
}
|
||||
: { color: "var(--text-secondary)" }
|
||||
}
|
||||
return (
|
||||
<span
|
||||
key={segment.path + idx}
|
||||
className="flex min-w-0 items-center gap-1"
|
||||
>
|
||||
<svg
|
||||
className="w-[18px] h-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{TOOLBAR_ICONS.map((icon, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={
|
||||
icon.label === "Search"
|
||||
? openGlobalSearch
|
||||
: icon.label === "Pinned Messages"
|
||||
? () => setShowFavorites(true)
|
||||
: undefined
|
||||
}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-[4px] transition-colors"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
title={
|
||||
icon.label === "Search"
|
||||
? `Search (${modKey()}${altKey()}F)`
|
||||
: icon.label === "Pinned Messages"
|
||||
? "Pinned Messages"
|
||||
: icon.label
|
||||
}
|
||||
>
|
||||
{icon.label === "Pinned Messages" ? (
|
||||
<Bookmark className="w-[18px] h-[18px]" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-[18px] h-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
<ChevronRight className="size-4 shrink-0 text-muted-foreground/50" />
|
||||
{segment.isLast ? (
|
||||
<span
|
||||
className={`truncate font-medium text-foreground${segment.fullUuid ? "cursor-pointer font-mono transition-colors hover:text-accent" : ""}`}
|
||||
title={segment.fullUuid}
|
||||
{...(segment.fullUuid
|
||||
? {
|
||||
onClick: (e: React.MouseEvent) =>
|
||||
handleCopy(e, segment.fullUuid!),
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
{segment.label}
|
||||
</span>
|
||||
) : siblings && siblings.length > 0 ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex min-w-0 cursor-pointer items-center gap-0.5 rounded-full px-2 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
|
||||
<span className="max-w-[180px] truncate">
|
||||
{segment.label}
|
||||
</span>
|
||||
<ChevronDown className="size-3.5 shrink-0" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
className="max-h-64 min-w-36 overflow-y-auto"
|
||||
>
|
||||
{siblings.map((s) => (
|
||||
<DropdownMenuItem key={s.path} asChild>
|
||||
<Link to={s.path} className="truncate">
|
||||
{s.label}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : segment.fullUuid ? (
|
||||
<Link
|
||||
to={segment.path}
|
||||
className="cursor-pointer font-mono text-muted-foreground transition-colors hover:text-foreground"
|
||||
title={segment.fullUuid}
|
||||
onClick={(e) => handleCopy(e, segment.fullUuid!)}
|
||||
>
|
||||
{segment.label}
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
to={segment.path}
|
||||
className="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{segment.label}
|
||||
</Link>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{location.pathname.startsWith("/me") ? null : (
|
||||
<>
|
||||
{isProjectMember &&
|
||||
roomContext?.currentRoom &&
|
||||
location.pathname.includes("/channel/") && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="rounded-full text-muted-foreground"
|
||||
onClick={() => setShowSettings(true)}
|
||||
title="Room Settings"
|
||||
>
|
||||
<Settings />
|
||||
</Button>
|
||||
)}
|
||||
{isProjectMember && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className={`rounded-full text-muted-foreground ${showMembers ? "bg-muted text-foreground" : ""}`}
|
||||
onClick={() => setShowMembers(!showMembers)}
|
||||
>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d={icon.path}
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<RoomSettingsModal open={showSettings} onOpenChange={setShowSettings} />
|
||||
<ProjectMessageFavoritesDrawer
|
||||
open={showFavorites}
|
||||
onOpenChange={setShowFavorites}
|
||||
projectName={params.projectName}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{TOOLBAR_ICONS.map((icon, i) => (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
key={i}
|
||||
onClick={
|
||||
icon.label === "Search"
|
||||
? openGlobalSearch
|
||||
: icon.label === "Pinned Messages"
|
||||
? () => setShowFavorites(true)
|
||||
: undefined
|
||||
}
|
||||
className="rounded-full text-muted-foreground"
|
||||
title={
|
||||
icon.label === "Search"
|
||||
? `Search (${modKey()}${altKey()}F)`
|
||||
: icon.label === "Pinned Messages"
|
||||
? "Pinned Messages"
|
||||
: icon.label
|
||||
}
|
||||
>
|
||||
{icon.label === "Pinned Messages" ? (
|
||||
<Bookmark />
|
||||
) : (
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d={icon.path}
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<RoomSettingsModal open={showSettings} onOpenChange={setShowSettings} />
|
||||
<ProjectMessageFavoritesDrawer
|
||||
open={showFavorites}
|
||||
onOpenChange={setShowFavorites}
|
||||
projectName={params.projectName}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
@ -1,77 +1,105 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Bookmark, ExternalLink, Loader2, Trash2 } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { projectMessageFavoriteRemove, projectMessageFavorites } from "@/client/api";
|
||||
import type { ProjectMessageFavoriteItem } from "@/client/model";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { Bookmark, ExternalLink, Loader2, Trash2 } from "lucide-react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import {
|
||||
projectMessageFavoriteRemove,
|
||||
projectMessageFavorites,
|
||||
} from "@/client/api"
|
||||
import type { ProjectMessageFavoriteItem } from "@/client/model"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import { extractIrNodes } from "@/lib/ir/parser";
|
||||
} from "@/components/ui/sheet"
|
||||
import {
|
||||
Empty,
|
||||
EmptyContent,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyMedia,
|
||||
EmptyTitle,
|
||||
} from "@/components/ui/empty"
|
||||
import { extractIrNodes } from "@/lib/ir/parser"
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
projectName?: string;
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
projectName?: string
|
||||
}
|
||||
|
||||
function plainMessageText(item: ProjectMessageFavoriteItem) {
|
||||
const nodes = extractIrNodes(item.content);
|
||||
const nodes = extractIrNodes(item.content)
|
||||
const text = nodes
|
||||
.map((node) => {
|
||||
if ("text" in node && typeof node.text === "string") return node.text;
|
||||
if ("content" in node && typeof node.content === "string") return node.content;
|
||||
return "";
|
||||
if ("text" in node && typeof node.text === "string") return node.text
|
||||
if ("content" in node && typeof node.content === "string")
|
||||
return node.content
|
||||
return ""
|
||||
})
|
||||
.join(" ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
return text || item.content.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
|
||||
.trim()
|
||||
return (
|
||||
text ||
|
||||
item.content
|
||||
.replace(/<[^>]*>/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim()
|
||||
)
|
||||
}
|
||||
|
||||
function formatDate(value: string) {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "";
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return ""
|
||||
return date.toLocaleString([], {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
export function ProjectMessageFavoritesDrawer({ open, onOpenChange, projectName }: Props) {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const queryKey = ["project-message-favorites", projectName];
|
||||
export function ProjectMessageFavoritesDrawer({
|
||||
open,
|
||||
onOpenChange,
|
||||
projectName,
|
||||
}: Props) {
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const queryKey = ["project-message-favorites", projectName]
|
||||
|
||||
const favoritesQuery = useQuery({
|
||||
queryKey,
|
||||
queryFn: async () => {
|
||||
const res = await projectMessageFavorites(projectName!, { page: 1, per_page: 50 });
|
||||
return res.data.data;
|
||||
const res = await projectMessageFavorites(projectName!, {
|
||||
page: 1,
|
||||
per_page: 50,
|
||||
})
|
||||
return res.data.data
|
||||
},
|
||||
enabled: open && !!projectName,
|
||||
staleTime: 15_000,
|
||||
});
|
||||
})
|
||||
|
||||
const removeMutation = useMutation({
|
||||
mutationFn: (messageId: string) => projectMessageFavoriteRemove(projectName!, messageId),
|
||||
mutationFn: (messageId: string) =>
|
||||
projectMessageFavoriteRemove(projectName!, messageId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey });
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const goToMessage = (item: ProjectMessageFavoriteItem) => {
|
||||
if (!projectName) return;
|
||||
onOpenChange(false);
|
||||
navigate(`/${projectName}/channel/${item.room_id}?message=${item.message_id}`);
|
||||
};
|
||||
if (!projectName) return
|
||||
onOpenChange(false)
|
||||
navigate(
|
||||
`/${projectName}/channel/${item.room_id}?message=${item.message_id}`
|
||||
)
|
||||
}
|
||||
|
||||
const list = favoritesQuery.data?.list ?? [];
|
||||
const list = favoritesQuery.data?.list ?? []
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
@ -90,26 +118,38 @@ export function ProjectMessageFavoritesDrawer({ open, onOpenChange, projectName
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
</div>
|
||||
) : list.length === 0 ? (
|
||||
<div className="flex h-32 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<Bookmark className="size-5" />
|
||||
<span>No favorite messages yet.</span>
|
||||
</div>
|
||||
<Empty className="h-44 border-0 bg-transparent p-0">
|
||||
<EmptyContent className="max-w-xs">
|
||||
<EmptyMedia variant="icon">
|
||||
<Bookmark />
|
||||
</EmptyMedia>
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>No favorite messages yet.</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Pin a message from a room and it will appear here for quick
|
||||
access.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{list.map((item) => {
|
||||
const preview = plainMessageText(item);
|
||||
const preview = plainMessageText(item)
|
||||
return (
|
||||
<div
|
||||
key={item.uid}
|
||||
className="rounded-md border border-border/60 bg-popover p-3"
|
||||
className="group rounded-xl border border-border/70 bg-card/80 p-3 shadow-sm transition-colors hover:border-border hover:bg-card"
|
||||
>
|
||||
<div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="truncate font-medium text-foreground">#{item.room_name}</span>
|
||||
<span className="truncate font-medium text-foreground">
|
||||
#{item.room_name}
|
||||
</span>
|
||||
<span>{formatDate(item.send_at)}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="block w-full text-left text-sm leading-relaxed text-foreground"
|
||||
className="block w-full text-left text-sm leading-relaxed text-foreground transition-colors group-hover:text-foreground/90"
|
||||
onClick={() => goToMessage(item)}
|
||||
>
|
||||
<span className="line-clamp-3">{preview}</span>
|
||||
@ -117,7 +157,7 @@ export function ProjectMessageFavoritesDrawer({ open, onOpenChange, projectName
|
||||
<div className="mt-3 flex items-center justify-end gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex size-7 items-center justify-center rounded hover:bg-muted"
|
||||
className="inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
title="Open message"
|
||||
onClick={() => goToMessage(item)}
|
||||
>
|
||||
@ -125,7 +165,7 @@ export function ProjectMessageFavoritesDrawer({ open, onOpenChange, projectName
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex size-7 items-center justify-center rounded text-destructive hover:bg-muted"
|
||||
className="inline-flex size-7 items-center justify-center rounded-full text-destructive transition-colors hover:bg-destructive/10"
|
||||
title="Remove favorite"
|
||||
onClick={() => removeMutation.mutate(item.message_id)}
|
||||
>
|
||||
@ -133,12 +173,12 @@ export function ProjectMessageFavoritesDrawer({ open, onOpenChange, projectName
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,77 +1,116 @@
|
||||
import { Lock, Globe, GitBranch, GitCommit, GitPullRequest, Tag } from "lucide-react";
|
||||
import type { UserRepoInfo } from "@/client/model";
|
||||
import { REPO_HEADER } from "@/css/repo/styles";
|
||||
import {
|
||||
Lock,
|
||||
Globe,
|
||||
GitBranch,
|
||||
GitCommit,
|
||||
GitPullRequest,
|
||||
Tag,
|
||||
} from "lucide-react"
|
||||
import type { UserRepoInfo } from "@/client/model"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
interface RepoHeaderProps {
|
||||
repo: UserRepoInfo;
|
||||
repo: UserRepoInfo
|
||||
stats?: {
|
||||
openPulls?: number;
|
||||
commitsCount?: number;
|
||||
tagsCount?: number;
|
||||
branchesCount?: number;
|
||||
};
|
||||
openPulls?: number
|
||||
commitsCount?: number
|
||||
tagsCount?: number
|
||||
branchesCount?: number
|
||||
}
|
||||
}
|
||||
|
||||
export function RepoHeader({ repo, stats }: RepoHeaderProps) {
|
||||
return (
|
||||
<div className={REPO_HEADER.container}>
|
||||
<div className={REPO_HEADER.titleRow}>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={REPO_HEADER.nameRow}>
|
||||
<h1 className={REPO_HEADER.title}>
|
||||
<div className="rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm backdrop-blur">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-foreground">
|
||||
{repo.repo_name}
|
||||
</h1>
|
||||
<span
|
||||
className={`${REPO_HEADER.badge} ${
|
||||
repo.is_private
|
||||
? REPO_HEADER.badgePrivate
|
||||
: REPO_HEADER.badgePublic
|
||||
}`}
|
||||
<Badge
|
||||
variant={repo.is_private ? "secondary" : "outline"}
|
||||
className="gap-1.5 rounded-full px-2.5 py-1 text-xs"
|
||||
>
|
||||
{repo.is_private ? (
|
||||
<>
|
||||
<Lock className="w-3 h-3" /> Private
|
||||
<Lock className="size-3.5" />
|
||||
Private
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Globe className="w-3 h-3" /> Public
|
||||
<Globe className="size-3.5" />
|
||||
Public
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{repo.description && (
|
||||
<p className={REPO_HEADER.description}>
|
||||
<p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
{repo.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<GitBranch className="w-3.5 h-3.5" />
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 rounded-full px-2.5 py-1"
|
||||
>
|
||||
<GitBranch className="size-3.5" />
|
||||
{repo.default_branch}
|
||||
</span>
|
||||
</Badge>
|
||||
{stats?.openPulls != null && (
|
||||
<span className="flex items-center gap-1">
|
||||
<GitPullRequest className="w-3.5 h-3.5" />
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 rounded-full px-2.5 py-1"
|
||||
>
|
||||
<GitPullRequest className="size-3.5" />
|
||||
{stats.openPulls} open
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
{stats?.commitsCount != null && (
|
||||
<span className="flex items-center gap-1">
|
||||
<GitCommit className="w-3.5 h-3.5" />
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 rounded-full px-2.5 py-1"
|
||||
>
|
||||
<GitCommit className="size-3.5" />
|
||||
{stats.commitsCount} commits
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
{stats?.branchesCount != null && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 rounded-full px-2.5 py-1"
|
||||
>
|
||||
<GitBranch className="size-3.5" />
|
||||
{stats.branchesCount} branches
|
||||
</Badge>
|
||||
)}
|
||||
{stats?.tagsCount != null && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag className="w-3.5 h-3.5" />
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 rounded-full px-2.5 py-1"
|
||||
>
|
||||
<Tag className="size-3.5" />
|
||||
{stats.tagsCount} tags
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="rounded-full px-2.5 py-1 text-xs"
|
||||
>
|
||||
{repo.project_name}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{repo.storage_path || repo.repo_name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
55
src/components/ui/ConfirmDialog.tsx
Normal file
55
src/components/ui/ConfirmDialog.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import type { ReactNode } from "react"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "./alert-dialog"
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
title: string
|
||||
description?: ReactNode
|
||||
confirmLabel?: string
|
||||
cancelLabel?: string
|
||||
destructive?: boolean
|
||||
onConfirm: () => void
|
||||
}
|
||||
|
||||
export function ConfirmDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
confirmLabel = "Confirm",
|
||||
cancelLabel = "Cancel",
|
||||
destructive = true,
|
||||
onConfirm,
|
||||
}: ConfirmDialogProps) {
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
{description ? (
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
) : null}
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant={destructive ? "destructive" : "default"}
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{confirmLabel}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
@ -1,30 +1,36 @@
|
||||
import { FileQuestion } from "lucide-react";
|
||||
import { FileQuestion } from "lucide-react"
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
icon?: React.ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
action?: React.ReactNode
|
||||
}
|
||||
|
||||
export function EmptyState({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
action
|
||||
action,
|
||||
}: EmptyStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 p-8 text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center">
|
||||
{icon || <FileQuestion className="w-6 h-6 text-muted-foreground" />}
|
||||
<div className="flex h-full flex-col items-center justify-center p-8 text-center">
|
||||
<div className="flex max-w-md flex-col items-center gap-4 rounded-2xl border border-dashed border-border/70 bg-card/70 px-8 py-10 shadow-sm backdrop-blur">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||||
{icon || <FileQuestion className="size-6" />}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h3 className="text-lg font-semibold tracking-tight text-foreground">
|
||||
{title}
|
||||
</h3>
|
||||
{description && (
|
||||
<p className="max-w-sm text-sm leading-6 text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div className="pt-1">{action}</div>}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-medium text-foreground">{title}</h3>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground max-w-sm">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div>{action}</div>}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,35 +1,41 @@
|
||||
import { AlertCircle, RefreshCw } from "lucide-react";
|
||||
import { t } from "@/i18n/T";
|
||||
import { AlertCircle, RefreshCw } from "lucide-react"
|
||||
import { t } from "@/i18n/T"
|
||||
|
||||
interface ErrorStateProps {
|
||||
title?: string;
|
||||
message?: string;
|
||||
onRetry?: () => void;
|
||||
title?: string
|
||||
message?: string
|
||||
onRetry?: () => void
|
||||
}
|
||||
|
||||
export function ErrorState({
|
||||
title = t("common.states.error_title"),
|
||||
message = t("common.states.error_message"),
|
||||
onRetry
|
||||
onRetry,
|
||||
}: ErrorStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 p-8 text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
|
||||
<AlertCircle className="w-6 h-6 text-destructive" />
|
||||
<div className="flex h-full flex-col items-center justify-center p-8 text-center">
|
||||
<div className="flex max-w-md flex-col items-center gap-4 rounded-2xl border border-destructive/20 bg-card/70 px-8 py-10 shadow-sm backdrop-blur">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-destructive/10 text-destructive">
|
||||
<AlertCircle className="size-6" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h3 className="text-lg font-semibold tracking-tight text-foreground">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="max-w-sm text-sm leading-6 text-muted-foreground">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
{onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
{t("common.actions.retry")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-lg font-medium text-foreground">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-sm">{message}</p>
|
||||
</div>
|
||||
{onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
{t("common.actions.retry")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
import { LoadingSpinner } from "./LoadingSpinner";
|
||||
import { t } from "@/i18n/T";
|
||||
import { LoadingSpinner } from "./LoadingSpinner"
|
||||
import { t } from "@/i18n/T"
|
||||
|
||||
interface LoadingStateProps {
|
||||
message?: string;
|
||||
message?: string
|
||||
}
|
||||
|
||||
export function LoadingState({ message = t("common.states.loading") }: LoadingStateProps) {
|
||||
export function LoadingState({
|
||||
message = t("common.states.loading"),
|
||||
}: LoadingStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 p-8">
|
||||
<LoadingSpinner size={32} />
|
||||
<p className="text-sm text-muted-foreground">{message}</p>
|
||||
<div className="flex h-full flex-col items-center justify-center p-8">
|
||||
<div className="flex flex-col items-center gap-4 rounded-2xl border border-border/60 bg-card/70 px-8 py-10 shadow-sm backdrop-blur">
|
||||
<LoadingSpinner size={32} />
|
||||
<p className="text-sm text-muted-foreground">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
actions?: React.ReactNode;
|
||||
title: string
|
||||
description?: string
|
||||
actions?: React.ReactNode
|
||||
}
|
||||
|
||||
export function PageHeader({ title, description, actions }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">{title}</h1>
|
||||
<div className="mb-6 flex flex-col gap-4 border-b border-border/60 pb-4 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]">
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground mt-1">{description}</p>
|
||||
<p className="mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
||||
{actions && (
|
||||
<div className="flex flex-wrap items-center gap-2">{actions}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ function SheetOverlay({
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
"fixed inset-0 z-50 bg-black/25 duration-150 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -60,7 +60,7 @@ function SheetContent({
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||
"fixed z-50 flex flex-col gap-4 border-border/70 bg-popover/95 bg-clip-padding text-sm text-popover-foreground shadow-2xl shadow-black/10 backdrop-blur-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@ -73,8 +73,7 @@ function SheetContent({
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</SheetPrimitive.Close>
|
||||
@ -88,7 +87,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
className={cn("flex flex-col gap-1 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user