mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-08-08 17:53:10 +02:00
Add bulk room add
This commit is contained in:
Jack Kingsman
+35
-6
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useCallback, useRef, useState, useMemo } from 'react';
|
||||
import { useEffect, useCallback, useRef, useState, useMemo, type MouseEvent } from 'react';
|
||||
import { api } from './api';
|
||||
import { takePrefetchOrFetch } from './prefetch';
|
||||
import { useWebSocket } from './useWebSocket';
|
||||
@@ -23,7 +23,7 @@ import type { MessageInputHandle } from './components/MessageInput';
|
||||
import { DistanceUnitProvider } from './contexts/DistanceUnitContext';
|
||||
import { messageContainsMention } from './utils/messageParser';
|
||||
import { getStateKey } from './utils/conversationState';
|
||||
import type { Conversation, Message, RawPacket } from './types';
|
||||
import type { BulkCreateHashtagChannelsResult, Conversation, Message, RawPacket } from './types';
|
||||
import { CONTACT_TYPE_ROOM } from './types';
|
||||
|
||||
interface ChannelUnreadMarker {
|
||||
@@ -85,6 +85,8 @@ export function App() {
|
||||
const [channelUnreadMarker, setChannelUnreadMarker] = useState<ChannelUnreadMarker | null>(null);
|
||||
const [newMessagePrefillRequest, setNewMessagePrefillRequest] =
|
||||
useState<NewMessagePrefillRequest | null>(null);
|
||||
const [showBulkAddChannelTab, setShowBulkAddChannelTab] = useState(false);
|
||||
const [bulkAddResult, setBulkAddResult] = useState<BulkCreateHashtagChannelsResult | null>(null);
|
||||
const [visibilityVersion, setVisibilityVersion] = useState(0);
|
||||
const lastUnreadBackfillAttemptRef = useRef<string | null>(null);
|
||||
const {
|
||||
@@ -190,6 +192,7 @@ export function App() {
|
||||
handleCreateContact,
|
||||
handleCreateChannel,
|
||||
handleCreateHashtagChannel,
|
||||
handleBulkCreateHashtagChannels,
|
||||
handleDeleteChannel,
|
||||
handleDeleteContact,
|
||||
} = useContactsAndChannels({
|
||||
@@ -421,16 +424,25 @@ export function App() {
|
||||
[fetchUndecryptedCount, setChannels]
|
||||
);
|
||||
|
||||
const handleOpenNewMessage = useCallback(() => {
|
||||
setNewMessagePrefillRequest(null);
|
||||
openNewMessageModal();
|
||||
}, [openNewMessageModal]);
|
||||
const handleOpenNewMessage = useCallback(
|
||||
(event?: MouseEvent<HTMLButtonElement>) => {
|
||||
setNewMessagePrefillRequest(null);
|
||||
setShowBulkAddChannelTab(event?.altKey === true);
|
||||
openNewMessageModal();
|
||||
},
|
||||
[openNewMessageModal]
|
||||
);
|
||||
|
||||
const handleCloseNewMessage = useCallback(() => {
|
||||
setNewMessagePrefillRequest(null);
|
||||
setShowBulkAddChannelTab(false);
|
||||
closeNewMessageModal();
|
||||
}, [closeNewMessageModal]);
|
||||
|
||||
const handleCloseBulkAddResults = useCallback(() => {
|
||||
setBulkAddResult(null);
|
||||
}, []);
|
||||
|
||||
const handleChannelReferenceClick = useCallback(
|
||||
(channelName: string) => {
|
||||
const existingChannel = channels.find((channel) => channel.name === channelName);
|
||||
@@ -444,11 +456,20 @@ export function App() {
|
||||
hashtagName: channelName.slice(1),
|
||||
nonce: (previous?.nonce ?? 0) + 1,
|
||||
}));
|
||||
setShowBulkAddChannelTab(false);
|
||||
openNewMessageModal();
|
||||
},
|
||||
[channels, handleNavigateToChannel, openNewMessageModal]
|
||||
);
|
||||
|
||||
const handleBulkAddChannels = useCallback(
|
||||
async (channelNames: string[], tryHistorical: boolean) => {
|
||||
const result = await handleBulkCreateHashtagChannels(channelNames, tryHistorical);
|
||||
setBulkAddResult(result);
|
||||
},
|
||||
[handleBulkCreateHashtagChannels]
|
||||
);
|
||||
|
||||
const statusProps = {
|
||||
health,
|
||||
config,
|
||||
@@ -474,6 +495,9 @@ export function App() {
|
||||
blockedKeys: appSettings?.blocked_keys ?? [],
|
||||
blockedNames: appSettings?.blocked_names ?? [],
|
||||
};
|
||||
const bulkAddChannelResultModalProps = {
|
||||
result: bulkAddResult,
|
||||
};
|
||||
const conversationPaneProps = {
|
||||
activeConversation,
|
||||
contacts,
|
||||
@@ -570,10 +594,12 @@ export function App() {
|
||||
};
|
||||
const newMessageModalProps = {
|
||||
undecryptedCount,
|
||||
showBulkAddChannelTab,
|
||||
prefillRequest: newMessagePrefillRequest,
|
||||
onCreateContact: handleCreateContact,
|
||||
onCreateChannel: handleCreateChannel,
|
||||
onCreateHashtagChannel: handleCreateHashtagChannel,
|
||||
onBulkAddHashtagChannels: handleBulkAddChannels,
|
||||
};
|
||||
const contactInfoPaneProps = {
|
||||
contactKey: infoPaneContactKey,
|
||||
@@ -637,6 +663,7 @@ export function App() {
|
||||
<AppShell
|
||||
localLabel={localLabel}
|
||||
showNewMessage={showNewMessage}
|
||||
showBulkAddResults={bulkAddResult !== null}
|
||||
showSettings={showSettings}
|
||||
settingsSection={settingsSection}
|
||||
sidebarOpen={sidebarOpen}
|
||||
@@ -647,6 +674,7 @@ export function App() {
|
||||
onToggleSettingsView={handleToggleSettingsView}
|
||||
onCloseSettingsView={handleCloseSettingsView}
|
||||
onCloseNewMessage={handleCloseNewMessage}
|
||||
onCloseBulkAddResults={handleCloseBulkAddResults}
|
||||
onLocalLabelChange={setLocalLabel}
|
||||
statusProps={statusProps}
|
||||
sidebarProps={sidebarProps}
|
||||
@@ -655,6 +683,7 @@ export function App() {
|
||||
settingsProps={settingsProps}
|
||||
crackerProps={crackerProps}
|
||||
newMessageModalProps={newMessageModalProps}
|
||||
bulkAddChannelResultModalProps={bulkAddChannelResultModalProps}
|
||||
contactInfoPaneProps={contactInfoPaneProps}
|
||||
channelInfoPaneProps={channelInfoPaneProps}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type {
|
||||
AppSettings,
|
||||
AppSettingsUpdate,
|
||||
BulkCreateHashtagChannelsResult,
|
||||
Channel,
|
||||
ChannelDetail,
|
||||
CommandResponse,
|
||||
@@ -190,6 +191,11 @@ export const api = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name, key }),
|
||||
}),
|
||||
bulkCreateHashtagChannels: (channelNames: string[], tryHistorical?: boolean) =>
|
||||
fetchJson<BulkCreateHashtagChannelsResult>('/channels/bulk-hashtag', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ channel_names: channelNames, try_historical: tryHistorical }),
|
||||
}),
|
||||
deleteChannel: (key: string) =>
|
||||
fetchJson<{ status: string }>(`/channels/${key}`, { method: 'DELETE' }),
|
||||
getChannelDetail: (key: string) => fetchJson<ChannelDetail>(`/channels/${key}/detail`),
|
||||
|
||||
@@ -5,6 +5,7 @@ import { StatusBar } from './StatusBar';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { ConversationPane } from './ConversationPane';
|
||||
import { NewMessageModal } from './NewMessageModal';
|
||||
import { BulkAddChannelResultModal } from './BulkAddChannelResultModal';
|
||||
import { ContactInfoPane } from './ContactInfoPane';
|
||||
import { ChannelInfoPane } from './ChannelInfoPane';
|
||||
import { SecurityWarningModal } from './SecurityWarningModal';
|
||||
@@ -33,12 +34,17 @@ const SearchView = lazy(() => import('./SearchView').then((m) => ({ default: m.S
|
||||
type SidebarProps = ComponentProps<typeof Sidebar>;
|
||||
type ConversationPaneProps = ComponentProps<typeof ConversationPane>;
|
||||
type NewMessageModalProps = Omit<ComponentProps<typeof NewMessageModal>, 'open' | 'onClose'>;
|
||||
type BulkAddChannelResultModalProps = Omit<
|
||||
ComponentProps<typeof BulkAddChannelResultModal>,
|
||||
'open' | 'onClose'
|
||||
>;
|
||||
type ContactInfoPaneProps = ComponentProps<typeof ContactInfoPane>;
|
||||
type ChannelInfoPaneProps = ComponentProps<typeof ChannelInfoPane>;
|
||||
|
||||
interface AppShellProps {
|
||||
localLabel: LocalLabel;
|
||||
showNewMessage: boolean;
|
||||
showBulkAddResults: boolean;
|
||||
showSettings: boolean;
|
||||
settingsSection: SettingsSection;
|
||||
sidebarOpen: boolean;
|
||||
@@ -50,6 +56,7 @@ interface AppShellProps {
|
||||
onToggleSettingsView: () => void;
|
||||
onCloseSettingsView: () => void;
|
||||
onCloseNewMessage: () => void;
|
||||
onCloseBulkAddResults: () => void;
|
||||
onLocalLabelChange: (label: LocalLabel) => void;
|
||||
statusProps: Pick<ComponentProps<typeof StatusBar>, 'health' | 'config'>;
|
||||
sidebarProps: SidebarProps;
|
||||
@@ -61,6 +68,7 @@ interface AppShellProps {
|
||||
>;
|
||||
crackerProps: Omit<CrackerPanelProps, 'visible' | 'onRunningChange'>;
|
||||
newMessageModalProps: NewMessageModalProps;
|
||||
bulkAddChannelResultModalProps: BulkAddChannelResultModalProps;
|
||||
contactInfoPaneProps: ContactInfoPaneProps;
|
||||
channelInfoPaneProps: ChannelInfoPaneProps;
|
||||
}
|
||||
@@ -68,6 +76,7 @@ interface AppShellProps {
|
||||
export function AppShell({
|
||||
localLabel,
|
||||
showNewMessage,
|
||||
showBulkAddResults,
|
||||
showSettings,
|
||||
settingsSection,
|
||||
sidebarOpen,
|
||||
@@ -79,6 +88,7 @@ export function AppShell({
|
||||
onToggleSettingsView,
|
||||
onCloseSettingsView,
|
||||
onCloseNewMessage,
|
||||
onCloseBulkAddResults,
|
||||
onLocalLabelChange,
|
||||
statusProps,
|
||||
sidebarProps,
|
||||
@@ -87,6 +97,7 @@ export function AppShell({
|
||||
settingsProps,
|
||||
crackerProps,
|
||||
newMessageModalProps,
|
||||
bulkAddChannelResultModalProps,
|
||||
contactInfoPaneProps,
|
||||
channelInfoPaneProps,
|
||||
}: AppShellProps) {
|
||||
@@ -306,6 +317,11 @@ export function AppShell({
|
||||
open={showNewMessage}
|
||||
onClose={onCloseNewMessage}
|
||||
/>
|
||||
<BulkAddChannelResultModal
|
||||
{...bulkAddChannelResultModalProps}
|
||||
open={showBulkAddResults}
|
||||
onClose={onCloseBulkAddResults}
|
||||
/>
|
||||
|
||||
<SecurityWarningModal health={statusProps.health} />
|
||||
<ContactInfoPane {...contactInfoPaneProps} />
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
import type { BulkCreateHashtagChannelsResult, Channel } from '../types';
|
||||
import { getConversationHash } from '../utils/urlHash';
|
||||
import { Button } from './ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from './ui/dialog';
|
||||
|
||||
interface BulkAddChannelResultModalProps {
|
||||
open: boolean;
|
||||
result: BulkCreateHashtagChannelsResult | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function getChannelHref(channel: Channel): string {
|
||||
const hash = getConversationHash({
|
||||
type: 'channel',
|
||||
id: channel.key,
|
||||
name: channel.name,
|
||||
});
|
||||
if (typeof window === 'undefined') {
|
||||
return hash;
|
||||
}
|
||||
return `${window.location.origin}${window.location.pathname}${hash}`;
|
||||
}
|
||||
|
||||
export function BulkAddChannelResultModal({
|
||||
open,
|
||||
result,
|
||||
onClose,
|
||||
}: BulkAddChannelResultModalProps) {
|
||||
const createdChannels = result?.created_channels ?? [];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||
<DialogContent className="sm:max-w-[520px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Bulk Add Complete</DialogTitle>
|
||||
<DialogDescription>
|
||||
{result?.message ?? 'Review the newly added rooms below.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{result && (
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div className="rounded-md border border-border/70 bg-muted/30 px-3 py-2">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">Created</div>
|
||||
<div className="mt-1 font-medium">{createdChannels.length}</div>
|
||||
</div>
|
||||
<div className="rounded-md border border-border/70 bg-muted/30 px-3 py-2">
|
||||
<div className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Already Present
|
||||
</div>
|
||||
<div className="mt-1 font-medium">{result.existing_count}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{createdChannels.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ctrl+click any room to open it in a new tab.
|
||||
</p>
|
||||
<div className="max-h-64 overflow-y-auto rounded-md border border-border/70">
|
||||
<ul className="divide-y divide-border/70">
|
||||
{createdChannels.map((channel) => (
|
||||
<li key={channel.key}>
|
||||
<a
|
||||
href={getChannelHref(channel)}
|
||||
className="block px-3 py-2 text-sm text-primary hover:bg-accent hover:text-primary"
|
||||
>
|
||||
{channel.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No new rooms were added.</p>
|
||||
)}
|
||||
|
||||
{result && result.invalid_names.length > 0 && (
|
||||
<div className="rounded-md border border-warning/30 bg-warning/10 px-3 py-2 text-sm text-warning">
|
||||
Ignored invalid room names: {result.invalid_names.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -3,23 +3,29 @@ import { Dice5 } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from './ui/dialog';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
||||
import { Input } from './ui/input';
|
||||
import { Label } from './ui/label';
|
||||
import { Checkbox } from './ui/checkbox';
|
||||
import { Button } from './ui/button';
|
||||
import { toast } from './ui/sonner';
|
||||
|
||||
type Tab = 'new-contact' | 'new-channel' | 'hashtag';
|
||||
type Tab = 'new-contact' | 'new-channel' | 'hashtag' | 'bulk-hashtag';
|
||||
|
||||
interface BulkParseResult {
|
||||
channelNames: string[];
|
||||
invalidNames: string[];
|
||||
}
|
||||
|
||||
interface NewMessageModalProps {
|
||||
open: boolean;
|
||||
undecryptedCount: number;
|
||||
showBulkAddChannelTab?: boolean;
|
||||
prefillRequest?: {
|
||||
tab: 'hashtag';
|
||||
hashtagName: string;
|
||||
@@ -29,53 +35,121 @@ interface NewMessageModalProps {
|
||||
onCreateContact: (name: string, publicKey: string, tryHistorical: boolean) => Promise<void>;
|
||||
onCreateChannel: (name: string, key: string, tryHistorical: boolean) => Promise<void>;
|
||||
onCreateHashtagChannel: (name: string, tryHistorical: boolean) => Promise<void>;
|
||||
onBulkAddHashtagChannels: (channelNames: string[], tryHistorical: boolean) => Promise<void>;
|
||||
}
|
||||
|
||||
function validateHashtagName(channelName: string): string | null {
|
||||
if (!channelName) {
|
||||
return 'Channel name is required';
|
||||
}
|
||||
if (!/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(channelName)) {
|
||||
return 'Use letters, numbers, and single dashes (no leading/trailing dashes)';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function parseBulkHashtagNames(rawText: string, permitCapitals: boolean): BulkParseResult {
|
||||
const tokens = rawText
|
||||
.split(/[\s,]+/)
|
||||
.map((token) => token.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
const invalidNames: string[] = [];
|
||||
const channelNames: string[] = [];
|
||||
const seen = new Set<string>();
|
||||
|
||||
for (const token of tokens) {
|
||||
const stripped = token.replace(/^#+/, '');
|
||||
const validationError = validateHashtagName(stripped);
|
||||
if (validationError) {
|
||||
invalidNames.push(token);
|
||||
continue;
|
||||
}
|
||||
|
||||
const normalized = permitCapitals ? stripped : stripped.toLowerCase();
|
||||
const channelName = `#${normalized}`;
|
||||
if (seen.has(channelName)) {
|
||||
continue;
|
||||
}
|
||||
seen.add(channelName);
|
||||
channelNames.push(channelName);
|
||||
}
|
||||
|
||||
return { channelNames, invalidNames };
|
||||
}
|
||||
|
||||
export function NewMessageModal({
|
||||
open,
|
||||
undecryptedCount,
|
||||
showBulkAddChannelTab = false,
|
||||
prefillRequest = null,
|
||||
onClose,
|
||||
onCreateContact,
|
||||
onCreateChannel,
|
||||
onCreateHashtagChannel,
|
||||
onBulkAddHashtagChannels,
|
||||
}: NewMessageModalProps) {
|
||||
const [tab, setTab] = useState<Tab>('new-contact');
|
||||
const [name, setName] = useState('');
|
||||
const [contactKey, setContactKey] = useState('');
|
||||
const [channelKey, setChannelKey] = useState('');
|
||||
const [bulkChannelText, setBulkChannelText] = useState('');
|
||||
const [tryHistorical, setTryHistorical] = useState(false);
|
||||
const [permitCapitals, setPermitCapitals] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const hashtagInputRef = useRef<HTMLInputElement>(null);
|
||||
const bulkTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
setName('');
|
||||
setContactKey('');
|
||||
setChannelKey('');
|
||||
setBulkChannelText('');
|
||||
setTryHistorical(false);
|
||||
setPermitCapitals(false);
|
||||
setError('');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !prefillRequest) {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTab(prefillRequest.tab);
|
||||
setName(prefillRequest.hashtagName);
|
||||
setContactKey('');
|
||||
setChannelKey('');
|
||||
setTryHistorical(false);
|
||||
setPermitCapitals(false);
|
||||
setError('');
|
||||
setLoading(false);
|
||||
requestAnimationFrame(() => {
|
||||
hashtagInputRef.current?.focus();
|
||||
});
|
||||
}, [open, prefillRequest]);
|
||||
if (prefillRequest) {
|
||||
setTab(prefillRequest.tab);
|
||||
setName(prefillRequest.hashtagName);
|
||||
setContactKey('');
|
||||
setChannelKey('');
|
||||
setBulkChannelText('');
|
||||
setTryHistorical(false);
|
||||
setPermitCapitals(false);
|
||||
setError('');
|
||||
setLoading(false);
|
||||
requestAnimationFrame(() => {
|
||||
hashtagInputRef.current?.focus();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (showBulkAddChannelTab) {
|
||||
setTab('bulk-hashtag');
|
||||
setName('');
|
||||
setContactKey('');
|
||||
setChannelKey('');
|
||||
setBulkChannelText('');
|
||||
setTryHistorical(false);
|
||||
setPermitCapitals(false);
|
||||
setError('');
|
||||
setLoading(false);
|
||||
requestAnimationFrame(() => {
|
||||
bulkTextareaRef.current?.focus();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setTab('new-contact');
|
||||
}, [open, prefillRequest, showBulkAddChannelTab]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
setError('');
|
||||
@@ -87,7 +161,6 @@ export function NewMessageModal({
|
||||
setError('Name and public key are required');
|
||||
return;
|
||||
}
|
||||
// handleCreateContact sets activeConversation with the backend-normalized key
|
||||
await onCreateContact(name.trim(), contactKey.trim(), tryHistorical);
|
||||
} else if (tab === 'new-channel') {
|
||||
if (!name.trim() || !channelKey.trim()) {
|
||||
@@ -102,10 +175,24 @@ export function NewMessageModal({
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
// Normalize to lowercase unless user explicitly permits capitals
|
||||
const normalizedName = permitCapitals ? channelName : channelName.toLowerCase();
|
||||
await onCreateHashtagChannel(`#${normalizedName}`, tryHistorical);
|
||||
} else {
|
||||
const { channelNames, invalidNames } = parseBulkHashtagNames(
|
||||
bulkChannelText,
|
||||
permitCapitals
|
||||
);
|
||||
if (channelNames.length === 0) {
|
||||
setError('Enter at least one valid room name');
|
||||
return;
|
||||
}
|
||||
if (invalidNames.length > 0) {
|
||||
setError(`Invalid room names: ${invalidNames.join(', ')}`);
|
||||
return;
|
||||
}
|
||||
await onBulkAddHashtagChannels(channelNames, tryHistorical);
|
||||
}
|
||||
|
||||
resetForm();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
@@ -118,16 +205,6 @@ export function NewMessageModal({
|
||||
}
|
||||
};
|
||||
|
||||
const validateHashtagName = (channelName: string): string | null => {
|
||||
if (!channelName) {
|
||||
return 'Channel name is required';
|
||||
}
|
||||
if (!/^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$/.test(channelName)) {
|
||||
return 'Use letters, numbers, and single dashes (no leading/trailing dashes)';
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleCreateAndAddAnother = async () => {
|
||||
setError('');
|
||||
const channelName = name.trim();
|
||||
@@ -139,7 +216,6 @@ export function NewMessageModal({
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Normalize to lowercase unless user explicitly permits capitals
|
||||
const normalizedName = permitCapitals ? channelName : channelName.toLowerCase();
|
||||
await onCreateHashtagChannel(`#${normalizedName}`, tryHistorical);
|
||||
setName('');
|
||||
@@ -166,28 +242,36 @@ export function NewMessageModal({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Conversation</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{tab === 'new-contact' && 'Add a new contact by entering their name and public key'}
|
||||
{tab === 'new-channel' && 'Create a private channel with a shared encryption key'}
|
||||
{tab === 'hashtag' && 'Join a public hashtag channel'}
|
||||
{tab === 'bulk-hashtag' && 'Paste multiple hashtag rooms to add them in one batch'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs
|
||||
value={tab}
|
||||
onValueChange={(v) => {
|
||||
setTab(v as Tab);
|
||||
onValueChange={(value) => {
|
||||
setTab(value as Tab);
|
||||
resetForm();
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsList
|
||||
className={
|
||||
showBulkAddChannelTab ? 'grid w-full grid-cols-4' : 'grid w-full grid-cols-3'
|
||||
}
|
||||
>
|
||||
<TabsTrigger value="new-contact">Contact</TabsTrigger>
|
||||
<TabsTrigger value="new-channel">Private Channel</TabsTrigger>
|
||||
<TabsTrigger value="hashtag">Hashtag Channel</TabsTrigger>
|
||||
{showBulkAddChannelTab && (
|
||||
<TabsTrigger value="bulk-hashtag">Bulk Add Channel</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="new-contact" className="mt-4 space-y-4">
|
||||
@@ -239,7 +323,7 @@ export function NewMessageModal({
|
||||
const bytes = new Uint8Array(16);
|
||||
crypto.getRandomValues(bytes);
|
||||
const hex = Array.from(bytes)
|
||||
.map((b) => b.toString(16).padStart(2, '0'))
|
||||
.map((byte) => byte.toString(16).padStart(2, '0'))
|
||||
.join('');
|
||||
setChannelKey(hex);
|
||||
}}
|
||||
@@ -268,20 +352,55 @@ export function NewMessageModal({
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 space-y-1">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={permitCapitals}
|
||||
onChange={(e) => setPermitCapitals(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-input accent-primary"
|
||||
className="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
<span className="text-sm">Permit capitals in channel key derivation</span>
|
||||
</label>
|
||||
<p className="text-xs text-muted-foreground pl-7">
|
||||
<p className="pl-7 text-xs text-muted-foreground">
|
||||
Not recommended; most companions normalize to lowercase
|
||||
</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{showBulkAddChannelTab && (
|
||||
<TabsContent value="bulk-hashtag" className="mt-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bulk-hashtag-names">Bulk Add Channel</Label>
|
||||
<textarea
|
||||
ref={bulkTextareaRef}
|
||||
id="bulk-hashtag-names"
|
||||
aria-label="Bulk channel names"
|
||||
value={bulkChannelText}
|
||||
onChange={(e) => setBulkChannelText(e.target.value)}
|
||||
placeholder={'#ops\nmesh-room\nanother-room'}
|
||||
className="min-h-48 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Paste room names separated by lines, spaces, or commas. Leading # marks are
|
||||
stripped automatically.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="flex cursor-pointer items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={permitCapitals}
|
||||
onChange={(e) => setPermitCapitals(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
<span className="text-sm">Permit capitals in channel key derivation</span>
|
||||
</label>
|
||||
<p className="pl-7 text-xs text-muted-foreground">
|
||||
Not recommended; most companions normalize to lowercase
|
||||
</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
|
||||
{showHistoricalOption && (
|
||||
@@ -289,7 +408,7 @@ export function NewMessageModal({
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Label
|
||||
htmlFor="try-historical"
|
||||
className="text-sm text-muted-foreground cursor-pointer"
|
||||
className="cursor-pointer text-sm text-muted-foreground"
|
||||
>
|
||||
Try decrypting {undecryptedCount.toLocaleString()} stored packet
|
||||
{undecryptedCount !== 1 ? 's' : ''}
|
||||
@@ -301,7 +420,7 @@ export function NewMessageModal({
|
||||
/>
|
||||
</div>
|
||||
{tryHistorical && (
|
||||
<p className="text-xs text-muted-foreground text-right">
|
||||
<p className="text-right text-xs text-muted-foreground">
|
||||
Messages will stream in as they decrypt in the background
|
||||
</p>
|
||||
)}
|
||||
@@ -330,7 +449,13 @@ export function NewMessageModal({
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleCreate} disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create'}
|
||||
{loading
|
||||
? tab === 'bulk-hashtag'
|
||||
? 'Adding...'
|
||||
: 'Creating...'
|
||||
: tab === 'bulk-hashtag'
|
||||
? 'Add Channels'
|
||||
: 'Create'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -97,7 +97,7 @@ interface SidebarProps {
|
||||
channels: Channel[];
|
||||
activeConversation: Conversation | null;
|
||||
onSelectConversation: (conversation: Conversation) => void;
|
||||
onNewMessage: () => void;
|
||||
onNewMessage: (event?: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
lastMessageTimes: ConversationTimes;
|
||||
unreadCounts: Record<string, number>;
|
||||
/** Tracks which conversations have unread messages that mention the user */
|
||||
|
||||
@@ -4,7 +4,7 @@ import { takePrefetchOrFetch } from '../prefetch';
|
||||
import { toast } from '../components/ui/sonner';
|
||||
import { getContactDisplayName } from '../utils/pubkey';
|
||||
import { findPublicChannel, PUBLIC_CHANNEL_KEY, PUBLIC_CHANNEL_NAME } from '../utils/publicChannel';
|
||||
import type { Channel, Contact, Conversation } from '../types';
|
||||
import type { BulkCreateHashtagChannelsResult, Channel, Contact, Conversation } from '../types';
|
||||
|
||||
interface UseContactsAndChannelsArgs {
|
||||
setActiveConversation: (conv: Conversation | null) => void;
|
||||
@@ -112,6 +112,24 @@ export function useContactsAndChannels({
|
||||
[fetchUndecryptedCountInternal, setActiveConversation]
|
||||
);
|
||||
|
||||
const handleBulkCreateHashtagChannels = useCallback(
|
||||
async (
|
||||
channelNames: string[],
|
||||
tryHistorical: boolean
|
||||
): Promise<BulkCreateHashtagChannelsResult> => {
|
||||
const result = await api.bulkCreateHashtagChannels(channelNames, tryHistorical);
|
||||
const data = await api.getChannels();
|
||||
setChannels(data);
|
||||
|
||||
if (tryHistorical && result.decrypt_started) {
|
||||
fetchUndecryptedCountInternal();
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
[fetchUndecryptedCountInternal]
|
||||
);
|
||||
|
||||
const handleDeleteChannel = useCallback(
|
||||
async (key: string) => {
|
||||
if (!confirm('Delete this channel? Message history will be preserved.')) return;
|
||||
@@ -190,6 +208,7 @@ export function useContactsAndChannels({
|
||||
handleCreateContact,
|
||||
handleCreateChannel,
|
||||
handleCreateHashtagChannel,
|
||||
handleBulkCreateHashtagChannels,
|
||||
handleDeleteChannel,
|
||||
handleDeleteContact,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { BulkAddChannelResultModal } from '../components/BulkAddChannelResultModal';
|
||||
|
||||
describe('BulkAddChannelResultModal', () => {
|
||||
it('renders links only for newly created rooms', () => {
|
||||
render(
|
||||
<BulkAddChannelResultModal
|
||||
open
|
||||
onClose={() => {}}
|
||||
result={{
|
||||
created_channels: [
|
||||
{
|
||||
key: 'AA'.repeat(16),
|
||||
name: '#ops',
|
||||
is_hashtag: true,
|
||||
on_radio: false,
|
||||
last_read_at: null,
|
||||
},
|
||||
{
|
||||
key: 'BB'.repeat(16),
|
||||
name: '#mesh-room',
|
||||
is_hashtag: true,
|
||||
on_radio: false,
|
||||
last_read_at: null,
|
||||
},
|
||||
],
|
||||
existing_count: 3,
|
||||
invalid_names: ['bad_room'],
|
||||
decrypt_started: true,
|
||||
decrypt_total_packets: 8,
|
||||
message: 'Created 2 rooms',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const opsLink = screen.getByRole('link', { name: '#ops' });
|
||||
const meshLink = screen.getByRole('link', { name: '#mesh-room' });
|
||||
|
||||
expect(opsLink.getAttribute('href')).toContain('#channel/');
|
||||
expect(meshLink.getAttribute('href')).toContain('#channel/');
|
||||
expect(screen.queryByRole('link', { name: /bad_room/i })).toBeNull();
|
||||
expect(screen.getByText(/Ignored invalid room names: bad_room/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -27,6 +27,7 @@ describe('NewMessageModal form reset', () => {
|
||||
const onCreateContact = vi.fn().mockResolvedValue(undefined);
|
||||
const onCreateChannel = vi.fn().mockResolvedValue(undefined);
|
||||
const onCreateHashtagChannel = vi.fn().mockResolvedValue(undefined);
|
||||
const onBulkAddHashtagChannels = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
@@ -44,6 +45,7 @@ describe('NewMessageModal form reset', () => {
|
||||
onCreateContact={onCreateContact}
|
||||
onCreateChannel={onCreateChannel}
|
||||
onCreateHashtagChannel={onCreateHashtagChannel}
|
||||
onBulkAddHashtagChannels={onBulkAddHashtagChannels}
|
||||
{...overrides}
|
||||
/>
|
||||
);
|
||||
@@ -111,6 +113,53 @@ describe('NewMessageModal form reset', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('bulk hashtag tab', () => {
|
||||
it('is only visible when enabled', () => {
|
||||
renderModal();
|
||||
expect(screen.queryByRole('tab', { name: 'Bulk Add Channel' })).toBeNull();
|
||||
});
|
||||
|
||||
it('opens on the bulk tab when enabled and submits normalized room names', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderModal(true, { showBulkAddChannelTab: true });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('tab', { name: 'Bulk Add Channel' })).toHaveAttribute(
|
||||
'data-state',
|
||||
'active'
|
||||
);
|
||||
});
|
||||
|
||||
await user.type(
|
||||
screen.getByRole('textbox', { name: 'Bulk channel names' }),
|
||||
'#Ops{enter}mesh-room another-room #Ops'
|
||||
);
|
||||
await user.click(screen.getByRole('button', { name: 'Add Channels' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onBulkAddHashtagChannels).toHaveBeenCalledWith(
|
||||
['#ops', '#mesh-room', '#another-room'],
|
||||
false
|
||||
);
|
||||
});
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows invalid bulk room names before submitting', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderModal(true, { showBulkAddChannelTab: true });
|
||||
|
||||
await user.type(
|
||||
screen.getByRole('textbox', { name: 'Bulk channel names' }),
|
||||
'good-room bad_room'
|
||||
);
|
||||
await user.click(screen.getByRole('button', { name: 'Add Channels' }));
|
||||
|
||||
expect(onBulkAddHashtagChannels).not.toHaveBeenCalled();
|
||||
expect(screen.getByText('Invalid room names: bad_room')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('new-contact tab', () => {
|
||||
it('clears name and key after successful Create', async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
@@ -9,7 +9,7 @@ import { act, renderHook } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
|
||||
import { useContactsAndChannels } from '../hooks/useContactsAndChannels';
|
||||
import type { Contact } from '../types';
|
||||
import type { BulkCreateHashtagChannelsResult, Contact } from '../types';
|
||||
|
||||
// Mock api module
|
||||
vi.mock('../api', () => ({
|
||||
@@ -18,6 +18,7 @@ vi.mock('../api', () => ({
|
||||
getChannels: vi.fn(),
|
||||
createContact: vi.fn(),
|
||||
createChannel: vi.fn(),
|
||||
bulkCreateHashtagChannels: vi.fn(),
|
||||
deleteContact: vi.fn(),
|
||||
deleteChannel: vi.fn(),
|
||||
decryptHistoricalPackets: vi.fn(),
|
||||
@@ -171,4 +172,41 @@ describe('useContactsAndChannels', () => {
|
||||
expect(api.getContacts).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('bulk hashtag creation', () => {
|
||||
it('refreshes channels and returns the backend result', async () => {
|
||||
const { api } = await import('../api');
|
||||
const resultPayload: BulkCreateHashtagChannelsResult = {
|
||||
created_channels: [
|
||||
{
|
||||
key: 'AA'.repeat(16),
|
||||
name: '#ops',
|
||||
is_hashtag: true,
|
||||
on_radio: false,
|
||||
last_read_at: null,
|
||||
},
|
||||
],
|
||||
existing_count: 1,
|
||||
invalid_names: [],
|
||||
decrypt_started: true,
|
||||
decrypt_total_packets: 12,
|
||||
message: 'Created 1 room',
|
||||
};
|
||||
vi.mocked(api.bulkCreateHashtagChannels).mockResolvedValueOnce(resultPayload);
|
||||
vi.mocked(api.getChannels).mockResolvedValueOnce(resultPayload.created_channels);
|
||||
vi.mocked(api.getUndecryptedPacketCount).mockResolvedValueOnce({ count: 9 });
|
||||
|
||||
const { result } = renderUseContactsAndChannels();
|
||||
|
||||
let response: BulkCreateHashtagChannelsResult | null = null;
|
||||
await act(async () => {
|
||||
response = await result.current.handleBulkCreateHashtagChannels(['#ops'], true);
|
||||
});
|
||||
|
||||
expect(api.bulkCreateHashtagChannels).toHaveBeenCalledWith(['#ops'], true);
|
||||
expect(api.getChannels).toHaveBeenCalled();
|
||||
expect(api.getUndecryptedPacketCount).toHaveBeenCalled();
|
||||
expect(response).toEqual(resultPayload);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -243,6 +243,15 @@ export interface ChannelDetail {
|
||||
top_senders_24h: ChannelTopSender[];
|
||||
}
|
||||
|
||||
export interface BulkCreateHashtagChannelsResult {
|
||||
created_channels: Channel[];
|
||||
existing_count: number;
|
||||
invalid_names: string[];
|
||||
decrypt_started: boolean;
|
||||
decrypt_total_packets: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
/** A single path that a message took to reach us */
|
||||
export interface MessagePath {
|
||||
/** Hex-encoded routing path */
|
||||
|
||||
@@ -147,7 +147,7 @@ export function getMapFocusHash(publicKeyPrefix: string): string {
|
||||
}
|
||||
|
||||
// Generate URL hash from conversation
|
||||
function getConversationHash(conv: Conversation | null): string {
|
||||
export function getConversationHash(conv: Conversation | null): string {
|
||||
if (!conv) return '';
|
||||
if (conv.type === 'raw') return '#raw';
|
||||
if (conv.type === 'map') return '#map';
|
||||
|
||||
Reference in New Issue
Block a user