feat: enhance sidebar and editor functionality

- Updated AllNotesSidebar to render via portal for improved stacking context.
- Refactored sidebar styles and behavior for better user experience.
- Modified AppSidebarProvider to limit recent notes to 5 and sort by updated date.
- Improved editor page to handle document state updates and query invalidation on note creation.
- Added loading messages to translations for better user feedback during operations.
This commit is contained in:
Anish Sarkar 2025-12-16 20:14:54 +05:30
parent 5da41d91c8
commit 82d8320928
8 changed files with 139 additions and 118 deletions

View file

@ -1,6 +1,6 @@
"use client";
import { ChevronRight, Mail } from "lucide-react";
import { Mail } from "lucide-react";
import { Progress } from "@/components/ui/progress";
import {
SidebarGroup,
@ -8,7 +8,6 @@ import {
SidebarGroupLabel,
useSidebar,
} from "@/components/ui/sidebar";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
interface PageUsageDisplayProps {
pagesUsed: number;
@ -22,16 +21,19 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
return (
<SidebarGroup>
<Collapsible defaultOpen={false} className="group-data-[collapsible=icon]:hidden">
<CollapsibleTrigger asChild>
<SidebarGroupLabel className="cursor-pointer hover:bg-sidebar-accent rounded-md px-2 py-1.5 -mx-2 transition-colors flex items-center justify-between group">
<span>Page Usage</span>
<ChevronRight className="h-4 w-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" />
</SidebarGroupLabel>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarGroupContent>
<div className="space-y-2 px-2 py-2">
<SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">
Page Usage
</SidebarGroupLabel>
<SidebarGroupContent>
<div className="space-y-2 px-2 py-2">
{isCollapsed ? (
// Show only a compact progress indicator when collapsed
<div className="flex justify-center">
<Progress value={usagePercentage} className="h-2 w-8" />
</div>
) : (
// Show full details when expanded
<>
<div className="flex justify-between items-center text-xs">
<span className="text-muted-foreground">
{pagesUsed.toLocaleString()} / {pagesLimit.toLocaleString()} pages
@ -52,18 +54,10 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
to increase limits
</p>
</div>
</div>
</SidebarGroupContent>
</CollapsibleContent>
</Collapsible>
{isCollapsed && (
// Show only a compact progress indicator when sidebar is collapsed
<SidebarGroupContent>
<div className="flex justify-center px-2 py-2">
<Progress value={usagePercentage} className="h-2 w-8" />
</div>
</SidebarGroupContent>
)}
</>
)}
</div>
</SidebarGroupContent>
</SidebarGroup>
);
}