From 18b4a6ea248827eefde98171b828dc93e7bbdc59 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 23 Apr 2026 21:03:12 +0530
Subject: [PATCH] refactor(ui): update icon imports and adjust button styles in
 editor and report panels

---
 .../components/editor-panel/editor-panel.tsx  |  2 +-
 .../layout/ui/right-panel/RightPanel.tsx      |  4 +-
 .../ui/sidebar/SidebarCollapseButton.tsx      |  4 +-
 .../components/report-panel/report-panel.tsx  | 38 ++++++++++---------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx
index 3a522d374..1f1b41c3e 100644
--- a/surfsense_web/components/editor-panel/editor-panel.tsx
+++ b/surfsense_web/components/editor-panel/editor-panel.tsx
@@ -311,7 +311,7 @@ export function EditorPanelContent({
 		<>
 			{showDesktopHeader ? (
 				<div className="shrink-0 border-b">
-					<div className="flex h-12 items-center justify-between px-4">
+					<div className="flex h-14 items-center justify-between px-4">
 						<h2 className="text-lg font-medium text-muted-foreground select-none">File</h2>
 						<div className="flex items-center gap-1 shrink-0">
 							<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index c2422bf34..c26cc9b23 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { PanelRight, PanelRightClose } from "lucide-react";
+import { PanelRight } from "lucide-react";
 import dynamic from "next/dynamic";
 import { startTransition, useEffect } from "react";
 import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@@ -49,7 +49,7 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
 		<Tooltip>
 			<TooltipTrigger asChild>
 				<Button variant="ghost" size="icon" onClick={onClick} className="h-8 w-8 shrink-0">
-					<PanelRightClose className="h-4 w-4" />
+					<PanelRight className="h-4 w-4" />
 					<span className="sr-only">Collapse panel</span>
 				</Button>
 			</TooltipTrigger>
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
index a01937cd6..0eb409349 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { PanelLeft, PanelLeftClose } from "lucide-react";
+import { PanelLeft } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
@@ -23,7 +23,7 @@ export function SidebarCollapseButton({
 
 	const button = (
 		<Button variant="ghost" size="icon" onClick={onToggle} className="h-8 w-8 shrink-0">
-			{isCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+			<PanelLeft className="h-4 w-4" />
 			<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>
 		</Button>
 	);
diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 0f6614ebf..c7a8509ed 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import { ChevronDownIcon, Pencil, XIcon } from "lucide-react";
+import { Check, ChevronDownIcon, Copy, Pencil, XIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -306,7 +306,6 @@ export function ReportPanelContent({
 
 	const activeVersionIndex = versions.findIndex((v) => v.id === activeReportId);
 	const isPublic = !!shareToken;
-	const btnBg = isPublic ? "bg-main-panel" : "bg-sidebar";
 	const isResume = reportContent?.content_type === "typst";
 	const showReportEditingTier = !isResume;
 	const hasUnsavedChanges = editedMarkdown !== null;
@@ -322,19 +321,6 @@ export function ReportPanelContent({
 			{/* Action bar — always visible; buttons are disabled while loading */}
 			<div className="flex h-14 items-center justify-between px-4 shrink-0">
 				<div className="flex items-center gap-2">
-					{/* Copy button — hidden for Typst (resume) */}
-					{reportContent?.content_type !== "typst" && (
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={handleCopy}
-							disabled={isLoading || !reportContent?.content}
-							className={`h-8 min-w-[80px] px-3.5 py-4 text-[15px] ${btnBg} select-none`}
-						>
-							{copied ? "Copied" : "Copy"}
-						</Button>
-					)}
-
 					{/* Export — plain button for resume (typst), dropdown for others */}
 					{reportContent?.content_type === "typst" ? (
 						<Button
@@ -342,7 +328,7 @@ export function ReportPanelContent({
 							size="sm"
 							onClick={() => handleExport("pdf")}
 							disabled={isLoading || !reportContent?.content || exporting !== null}
-							className={`h-8 min-w-[100px] px-3.5 py-4 text-[15px] ${btnBg} select-none`}
+							className={`h-8 min-w-[100px] px-3.5 py-4 text-[15px] ${isPublic ? "bg-main-panel" : "bg-sidebar"} select-none`}
 						>
 							{exporting === "pdf" ? <Spinner size="xs" /> : "Download"}
 						</Button>
@@ -353,7 +339,7 @@ export function ReportPanelContent({
 									variant="outline"
 									size="sm"
 									disabled={isLoading || !reportContent?.content}
-									className={`h-8 px-3.5 py-4 text-[15px] gap-1.5 ${btnBg} select-none`}
+									className={`h-8 px-3.5 py-4 text-[15px] gap-1.5 ${isPublic ? "bg-main-panel" : "bg-sidebar"} select-none`}
 								>
 									Export
 									<ChevronDownIcon className="size-3" />
@@ -379,7 +365,7 @@ export function ReportPanelContent({
 								<Button
 									variant="outline"
 									size="sm"
-									className={`h-8 px-3.5 py-4 text-[15px] gap-1.5 ${btnBg} select-none`}
+									className={`h-8 px-3.5 py-4 text-[15px] gap-1.5 ${isPublic ? "bg-main-panel" : "bg-sidebar"} select-none`}
 								>
 									v{activeVersionIndex + 1}
 									<ChevronDownIcon className="size-3" />
@@ -418,6 +404,22 @@ export function ReportPanelContent({
 						</p>
 					</div>
 					<div className="flex items-center gap-1 shrink-0">
+						{!isEditing && (
+							<Button
+								variant="ghost"
+								size="icon"
+								className="size-6"
+								onClick={() => {
+									void handleCopy();
+								}}
+								disabled={isLoading || !reportContent?.content}
+							>
+								{copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+								<span className="sr-only">
+									{copied ? "Copied report content" : "Copy report content"}
+								</span>
+							</Button>
+						)}
 						{!isReadOnly &&
 							(isEditing ? (
 								<>