feat: move properties icon to toolbar when inspector panel is closed
This commit is contained in:
5381
design/move-properties-icon.pen
Normal file
5381
design/move-properties-icon.pen
Normal file
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,7 @@ import {
|
||||
GitBranch,
|
||||
CursorText,
|
||||
Sparkle,
|
||||
SlidersHorizontal,
|
||||
DotsThree,
|
||||
} from '@phosphor-icons/react'
|
||||
|
||||
@@ -19,13 +20,15 @@ interface BreadcrumbBarProps {
|
||||
onToggleDiff: () => void
|
||||
showAIChat?: boolean
|
||||
onToggleAIChat?: () => void
|
||||
inspectorCollapsed?: boolean
|
||||
onToggleInspector?: () => void
|
||||
}
|
||||
|
||||
const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
|
||||
|
||||
export const BreadcrumbBar = memo(function BreadcrumbBar({
|
||||
entry, wordCount, isModified, showDiffToggle, diffMode, diffLoading,
|
||||
onToggleDiff, showAIChat, onToggleAIChat,
|
||||
onToggleDiff, showAIChat, onToggleAIChat, inspectorCollapsed, onToggleInspector,
|
||||
}: BreadcrumbBarProps) {
|
||||
return (
|
||||
<div
|
||||
@@ -101,6 +104,15 @@ export const BreadcrumbBar = memo(function BreadcrumbBar({
|
||||
>
|
||||
<Sparkle size={16} weight={showAIChat ? 'fill' : 'regular'} />
|
||||
</button>
|
||||
{inspectorCollapsed && (
|
||||
<button
|
||||
className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
|
||||
onClick={onToggleInspector}
|
||||
title="Open Properties"
|
||||
>
|
||||
<SlidersHorizontal size={16} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="flex items-center justify-center border-none bg-transparent p-0 text-muted-foreground"
|
||||
style={DISABLED_ICON_STYLE}
|
||||
|
||||
@@ -349,6 +349,8 @@ export const Editor = memo(function Editor({
|
||||
onToggleDiff={handleToggleDiff}
|
||||
showAIChat={showAIChat}
|
||||
onToggleAIChat={onToggleAIChat}
|
||||
inspectorCollapsed={inspectorCollapsed}
|
||||
onToggleInspector={onToggleInspector}
|
||||
/>
|
||||
) : null
|
||||
|
||||
@@ -364,10 +366,10 @@ export const Editor = memo(function Editor({
|
||||
onClose={() => onToggleAIChat?.()}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
) : inspectorCollapsed ? null : (
|
||||
<div
|
||||
className="shrink-0 flex flex-col min-h-0"
|
||||
style={{ width: inspectorCollapsed ? 40 : inspectorWidth, height: '100%' }}
|
||||
style={{ width: inspectorWidth, height: '100%' }}
|
||||
>
|
||||
<Inspector
|
||||
collapsed={inspectorCollapsed}
|
||||
|
||||
Reference in New Issue
Block a user