root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move FileEditor disclosure toggle into FileBrowserModal toolbar row

Browse Source
This commit is contained in:
gsxdsm
2026-05-15 01:05:09 -07:00
parent 3c376b8903
commit fe83291eb8
2 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/dashboard/app/components/FileBrowserModal.tsx
View File

@@ -1,6 +1,6 @@
import "./FileBrowser.css";
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
import { X, Save, RotateCcw, Folder, FileType, ArrowLeft } from "lucide-react";
import { useState, useCallback, useEffect, useMemo, useRef, useId } from "react";
import { X, Save, RotateCcw, Folder, FileType, ArrowLeft, ChevronDown, ChevronUp } from "lucide-react";
import { useWorkspaceFileBrowser } from "../hooks/useWorkspaceFileBrowser";
import { useWorkspaceFileEditor } from "../hooks/useWorkspaceFileEditor";
import { useWorkspaces } from "../hooks/useWorkspaces";
@@ -85,6 +85,8 @@ export function FileBrowserModal({
const [mobileView, setMobileView] = useState<"list" | "editor">("list");
const [sidebarWidth, setSidebarWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
const [showLineNumbers, setShowLineNumbers] = useState(false);
const [toolbarActionsExpanded, setToolbarActionsExpanded] = useState(false);
const toolbarActionsId = useId();
const {
entries,
@@ -125,6 +127,7 @@ export function FileBrowserModal({
if (!selectedFile) {
setMobileView("list");
}
setToolbarActionsExpanded(false);
}, [selectedFile]);
useEffect(() => {
@@ -370,6 +373,18 @@ export function FileBrowserModal({
<span>Back</span>
</button>
)}
{!isBinaryFile(selectedFile) && (
<button
className="btn btn-sm btn-icon file-editor-toolbar-button"
onClick={() => setToolbarActionsExpanded((prev) => !prev)}
aria-label="Toggle editor options"
title="Toggle editor options"
aria-expanded={toolbarActionsExpanded}
aria-controls={toolbarActionsId}
>
{toolbarActionsExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
)}
{selectedFile}
{isBinaryFile(selectedFile) && (
<span className="file-browser-binary-indicator">
@@ -432,6 +447,8 @@ export function FileBrowserModal({
showLineNumbers={showLineNumbers && !isBinaryFile(selectedFile)}
onToggleLineNumbers={handleToggleLineNumbers}
canToggleLineNumbers={!isBinaryFile(selectedFile)}
toolbarExpanded={toolbarActionsExpanded}
toolbarActionsId={toolbarActionsId}
/>
</div>
)}

32
packages/dashboard/app/components/FileEditor.tsx
View File

@@ -16,6 +16,8 @@ interface FileEditorProps {
showLineNumbers?: boolean;
onToggleLineNumbers?: () => void;
canToggleLineNumbers?: boolean;
toolbarExpanded?: boolean;
toolbarActionsId?: string;
}
function isMarkdownFile(filePath?: string): boolean {
@@ -40,10 +42,15 @@ export function FileEditor({
showLineNumbers = false,
onToggleLineNumbers,
canToggleLineNumbers = true,
toolbarExpanded,
toolbarActionsId: externalToolbarActionsId,
}: FileEditorProps) {
const [showPreview, setShowPreview] = useState(false);
const [wordWrap, setWordWrap] = useState(true);
const [toolbarActionsExpanded, setToolbarActionsExpanded] = useState(false);
const [internalExpanded, setInternalExpanded] = useState(false);
const isControlled = toolbarExpanded !== undefined;
const expanded = isControlled ? toolbarExpanded : internalExpanded;
const editorHostRef = useRef<HTMLDivElement>(null);
const editorViewRef = useRef<EditorView | null>(null);
const syncingFromPropsRef = useRef(false);
@@ -57,7 +64,8 @@ export function FileEditor({
const themeCompartmentRef = useRef(new Compartment());
const isMarkdown = isMarkdownFile(filePath);
const toolbarActionsId = useId();
const generatedToolbarActionsId = useId();
const toolbarActionsId = externalToolbarActionsId ?? generatedToolbarActionsId;
const [darkThemeActive, setDarkThemeActive] = useState(() => isDarkTheme());
const effectiveShowPreview = isMarkdown && (readOnly ? true : showPreview);
@@ -69,7 +77,11 @@ export function FileEditor({
const handleEditClick = useCallback(() => setShowPreview(false), []);
const handlePreviewClick = useCallback(() => setShowPreview(true), []);
const handleWordWrapToggle = useCallback(() => setWordWrap((prev) => !prev), []);
const handleToolbarActionsToggle = useCallback(() => setToolbarActionsExpanded((prev) => !prev), []);
const handleToolbarActionsToggle = useCallback(() => {
if (!isControlled) {
setInternalExpanded((prev) => !prev);
}
}, [isControlled]);
useEffect(() => {
if (!editorHostRef.current || effectiveShowPreview) {
@@ -139,12 +151,14 @@ export function FileEditor({
return (
<div className="file-editor-container">
{hasToolbarActions ? (
<div className={`file-editor-toolbar ${toolbarActionsExpanded ? "file-editor-toolbar--expanded" : ""}`}>
<button className="btn btn-sm btn-icon file-editor-toolbar-button" onClick={handleToolbarActionsToggle} aria-label="Toggle editor options" title="Toggle editor options" aria-expanded={toolbarActionsExpanded} aria-controls={toolbarActionsId}>
{toolbarActionsExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
<div className="file-editor-toolbar-actions" id={toolbarActionsId} hidden={!toolbarActionsExpanded}>
{hasToolbarActions && (expanded || !isControlled) ? (
<div className={`file-editor-toolbar ${expanded ? "file-editor-toolbar--expanded" : ""}`}>
{!isControlled && (
<button className="btn btn-sm btn-icon file-editor-toolbar-button" onClick={handleToolbarActionsToggle} aria-label="Toggle editor options" title="Toggle editor options" aria-expanded={expanded} aria-controls={toolbarActionsId}>
{expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
)}
<div className="file-editor-toolbar-actions" id={toolbarActionsId} hidden={!expanded}>
{isMarkdown ? (
<>
{!readOnly && (