mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
Frank Stellmacher
7a7a9f5e6b
111 of 122 top-level src/utils/ files move into 16 topic folders (audio, cache, cover, share, server, playback, playlist, deviceSync, waveform, mix, format, export, changelog, ui, perf, componentHelpers). True singletons with no cluster stay at the utils/ root. Pure file-move: a path-aware codemod rewrote 539 relative-import specifiers across 275 files; no logic touched. The hot-path coverage gate list (.github/frontend-hot-path-files.txt) is updated to the new paths for the 11 gated utils files — a mechanical consequence of the move, not a CI change. tsc is green.
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import type { TFunction } from 'i18next';
|
|
import { PanelRight, PanelRightClose } from 'lucide-react';
|
|
import { shouldSuppressQueueResizerMouseDown } from '../utils/componentHelpers/appShellHelpers';
|
|
|
|
interface Props {
|
|
isQueueVisible: boolean;
|
|
queueWidth: number;
|
|
queueHandleTop: number | null;
|
|
isMainScrolling: boolean;
|
|
setIsDraggingQueue: React.Dispatch<React.SetStateAction<boolean>>;
|
|
handleQueueHandleMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
t: TFunction;
|
|
}
|
|
|
|
/**
|
|
* The seam between the main column and the queue panel — a 6px resizer
|
|
* strip and the round resize/toggle handle floating over it. Desktop-only.
|
|
*
|
|
* The strip's mousedown is intentionally elaborate: it has to ignore
|
|
* clicks aimed at the main viewport's overlay scrollbar thumb (which sits
|
|
* inside the resizer's overlap region) and self-heal a stale
|
|
* `is-overlay-scrollbar-thumb-drag` body flag if no thumb is actually
|
|
* dragging. The handle is fixed-positioned and aligned with the sidebar's
|
|
* collapse button so the two visually pair across resizes.
|
|
*/
|
|
export function AppShellQueueResizerSeam({
|
|
isQueueVisible,
|
|
queueWidth,
|
|
queueHandleTop,
|
|
isMainScrolling,
|
|
setIsDraggingQueue,
|
|
handleQueueHandleMouseDown,
|
|
t,
|
|
}: Props) {
|
|
return (
|
|
<>
|
|
<div
|
|
className="resizer resizer-queue"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
if (document.body.classList.contains('is-overlay-scrollbar-thumb-drag')) {
|
|
const activeThumbDrag = document.querySelector('.overlay-scroll__thumb.is-thumb-dragging');
|
|
if (!activeThumbDrag) {
|
|
document.body.classList.remove('is-overlay-scrollbar-thumb-drag');
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
if (shouldSuppressQueueResizerMouseDown(e.clientX, e.clientY, queueWidth)) return;
|
|
setIsDraggingQueue(true);
|
|
}}
|
|
style={{
|
|
display: isQueueVisible ? 'block' : 'none',
|
|
right: `${Math.max(0, queueWidth - 3)}px`,
|
|
}}
|
|
/>
|
|
{isQueueVisible && (
|
|
<button
|
|
type="button"
|
|
className="resizer-queue-handle"
|
|
onMouseDown={handleQueueHandleMouseDown}
|
|
style={{
|
|
position: 'fixed',
|
|
top: queueHandleTop != null ? `${queueHandleTop}px` : '50%',
|
|
right: `${Math.max(0, queueWidth - 11)}px`,
|
|
transform: 'translateY(-50%)',
|
|
zIndex: 101,
|
|
opacity: isMainScrolling ? 0 : 1,
|
|
pointerEvents: isMainScrolling ? 'none' : 'auto',
|
|
}}
|
|
data-tooltip={t('player.collapseQueueResize')}
|
|
data-tooltip-pos="left"
|
|
aria-label={t('player.collapseQueueResize')}
|
|
>
|
|
{isQueueVisible ? <PanelRightClose size={14} /> : <PanelRight size={14} />}
|
|
</button>
|
|
)}
|
|
</>
|
|
);
|
|
}
|