Replace search mode with an enhanced filter system

Removes the legacy search mode in favor of an improved event filter system. Introduces debounced filter application, JSON-based filter configuration, and a cleaner UI for filtering events, offering greater flexibility and clarity.

app/web/src/App.svelte

@@ -12,7 +12,6 @@
     import SprocketView from "./SprocketView.svelte";
     import PolicyView from "./PolicyView.svelte";
     import SearchResultsView from "./SearchResultsView.svelte";
-    import FilterBuilder from "./FilterBuilder.svelte";
     import FilterDisplay from "./FilterDisplay.svelte";
 
     // Utility imports
@@ -56,8 +55,8 @@
     let userSigner = null;
     let showSettingsDrawer = false;
     let selectedTab = localStorage.getItem("selectedTab") || "export";
-    let showFilterBuilder = false; // Show advanced filter builder
-    let searchQuery = "";
+    let showFilterBuilder = false; // Show filter builder in events view
+    let eventsViewFilter = {}; // Active filter for events view
     let searchTabs = [];
     let allEvents = [];
     let selectedFile = null;
@@ -1796,27 +1795,8 @@
         showSettingsDrawer = false;
     }
 
-    function toggleSearchMode() {
+    function toggleFilterBuilder() {
         showFilterBuilder = !showFilterBuilder;
-        if (!showFilterBuilder) {
-            searchQuery = "";
-        }
-    }
-
-    function handleSearchKeydown(event) {
-        if (event.key === "Enter" && searchQuery.trim()) {
-            createSimpleSearchTab(searchQuery.trim());
-            searchQuery = "";
-            showFilterBuilder = false;
-        } else if (event.key === "Escape") {
-            showFilterBuilder = false;
-            searchQuery = "";
-        }
-    }
-
-    function createSimpleSearchTab(query) {
-        const filter = buildFilter({ searchText: query, limit: 100 });
-        createSearchTab(filter, `Search: ${query}`);
     }
 
     function createSearchTab(filter, label) {
@@ -1847,6 +1827,7 @@
     function handleFilterApply(event) {
         const { searchText, selectedKinds, pubkeys, eventIds, tags, sinceTimestamp, untilTimestamp, limit } = event.detail;
 
+        // Build the filter for the events view
         const filter = buildFilter({
             searchText,
             kinds: selectedKinds,
@@ -1858,22 +1839,15 @@
             limit: limit || 100,
         });
 
-        let label = "Filter";
-        if (searchText) {
-            label = `Search: ${searchText.substring(0, 20)}${searchText.length > 20 ? '...' : ''}`;
-        } else if (selectedKinds.length > 0) {
-            label = `Kinds: ${selectedKinds.slice(0, 3).join(', ')}${selectedKinds.length > 3 ? '...' : ''}`;
-        } else if (pubkeys.length > 0) {
-            label = `Authors: ${pubkeys.length}`;
-        }
-
-        createSearchTab(filter, label);
-        showFilterBuilder = false;
+        // Store the active filter and reload events with it
+        eventsViewFilter = filter;
+        loadAllEvents(true, null);
     }
 
     function handleFilterClear() {
-        // Just close the filter builder
-        showFilterBuilder = false;
+        // Clear the filter and reload all events
+        eventsViewFilter = {};
+        loadAllEvents(true, null);
     }
 
     function handleFilterSweep(searchTabId) {
@@ -2316,10 +2290,14 @@
                 ? Math.floor(Date.now() / 1000)
                 : oldestEventTimestamp;
 
+            // Merge eventsViewFilter with pagination params
+            // eventsViewFilter takes precedence for authors if set, otherwise use the authors param
+            const filterAuthors = eventsViewFilter.authors || authors;
             const events = await fetchAllEvents({
+                ...eventsViewFilter,
                 limit: reset ? 100 : 200,
-                until: untilTimestamp,
-                authors: authors,
+                until: eventsViewFilter.until || untilTimestamp,
+                authors: filterAuthors,
             });
             console.log("Received events:", events.length, "events");
             if (authors && events.length > 0) {
@@ -2674,32 +2652,16 @@
 <!-- Header -->
 <Header
     {isDarkTheme}
-    isSearchMode={showFilterBuilder}
-    bind:searchQuery
     {isLoggedIn}
     {userRole}
     {currentEffectiveRole}
     {userProfile}
     {userPubkey}
-    on:searchKeydown={handleSearchKeydown}
-    on:toggleSearchMode={toggleSearchMode}
     on:toggleTheme={toggleTheme}
     on:openSettingsDrawer={openSettingsDrawer}
     on:openLoginModal={openLoginModal}
 />
 
-<!-- FilterBuilder - shown when search button is clicked -->
-{#if showFilterBuilder}
-    <div class="filter-builder-overlay">
-        <div class="filter-builder-container">
-            <FilterBuilder
-                on:apply={handleFilterApply}
-                on:clear={handleFilterClear}
-            />
-        </div>
-    </div>
-{/if}
-
 <!-- Main Content Area -->
 <div class="app-container" class:dark-theme={isDarkTheme}>
     <!-- Sidebar -->
@@ -2742,6 +2704,7 @@
                 {expandedEvents}
                 {isLoadingEvents}
                 {showOnlyMyEvents}
+                {showFilterBuilder}
                 on:scroll={handleScroll}
                 on:toggleEventExpansion={(e) => toggleEventExpansion(e.detail)}
                 on:deleteEvent={(e) => deleteEvent(e.detail)}
@@ -2750,6 +2713,9 @@
                 on:toggleChange={handleToggleChange}
                 on:loadAllEvents={(e) =>
                     loadAllEvents(e.detail.refresh, e.detail.authors)}
+                on:toggleFilterBuilder={toggleFilterBuilder}
+                on:filterApply={handleFilterApply}
+                on:filterClear={handleFilterClear}
             />
         {:else if selectedTab === "compose"}
             <ComposeView
@@ -3272,9 +3238,12 @@
 />
 
 <style>
+    :global(html),
     :global(body) {
         margin: 0;
         padding: 0;
+        overflow: hidden;
+        height: 100%;
         /* Base colors */
         --bg-color: #ddd;
         --header-bg: #eee;
@@ -4300,42 +4269,4 @@
         background: var(--header-bg);
         border: none;
     }
-
-    /* Filter Builder Overlay */
-    .filter-builder-overlay {
-        position: fixed;
-        top: 3.5em; /* Below the header */
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 999;
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-        overflow-y: auto;
-        padding: 1em;
-    }
-
-    .filter-builder-container {
-        width: 100%;
-        max-width: 900px;
-        background: var(--bg-color);
-        border-radius: 8px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        margin-top: 2em;
-        max-height: calc(100vh - 7em);
-        overflow-y: auto;
-    }
-
-    @media (max-width: 768px) {
-        .filter-builder-overlay {
-            top: 3em;
-        }
-        
-        .filter-builder-container {
-            margin-top: 0;
-            max-height: calc(100vh - 5em);
-        }
-    }
 </style>

app/web/src/EventsView.svelte

@@ -6,10 +6,15 @@
     export let expandedEvents = new Set();
     export let isLoadingEvents = false;
     export let showOnlyMyEvents = false;
+    export let showFilterBuilder = false;
 
     import { createEventDispatcher } from "svelte";
+    import FilterBuilder from "./FilterBuilder.svelte";
     const dispatch = createEventDispatcher();
 
+    // Local state for JSON editor toggle
+    let showJsonEditor = false;
+
     function handleScroll(event) {
         dispatch("scroll", event);
     }
@@ -34,6 +39,22 @@
         dispatch("loadAllEvents", { refresh, authors });
     }
 
+    function toggleFilterBuilder() {
+        dispatch("toggleFilterBuilder");
+    }
+
+    function toggleJsonEditor() {
+        showJsonEditor = !showJsonEditor;
+    }
+
+    function handleFilterApply(event) {
+        dispatch("filterApply", event.detail);
+    }
+
+    function handleFilterClear() {
+        dispatch("filterClear");
+    }
+
     function truncatePubkey(pubkey) {
         if (!pubkey) return "";
         return pubkey.slice(0, 8) + "..." + pubkey.slice(-8);
@@ -218,7 +239,28 @@
         </div>
     {/if}
     {#if isLoggedIn && (userRole === "read" || userRole === "write" || userRole === "admin" || userRole === "owner")}
+        <div class="events-view-footer">
+            <!-- Filter Builder Slide-up Panel -->
+            <div class="filter-panel" class:open={showFilterBuilder}>
+                <FilterBuilder
+                    {showJsonEditor}
+                    on:apply={handleFilterApply}
+                    on:clear={handleFilterClear}
+                    on:toggleJson={toggleJsonEditor}
+                />
+            </div>
             <div class="events-view-header">
+                <div class="events-view-left">
+                    <button
+                        class="filter-btn"
+                        class:active={showFilterBuilder}
+                        on:click={toggleFilterBuilder}
+                        title="Filter events"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                        </svg>
+                    </button>
                     <div class="events-view-toggle">
                         <label class="toggle-container">
                             <input
@@ -230,6 +272,7 @@
                             <span class="toggle-label">Only show my events</span>
                         </label>
                     </div>
+                </div>
                 <div class="events-view-buttons">
                     <button
                         class="refresh-btn"
@@ -263,6 +306,7 @@
                     </button>
                 </div>
             </div>
+        </div>
     {/if}
 </div>
 
@@ -281,6 +325,35 @@
         padding: 0;
     }
 
+    /* Custom scrollbar styling */
+    .events-view-content::-webkit-scrollbar {
+        width: 16px;
+        background: var(--bg-color);
+    }
+
+    .events-view-content::-webkit-scrollbar-track {
+        background: var(--bg-color);
+    }
+
+    .events-view-content::-webkit-scrollbar-thumb {
+        background: var(--text-color);
+        border-radius: 9999px;
+        border: 4px solid var(--bg-color);
+    }
+
+    .events-view-content::-webkit-scrollbar-thumb:hover {
+        background: var(--text-color);
+        filter: brightness(1.2);
+    }
+
+    .events-view-content::-webkit-scrollbar-button {
+        background: var(--text-color);
+        height: 8px;
+        border: 4px solid var(--bg-color);
+        border-radius: 9999px;
+        background-clip: padding-box;
+    }
+
     .events-view-item {
         border: 0;
         margin: 0;
@@ -490,6 +563,11 @@
         color: var(--text-color);
     }
 
+    .events-view-footer {
+        position: relative;
+        flex-shrink: 0;
+    }
+
     .events-view-header {
         display: flex;
         justify-content: space-between;
@@ -603,4 +681,92 @@
         margin: 0;
         box-sizing: border-box;
     }
+
+    .events-view-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75em;
+    }
+
+    .filter-btn {
+        background: var(--primary);
+        color: var(--text-color);
+        border: none;
+        padding: 0.4em;
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.2s;
+        width: 2.2em;
+        height: 2.2em;
+        box-sizing: border-box;
+    }
+
+    .filter-btn:hover {
+        background: var(--accent-hover-color);
+    }
+
+    .filter-btn.active {
+        background: var(--accent-hover-color);
+    }
+
+    .filter-btn svg {
+        width: 1em;
+        height: 1em;
+    }
+
+    .filter-panel {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        background: var(--bg-color);
+        border-top: 1px solid var(--border-color);
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+        z-index: 100;
+        /* Account for scrollbar width in events-view-content */
+        padding-right: 16px;
+        box-sizing: border-box;
+        /* Flex column-reverse makes content anchor to top and grow downward */
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .filter-panel.open {
+        max-height: 60vh;
+        overflow-y: auto;
+    }
+
+    /* Custom scrollbar for filter panel */
+    .filter-panel::-webkit-scrollbar {
+        width: 16px;
+        background: var(--bg-color);
+    }
+
+    .filter-panel::-webkit-scrollbar-track {
+        background: var(--bg-color);
+    }
+
+    .filter-panel::-webkit-scrollbar-thumb {
+        background: var(--text-color);
+        border-radius: 9999px;
+        border: 4px solid var(--bg-color);
+    }
+
+    .filter-panel::-webkit-scrollbar-thumb:hover {
+        background: var(--text-color);
+        filter: brightness(1.2);
+    }
+
+    .filter-panel::-webkit-scrollbar-button {
+        background: var(--text-color);
+        height: 8px;
+        border: 4px solid var(--bg-color);
+        border-radius: 9999px;
+        background-clip: padding-box;
+    }
 </style>

app/web/src/FilterBuilder.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onDestroy } from "svelte";
     import { KIND_NAMES, isValidPubkey, isValidEventId, isValidTagName, formatDateTimeLocal, parseDateTimeLocal } from "./helpers.tsx";
 
     const dispatch = createEventDispatcher();
@@ -14,6 +14,11 @@
     export let untilTimestamp = null;
     export let limit = null;
 
+    // JSON editor state
+    export let showJsonEditor = false;
+    let jsonEditorValue = "";
+    let jsonError = "";
+
     // UI state
     let showKindsPicker = false;
     let kindSearchQuery = "";
@@ -25,6 +30,93 @@
     let eventIdError = "";
     let tagNameError = "";
 
+    // Debounce timer
+    let debounceTimer = null;
+    const DEBOUNCE_MS = 1000;
+    let initialized = false;
+
+    onDestroy(() => {
+        if (debounceTimer) clearTimeout(debounceTimer);
+    });
+
+    // Build filter object from current state
+    function buildFilterObject() {
+        const filter = {};
+        if (selectedKinds.length > 0) filter.kinds = selectedKinds;
+        if (pubkeys.length > 0) filter.authors = pubkeys;
+        if (eventIds.length > 0) filter.ids = eventIds;
+        if (sinceTimestamp) filter.since = sinceTimestamp;
+        if (untilTimestamp) filter.until = untilTimestamp;
+        if (limit) filter.limit = limit;
+        if (searchText) filter.search = searchText;
+        // Tags
+        tags.forEach(tag => {
+            const tagKey = `#${tag.name}`;
+            if (!filter[tagKey]) filter[tagKey] = [];
+            filter[tagKey].push(tag.value);
+        });
+        return filter;
+    }
+
+    // Update JSON editor when filter state changes
+    $: if (showJsonEditor) {
+        const filter = buildFilterObject();
+        jsonEditorValue = JSON.stringify(filter, null, 2);
+    }
+
+    // Debounced auto-apply when any filter value changes (skip initial mount)
+    $: {
+        // Track all filter values
+        const _ = [searchText, selectedKinds, pubkeys, eventIds, tags, sinceTimestamp, untilTimestamp, limit];
+        if (initialized) {
+            debouncedApply();
+        } else {
+            initialized = true;
+        }
+    }
+
+    function debouncedApply() {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            applyFilters();
+        }, DEBOUNCE_MS);
+    }
+
+    function applyJsonFilter() {
+        try {
+            const parsed = JSON.parse(jsonEditorValue);
+            jsonError = "";
+
+            // Update state from parsed JSON
+            selectedKinds = parsed.kinds || [];
+            pubkeys = parsed.authors || [];
+            eventIds = parsed.ids || [];
+            sinceTimestamp = parsed.since || null;
+            untilTimestamp = parsed.until || null;
+            limit = parsed.limit || null;
+            searchText = parsed.search || "";
+
+            // Extract tags
+            tags = [];
+            Object.keys(parsed).forEach(key => {
+                if (key.startsWith('#') && key.length === 2) {
+                    const tagName = key.slice(1);
+                    const values = Array.isArray(parsed[key]) ? parsed[key] : [parsed[key]];
+                    values.forEach(value => {
+                        tags.push({ name: tagName, value: String(value) });
+                    });
+                }
+            });
+            tags = tags; // trigger reactivity
+
+            // Apply immediately (skip debounce)
+            if (debounceTimer) clearTimeout(debounceTimer);
+            applyFilters();
+        } catch (e) {
+            jsonError = "Invalid JSON: " + e.message;
+        }
+    }
+
     // Get all available kinds as array
     $: availableKinds = Object.entries(KIND_NAMES).map(([kind, name]) => ({
         kind: parseInt(kind),
@@ -168,9 +260,11 @@
 </script>
 
 <div class="filter-builder">
-    <!-- Search text input at top -->
-    <div class="filter-section">
+    <div class="filter-content">
+        <div class="filter-grid">
+            <!-- Search text -->
             <label for="search-text">Search Text (NIP-50)</label>
+            <div class="field-content">
                 <input
                     id="search-text"
                     type="text"
@@ -181,8 +275,8 @@
             </div>
 
         <!-- Kinds picker -->
-    <div class="filter-section">
         <label>Event Kinds</label>
+        <div class="field-content">
             <button
                 class="picker-toggle-btn"
                 on:click={() => showKindsPicker = !showKindsPicker}
@@ -214,7 +308,6 @@
                 </div>
             {/if}
 
-        <!-- Selected kinds chips -->
             {#if selectedKinds.length > 0}
                 <div class="chips-container">
                     {#each selectedKinds as kind}
@@ -228,8 +321,8 @@
         </div>
 
         <!-- Authors/Pubkeys -->
-    <div class="filter-section">
         <label>Authors (Pubkeys)</label>
+        <div class="field-content">
             <div class="input-group">
                 <input
                     type="text"
@@ -257,8 +350,8 @@
         </div>
 
         <!-- Event IDs -->
-    <div class="filter-section">
         <label>Event IDs</label>
+        <div class="field-content">
             <div class="input-group">
                 <input
                     type="text"
@@ -286,8 +379,8 @@
         </div>
 
         <!-- Tags -->
-    <div class="filter-section">
-        <label>Tags (e.g., #e, #p, #a)</label>
+        <label>Tags (#e, #p, #a)</label>
+        <div class="field-content">
             <div class="tag-input-group">
                 <span class="hash-prefix">#</span>
                 <input
@@ -321,10 +414,9 @@
             {/if}
         </div>
 
-    <!-- Since/Until timestamps -->
-    <div class="filter-section timestamps-section">
-        <div class="timestamp-field">
+        <!-- Since timestamp -->
         <label for="since-timestamp">Since</label>
+        <div class="field-content timestamp-field">
             <input
                 id="since-timestamp"
                 type="datetime-local"
@@ -337,8 +429,9 @@
             {/if}
         </div>
 
-        <div class="timestamp-field">
+        <!-- Until timestamp -->
         <label for="until-timestamp">Until</label>
+        <div class="field-content timestamp-field">
             <input
                 id="until-timestamp"
                 type="datetime-local"
@@ -350,11 +443,10 @@
                 <button class="clear-timestamp-btn" on:click={() => untilTimestamp = null}>×</button>
             {/if}
         </div>
-    </div>
 
         <!-- Limit -->
-    <div class="filter-section">
-        <label for="limit">Limit (optional)</label>
+        <label for="limit">Limit</label>
+        <div class="field-content">
             <input
                 id="limit"
                 type="number"
@@ -365,10 +457,34 @@
             />
         </div>
 
-    <!-- Action buttons -->
-    <div class="filter-actions">
-        <button class="apply-btn" on:click={applyFilters}>🔍 Apply Filters</button>
-        <button class="clear-btn" on:click={clearAllFilters}>🧹 Clear All</button>
+        <!-- JSON Editor (shown when toggled) - spans both columns -->
+        {#if showJsonEditor}
+            <div class="json-editor-section">
+                <label for="json-editor">Filter JSON</label>
+                <textarea
+                    id="json-editor"
+                    class="json-editor"
+                    bind:value={jsonEditorValue}
+                    placeholder={'{"kinds": [1], "limit": 100}'}
+                    rows="8"
+                ></textarea>
+                {#if jsonError}
+                    <div class="json-error">{jsonError}</div>
+                {/if}
+                <button class="apply-json-btn" on:click={applyJsonFilter}>Apply JSON</button>
+            </div>
+        {/if}
+        </div>
+    </div>
+    <div class="clear-column">
+        <button class="clear-all-btn" on:click={clearAllFilters} title="Clear all filters">🧹</button>
+        <div class="spacer"></div>
+        <button
+            class="json-toggle-btn"
+            class:active={showJsonEditor}
+            on:click={() => dispatch("toggleJson")}
+            title="Edit filter JSON"
+        >&lt;/&gt;</button>
     </div>
 </div>
 
@@ -377,18 +493,84 @@
         padding: 1em;
         background: var(--bg-color);
         border-bottom: 1px solid var(--border-color);
+        display: flex;
+        gap: 1em;
     }
 
-    .filter-section {
-        margin-bottom: 1.25em;
+    .filter-content {
+        flex: 1;
+        min-width: 0;
     }
 
-    .filter-section label {
-        display: block;
-        margin-bottom: 0.5em;
+    .clear-column {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        flex-shrink: 0;
+        width: 2.5em;
+    }
+
+    .clear-column .spacer {
+        flex: 1;
+    }
+
+    .clear-all-btn,
+    .json-toggle-btn {
+        background: var(--secondary);
+        color: var(--text-color);
+        border: none;
+        padding: 0;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1em;
+        transition: filter 0.2s, background-color 0.2s;
+        width: 100%;
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    .clear-all-btn {
+        background: var(--danger);
+    }
+
+    .clear-all-btn:hover {
+        filter: brightness(1.2);
+    }
+
+    .json-toggle-btn {
+        font-family: monospace;
+        font-weight: 600;
+        background: var(--primary);
+    }
+
+    .json-toggle-btn:hover {
+        background: var(--accent-hover-color);
+    }
+
+    .json-toggle-btn.active {
+        background: var(--accent-hover-color);
+    }
+
+    .filter-grid {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5em 1em;
+        align-items: start;
+    }
+
+    .filter-grid > label {
         font-weight: 600;
         color: var(--text-color);
         font-size: 0.9em;
+        padding-top: 0.6em;
+        white-space: nowrap;
+    }
+
+    .field-content {
+        min-width: 0;
     }
 
     .filter-input {
@@ -491,14 +673,17 @@
         align-items: center;
         background: var(--primary);
         color: var(--text-color);
-        padding: 0.3em 0.6em;
-        border-radius: 16px;
-        font-size: 0.85em;
-        gap: 0.5em;
+        padding: 0.2em 0.5em;
+        border-radius: 0.5em;
+        font-size: 0.7em;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        gap: 0.4em;
     }
 
     .chip-text {
-        font-weight: 500;
+        line-height: 1;
     }
 
     .chip-remove {
@@ -507,7 +692,7 @@
         color: var(--text-color);
         cursor: pointer;
         padding: 0;
-        font-size: 1.2em;
+        font-size: 1em;
         line-height: 1;
         opacity: 0.8;
         transition: opacity 0.2s;
@@ -610,20 +795,18 @@
         flex: 1;
     }
 
-    .timestamps-section {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1em;
-    }
-
     .timestamp-field {
         position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
+    .timestamp-field .filter-input {
+        flex: 1;
     }
 
     .clear-timestamp-btn {
-        position: absolute;
-        right: 0.5em;
-        top: 2em;
         background: var(--danger);
         color: var(--text-color);
         border: none;
@@ -633,57 +816,80 @@
         font-size: 1em;
         line-height: 1;
         transition: background-color 0.2s;
+        flex-shrink: 0;
     }
 
     .clear-timestamp-btn:hover {
         filter: brightness(0.9);
     }
 
-    .filter-actions {
-        display: flex;
-        gap: 1em;
+    .json-editor-section {
+        grid-column: 1 / -1;
+        margin-top: 0.5em;
         padding-top: 1em;
         border-top: 1px solid var(--border-color);
     }
 
-    .apply-btn,
-    .clear-btn {
-        flex: 1;
-        padding: 0.75em 1em;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1em;
+    .json-editor-section label {
+        display: block;
         font-weight: 600;
-        transition: all 0.2s;
+        color: var(--text-color);
+        font-size: 0.9em;
+        margin-bottom: 0.5em;
     }
 
-    .apply-btn {
-        background: var(--primary);
-        color: var(--text-color);
+    .json-editor {
+        width: 100%;
+        padding: 0.6em;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        background: var(--input-bg);
+        color: var(--input-text-color);
+        font-family: monospace;
+        font-size: 0.85em;
+        resize: vertical;
+        box-sizing: border-box;
     }
 
-    .apply-btn:hover {
-        background: var(--accent-hover-color);
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+    .json-editor:focus {
+        outline: none;
+        border-color: var(--primary);
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
     }
 
-    .clear-btn {
-        background: var(--secondary);
+    .json-error {
+        color: var(--danger);
+        font-size: 0.85em;
+        margin-top: 0.25em;
+    }
+
+    .apply-json-btn {
+        margin-top: 0.5em;
+        background: var(--primary);
         color: var(--text-color);
+        border: none;
+        padding: 0.5em 1em;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.9em;
+        font-weight: 600;
+        transition: background-color 0.2s;
     }
 
-    .clear-btn:hover {
-        background: var(--danger);
-        transform: translateY(-1px);
+    .apply-json-btn:hover {
+        background: var(--accent-hover-color);
     }
 
     /* Responsive design */
     @media (max-width: 768px) {
-        .timestamps-section {
+        .filter-grid {
             grid-template-columns: 1fr;
         }
+
+        .filter-grid > label {
+            padding-top: 0;
+            padding-bottom: 0.25em;
+        }
     }
 </style>
 

app/web/src/Header.svelte

@@ -1,7 +1,5 @@
 <script>
     export let isDarkTheme = false;
-    export let isSearchMode = false;
-    export let searchQuery = "";
     export let isLoggedIn = false;
     export let userRole = "";
     export let currentEffectiveRole = "";
@@ -12,14 +10,6 @@
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
 
-    function handleSearchKeydown(event) {
-        dispatch("searchKeydown", event);
-    }
-
-    function toggleSearchMode() {
-        dispatch("toggleSearchMode");
-    }
-
     function toggleTheme() {
         dispatch("toggleTheme");
     }
@@ -36,17 +26,6 @@
 <header class="main-header" class:dark-theme={isDarkTheme}>
     <div class="header-content">
         <img src="/orly.png" alt="ORLY Logo" class="logo" />
-        {#if isSearchMode}
-            <div class="search-input-container">
-                <input
-                    type="text"
-                    class="search-input"
-                    bind:value={searchQuery}
-                    on:keydown={handleSearchKeydown}
-                    placeholder="Search..."
-                />
-            </div>
-        {:else}
         <div class="header-title">
             <span class="app-title">
                 ORLY? dashboard
@@ -57,9 +36,7 @@
                 {/if}
             </span>
         </div>
-        {/if}
         <div class="header-buttons">
-            <button class="search-btn" on:click={toggleSearchMode}> 🔍 </button>
             <button class="theme-toggle-btn" on:click={toggleTheme}>
                 {isDarkTheme ? "☀️" : "🌙"}
             </button>
@@ -142,27 +119,6 @@
         letter-spacing: 0.5px;
     }
 
-    .search-input-container {
-        flex: 1;
-        max-width: 400px;
-    }
-
-    .search-input {
-        width: 100%;
-        padding: 0.5em 1em;
-        border: 1px solid var(--border-color);
-        border-radius: 1.5em;
-        background: var(--input-bg);
-        color: var(--input-text-color);
-        font-size: 0.9em;
-    }
-
-    .search-input:focus {
-        outline: none;
-        border-color: var(--primary);
-        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-    }
-
     .header-buttons {
         display: flex;
         align-items: center;
@@ -170,7 +126,6 @@
         margin-left: auto;
     }
 
-    .search-btn,
     .theme-toggle-btn,
     .login-btn,
     .user-profile-btn {
@@ -189,7 +144,6 @@
         justify-content: center;
     }
 
-    .search-btn:hover,
     .theme-toggle-btn:hover,
     .login-btn:hover,
     .user-profile-btn:hover {

pkg/version/version

@@ -1 +1 @@
-v0.34.4
+v0.34.5