Add better search management and operators + contact search quick link

frontend/src/components/ContactInfoPane.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useEffect, useState } from 'react';
-import { Ban, Star } from 'lucide-react';
+import { Ban, Search, Star } from 'lucide-react';
 import { api } from '../api';
 import { formatTime } from '../utils/messageParser';
 import {
@@ -51,6 +51,8 @@ interface ContactInfoPaneProps {
   favorites: Favorite[];
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => void;
   onNavigateToChannel?: (channelKey: string) => void;
+  onSearchMessagesByKey?: (publicKey: string) => void;
+  onSearchMessagesByName?: (name: string) => void;
   blockedKeys?: string[];
   blockedNames?: string[];
   onToggleBlockedKey?: (key: string) => void;
@@ -66,6 +68,8 @@ export function ContactInfoPane({
   favorites,
   onToggleFavorite,
   onNavigateToChannel,
+  onSearchMessagesByKey,
+  onSearchMessagesByName,
   blockedKeys = [],
   blockedNames = [],
   onToggleBlockedKey,
@@ -183,6 +187,19 @@ export function ContactInfoPane({
               </div>
             )}
 
+            {onSearchMessagesByName && (
+              <div className="px-5 py-3 border-b border-border">
+                <button
+                  type="button"
+                  className="text-sm flex items-center gap-2 hover:text-primary transition-colors"
+                  onClick={() => onSearchMessagesByName(nameOnlyValue)}
+                >
+                  <Search className="h-4.5 w-4.5 text-muted-foreground" aria-hidden="true" />
+                  <span>Search user&apos;s messages by name</span>
+                </button>
+              </div>
+            )}
+
             {fromChannel && (
               <ChannelAttributionWarning
                 nameOnly
@@ -387,6 +404,19 @@ export function ContactInfoPane({
               </div>
             )}
 
+            {onSearchMessagesByKey && (
+              <div className="px-5 py-3 border-b border-border">
+                <button
+                  type="button"
+                  className="text-sm flex items-center gap-2 hover:text-primary transition-colors"
+                  onClick={() => onSearchMessagesByKey(contact.public_key)}
+                >
+                  <Search className="h-4.5 w-4.5 text-muted-foreground" aria-hidden="true" />
+                  <span>Search user&apos;s messages by key</span>
+                </button>
+              </div>
+            )}
+
             {/* Nearest Repeaters */}
             {analytics && analytics.nearest_repeaters.length > 0 && (
               <div className="px-5 py-3 border-b border-border">

frontend/src/components/SearchView.tsx

@@ -19,6 +19,8 @@ interface SearchResult {
   sender_name: string | null;
 }
 
+const SEARCH_OPERATOR_RE = /(?<!\S)(user|channel):(?:"((?:[^"\\]|\\.)*)"|(\S+))/gi;
+
 export interface SearchNavigateTarget {
   id: number;
   type: 'PRIV' | 'CHAN';
@@ -30,6 +32,10 @@ export interface SearchViewProps {
   contacts: Contact[];
   channels: Channel[];
   onNavigateToMessage: (target: SearchNavigateTarget) => void;
+  prefillRequest?: {
+    query: string;
+    nonce: number;
+  } | null;
 }
 
 function highlightMatch(text: string, query: string): React.ReactNode[] {
@@ -53,7 +59,34 @@ function highlightMatch(text: string, query: string): React.ReactNode[] {
   return parts;
 }
 
-export function SearchView({ contacts, channels, onNavigateToMessage }: SearchViewProps) {
+function getHighlightQuery(query: string): string {
+  const fragments: string[] = [];
+  let lastIndex = 0;
+  let foundOperator = false;
+
+  for (const match of query.matchAll(SEARCH_OPERATOR_RE)) {
+    foundOperator = true;
+    fragments.push(query.slice(lastIndex, match.index));
+    lastIndex = (match.index ?? 0) + match[0].length;
+  }
+
+  if (!foundOperator) {
+    return query;
+  }
+
+  fragments.push(query.slice(lastIndex));
+  return fragments
+    .map((fragment) => fragment.trim())
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function SearchView({
+  contacts,
+  channels,
+  onNavigateToMessage,
+  prefillRequest = null,
+}: SearchViewProps) {
   const [query, setQuery] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
@@ -62,6 +95,7 @@ export function SearchView({ contacts, channels, onNavigateToMessage }: SearchVi
   const [offset, setOffset] = useState(0);
   const abortRef = useRef<AbortController | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const highlightQuery = getHighlightQuery(debouncedQuery);
 
   // Debounce query
   useEffect(() => {
@@ -78,6 +112,17 @@ export function SearchView({ contacts, channels, onNavigateToMessage }: SearchVi
     setHasMore(false);
   }, [debouncedQuery]);
 
+  useEffect(() => {
+    if (!prefillRequest) {
+      return;
+    }
+
+    const nextQuery = prefillRequest.query.trim();
+    setQuery(nextQuery);
+    setDebouncedQuery(nextQuery);
+    inputRef.current?.focus();
+  }, [prefillRequest]);
+
   // Fetch search results
   useEffect(() => {
     if (!debouncedQuery) {
@@ -193,7 +238,11 @@ export function SearchView({ contacts, channels, onNavigateToMessage }: SearchVi
       <div className="flex-1 overflow-y-auto">
         {!debouncedQuery && (
           <div className="p-8 text-center text-muted-foreground text-sm">
-            Type to search across all messages
+            <p>Type to search across all messages</p>
+            <p className="mt-2 text-xs">
+              Tip: use <code>user:</code> or <code>channel:</code> for keys or names, and wrap names
+              with spaces in them in quotes.
+            </p>
           </div>
         )}
 
@@ -246,7 +295,7 @@ export function SearchView({ contacts, channels, onNavigateToMessage }: SearchVi
                   result.sender_name && result.text.startsWith(`${result.sender_name}: `)
                     ? result.text.slice(result.sender_name.length + 2)
                     : result.text,
-                  debouncedQuery
+                  highlightQuery
                 )}
               </div>
             </div>