From f9abb34e5a1789532ae9a85bcdda103600e27dda Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 21 Jan 2026 14:34:05 +0100
Subject: [PATCH] Add better active filter state with clear filter action
 (#1473)

---
 .../popup/pages/items/ItemsList.tsx           |  95 +++++++++--
 .../src/i18n/locales/en.json                  |   4 +
 apps/mobile-app/app/(tabs)/items/index.tsx    | 150 ++++++++++++++++--
 apps/mobile-app/i18n/locales/en.json          |   4 +
 .../Main/Pages/Items/Home.razor               |  39 +++++
 .../Resources/Pages/Main/Items/Home.en.resx   |  10 ++
 6 files changed, 277 insertions(+), 25 deletions(-)

diff --git a/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx b/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx
index 90f29e463..89f51ec04 100644
--- a/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx
@@ -685,19 +685,59 @@ const ItemsList: React.FC = () => {
           )}
         </>
       ) : filteredItems.length === 0 && folders.length === 0 ? (
-        <div className="text-gray-500 dark:text-gray-400 space-y-2 mb-10">
+        <div className="text-gray-500 dark:text-gray-400 space-y-3 mb-10">
           {/* Show filter/search-specific messages only when actively filtering or searching */}
           {(filterType !== 'all' || searchTerm) && (
-            <p>
-              {filterType === 'passkeys'
-                ? t('items.noPasskeysFound')
-                : filterType === 'attachments'
-                  ? t('items.noAttachmentsFound')
-                  : isItemTypeFilter(filterType)
-                    ? t('items.noItemsOfTypeFound', { type: getFilterTitle() })
-                    : t('items.noMatchingItems')
-              }
-            </p>
+            <>
+              <p>
+                {/* Different messages based on what's causing no results */}
+                {searchTerm && filterType !== 'all'
+                  // Both search and filter active
+                  ? t('items.noMatchingItemsWithFilter', { filter: getFilterTitle(), search: searchTerm })
+                  : searchTerm
+                    // Only search active
+                    ? t('items.noMatchingItemsSearch', { search: searchTerm })
+                    // Only filter active (no search)
+                    : filterType === 'passkeys'
+                      ? t('items.noPasskeysFound')
+                      : filterType === 'attachments'
+                        ? t('items.noAttachmentsFound')
+                        : isItemTypeFilter(filterType)
+                          ? t('items.noItemsOfTypeFound', { type: getFilterTitle() })
+                          : t('items.noMatchingItems')
+                }
+              </p>
+              {/* Clear filter/search buttons */}
+              <div className="flex flex-wrap gap-2">
+                {searchTerm && (
+                  <button
+                    onClick={() => setSearchTerm('')}
+                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+                  >
+                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                    {t('items.clearSearch')}
+                  </button>
+                )}
+                {filterType !== 'all' && (
+                  <button
+                    onClick={() => {
+                      setFilterType('all');
+                      localStorage.removeItem(FILTER_STORAGE_KEY);
+                    }}
+                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 hover:bg-orange-200 dark:hover:bg-orange-900/50 text-orange-700 dark:text-orange-300 rounded-lg transition-colors"
+                  >
+                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                    {t('items.clearFilter')}
+                  </button>
+                )}
+              </div>
+            </>
           )}
           {/* Show help text when inside an empty folder */}
           {currentFolderId && (
@@ -757,6 +797,39 @@ const ItemsList: React.FC = () => {
             </ul>
           )}
 
+          {/* Clear filter/search pills at bottom of list when filtering or searching */}
+          {(filterType !== 'all' || searchTerm) && (
+            <div className="flex flex-wrap justify-center gap-2 mt-4 pt-4">
+              {searchTerm && (
+                <button
+                  onClick={() => setSearchTerm('')}
+                  className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors"
+                >
+                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                  {t('items.clearSearch')}
+                </button>
+              )}
+              {filterType !== 'all' && (
+                <button
+                  onClick={() => {
+                    setFilterType('all');
+                    localStorage.removeItem(FILTER_STORAGE_KEY);
+                  }}
+                  className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 hover:bg-orange-200 dark:hover:bg-orange-900/50 text-orange-700 dark:text-orange-300 rounded-lg transition-colors"
+                >
+                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                  {t('items.clearFilter')}
+                </button>
+              )}
+            </div>
+          )}
+
           {/* Recently Deleted link (only show at root level when not searching and not filtering) */}
           {!currentFolderId && !searchTerm && filterType === 'all' && (
             <button
diff --git a/apps/browser-extension/src/i18n/locales/en.json b/apps/browser-extension/src/i18n/locales/en.json
index e2b847f4e..b3a84ebd8 100644
--- a/apps/browser-extension/src/i18n/locales/en.json
+++ b/apps/browser-extension/src/i18n/locales/en.json
@@ -189,6 +189,10 @@
     "noAttachmentsFound": "No items with attachments found",
     "noItemsOfTypeFound": "No {{type}} items found",
     "noMatchingItems": "No matching items found",
+    "noMatchingItemsSearch": "No items matching \"{{search}}\"",
+    "noMatchingItemsWithFilter": "No {{filter}} items matching \"{{search}}\"",
+    "clearSearch": "Clear search",
+    "clearFilter": "Clear filter",
     "emptyFolderHint": "This folder is empty. To move items to this folder, edit the item and tap the folder icon in the name field.",
     "deleteFolder": "Delete Folder",
     "deleteFolderKeepItems": "Delete folder only",
diff --git a/apps/mobile-app/app/(tabs)/items/index.tsx b/apps/mobile-app/app/(tabs)/items/index.tsx
index dbcd68044..927498698 100644
--- a/apps/mobile-app/app/(tabs)/items/index.tsx
+++ b/apps/mobile-app/app/(tabs)/items/index.tsx
@@ -540,13 +540,59 @@ export default function ItemsScreen(): React.ReactNode {
       fontSize: 20,
     },
     // Empty state styles
+    emptyContainer: {
+      alignItems: 'center',
+      marginTop: 24,
+    },
     emptyText: {
       color: colors.textMuted,
       fontSize: 16,
-      marginTop: 24,
       opacity: 0.7,
       textAlign: 'center',
     },
+    clearButtonsContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      justifyContent: 'center',
+      marginTop: 16,
+    },
+    clearSearchButton: {
+      alignItems: 'center',
+      backgroundColor: colors.accentBackground,
+      borderRadius: 8,
+      flexDirection: 'row',
+      gap: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    },
+    clearSearchButtonText: {
+      color: colors.text,
+      fontSize: 14,
+    },
+    clearFilterButton: {
+      alignItems: 'center',
+      backgroundColor: colors.primary + '20',
+      borderRadius: 8,
+      flexDirection: 'row',
+      gap: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    },
+    clearFilterButtonText: {
+      color: colors.primary,
+      fontSize: 14,
+    },
+    // Footer clear buttons styles (at bottom of list)
+    footerClearContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      justifyContent: 'center',
+      marginTop: 16,
+      paddingTop: 16,
+    },
     // FAB styles
     fab: {
       alignItems: 'center',
@@ -805,20 +851,95 @@ export default function ItemsScreen(): React.ReactNode {
       return null;
     }
 
+    /**
+     * Determine the appropriate message based on search and filter state.
+     */
+    const getMessage = (): string => {
+      // Both search and filter active
+      if (searchQuery && filterType !== 'all') {
+        return t('items.noMatchingItemsWithFilter', { filter: getFilterTitle(), search: searchQuery });
+      }
+      // Only search active
+      if (searchQuery) {
+        return t('items.noMatchingItemsSearch', { search: searchQuery });
+      }
+      // Only filter active (no search)
+      if (filterType === 'passkeys') {
+        return t('items.noPasskeysFound');
+      }
+      if (filterType === 'attachments') {
+        return t('items.noAttachmentsFound');
+      }
+      if (isItemTypeFilter(filterType)) {
+        return t('items.noItemsOfTypeFound', { type: getFilterTitle() });
+      }
+      // No search, no filter - truly empty vault
+      return t('items.noItemsFound');
+    };
+
+    const showClearButtons = searchQuery || filterType !== 'all';
+
     return (
-      <View>
-        <Text style={styles.emptyText}>
-          {searchQuery
-            ? t('items.noMatchingItems')
-            : filterType === 'passkeys'
-              ? t('items.noPasskeysFound')
-              : filterType === 'attachments'
-                ? t('items.noAttachmentsFound')
-                : isItemTypeFilter(filterType)
-                  ? t('items.noItemsOfTypeFound', { type: getFilterTitle() })
-                  : t('items.noItemsFound')
-          }
-        </Text>
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyText}>{getMessage()}</Text>
+
+        {/* Clear search/filter buttons */}
+        {showClearButtons && (
+          <View style={styles.clearButtonsContainer}>
+            {searchQuery && (
+              <TouchableOpacity
+                style={styles.clearSearchButton}
+                onPress={() => setSearchQuery('')}
+              >
+                <MaterialIcons name="close" size={16} color={colors.text} />
+                <Text style={styles.clearSearchButtonText}>{t('items.clearSearch')}</Text>
+              </TouchableOpacity>
+            )}
+            {filterType !== 'all' && (
+              <TouchableOpacity
+                style={styles.clearFilterButton}
+                onPress={() => setFilterType('all')}
+              >
+                <MaterialIcons name="close" size={16} color={colors.primary} />
+                <Text style={styles.clearFilterButtonText}>{t('items.clearFilter')}</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  /**
+   * Render list footer with clear filter/search buttons.
+   * Only shown when there are items and a filter or search is active.
+   */
+  const renderListFooter = (): React.ReactNode => {
+    // Don't show footer if loading, no items, or no active filter/search
+    if (isLoadingItems || filteredItems.length === 0 || (filterType === 'all' && !searchQuery)) {
+      return null;
+    }
+
+    return (
+      <View style={styles.footerClearContainer}>
+        {searchQuery && (
+          <TouchableOpacity
+            style={styles.clearSearchButton}
+            onPress={() => setSearchQuery('')}
+          >
+            <MaterialIcons name="close" size={16} color={colors.text} />
+            <Text style={styles.clearSearchButtonText}>{t('items.clearSearch')}</Text>
+          </TouchableOpacity>
+        )}
+        {filterType !== 'all' && (
+          <TouchableOpacity
+            style={styles.clearFilterButton}
+            onPress={() => setFilterType('all')}
+          >
+            <MaterialIcons name="close" size={16} color={colors.primary} />
+            <Text style={styles.clearFilterButtonText}>{t('items.clearFilter')}</Text>
+          </TouchableOpacity>
+        )}
       </View>
     );
   };
@@ -872,6 +993,7 @@ export default function ItemsScreen(): React.ReactNode {
             )
           }
           ListEmptyComponent={renderEmptyComponent() as React.ReactElement}
+          ListFooterComponent={renderListFooter() as React.ReactElement}
         />
       </ThemedView>
 
diff --git a/apps/mobile-app/i18n/locales/en.json b/apps/mobile-app/i18n/locales/en.json
index dbb05d7b2..06f8c8c2e 100644
--- a/apps/mobile-app/i18n/locales/en.json
+++ b/apps/mobile-app/i18n/locales/en.json
@@ -520,10 +520,14 @@
     "publicEmailDescription": "Anonymous but limited privacy. Email content is readable by anyone that knows the address.",
     "searchPlaceholder": "Search vault...",
     "noMatchingItems": "No matching items found",
+    "noMatchingItemsSearch": "No items matching \"{{search}}\"",
+    "noMatchingItemsWithFilter": "No {{filter}} items matching \"{{search}}\"",
     "noItemsFound": "No items found. Create one to get started. Tip: you can also login to the AliasVault web app to import credentials from other password managers.",
     "noPasskeysFound": "No passkeys have been created yet. Passkeys are created by visiting a website that offers passkeys as an authentication method.",
     "noAttachmentsFound": "No items with attachments found",
     "noItemsOfTypeFound": "No {{type}} items found",
+    "clearSearch": "Clear search",
+    "clearFilter": "Clear filter",
     "recentEmails": "Recent emails",
     "loadingEmails": "Loading emails...",
     "noEmailsYet": "No emails received yet.",
diff --git a/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor b/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
index 4356ce622..8db3a31ed 100644
--- a/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
+++ b/apps/server/AliasVault.Client/Main/Pages/Items/Home.razor
@@ -152,6 +152,20 @@ else
     @if (DbService.Settings.CredentialsViewMode == "table")
     {
         <div class="px-4 min-h-[250px]">
+            @* Active filter indicator - show persistently when a filter is active *@
+            @if (FilterType != ItemFilterType.All)
+            {
+                <div class="flex flex-wrap items-center gap-2 mb-4">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">@Localizer["FilteringBy"]</span>
+                    <button @onclick="ClearFilter" class="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 hover:bg-orange-200 dark:hover:bg-orange-900/50 text-orange-700 dark:text-orange-300 rounded-lg transition-colors">
+                        <span>@GetFilterTitle()</span>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                    </button>
+                </div>
+            }
             <ItemsTable Credentials="@FilteredAndSortedItems.ToList()" SortOrder="@SortOrder" />
             @* Infinite scroll sentinel for table view *@
             @if (HasMoreItems)
@@ -174,6 +188,21 @@ else
     else
     {
         <div class="px-4 mb-4 min-h-[250px]">
+            @* Active filter indicator - show persistently when a filter is active *@
+            @if (FilterType != ItemFilterType.All)
+            {
+                <div class="flex flex-wrap items-center gap-2 mb-4">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">@Localizer["FilteringBy"]</span>
+                    <button @onclick="ClearFilter" class="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-orange-100 dark:bg-orange-900/30 hover:bg-orange-200 dark:hover:bg-orange-900/50 text-orange-700 dark:text-orange-300 rounded-lg transition-colors">
+                        <span>@GetFilterTitle()</span>
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                    </button>
+                </div>
+            }
+
             @* Folders section - only show at root level *@
             @if (!IsInFolder && !IsSearching)
             {
@@ -544,6 +573,16 @@ else
         StateHasChanged();
     }
 
+    /// <summary>
+    /// Clears the active filter and resets to showing all items.
+    /// </summary>
+    private void ClearFilter()
+    {
+        FilterType = ItemFilterType.All;
+        VisibleItemCount = BatchSize; // Reset visible items when filter changes
+        StateHasChanged();
+    }
+
     /// <summary>
     /// Loads more items for infinite scroll. Called from JavaScript via IntersectionObserver.
     /// </summary>
diff --git a/apps/server/AliasVault.Client/Resources/Pages/Main/Items/Home.en.resx b/apps/server/AliasVault.Client/Resources/Pages/Main/Items/Home.en.resx
index cb9c02a7e..d863765cb 100644
--- a/apps/server/AliasVault.Client/Resources/Pages/Main/Items/Home.en.resx
+++ b/apps/server/AliasVault.Client/Resources/Pages/Main/Items/Home.en.resx
@@ -236,4 +236,14 @@
     <value>Loading more...</value>
     <comment>Text shown when loading more items during infinite scroll</comment>
   </data>
+
+  <!-- Clear Filter -->
+  <data name="ClearFilter" xml:space="preserve">
+    <value>Clear filter</value>
+    <comment>Button text for clearing the active filter</comment>
+  </data>
+  <data name="FilteringBy" xml:space="preserve">
+    <value>Filtering by:</value>
+    <comment>Label shown when a filter is active</comment>
+  </data>
 </root>
\ No newline at end of file