e1585b4f71
- Introduced a new IPC handler for reading binary files as base64 for inline previews, enhancing the editor's capability to display images directly. - Implemented a placeholder component for non-previewable binary files, providing users with file information and an option to open in the system viewer. - Enhanced the EditorFileWatcher to ignore permission errors and adjusted debounce timing for better performance during file system events. - Updated the ProjectFileService to include a method for reading binary previews with security checks and MIME type validation. - Improved the EditorImagePreview component to handle loading states and display images with a checkerboard background for transparency. - Refactored the EditorBinaryState component to utilize the new binary preview functionality, streamlining the display of binary files.
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
/**
|
|
* Status bar: cursor position, language, encoding, indent style, git branch.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
|
|
import { useStore } from '@renderer/store';
|
|
import { GitBranch } from 'lucide-react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
interface EditorStatusBarProps {
|
|
line: number;
|
|
col: number;
|
|
language: string;
|
|
}
|
|
|
|
export const EditorStatusBar = React.memo(function EditorStatusBar({
|
|
line,
|
|
col,
|
|
language,
|
|
}: EditorStatusBarProps): React.ReactElement {
|
|
const { gitBranch, isGitRepo, watcherEnabled } = useStore(
|
|
useShallow((s) => ({
|
|
gitBranch: s.editorGitBranch,
|
|
isGitRepo: s.editorIsGitRepo,
|
|
watcherEnabled: s.editorWatcherEnabled,
|
|
}))
|
|
);
|
|
const toggleWatcher = useStore((s) => s.toggleWatcher);
|
|
|
|
return (
|
|
<div className="flex h-6 shrink-0 items-center justify-between border-t border-border bg-surface-sidebar px-3 text-[11px] text-text-muted">
|
|
<div className="flex items-center gap-4">
|
|
<span>
|
|
Ln {line}, Col {col}
|
|
</span>
|
|
{isGitRepo && gitBranch && (
|
|
<span className="flex items-center gap-1">
|
|
<GitBranch className="size-3" />
|
|
{gitBranch}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => void toggleWatcher(!watcherEnabled)}
|
|
className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
|
|
watcherEnabled
|
|
? 'bg-green-500/15 text-green-400 hover:bg-green-500/20'
|
|
: 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
|
|
}`}
|
|
aria-label={watcherEnabled ? 'Disable file watcher' : 'Enable file watcher'}
|
|
aria-pressed={watcherEnabled}
|
|
>
|
|
{watcherEnabled ? 'watching' : 'watch'}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
{watcherEnabled ? 'Disable external change watcher' : 'Watch for external changes'}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<span>{language}</span>
|
|
<span>UTF-8</span>
|
|
<span>Spaces: 2</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|