Skip to content

pdf viewer sidebar-aware rounding and small polish #770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
moehdotdev merged 1 commit into from
May 25, 2026
Merged

pdf viewer sidebar-aware rounding and small polish #770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions app/home/[id]/pdf/[pdfId]/PdfViewerPageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ import {
} from "@/components/ui/tooltip";
import { useHoverTooltip } from "@/hooks/useHoverTooltip";
import PdfSettings from "@/components/home-components/PdfSettings";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
import BreadcrumbWithCustomSeparator from "@/components/home-components/BreadcrumbWithCustomSeparator";

GlobalWorkerOptions.workerSrc = new URL(
"pdfjs-dist/legacy/build/pdf.worker.mjs",
Expand Down Expand Up @@ -480,6 +482,7 @@ function PdfViewerContent({
pdfId: Id<"pdfs">;
pdftitle: string;
}) {
const { open, isMobile } = useSidebar();
const [query, setQuery] = useState("");
const [panelMode, setPanelMode] = useState<PanelMode>(null);
const searchTooltip = useHoverTooltip(100);
Expand All @@ -494,8 +497,10 @@ function PdfViewerContent({
}
>
<div className=" relative min-w-full min-h-full bg-transparent ">
<div className="pointer-events-none absolute inset-x-0 top-1 z-50">
<div className="pointer-events-auto mx-auto flex w-fit flex-nowrap items-center justify-between gap-1 app-radius-lg border border-border bg-card/95 px-0.5 py-0.5 backdrop-blur-xl">
<div className=" pointer-events-none absolute inset-x-0 top-1 z-50">
<div
className={`pointer-events-auto mx-auto flex w-fit flex-nowrap items-center justify-between gap-1 ${open && !isMobile ? ` app-radius-lg` : null} border border-border bg-card/95 px-0.5 py-0.5 backdrop-blur-xl`}
>
<div className="flex items-center gap-0">
<Tooltip open={searchTooltip.open}>
<TooltipTrigger asChild>
Expand Down Expand Up @@ -610,11 +615,13 @@ function PdfViewerShell({
pdfId: Id<"pdfs">;
pdftitle: string;
}) {
const { open, isMobile } = useSidebar();

return (
<Root
source={fileUrl}
isZoomFitWidth
className="rounded-tl-lg pdf-viewer-shell relative h-full w-full overflow-hidden rounded-none border-0 bg-background flex flex-col justify-stretch"
className={`${open && !isMobile ? `app-radius-lg` : null} pdf-viewer-shell relative h-full w-full overflow-hidden rounded-none border-0 bg-background flex flex-col justify-stretch`}
loader={
<div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
Loading PDF...
Expand Down
2 changes: 1 addition & 1 deletion components/home-components/HomeClientLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const HomeContent = memo(({ children }: { children: ReactNode }) => {
<div className="z-[60000] absolute top-0 left-0 w-full flex items-center justify-start gap-3 mx-auto bg-none rounded-tl-lg border-none">
<div className="flex justify-between items-center w-full px-4 py-2 ">
<div className="flex justify-start items-center gap-3">
{(!open || isMobile) && <SidebarTrigger />}
{(!open || isMobile) && !isPdfRoute && <SidebarTrigger />}
{!isPdfRoute ? <BreadcrumbWithCustomSeparator /> : null}
</div>
<div>
Expand Down
4 changes: 2 additions & 2 deletions components/home-components/MoveNoteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,10 +189,10 @@ export default function MoveNoteDialog({
title: "Note moved successfully ",
description: "hey go and take a look at your stuff !!",
action: (
<Button variant="secondary" className="px-4 " size="sm">
<Button variant="secondary" className="px-3 h-8" size="sm">
<IntentPrefetchLink
href={`/home/${result.workingSpaceId}/${result.slug}?id=${note._id}`}
className="flex justify-center items-center gap-2"
className="flex justify-center items-center gap-2 text-xs"
>
<FileSymlink size={16} />
Checkout
Expand Down
2 changes: 1 addition & 1 deletion components/home-components/MovePdfDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default function MovePdfDialog({
title: "Upload moved successfully",
description: "Jump straight to the file in its new location.",
action: (
<Button variant="secondary" className="px-4" size="sm" asChild>
<Button variant="secondary" className="px-3 h-8" size="sm" asChild>
<IntentPrefetchLink
href={`/home/${result.workingSpaceId}/pdf/${pdfSlug}?pdfId=${pdf._id}`}
className="flex justify-center items-center gap-2"
Expand Down
4 changes: 2 additions & 2 deletions components/ui/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;

const toastVariants = cva(
"group pointer-events-auto relative backdrop-blur-sm flex w-full items-center justify-between space-x-2 overflow-hidden app-radius-md border p-2.5 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
"group pointer-events-auto relative backdrop-blur-sm flex w-full items-center justify-between space-x-2 overflow-hidden app-radius-md border p-2.5 pr-7 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
Expand Down Expand Up @@ -78,7 +78,7 @@ const ToastClose = React.forwardRef<
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-1 top-1 app-radius-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
"absolute right-0.5 top-0.5 p-0.5 app-radius-md text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
className,
)}
toast-close=""
Expand Down