From c99f5c83ee81ec9fd63b65b88519af9ff145e6a2 Mon Sep 17 00:00:00 2001 From: Max <112043822+Maxaubert@users.noreply.github.com> Date: Wed, 7 Oct 2026 01:31:44 +0200 Subject: [PATCH 1/2] feat(explorer): Sidebar position moves the Explorer's sidebar, the preview takes the other side (#304) One Sidebar position row (prism.tree.side), first in Explorer > Layout, moves the Explorer's places panel and the project tree together. On Right the places sit at the window's right edge, the preview pane at the left and its toggle leads the address row; grips, hide, peek and the see-through ground all hold mirrored. Left is unchanged. Project settings no longer carries the row. Version 0.93.0. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01FHHaWKR4M5QtW7Wecyuk4t --- CLAUDE.md | 14 + package-lock.json | 4 +- package.json | 2 +- src/renderer/src/App.tsx | 8 +- .../src/components/browse/BrowseToolbar.tsx | 5 + .../src/components/browse/ExplorerResize.tsx | 19 +- .../src/components/browse/FolderBrowser.tsx | 101 +++-- src/renderer/src/components/browse/browse.css | 46 ++ src/renderer/src/components/browse/types.ts | 3 + .../src/components/browse/workspace.css | 28 +- .../src/components/settings/ExplorerPage.tsx | 9 + .../src/components/settings/ProjectPage.tsx | 15 +- .../components/settings/appOptions.test.ts | 7 +- .../src/components/settings/appOptions.ts | 2 +- .../src/components/settings/settingsIndex.ts | 4 +- tools/e2e/run.mjs | 401 +++++++++++++++--- 16 files changed, 548 insertions(+), 120 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index da012e53..62969860 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2652,6 +2652,20 @@ Filesmith's conventions. setting"). `ProjectPage.tsx` holds Sidebar position and First view of a new project; Folder for new tabs stays on Explorer, since the + and Ctrl+T open an Explorer tab. Scroll to the open file is gone and a stored `prism.tree.autoscroll` is ignored. +- **SIDEBAR POSITION MOVES THE EXPLORER'S SIDEBAR TOO, AND THE PREVIEW TAKES THE OTHER SIDE** (#304; + owner, 2026-10-07: "fix the setting in Explorer for the sidebar where you can put it on the right + side or the left side? I think that's just an empty setting for now, but actually implement it. + And remember that when the sidebar goes on the right, the preview menu and button to open it would + have to go on the left"). ONE row, `tree-side` (key `prism.tree.side`, unchanged), first in + Explorer > Layout, for the places panel AND the project tree; Project settings no longer carries + it. On Right: `.folder-browser[data-side='right']` is a three-column grid (preview, list, places; + the preview column 0px while shut, so its slide still tweens one column), the places come after + the list in the DOM (Tab walks left to right), the preview toggle LEADS the address row (before + Back, the end nearest the pane), the viewer laid over the slot sits at `left: 0` + (`.browse-workspace[data-sidebar-side='right']`), each grip is its left twin turned round + (`ExplorerResize`'s `edge`: a drag toward the middle widens), and the places peek from the right + edge. Left is the window as it was, box for box. The `explorerSide` e2e holds it (it fails on + main), one coat of a see-through ground included. - **The viewer lives here for now.** The plan is a shared package, **`prism-core`**, which diff --git a/package-lock.json b/package-lock.json index 4f6150d3..c5797b71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "prism", - "version": "0.92.1", + "version": "0.93.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "prism", - "version": "0.92.1", + "version": "0.93.0", "license": "MIT", "dependencies": { "@codemirror/commands": "^6.11.0", diff --git a/package.json b/package.json index be068b68..af0b71d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prism", - "version": "0.92.1", + "version": "0.93.0", "description": "A fast, universal media viewer for Windows.", "author": "Max", "license": "MIT", diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 4a28afee..3d924307 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -2608,7 +2608,8 @@ export default function App(): JSX.Element { const peekPlaces = !!peekTarget?.startsWith('places:') const { phase: peekPhase, end: endPeek } = useSidebarPeek({ target: peekTarget, - side: peekPlaces ? 'left' : treeSide, + // One Sidebar position for both panels (#304): the places peek from it too. + side: treeSide, zone: () => document.querySelector('.browse-workspace'), panel: () => document.querySelector( @@ -4034,6 +4035,7 @@ export default function App(): JSX.Element { : undefined } data-preview-sliding={previewSlide.sliding || undefined} + data-sidebar-side={treeSide === 'right' ? 'right' : undefined} className={`browse-workspace relative flex min-h-0 flex-1 ${browsing.folder ? 'is-browsing' : ''} ${treeSide === 'right' ? 'flex-row-reverse' : ''} ${ settingsOpen || setup ? 'invisible' : '' }`} @@ -4046,7 +4048,7 @@ export default function App(): JSX.Element { section="places" bounds={explorerWidths.bounds.places} onResize={(width) => explorerWidths.resize('places', width)} - right={!browsing.folder && treeSide === 'right'} + edge={treeSide} /> )} {active && active.kind !== 'settings' && !fullscreen && ( @@ -4140,6 +4142,7 @@ export default function App(): JSX.Element { placesVisible={isExplorerTab(active) ? placesVisible : false} placesSliding={isExplorerTab(active) && panelSliding} placesPeek={peekPlaces ? peekPhase : null} + side={treeSide} onPinPlaces={pinFromPeek} onPlacePicked={endPeek} onOpenProject={isExplorerTab(active) ? openAsProject : undefined} @@ -4239,6 +4242,7 @@ export default function App(): JSX.Element { section="preview" bounds={explorerWidths.bounds.preview} onResize={(width) => explorerWidths.resize('preview', width)} + edge={treeSide === 'right' ? 'left' : 'right'} /> )} {!browsing.folder && diff --git a/src/renderer/src/components/browse/BrowseToolbar.tsx b/src/renderer/src/components/browse/BrowseToolbar.tsx index 883d3644..0b44730c 100644 --- a/src/renderer/src/components/browse/BrowseToolbar.tsx +++ b/src/renderer/src/components/browse/BrowseToolbar.tsx @@ -30,6 +30,10 @@ type Props = Pick< /** What sits after the address field: the Explorer's preview toggle and * search button (#267). The file viewer's toolbar has none. */ trailing?: ReactNode + /** What sits BEFORE the history buttons: the preview toggle, when the + * sidebar is on the right and the preview pane on the left (#304), so the + * toggle is at the end nearest the pane it opens. */ + leading?: ReactNode /** The archives along the path (#300, `ArchiveMeta.chain`): those crumbs * wear the archive icon. Before main has answered, a crumb named like an * archive with more path after it is taken to be one. */ @@ -71,6 +75,7 @@ export function BrowseToolbar(props: Props): JSX.Element { } return (
+ {props.leading}
+ ) + const places = (props.placesVisible !== false || sliding || !!props.placesPeek) && ( + { + props.onPlacePicked?.() + props.onQuickAccessFile?.(path, full) + } + : props.onQuickAccessFile + } + onPin={props.placesPeek === 'in' ? props.onPinPlaces : undefined} + onUnpinQuickAccess={props.onUnpinQuickAccess} + onMoveQuickAccess={props.onMoveQuickAccess} + onPinQuickAccessPaths={props.onPinQuickAccessPaths} + directory={props.directory} + chosenPlace={chosenPlace} + onChoosePlace={setChosenPlace} + onNavigate={ + props.placesPeek + ? (path) => { + props.onPlacePicked?.() + props.onNavigate(path) + } + : props.onNavigate + } + onNewTerminal={props.onNewTerminal} + onOpenProject={props.onOpenProject} + onOpenNewTab={props.onOpenNewTab} + /> + ) + return (
{props.terminalControls && (
{props.terminalControls}
)} - + {!right && previewToggle}