refactor: replace button elements with Button component for improved consistency and styling across additional UI components

This commit is contained in:
Anish Sarkar 2026-05-14 14:40:08 +05:30
parent 3d42712b3f
commit ee72a49ab1
17 changed files with 274 additions and 263 deletions

View file

@ -348,8 +348,9 @@ export function AllPrivateChatsSidebarContent({
return (
<div key={thread.id} className="group/item relative w-full">
{isMobile ? (
<button
<Button
type="button"
variant="ghost"
onClick={() => {
if (wasLongPress()) return;
handleThreadClick(thread.id);
@ -362,7 +363,7 @@ export function AllPrivateChatsSidebarContent({
onTouchMove={longPressHandlers.onTouchMove}
disabled={isBusy}
className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
@ -370,16 +371,17 @@ export function AllPrivateChatsSidebarContent({
)}
>
<span className="truncate">{thread.title || "New Chat"}</span>
</button>
</Button>
) : (
<Tooltip delayDuration={600}>
<TooltipTrigger asChild>
<button
<Button
type="button"
variant="ghost"
onClick={() => handleThreadClick(thread.id)}
disabled={isBusy}
className={cn(
"flex w-full items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-sm text-left",
"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",
"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
isActive && "bg-accent text-accent-foreground",
@ -387,7 +389,7 @@ export function AllPrivateChatsSidebarContent({
)}
>
<span className="truncate">{thread.title || "New Chat"}</span>
</button>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" align="start">
<p>

View file

@ -3,9 +3,11 @@
import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { DEFAULT_EXCLUDE_PATTERNS } from "@/components/sources/FolderWatchDialog";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Spinner } from "@/components/ui/spinner";
import { useElectronAPI } from "@/hooks/use-platform";
import { cn } from "@/lib/utils";
interface LocalFilesystemBrowserProps {
rootPaths: string[];
@ -409,10 +411,11 @@ export function LocalFilesystemBrowser({
const files = [...folder.files].sort((a, b) => a.relativePath.localeCompare(b.relativePath));
return (
<div key={folder.key} className="select-none">
<button
<Button
type="button"
variant="ghost"
onClick={() => toggleFolder(folder.key)}
className="flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
className="h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal hover:bg-accent hover:text-accent-foreground"
style={{ paddingInlineStart: `${depth * 12 + 8}px` }}
draggable={false}
>
@ -423,7 +426,7 @@ export function LocalFilesystemBrowser({
)}
<FolderIcon className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{folder.name}</span>
</button>
</Button>
{isExpanded && (
<>
{childFolders.map((childFolder) => renderFolder(childFolder, depth + 1, mount))}
@ -431,17 +434,21 @@ export function LocalFilesystemBrowser({
const extension = getNormalizedExtension(file.relativePath);
const isOpenable = openableExtensions.has(extension);
return (
<button
<Button
key={file.fullPath}
type="button"
variant="ghost"
onClick={
isOpenable
? () => onOpenFile(toMountedVirtualPath(mount, file.relativePath))
: undefined
}
className={`flex h-8 w-full items-center gap-1.5 rounded-md px-2 text-left text-sm transition-colors ${
isOpenable ? "hover:bg-accent hover:text-accent-foreground" : "cursor-not-allowed opacity-60"
}`}
className={cn(
"h-8 w-full justify-start gap-1.5 px-2 text-left text-sm font-normal",
isOpenable
? "hover:bg-accent hover:text-accent-foreground"
: "cursor-not-allowed opacity-60"
)}
style={{ paddingInlineStart: `${(depth + 1) * 12 + 22}px` }}
title={
isOpenable
@ -453,7 +460,7 @@ export function LocalFilesystemBrowser({
>
<FileText className="size-3.5 shrink-0 text-muted-foreground" />
<span className="truncate">{getFileName(file.relativePath)}</span>
</button>
</Button>
);
})}
</>