refactor: simplify search operators and update localization keys in SearchBar component

apps/web/components/SearchBar.tsx

@@ -11,61 +11,31 @@ type Props = {
 };
 
 const ADVANCED_SEARCH_OPERATORS = [
-  {
-    operator: "name:",
-    labelKey: "search_operator_name",
-    icon: "bi-type",
-  },
   {
     operator: "url:",
-    labelKey: "search_operator_url",
+    labelKey: "url",
     icon: "bi-link-45deg",
   },
   {
     operator: "tag:",
-    labelKey: "search_operator_tag",
+    labelKey: "tag",
     icon: "bi-tag",
   },
-  {
-    operator: "collection:",
-    labelKey: "search_operator_collection",
-    icon: "bi-folder2",
-  },
   {
     operator: "before:",
-    labelKey: "search_operator_before",
+    labelKey: "before",
     icon: "bi-calendar-minus",
   },
   {
     operator: "after:",
-    labelKey: "search_operator_after",
+    labelKey: "after",
     icon: "bi-calendar-plus",
   },
-  {
-    operator: "public:true",
-    labelKey: "search_operator_public",
-    icon: "bi-globe2",
-  },
-  {
-    operator: "description:",
-    labelKey: "search_operator_description",
-    icon: "bi-card-text",
-  },
-  {
-    operator: "type:",
-    labelKey: "search_operator_type",
-    icon: "bi-file-earmark",
-  },
   {
     operator: "pinned:true",
-    labelKey: "search_operator_pinned",
+    labelKey: "pinned",
     icon: "bi-pin-angle",
   },
-  {
-    operator: "!",
-    labelKey: "search_operator_exclude",
-    icon: "bi-slash-circle",
-  },
 ] as const;
 
 export default function SearchBar({ placeholder }: Props) {
@@ -118,6 +88,7 @@ export default function SearchBar({ placeholder }: Props) {
           e.target.value.includes("%") &&
             toast.error(t("search_query_invalid_symbol"));
           setSearchQuery(e.target.value.replace("%", ""));
+          setShowSuggestions(false);
         }}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
@@ -150,7 +121,7 @@ export default function SearchBar({ placeholder }: Props) {
           >
             <div className="flex items-center justify-between">
               <p className="text-xs font-bold text-neutral">
-                {t("search_operators")}
+                {t("suggested_search_operators")}
               </p>
             </div>
             <div className="flex flex-col gap-1">
@@ -178,7 +149,7 @@ export default function SearchBar({ placeholder }: Props) {
                 <Link
                   href="https://docs.linkwarden.app/Usage/advanced-search"
                   target="_blank"
-                  className="flex items-center gap-1"
+                  className="flex items-center gap-1 w-full"
                 >
                   {t("learn_more")}
                   <i className="bi-box-arrow-up-right text-xs" />

apps/web/public/locales/en/common.json

@@ -463,18 +463,10 @@
   "collection_publicly_shared": "This collection is being shared publicly.",
   "search_for_links": "Search for Links",
   "search_query_invalid_symbol": "The search query should not contain '%'.",
-  "search_operators": "Search Operators",
-  "search_operator_name": "Title",
-  "search_operator_url": "URL",
-  "search_operator_tag": "Tag",
-  "search_operator_collection": "Collection",
-  "search_operator_before": "Before",
-  "search_operator_after": "After",
-  "search_operator_public": "Public",
-  "search_operator_description": "Description",
-  "search_operator_type": "Type",
-  "search_operator_pinned": "Pinned",
-  "search_operator_exclude": "Exclude",
+  "suggested_search_operators": "Suggested Search Operators",
+  "url": "URL",
+  "before": "Before",
+  "after": "After",
   "open_modal_new_tab": "Open this modal in a new tab",
   "file": "File",
   "tag_preservation_rule_label": "Preservation rules by tag (override global settings):",