From 5b686d161ae4cae4b44651ef1727b3b8a7090f4e Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Thu, 8 Jun 2023 13:01:51 -0400
Subject: [PATCH 1/7] Add dropdown for advanced search

---
 packages/client/src/components/MkButton.vue   |  12 +-
 packages/client/src/components/MkDialog.vue   | 120 +++++++++++++++++-
 packages/client/src/components/MkMenu.vue     |   7 +-
 packages/client/src/components/MkModal.vue    |  15 ++-
 .../client/src/components/MkPopupMenu.vue     |   2 +
 packages/client/src/components/form/input.vue |   9 ++
 packages/client/src/os.ts                     |   5 +-
 packages/client/src/scripts/search.ts         |   2 +-
 packages/client/src/style.scss                |  11 ++
 9 files changed, 171 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 682072f4cb..aa0adb54bd 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -2,7 +2,7 @@
 	<button
 		v-if="!link"
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini, chip }"
 		:type="type"
 		@click="emit('click', $event)"
 		@mousedown="onMousedown"
@@ -41,7 +41,8 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
-	mini: boolean;
+	mini?: boolean;
+	chip?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -198,6 +199,13 @@ function onMousedown(evt: MouseEvent): void {
 		border-radius: 100px;
 	}
 
+	&.chip {
+		padding: 4px 12px;
+		font-size: max(12px, 0.9em);
+		min-width: unset;
+		border-radius: 100px;
+	}
+
 	&:disabled {
 		opacity: 0.7;
 	}
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 557442b5b5..c3d0ccb3b7 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -2,7 +2,6 @@
 	<MkModal
 		ref="modal"
 		:prefer-type="'dialog'"
-		:z-priority="'high'"
 		@click="done(true)"
 		@closed="emit('closed')"
 	>
@@ -56,6 +55,7 @@
 			</header>
 			<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
 			<MkInput
+				ref="inputEl"
 				v-if="input && input.type !== 'paragraph'"
 				v-model="inputValue"
 				autofocus
@@ -66,6 +66,15 @@
 				<template v-if="input.type === 'password'" #prefix
 					><i class="ph-password ph-bold ph-lg"></i
 				></template>
+				<template v-if="input.type === 'search'" #suffix>
+					<button
+						class="_buttonIcon"
+						@click.stop="openSearchFilters"
+						v-tooltip.noDelay="i18n.ts.filter"
+					>
+						<i class="ph-funnel ph-bold"></i>
+					</button>
+				</template>
 			</MkInput>
 			<MkTextarea
 				v-if="input && input.type === 'paragraph'"
@@ -95,6 +104,7 @@
 					</optgroup>
 				</template>
 			</MkSelect>
+
 			<div
 				v-if="(showOkButton || showCancelButton) && !actions"
 				:class="$style.buttons"
@@ -156,13 +166,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkSelect from "@/components/form/select.vue";
+import * as os from "@/os";
 import { i18n } from "@/i18n";
