[client] Improve postgres FTS filter menu and guide

locales/en-US.yml

@@ -1494,14 +1494,17 @@ _filters:
     word: "word"
     phrase: "literal phrase that contains (arbitrary) characters"
     attachmentType: "Filter by attachment type(s)"
+    matchOptions: "Change case sensitivity and/or enable whole word matching"
     info: "Nomenclature"
-    info1: "Text in brackets signifies available optional filter parameters. Filter aliases or parameter options are signified by a pipe character."
+    info1: "Text in brackets signifies available optional filter parameters. Parameter options are signified by a pipe character."
     info2: "A dash enclosed in brackets denotes the ability to invert/negate a filter with the dash character."
+    infoEnd: "Filter aliases"
+    infoEnd1: "For convenience and typo-prevention, some filters have aliases, which are listed below."
   fromUser: "From user"
   replyTo: "Replying to"
   mentioning: "Mentioning"
-  withFile: "With file"
-  fromDomain: "From domain"
+  withFile: "Has attachment"
+  fromDomain: "Specific instance only"
   notesBefore: "Posts before"
   notesAfter: "Posts after"
   followingOnly: "Following only"
@@ -1509,6 +1512,8 @@ _filters:
   repliesOnly: "Replies only"
   excludeReplies: "Exclude replies"
   excludeRenotes: "Exclude boosts"
+  caseSensitive: "Case sensitive"
+  matchWords: "Match whole words"
 _tutorial:
   title: "How to use Iceshrimp"
   step1_1: "Welcome!"

packages/backend/src/server/api/common/generate-fts-query.ts

@@ -26,7 +26,6 @@ const filters = {
 } as Record<string, (query: SelectQueryBuilder<any>, search: string, id: number) => any>
 
 //TODO: editing the query should be possible, clicking search again resets it (it should be a twitter-like top of the page kind of deal)
-//TODO: UI and guide are missing for search|match: and case: filters
 
 export function generateFtsQuery(query: SelectQueryBuilder<any>, q: string): void {
     const components = q.trim().split(" ");

packages/client/src/components/MkDialog.vue

@@ -391,13 +391,29 @@ async function openSearchFilters(ev) {
 					});
 				},
 			},
+			null,
+			{
+				icon: "ph-eye ph-bold ph-lg",
+				text: i18n.ts._filters.followingOnly,
+				action: () => {
+					appendSearchFilter("filter:following");
+				},
+			},
+			{
+				icon: "ph-users-three ph-bold ph-lg",
+				text: i18n.ts._filters.followersOnly,
+				action: () => {
+					appendSearchFilter("filter:followers");
+				},
+			},
 			{
 				icon: "ph-link ph-bold ph-lg",
 				text: i18n.ts._filters.fromDomain,
 				action: () => {
-					appendSearchFilter("domain:", false);
+					appendSearchFilter("instance:", false);
 				},
 			},
+			null,
 			{
 				type: "parent",
 				text: i18n.ts._filters.withFile,
@@ -459,28 +475,6 @@ async function openSearchFilters(ev) {
 				},
 			},
 			null,
-			{
-				icon: "ph-eye ph-bold ph-lg",
-				text: i18n.ts._filters.followingOnly,
-				action: () => {
-					appendSearchFilter("filter:following");
-				},
-			},
-			{
-				icon: "ph-users-three ph-bold ph-lg",
-				text: i18n.ts._filters.followersOnly,
-				action: () => {
-					appendSearchFilter("filter:followers");
-				},
-			},
-			{
-				icon: "ph-arrow-u-up-left ph-bold ph-lg",
-				text: i18n.ts._filters.repliesOnly,
-				action: () => {
-					appendSearchFilter("filter:replies");
-				},
-			},
-			null,
 			{
 				icon: "ph-arrow-u-up-left ph-bold ph-lg",
 				text: i18n.ts._filters.excludeReplies,
@@ -496,6 +490,21 @@ async function openSearchFilters(ev) {
 				},
 			},
 			null,
+			{
+				icon: "ph-text-aa ph-bold ph-lg",
+				text: i18n.ts._filters.caseSensitive,
+				action: () => {
+					appendSearchFilter("case:sensitive");
+				},
+			},
+			{
+				icon: "ph-brackets-angle ph-bold ph-lg",
+				text: i18n.ts._filters.matchWords,
+				action: () => {
+					appendSearchFilter("match:words");
+				},
+			},
+			null,
 			{
 				icon: "ph-question ph-bold ph-lg",
 				text: i18n.ts._filters._dialog.learnMore,

packages/client/src/pages/search-filters.vue

@@ -18,19 +18,27 @@
 						<p><code>(one OR of OR multiple OR words)</code></p>
 					</div>
 				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._filters._dialog.matchOptions }}</div>
+					<div class="content">
+						<p><code>case:sensitive</code></p>
+						<p><code>match:word[s]</code></p>
+					</div>
+				</div>
 				<div class="section _block">
 					<div class="title">{{ i18n.ts._filters._dialog.userDomain }}</div>
 					<div class="content">
 						<p><code>[-]from:[@]user[@host.tld]</code></p>
 						<p><code>[-]mention:[@]user[@host.tld]</code></p>
-						<p><code>[-]reply|to:[@]user[@host.tld]</code></p>
-						<p><code>[-]domain|host:host.tld</code></p>
+						<p><code>[-]reply:[@]user[@host.tld]</code></p>
+						<p><code>[-]instance:domain.tld</code></p>
 					</div>
 				</div>
 				<div class="section _block">
 					<div class="title">{{ i18n.ts._filters._dialog.miscFilters }}</div>
 					<div class="content">
-						<p><code>[-]filter:followers|following|replies|reply|renote[s]|boost[s]</code></p>
+						<p><code>[-]filter:followers|following</code></p>
+						<p><code>[-]filter:replies|renote[s]|boost[s]</code></p>
 					</div>
 				</div>
 				<div class="section _block">
@@ -43,8 +51,21 @@
 					<div class="title">{{ i18n.ts._filters._dialog.postDate }}</div>
 					<div class="content">
 						<p>{{ i18n.ts._filters._dialog.exclusivity }}</p>
-						<p><code>before|until:yyyy-mm-dd</code></p>
-						<p><code>after|since:yyyy-mm-dd</code></p>
+						<p><code>before:yyyy-mm-dd</code></p>
+						<p><code>after:yyyy-mm-dd</code></p>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._filters._dialog.infoEnd }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._filters._dialog.infoEnd1 }}</p>
+						<p><code>filter:reply = filter:replies</code></p>
+						<p><code>search:word[s] = match:word[s]</code></p>
+						<p><code>domain: = host: = instance:</code></p>
+						<p><code>until: = before:</code></p>
+						<p><code>since: = after:</code></p>
+						<p><code>host: = domain:</code></p>
+						<p><code>to: = reply:</code></p>
 					</div>
 				</div>
 			</div>