monoid/ionian
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Wiki Activity

feat: refactor navigation components to use Jotai for sidebar state management and improve rendering logic

Browse source
This commit is contained in:
monoid 2025-10-08 00:11:33 +09:00
parent d6dae83f20
commit 25231b5e88
8 changed files with 307 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/client/src/components/gallery/GalleryCard.tsx
View file

@ -1,5 +1,5 @@
import type { Document } from "dbtype";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
import TagBadge, { toPrettyTagname } from "@/components/gallery/TagBadge.tsx";
import { Fragment, useLayoutEffect, useRef, useState } from "react";
import { LazyImage } from "./LazyImage.tsx";
@ -106,10 +106,10 @@ function GalleryCardImpl({
{x.title}
</StyledLink>
</CardTitle>
<CardDescription className="flex flex-wrap items-center gap-x-3">
<div className="flex flex-wrap items-center gap-x-3 leading-tight text-sm">
{artists.length > 0 && (
<div className="flex items-center gap-1.5">
<Palette className="h-3.5 w-3.5 text-primary/70" />
<Palette className="size-3.5 text-primary/70" />
<span className="flex flex-wrap items-center">
{artists.map((x, i) => (
<Fragment key={`artist:${x}`}>
@ -128,7 +128,7 @@ function GalleryCardImpl({
{groups.length > 0 && (
<div className="flex items-center gap-1.5">
<Users className="h-3.5 w-3.5 text-primary/70" />
<Users className="size-3.5 text-primary/70" />
<span className="flex flex-wrap items-center">
{groups.map((x, i) => (
<Fragment key={`group:${x}`}>
@ -146,10 +146,10 @@ function GalleryCardImpl({
)}
<div className="flex items-center gap-1.5 text-muted-foreground">
<Clock className="h-3.5 w-3.5" />
<Clock className="size-3.5" />
<span className="text-xs">{new Date(x.created_at).toLocaleDateString()}</span>
</div>
</CardDescription>
</div>
</CardHeader>
<CardContent className="flex-1 overflow-hidden">

17
packages/client/src/components/layout/layout.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useAtomValue } from "jotai";
import { SidebarNav, BottomNav, SidebarToggle } from "./nav";
import { sidebarAtom } from "./sidebarAtom";
import { cn } from "@/lib/utils";
interface LayoutProps {
@ -7,11 +8,8 @@ interface LayoutProps {
}
export default function Layout({ children }: LayoutProps) {
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const sidebarState = useAtomValue(sidebarAtom);
const isSidebarOpen = !sidebarState.isCollapsed;
return (
<div className="flex flex-col md:flex-row relative">
@ -24,13 +22,10 @@ export default function Layout({ children }: LayoutProps) {
{isSidebarOpen && (
<h2 className="text-lg font-semibold">Ionian</h2>
)}
<SidebarToggle
isOpen={isSidebarOpen}
onToggle={toggleSidebar}
/>
<SidebarToggle />
</div>
<div className="flex-1 overflow-y-auto">
<SidebarNav isCollapsed={!isSidebarOpen} />
<SidebarNav />
</div>
</aside>

433
packages/client/src/components/layout/nav.tsx
View file

@ -1,101 +1,118 @@
import { Link } from "wouter"
import { SearchIcon, SettingsIcon, TagsIcon, ArchiveIcon, UserIcon, LayoutListIcon, PanelLeftIcon, PanelLeftCloseIcon, MenuIcon, XIcon } from "lucide-react"
import { SearchIcon, SettingsIcon, TagsIcon, ArchiveIcon, UserIcon, LayoutListIcon, PanelLeftIcon, PanelLeftCloseIcon, MenuIcon, XIcon, type LucideIcon } from "lucide-react"
import { Button, buttonVariants } from "@/components/ui/button.tsx"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx"
import { useLogin } from "@/state/user.ts";
import { useNavItems } from "./navAtom";
import { Separator } from "../ui/separator";
import { cn } from "@/lib/utils";
import { useMemo } from "react";
import { useAtom, useAtomValue } from "jotai";
import { sidebarAtom } from "./sidebarAtom";
interface NavItemProps {
const NAV_ICON_CLASS = "size-4";
const NAV_LINKS = {
search: { to: "/search", Icon: SearchIcon },
tags: { to: "/tags", Icon: TagsIcon },
difference: { to: "/difference", Icon: ArchiveIcon },
queue: { to: "/queue", Icon: LayoutListIcon },
settings: { to: "/setting", Icon: SettingsIcon }
} satisfies Record<string, { to: string; Icon: LucideIcon }>;
type NavLinkKey = keyof typeof NAV_LINKS;
type NavItemData = {
key: string;
icon: React.ReactNode;
to: string;
to?: string;
name: string;
className?: string;
}
export function NavItem({
icon,
const createNavItem = (key: NavLinkKey, name: string, className?: string): NavItemData => {
const { Icon, to } = NAV_LINKS[key];
return {
key,
icon: <Icon className={NAV_ICON_CLASS} />,
to,
name,
className
}: NavItemProps) {
return <Tooltip>
<TooltipTrigger asChild>
<Link
href={to}
className={buttonVariants({ variant: "ghost", className })}
>
{icon}
<span className="sr-only">{name}</span>
</Link>
</TooltipTrigger>
<TooltipContent side="right">{name}</TooltipContent>
</Tooltip>
}
};
};
interface NavItemButtonProps {
icon: React.ReactNode;
onClick: () => void;
name: string;
className?: string;
}
function useNavItemsData() {
const loginInfo = useLogin();
const isLoggedIn = Boolean(loginInfo);
export function NavItemButton({
icon,
onClick,
name,
className
}: NavItemButtonProps) {
return <Tooltip>
<TooltipTrigger asChild>
<Button
onClick={onClick}
variant="ghost"
className={className}
>
{icon}
<span className="sr-only">{name}</span>
</Button>
</TooltipTrigger>
<TooltipContent side="right">{name}</TooltipContent>
</Tooltip>
return useMemo(() => {
const accountItem: NavItemData = {
key: "account",
icon: <UserIcon className={NAV_ICON_CLASS} />,
to: isLoggedIn ? "/profile" : "/login",
name: isLoggedIn ? "Profiles" : "Login",
};
return ({
main: [
createNavItem("search", "Search"),
createNavItem("tags", "Tags"),
createNavItem("difference", "Difference"),
],
footer: [
accountItem,
createNavItem("settings", "Settings")
],
bottomNav: (useCustomItems: boolean) => useCustomItems ? [] : [
createNavItem("tags", "Tags"),
createNavItem("difference", "Diff"),
{ ...accountItem, name: isLoggedIn ? "Profile" : "Login" },
createNavItem("settings", "Settings")
]
})
}, [isLoggedIn]);
}
export function NavList() {
const loginInfo = useLogin();
const navItems = useNavItems();
const customNavItems = useNavItems();
const { main, footer } = useNavItemsData();
return <aside className="h-dvh flex flex-col">
return (
<aside className="h-dvh flex flex-col">
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
{navItems && <>{navItems} <Separator /> </>}
<NavItem icon={<SearchIcon className="h-5 w-5" />} to="/search" name="Search" />
<NavItem icon={<TagsIcon className="h-5 w-5" />} to="/tags" name="Tags" />
<NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
{customNavItems && (
<>
{customNavItems()}
<Separator />
</>
)}
{main.map(({ key, icon, to, name, className }) => (
<SidebarNavItem key={key} name={name} to={to} className={className}>
{icon}
</SidebarNavItem>
))}
</nav>
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
<NavItem icon={<UserIcon className="h-5 w-5" />} to={loginInfo ? "/profile" : "/login"} name={loginInfo ? "Profiles" : "Login"} />
<NavItem icon={<SettingsIcon className="h-5 w-5" />} to="/setting" name="Settings" />
{footer.map(({ key, icon, to, name, className }) => (
<SidebarNavItem key={key} name={name} to={to} className={className}>
{icon}
</SidebarNavItem>
))}
</nav>
</aside>
);
}
// 사이드바 토글 버튼
export function SidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle: () => void }) {
export function SidebarToggle() {
const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
const isOpen = sidebarState.isCollapsed;
const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
return (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={onToggle}
className="h-8 w-8 p-0"
>
{isOpen ? (
<PanelLeftCloseIcon className="h-4 w-4" />
) : (
<PanelLeftIcon className="h-4 w-4" />
)}
<Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
{isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-4" />}
<span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
</Button>
</TooltipTrigger>
@ -107,202 +124,158 @@ export function SidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle:
}
// 모바일용 사이드바 토글 버튼
export function MobileSidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle: () => void }) {
export function MobileSidebarToggle() {
const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
const isOpen = sidebarState.isCollapsed;
const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
return (
<Button
variant="ghost"
size="sm"
onClick={onToggle}
className="h-8 w-8 p-0"
>
{isOpen ? (
<XIcon className="h-5 w-5" />
) : (
<MenuIcon className="h-5 w-5" />
)}
<Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
{isOpen ? <XIcon className="size-5" /> : <MenuIcon className="size-5" />}
<span className="sr-only">{isOpen ? "Close menu" : "Open menu"}</span>
</Button>
);
}
// 데스크탑용 사이드바 네비게이션
export function SidebarNav({ isCollapsed, onNavigate }: { isCollapsed: boolean; onNavigate?: () => void }) {
const loginInfo = useLogin();
const navItems = useNavItems();
return (
<div className="flex flex-col h-full">
<nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
{navItems && (
<>
<div className={cn("space-y-2", isCollapsed && "items-center")}>
{navItems}
</div>
<Separator className="my-3" />
</>
)}
<div className="flex flex-col gap-2">
<SidebarNavItem
icon={<SearchIcon className="h-5 w-5" />}
to="/search"
name="Search"
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
<SidebarNavItem
icon={<TagsIcon className="h-5 w-5" />}
to="/tags"
name="Tags"
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
<SidebarNavItem
icon={<ArchiveIcon className="h-5 w-5" />}
to="/difference"
name="Difference"
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
<SidebarNavItem
icon={<LayoutListIcon className="h-5 w-5" />}
to="/queue"
name="Task Queue"
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
</div>
</nav>
<div className="border-t p-3 flex flex-col gap-2 flex-shrink-0">
<SidebarNavItem
icon={<UserIcon className="h-5 w-5" />}
to={loginInfo ? "/profile" : "/login"}
name={loginInfo ? "Profiles" : "Login"}
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
<SidebarNavItem
icon={<SettingsIcon className="h-5 w-5" />}
to="/setting"
name="Settings"
isCollapsed={isCollapsed}
onNavigate={onNavigate}
/>
</div>
</div>
);
}
// 사이드바 네비게이션 아이템
interface SidebarNavItemProps {
icon: React.ReactNode;
to: string;
children: React.ReactNode;
name: string;
isCollapsed: boolean;
onNavigate?: () => void;
to?: string;
className?: string;
onClick?: () => void;
}
function SidebarNavItem({ icon, to, name, isCollapsed, onNavigate }: SidebarNavItemProps) {
export function SidebarNavItem({ children, name, to, className, onClick }: SidebarNavItemProps) {
const sidebarState = useAtomValue(sidebarAtom);
const isCollapsed = sidebarState.isCollapsed;
const buttonClass = cn(
buttonVariants({ variant: "ghost", size: "sm" }),
"rounded-none md:rounded-md",
isCollapsed ? "justify-center size-10 p-0" : "justify-start gap-3 h-10 px-3",
className
);
const Container = to ? ({ children, ref }: { children: React.ReactNode,
ref?: React.Ref<HTMLAnchorElement>
}) => (
<Link
ref={ref}
href={to} className={buttonClass}
onClick={onClick}
>
{children}
</Link>
) : ({ children, ref }: { children: React.ReactNode,
ref?: React.Ref<HTMLButtonElement>
}) => (
<button className={buttonClass} onClick={onClick} ref={ref}>
{children}
</button>
);
const linkContent = (
<Container>
{children}
<span className={cn(
"sr-only",
!isCollapsed && "text-sm truncate leading-normal md:not-sr-only"
)
}>{name}</span>
</Container>
);
if (isCollapsed) {
return (
<Tooltip>
<TooltipTrigger asChild>
<Link
href={to}
className={cn(
buttonVariants({ variant: "ghost", size: "sm" }),
"justify-center h-10 w-10 p-0"
)}
onClick={onNavigate}
>
{icon}
<span className="sr-only">{name}</span>
</Link>
</TooltipTrigger>
<TooltipTrigger asChild>{linkContent}</TooltipTrigger>
<TooltipContent side="right">{name}</TooltipContent>
</Tooltip>
);
}
return linkContent;
}
// 데스크탑용 사이드바 네비게이션
export function SidebarNav() {
const customNavItems = useNavItems();
const { main, footer } = useNavItemsData();
return (
<Link
href={to}
className={cn(
buttonVariants({ variant: "ghost", size: "sm" }),
"justify-start gap-3 h-10 px-3"
<div className="flex flex-col h-full">
<nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
{customNavItems && (
<>
<div className={cn("flex flex-col gap-2")}>
{customNavItems()}
</div>
<Separator className="my-3" />
</>
)}
onClick={onNavigate}
<div className="flex flex-col gap-2">
{main.map(({ key, icon, to, name, className }) => (
<SidebarNavItem
key={key}
name={name}
to={to}
className={className}
>
{icon}
<span>{name}</span>
</Link>
</SidebarNavItem>
))}
</div>
</nav>
<div className="border-t p-3 flex flex-col gap-2 flex-shrink-0">
{footer.map(({ key, icon, to, name, className }) => (
<SidebarNavItem
key={key}
name={name}
to={to}
className={className}
>
{icon}
</SidebarNavItem>
))}
</div>
</div>
);
}
// 모바일용 하단 네비게이션
export function BottomNav() {
const loginInfo = useLogin();
const navItems = useNavItems();
const customNavItems = useNavItems();
const { main, bottomNav } = useNavItemsData();
const searchItem = { ...main[0] }; // Search item
const items = bottomNav(Boolean(customNavItems));
return (
<nav className="mb-1">
<div className="flex justify-around items-center max-w-md mx-auto
overflow-hidden
bg-background/50 backdrop-blur-md border rounded-full">
<BottomNavItem
icon={<SearchIcon className="h-5 w-5" />}
to="/search"
name="Search"
className="flex-1"
/>
{navItems ? navItems : <>
<BottomNavItem
icon={<TagsIcon className="h-5 w-5" />}
to="/tags"
name="Tags"
className="flex-1"
/>
<BottomNavItem
icon={<ArchiveIcon className="h-5 w-5" />}
to="/difference"
name="Diff"
className="flex-1"
/>
<BottomNavItem
icon={<UserIcon className="h-5 w-5" />}
to={loginInfo ? "/profile" : "/login"}
name={loginInfo ? "Profile" : "Login"}
className="flex-1"
/>
<BottomNavItem
icon={<SettingsIcon className="h-5 w-5" />}
to="/setting"
name="Settings"
className="flex-1"
/>
</>}
<div className="flex justify-around items-center max-w-md mx-auto overflow-hidden bg-background/50 backdrop-blur-md border rounded-full">
<SidebarNavItem
name={searchItem.name}
to={searchItem.to}
className={searchItem.className}
>
{searchItem.icon}
</SidebarNavItem>
{customNavItems ? (
customNavItems()
) : (
items.map(({ key, icon, to, name, className }) =>
<SidebarNavItem
key={key}
name={name}
to={to}
className={className}
>
{icon}
</SidebarNavItem>
)
)}
</div>
</nav>
);
}
// 하단 네비게이션 아이템
interface BottomNavItemProps {
icon: React.ReactNode;
to: string;
name: string;
className?: string;
}
function BottomNavItem({ icon, to, name, className }: BottomNavItemProps) {
return (
<Link
href={to}
className={cn("flex flex-col items-center gap-1 p-2 hover:bg-accent text-xs min-w-0", className)}
>
{icon}
<span className="text-xs truncate leading-normal">{name}</span>
</Link>
);
}

16
packages/client/src/components/layout/navAtom.tsx
View file

@ -1,27 +1,23 @@
import { atom, useAtomValue, useSetAtom } from "@/lib/atom";
import { useLayoutEffect, useRef } from "react";
import { useLayoutEffect } from "react";
const NavItems = atom<React.ReactNode>(null);
const NavItems = atom<(() => React.ReactNode) | null>(null);
// eslint-disable-next-line react-refresh/only-export-components
export function useNavItems() {
return useAtomValue(NavItems);
}
export function PageNavItem({items, children}:{items: React.ReactNode, children: React.ReactNode}) {
const currentNavItems = useAtomValue(NavItems);
export function PageNavItem({navRender, children}:{navRender: () => React.ReactNode, children: React.ReactNode}) {
const setNavItems = useSetAtom(NavItems);
const prevValueRef = useRef<React.ReactNode>(null);
useLayoutEffect(() => {
// Store current value before setting new one
prevValueRef.current = currentNavItems;
setNavItems(items);
setNavItems(() => navRender);
return () => {
setNavItems(prevValueRef.current);
setNavItems(null);
};
}, [items, currentNavItems, setNavItems]);
}, [ setNavItems, navRender]);
return children;
}

3
packages/client/src/components/layout/sidebarAtom.tsx Normal file
View file

@ -0,0 +1,3 @@
import { atom } from "jotai";
export const sidebarAtom = atom({ isCollapsed: false });

2
packages/client/src/components/ui/chart.tsx
View file

@ -67,7 +67,7 @@ ChartContainer.displayName = "Chart"
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
([_, config]) => config.theme || config.color
([, itemConfig]) => itemConfig.theme || itemConfig.color
)
if (!colorConfig.length) {

2
packages/client/src/page/galleryPage.tsx
View file

@ -67,7 +67,7 @@ export default function Gallery() {
</div>
}
else {
return <div className="w-full relative overflow-auto h-full"
return <div className="w-full relative"
style={{ height: virtualizer.getTotalSize() }}>
{// TODO: date based grouping
virtualItems.map((item) => {

92
packages/client/src/page/reader/comicPage.tsx
View file

@ -1,4 +1,3 @@
import { NavItem, NavItemButton } from "@/components/layout/nav";
import { PageNavItem } from "@/components/layout/navAtom";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@ -9,6 +8,7 @@ import { useEventListener } from "usehooks-ts";
import type { Document } from "dbtype";
import { useCallback, useEffect, useRef, useState } from "react";
import { Loader2 } from "lucide-react";
import { SidebarNavItem } from "@/components/layout/nav";
interface ComicPageProps {
params: {
@ -30,7 +30,8 @@ function ComicViewer({
const [fade, setFade] = useState(false);
const pageDown = useCallback((step: number) => setCurPage(Math.max(curPage - step, 0)), [curPage, setCurPage]);
const pageUp = useCallback((step: number) => setCurPage(Math.min(curPage + step, totalPage - 1)), [curPage, setCurPage, totalPage]);
const currentImageRef = useRef<HTMLImageElement>(null);
const makeSrc = useCallback((page: number) => `/api/doc/${doc.id}/comic/${page}`, [doc.id]);
const [src, setSrc] = useState(() => makeSrc(curPage));
useEffect(() => {
const onKeyUp = (e: KeyboardEvent) => {
@ -48,46 +49,44 @@ function ComicViewer({
}, [pageDown, pageUp]);
useEffect(() => {
if (currentImageRef.current) {
if (curPage < 0 || curPage >= totalPage) {
return;
}
const img = new Image();
img.src = `/api/doc/${doc.id}/comic/${curPage}`;
if (img.complete) {
currentImageRef.current.src = img.src;
const preloadImg = new Image();
preloadImg.src = `/api/doc/${doc.id}/comic/${curPage}`;
if (preloadImg.complete) {
setSrc(preloadImg.src);
setFade(false);
return;
}
setFade(true);
const listener = () => {
// biome-ignore lint/style/noNonNullAssertion: <explanation>
const currentImage = currentImageRef.current!;
currentImage.src = img.src;
setSrc(preloadImg.src);
setFade(false);
};
img.addEventListener("load", listener);
preloadImg.addEventListener("load", listener);
return () => {
img.removeEventListener("load", listener);
preloadImg.removeEventListener("load", listener);
// abort loading
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
// TODO: use web worker to abort loading image in the future
preloadImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
// img 객체가 GC 되도록 함
};
}
}, [curPage, doc.id, totalPage]);
return (
<div className="overflow-hidden w-full h-dvh relative">
<div className="absolute left-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageDown(1)} />
<div className="absolute left-0 w-1/2 h-full z-10 select-none" onPointerDown={() => pageDown(1)} />
<img
ref={currentImageRef}
className={cn("max-w-full max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute",
fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100"
)}
alt="main content" />
<div className="absolute right-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageUp(1)} />
src={src}
alt="main content"
/>
<div className="absolute right-0 w-1/2 h-full z-10 select-none" onPointerDown={() => pageUp(1)} />
{curPage + 1 < totalPage && (
<img src={`/api/doc/${doc.id}/comic/${curPage + 1}`} alt="next page" className="sr-only" />
<img src={makeSrc(curPage + 1)} alt="next page" className="sr-only" />
)}
</div>
);
@ -145,31 +144,46 @@ export default function ComicPage({
}
return (
<PageNavItem items={<>
<NavItem
className="flex-1"
to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />} />
<NavItemButton
className="flex-1"
name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"}
icon={isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
onClick={() => {
toggleFullScreen();
}} />
<Popover>
<PopoverTrigger
className="flex-1"
<PageNavItem navRender={() =>
<>
<SidebarNavItem
name="Back"
to={`/doc/${params.id}`}
>
<span className="text-sm text-ellipsis" >{curPage + 1}/{data.additional.page as number}</span>
<ExitIcon />
</SidebarNavItem>
<SidebarNavItem
name={isFullScreen ? "Exit FS" : "Enter FS"}
onClick={toggleFullScreen}
>
{isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
</SidebarNavItem>
<Popover>
<SidebarNavItem
name="Page"
>
<PopoverTrigger asChild>
<span className="text-xs truncate leading-normal">
{curPage + 1}/{data.additional.page as number}
</span>
</PopoverTrigger>
</SidebarNavItem>
<PopoverContent className="w-28">
<Input type="number" value={curPage + 1} onChange={(e) =>
setCurPage(clip(Number.parseInt(e.target.value) - 1,
<Input
type="number"
value={curPage + 1}
onChange={(e) =>
setCurPage(clip(
Number.parseInt(e.target.value) - 1,
0,
(data.additional.page as number) - 1))} />
(data.additional.page as number) - 1
))
}
/>
</PopoverContent>
</Popover>
</>}>
</>
}>
<ComicViewer
curPage={curPage}
onChangePage={setCurPage}