user picker

client/src/app/home-page.component.html

@@ -220,6 +220,55 @@
 
         <div class="col-lg-7">
           <div class="panel p-4 h-100">
+            <section class="access-key-panel user-search-panel mb-4">
+              <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
+                <div>
+                  <h3 class="h5 mb-1">Find people</h3>
+                  <p class="small text-secondary mb-0">Search approved accounts and add them to the chat peer list.</p>
+                </div>
+                <button
+                  class="btn btn-sm btn-outline-light"
+                  type="button"
+                  [disabled]="loadingKnownUsers()"
+                  (click)="reloadKnownUsers()"
+                >
+                  Refresh
+                </button>
+              </div>
+
+              <div class="user-search-shell">
+                <input
+                  class="form-control"
+                  [(ngModel)]="userSearch"
+                  placeholder="Search by display name or username"
+                />
+
+                @if (knownUsersError()) {
+                  <div class="alert alert-danger mt-3 mb-0">{{ knownUsersError() }}</div>
+                } @else if (loadingKnownUsers()) {
+                  <div class="empty-state p-3 text-center text-secondary mt-3">Loading users...</div>
+                } @else if (filteredKnownUsers().length === 0) {
+                  <div class="empty-state p-3 text-center text-secondary mt-3">No matching users found.</div>
+                } @else {
+                  <div class="user-search-results mt-3">
+                    @for (user of filteredKnownUsers(); track user.id) {
+                      <button class="user-search-result" type="button" (click)="addKnownPeer(user)">
+                        <span class="user-search-result-copy">
+                          <span class="fw-semibold">{{ user.displayName }}</span>
+                          <span class="small text-secondary">@{{ user.username }}</span>
+                        </span>
+                        <span class="user-search-result-action">Add</span>
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+
+              @if (knownUsersNotice()) {
+                <div class="small text-secondary mt-3">{{ knownUsersNotice() }}</div>
+              }
+            </section>
+
             <section class="access-key-panel">
               <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                 <div>