Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f8e8058de3 | ||
| a1577a3b97 | |||
|
|
80f1df6588 | ||
| 375fa74309 | |||
|
|
0862094e00 | ||
| 45d66bbe28 |
159
overlay/src/app/pages/auth/ServerPicker.tsx
Normal file
159
overlay/src/app/pages/auth/ServerPicker.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React, {
|
||||
ChangeEventHandler,
|
||||
FocusEventHandler,
|
||||
KeyboardEventHandler,
|
||||
MouseEventHandler,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Input,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Text,
|
||||
config,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
|
||||
import { useDebounce } from '../../hooks/useDebounce';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
|
||||
export function ServerPicker({
|
||||
server,
|
||||
serverList,
|
||||
allowCustomServer,
|
||||
onServerChange,
|
||||
}: {
|
||||
server: string;
|
||||
serverList: string[];
|
||||
allowCustomServer?: boolean;
|
||||
onServerChange: (server: string) => void;
|
||||
}) {
|
||||
const [serverMenuAnchor, setServerMenuAnchor] = useState<RectCords>();
|
||||
const serverInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Only sync input when server changes externally (e.g., from menu selection)
|
||||
// and input is not focused to avoid cursor jumping during typing
|
||||
if (
|
||||
serverInputRef.current &&
|
||||
serverInputRef.current.value !== server &&
|
||||
document.activeElement !== serverInputRef.current
|
||||
) {
|
||||
serverInputRef.current.value = server;
|
||||
}
|
||||
}, [server]);
|
||||
|
||||
const debounceServerSelect = useDebounce(onServerChange, { wait: 700 });
|
||||
|
||||
const handleServerChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
|
||||
const inputServer = evt.target.value.trim();
|
||||
if (inputServer) debounceServerSelect(inputServer);
|
||||
};
|
||||
|
||||
const handleBlur: FocusEventHandler<HTMLInputElement> = (evt) => {
|
||||
const inputServer = evt.target.value.trim();
|
||||
if (inputServer && inputServer !== server) {
|
||||
onServerChange(inputServer);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
|
||||
if (evt.key === 'ArrowDown') {
|
||||
evt.preventDefault();
|
||||
setServerMenuAnchor(undefined);
|
||||
}
|
||||
if (evt.key === 'Enter') {
|
||||
evt.preventDefault();
|
||||
const inputServer = evt.currentTarget.value.trim();
|
||||
if (inputServer) onServerChange(inputServer);
|
||||
}
|
||||
};
|
||||
|
||||
const handleServerSelect: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
const selectedServer = evt.currentTarget.getAttribute('data-server');
|
||||
if (selectedServer) {
|
||||
onServerChange(selectedServer);
|
||||
}
|
||||
setServerMenuAnchor(undefined);
|
||||
};
|
||||
|
||||
const handleOpenServerMenu: MouseEventHandler<HTMLElement> = (evt) => {
|
||||
const target = evt.currentTarget.parentElement ?? evt.currentTarget;
|
||||
setServerMenuAnchor(target.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<Input
|
||||
ref={serverInputRef}
|
||||
style={{ paddingRight: config.space.S200 }}
|
||||
variant={allowCustomServer ? 'Background' : 'Surface'}
|
||||
outlined
|
||||
defaultValue={server}
|
||||
onChange={handleServerChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
size="500"
|
||||
readOnly={!allowCustomServer}
|
||||
onClick={allowCustomServer ? undefined : handleOpenServerMenu}
|
||||
after={
|
||||
serverList.length === 0 || (serverList.length === 1 && !allowCustomServer) ? undefined : (
|
||||
<PopOut
|
||||
anchor={serverMenuAnchor}
|
||||
position="Bottom"
|
||||
align="End"
|
||||
offset={4}
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setServerMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
|
||||
<Text size="L400">Homeserver List</Text>
|
||||
</Header>
|
||||
<div style={{ padding: config.space.S100, paddingTop: 0 }}>
|
||||
{serverList?.map((serverName) => (
|
||||
<MenuItem
|
||||
key={serverName}
|
||||
radii="300"
|
||||
aria-pressed={serverName === server}
|
||||
data-server={serverName}
|
||||
onClick={handleServerSelect}
|
||||
>
|
||||
<Text>{serverName}</Text>
|
||||
</MenuItem>
|
||||
))}
|
||||
</div>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
onClick={handleOpenServerMenu}
|
||||
variant={allowCustomServer ? 'Background' : 'Surface'}
|
||||
size="300"
|
||||
aria-pressed={!!serverMenuAnchor}
|
||||
radii="300"
|
||||
>
|
||||
<Icon src={Icons.ChevronBottom} />
|
||||
</IconButton>
|
||||
</PopOut>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -517,11 +517,14 @@ function TaskbarFlashStopper() {
|
||||
|
||||
function AndroidShareIntentHandler() {
|
||||
const mx = useMatrixClient();
|
||||
const navigate = useNavigate();
|
||||
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
||||
const [pendingShare, setPendingShare] = useState<AndroidSharePayload | null>(null);
|
||||
const [pickedRoomId, setPickedRoomId] = useState<string | null>(null);
|
||||
const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(pickedRoomId ?? '__android_share__'));
|
||||
const setUploadItems = useSetAtom(roomIdToUploadItemsAtomFamily(pickedRoomId ?? '__android_share__'));
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
|
||||
const applyPendingShare = useCallback(
|
||||
async (share: AndroidSharePayload, roomId: string) => {
|
||||
@@ -582,6 +585,20 @@ function AndroidShareIntentHandler() {
|
||||
if (applied) {
|
||||
setPendingShare(null);
|
||||
setPickedRoomId(null);
|
||||
|
||||
// Navigate to the selected room
|
||||
const isDirect = mDirects.has(roomId);
|
||||
if (isDirect) {
|
||||
navigate(getDirectRoomPath(roomId));
|
||||
} else {
|
||||
const parents = roomToParents.get(roomId);
|
||||
const parent = parents && parents.length > 0 ? parents[0] : undefined;
|
||||
if (parent) {
|
||||
navigate(getSpaceRoomPath(parent, roomId));
|
||||
} else {
|
||||
navigate(getHomeRoomPath(roomId));
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -590,7 +607,7 @@ function AndroidShareIntentHandler() {
|
||||
setPickedRoomId(null);
|
||||
});
|
||||
},
|
||||
[applyPendingShare, pendingShare]
|
||||
[applyPendingShare, pendingShare, navigate, mDirects, roomToParents]
|
||||
);
|
||||
|
||||
const handleDismiss = useCallback(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paarrot",
|
||||
"version": "4.11.98",
|
||||
"version": "4.11.101",
|
||||
"description": "Paarrot - A Matrix client based on Cinny",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
|
||||
Reference in New Issue
Block a user