mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-06 22:12:12 +02:00
refactor(ui): update icon imports and adjust button styles in editor and report panels
This commit is contained in:
parent
b5921bf139
commit
18b4a6ea24
4 changed files with 25 additions and 23 deletions
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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 ? (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue