adam/Remote-Terminal-for-MeshCore
1
0
Fork 0
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-08-06 08:43:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add room server

Browse Source
This commit is contained in:
Jack Kingsman
2026-03-19 19:22:40 -07:00
parent dbe2915635
commit 5b166c4b66
27 changed files with 1703 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatHeader.tsx
+5 -3
View File
@@ -19,6 +19,7 @@ import type {
PathDiscoveryResponse,
RadioConfig,
} from '../types';
import { CONTACT_TYPE_ROOM } from '../types';
interface ChatHeaderProps {
conversation: Conversation;
@@ -84,6 +85,7 @@ export function ChatHeader({
conversation.type === 'contact'
? contacts.find((contact) => contact.public_key === conversation.id)
: null;
const activeContactIsRoomServer = activeContact?.type === CONTACT_TYPE_ROOM;
const activeContactIsPrefixOnly = activeContact
? isPrefixOnlyContact(activeContact.public_key)
: false;
@@ -230,7 +232,7 @@ export function ChatHeader({
</span>
</span>
<div className="flex items-center justify-end gap-0.5 flex-shrink-0">
{conversation.type === 'contact' && (
{conversation.type === 'contact' && !activeContactIsRoomServer && (
<button
className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => setPathDiscoveryOpen(true)}
@@ -245,7 +247,7 @@ export function ChatHeader({
<Route className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
</button>
)}
{conversation.type === 'contact' && (
{conversation.type === 'contact' && !activeContactIsRoomServer && (
<button
className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={onTrace}
@@ -260,7 +262,7 @@ export function ChatHeader({
<DirectTraceIcon className="h-4 w-4 text-muted-foreground" />
</button>
)}
{notificationsSupported && (
{notificationsSupported && !activeContactIsRoomServer && (
<button
className="flex items-center gap-1 rounded px-1 py-1 hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={onToggleNotifications}
frontend/src/components/ConversationPane.tsx
+45 -32
View File
@@ -1,9 +1,10 @@
import { lazy, Suspense, useMemo, type Ref } from 'react';
import { lazy, Suspense, useEffect, useMemo, useState, type Ref } from 'react';
import { ChatHeader } from './ChatHeader';
import { MessageInput, type MessageInputHandle } from './MessageInput';
import { MessageList } from './MessageList';
import { RawPacketFeedView } from './RawPacketFeedView';
import { RoomServerPanel } from './RoomServerPanel';
import type {
Channel,
Contact,
@@ -16,7 +17,7 @@ import type {
RadioConfig,
} from '../types';
import type { RawPacketStatsSessionState } from '../utils/rawPacketStats';
import { CONTACT_TYPE_REPEATER } from '../types';
import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
import { isPrefixOnlyContact, isUnknownFullKeyContact } from '../utils/pubkey';
const RepeaterDashboard = lazy(() =>
@@ -131,6 +132,7 @@ export function ConversationPane({
onSendMessage,
onToggleNotifications,
}: ConversationPaneProps) {
const [roomAuthenticated, setRoomAuthenticated] = useState(false);
const activeContactIsRepeater = useMemo(() => {
if (!activeConversation || activeConversation.type !== 'contact') return false;
const contact = contacts.find((candidate) => candidate.public_key === activeConversation.id);
@@ -140,6 +142,10 @@ export function ConversationPane({
if (!activeConversation || activeConversation.type !== 'contact') return null;
return contacts.find((candidate) => candidate.public_key === activeConversation.id) ?? null;
}, [activeConversation, contacts]);
const activeContactIsRoom = activeContact?.type === CONTACT_TYPE_ROOM;
useEffect(() => {
setRoomAuthenticated(false);
}, [activeConversation?.id]);
const isPrefixOnlyActiveContact = activeContact
? isPrefixOnlyContact(activeContact.public_key)
: false;
@@ -218,6 +224,8 @@ export function ConversationPane({
);
}
const showRoomChat = !activeContactIsRoom || roomAuthenticated;
return (
<>
<ChatHeader
@@ -245,35 +253,40 @@ export function ConversationPane({
{activeConversation.type === 'contact' && isUnknownFullKeyActiveContact && (
<ContactResolutionBanner variant="unknown-full-key" />
)}
<MessageList
key={activeConversation.id}
messages={messages}
contacts={contacts}
loading={messagesLoading}
loadingOlder={loadingOlder}
hasOlderMessages={hasOlderMessages}
unreadMarkerLastReadAt={
activeConversation.type === 'channel' ? unreadMarkerLastReadAt : undefined
}
onDismissUnreadMarker={
activeConversation.type === 'channel' ? onDismissUnreadMarker : undefined
}
onSenderClick={activeConversation.type === 'channel' ? onSenderClick : undefined}
onLoadOlder={onLoadOlder}
onResendChannelMessage={
activeConversation.type === 'channel' ? onResendChannelMessage : undefined
}
radioName={config?.name}
config={config}
onOpenContactInfo={onOpenContactInfo}
targetMessageId={targetMessageId}
onTargetReached={onTargetReached}
hasNewerMessages={hasNewerMessages}
loadingNewer={loadingNewer}
onLoadNewer={onLoadNewer}
onJumpToBottom={onJumpToBottom}
/>
{activeConversation.type === 'contact' && isPrefixOnlyActiveContact ? null : (
{activeContactIsRoom && activeContact && (
<RoomServerPanel contact={activeContact} onAuthenticatedChange={setRoomAuthenticated} />
)}
{showRoomChat && (
<MessageList
key={activeConversation.id}
messages={messages}
contacts={contacts}
loading={messagesLoading}
loadingOlder={loadingOlder}
hasOlderMessages={hasOlderMessages}
unreadMarkerLastReadAt={
activeConversation.type === 'channel' ? unreadMarkerLastReadAt : undefined
}
onDismissUnreadMarker={
activeConversation.type === 'channel' ? onDismissUnreadMarker : undefined
}
onSenderClick={activeConversation.type === 'channel' ? onSenderClick : undefined}
onLoadOlder={onLoadOlder}
onResendChannelMessage={
activeConversation.type === 'channel' ? onResendChannelMessage : undefined
}
radioName={config?.name}
config={config}
onOpenContactInfo={onOpenContactInfo}
targetMessageId={targetMessageId}
onTargetReached={onTargetReached}
hasNewerMessages={hasNewerMessages}
loadingNewer={loadingNewer}
onLoadNewer={onLoadNewer}
onJumpToBottom={onJumpToBottom}
/>
)}
{showRoomChat && !(activeConversation.type === 'contact' && isPrefixOnlyActiveContact) ? (
<MessageInput
ref={messageInputRef}
onSend={onSendMessage}
@@ -286,7 +299,7 @@ export function ConversationPane({
: `Message ${activeConversation.name}...`
}
/>
)}
) : null}
</>
);
}
frontend/src/components/MessageList.tsx
+67 -15
View File
@@ -9,7 +9,7 @@ import {
type ReactNode,
} from 'react';
import type { Contact, Message, MessagePath, RadioConfig } from '../types';
import { CONTACT_TYPE_REPEATER } from '../types';
import { CONTACT_TYPE_REPEATER, CONTACT_TYPE_ROOM } from '../types';
import { formatTime, parseSenderFromText } from '../utils/messageParser';
import { formatHopCounts, type SenderInfo } from '../utils/pathUtils';
import { getDirectContactRoute } from '../utils/pathUtils';
@@ -500,6 +500,33 @@ export function MessageList({
contact: Contact | null,
parsedSender: string | null
): SenderInfo => {
if (
msg.type === 'PRIV' &&
contact?.type === CONTACT_TYPE_ROOM &&
(msg.sender_key || msg.sender_name)
) {
const authorContact =
(msg.sender_key
? contacts.find((candidate) => candidate.public_key === msg.sender_key)
: null) || (msg.sender_name ? getContactByName(msg.sender_name) : null);
if (authorContact) {
const directRoute = getDirectContactRoute(authorContact);
return {
name: authorContact.name || msg.sender_name || authorContact.public_key.slice(0, 12),
publicKeyOrPrefix: authorContact.public_key,
lat: authorContact.lat,
lon: authorContact.lon,
pathHashMode: directRoute?.path_hash_mode ?? null,
};
}
return {
name: msg.sender_name || msg.sender_key || 'Unknown',
publicKeyOrPrefix: msg.sender_key || '',
lat: null,
lon: null,
pathHashMode: null,
};
}
if (msg.type === 'PRIV' && contact) {
const directRoute = getDirectContactRoute(contact);
return {
@@ -584,6 +611,8 @@ export function MessageList({
isCorruptChannelMessage: boolean
): string => {
if (msg.outgoing) return '__outgoing__';
if (msg.type === 'PRIV' && msg.sender_key) return `key:${msg.sender_key}`;
if (msg.type === 'PRIV' && senderName) return `name:${senderName}`;
if (msg.type === 'PRIV' && msg.conversation_key) return msg.conversation_key;
if (msg.sender_key) return `key:${msg.sender_key}`;
if (senderName) return `name:${senderName}`;
@@ -612,18 +641,24 @@ export function MessageList({
// For DMs, look up contact; for channel messages, use parsed sender
const contact = msg.type === 'PRIV' ? getContact(msg.conversation_key) : null;
const isRepeater = contact?.type === CONTACT_TYPE_REPEATER;
const isRoomServer = contact?.type === CONTACT_TYPE_ROOM;
// Skip sender parsing for repeater messages (CLI responses often have colons)
const { sender, content } = isRepeater
? { sender: null, content: msg.text }
: parseSenderFromText(msg.text);
const { sender, content } =
isRepeater || (isRoomServer && msg.type === 'PRIV')
? { sender: null, content: msg.text }
: parseSenderFromText(msg.text);
const directSenderName =
msg.type === 'PRIV' && isRoomServer ? msg.sender_name || null : null;
const channelSenderName = msg.type === 'CHAN' ? msg.sender_name || sender : null;
const channelSenderContact =
msg.type === 'CHAN' && channelSenderName ? getContactByName(channelSenderName) : null;
const isCorruptChannelMessage = isCorruptUnnamedChannelMessage(msg, sender);
const displaySender = msg.outgoing
? 'You'
: contact?.name ||
: directSenderName ||
(isRoomServer && msg.sender_key ? msg.sender_key.slice(0, 8) : null) ||
contact?.name ||
channelSenderName ||
(isCorruptChannelMessage
? CORRUPT_SENDER_LABEL
@@ -636,15 +671,22 @@ export function MessageList({
displaySender !== CORRUPT_SENDER_LABEL;
// Determine if we should show avatar (first message in a chunk from same sender)
const currentSenderKey = getSenderKey(msg, channelSenderName, isCorruptChannelMessage);
const currentSenderKey = getSenderKey(
msg,
directSenderName || channelSenderName,
isCorruptChannelMessage
);
const prevMsg = sortedMessages[index - 1];
const prevParsedSender = prevMsg ? parseSenderFromText(prevMsg.text).sender : null;
const prevSenderKey = prevMsg
? getSenderKey(
prevMsg,
prevMsg.type === 'CHAN'
? prevMsg.sender_name || prevParsedSender
: prevParsedSender,
prevMsg.type === 'PRIV' &&
getContact(prevMsg.conversation_key)?.type === CONTACT_TYPE_ROOM
? prevMsg.sender_name
: prevMsg.type === 'CHAN'
? prevMsg.sender_name || prevParsedSender
: prevParsedSender,
isCorruptUnnamedChannelMessage(prevMsg, prevParsedSender)
)
: null;
@@ -658,9 +700,14 @@ export function MessageList({
let avatarVariant: 'default' | 'corrupt' = 'default';
if (!msg.outgoing) {
if (msg.type === 'PRIV' && msg.conversation_key) {
// DM: use conversation_key (sender's public key)
avatarName = contact?.name || null;
avatarKey = msg.conversation_key;
if (isRoomServer) {
avatarName = directSenderName;
avatarKey =
msg.sender_key || (avatarName ? `name:${avatarName}` : msg.conversation_key);
} else {
avatarName = contact?.name || null;
avatarKey = msg.conversation_key;
}
} else if (isCorruptChannelMessage) {
avatarName = CORRUPT_SENDER_LABEL;
avatarKey = `corrupt:${msg.id}`;
@@ -725,7 +772,12 @@ export function MessageList({
type="button"
className="avatar-action-button rounded-full border-none bg-transparent p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label={avatarActionLabel}
onClick={() => onOpenContactInfo(avatarKey, msg.type === 'CHAN')}
onClick={() =>
onOpenContactInfo(
avatarKey,
msg.type === 'CHAN' || (msg.type === 'PRIV' && isRoomServer)
)
}
>
<ContactAvatar
name={avatarName}
@@ -780,7 +832,7 @@ export function MessageList({
onClick={() =>
setSelectedPath({
paths: msg.paths!,
senderInfo: getSenderInfo(msg, contact, sender),
senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
})
}
/>
@@ -806,7 +858,7 @@ export function MessageList({
onClick={() =>
setSelectedPath({
paths: msg.paths!,
senderInfo: getSenderInfo(msg, contact, sender),
senderInfo: getSenderInfo(msg, contact, directSenderName || sender),
})
}
/>
frontend/src/components/RepeaterLogin.tsx
+12 -4
View File
@@ -8,6 +8,10 @@ interface RepeaterLoginProps {
error: string | null;
onLogin: (password: string) => Promise<void>;
onLoginAsGuest: () => Promise<void>;
description?: string;
passwordPlaceholder?: string;
loginLabel?: string;
guestLabel?: string;
}
export function RepeaterLogin({
@@ -16,6 +20,10 @@ export function RepeaterLogin({
error,
onLogin,
onLoginAsGuest,
description = 'Log in to access repeater dashboard',
passwordPlaceholder = 'Repeater password...',
loginLabel = 'Login with Password',
guestLabel = 'Login as Guest / ACLs',
}: RepeaterLoginProps) {
const [password, setPassword] = useState('');
@@ -33,7 +41,7 @@ export function RepeaterLogin({
<div className="w-full max-w-sm space-y-6">
<div className="text-center space-y-1">
<h2 className="text-lg font-semibold">{repeaterName}</h2>
<p className="text-sm text-muted-foreground">Log in to access repeater dashboard</p>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4" autoComplete="off">
@@ -46,7 +54,7 @@ export function RepeaterLogin({
data-bwignore="true"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Repeater password..."
placeholder={passwordPlaceholder}
aria-label="Repeater password"
disabled={loading}
autoFocus
@@ -60,7 +68,7 @@ export function RepeaterLogin({
<div className="flex flex-col gap-2">
<Button type="submit" disabled={loading} className="w-full">
{loading ? 'Logging in...' : 'Login with Password'}
{loading ? 'Logging in...' : loginLabel}
</Button>
<Button
type="button"
@@ -69,7 +77,7 @@ export function RepeaterLogin({
className="w-full"
onClick={onLoginAsGuest}
>
Login as Guest / ACLs
{guestLabel}
</Button>
</div>
</form>
frontend/src/components/RoomServerPanel.tsx
+289
View File
@@ -0,0 +1,289 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { api } from '../api';
import { toast } from './ui/sonner';
import { Button } from './ui/button';
import type {
Contact,
PaneState,
RepeaterAclResponse,
RepeaterLppTelemetryResponse,
RepeaterStatusResponse,
} from '../types';
import { TelemetryPane } from './repeater/RepeaterTelemetryPane';
import { AclPane } from './repeater/RepeaterAclPane';
import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
import { ConsolePane } from './repeater/RepeaterConsolePane';
import { RepeaterLogin } from './RepeaterLogin';
interface RoomServerPanelProps {
contact: Contact;
onAuthenticatedChange?: (authenticated: boolean) => void;
}
type RoomPaneKey = 'status' | 'acl' | 'lppTelemetry';
type RoomPaneData = {
status: RepeaterStatusResponse | null;
acl: RepeaterAclResponse | null;
lppTelemetry: RepeaterLppTelemetryResponse | null;
};
type RoomPaneStates = Record<RoomPaneKey, PaneState>;
type ConsoleEntry = {
command: string;
response: string;
timestamp: number;
outgoing: boolean;
};
const INITIAL_PANE_STATE: PaneState = {
loading: false,
attempt: 0,
error: null,
fetched_at: null,
};
function createInitialPaneStates(): RoomPaneStates {
return {
status: { ...INITIAL_PANE_STATE },
acl: { ...INITIAL_PANE_STATE },
lppTelemetry: { ...INITIAL_PANE_STATE },
};
}
export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPanelProps) {
const [loginLoading, setLoginLoading] = useState(false);
const [loginError, setLoginError] = useState<string | null>(null);
const [loginMessage, setLoginMessage] = useState<string | null>(null);
const [authenticated, setAuthenticated] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
const [paneData, setPaneData] = useState<RoomPaneData>({
status: null,
acl: null,
lppTelemetry: null,
});
const [paneStates, setPaneStates] = useState<RoomPaneStates>(createInitialPaneStates);
const [consoleHistory, setConsoleHistory] = useState<ConsoleEntry[]>([]);
const [consoleLoading, setConsoleLoading] = useState(false);
useEffect(() => {
setLoginLoading(false);
setLoginError(null);
setLoginMessage(null);
setAuthenticated(false);
setAdvancedOpen(false);
setPaneData({
status: null,
acl: null,
lppTelemetry: null,
});
setPaneStates(createInitialPaneStates());
setConsoleHistory([]);
setConsoleLoading(false);
}, [contact.public_key]);
useEffect(() => {
onAuthenticatedChange?.(authenticated);
}, [authenticated, onAuthenticatedChange]);
const refreshPane = useCallback(
async <K extends RoomPaneKey>(pane: K, loader: () => Promise<RoomPaneData[K]>) => {
setPaneStates((prev) => ({
...prev,
[pane]: {
...prev[pane],
loading: true,
attempt: prev[pane].attempt + 1,
error: null,
},
}));
try {
const data = await loader();
setPaneData((prev) => ({ ...prev, [pane]: data }));
setPaneStates((prev) => ({
...prev,
[pane]: {
loading: false,
attempt: prev[pane].attempt,
error: null,
fetched_at: Date.now(),
},
}));
} catch (err) {
setPaneStates((prev) => ({
...prev,
[pane]: {
...prev[pane],
loading: false,
error: err instanceof Error ? err.message : 'Unknown error',
},
}));
}
},
[]
);
const performLogin = useCallback(
async (password: string) => {
if (loginLoading) return;
setLoginLoading(true);
setLoginError(null);
setLoginMessage(null);
try {
const result = await api.roomLogin(contact.public_key, password);
setAuthenticated(result.authenticated);
setLoginMessage(
result.message ??
(result.authenticated
? 'Login confirmed. You can now send room messages and open admin tools.'
: 'Login request sent, but authentication was not confirmed.')
);
if (result.authenticated) {
toast.success('Room login confirmed');
} else {
toast(result.message ?? 'Room login was not confirmed');
}
} catch (err) {
const message = err instanceof Error ? err.message : 'Unknown error';
setAuthenticated(false);
setLoginError(message);
toast.error('Room login failed', { description: message });
} finally {
setLoginLoading(false);
}
},
[contact.public_key, loginLoading]
);
const handleLogin = useCallback(
async (password: string) => {
await performLogin(password);
},
[performLogin]
);
const handleLoginAsGuest = useCallback(async () => {
await performLogin('');
}, [performLogin]);
const handleConsoleCommand = useCallback(
async (command: string) => {
setConsoleLoading(true);
const timestamp = Date.now();
setConsoleHistory((prev) => [
...prev,
{ command, response: command, timestamp, outgoing: true },
]);
try {
const response = await api.sendRepeaterCommand(contact.public_key, command);
setConsoleHistory((prev) => [
...prev,
{
command,
response: response.response,
timestamp: Date.now(),
outgoing: false,
},
]);
} catch (err) {
const message = err instanceof Error ? err.message : 'Unknown error';
setConsoleHistory((prev) => [
...prev,
{
command,
response: `(error) ${message}`,
timestamp: Date.now(),
outgoing: false,
},
]);
} finally {
setConsoleLoading(false);
}
},
[contact.public_key]
);
const panelTitle = useMemo(() => contact.name || contact.public_key.slice(0, 12), [contact]);
if (!authenticated) {
return (
<div className="flex-1 overflow-y-auto">
<RepeaterLogin
repeaterName={panelTitle}
loading={loginLoading}
error={loginError}
onLogin={handleLogin}
onLoginAsGuest={handleLoginAsGuest}
description="Log in with the room password or use ACL/guest access to enter this room server"
passwordPlaceholder="Room server password..."
guestLabel="Login with ACL / Guest"
/>
</div>
);
}
return (
<section className="border-b border-border bg-muted/20 px-4 py-3">
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
<div className="space-y-1">
<div className="text-sm font-medium">Room Server Controls</div>
<p className="text-xs text-muted-foreground">
Room access is active. Use the chat history and message box below to participate, and
open admin tools when needed.
</p>
{loginMessage && <p className="text-xs text-muted-foreground">{loginMessage}</p>}
</div>
<div className="flex w-full flex-col gap-2 sm:flex-row lg:w-auto">
<Button
type="button"
variant="outline"
onClick={handleLoginAsGuest}
disabled={loginLoading}
>
Refresh ACL Login
</Button>
<Button
type="button"
variant="outline"
onClick={() => setAdvancedOpen((prev) => !prev)}
>
{advancedOpen ? 'Hide Tools' : 'Show Tools'}
</Button>
</div>
</div>
{advancedOpen && (
<div className="grid gap-3 xl:grid-cols-2">
<TelemetryPane
data={paneData.status}
state={paneStates.status}
onRefresh={() => refreshPane('status', () => api.roomStatus(contact.public_key))}
/>
<AclPane
data={paneData.acl}
state={paneStates.acl}
onRefresh={() => refreshPane('acl', () => api.roomAcl(contact.public_key))}
/>
<LppTelemetryPane
data={paneData.lppTelemetry}
state={paneStates.lppTelemetry}
onRefresh={() =>
refreshPane('lppTelemetry', () => api.roomLppTelemetry(contact.public_key))
}
/>
<ConsolePane
history={consoleHistory}
loading={consoleLoading}
onSend={handleConsoleCommand}
/>
</div>
)}
</div>
</section>
);
}
frontend/src/components/Sidebar.tsx
+96 -34
View File
@@ -13,6 +13,7 @@ import {
X,
} from 'lucide-react';
import {
CONTACT_TYPE_ROOM,
CONTACT_TYPE_REPEATER,
type Contact,
type Channel,
@@ -57,6 +58,7 @@ type CollapseState = {
favorites: boolean;
channels: boolean;
contacts: boolean;
rooms: boolean;
repeaters: boolean;
};
@@ -67,6 +69,7 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
favorites: false,
channels: false,
contacts: false,
rooms: false,
repeaters: false,
};
@@ -80,6 +83,7 @@ function loadCollapsedState(): CollapseState {
favorites: parsed.favorites ?? DEFAULT_COLLAPSE_STATE.favorites,
channels: parsed.channels ?? DEFAULT_COLLAPSE_STATE.channels,
contacts: parsed.contacts ?? DEFAULT_COLLAPSE_STATE.contacts,
rooms: parsed.rooms ?? DEFAULT_COLLAPSE_STATE.rooms,
repeaters: parsed.repeaters ?? DEFAULT_COLLAPSE_STATE.repeaters,
};
} catch {
@@ -157,6 +161,7 @@ export function Sidebar({
const [favoritesCollapsed, setFavoritesCollapsed] = useState(initialCollapsedState.favorites);
const [channelsCollapsed, setChannelsCollapsed] = useState(initialCollapsedState.channels);
const [contactsCollapsed, setContactsCollapsed] = useState(initialCollapsedState.contacts);
const [roomsCollapsed, setRoomsCollapsed] = useState(initialCollapsedState.rooms);
const [repeatersCollapsed, setRepeatersCollapsed] = useState(initialCollapsedState.repeaters);
const collapseSnapshotRef = useRef<CollapseState | null>(null);
const sectionSortSourceRef = useRef(initialSectionSortState.source);
@@ -352,12 +357,23 @@ export function Sidebar({
const sortedNonRepeaterContacts = useMemo(
() =>
sortContactsByOrder(
uniqueContacts.filter((c) => c.type !== CONTACT_TYPE_REPEATER),
uniqueContacts.filter(
(c) => c.type !== CONTACT_TYPE_REPEATER && c.type !== CONTACT_TYPE_ROOM
),
sectionSortOrders.contacts
),
[uniqueContacts, sectionSortOrders.contacts, sortContactsByOrder]
);
const sortedRooms = useMemo(
() =>
sortContactsByOrder(
uniqueContacts.filter((c) => c.type === CONTACT_TYPE_ROOM),
sectionSortOrders.rooms
),
[uniqueContacts, sectionSortOrders.rooms, sortContactsByOrder]
);
const sortedRepeaters = useMemo(
() =>
sortRepeatersByOrder(
@@ -392,6 +408,17 @@ export function Sidebar({
[sortedNonRepeaterContacts, query]
);
const filteredRooms = useMemo(
() =>
query
? sortedRooms.filter(
(c) =>
c.name?.toLowerCase().includes(query) || c.public_key.toLowerCase().includes(query)
)
: sortedRooms,
[sortedRooms, query]
);
const filteredRepeaters = useMemo(
() =>
query
@@ -412,6 +439,7 @@ export function Sidebar({
favorites: favoritesCollapsed,
channels: channelsCollapsed,
contacts: contactsCollapsed,
rooms: roomsCollapsed,
repeaters: repeatersCollapsed,
};
}
@@ -421,12 +449,14 @@ export function Sidebar({
favoritesCollapsed ||
channelsCollapsed ||
contactsCollapsed ||
roomsCollapsed ||
repeatersCollapsed
) {
setToolsCollapsed(false);
setFavoritesCollapsed(false);
setChannelsCollapsed(false);
setContactsCollapsed(false);
setRoomsCollapsed(false);
setRepeatersCollapsed(false);
}
return;
@@ -439,6 +469,7 @@ export function Sidebar({
setFavoritesCollapsed(prev.favorites);
setChannelsCollapsed(prev.channels);
setContactsCollapsed(prev.contacts);
setRoomsCollapsed(prev.rooms);
setRepeatersCollapsed(prev.repeaters);
}
}, [
@@ -447,6 +478,7 @@ export function Sidebar({
favoritesCollapsed,
channelsCollapsed,
contactsCollapsed,
roomsCollapsed,
repeatersCollapsed,
]);
@@ -458,6 +490,7 @@ export function Sidebar({
favorites: favoritesCollapsed,
channels: channelsCollapsed,
contacts: contactsCollapsed,
rooms: roomsCollapsed,
repeaters: repeatersCollapsed,
};
@@ -472,45 +505,56 @@ export function Sidebar({
favoritesCollapsed,
channelsCollapsed,
contactsCollapsed,
roomsCollapsed,
repeatersCollapsed,
]);
// Separate favorites from regular items, and build combined favorites list
const { favoriteItems, nonFavoriteChannels, nonFavoriteContacts, nonFavoriteRepeaters } =
useMemo(() => {
const favChannels = filteredChannels.filter((c) => isFavorite(favorites, 'channel', c.key));
const favContacts = [...filteredNonRepeaterContacts, ...filteredRepeaters].filter((c) =>
isFavorite(favorites, 'contact', c.public_key)
);
const nonFavChannels = filteredChannels.filter(
(c) => !isFavorite(favorites, 'channel', c.key)
);
const nonFavContacts = filteredNonRepeaterContacts.filter(
(c) => !isFavorite(favorites, 'contact', c.public_key)
);
const nonFavRepeaters = filteredRepeaters.filter(
(c) => !isFavorite(favorites, 'contact', c.public_key)
);
const {
favoriteItems,
nonFavoriteChannels,
nonFavoriteContacts,
nonFavoriteRooms,
nonFavoriteRepeaters,
} = useMemo(() => {
const favChannels = filteredChannels.filter((c) => isFavorite(favorites, 'channel', c.key));
const favContacts = [
...filteredNonRepeaterContacts,
...filteredRooms,
...filteredRepeaters,
].filter((c) => isFavorite(favorites, 'contact', c.public_key));
const nonFavChannels = filteredChannels.filter((c) => !isFavorite(favorites, 'channel', c.key));
const nonFavContacts = filteredNonRepeaterContacts.filter(
(c) => !isFavorite(favorites, 'contact', c.public_key)
);
const nonFavRooms = filteredRooms.filter(
(c) => !isFavorite(favorites, 'contact', c.public_key)
);
const nonFavRepeaters = filteredRepeaters.filter(
(c) => !isFavorite(favorites, 'contact', c.public_key)
);
const items: FavoriteItem[] = [
...favChannels.map((channel) => ({ type: 'channel' as const, channel })),
...favContacts.map((contact) => ({ type: 'contact' as const, contact })),
];
const items: FavoriteItem[] = [
...favChannels.map((channel) => ({ type: 'channel' as const, channel })),
...favContacts.map((contact) => ({ type: 'contact' as const, contact })),
];
return {
favoriteItems: sortFavoriteItemsByOrder(items, sectionSortOrders.favorites),
nonFavoriteChannels: nonFavChannels,
nonFavoriteContacts: nonFavContacts,
nonFavoriteRepeaters: nonFavRepeaters,
};
}, [
filteredChannels,
filteredNonRepeaterContacts,
filteredRepeaters,
favorites,
sectionSortOrders.favorites,
sortFavoriteItemsByOrder,
]);
return {
favoriteItems: sortFavoriteItemsByOrder(items, sectionSortOrders.favorites),
nonFavoriteChannels: nonFavChannels,
nonFavoriteContacts: nonFavContacts,
nonFavoriteRooms: nonFavRooms,
nonFavoriteRepeaters: nonFavRepeaters,
};
}, [
filteredChannels,
filteredNonRepeaterContacts,
filteredRooms,
filteredRepeaters,
favorites,
sectionSortOrders.favorites,
sortFavoriteItemsByOrder,
]);
const buildChannelRow = (channel: Channel, keyPrefix: string): ConversationRow => ({
key: `${keyPrefix}-${channel.key}`,
@@ -638,11 +682,13 @@ export function Sidebar({
);
const channelRows = nonFavoriteChannels.map((channel) => buildChannelRow(channel, 'chan'));
const contactRows = nonFavoriteContacts.map((contact) => buildContactRow(contact, 'contact'));
const roomRows = nonFavoriteRooms.map((contact) => buildContactRow(contact, 'room'));
const repeaterRows = nonFavoriteRepeaters.map((contact) => buildContactRow(contact, 'repeater'));
const favoritesUnreadCount = getSectionUnreadCount(favoriteRows);
const channelsUnreadCount = getSectionUnreadCount(channelRows);
const contactsUnreadCount = getSectionUnreadCount(contactRows);
const roomsUnreadCount = getSectionUnreadCount(roomRows);
const repeatersUnreadCount = getSectionUnreadCount(repeaterRows);
const favoritesHasMention = sectionHasMention(favoriteRows);
const channelsHasMention = sectionHasMention(channelRows);
@@ -899,6 +945,21 @@ export function Sidebar({
</>
)}
{/* Room Servers */}
{nonFavoriteRooms.length > 0 && (
<>
{renderSectionHeader(
'Room Servers',
roomsCollapsed,
() => setRoomsCollapsed((prev) => !prev),
'rooms',
roomsUnreadCount,
roomsUnreadCount > 0
)}
{(isSearching || !roomsCollapsed) && roomRows.map((row) => renderConversationRow(row))}
</>
)}
{/* Repeaters */}
{nonFavoriteRepeaters.length > 0 && (
<>
@@ -916,6 +977,7 @@ export function Sidebar({
{/* Empty state */}
{nonFavoriteContacts.length === 0 &&
nonFavoriteRooms.length === 0 &&
nonFavoriteChannels.length === 0 &&
nonFavoriteRepeaters.length === 0 &&
favoriteItems.length === 0 && (