feat(channels): replace workspace switcher popout with sliding horseshoe sheet and inline create-channel row, retire sidebar CreateTab
This commit is contained in:
parent
c27f8a7cc2
commit
11c46d9250
18 changed files with 1036 additions and 545 deletions
|
|
@ -398,7 +398,12 @@
|
|||
"pick_channel_desc": "Choose a channel from the list on the left to start reading.",
|
||||
"root_category": "Channels",
|
||||
"workspace_switcher_aria": "Switch community",
|
||||
"workspace_switcher_active_marker": "Current"
|
||||
"workspace_switcher_create_space": "Create community",
|
||||
"workspace_switcher_drag_to_close": "Drag down to close",
|
||||
"workspace_switcher_member_count_one": "{{count}} member",
|
||||
"workspace_switcher_member_count_other": "{{count}} members",
|
||||
"workspace_footer_subtitle": "Community",
|
||||
"create_channel": "Create channel"
|
||||
},
|
||||
"Call": {
|
||||
"start": "Start call",
|
||||
|
|
|
|||
|
|
@ -400,7 +400,14 @@
|
|||
"pick_channel_desc": "Откройте канал из списка слева, чтобы начать читать.",
|
||||
"root_category": "Каналы",
|
||||
"workspace_switcher_aria": "Сменить сообщество",
|
||||
"workspace_switcher_active_marker": "Текущее"
|
||||
"workspace_switcher_create_space": "Создать сообщество",
|
||||
"workspace_switcher_drag_to_close": "Потяните вниз, чтобы закрыть",
|
||||
"workspace_switcher_member_count_one": "{{count}} участник",
|
||||
"workspace_switcher_member_count_few": "{{count}} участника",
|
||||
"workspace_switcher_member_count_many": "{{count}} участников",
|
||||
"workspace_switcher_member_count_other": "{{count}} участника",
|
||||
"workspace_footer_subtitle": "Сообщество",
|
||||
"create_channel": "Создать канал"
|
||||
},
|
||||
"Call": {
|
||||
"start": "Позвонить",
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
import React, { FormEventHandler, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Dialog,
|
||||
Overlay,
|
||||
OverlayCenter,
|
||||
OverlayBackdrop,
|
||||
Header,
|
||||
config,
|
||||
Box,
|
||||
Text,
|
||||
IconButton,
|
||||
Icon,
|
||||
Icons,
|
||||
Button,
|
||||
Input,
|
||||
color,
|
||||
} from 'folds';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { isRoomAlias, isRoomId } from '../../utils/matrix';
|
||||
import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
|
||||
import { tryDecodeURIComponent } from '../../utils/dom';
|
||||
|
||||
type JoinAddressProps = {
|
||||
onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
|
||||
const { t } = useTranslation();
|
||||
const [invalid, setInvalid] = useState(false);
|
||||
|
||||
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
setInvalid(false);
|
||||
|
||||
const target = evt.target as HTMLFormElement | undefined;
|
||||
const addressInput = target?.addressInput as HTMLInputElement | undefined;
|
||||
const address = addressInput?.value.trim();
|
||||
if (!address) return;
|
||||
|
||||
if (isRoomId(address) || isRoomAlias(address)) {
|
||||
onOpen(address);
|
||||
return;
|
||||
}
|
||||
|
||||
if (testMatrixTo(address)) {
|
||||
const decodedAddress = tryDecodeURIComponent(address);
|
||||
const toRoom = parseMatrixToRoom(decodedAddress);
|
||||
if (toRoom) {
|
||||
onOpen(toRoom.roomIdOrAlias, toRoom.viaServers);
|
||||
return;
|
||||
}
|
||||
|
||||
const toEvent = parseMatrixToRoomEvent(decodedAddress);
|
||||
if (toEvent) {
|
||||
onOpen(toEvent.roomIdOrAlias, toEvent.viaServers, toEvent.eventId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setInvalid(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: onCancel,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Dialog variant="Surface">
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">{t('Home.join_with_address')}</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={onCancel} radii="300">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
style={{ padding: config.space.S400, paddingTop: 0 }}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<Box direction="Column" gap="200">
|
||||
<Text priority="400" size="T300">
|
||||
{t('Home.join_address_desc')}
|
||||
</Text>
|
||||
<Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
|
||||
<li>#community:server</li>
|
||||
<li>https://matrix.to/#/#community:server</li>
|
||||
<li>https://matrix.to/#/!xYzAj?via=server</li>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">{t('Home.address')}</Text>
|
||||
<Input
|
||||
size="500"
|
||||
autoFocus
|
||||
name="addressInput"
|
||||
variant="Background"
|
||||
placeholder="#community:server"
|
||||
required
|
||||
/>
|
||||
{invalid && (
|
||||
<Text size="T200" style={{ color: color.Critical.Main }}>
|
||||
<b>{t('Home.invalid_address')}</b>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Button type="submit" variant="Primary">
|
||||
<Text size="B400">{t('Home.open')}</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './JoinAddressPrompt';
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { useMatch } from 'react-router-dom';
|
||||
import { getCreatePath } from '../../pages/pathUtils';
|
||||
|
||||
export const useCreateSelected = (): boolean => {
|
||||
const match = useMatch({
|
||||
path: getCreatePath(),
|
||||
caseSensitive: true,
|
||||
end: false,
|
||||
});
|
||||
|
||||
return !!match;
|
||||
};
|
||||
|
|
@ -15,7 +15,6 @@ import {
|
|||
UnverifiedTab,
|
||||
SearchTab,
|
||||
} from './sidebar';
|
||||
import { CreateTab } from './sidebar/CreateTab';
|
||||
|
||||
export function SidebarNav() {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -32,7 +31,6 @@ export function SidebarNav() {
|
|||
<SidebarStackSeparator />
|
||||
<SidebarStack>
|
||||
<ExploreTab />
|
||||
<CreateTab />
|
||||
</SidebarStack>
|
||||
</Scroll>
|
||||
}
|
||||
|
|
|
|||
57
src/app/pages/client/channels/ChannelCreateRow.tsx
Normal file
57
src/app/pages/client/channels/ChannelCreateRow.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Avatar, Box, Icon, Icons, Text, color, config, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { NavButton, NavItem, NavItemContent } from '../../../components/nav';
|
||||
import { useOpenCreateRoomModal } from '../../../state/hooks/createRoomModal';
|
||||
import { CreateRoomType } from '../../../components/create-room/types';
|
||||
|
||||
const ROW_MIN_HEIGHT = toRem(56);
|
||||
|
||||
type ChannelCreateRowProps = {
|
||||
space: Room;
|
||||
};
|
||||
|
||||
export function ChannelCreateRow({ space }: ChannelCreateRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const openCreateRoomModal = useOpenCreateRoomModal();
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
padding: `${toRem(6)} ${config.space.S100}`,
|
||||
borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
}}
|
||||
>
|
||||
<NavItem variant="Background" radii="400" style={{ minHeight: ROW_MIN_HEIGHT }}>
|
||||
<NavButton
|
||||
onClick={() => openCreateRoomModal(space.roomId, CreateRoomType.TextRoom)}
|
||||
aria-label={t('Channels.create_channel')}
|
||||
>
|
||||
<NavItemContent>
|
||||
<Box
|
||||
as="span"
|
||||
grow="Yes"
|
||||
alignItems="Center"
|
||||
gap="300"
|
||||
style={{
|
||||
minHeight: ROW_MIN_HEIGHT,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${toRem(6)} 0`,
|
||||
}}
|
||||
>
|
||||
<Avatar size="300" radii="400">
|
||||
<Icon src={Icons.Plus} size="100" />
|
||||
</Avatar>
|
||||
<Box as="span" grow="Yes" style={{ minWidth: 0 }}>
|
||||
<Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
|
||||
{t('Channels.create_channel')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</NavItemContent>
|
||||
</NavButton>
|
||||
</NavItem>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,6 +3,8 @@ import { useSpace } from '../../../hooks/useSpace';
|
|||
import { PageNav, PageNavContent } from '../../../components/page';
|
||||
import { DirectStreamHeader } from '../direct/DirectStreamHeader';
|
||||
import { ChannelsList } from './ChannelsList';
|
||||
import { ChannelCreateRow } from './ChannelCreateRow';
|
||||
import { ChannelsWorkspaceHorseshoe } from './ChannelsWorkspaceHorseshoe';
|
||||
import { WorkspaceFooter } from './WorkspaceFooter';
|
||||
import { ACTIVE_SPACE_KEY } from './useActiveSpace';
|
||||
|
||||
|
|
@ -51,11 +53,21 @@ export function Channels() {
|
|||
|
||||
return (
|
||||
<PageNav resizable>
|
||||
<DirectStreamHeader />
|
||||
<PageNavContent scrollRef={scrollRef}>
|
||||
<ChannelsList scrollRef={scrollRef} />
|
||||
</PageNavContent>
|
||||
<WorkspaceFooter space={space} />
|
||||
{/* The horseshoe wraps the entire channels column so the workspace
|
||||
switcher sheet slides up from the bottom of THIS PageNav slot
|
||||
(not the viewport). The wrapped children stay put; their
|
||||
bottom edge is carved by an animated clip-path with a 12px
|
||||
void between the carve and the sliding silhouette. See
|
||||
ChannelsWorkspaceHorseshoe.tsx for the canonical idioms it
|
||||
inherits from MobileSettingsHorseshoe (commit a7d6fc2). */}
|
||||
<ChannelsWorkspaceHorseshoe space={space}>
|
||||
<DirectStreamHeader />
|
||||
<PageNavContent scrollRef={scrollRef}>
|
||||
<ChannelsList scrollRef={scrollRef} />
|
||||
</PageNavContent>
|
||||
<ChannelCreateRow space={space} />
|
||||
<WorkspaceFooter space={space} />
|
||||
</ChannelsWorkspaceHorseshoe>
|
||||
</PageNav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
113
src/app/pages/client/channels/ChannelsWorkspaceHorseshoe.css.ts
Normal file
113
src/app/pages/client/channels/ChannelsWorkspaceHorseshoe.css.ts
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, toRem } from 'folds';
|
||||
import { VOJO_HORSESHOE_GAP_PX, VOJO_HORSESHOE_RADIUS_PX } from '../../../styles/horseshoe';
|
||||
|
||||
// Re-exported so the TSX can pick up the constants without crossing the
|
||||
// vanilla-extract / runtime boundary twice. Mirror of the canonical
|
||||
// MobileSettingsHorseshoe css module.
|
||||
export const HORSESHOE_RADIUS_PX = VOJO_HORSESHOE_RADIUS_PX;
|
||||
export const HORSESHOE_GAP_PX = VOJO_HORSESHOE_GAP_PX;
|
||||
|
||||
// Outer container — anchor for the two absolutely-positioned panes
|
||||
// (`appBody` and `silhouette`). `flex: 1` fills PageNav's inner column
|
||||
// slot. `overflow: hidden` clips the rounded carves against the
|
||||
// container's bg, which is painted inline with the void colour when
|
||||
// the sheet is active. See MobileSettingsHorseshoe.css.ts for the full
|
||||
// rationale on every property here — kept verbatim except for the file
|
||||
// header.
|
||||
export const container = style({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
// Wrapped children (DirectStreamHeader → ChannelsList → ChannelCreateRow →
|
||||
// WorkspaceFooter). Stays put — the bottom is carved away by an animated
|
||||
// `clip-path: inset(...)` with rounded BL/BR. `backgroundColor` is
|
||||
// load-bearing: the container is painted with the void colour when the
|
||||
// sheet is active, so without an opaque bg the void would bleed through
|
||||
// every transparent gap between list rows. See canonical for the full
|
||||
// reasoning on clip-path vs translate vs flex-shrink.
|
||||
export const appBody = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
backgroundColor: color.Background.Container,
|
||||
willChange: 'clip-path',
|
||||
});
|
||||
|
||||
// Workspace switcher sheet surface. Anchored at the bottom of the
|
||||
// container; height animates 0 → railHeight as the user drags / clicks.
|
||||
// `SurfaceVariant.Container` matches the chat-pane tone and keeps the
|
||||
// safe-area / handle gaps from reading as dark stripes on edge-to-edge
|
||||
// Android — same rationale as the canonical settings horseshoe.
|
||||
export const silhouette = style({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
willChange: 'height, border-top-left-radius, border-top-right-radius',
|
||||
});
|
||||
|
||||
// Top-anchored panel content. Padding-bottom reserves Android nav-bar
|
||||
// inset so the create-space row never tucks under the gesture pill.
|
||||
export const panelContent = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
paddingBottom: 'env(safe-area-inset-bottom, 0px)',
|
||||
});
|
||||
|
||||
// 20px drag-to-close band at the top of the silhouette. The ONLY
|
||||
// drag-down origin once the sheet is open — touches on the spaces list
|
||||
// below this strip are not drag-sensitive, so internal scroll keeps
|
||||
// working without a gesture conflict.
|
||||
export const panelHandle = style({
|
||||
flexShrink: 0,
|
||||
height: toRem(20),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'grab',
|
||||
touchAction: 'none',
|
||||
userSelect: 'none',
|
||||
selectors: {
|
||||
'&:active': { cursor: 'grabbing' },
|
||||
},
|
||||
});
|
||||
|
||||
export const panelHandleBar = style({
|
||||
width: toRem(36),
|
||||
height: toRem(4),
|
||||
borderRadius: toRem(4),
|
||||
backgroundColor: color.Background.Container,
|
||||
});
|
||||
|
||||
// Holds the workspace switcher list. `flex: 1` so it grows below the
|
||||
// 20px handle to fill the remaining panel height; internal Scroll inside
|
||||
// the switcher handles overflow when the user has many orphan spaces.
|
||||
export const panelBody = style({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
});
|
||||
464
src/app/pages/client/channels/ChannelsWorkspaceHorseshoe.tsx
Normal file
464
src/app/pages/client/channels/ChannelsWorkspaceHorseshoe.tsx
Normal file
|
|
@ -0,0 +1,464 @@
|
|||
// 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>
|
||||
);
|
||||
}
|
||||
47
src/app/pages/client/channels/SpaceAvatar.tsx
Normal file
47
src/app/pages/client/channels/SpaceAvatar.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import React from 'react';
|
||||
import { color, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
|
||||
export type SpaceAvatarProps = {
|
||||
space: Room;
|
||||
size: number;
|
||||
};
|
||||
|
||||
// Square-rounded space avatar with auto-generated initial fallback. Kept
|
||||
// outside the folds `<Avatar>` recipe because every call-site needs an
|
||||
// explicit pixel size (currently 40 — workspace footer + in-sheet
|
||||
// SpaceRow); folds Avatar tokens don't expose that step cleanly. The
|
||||
// border-radius scales with `size` (`Math.max(6, size / 3.5)`), so any
|
||||
// future caller passing a different size still gets a proportional
|
||||
// rounded-square shape.
|
||||
export function SpaceAvatar({ space, size }: SpaceAvatarProps) {
|
||||
const mx = useMatrixClient();
|
||||
const mxcUrl = space.getMxcAvatarUrl();
|
||||
const httpUrl = mxcUrl
|
||||
? mx.mxcUrlToHttp(mxcUrl, size * 2, size * 2, 'crop', undefined, false, true) ?? undefined
|
||||
: undefined;
|
||||
const initial = (space.name || space.roomId).trim().slice(0, 1).toUpperCase();
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: toRem(size),
|
||||
height: toRem(size),
|
||||
borderRadius: toRem(Math.max(6, Math.round(size / 3.5))),
|
||||
background: httpUrl
|
||||
? `center/cover no-repeat url("${httpUrl}")`
|
||||
: color.Primary.Container,
|
||||
color: color.Primary.OnContainer,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 600,
|
||||
fontSize: toRem(Math.round(size * 0.46)),
|
||||
flexShrink: 0,
|
||||
}}
|
||||
aria-hidden
|
||||
>
|
||||
{!httpUrl && initial}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,32 +1,7 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config, toRem } from 'folds';
|
||||
|
||||
const plateBase = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: toRem(8),
|
||||
padding: `${toRem(8)} ${toRem(12)}`,
|
||||
export const WorkspaceFooterShell = style({
|
||||
padding: `${toRem(6)} ${config.space.S100}`,
|
||||
borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||||
background: color.Surface.Container,
|
||||
flexShrink: 0,
|
||||
} as const;
|
||||
|
||||
export const WorkspaceFooterPlate = style(plateBase);
|
||||
|
||||
export const WorkspaceFooterTrigger = style({
|
||||
all: 'unset',
|
||||
cursor: 'pointer',
|
||||
...plateBase,
|
||||
selectors: {
|
||||
'&:hover, &:focus-visible': {
|
||||
backgroundColor: color.Surface.ContainerHover,
|
||||
},
|
||||
'&:active, &[aria-expanded=true]': {
|
||||
backgroundColor: color.Surface.ContainerActive,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ActiveSpaceMenuRow = style({
|
||||
boxShadow: `inset 0 0 0 ${toRem(2)} ${color.Primary.Main}`,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,250 +1,103 @@
|
|||
import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import {
|
||||
Box,
|
||||
Icon,
|
||||
Icons,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Text,
|
||||
color,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { Box, Icon, Icons, Text, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import { useOrphanSpaces } from '../../../state/hooks/roomList';
|
||||
import { useRoomName } from '../../../hooks/useRoomMeta';
|
||||
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
|
||||
import { getChannelsSpacePath } from '../../pathUtils';
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { NavButton, NavItem, NavItemContent } from '../../../components/nav';
|
||||
import { channelsWorkspaceSheetAtom } from '../../../state/channelsWorkspaceSheet';
|
||||
import {
|
||||
ActiveSpaceMenuRow,
|
||||
WorkspaceFooterPlate,
|
||||
WorkspaceFooterTrigger,
|
||||
} from './WorkspaceFooter.css';
|
||||
useCloseChannelsWorkspaceSheet,
|
||||
useOpenChannelsWorkspaceSheet,
|
||||
} from '../../../state/hooks/channelsWorkspaceSheet';
|
||||
import { SpaceAvatar } from './SpaceAvatar';
|
||||
import { CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR } from './ChannelsWorkspaceHorseshoe';
|
||||
import { WorkspaceFooterShell } from './WorkspaceFooter.css';
|
||||
|
||||
type SpaceAvatarProps = {
|
||||
space: Room;
|
||||
size: number;
|
||||
};
|
||||
|
||||
function SpaceAvatar({ space, size }: SpaceAvatarProps) {
|
||||
const mx = useMatrixClient();
|
||||
const mxcUrl = space.getMxcAvatarUrl();
|
||||
const httpUrl = mxcUrl
|
||||
? mx.mxcUrlToHttp(mxcUrl, size * 2, size * 2, 'crop', undefined, false, true) ?? undefined
|
||||
: undefined;
|
||||
const initial = (space.name || space.roomId).trim().slice(0, 1).toUpperCase();
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: toRem(size),
|
||||
height: toRem(size),
|
||||
borderRadius: toRem(Math.max(6, Math.round(size / 3.5))),
|
||||
background: httpUrl
|
||||
? `center/cover no-repeat url("${httpUrl}")`
|
||||
: color.Primary.Container,
|
||||
color: color.Primary.OnContainer,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 600,
|
||||
fontSize: toRem(Math.round(size * 0.46)),
|
||||
flexShrink: 0,
|
||||
}}
|
||||
aria-hidden
|
||||
>
|
||||
{!httpUrl && initial}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type SpaceMenuRowProps = {
|
||||
space: Room;
|
||||
isActive: boolean;
|
||||
activeMarker: string;
|
||||
onPick: (spaceId: string) => void;
|
||||
};
|
||||
|
||||
// Inner row component so the per-space `useRoomName` subscription stays
|
||||
// scoped — putting the hook directly inside `.map()` would violate Rules of
|
||||
// Hooks. Subscribing here keeps the dropdown reactive when an admin renames
|
||||
// a space mid-session.
|
||||
function SpaceMenuRow({ space, isActive, activeMarker, onPick }: SpaceMenuRowProps) {
|
||||
const name = useRoomName(space);
|
||||
return (
|
||||
<MenuItem
|
||||
onClick={() => onPick(space.roomId)}
|
||||
size="300"
|
||||
radii="300"
|
||||
before={<SpaceAvatar space={space} size={24} />}
|
||||
after={
|
||||
isActive ? (
|
||||
<Text size="L400" style={{ color: color.Primary.Main }}>
|
||||
{activeMarker}
|
||||
</Text>
|
||||
) : undefined
|
||||
}
|
||||
aria-current={isActive ? 'true' : undefined}
|
||||
className={isActive ? ActiveSpaceMenuRow : undefined}
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
{name}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
const ROW_MIN_HEIGHT = toRem(68);
|
||||
|
||||
type WorkspaceFooterProps = {
|
||||
space: Room;
|
||||
};
|
||||
|
||||
// Bottom-of-channels-list workspace switcher. Multi-orphan users get a
|
||||
// clickable trigger (avatar + name + chevron) that opens a PopOut listing
|
||||
// every joined orphan Space; the active row wears an inset Primary.Main
|
||||
// ring. Single-orphan users see a static plate (no chevron, no click) —
|
||||
// nothing to switch to.
|
||||
// Bottom-of-channels-list workspace identity row. Styled like
|
||||
// `DirectSelfRow` so the DM and Channels panes get the same fat footer
|
||||
// button. Tap → open the horseshoe sheet (atom-driven). Drag-up →
|
||||
// `ChannelsWorkspaceHorseshoe` picks up the gesture via the
|
||||
// `data-channels-workspace-drag-origin` data attribute and drives the
|
||||
// sheet expansion from 0 → railHeight. Tap and drag are reconciled by
|
||||
// the canonical document-level listener pattern: touchstart /
|
||||
// pointerdown are passive, so the synthesised click still fires for
|
||||
// no-movement taps.
|
||||
//
|
||||
// Active-space tracking lives upstream in `Channels.tsx::useEffect` (writes
|
||||
// localStorage) and `useActiveSpace` (URL > localStorage > first orphan
|
||||
// resolver). Leave-active-space cascades through `roomToParentsAtom`'s
|
||||
// MyMembership listener — the orphan list shrinks, `useActiveSpace`'s
|
||||
// orphanSet filter drops the stale id, and the channels surface re-resolves
|
||||
// to the next orphan automatically.
|
||||
// Active-space tracking lives upstream in `Channels.tsx::useEffect`
|
||||
// (writes localStorage) and `useActiveSpace` (URL > localStorage >
|
||||
// first orphan resolver). The sheet's spaces list re-resolves from
|
||||
// `useOrphanSpaces` and updates reactively when the user leaves the
|
||||
// active space.
|
||||
export function WorkspaceFooter({ space }: WorkspaceFooterProps) {
|
||||
const { t } = useTranslation();
|
||||
const mx = useMatrixClient();
|
||||
const navigate = useNavigate();
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const orphanSpaceIds = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
|
||||
const activeName = useRoomName(space);
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
// FocusTrap's `clickOutsideDeactivates` fires on mousedown — when the
|
||||
// user clicks the trigger button to close an open menu, the deactivate
|
||||
// hook runs first (closing the menu), and the trailing `click` event on
|
||||
// the trigger would re-open it. Stamp the close time so the trigger
|
||||
// suppresses re-open attempts inside that grace window.
|
||||
const lastCloseAtRef = useRef(0);
|
||||
const open = useAtomValue(channelsWorkspaceSheetAtom);
|
||||
const openSheet = useOpenChannelsWorkspaceSheet();
|
||||
const closeSheet = useCloseChannelsWorkspaceSheet();
|
||||
|
||||
const closeMenu = useCallback(() => {
|
||||
lastCloseAtRef.current = Date.now();
|
||||
setMenuAnchor(undefined);
|
||||
}, []);
|
||||
|
||||
const handleToggle: MouseEventHandler<HTMLButtonElement> = useCallback((evt) => {
|
||||
if (Date.now() - lastCloseAtRef.current < 250) return;
|
||||
const cords = evt.currentTarget.getBoundingClientRect();
|
||||
setMenuAnchor((current) => (current ? undefined : cords));
|
||||
}, []);
|
||||
|
||||
const handlePickSpace = useCallback(
|
||||
(spaceId: string) => {
|
||||
closeMenu();
|
||||
if (spaceId === space.roomId) return;
|
||||
const idOrAlias = getCanonicalAliasOrRoomId(mx, spaceId);
|
||||
navigate(getChannelsSpacePath(idOrAlias));
|
||||
},
|
||||
[closeMenu, mx, navigate, space.roomId]
|
||||
);
|
||||
|
||||
const canSwitch = orphanSpaceIds.length > 1;
|
||||
const activeMarker = t('Channels.workspace_switcher_active_marker');
|
||||
|
||||
const nameCell = (
|
||||
<div
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
color: color.Surface.OnContainer,
|
||||
fontSize: toRem(13),
|
||||
fontWeight: 600,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
title={activeName}
|
||||
>
|
||||
{activeName}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!canSwitch) {
|
||||
return (
|
||||
<div className={WorkspaceFooterPlate}>
|
||||
<SpaceAvatar space={space} size={28} />
|
||||
{nameCell}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const handleToggle = () => {
|
||||
if (open) {
|
||||
closeSheet();
|
||||
} else {
|
||||
openSheet();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggle}
|
||||
aria-label={t('Channels.workspace_switcher_aria')}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={!!menuAnchor}
|
||||
className={WorkspaceFooterTrigger}
|
||||
>
|
||||
<SpaceAvatar space={space} size={28} />
|
||||
{nameCell}
|
||||
<Icon size="100" src={Icons.ChevronTop} />
|
||||
</button>
|
||||
|
||||
{menuAnchor && (
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
position="Top"
|
||||
align="Start"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
onDeactivate: closeMenu,
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
escapeDeactivates: stopPropagation,
|
||||
<Box
|
||||
{...{ [CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR]: true }}
|
||||
className={WorkspaceFooterShell}
|
||||
>
|
||||
<NavItem variant="Background" radii="400" style={{ minHeight: ROW_MIN_HEIGHT }}>
|
||||
<NavButton
|
||||
onClick={handleToggle}
|
||||
aria-label={t('Channels.workspace_switcher_aria')}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<NavItemContent>
|
||||
<Box
|
||||
as="span"
|
||||
grow="Yes"
|
||||
alignItems="Center"
|
||||
gap="300"
|
||||
style={{
|
||||
minHeight: ROW_MIN_HEIGHT,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${toRem(8)} 0`,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
style={{
|
||||
minWidth: toRem(240),
|
||||
maxWidth: toRem(320),
|
||||
maxHeight: toRem(360),
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
<SpaceAvatar space={space} size={40} />
|
||||
<Box
|
||||
as="span"
|
||||
direction="Column"
|
||||
grow="Yes"
|
||||
gap="100"
|
||||
style={{ minWidth: 0, overflow: 'hidden' }}
|
||||
>
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
{orphanSpaceIds.map((spaceId) => {
|
||||
const r = mx.getRoom(spaceId);
|
||||
if (!r) return null;
|
||||
return (
|
||||
<SpaceMenuRow
|
||||
key={spaceId}
|
||||
space={r}
|
||||
isActive={spaceId === space.roomId}
|
||||
activeMarker={activeMarker}
|
||||
onPick={handlePickSpace}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
<Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
|
||||
{activeName}
|
||||
</Text>
|
||||
<Text as="span" size="T200" truncate style={{ opacity: 0.6 }}>
|
||||
{t('Channels.workspace_footer_subtitle')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Icon
|
||||
src={Icons.ChevronTop}
|
||||
size="100"
|
||||
style={{ opacity: 0.55, flexShrink: 0 }}
|
||||
/>
|
||||
</Box>
|
||||
</NavItemContent>
|
||||
</NavButton>
|
||||
</NavItem>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
19
src/app/pages/client/channels/WorkspaceSwitcherSheet.css.ts
Normal file
19
src/app/pages/client/channels/WorkspaceSwitcherSheet.css.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, toRem } from 'folds';
|
||||
|
||||
// Create-community leading icon slot. Same 40px width as `SpaceAvatar`
|
||||
// below so the text columns line up, but NO background / radius — the
|
||||
// `+` reads as a plain icon at the start of the row, not as a chip.
|
||||
// Every earlier «colour the chip somehow» iteration (Surface.Container,
|
||||
// Primary.Container, Primary.Main, Primary.MainHover, transparent-
|
||||
// inheriting-row-hover) read as «yet another tile that stands out» —
|
||||
// the chip itself was the regression. Stripped to icon-only.
|
||||
export const CreateCommunityTile = style({
|
||||
width: toRem(40),
|
||||
height: toRem(40),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
color: color.Background.OnContainer,
|
||||
});
|
||||
200
src/app/pages/client/channels/WorkspaceSwitcherSheet.tsx
Normal file
200
src/app/pages/client/channels/WorkspaceSwitcherSheet.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { Box, Icon, Icons, Scroll, Text, color, config, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import { useOrphanSpaces } from '../../../state/hooks/roomList';
|
||||
import { useRoomName } from '../../../hooks/useRoomMeta';
|
||||
import { useOpenCreateSpaceModal } from '../../../state/hooks/createSpaceModal';
|
||||
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
|
||||
import { getChannelsSpacePath } from '../../pathUtils';
|
||||
import { NavButton, NavItem, NavItemContent } from '../../../components/nav';
|
||||
import { SpaceAvatar } from './SpaceAvatar';
|
||||
import { CreateCommunityTile } from './WorkspaceSwitcherSheet.css';
|
||||
|
||||
const ROW_MIN_HEIGHT = toRem(60);
|
||||
|
||||
type CreateCommunityRowProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
// Top action of the sheet. The row uses `variant="SurfaceVariant"` so
|
||||
// its card bg matches the sheet's silhouette bg
|
||||
// (`SurfaceVariant.Container` = #181a20 — see
|
||||
// `ChannelsWorkspaceHorseshoe.css.ts::silhouette`) instead of the
|
||||
// darker `Background.Container` the data rows below use. Result: the
|
||||
// «create» row blends into the sheet surface (no visible card
|
||||
// outline), while space rows stay as distinct list-item cards. The
|
||||
// leading `+` is a bare icon centred in the same 40-wide slot the
|
||||
// space rows use for `SpaceAvatar`, so the text columns align.
|
||||
function CreateCommunityRow({ onClick }: CreateCommunityRowProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<NavItem variant="SurfaceVariant" radii="400" style={{ minHeight: ROW_MIN_HEIGHT }}>
|
||||
<NavButton onClick={onClick} aria-label={t('Channels.workspace_switcher_create_space')}>
|
||||
<NavItemContent>
|
||||
<Box
|
||||
as="span"
|
||||
grow="Yes"
|
||||
alignItems="Center"
|
||||
gap="300"
|
||||
style={{
|
||||
minHeight: ROW_MIN_HEIGHT,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${toRem(6)} 0`,
|
||||
}}
|
||||
>
|
||||
<span className={CreateCommunityTile}>
|
||||
<Icon src={Icons.Plus} size="300" />
|
||||
</span>
|
||||
<Box as="span" grow="Yes" style={{ minWidth: 0 }}>
|
||||
<Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
|
||||
{t('Channels.workspace_switcher_create_space')}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</NavItemContent>
|
||||
</NavButton>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
|
||||
type SpaceRowProps = {
|
||||
space: Room;
|
||||
isActive: boolean;
|
||||
onPick: (spaceId: string) => void;
|
||||
};
|
||||
|
||||
// One space row in the sheet. Mirrors the DM-row visual: avatar 40,
|
||||
// two text lines (name + member-count subtitle). The active community
|
||||
// is signalled solely via `aria-selected` — Folds NavItem paints
|
||||
// `ContainerActive` on `&[aria-selected=true]`, which is enough on
|
||||
// this surface tier; an explicit trailing label was tried and
|
||||
// dropped per product call.
|
||||
//
|
||||
// `useRoomName` lives here so the per-space subscription stays scoped
|
||||
// (Rules of Hooks) and admin renames reflect in the dropdown without
|
||||
// a parent re-render.
|
||||
function SpaceRow({ space, isActive, onPick }: SpaceRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const name = useRoomName(space);
|
||||
const memberCount = space.getJoinedMemberCount();
|
||||
|
||||
return (
|
||||
<NavItem
|
||||
variant="Background"
|
||||
radii="400"
|
||||
aria-selected={isActive}
|
||||
style={{ minHeight: ROW_MIN_HEIGHT }}
|
||||
>
|
||||
<NavButton onClick={() => onPick(space.roomId)}>
|
||||
<NavItemContent>
|
||||
<Box
|
||||
as="span"
|
||||
grow="Yes"
|
||||
alignItems="Center"
|
||||
gap="300"
|
||||
style={{
|
||||
minHeight: ROW_MIN_HEIGHT,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${toRem(6)} 0`,
|
||||
}}
|
||||
>
|
||||
<SpaceAvatar space={space} size={40} />
|
||||
<Box
|
||||
as="span"
|
||||
direction="Column"
|
||||
grow="Yes"
|
||||
gap="100"
|
||||
style={{ minWidth: 0, overflow: 'hidden' }}
|
||||
>
|
||||
<Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text as="span" size="T200" truncate style={{ opacity: 0.6 }}>
|
||||
{t('Channels.workspace_switcher_member_count', { count: memberCount })}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</NavItemContent>
|
||||
</NavButton>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
|
||||
type WorkspaceSwitcherSheetProps = {
|
||||
space: Room;
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
// In-sheet workspace switcher panel. Top: «Create community» row +
|
||||
// separator. Bottom: scrollable list of orphan spaces styled like the
|
||||
// DM list (NavItem-Background rows, `aria-selected` for the active
|
||||
// community — no harsh inset ring). `requestClose` is plumbed from
|
||||
// the horseshoe via the canonical `closeSheetRef.current()` indirection
|
||||
// so any picker action collapses the sheet on its way out.
|
||||
export function WorkspaceSwitcherSheet({ space, requestClose }: WorkspaceSwitcherSheetProps) {
|
||||
const mx = useMatrixClient();
|
||||
const navigate = useNavigate();
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const orphanSpaceIds = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
|
||||
const openCreateSpaceModal = useOpenCreateSpaceModal();
|
||||
|
||||
const handlePickSpace = useCallback(
|
||||
(spaceId: string) => {
|
||||
requestClose();
|
||||
if (spaceId === space.roomId) return;
|
||||
const idOrAlias = getCanonicalAliasOrRoomId(mx, spaceId);
|
||||
navigate(getChannelsSpacePath(idOrAlias));
|
||||
},
|
||||
[requestClose, mx, navigate, space.roomId]
|
||||
);
|
||||
|
||||
const handleCreateSpace = useCallback(() => {
|
||||
requestClose();
|
||||
openCreateSpaceModal();
|
||||
}, [requestClose, openCreateSpaceModal]);
|
||||
|
||||
return (
|
||||
<Scroll
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
hideTrack
|
||||
style={{ flex: 1, minHeight: 0, minWidth: 0 }}
|
||||
>
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{
|
||||
padding: `${config.space.S100} ${config.space.S200} ${config.space.S300}`,
|
||||
}}
|
||||
>
|
||||
<CreateCommunityRow onClick={handleCreateSpace} />
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
height: toRem(1),
|
||||
background: color.Surface.ContainerLine,
|
||||
margin: `${config.space.S100} ${config.space.S100}`,
|
||||
}}
|
||||
/>
|
||||
{orphanSpaceIds.map((spaceId) => {
|
||||
const r = mx.getRoom(spaceId);
|
||||
if (!r) return null;
|
||||
return (
|
||||
<SpaceRow
|
||||
key={spaceId}
|
||||
space={r}
|
||||
isActive={spaceId === space.roomId}
|
||||
onPick={handlePickSpace}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Scroll>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import React, { MouseEventHandler, useState } from 'react';
|
||||
import { Box, config, Icon, Icons, Menu, PopOut, RectCords, Text } from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { ContainerColor } from '../../../styles/ContainerColor.css';
|
||||
import {
|
||||
encodeSearchParamValueArray,
|
||||
getCreatePath,
|
||||
getSpacePath,
|
||||
withSearchParam,
|
||||
} from '../../pathUtils';
|
||||
import { useCreateSelected } from '../../../hooks/router/useCreateSelected';
|
||||
import { JoinAddressPrompt } from '../../../components/join-address-prompt';
|
||||
import { _RoomSearchParams } from '../../paths';
|
||||
|
||||
export function CreateTab() {
|
||||
const { t } = useTranslation();
|
||||
const createSelected = useCreateSelected();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
const [joinAddress, setJoinAddress] = useState(false);
|
||||
|
||||
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(menuCords ? undefined : evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleCreateSpace = () => {
|
||||
navigate(getCreatePath());
|
||||
setMenuCords(undefined);
|
||||
};
|
||||
|
||||
const handleJoinWithAddress = () => {
|
||||
setJoinAddress(true);
|
||||
setMenuCords(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<SidebarItem active={createSelected}>
|
||||
<SidebarItemTooltip tooltip={t('Create.add_space')}>
|
||||
{(triggerRef) => (
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
position="Right"
|
||||
align="Center"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
returnFocusOnDeactivate: false,
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||
isKeyBackward: (evt: KeyboardEvent) =>
|
||||
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Box direction="Column">
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="Surface"
|
||||
direction="Column"
|
||||
gap="100"
|
||||
radii="0"
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={handleCreateSpace}
|
||||
>
|
||||
<SettingTile before={<Icon size="400" src={Icons.Space} />}>
|
||||
<Text size="H6">{t('Create.create_space')}</Text>
|
||||
<Text size="T300" priority="300">
|
||||
{t('Create.create_space_desc')}
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
<SequenceCard
|
||||
style={{ padding: config.space.S300 }}
|
||||
variant="Surface"
|
||||
direction="Column"
|
||||
gap="100"
|
||||
radii="0"
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={handleJoinWithAddress}
|
||||
>
|
||||
<SettingTile before={<Icon size="400" src={Icons.Link} />}>
|
||||
<Text size="H6">{t('Create.join_with_address')}</Text>
|
||||
<Text size="T300" priority="300">
|
||||
{t('Create.join_with_address_desc')}
|
||||
</Text>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<SidebarAvatar
|
||||
className={menuCords ? ContainerColor({ variant: 'Surface' }) : undefined}
|
||||
as="button"
|
||||
ref={triggerRef}
|
||||
outlined
|
||||
onClick={handleMenu}
|
||||
>
|
||||
<Icon src={Icons.Plus} />
|
||||
</SidebarAvatar>
|
||||
{joinAddress && (
|
||||
<JoinAddressPrompt
|
||||
onCancel={() => setJoinAddress(false)}
|
||||
onOpen={(roomIdOrAlias, viaServers) => {
|
||||
setJoinAddress(false);
|
||||
const path = getSpacePath(roomIdOrAlias);
|
||||
navigate(
|
||||
viaServers
|
||||
? withSearchParam<_RoomSearchParams>(path, {
|
||||
viaServers: encodeSearchParamValueArray(viaServers),
|
||||
})
|
||||
: path
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</PopOut>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
</SidebarItem>
|
||||
);
|
||||
}
|
||||
6
src/app/state/channelsWorkspaceSheet.ts
Normal file
6
src/app/state/channelsWorkspaceSheet.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { atom } from 'jotai';
|
||||
|
||||
// Open state for the channels workspace-switcher horseshoe sheet (PageNav-
|
||||
// scoped, web + native parity). Mirror of `settingsSheetAtom`, simpler
|
||||
// payload: the sheet has no sub-pages so a plain boolean is enough.
|
||||
export const channelsWorkspaceSheetAtom = atom<boolean>(false);
|
||||
17
src/app/state/hooks/channelsWorkspaceSheet.ts
Normal file
17
src/app/state/hooks/channelsWorkspaceSheet.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { channelsWorkspaceSheetAtom } from '../channelsWorkspaceSheet';
|
||||
|
||||
export const useOpenChannelsWorkspaceSheet = (): (() => void) => {
|
||||
const setSheet = useSetAtom(channelsWorkspaceSheetAtom);
|
||||
return useCallback(() => {
|
||||
setSheet(true);
|
||||
}, [setSheet]);
|
||||
};
|
||||
|
||||
export const useCloseChannelsWorkspaceSheet = (): (() => void) => {
|
||||
const setSheet = useSetAtom(channelsWorkspaceSheetAtom);
|
||||
return useCallback(() => {
|
||||
setSheet(false);
|
||||
}, [setSheet]);
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue