feat: enhance report panel and generation UI

This commit is contained in:
Anish Sarkar 2026-02-11 21:39:22 +05:30
parent be1b6f370f
commit 59628fdf76
2 changed files with 7 additions and 3 deletions

View file

@ -100,10 +100,13 @@ function ReportPanelContent({
reportId, reportId,
title, title,
onClose, onClose,
insideDrawer = false,
}: { }: {
reportId: number; reportId: number;
title: string; title: string;
onClose?: () => void; onClose?: () => void;
/** When true, adjusts dropdown behavior to work inside a Vaul drawer on mobile */
insideDrawer?: boolean;
}) { }) {
const [reportContent, setReportContent] = const [reportContent, setReportContent] =
useState<ReportContentResponse | null>(null); useState<ReportContentResponse | null>(null);
@ -260,7 +263,7 @@ function ReportPanelContent({
)} )}
{copied ? "Copied" : "Copy"} {copied ? "Copied" : "Copy"}
</Button> </Button>
<DropdownMenu> <DropdownMenu modal={insideDrawer ? false : undefined}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="outline" variant="outline"
@ -271,7 +274,7 @@ function ReportPanelContent({
<span className="sr-only">Download options</span> <span className="sr-only">Download options</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="min-w-[180px]"> <DropdownMenuContent align="start" className={`min-w-[180px]${insideDrawer ? " z-[100]" : ""}`}>
<DropdownMenuItem onClick={() => handleExport("md")}> <DropdownMenuItem onClick={() => handleExport("md")}>
<DownloadIcon className="size-4" /> <DownloadIcon className="size-4" />
Download Markdown Download Markdown
@ -391,6 +394,7 @@ function MobileReportDrawer() {
<ReportPanelContent <ReportPanelContent
reportId={panelState.reportId} reportId={panelState.reportId}
title={panelState.title || "Report"} title={panelState.title || "Report"}
insideDrawer
/> />
</div> </div>
</DrawerContent> </DrawerContent>

View file

@ -65,7 +65,7 @@ function ReportGeneratingState({ topic }: { topic: string }) {
<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight truncate"> <h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight truncate">
{topic} {topic}
</h3> </h3>
<TextShimmerLoader text="Writing report…" size="sm" /> <TextShimmerLoader text="Putting things together" size="sm" />
</div> </div>
</div> </div>
</div> </div>