@pablozaiden/webapp 0.3.9 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/WebAppRoot.tsx

@@ -1,5 +1,5 @@
 import { startAuthentication, startRegistration } from "@simplewebauthn/browser";
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import type { ApiKeySummary, AuthSessionSummary, CreatedApiKeyResponse, CreatedUserResponse, DeviceVerificationDetails, PasskeyAuthStatusResponse, ThemePreference, UserSetupDetails, WebAppConfigResponse, WebAppUserRole, WebAppUserSummary } from "../contracts";
 import { ActionMenu, Badge, Button, ConfirmDialog, ContextMenu, DangerZone, Dialog, EmptyState, FormSection, IconButton, Panel, SelectField, TextField, type ContextMenuPosition } from "./components";
 import type { ActionMenuItem, SidebarAction, SidebarBuildContext, SidebarNode, WebAppRoute } from "./sidebar/types";
@@ -1047,6 +1047,8 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
   const { route, navigate } = useRoute(homeRoute);
   const { theme, setTheme } = useTheme();
   const [search, setSearch] = useState("");
+  const sidebarSearchId = useId();
+  const sidebarSearchInputRef = useRef<HTMLInputElement>(null);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const sidebarTreeState = useSidebarCollapsedState(appName);
@@ -1213,7 +1215,27 @@ export function WebAppRoot({ appName, homeRoute, sidebar, routes, header, onRout
           </div>
         </div>
         <div className="wapp-sidebar-scroll">
-          {sidebarSearchEnabled ? <label className="wapp-search"><span className="sr-only">Search</span><input value={search} onInput={(event) => setSearch(event.currentTarget.value)} placeholder="Search" /></label> : null}
+          {sidebarSearchEnabled ? (
+            <div className="wapp-search">
+              <label className="sr-only" htmlFor={sidebarSearchId}>Search</label>
+              <div className={`wapp-search-input-wrap${search.length > 0 ? " wapp-search-input-wrap--clearable" : ""}`}>
+                <input id={sidebarSearchId} ref={sidebarSearchInputRef} value={search} onInput={(event) => setSearch(event.currentTarget.value)} placeholder="Search" />
+                {search.length > 0 ? (
+                  <button
+                    type="button"
+                    className="wapp-search-clear"
+                    aria-label="Clear search"
+                    onClick={() => {
+                      setSearch("");
+                      sidebarSearchInputRef.current?.focus();
+                    }}
+                  >
+                    ×
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
           <SidebarTree nodes={nodes} route={route} navigate={(next) => { navigate(next); setSidebarOpen(false); }} collapsed={sidebarTreeState.collapsed} toggleCollapsed={sidebarTreeState.toggleCollapsed} searchActive={sidebarSearchActive} />
           <div className="wapp-sidebar-footer">v{effectiveVersion}<button type="button" aria-label="Reload" onClick={() => window.location.reload()}><Icon name="refresh" /></button></div>
         </div>

package/src/web/styles.css

@@ -282,10 +282,17 @@ textarea::placeholder {
   scroll-padding-bottom: var(--wapp-mobile-bottom-clearance);
 }
 
+.wapp-search {
+  margin-bottom: 1.5rem;
+}
+
+.wapp-search-input-wrap {
+  position: relative;
+}
+
 .wapp-search input {
   width: 100%;
   height: 2.625rem;
-  margin-bottom: 1.5rem;
   border: 1px solid var(--wapp-border);
   border-radius: 0.75rem;
   background: var(--wapp-surface);
@@ -296,11 +303,41 @@ textarea::placeholder {
   font-size: 0.875rem;
 }
 
+.wapp-search-input-wrap--clearable input {
+  padding-right: 2.5rem;
+}
+
 .wapp-search input:focus {
   border-color: var(--wapp-muted);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--wapp-muted), transparent 70%);
 }
 
+.wapp-search-clear {
+  position: absolute;
+  top: 50%;
+  right: 0.375rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--wapp-muted);
+  cursor: pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+}
+
+.wapp-search-clear:hover,
+.wapp-search-clear:focus-visible {
+  background: color-mix(in srgb, var(--wapp-muted), transparent 88%);
+  color: var(--wapp-text);
+  outline: none;
+}
+
 .wapp-sidebar-section.top {
   margin-bottom: 1.5rem;
 }