refactor(ui): update icon imports and adjust button styles in editor and report panels

This commit is contained in:
Anish Sarkar 2026-04-23 21:03:12 +05:30
parent b5921bf139
commit 18b4a6ea24
4 changed files with 25 additions and 23 deletions

View file

@ -311,7 +311,7 @@ export function EditorPanelContent({
<> <>
{showDesktopHeader ? ( {showDesktopHeader ? (
<div className="shrink-0 border-b"> <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> <h2 className="text-lg font-medium text-muted-foreground select-none">File</h2>
<div className="flex items-center gap-1 shrink-0"> <div className="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0"> <Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { PanelRight, PanelRightClose } from "lucide-react"; import { PanelRight } from "lucide-react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { startTransition, useEffect } from "react"; import { startTransition, useEffect } from "react";
import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom"; import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@ -49,7 +49,7 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={onClick} className="h-8 w-8 shrink-0"> <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> <span className="sr-only">Collapse panel</span>
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { PanelLeft, PanelLeftClose } from "lucide-react"; import { PanelLeft } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ShortcutKbd } from "@/components/ui/shortcut-kbd"; import { ShortcutKbd } from "@/components/ui/shortcut-kbd";
@ -23,7 +23,7 @@ export function SidebarCollapseButton({
const button = ( const button = (
<Button variant="ghost" size="icon" onClick={onToggle} className="h-8 w-8 shrink-0"> <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> <span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>
</Button> </Button>
); );

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { useAtomValue, useSetAtom } from "jotai"; 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 dynamic from "next/dynamic";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
@ -306,7 +306,6 @@ export function ReportPanelContent({
const activeVersionIndex = versions.findIndex((v) => v.id === activeReportId); const activeVersionIndex = versions.findIndex((v) => v.id === activeReportId);
const isPublic = !!shareToken; const isPublic = !!shareToken;
const btnBg = isPublic ? "bg-main-panel" : "bg-sidebar";
const isResume = reportContent?.content_type === "typst"; const isResume = reportContent?.content_type === "typst";
const showReportEditingTier = !isResume; const showReportEditingTier = !isResume;
const hasUnsavedChanges = editedMarkdown !== null; const hasUnsavedChanges = editedMarkdown !== null;
@ -322,19 +321,6 @@ export function ReportPanelContent({
{/* Action bar — always visible; buttons are disabled while loading */} {/* 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 h-14 items-center justify-between px-4 shrink-0">
<div className="flex items-center gap-2"> <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 */} {/* Export — plain button for resume (typst), dropdown for others */}
{reportContent?.content_type === "typst" ? ( {reportContent?.content_type === "typst" ? (
<Button <Button
@ -342,7 +328,7 @@ export function ReportPanelContent({
size="sm" size="sm"
onClick={() => handleExport("pdf")} onClick={() => handleExport("pdf")}
disabled={isLoading || !reportContent?.content || exporting !== null} 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"} {exporting === "pdf" ? <Spinner size="xs" /> : "Download"}
</Button> </Button>
@ -353,7 +339,7 @@ export function ReportPanelContent({
variant="outline" variant="outline"
size="sm" size="sm"
disabled={isLoading || !reportContent?.content} 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 Export
<ChevronDownIcon className="size-3" /> <ChevronDownIcon className="size-3" />
@ -379,7 +365,7 @@ export function ReportPanelContent({
<Button <Button
variant="outline" variant="outline"
size="sm" 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} v{activeVersionIndex + 1}
<ChevronDownIcon className="size-3" /> <ChevronDownIcon className="size-3" />
@ -418,6 +404,22 @@ export function ReportPanelContent({
</p> </p>
</div> </div>
<div className="flex items-center gap-1 shrink-0"> <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 && {!isReadOnly &&
(isEditing ? ( (isEditing ? (
<> <>