+import * as Acct from "calckey-js/built/acct";
 
 type Input = {
 	type: HTMLInputElement["type"];
@@ -193,7 +205,8 @@ const props = withDefaults(
 			| "warning"
 			| "info"
 			| "question"
-			| "waiting";
+			| "waiting"
+			| "search";
 		title: string;
 		text?: string;
 		input?: Input;
@@ -229,9 +242,11 @@ const emit = defineEmits<{
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
-const inputValue = ref(props.input?.default || null);
+const inputValue = ref(props.input?.default || "");
 const selectedValue = ref(props.select?.default || null);
 
+const inputEl = ref<typeof MkInput>();
+
 function done(canceled: boolean, result?) {
 	emit("done", { canceled, result });
 	modal.value?.close();
@@ -268,6 +283,99 @@ function onInputKeydown(evt: KeyboardEvent) {
 	}
 }
 
+async function openSearchFilters(ev) {
+	await os.popupMenu([
+		{
+			icon: "ph-user ph-bold ph-lg",
+			text: "From user",
+			action: () => {
+				os.selectUser().then((user) => {
+					inputValue.value += " from:@" + Acct.toString(user);
+				});
+			}
+		},
+		{
+			icon: "ph-file ph-bold ph-lg",
+			text: "With file",
+			action: () => {
+				os.select({
+					title: "Has file",
+					items: [
+						{
+							text: "Image",
+							value: "image",
+						},
+						{
+							text: "Video",
+							value: "video",
+						},
+						{
+							text: "Audio",
+							value: "audio",
+						},
+						{
+							text: "File",
+							value: "file",
+						}
+					]
+				}).then((res) => {
+					if (res.canceled) return;
+					inputValue.value += " has:" + res.result;
+				});
+			}
+		},
+		{
+			icon: "ph-link ph-bold ph-lg",
+			text: "From domain",
+			action: () => {
+				inputValue.value += " domain:";
+			}
+		},
+		{
+			icon: "ph-calendar-blank ph-bold ph-lg",
+			text: "Posts before",
+			action: () => {
+				os.inputDate({
+					title: "Posts before"
+				}).then((res) => {
+					inputEl.value.focus();
+					if (res.canceled) return;
+					inputValue.value += " before:" + res.result;
+				});
+			}
+		},
+		{
+			icon: "ph-calendar-blank ph-bold ph-lg",
+			text: "Posts after",
+			action: () => {
+				os.inputDate({
+					title: "Posts after"
+				}).then((res) => {
+					inputEl.value.focus();
+					if (res.canceled) return;
+					inputValue.value += " after:" + res.result;
+				});
+			}
+		},
+		{
+			icon: "ph-eye ph-bold ph-lg",
+			text: "Following only",
+			action: () => {
+				inputValue.value += " filter:following ";
+			}
+		},
+		{
+			icon: "ph-users-three ph-bold ph-lg",
+			text: "Followers only",
+			action: () => {
+				inputValue.value += " filter:followers ";
+			}
+		},
+	], ev.target, { noReturnFocus: true });
+	inputEl.value.focus();
+	inputEl.value.selectRange(inputValue.value.length, inputValue.value.length); // cursor at end
+}
+
 onMounted(() => {
 	document.addEventListener("keydown", onKeydown);
 });
@@ -333,6 +441,10 @@ onBeforeUnmount(() => {
 	margin: 16px 0 0 0;
 }
 
+:deep(input[type="search"]) {
+	width: 300px;
+}
+
 .buttons {
 	margin-top: 16px;
 	display: flex;
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 5f243a3638..60d598e11f 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,5 +1,9 @@
 <template>
-	<FocusTrap :active="false" ref="focusTrap">
+	<FocusTrap 
+		:active="false"
+		ref="focusTrap"
+		:return-focus-on-deactivate="!noReturnFocus"
+	>
 		<div tabindex="-1">
 			<div
 				ref="itemsEl"
@@ -205,6 +209,7 @@ const props = defineProps<{
 	align?: "center" | string;
 	width?: number;
 	maxHeight?: number;
+	noReturnFocus?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index fa80c35b87..6176298fa3 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -18,7 +18,10 @@
 		@enter="emit('opening')"
 		@after-enter="onOpened"
 	>
-		<FocusTrap v-model:active="isActive">
+		<FocusTrap 
+			v-model:active="isActive"
+			:return-focus-on-deactivate="!noReturnFocus"
+		>
 			<div
 				v-show="manualShowing != null ? manualShowing : showing"
 				v-hotkey.global="keymap"
@@ -102,6 +105,7 @@ const props = withDefaults(
 		zPriority?: "low" | "middle" | "high";
 		noOverlap?: boolean;
 		transparentBg?: boolean;
+		noReturnFocus?: boolean;
 	}>(),
 	{
 		manualShowing: null,
@@ -111,6 +115,7 @@ const props = withDefaults(
 		zPriority: "low",
 		noOverlap: true,
 		transparentBg: false,
+		noReturnFocus: false,
 	}
 );
 
@@ -189,12 +194,16 @@ function close(ev, opts: { useSendAnimation?: boolean } = {}) {
 	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
 	emit("close");
-	focusedElement.focus();
+	if (!noReturnFocus) {
+		focusedElement.focus();
+	}
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	focusedElement.focus();
+	if (!noReturnFocus) {
+		focusedElement.focus();
+	}
 	emit("click");
 }
 
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index 5f1ed037bc..f2afcecf24 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -18,6 +18,7 @@
 			:as-drawer="type === 'drawer'"
 			class="sfhdhdhq"
 			:class="{ drawer: type === 'drawer' }"
+			:no-return-focus="noReturnFocus"
 			@close="modal.close()"
 		/>
 	</MkModal>
@@ -35,6 +36,7 @@ defineProps<{
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
+	noReturnFocus?;
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index f1f2361503..362a9ec712 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -108,6 +108,7 @@ const suffixEl = ref<HTMLElement>();
 const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
+const selectRange = (start, end) => inputEl.value.setSelectionRange(start, end);
 const onInput = (ev: KeyboardEvent) => {
 	changed.value = true;
 	emit("change", ev);
@@ -178,6 +179,11 @@ onMounted(() => {
 		}
 	});
 });
+
+defineExpose({
+	focus,
+	selectRange
+});
 </script>
 
 <style lang="scss" scoped>
@@ -255,6 +261,9 @@ onMounted(() => {
 					white-space: nowrap;
 					text-overflow: ellipsis;
 				}
+				> :deep(button) {
+					pointer-events: all;
+				}
 			}
 
 			> .prefix {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index ed911978b4..d1e7c36733 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -346,7 +346,7 @@ export function yesno(props: {
 }
 
 export function inputText(props: {
-	type?: "text" | "email" | "password" | "url";
+	type?: "text" | "email" | "password" | "url" | "search";
 	title?: string | null;
 	text?: string | null;
 	placeholder?: string | null;
@@ -366,6 +366,7 @@ export function inputText(props: {
 				delay: 1000,
 			}),
 			{
+				type: props.type,
 				title: props.title,
 				text: props.text,
 				input: {
@@ -837,6 +838,7 @@ export function popupMenu(
 		align?: string;
 		width?: number;
 		viaKeyboard?: boolean;
+		noReturnFocus?: boolean;
 	},
 ) {
 	return new Promise((resolve, reject) => {
@@ -853,6 +855,7 @@ export function popupMenu(
 				width: options?.width,
 				align: options?.align,
 				viaKeyboard: options?.viaKeyboard,
+				noReturnFocus: options?.noReturnFocus,
 			},
 			{
 				closed: () => {
diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
index a0382532f6..60a0ac55e4 100644
--- a/packages/client/src/scripts/search.ts
+++ b/packages/client/src/scripts/search.ts
@@ -18,9 +18,9 @@ export async function search() {
 	// const searchFiltersAvailable = instance.searchFilters;
 
 	const { canceled, result: query } = await os.inputText({
+		type: "search",
 		title: i18n.ts.search,
 		placeholder: i18n.ts.searchPlaceholder,
-		// text: searchOptions,
 	});
 	if (canceled || query == null || query === "") return;
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index b225c77cae..8d1141773a 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -482,6 +482,17 @@ hr {
 	}
 }
 
+._flexList {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .2em;
+	width: min-content;
+	min-width: 100%;
+	&._center {
+		justify-content: center;
+	}
+}
+
 ._formLinks {
 	> *:not(:last-child) {
 		margin-bottom: 8px;

From 715f7a7a1a0ca1e7898fcbc7c3dc25952c20fd96 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sat, 10 Jun 2023 20:30:26 -0400
Subject: [PATCH 2/7] fixes

---
 packages/client/src/components/MkDialog.vue | 2 --
 packages/client/src/components/MkModal.vue  | 4 ++--
 packages/client/src/os.ts                   | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index c3d0ccb3b7..d6c671f8d5 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -338,7 +338,6 @@ async function openSearchFilters(ev) {
 				os.inputDate({
 					title: "Posts before"
 				}).then((res) => {
-					inputEl.value.focus();
 					if (res.canceled) return;
 					inputValue.value += " before:" + res.result;
 				});
@@ -351,7 +350,6 @@ async function openSearchFilters(ev) {
 				os.inputDate({
 					title: "Posts after"
 				}).then((res) => {
-					inputEl.value.focus();
 					if (res.canceled) return;
 					inputValue.value += " after:" + res.result;
 				});
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 6176298fa3..7b12facca9 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -194,14 +194,14 @@ function close(ev, opts: { useSendAnimation?: boolean } = {}) {
 	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
 	emit("close");
-	if (!noReturnFocus) {
+	if (!props.noReturnFocus) {
 		focusedElement.focus();
 	}
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	if (!noReturnFocus) {
+	if (!props.noReturnFocus) {
 		focusedElement.focus();
 	}
 	emit("click");
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index d1e7c36733..6a96b83fea 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -492,7 +492,7 @@ export function inputDate(props: {
 			{
 				done: (result) => {
 					resolve(
-						result
+						(result && isFinite(new Date(result.result)))
 							? { result: new Date(result.result), canceled: false }
 							: { canceled: true },
 					);

From 930ca7939215ce4bc766f054e5287e9e357ea258 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sat, 10 Jun 2023 20:46:35 -0400
Subject: [PATCH 3/7] fix width

---
 packages/client/src/components/MkDialog.vue   | 5 +----
 packages/client/src/components/form/input.vue | 1 +
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index d6c671f8d5..bc12d7cb1f 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -62,6 +62,7 @@
 				:type="input.type || 'text'"
 				:placeholder="input.placeholder || undefined"
 				@keydown="onInputKeydown"
+				:style="{ width: input.type === 'search' ? '300px' : null }"
 			>
 				<template v-if="input.type === 'password'" #prefix
 					><i class="ph-password ph-bold ph-lg"></i
@@ -439,10 +440,6 @@ onBeforeUnmount(() => {
 	margin: 16px 0 0 0;
 }
 
-:deep(input[type="search"]) {
-	width: 300px;
-}
-
 .buttons {
 	margin-top: 16px;
 	display: flex;
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 362a9ec712..d5f587f473 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -24,6 +24,7 @@
 					@blur="focused = false"
 					@keydown="onKeydown($event)"
 					@input="onInput"
+					v-bind="$attrs"
 				/>
 				<datalist v-if="datalist" :id="id">
 					<option v-for="data in datalist" :value="data" />

From b20225a1d4077481032e28acc6053e29e83c7f8e Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sat, 10 Jun 2023 20:48:35 -0400
Subject: [PATCH 4/7] format

---
 packages/client/src/components/MkDialog.vue   | 176 +++++++++---------
 packages/client/src/components/MkMenu.vue     |   2 +-
 packages/client/src/components/MkModal.vue    |   2 +-
 packages/client/src/components/form/input.vue |   2 +-
 4 files changed, 93 insertions(+), 89 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index bc12d7cb1f..53f505948b 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -285,92 +285,96 @@ function onInputKeydown(evt: KeyboardEvent) {
 }
 
 async function openSearchFilters(ev) {
-	await os.popupMenu([
-		{
-			icon: "ph-user ph-bold ph-lg",
-			text: "From user",
-			action: () => {
-				os.selectUser().then((user) => {
-					inputValue.value += " from:@" + Acct.toString(user);
-				});
-			}
-		},
-		{
-			icon: "ph-file ph-bold ph-lg",
-			text: "With file",
-			action: () => {
-				os.select({
-					title: "Has file",
-					items: [
-						{
-							text: "Image",
-							value: "image",
-						},
-						{
-							text: "Video",
-							value: "video",
-						},
-						{
-							text: "Audio",
-							value: "audio",
-						},
-						{
-							text: "File",
-							value: "file",
-						}
-					]
-				}).then((res) => {
-					if (res.canceled) return;
-					inputValue.value += " has:" + res.result;
-				});
-			}
-		},
-		{
-			icon: "ph-link ph-bold ph-lg",
-			text: "From domain",
-			action: () => {
-				inputValue.value += " domain:";
-			}
-		},
-		{
-			icon: "ph-calendar-blank ph-bold ph-lg",
-			text: "Posts before",
-			action: () => {
-				os.inputDate({
-					title: "Posts before"
-				}).then((res) => {
-					if (res.canceled) return;
-					inputValue.value += " before:" + res.result;
-				});
-			}
-		},
-		{
-			icon: "ph-calendar-blank ph-bold ph-lg",
-			text: "Posts after",
-			action: () => {
-				os.inputDate({
-					title: "Posts after"
-				}).then((res) => {
-					if (res.canceled) return;
-					inputValue.value += " after:" + res.result;
-				});
-			}
-		},
-		{
-			icon: "ph-eye ph-bold ph-lg",
-			text: "Following only",
-			action: () => {
-				inputValue.value += " filter:following ";
-			}
-		},
-		{
-			icon: "ph-users-three ph-bold ph-lg",
-			text: "Followers only",
-			action: () => {
-				inputValue.value += " filter:followers ";
-			}
-		},
-	], ev.target, { noReturnFocus: true });
+	await os.popupMenu(
+		[
+			{
+				icon: "ph-user ph-bold ph-lg",
+				text: "From user",
+				action: () => {
+					os.selectUser().then((user) => {
+						inputValue.value += " from:@" + Acct.toString(user);
+					});
+				},
+			},
+			{
+				icon: "ph-file ph-bold ph-lg",
+				text: "With file",
+				action: () => {
+					os.select({
+						title: "Has file",
+						items: [
+							{
+								text: "Image",
+								value: "image",
+							},
+							{
+								text: "Video",
+								value: "video",
+							},
+							{
+								text: "Audio",
+								value: "audio",
+							},
+							{
+								text: "File",
+								value: "file",
+							},
+						],
+					}).then((res) => {
+						if (res.canceled) return;
+						inputValue.value += " has:" + res.result;
+					});
+				},
+			},
+			{
+				icon: "ph-link ph-bold ph-lg",
+				text: "From domain",
+				action: () => {
+					inputValue.value += " domain:";
+				},
+			},
+			{
+				icon: "ph-calendar-blank ph-bold ph-lg",
+				text: "Posts before",
+				action: () => {
+					os.inputDate({
+						title: "Posts before",
+					}).then((res) => {
+						if (res.canceled) return;
+						inputValue.value += " before:" + res.result;
+					});
+				},
+			},
+			{
+				icon: "ph-calendar-blank ph-bold ph-lg",
+				text: "Posts after",
+				action: () => {
+					os.inputDate({
+						title: "Posts after",
+					}).then((res) => {
+						if (res.canceled) return;
+						inputValue.value += " after:" + res.result;
+					});
+				},
+			},
+			{
+				icon: "ph-eye ph-bold ph-lg",
+				text: "Following only",
+				action: () => {
+					inputValue.value += " filter:following ";
+				},
+			},
+			{
+				icon: "ph-users-three ph-bold ph-lg",
+				text: "Followers only",
+				action: () => {
+					inputValue.value += " filter:followers ";
+				},
+			},
+		],
+		ev.target,
+		{ noReturnFocus: true }
+	);
 	inputEl.value.focus();
 	inputEl.value.selectRange(inputValue.value.length, inputValue.value.length); // cursor at end
 }
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 60d598e11f..dcc6efe7d0 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<FocusTrap 
+	<FocusTrap
 		:active="false"
 		ref="focusTrap"
 		:return-focus-on-deactivate="!noReturnFocus"
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 7b12facca9..6a66c1787e 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -18,7 +18,7 @@
 		@enter="emit('opening')"
 		@after-enter="onOpened"
 	>
-		<FocusTrap 
+		<FocusTrap
 			v-model:active="isActive"
 			:return-focus-on-deactivate="!noReturnFocus"
 		>
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index d5f587f473..51ef87b643 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -183,7 +183,7 @@ onMounted(() => {
 
 defineExpose({
 	focus,
-	selectRange
+	selectRange,
 });
 </script>
 

From 621e7600566b258d29838ba07e5606bc09cffec6 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sat, 10 Jun 2023 20:58:22 -0400
Subject: [PATCH 5/7] remove unnecessary

---
 packages/client/src/components/MkDialog.vue   | 2 +-
 packages/client/src/components/form/input.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 53f505948b..22cb6b4130 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -167,7 +167,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 51ef87b643..8a6a1dd933 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -24,7 +24,6 @@
 					@blur="focused = false"
 					@keydown="onKeydown($event)"
 					@input="onInput"
-					v-bind="$attrs"
 				/>
 				<datalist v-if="datalist" :id="id">
 					<option v-for="data in datalist" :value="data" />

From 19ca91c2016683d2805bf09221dbada09722b8b9 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sun, 11 Jun 2023 22:05:50 -0400
Subject: [PATCH 6/7] i18n

---
 locales/en-US.yml                           | 11 ++++++++
 packages/client/src/components/MkDialog.vue | 28 ++++++++++-----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 6ea2d36129..c560011e73 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -968,6 +968,9 @@ rateLimitExceeded: "Rate limit exceeded"
 cropImage: "Crop image"
 cropImageAsk: "Do you want to crop this image?"
 file: "File"
+image: "Image"
+video: "Video"
+audio: "Audio"
 recentNHours: "Last {n} hours"
 recentNDays: "Last {n} days"
 noEmailServerWarning: "Email server not configured."
@@ -1442,6 +1445,14 @@ _time:
   minute: "Minute(s)"
   hour: "Hour(s)"
   day: "Day(s)"
+_filters:
+  fromUser: "From user"
+  withFile: "With file"
+  fromDomain: "From domain"
+  notesBefore: "Posts before"
+  notesAfter: "Posts after"
+  followingOnly: "Following only"
+  followersOnly: "Followers only"
 _tutorial:
   title: "How to use Calckey"
   step1_1: "Welcome!"
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 22cb6b4130..8e6be9d107 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -289,7 +289,7 @@ async function openSearchFilters(ev) {
 		[
 			{
 				icon: "ph-user ph-bold ph-lg",
-				text: "From user",
+				text: i18n.ts._filters.fromUser,
 				action: () => {
 					os.selectUser().then((user) => {
 						inputValue.value += " from:@" + Acct.toString(user);
@@ -298,25 +298,25 @@ async function openSearchFilters(ev) {
 			},
 			{
 				icon: "ph-file ph-bold ph-lg",
-				text: "With file",
+				text: i18n.ts._filters.withFile,
 				action: () => {
 					os.select({
-						title: "Has file",
+						title: i18n.ts._filters.withFile,
 						items: [
 							{
-								text: "Image",
+								text: i18n.ts.image,
 								value: "image",
 							},
 							{
-								text: "Video",
+								text: i18n.ts.video,
 								value: "video",
 							},
 							{
-								text: "Audio",
+								text: i18n.ts.audio,
 								value: "audio",
 							},
 							{
-								text: "File",
+								text: i18n.ts.file,
 								value: "file",
 							},
 						],
@@ -328,17 +328,17 @@ async function openSearchFilters(ev) {
 			},
 			{
 				icon: "ph-link ph-bold ph-lg",
-				text: "From domain",
+				text: i18n.ts._filters.fromDomain,
 				action: () => {
 					inputValue.value += " domain:";
 				},
 			},
 			{
 				icon: "ph-calendar-blank ph-bold ph-lg",
-				text: "Posts before",
+				text: i18n.ts._filters.notesBefore,
 				action: () => {
 					os.inputDate({
-						title: "Posts before",
+						title: i18n.ts._filters.notesBefore,
 					}).then((res) => {
 						if (res.canceled) return;
 						inputValue.value += " before:" + res.result;
@@ -347,10 +347,10 @@ async function openSearchFilters(ev) {
 			},
 			{
 				icon: "ph-calendar-blank ph-bold ph-lg",
-				text: "Posts after",
+				text: i18n.ts._filters.notesAfter,
 				action: () => {
 					os.inputDate({
-						title: "Posts after",
+						title: i18n.ts._filters.notesAfter,
 					}).then((res) => {
 						if (res.canceled) return;
 						inputValue.value += " after:" + res.result;
@@ -359,14 +359,14 @@ async function openSearchFilters(ev) {
 			},
 			{
 				icon: "ph-eye ph-bold ph-lg",
-				text: "Following only",
+				text: i18n.ts._filters.followingOnly,
 				action: () => {
 					inputValue.value += " filter:following ";
 				},
 			},
 			{
 				icon: "ph-users-three ph-bold ph-lg",
-				text: "Followers only",
+				text: i18n.ts._filters.followersOnly,
 				action: () => {
 					inputValue.value += " filter:followers ";
 				},

From d79e974fd08ff54aac0ff8dca6631f115898d596 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sun, 11 Jun 2023 22:12:11 -0400
Subject: [PATCH 7/7] Only show if available

---
 packages/client/src/components/MkDialog.vue | 6 +++---
 packages/client/src/scripts/search.ts       | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 8e6be9d107..fca265c025 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -59,15 +59,15 @@
 				v-if="input && input.type !== 'paragraph'"
 				v-model="inputValue"
 				autofocus
-				:type="input.type || 'text'"
+				:type="input.type == 'searchAdvanced' ? 'search' : input.type || 'text'"
 				:placeholder="input.placeholder || undefined"
 				@keydown="onInputKeydown"
-				:style="{ width: input.type === 'search' ? '300px' : null }"
+				:style="{ width: input.type === 'searchAdvanced' ? '300px' : null }"
 			>
 				<template v-if="input.type === 'password'" #prefix
 					><i class="ph-password ph-bold ph-lg"></i
 				></template>
-				<template v-if="input.type === 'search'" #suffix>
+				<template v-if="input.type === 'searchAdvanced'" #suffix>
 					<button
 						class="_buttonIcon"
 						@click.stop="openSearchFilters"
diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
index 60a0ac55e4..6afffb4d36 100644
--- a/packages/client/src/scripts/search.ts
+++ b/packages/client/src/scripts/search.ts
@@ -1,7 +1,7 @@
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
-// import { instance } from "@/instance";
+import { instance } from "@/instance";
 
 export async function search() {
 	// const searchOptions =
@@ -15,10 +15,10 @@ export async function search() {
 	// 	"filter:following => show results only from users you follow\n" +
 	// 	"filter:followers => show results only from followers\n";
 
-	// const searchFiltersAvailable = instance.searchFilters;
+	const searchFiltersAvailable = instance.searchFilters;
 
 	const { canceled, result: query } = await os.inputText({
-		type: "search",
+		type: searchFiltersAvailable ? "searchAdvanced" : "search",
 		title: i18n.ts.search,
 		placeholder: i18n.ts.searchPlaceholder,
 	});