464 lines
18 KiB
TypeScript
464 lines
18 KiB
TypeScript
// Sliding horseshoe sheet for the channels workspace switcher. Mirror of
|
|
// `features/settings/MobileSettingsHorseshoe.tsx` (canonical, shipped in
|
|
// commit a7d6fc2) with three deliberate adaptations:
|
|
//
|
|
// • Single code path on web AND native — no
|
|
// `useScreenSizeContext()` mobile-only gate. The horseshoe lives
|
|
// wherever channels render, so a desktop tap on the workspace
|
|
// footer slides the sheet up inside the PageNav column the same
|
|
// way a mobile tap does.
|
|
// • Rail height is a fraction (0.55) of the wrapper container's
|
|
// height, NOT `window.innerHeight`. The sheet is scoped to its
|
|
// PageNav slot, so a viewport-relative rail would overshoot on
|
|
// desktop where the column is short. `ResizeObserver` on the
|
|
// container drives `containerHeightPx`; the rail recomputes
|
|
// on column resize.
|
|
// • Drag-origin data attribute is renamed to
|
|
// `data-channels-workspace-drag-origin` so it doesn't collide with
|
|
// the existing settings-sheet selector elsewhere on the page.
|
|
//
|
|
// Everything else (clip-path carve, void colour, VAUL easing curve,
|
|
// entry rAF gate, hasEntered mirror, keepMounted unmount delay,
|
|
// dialog/aria-label invariants, portal marker for Android back) is
|
|
// preserved verbatim — those were learned through review cycles on the
|
|
// canonical horseshoe and are not re-litigated here.
|
|
import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useAtomValue } from 'jotai';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Room } from 'matrix-js-sdk';
|
|
import { channelsWorkspaceSheetAtom } from '../../../state/channelsWorkspaceSheet';
|
|
import {
|
|
useCloseChannelsWorkspaceSheet,
|
|
useOpenChannelsWorkspaceSheet,
|
|
} from '../../../state/hooks/channelsWorkspaceSheet';
|
|
import { VOJO_HORSESHOE_VOID_COLOR } from '../../../styles/horseshoe';
|
|
import { WorkspaceSwitcherSheet } from './WorkspaceSwitcherSheet';
|
|
import * as css from './ChannelsWorkspaceHorseshoe.css';
|
|
|
|
// Data attribute set on `WorkspaceFooter` to mark it as the drag-up /
|
|
// tap-to-open origin for the sheet. The document-level touchstart /
|
|
// pointerdown listeners use `target.closest(SELECTOR)` so the footer's
|
|
// own onClick handler still fires for no-movement taps. Keep this in
|
|
// sync with the attribute spread on the footer row.
|
|
export const CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR = 'data-channels-workspace-drag-origin';
|
|
const DRAG_ORIGIN_SELECTOR = `[${CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR}]`;
|
|
|
|
const VAUL_EASING = 'cubic-bezier(0.32, 0.72, 0, 1)';
|
|
const ANIMATION_MS = 250;
|
|
// Commit distance (px). 80px matches the canonical horseshoe so the two
|
|
// gestures (settings open, workspace open) feel identical to muscle
|
|
// memory.
|
|
const COMMIT_THRESHOLD_PX = 80;
|
|
// Sheet rail as a fraction of the PageNav column's measured height.
|
|
// Workspace switcher content is small (spaces list + one create row), so
|
|
// 55% reads as a compact tray rather than a half-screen takeover.
|
|
const RAIL_FRACTION = 0.55;
|
|
// Drag distance over which radii + void gap ramp from 0 to full during
|
|
// finger-drag. Matched to COMMIT_THRESHOLD_PX so the silhouette is
|
|
// fully formed exactly when the gesture qualifies to commit.
|
|
const HORSESHOE_EMERGE_PX = 80;
|
|
|
|
// Symmetric cubic in-out — linear ramp was too snappy in the canonical
|
|
// horseshoe (corners jumped in within ~10px of drag); cubic keeps them
|
|
// subtle until ~40% of the gesture, then blossoms around the midpoint.
|
|
const easeInOutCubic = (t: number): number =>
|
|
t < 0.5 ? 4 * t * t * t : 1 - ((-2 * t + 2) ** 3) / 2;
|
|
|
|
type DragSource = 'footer' | 'handle';
|
|
|
|
type DragState = {
|
|
source: DragSource;
|
|
inputType: 'touch' | 'pointer';
|
|
startY: number;
|
|
deltaY: number;
|
|
};
|
|
|
|
type ChannelsWorkspaceHorseshoeProps = {
|
|
space: Room;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function ChannelsWorkspaceHorseshoe({
|
|
space,
|
|
children,
|
|
}: ChannelsWorkspaceHorseshoeProps) {
|
|
const { t } = useTranslation();
|
|
const open = useAtomValue(channelsWorkspaceSheetAtom);
|
|
const openSheet = useOpenChannelsWorkspaceSheet();
|
|
const closeSheet = useCloseChannelsWorkspaceSheet();
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [containerHeightPx, setContainerHeightPx] = useState(0);
|
|
const [drag, setDrag] = useState<DragState | null>(null);
|
|
|
|
// ResizeObserver on the wrapper — rail height is scoped to THIS
|
|
// column. PageNav width changes via the resizable handle on desktop
|
|
// and column height changes with viewport / split-screen on Android;
|
|
// ResizeObserver handles both without a manual `window.resize`
|
|
// listener which wouldn't catch the column-resize case.
|
|
useEffect(() => {
|
|
const el = containerRef.current;
|
|
if (!el) return undefined;
|
|
setContainerHeightPx(el.getBoundingClientRect().height);
|
|
const ro = new ResizeObserver((entries) => {
|
|
const entry = entries[0];
|
|
if (!entry) return;
|
|
setContainerHeightPx(entry.contentRect.height);
|
|
});
|
|
ro.observe(el);
|
|
return () => ro.disconnect();
|
|
}, []);
|
|
|
|
const railHeightPx = Math.round(containerHeightPx * RAIL_FRACTION);
|
|
|
|
// Entry-animation gate. Kept for gesture-feel parity with the
|
|
// canonical horseshoe even though the channels sheet has no
|
|
// deep-link path (atom is only ever flipped by a footer tap/drag on
|
|
// an already-mounted Channels column, so a "snap-open on mount"
|
|
// can't actually happen here). The `hasEnteredRef` mirror still
|
|
// matters because React 18 strict-mode dev runs the unmount
|
|
// cleanup before the rAF fires; without the guard the effect
|
|
// would clear the atom mid-rehearsal and break HMR.
|
|
const [hasEntered, setHasEntered] = useState(false);
|
|
const hasEnteredRef = useRef(false);
|
|
useLayoutEffect(() => {
|
|
const id = requestAnimationFrame(() => {
|
|
hasEnteredRef.current = true;
|
|
setHasEntered(true);
|
|
});
|
|
return () => cancelAnimationFrame(id);
|
|
}, []);
|
|
|
|
// Delay unmount of the sheet content by `ANIMATION_MS` so the slide-
|
|
// down has something to render. Without this, clearing the atom would
|
|
// unmount the spaces list instantly and the user would see an empty
|
|
// panel shrink instead of the menu sliding away with it.
|
|
const [keepMounted, setKeepMounted] = useState(open);
|
|
useEffect(() => {
|
|
if (open) {
|
|
setKeepMounted(true);
|
|
return undefined;
|
|
}
|
|
const id = window.setTimeout(() => setKeepMounted(false), ANIMATION_MS);
|
|
return () => window.clearTimeout(id);
|
|
}, [open]);
|
|
|
|
const baseExpanded = open && hasEntered ? railHeightPx : 0;
|
|
// CLAMP via Math.max/min, not early-return — see canonical
|
|
// `applyMove` for the bug a wrong-direction early-return introduces
|
|
// (stale deltaY survives a reversed swipe and commits on release).
|
|
const expandedPx = drag
|
|
? Math.max(0, Math.min(railHeightPx, baseExpanded - drag.deltaY))
|
|
: baseExpanded;
|
|
const expandedFraction = railHeightPx > 0 ? expandedPx / railHeightPx : 0;
|
|
const isDragging = drag !== null;
|
|
const horseshoeActive = expandedPx > 0;
|
|
|
|
const handleRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Refs so the always-installed document listeners see the latest
|
|
// state without re-subscribing on every render. Same pattern as the
|
|
// canonical horseshoe.
|
|
const dragRef = useRef<DragState | null>(null);
|
|
dragRef.current = drag;
|
|
const openRef = useRef(open);
|
|
openRef.current = open;
|
|
const openSheetRef = useRef(openSheet);
|
|
openSheetRef.current = openSheet;
|
|
const closeSheetRef = useRef(closeSheet);
|
|
closeSheetRef.current = closeSheet;
|
|
|
|
// Clear the atom on unmount — switching tabs (Direct, Bots), picking
|
|
// a channel, or navigating to /explore unmounts Channels.tsx; without
|
|
// this clear, returning to /channels later would auto-reopen the
|
|
// sheet. `hasEnteredRef` skips the strict-mode rehearsal cleanup
|
|
// before the rAF flag flips.
|
|
useEffect(
|
|
() => () => {
|
|
if (!hasEnteredRef.current) return;
|
|
if (openRef.current) closeSheetRef.current();
|
|
},
|
|
[]
|
|
);
|
|
|
|
// Hardware Escape (web only, rare on mobile) → close. Plain keydown,
|
|
// no FocusTrap — same rationale as the canonical (focus-trap-react
|
|
// throws when its container has no tabbable nodes, which is exactly
|
|
// the case mid-drag before the sheet has rendered any focusable
|
|
// children).
|
|
useEffect(() => {
|
|
if (!open) return undefined;
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key !== 'Escape') return;
|
|
const target = e.target as HTMLElement | null;
|
|
if (
|
|
target &&
|
|
(target.tagName === 'INPUT' ||
|
|
target.tagName === 'TEXTAREA' ||
|
|
target.isContentEditable)
|
|
) {
|
|
return;
|
|
}
|
|
closeSheetRef.current();
|
|
};
|
|
window.addEventListener('keydown', onKeyDown);
|
|
return () => window.removeEventListener('keydown', onKeyDown);
|
|
}, [open]);
|
|
|
|
// Drag mechanics — two origin paths:
|
|
//
|
|
// 1. Document-level touch/pointer on anything matching
|
|
// `[data-channels-workspace-drag-origin]` (= WorkspaceFooter).
|
|
// Passive touchstart / non-passive listeners are split so the
|
|
// row's own onClick handler still fires for no-movement taps.
|
|
// 2. Element-level touch/pointer on `handleRef` (the 20px drag
|
|
// band at the top of the open sheet). Only triggers when the
|
|
// sheet is open; touches on the spaces list inside the panel
|
|
// are not drag-sensitive so internal scroll works without
|
|
// conflict.
|
|
useEffect(() => {
|
|
const handleEl = handleRef.current;
|
|
|
|
// CLAMP, not early-return — reversal of gesture direction must
|
|
// drag `deltaY` back toward 0. footer source clamps the upward
|
|
// drag-open path to negative deltas; handle source clamps the
|
|
// downward drag-close path to positive deltas.
|
|
const applyMove = (clientY: number, e: TouchEvent | PointerEvent) => {
|
|
const d = dragRef.current;
|
|
if (!d) return;
|
|
const rawDelta = clientY - d.startY;
|
|
const nextDelta =
|
|
d.source === 'footer' ? Math.min(0, rawDelta) : Math.max(0, rawDelta);
|
|
if (e.cancelable) e.preventDefault();
|
|
setDrag({ ...d, deltaY: nextDelta });
|
|
};
|
|
|
|
const applyEnd = () => {
|
|
const d = dragRef.current;
|
|
if (!d) return;
|
|
if (d.source === 'footer' && -d.deltaY > COMMIT_THRESHOLD_PX) {
|
|
openSheetRef.current();
|
|
} else if (d.source === 'handle' && d.deltaY > COMMIT_THRESHOLD_PX) {
|
|
closeSheetRef.current();
|
|
}
|
|
setDrag(null);
|
|
};
|
|
|
|
const targetIsDragOrigin = (target: EventTarget | null): boolean => {
|
|
if (!target || !(target instanceof Element)) return false;
|
|
return target.closest(DRAG_ORIGIN_SELECTOR) !== null;
|
|
};
|
|
|
|
// === Touch path ===
|
|
const onDocTouchStart = (e: TouchEvent) => {
|
|
if (dragRef.current) return;
|
|
if (openRef.current) return; // sheet open → handle owns drag
|
|
if (!targetIsDragOrigin(e.target)) return;
|
|
const touch = e.touches[0];
|
|
setDrag({
|
|
source: 'footer',
|
|
inputType: 'touch',
|
|
startY: touch.clientY,
|
|
deltaY: 0,
|
|
});
|
|
};
|
|
const onHandleTouchStart = (e: TouchEvent) => {
|
|
if (dragRef.current) return;
|
|
if (!openRef.current) return;
|
|
const touch = e.touches[0];
|
|
setDrag({
|
|
source: 'handle',
|
|
inputType: 'touch',
|
|
startY: touch.clientY,
|
|
deltaY: 0,
|
|
});
|
|
};
|
|
const onTouchMove = (e: TouchEvent) => {
|
|
const d = dragRef.current;
|
|
if (!d || d.inputType !== 'touch') return;
|
|
applyMove(e.touches[0].clientY, e);
|
|
};
|
|
const onTouchEnd = () => {
|
|
const d = dragRef.current;
|
|
if (!d || d.inputType !== 'touch') return;
|
|
applyEnd();
|
|
};
|
|
|
|
// === Mouse / pen path ===
|
|
const onDocPointerDown = (e: PointerEvent) => {
|
|
if (e.pointerType === 'touch') return;
|
|
if (dragRef.current) return;
|
|
if (openRef.current) return;
|
|
if (e.button !== 0) return;
|
|
if (!targetIsDragOrigin(e.target)) return;
|
|
setDrag({
|
|
source: 'footer',
|
|
inputType: 'pointer',
|
|
startY: e.clientY,
|
|
deltaY: 0,
|
|
});
|
|
};
|
|
const onHandlePointerDown = (e: PointerEvent) => {
|
|
if (e.pointerType === 'touch') return;
|
|
if (dragRef.current) return;
|
|
if (!openRef.current) return;
|
|
if (e.button !== 0) return;
|
|
setDrag({
|
|
source: 'handle',
|
|
inputType: 'pointer',
|
|
startY: e.clientY,
|
|
deltaY: 0,
|
|
});
|
|
};
|
|
const onDocPointerMove = (e: PointerEvent) => {
|
|
if (e.pointerType === 'touch') return;
|
|
const d = dragRef.current;
|
|
if (!d || d.inputType !== 'pointer') return;
|
|
applyMove(e.clientY, e);
|
|
};
|
|
const onDocPointerEnd = (e: PointerEvent) => {
|
|
if (e.pointerType === 'touch') return;
|
|
const d = dragRef.current;
|
|
if (!d || d.inputType !== 'pointer') return;
|
|
applyEnd();
|
|
};
|
|
|
|
document.addEventListener('touchstart', onDocTouchStart, { passive: true });
|
|
document.addEventListener('touchmove', onTouchMove, { passive: false });
|
|
document.addEventListener('touchend', onTouchEnd, { passive: true });
|
|
document.addEventListener('touchcancel', onTouchEnd, { passive: true });
|
|
document.addEventListener('pointerdown', onDocPointerDown);
|
|
document.addEventListener('pointermove', onDocPointerMove, { passive: false });
|
|
document.addEventListener('pointerup', onDocPointerEnd, { passive: true });
|
|
document.addEventListener('pointercancel', onDocPointerEnd, { passive: true });
|
|
if (handleEl) {
|
|
handleEl.addEventListener('touchstart', onHandleTouchStart, { passive: true });
|
|
handleEl.addEventListener('pointerdown', onHandlePointerDown);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('touchstart', onDocTouchStart);
|
|
document.removeEventListener('touchmove', onTouchMove);
|
|
document.removeEventListener('touchend', onTouchEnd);
|
|
document.removeEventListener('touchcancel', onTouchEnd);
|
|
document.removeEventListener('pointerdown', onDocPointerDown);
|
|
document.removeEventListener('pointermove', onDocPointerMove);
|
|
document.removeEventListener('pointerup', onDocPointerEnd);
|
|
document.removeEventListener('pointercancel', onDocPointerEnd);
|
|
if (handleEl) {
|
|
handleEl.removeEventListener('touchstart', onHandleTouchStart);
|
|
handleEl.removeEventListener('pointerdown', onHandlePointerDown);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Geometry — radii + void gap ramp via easeInOutCubic during drag;
|
|
// release jumps to the full value and CSS transition (VAUL_EASING)
|
|
// carries the visual. See canonical for the visual-curve rationale.
|
|
let horseshoeRamp: number;
|
|
if (isDragging) {
|
|
horseshoeRamp = easeInOutCubic(Math.min(1, expandedPx / HORSESHOE_EMERGE_PX));
|
|
} else {
|
|
horseshoeRamp = expandedFraction > 0 ? 1 : 0;
|
|
}
|
|
const silhouetteRadiusPx = horseshoeRamp * css.HORSESHOE_RADIUS_PX;
|
|
const appBodyRadiusPx = horseshoeRamp * css.HORSESHOE_RADIUS_PX;
|
|
const appBodyGapPx = horseshoeRamp * css.HORSESHOE_GAP_PX;
|
|
const appBodyMaskBottomPx = expandedPx + appBodyGapPx;
|
|
|
|
// `inset(top right bottom left round TL TR BR BL)` — only BR/BL carry
|
|
// the radius so the visible top portion of appBody has rounded
|
|
// bottom corners at the clip boundary. Always emitted (even at all
|
|
// zeros) so CSS can transition smoothly between closed and open.
|
|
const appBodyClipPath = `inset(0px 0px ${appBodyMaskBottomPx}px 0px round 0px 0px ${appBodyRadiusPx}px ${appBodyRadiusPx}px)`;
|
|
|
|
const silhouetteTransition = isDragging
|
|
? 'none'
|
|
: `height ${ANIMATION_MS}ms ${VAUL_EASING}, border-top-left-radius ${ANIMATION_MS}ms ${VAUL_EASING}, border-top-right-radius ${ANIMATION_MS}ms ${VAUL_EASING}`;
|
|
const appBodyTransition = isDragging
|
|
? 'none'
|
|
: `clip-path ${ANIMATION_MS}ms ${VAUL_EASING}`;
|
|
|
|
const containerStyle: React.CSSProperties = {
|
|
backgroundColor: horseshoeActive ? VOJO_HORSESHOE_VOID_COLOR : undefined,
|
|
};
|
|
|
|
const renderSheet = keepMounted || isDragging;
|
|
|
|
// Portal marker so `useAndroidBackButton` dispatches Escape instead of
|
|
// `navigate(-1)` while the sheet is open. The keydown handler above
|
|
// catches the synthetic Escape and closes the sheet — same pattern
|
|
// the canonical horseshoe uses. Falls back to body for SSR / tests
|
|
// where `#portalContainer` isn't mounted yet.
|
|
const portalTarget =
|
|
typeof document !== 'undefined'
|
|
? document.getElementById('portalContainer') ?? document.body
|
|
: null;
|
|
|
|
return (
|
|
<div ref={containerRef} className={css.container} style={containerStyle}>
|
|
{open && portalTarget
|
|
? createPortal(
|
|
<div
|
|
data-vojo-channels-workspace-sheet-active="true"
|
|
aria-hidden="true"
|
|
style={{ display: 'none' }}
|
|
/>,
|
|
portalTarget
|
|
)
|
|
: null}
|
|
<div
|
|
className={css.appBody}
|
|
style={{
|
|
clipPath: appBodyClipPath,
|
|
transition: appBodyTransition,
|
|
overscrollBehaviorY: 'contain',
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
<div
|
|
className={css.silhouette}
|
|
style={{
|
|
height: `${expandedPx}px`,
|
|
borderTopLeftRadius: `${silhouetteRadiusPx}px`,
|
|
borderTopRightRadius: `${silhouetteRadiusPx}px`,
|
|
transition: silhouetteTransition,
|
|
visibility: expandedPx > 0 ? 'visible' : 'hidden',
|
|
// Reset `--vojo-safe-top` for everything mounted inside the
|
|
// sheet — same trick the canonical horseshoe uses (status-bar
|
|
// padding is owned by the outer PageNav column; re-applying
|
|
// it inside the sheet would create dead space above the
|
|
// panel header).
|
|
['--vojo-safe-top' as string]: '0px',
|
|
}}
|
|
// `role="dialog"` + `aria-label` only. NO `aria-modal="true"`
|
|
// (no focus trap; outside content stays interactive). NO
|
|
// `aria-labelledby` (the labelled target may unmount during
|
|
// the close animation). See canonical for the rationale.
|
|
role="dialog"
|
|
aria-label={t('Channels.workspace_switcher_aria')}
|
|
>
|
|
<div className={css.panelContent} style={{ height: `${railHeightPx}px` }}>
|
|
<div
|
|
ref={handleRef}
|
|
className={css.panelHandle}
|
|
aria-label={t('Channels.workspace_switcher_drag_to_close')}
|
|
>
|
|
<div className={css.panelHandleBar} />
|
|
</div>
|
|
<div className={css.panelBody}>
|
|
{renderSheet && (
|
|
<WorkspaceSwitcherSheet
|
|
space={space}
|
|
requestClose={() => closeSheetRef.current()}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|