feat: inline DM search bar — find or start conversations from sidebar header

Replace the static placeholder button with a fully functional search bar
that filters existing DM conversations instantly and searches for users
via the API with debounce. Supports keyboard navigation, federation-aware
DM creation, group DM display, and portal-based glass dropdown.

packages/web/src/components/layout/ChannelSidebar.tsx

@@ -18,6 +18,7 @@ import { parseFederatedUsername, isSelf } from '../../utils/identity';
 import { joinVoiceChannel, broadcastVoiceStatus, broadcastDeafenViaLiveKit } from '../../utils/voice';
 import { ContextMenu } from '../ui/ContextMenu';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
+import { DmSearchBar } from './DmSearchBar';
 
 export function ChannelSidebar() {
   const spaces = useSpaceStore((s) => s.spaces);
@@ -399,9 +400,7 @@ export function ChannelSidebar() {
       <>
       <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard">
         <div className="h-14 px-[10px] flex items-center border-b border-border-hard z-10">
-          <button className="flex-1 min-h-8 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base transition-colors">
-            Find or start a conversation
-          </button>
+          <DmSearchBar />
         </div>
         <div className="flex-1 overflow-y-auto pt-4 px-2 no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }}>
           <div