Implement username search

frontend/src/core/api/dmApi.ts

@@ -169,3 +169,23 @@ export async function deleteDmEnvelope(id: number, recipientId: number, authToke
         data: { id, recipientId }
     });
 }
+
+export async function fetchDMConversations(token: string): Promise<any[]> {
+    const res = await fetch(`${API_BASE_URL}/dm/conversations`, { 
+        headers: getAuthHeaders(token, true) 
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.conversations || [];
+}
+
+export async function searchUsers(query: string, token: string): Promise<User[]> {
+    if (query.length < 2) return [];
+    
+    const res = await fetch(`${API_BASE_URL}/users/search?q=${encodeURIComponent(query)}`, { 
+        headers: getAuthHeaders(token, true) 
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.users || [];
+}

frontend/src/core/components/SearchBar.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef } from "react";
+import "./css/searchBar.scss";
+
+interface SearchBarProps {
+    placeholder: string;
+    children?: React.ReactNode;
+    searchQuery: string;
+    onQueryChange: (query: string) => void;
+    isExpanded: boolean;
+    onToggleExpanded: () => void;
+    leftIcon?: string | React.ReactNode;
+    rightIcon?: string | React.ReactNode;
+}
+
+export default function SearchBar({ 
+    placeholder,
+    children,
+    searchQuery,
+    onQueryChange,
+    isExpanded,
+    onToggleExpanded,
+    leftIcon = "search--outlined",
+    rightIcon = null
+}: SearchBarProps) {
+    const [dynamicHeight, setDynamicHeight] = useState<string>("48px");
+    const searchContainerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const parentContainerRef = useRef<HTMLDivElement>(null);
+
+
+    // Focus input when expanded and manage height
+    useEffect(() => {
+        if (isExpanded && inputRef.current) {
+            inputRef.current.focus();
+            // Set expanded height
+            const leftPanel = document.getElementById('chat-list');
+            if (leftPanel) {
+                const panelHeight = leftPanel.offsetHeight;
+                setDynamicHeight(`${panelHeight}px`);
+            }
+        } else {
+            // Set collapsed height
+            setDynamicHeight("48px");
+        }
+    }, [isExpanded]);
+
+    function handleToggle() {
+        onToggleExpanded();
+    };
+
+    function handleQueryChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const query = e.target.value;
+        onQueryChange(query);
+    };
+
+    // Helper function to render icon
+    function renderIcon(icon: string | React.ReactNode | undefined, defaultIcon?: string) {
+        if (icon === null) return null;
+        if (!icon) {
+            return defaultIcon ? <mdui-icon name={defaultIcon}></mdui-icon> : null;
+        } else if (typeof icon === 'string') {
+            return <mdui-icon name={icon}></mdui-icon>;
+        } else {
+            return icon;
+        }
+    };
+
+    return (
+        <div 
+            ref={parentContainerRef}
+            className="search-parent"
+        >
+            <div 
+                ref={searchContainerRef}
+                className={`search-bar-container ${isExpanded ? "expanded" : "collapsed"}`}
+                style={{ height: dynamicHeight }}
+                onClick={!isExpanded ? handleToggle : undefined}
+            >
+                {/* Single Search Bar Element */}
+                <div className="search-bar">
+                    {/* Left Icon */}
+                    <div className="search-icon">
+                        {renderIcon(leftIcon, "search--outlined")}
+                    </div>
+
+                    {/* Input/Placeholder */}
+                    <div className="search-input-container">
+                        {isExpanded ? (
+                            <input
+                                ref={inputRef}
+                                type="text"
+                                placeholder={placeholder}
+                                className="search-input"
+                                value={searchQuery}
+                                onChange={handleQueryChange}
+                                onClick={(e) => e.stopPropagation()}
+                            />
+                        ) : (
+                            <span className="search-placeholder">{placeholder}</span>
+                        )}
+                    </div>
+
+                    {/* Right Icon */}
+                    <div className="search-clear">
+                        {renderIcon(rightIcon)}
+                    </div>
+                </div>
+
+                {/* Results Section - Only visible when expanded */}
+                {isExpanded && (
+                    <div className="search-results">
+                        {children}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/core/components/css/searchBar.scss

@@ -0,0 +1,154 @@
+@use "../../../css/material" as *;
+
+$font-size: 16px;
+
+// Search container
+.search-parent {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+// SearchBar component styles
+.search-bar-container {
+    position: absolute;
+    z-index: 1001;
+    overflow: hidden;
+    
+    // All properties animate together simultaneously
+    transition: 
+        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    // Initial background color for smooth transition
+    background-color: $color-dark-surface-container-high;
+
+    &.collapsed {
+        top: 8px;
+        left: 16px;
+        right: 16px;
+        border-radius: 24px;
+        // Height will be set dynamically by React (48px)
+        // background-color inherited from parent
+    }
+
+    &.expanded {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 0;
+        background-color: $color-dark-surface-container;
+        // Height will be set dynamically by React
+    }
+
+    // Single search bar element
+    .search-bar {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        height: 48px;
+        gap: 12px;
+        cursor: pointer;
+
+        .search-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+
+            mdui-icon {
+                color: $color-dark-on-surface-variant;
+                font-size: 20px;
+                cursor: pointer;
+            }
+        }
+
+        .search-input-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            .search-placeholder {
+                color: $color-dark-on-surface-variant;
+                font-size: $font-size;
+                pointer-events: none;
+            }
+
+            .search-input {
+                flex: 1;
+                border: none;
+                outline: none;
+                background: transparent;
+                color: $color-dark-on-surface;
+                font-size: $font-size;
+                padding: 8px 0;
+                pointer-events: auto;
+
+                &::placeholder {
+                    color: $color-dark-on-surface-variant;
+                }
+            }
+        }
+
+        .search-clear {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+
+            mdui-icon {
+                color: $color-dark-on-surface-variant;
+                font-size: 20px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    // Results section
+    .search-results {
+        flex: 1;
+        overflow-y: auto;
+
+        .search-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            padding: 32px;
+            color: $color-dark-on-surface-variant;
+
+            mdui-circular-progress {
+                --mdui-circular-progress-color: $color-dark-primary;
+            }
+        }
+
+        .search-empty,
+        .search-hint {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+            color: $color-dark-on-surface-variant;
+            text-align: center;
+        }
+
+        // Custom styling for search result images
+        mdui-list-item {
+            img[slot="icon"] {
+                $size: 48px;
+                
+                width: $size;
+                height: $size;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+        }
+    }
+}