From 55af32a92efd940fe3b8aa1452f9271033cc6c7d Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 15 Mar 2024 12:23:08 +0900
Subject: [PATCH 01/32] =?UTF-8?q?FormSelector.vue=E3=81=AB=E6=A4=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelector.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index 38d977adb..a4d7413e5 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -3,19 +3,24 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
+    <label v-if="activateSearch">
+      <a-icon name="search" mdi />
+      <input v-model="searchText" />
+    </label>
     <div
       :class="$style.inputContainer"
       :data-on-secondary="$boolAttr(onSecondary)"
     >
       <select :id="id" v-model="value" :class="$style.select">
-        <option
-          v-for="option in options"
-          :key="option.value ?? nullSymbol"
-          :value="option.value"
-          :disabled="option.value === null"
-        >
-          {{ option.key }}
-        </option>
+        <template v-for="option in options" :key="option.value ?? nullSymbol">
+          <option
+            v-if="option.key.match(searchText)"
+            :value="option.value"
+            :disabled="option.value === null"
+          >
+            {{ option.key }}
+          </option>
+        </template>
       </select>
     </div>
   </div>
@@ -24,6 +29,8 @@
 <script lang="ts" setup>
 import { randomString } from '/@/lib/basic/randomString'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
+import { ref } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -31,10 +38,12 @@ const props = withDefaults(
     onSecondary?: boolean
     options: Array<{ key: string; value: string | null }>
     label?: string
+    activateSearch?: boolean
   }>(),
   {
     modelValue: '',
-    onSecondary: false
+    onSecondary: false,
+    activateSearch: false
   }
 )
 
@@ -46,6 +55,8 @@ const nullSymbol = Symbol('null')
 
 const value = useModelValueSyncer(props, emit)
 const id = randomString()
+
+const searchText = ref('')
 </script>
 
 <style lang="scss" module>

From a3cd02d516f941e1a5183e97af58531bf77fe78c Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 15 Mar 2024 13:15:02 +0900
Subject: [PATCH 02/32] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4=20=E8=B5=B7=E5=8B=95=E6=99=82=E3=83=81=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=83=8D=E3=83=AB=E8=A8=AD=E5=AE=9A=E3=81=A8=E3=83=9B?=
 =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D=E3=83=AB?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=81=A7=E6=9C=89=E5=8A=B9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/BrowserTab/OpenMode.vue | 1 +
 src/components/UI/FormSelector.vue              | 6 +++++-
 src/views/Settings/ProfileTab.vue               | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/BrowserTab/OpenMode.vue b/src/components/Settings/BrowserTab/OpenMode.vue
index 6c6a026a4..7ef358ef6 100644
--- a/src/components/Settings/BrowserTab/OpenMode.vue
+++ b/src/components/Settings/BrowserTab/OpenMode.vue
@@ -9,6 +9,7 @@
         v-if="openMode === 'particular'"
         v-model="openChannelNameValue"
         :options="channelOptions"
+        activate-search
       />
     </div>
     <div>
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index a4d7413e5..dca377b52 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -3,7 +3,7 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <label v-if="activateSearch">
+    <label v-if="activateSearch" :class="$style.search">
       <a-icon name="search" mdi />
       <input v-model="searchText" />
     </label>
@@ -88,4 +88,8 @@ const searchText = ref('')
   color: inherit;
   background: inherit;
 }
+.search {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 2f8c47ada..5aa1b0664 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -39,6 +39,7 @@
         v-model="state.homeChannel"
         :options="channelOptions"
         :class="$style.form"
+        activate-search
       />
     </div>
     <div :class="$style.element">

From cd3942fe3e0244b7b72860c54bd4900fdd1cc31a Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 15 Mar 2024 15:18:39 +0900
Subject: [PATCH 03/32] =?UTF-8?q?filteredOptions=E3=82=92=E7=94=A8?=
 =?UTF-8?q?=E3=81=84=E3=82=8B=E5=BD=A2=E3=81=AB=E5=A4=89=E6=9B=B4=20type?=
 =?UTF-8?q?=20Option=E3=82=92=E4=BD=9C=E6=88=90=20=E6=A4=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=B5=90=E6=9E=9C0=E3=81=AE=E3=81=A8=E3=81=8D=E3=81=AE?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=82=92=E4=BD=9C=E6=88=90=20css=E3=82=92?=
 =?UTF-8?q?=E4=BB=AE=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelector.vue | 49 ++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index dca377b52..b09b2a685 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -5,38 +5,40 @@
     </label>
     <label v-if="activateSearch" :class="$style.search">
       <a-icon name="search" mdi />
-      <input v-model="searchText" />
+      <input v-model="filterText" />
     </label>
     <div
+      v-if="filteredOptions.length > 0"
       :class="$style.inputContainer"
       :data-on-secondary="$boolAttr(onSecondary)"
     >
       <select :id="id" v-model="value" :class="$style.select">
-        <template v-for="option in options" :key="option.value ?? nullSymbol">
-          <option
-            v-if="option.key.match(searchText)"
-            :value="option.value"
-            :disabled="option.value === null"
-          >
-            {{ option.key }}
-          </option>
-        </template>
+        <option
+          v-for="option in filteredOptions"
+          :key="option.value ?? nullSymbol"
+          :value="option.value"
+          :disabled="option.value === null"
+        >
+          {{ option.key }}
+        </option>
       </select>
     </div>
+    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { randomString } from '/@/lib/basic/randomString'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
 
+type Option = { key: string; value: string | null }
 const props = withDefaults(
   defineProps<{
     modelValue?: string | null
     onSecondary?: boolean
-    options: Array<{ key: string; value: string | null }>
+    options: Array<Option>
     label?: string
     activateSearch?: boolean
   }>(),
@@ -56,7 +58,12 @@ const nullSymbol = Symbol('null')
 const value = useModelValueSyncer(props, emit)
 const id = randomString()
 
-const searchText = ref('')
+const filterText = ref('')
+const filteredOptions = computed(() =>
+  props.options.filter((option: Option) =>
+    option.key.includes(filterText.value)
+  )
+)
 </script>
 
 <style lang="scss" module>
@@ -89,7 +96,23 @@ const searchText = ref('')
   background: inherit;
 }
 .search {
+  @include color-ui-primary;
+  @include background-secondary;
+  @include size-body1;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: solid 2px transparent;
+}
+.errorText {
+  @include color-ui-primary;
+  @include background-secondary;
+  @include size-body1;
+  height: 30px;
   display: flex;
   align-items: center;
+  border-radius: 4px;
+  border: solid 2px transparent;
 }
 </style>

From 15a028c21b4e175be61cd9bcd40d30c2a051e21b Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 16 Mar 2024 12:11:29 +0900
Subject: [PATCH 04/32] =?UTF-8?q?=E4=B8=8A=E6=89=8B=E3=81=8F=E5=8B=95?=
 =?UTF-8?q?=E3=81=8D=E3=81=BE=E3=81=9B=E3=82=93=E3=80=81=E5=8A=A9=E3=81=91?=
 =?UTF-8?q?=E3=81=A6=E3=81=8F=E3=81=A0=E3=81=95=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 36 +++++++++++++++++++++++++++++-
 package.json                       |  1 +
 src/components/UI/FormSelector.vue | 13 +++++++++--
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a69e85fb..c370ce630 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "vue": "^3.3.4",
         "vue-router": "^4.1.5",
         "vue-slider-component": "^4.0.0-beta.9",
+        "vuetify": "^3.5.9",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -11029,7 +11030,7 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11583,6 +11584,39 @@
         "typescript": "*"
       }
     },
+    "node_modules/vuetify": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.9.tgz",
+      "integrity": "sha512-tA3N2uWZFNSZRFNnXN841x4rWozYXKC0fGW/mJIwcKkQiI0+gmVCETtjF8bnOS7L1s0buWzw94uYTlXQa5AQ4w==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=1.0.0-alpha.12",
+        "vue": "^3.3.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": ">=2.0.0-alpha.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index 4aaaeaac6..cb4dee85a 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "vue": "^3.3.4",
     "vue-router": "^4.1.5",
     "vue-slider-component": "^4.0.0-beta.9",
+    "vuetify": "^3.5.9",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index b09b2a685..85b186f88 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="label" :for="id" :class="$style.label">
+    <!-- <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
     <label v-if="activateSearch" :class="$style.search">
@@ -23,7 +23,14 @@
         </option>
       </select>
     </div>
-    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span>
+    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span> -->
+    <v-autocomplete
+      v-model="selected"
+      :items="options"
+      item-title="key"
+      item-value="value"
+    ></v-autocomplete>
+    {{ selected }}
   </div>
 </template>
 
@@ -32,6 +39,7 @@ import { randomString } from '/@/lib/basic/randomString'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import { ref, computed } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
+import { VAutocomplete } from 'vuetify/lib/components/index.mjs'
 
 type Option = { key: string; value: string | null }
 const props = withDefaults(
@@ -64,6 +72,7 @@ const filteredOptions = computed(() =>
     option.key.includes(filterText.value)
   )
 )
+const selected = ref<Option | null>(null)
 </script>
 
 <style lang="scss" module>

From c33c7e0503e0d1a9a9e2d78dcce8fcef0267d2c6 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sun, 24 Mar 2024 23:59:43 +0900
Subject: [PATCH 05/32] =?UTF-8?q?Revert=20"=E4=B8=8A=E6=89=8B=E3=81=8F?=
 =?UTF-8?q?=E5=8B=95=E3=81=8D=E3=81=BE=E3=81=9B=E3=82=93=E3=80=81=E5=8A=A9?=
 =?UTF-8?q?=E3=81=91=E3=81=A6=E3=81=8F=E3=81=A0=E3=81=95=E3=81=84"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 15a028c21b4e175be61cd9bcd40d30c2a051e21b.
---
 package-lock.json                  | 36 +-----------------------------
 package.json                       |  1 -
 src/components/UI/FormSelector.vue | 13 ++---------
 3 files changed, 3 insertions(+), 47 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c370ce630..7a69e85fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,6 @@
         "vue": "^3.3.4",
         "vue-router": "^4.1.5",
         "vue-slider-component": "^4.0.0-beta.9",
-        "vuetify": "^3.5.9",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -11030,7 +11029,7 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11584,39 +11583,6 @@
         "typescript": "*"
       }
     },
-    "node_modules/vuetify": {
-      "version": "3.5.9",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.9.tgz",
-      "integrity": "sha512-tA3N2uWZFNSZRFNnXN841x4rWozYXKC0fGW/mJIwcKkQiI0+gmVCETtjF8bnOS7L1s0buWzw94uYTlXQa5AQ4w==",
-      "engines": {
-        "node": "^12.20 || >=14.13"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/johnleider"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.7",
-        "vite-plugin-vuetify": ">=1.0.0-alpha.12",
-        "vue": "^3.3.0",
-        "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": ">=2.0.0-alpha.11"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        },
-        "vite-plugin-vuetify": {
-          "optional": true
-        },
-        "vue-i18n": {
-          "optional": true
-        },
-        "webpack-plugin-vuetify": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index cb4dee85a..4aaaeaac6 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
     "vue": "^3.3.4",
     "vue-router": "^4.1.5",
     "vue-slider-component": "^4.0.0-beta.9",
-    "vuetify": "^3.5.9",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index 85b186f88..b09b2a685 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <label v-if="label" :for="id" :class="$style.label">
+    <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
     <label v-if="activateSearch" :class="$style.search">
@@ -23,14 +23,7 @@
         </option>
       </select>
     </div>
-    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span> -->
-    <v-autocomplete
-      v-model="selected"
-      :items="options"
-      item-title="key"
-      item-value="value"
-    ></v-autocomplete>
-    {{ selected }}
+    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span>
   </div>
 </template>
 
@@ -39,7 +32,6 @@ import { randomString } from '/@/lib/basic/randomString'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import { ref, computed } from 'vue'
 import AIcon from '/@/components/UI/AIcon.vue'
-import { VAutocomplete } from 'vuetify/lib/components/index.mjs'
 
 type Option = { key: string; value: string | null }
 const props = withDefaults(
@@ -72,7 +64,6 @@ const filteredOptions = computed(() =>
     option.key.includes(filterText.value)
   )
 )
-const selected = ref<Option | null>(null)
 </script>
 
 <style lang="scss" module>

From 73a281c7dba31de72768482a04c50b4104c84026 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Mon, 25 Mar 2024 00:24:52 +0900
Subject: [PATCH 06/32] =?UTF-8?q?vue-multiselect=E3=82=92=E5=B0=8E?=
 =?UTF-8?q?=E5=85=A5=20FormSelectorFilterable.vue=E3=82=92=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            | 10 ++
 package.json                                 |  1 +
 src/components/UI/FormSelectorFilterable.vue | 98 ++++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 src/components/UI/FormSelectorFilterable.vue

diff --git a/package-lock.json b/package-lock.json
index 7a69e85fb..12915523d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "turndown": "^7.1.1",
         "turndown-plugin-gfm": "^1.0.2",
         "vue": "^3.3.4",
+        "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.1.5",
         "vue-slider-component": "^4.0.0-beta.9",
         "zod": "^3.22.4"
@@ -11537,6 +11538,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-multiselect": {
+      "version": "3.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.3.tgz",
+      "integrity": "sha512-P7Fx+ovVF7WMERSZ0lw6N3p4H4bnQ3NcaY3ORjzFPv0r/6lpIqvFWmK9Xnwze9mgAvmNV1foI1VWrBmjnfBTLQ==",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
diff --git a/package.json b/package.json
index 4aaaeaac6..d6d1006c7 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "vue": "^3.3.4",
+    "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.1.5",
     "vue-slider-component": "^4.0.0-beta.9",
     "zod": "^3.22.4"
diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
new file mode 100644
index 000000000..34b692457
--- /dev/null
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <label v-if="label" :for="id" :class="$style.label">
+      {{ label }}
+    </label>
+    <vue-multiselect v-model="value"></vue-multiselect>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { randomString } from '/@/lib/basic/randomString'
+import { useModelValueSyncer } from '/@/composables/useModelSyncer'
+import { ref, computed } from 'vue'
+import VueMultiselect from 'vue-multiselect'
+
+type Option = { key: string; value: string | null }
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    onSecondary?: boolean
+    options: Array<Option>
+    label?: string
+    activateSearch?: boolean
+  }>(),
+  {
+    modelValue: '',
+    onSecondary: false,
+    activateSearch: false
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', _val: string | null): void
+}>()
+
+const nullSymbol = Symbol('null')
+
+const value = useModelValueSyncer(props, emit)
+const id = randomString()
+
+const filterText = ref('')
+const filteredOptions = computed(() =>
+  props.options.filter((option: Option) =>
+    option.key.includes(filterText.value)
+  )
+)
+</script>
+
+<style lang="scss" module>
+.label {
+  @include color-ui-primary;
+  margin-bottom: 4px;
+  display: block;
+}
+.inputContainer {
+  @include color-ui-primary;
+  @include background-secondary;
+  @include size-body1;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  &[data-on-secondary] {
+    @include background-primary;
+  }
+
+  border: solid 2px transparent;
+  &:focus-within {
+    border-color: $theme-accent-focus-default;
+  }
+}
+.select {
+  margin: 0 8px;
+  width: 100%;
+  color: inherit;
+  background: inherit;
+}
+.search {
+  @include color-ui-primary;
+  @include background-secondary;
+  @include size-body1;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: solid 2px transparent;
+}
+.errorText {
+  @include color-ui-primary;
+  @include background-secondary;
+  @include size-body1;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: solid 2px transparent;
+}
+</style>

From 029cadbbb4cf8956181a0c318d68cce0c6ef19a0 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 26 Mar 2024 13:24:10 +0900
Subject: [PATCH 07/32] =?UTF-8?q?=E6=A9=9F=E8=83=BD=E9=9D=A2=E3=81=AF?=
 =?UTF-8?q?=E6=A6=82=E3=81=AD=E3=81=A7=E3=81=8D=E3=81=BE=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/BrowserTab/OpenMode.vue          |  5 +--
 src/components/UI/FormSelector.vue            | 44 ++-----------------
 src/components/UI/FormSelectorFilterable.vue  | 25 +++++------
 src/views/Settings/ProfileTab.vue             |  8 ++--
 4 files changed, 20 insertions(+), 62 deletions(-)

diff --git a/src/components/Settings/BrowserTab/OpenMode.vue b/src/components/Settings/BrowserTab/OpenMode.vue
index 7ef358ef6..737a25147 100644
--- a/src/components/Settings/BrowserTab/OpenMode.vue
+++ b/src/components/Settings/BrowserTab/OpenMode.vue
@@ -5,11 +5,10 @@
       <p>
         特定のチャンネルを指定します。OFFの場合は最後に開いたチャンネルが設定されます。
       </p>
-      <form-selector
+      <form-selector-filterable
         v-if="openMode === 'particular'"
         v-model="openChannelNameValue"
         :options="channelOptions"
-        activate-search
       />
     </div>
     <div>
@@ -23,7 +22,7 @@
 
 <script lang="ts" setup>
 import AToggle from '/@/components/UI/AToggle.vue'
-import FormSelector from '/@/components/UI/FormSelector.vue'
+import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
 import type { OpenMode } from '/@/store/app/browserSettings'
 import useChannelPath from '/@/composables/useChannelPath'
 import useChannelOptions from '/@/composables/useChannelOptions'
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index b09b2a685..38d977adb 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -3,18 +3,13 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <label v-if="activateSearch" :class="$style.search">
-      <a-icon name="search" mdi />
-      <input v-model="filterText" />
-    </label>
     <div
-      v-if="filteredOptions.length > 0"
       :class="$style.inputContainer"
       :data-on-secondary="$boolAttr(onSecondary)"
     >
       <select :id="id" v-model="value" :class="$style.select">
         <option
-          v-for="option in filteredOptions"
+          v-for="option in options"
           :key="option.value ?? nullSymbol"
           :value="option.value"
           :disabled="option.value === null"
@@ -23,29 +18,23 @@
         </option>
       </select>
     </div>
-    <span v-else :class="$style.errorText"> 候補が見つかりませんでした </span>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { randomString } from '/@/lib/basic/randomString'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
-import { ref, computed } from 'vue'
-import AIcon from '/@/components/UI/AIcon.vue'
 
-type Option = { key: string; value: string | null }
 const props = withDefaults(
   defineProps<{
     modelValue?: string | null
     onSecondary?: boolean
-    options: Array<Option>
+    options: Array<{ key: string; value: string | null }>
     label?: string
-    activateSearch?: boolean
   }>(),
   {
     modelValue: '',
-    onSecondary: false,
-    activateSearch: false
+    onSecondary: false
   }
 )
 
@@ -57,13 +46,6 @@ const nullSymbol = Symbol('null')
 
 const value = useModelValueSyncer(props, emit)
 const id = randomString()
-
-const filterText = ref('')
-const filteredOptions = computed(() =>
-  props.options.filter((option: Option) =>
-    option.key.includes(filterText.value)
-  )
-)
 </script>
 
 <style lang="scss" module>
@@ -95,24 +77,4 @@ const filteredOptions = computed(() =>
   color: inherit;
   background: inherit;
 }
-.search {
-  @include color-ui-primary;
-  @include background-secondary;
-  @include size-body1;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  border: solid 2px transparent;
-}
-.errorText {
-  @include color-ui-primary;
-  @include background-secondary;
-  @include size-body1;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  border: solid 2px transparent;
-}
 </style>
diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 34b692457..686c8f643 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -3,14 +3,19 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <vue-multiselect v-model="value"></vue-multiselect>
+    <vue-multiselect
+      :id="id"
+      v-model="selectedOption"
+      :options="options"
+      track-by="key"
+      label="key"
+    ></vue-multiselect>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { randomString } from '/@/lib/basic/randomString'
-import { useModelValueSyncer } from '/@/composables/useModelSyncer'
-import { ref, computed } from 'vue'
 import VueMultiselect from 'vue-multiselect'
 
 type Option = { key: string; value: string | null }
@@ -33,17 +38,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', _val: string | null): void
 }>()
 
-const nullSymbol = Symbol('null')
-
-const value = useModelValueSyncer(props, emit)
+const selectedOption = ref<Option | null>(null)
+watch(selectedOption, newSelected => {
+  emit('update:modelValue', newSelected?.value ?? null)
+})
 const id = randomString()
-
-const filterText = ref('')
-const filteredOptions = computed(() =>
-  props.options.filter((option: Option) =>
-    option.key.includes(filterText.value)
-  )
-)
 </script>
 
 <style lang="scss" module>
diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 5aa1b0664..74bf96e29 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -35,11 +35,10 @@
     </div>
     <div :class="$style.element">
       <h3 :class="$style.header">ホームチャンネル</h3>
-      <form-selector
+      <form-selector-filterable
         v-model="state.homeChannel"
         :options="channelOptions"
         :class="$style.form"
-        activate-search
       />
     </div>
     <div :class="$style.element">
@@ -122,7 +121,6 @@ const useProfileUpdate = (
 
       addSuccessToast('プロフィールを更新しました')
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error('プロフィールの更新に失敗しました', e)
 
       addErrorToast(formatResizeError(e, 'プロフィールの更新に失敗しました'))
@@ -150,13 +148,13 @@ const useIsLengthValid = (state: Profile) => {
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import ImageUpload from '/@/components/Settings/ImageUpload.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
-import FormSelector from '/@/components/UI/FormSelector.vue'
+import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
 
 const { detail: detailMayBeUndefined } = useMeStore()
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
 const detail = computed(() => detailMayBeUndefined.value!)
 
 // ホームチャンネルの選択+ひとことのレンダリングに必要

From b2e511fa924bcf5263f80b06797736963a278511 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 26 Mar 2024 18:18:51 +0900
Subject: [PATCH 08/32] =?UTF-8?q?modelValue=E3=81=A8selectedOption?=
 =?UTF-8?q?=E3=81=AE=E5=90=8C=E6=9C=9F=E5=87=A6=E7=90=86=E3=82=92=E3=83=AA?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 32 ++++----------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 686c8f643..1c3190cea 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -9,12 +9,14 @@
       :options="options"
       track-by="key"
       label="key"
+      :class="$style.inputContainer"
+      @select="updateModelValue"
     ></vue-multiselect>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { randomString } from '/@/lib/basic/randomString'
 import VueMultiselect from 'vue-multiselect'
 
@@ -39,9 +41,9 @@ const emit = defineEmits<{
 }>()
 
 const selectedOption = ref<Option | null>(null)
-watch(selectedOption, newSelected => {
-  emit('update:modelValue', newSelected?.value ?? null)
-})
+const updateModelValue = (selectedOption: Option) => {
+  emit('update:modelValue', selectedOption?.value ?? null)
+}
 const id = randomString()
 </script>
 
@@ -56,8 +58,6 @@ const id = randomString()
   @include background-secondary;
   @include size-body1;
   height: 30px;
-  display: flex;
-  align-items: center;
   border-radius: 4px;
   &[data-on-secondary] {
     @include background-primary;
@@ -74,24 +74,4 @@ const id = randomString()
   color: inherit;
   background: inherit;
 }
-.search {
-  @include color-ui-primary;
-  @include background-secondary;
-  @include size-body1;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  border: solid 2px transparent;
-}
-.errorText {
-  @include color-ui-primary;
-  @include background-secondary;
-  @include size-body1;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  border: solid 2px transparent;
-}
 </style>

From 78011748de2ac248cbffa31be20518d2ccd81977 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 26 Mar 2024 22:12:01 +0900
Subject: [PATCH 09/32] =?UTF-8?q?vue-select=E3=81=AEimport=E3=81=8C?=
 =?UTF-8?q?=E3=81=86=E3=81=BE=E3=81=8F=E3=81=84=E3=81=8B=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            |  9 ++++++
 package.json                                 |  1 +
 src/components/UI/FormSelectorFilterable.vue | 32 +++++++++++---------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12915523d..4c6426405 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "vue": "^3.3.4",
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.1.5",
+        "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.0.0-beta.9",
         "zod": "^3.22.4"
       },
@@ -11561,6 +11562,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+      "peerDependencies": {
+        "vue": "3.x"
+      }
+    },
     "node_modules/vue-slider-component": {
       "version": "4.0.0-beta.9",
       "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.0.0-beta.9.tgz",
diff --git a/package.json b/package.json
index d6d1006c7..543117d96 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.1.5",
+    "vue-select": "^4.0.0-beta.6",
     "vue-slider-component": "^4.0.0-beta.9",
     "zod": "^3.22.4"
   },
diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 1c3190cea..be9dc39ac 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -3,15 +3,18 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <vue-multiselect
+    <v-select
       :id="id"
       v-model="selectedOption"
       :options="options"
-      track-by="key"
       label="key"
-      :class="$style.inputContainer"
-      @select="updateModelValue"
-    ></vue-multiselect>
+      :class="$style.multiselect"
+      @option:selected="updateModelValue"
+    >
+      <template #option="p">
+        <div :class="$style.option">{{ p.option.key }}</div>
+      </template>
+    </v-select>
   </div>
 </template>
 
@@ -19,6 +22,8 @@
 import { ref } from 'vue'
 import { randomString } from '/@/lib/basic/randomString'
 import VueMultiselect from 'vue-multiselect'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
 
 type Option = { key: string; value: string | null }
 const props = withDefaults(
@@ -40,7 +45,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', _val: string | null): void
 }>()
 
-const selectedOption = ref<Option | null>(null)
+const selectedOption = ref<Option | null>(
+  props.options.find(o => o.value === props.modelValue) ?? null
+)
 const updateModelValue = (selectedOption: Option) => {
   emit('update:modelValue', selectedOption?.value ?? null)
 }
@@ -53,25 +60,20 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
-.inputContainer {
+.multiselect {
   @include color-ui-primary;
   @include background-secondary;
   @include size-body1;
   height: 30px;
   border-radius: 4px;
-  &[data-on-secondary] {
-    @include background-primary;
-  }
-
   border: solid 2px transparent;
   &:focus-within {
     border-color: $theme-accent-focus-default;
   }
 }
-.select {
-  margin: 0 8px;
+.option {
+  @include color-ui-primary;
+  @include background-secondary;
   width: 100%;
-  color: inherit;
-  background: inherit;
 }
 </style>

From 9ce174adeb9235c70d7d70ba42f63b525a1b8082 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 26 Mar 2024 22:19:04 +0900
Subject: [PATCH 10/32] =?UTF-8?q?vue-select=E3=81=AB=E7=A7=BB=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            | 10 ----------
 package.json                                 |  1 -
 src/components/UI/FormSelectorFilterable.vue |  5 ++---
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c6426405..9fb3734f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
         "turndown": "^7.1.1",
         "turndown-plugin-gfm": "^1.0.2",
         "vue": "^3.3.4",
-        "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.1.5",
         "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.0.0-beta.9",
@@ -11539,15 +11538,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/vue-multiselect": {
-      "version": "3.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.3.tgz",
-      "integrity": "sha512-P7Fx+ovVF7WMERSZ0lw6N3p4H4bnQ3NcaY3ORjzFPv0r/6lpIqvFWmK9Xnwze9mgAvmNV1foI1VWrBmjnfBTLQ==",
-      "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
diff --git a/package.json b/package.json
index 543117d96..e262a9d2a 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
     "vue": "^3.3.4",
-    "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.1.5",
     "vue-select": "^4.0.0-beta.6",
     "vue-slider-component": "^4.0.0-beta.9",
diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index be9dc39ac..a1aef2e4a 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -8,7 +8,7 @@
       v-model="selectedOption"
       :options="options"
       label="key"
-      :class="$style.multiselect"
+      :class="$style.select"
       @option:selected="updateModelValue"
     >
       <template #option="p">
@@ -21,7 +21,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { randomString } from '/@/lib/basic/randomString'
-import VueMultiselect from 'vue-multiselect'
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
 
@@ -60,7 +59,7 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
-.multiselect {
+.select {
   @include color-ui-primary;
   @include background-secondary;
   @include size-body1;

From 3c589f1ec21b2053704373cb684da0b01d31f8a4 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 29 Mar 2024 22:11:17 +0900
Subject: [PATCH 11/32] =?UTF-8?q?css=E3=82=92=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 55 +++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index a1aef2e4a..56940e05b 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -3,18 +3,19 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <v-select
-      :id="id"
-      v-model="selectedOption"
-      :options="options"
-      label="key"
-      :class="$style.select"
-      @option:selected="updateModelValue"
+    <div
+      :class="$style.selectContainer"
+      :data-on-secondary="$boolAttr(onSecondary)"
     >
-      <template #option="p">
-        <div :class="$style.option">{{ p.option.key }}</div>
-      </template>
-    </v-select>
+      <v-select
+        :id="id"
+        v-model="selectedOption"
+        :options="options"
+        label="key"
+        :class="$style.select"
+        @option:selected="updateModelValue"
+      ></v-select>
+    </div>
   </div>
 </template>
 
@@ -31,7 +32,6 @@ const props = withDefaults(
     onSecondary?: boolean
     options: Array<Option>
     label?: string
-    activateSearch?: boolean
   }>(),
   {
     modelValue: '',
@@ -59,20 +59,35 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
-.select {
-  @include color-ui-primary;
+.selectContainer {
   @include background-secondary;
   @include size-body1;
   height: 30px;
-  border-radius: 4px;
+  display: flex;
+  align-items: center;
   border: solid 2px transparent;
-  &:focus-within {
-    border-color: $theme-accent-focus-default;
+  border-radius: 4px;
+  &[data-on-secondary] {
+    @include background-primary;
   }
 }
-.option {
-  @include color-ui-primary;
-  @include background-secondary;
+.select {
   width: 100%;
+  --vs-controls-color: var(--theme-ui-primary-default);
+  &:focus-within {
+    --vs-border-color: var(--theme-accent-focus-default);
+  }
+
+  --vs-dropdown-bg: var(--theme-background-secondary-default);
+  --vs-dropdown-color: var(--theme-ui-primary-default);
+  --vs-dropdown-option-color: var(--theme-ui-primary-default);
+
+  --vs-selected-bg: var(--theme-accent-focus-default);
+  --vs-selected-color: var(--theme-ui-primary-default);
+
+  --vs-search-input-color: var(--theme-ui-primary-default);
+
+  --vs-dropdown-option--active-bg: var(--theme-accent-focus-default);
+  --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
 }
 </style>

From 293fd4e4218c6610664598906c1f38bb6d642781 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 29 Mar 2024 22:29:57 +0900
Subject: [PATCH 12/32] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E8=A7=A3=E9=99=A4?=
 =?UTF-8?q?=E3=82=92=E4=B8=8D=E5=8F=AF=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 56940e05b..7b1bc1665 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -13,6 +13,7 @@
         :options="options"
         label="key"
         :class="$style.select"
+        :clearable="false"
         @option:selected="updateModelValue"
       ></v-select>
     </div>

From 40fab8cbf402cb9557d5b6d633a1a55da4e8bad2 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 29 Mar 2024 22:31:06 +0900
Subject: [PATCH 13/32] =?UTF-8?q?typo=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/ProfileTab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 74bf96e29..f9b512f18 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -8,7 +8,7 @@
         prevent-modal
         :class="$style.icon"
       />
-      <image-upload v-model="newIcon" rounded :class="$style.uploder" />
+      <image-upload v-model="newIcon" rounded :class="$style.uploader" />
     </div>
     <div :class="$style.element">
       <h3 :class="$style.header">表示名</h3>
@@ -208,7 +208,7 @@ const canUpdate = computed(
     left: 36px;
   }
 }
-.uploder {
+.uploader {
   margin-left: 12px;
 }
 .bioContainer {

From 1a44478f7f062eb0e7c74d997a5727ae1c7bfe09 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 29 Mar 2024 22:36:30 +0900
Subject: [PATCH 14/32] npm i --save-dev @types/vue-select

---
 package-lock.json | 41 ++++++++++++++++++++++++++++++++++++++---
 package.json      |  1 +
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9fb3734f1..342aca452 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "@types/serviceworker": "^0.0.67",
         "@types/throttle-debounce": "^5.0.0",
         "@types/turndown": "^5.0.3",
+        "@types/vue-select": "^3.16.8",
         "@types/webappsec-credential-management": "^0.6.4",
         "@typescript-eslint/eslint-plugin": "^6.16.0",
         "@typescript-eslint/parser": "^6.16.0",
@@ -718,9 +719,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -3581,6 +3582,40 @@
       "integrity": "sha512-2PCZA9g/dkeHIGTf6ESMOD3Gz5RMpDzODtvlBbkLAdtKa/yTQDAFudDEVolHjaBUnu8ugd8BeTCWk4x0STnqkA==",
       "dev": true
     },
+    "node_modules/@types/vue-select": {
+      "version": "3.16.8",
+      "resolved": "https://registry.npmjs.org/@types/vue-select/-/vue-select-3.16.8.tgz",
+      "integrity": "sha512-ZBovlBrWf/wnPqCmMw24ryIC7ghQLfIBmkl1qssqBGONdx7yOmi/GLwtPxll/6UwXWGNWMeokleOgVAZPis+Ag==",
+      "dev": true,
+      "dependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-select/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@types/webappsec-credential-management": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/@types/webappsec-credential-management/-/webappsec-credential-management-0.6.4.tgz",
diff --git a/package.json b/package.json
index e262a9d2a..0094c92bc 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@types/serviceworker": "^0.0.67",
     "@types/throttle-debounce": "^5.0.0",
     "@types/turndown": "^5.0.3",
+    "@types/vue-select": "^3.16.8",
     "@types/webappsec-credential-management": "^0.6.4",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",

From 98a546dffb7af9c21791ef29d9f0e1ba95f5f38d Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 29 Mar 2024 23:56:55 +0900
Subject: [PATCH 15/32] =?UTF-8?q?:disabled=3D"option.value=20=3D=3D=3D=20n?=
 =?UTF-8?q?ull"=E3=81=AB=E7=9B=B8=E5=BD=93=E3=81=99=E3=82=8B=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 7b1bc1665..4067553a8 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -12,6 +12,8 @@
         v-model="selectedOption"
         :options="options"
         label="key"
+        reduce="option => option.value"
+        selectable="option => option.value !== null"
         :class="$style.select"
         :clearable="false"
         @option:selected="updateModelValue"
@@ -21,7 +23,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import { randomString } from '/@/lib/basic/randomString'
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
@@ -45,6 +48,10 @@ const emit = defineEmits<{
   (e: 'update:modelValue', _val: string | null): void
 }>()
 
+const value = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
 const selectedOption = ref<Option | null>(
   props.options.find(o => o.value === props.modelValue) ?? null
 )

From 81bf20117720c8c6b60d56795490081c15792fd9 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 00:25:15 +0900
Subject: [PATCH 16/32] =?UTF-8?q?:disabled=3D"option.value=20=3D=3D=3D=20n?=
 =?UTF-8?q?ull"=E3=81=AB=E7=9B=B8=E5=BD=93=E3=81=99=E3=82=8B=E6=A9=9F?=
 =?UTF-8?q?=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85=20reduce=E3=82=92=E7=94=A8?=
 =?UTF-8?q?=E3=81=84=E3=81=A6v-model=E5=91=A8=E3=82=8A=E3=82=92=E6=95=B4?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 21 +++++---------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 4067553a8..fec123799 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -9,21 +9,19 @@
     >
       <v-select
         :id="id"
-        v-model="selectedOption"
+        v-model="selectedOptionValue"
         :options="options"
         label="key"
-        reduce="option => option.value"
-        selectable="option => option.value !== null"
-        :class="$style.select"
+        :reduce="(option: Option) => option.value"
+        :selectable="(option: Option) => option.value !== null"
         :clearable="false"
-        @option:selected="updateModelValue"
+        :class="$style.select"
       ></v-select>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import { randomString } from '/@/lib/basic/randomString'
 import vSelect from 'vue-select'
@@ -48,16 +46,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', _val: string | null): void
 }>()
 
-const value = computed({
-  get: () => props.modelValue,
-  set: v => emit('update:modelValue', v)
-})
-const selectedOption = ref<Option | null>(
-  props.options.find(o => o.value === props.modelValue) ?? null
-)
-const updateModelValue = (selectedOption: Option) => {
-  emit('update:modelValue', selectedOption?.value ?? null)
-}
+const selectedOptionValue = useModelValueSyncer(props, emit)
 const id = randomString()
 </script>
 

From 8fa0c7a7e3a552626cb8a88793dae15f22ce2402 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 13:56:46 +0900
Subject: [PATCH 17/32] =?UTF-8?q?option=E3=81=AE=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index fec123799..8c894200b 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -7,6 +7,7 @@
       :class="$style.selectContainer"
       :data-on-secondary="$boolAttr(onSecondary)"
     >
+      <!-- https://vue-select.org/api/props.html -->
       <v-select
         :id="id"
         v-model="selectedOptionValue"
@@ -69,6 +70,7 @@ const id = randomString()
   }
 }
 .select {
+  // https://vue-select.org/guide/css.html
   width: 100%;
   --vs-controls-color: var(--theme-ui-primary-default);
   &:focus-within {
@@ -76,15 +78,24 @@ const id = randomString()
   }
 
   --vs-dropdown-bg: var(--theme-background-secondary-default);
+  &[data-on-secondary] {
+    --vs-dropdown-bg: var(--theme-background-primary-default);
+  }
   --vs-dropdown-color: var(--theme-ui-primary-default);
   --vs-dropdown-option-color: var(--theme-ui-primary-default);
 
-  --vs-selected-bg: var(--theme-accent-focus-default);
+  --vs-selected-bg: var(--theme-background-primary-default);
+  &[data-on-secondary] {
+    --vs-selected-bg: var(--theme-background-secondary-default);
+  }
   --vs-selected-color: var(--theme-ui-primary-default);
 
   --vs-search-input-color: var(--theme-ui-primary-default);
 
-  --vs-dropdown-option--active-bg: var(--theme-accent-focus-default);
+  --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
+  &[data-on-secondary] {
+    --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
+  }
   --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
 }
 </style>

From 21145bddd8589af89bb6a9fa1d4fc427c19e3b42 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 14:38:43 +0900
Subject: [PATCH 18/32] =?UTF-8?q?border=E3=82=92=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E3=81=AB=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 46 +++++++++-----------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 8c894200b..93e69db1b 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -3,22 +3,18 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <div
-      :class="$style.selectContainer"
+    <!-- https://vue-select.org/api/props.html -->
+    <v-select
+      :id="id"
+      v-model="selectedOptionValue"
+      :options="options"
+      label="key"
+      :reduce="(option: Option) => option.value"
+      :selectable="(option: Option) => option.value !== null"
+      :clearable="false"
       :data-on-secondary="$boolAttr(onSecondary)"
-    >
-      <!-- https://vue-select.org/api/props.html -->
-      <v-select
-        :id="id"
-        v-model="selectedOptionValue"
-        :options="options"
-        label="key"
-        :reduce="(option: Option) => option.value"
-        :selectable="(option: Option) => option.value !== null"
-        :clearable="false"
-        :class="$style.select"
-      ></v-select>
-    </div>
+      :class="$style.select"
+    ></v-select>
   </div>
 </template>
 
@@ -57,23 +53,21 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
-.selectContainer {
-  @include background-secondary;
-  @include size-body1;
+.select {
+  // https://vue-select.org/guide/css.html
   height: 30px;
-  display: flex;
-  align-items: center;
-  border: solid 2px transparent;
-  border-radius: 4px;
+  width: 100%;
+  @include background-secondary;
   &[data-on-secondary] {
     @include background-primary;
   }
-}
-.select {
-  // https://vue-select.org/guide/css.html
-  width: 100%;
+
   --vs-controls-color: var(--theme-ui-primary-default);
+  --vs-border-width: 0px;
+  --vs-border-style: solid;
+  --vs-border-radius: 4px;
   &:focus-within {
+    --vs-border-width: 2px;
     --vs-border-color: var(--theme-accent-focus-default);
   }
 

From 09e0c83174e15744a48e144025614dbba2a5d8dc Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 14:58:00 +0900
Subject: [PATCH 19/32] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 93e69db1b..6376bbe54 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -56,11 +56,11 @@ const id = randomString()
 .select {
   // https://vue-select.org/guide/css.html
   height: 30px;
-  width: 100%;
   @include background-secondary;
   &[data-on-secondary] {
     @include background-primary;
   }
+  --vs-dropdown-z-index: 1000;
 
   --vs-controls-color: var(--theme-ui-primary-default);
   --vs-border-width: 0px;

From c5c83e08d68512bd60665df9f7c2dadffecd8265 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 14:58:18 +0900
Subject: [PATCH 20/32] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 6376bbe54..91e607d69 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -60,7 +60,6 @@ const id = randomString()
   &[data-on-secondary] {
     @include background-primary;
   }
-  --vs-dropdown-z-index: 1000;
 
   --vs-controls-color: var(--theme-ui-primary-default);
   --vs-border-width: 0px;

From 846bfa5cb46f60736c127b0e9fa462fd790a891e Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 17:38:58 +0900
Subject: [PATCH 21/32] =?UTF-8?q?css=E8=AA=BF=E6=95=B4=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 47 ++++++++++++++++----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 91e607d69..d8862a00b 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -55,21 +55,50 @@ const id = randomString()
 }
 .select {
   // https://vue-select.org/guide/css.html
-  height: 30px;
+  @include color-ui-primary;
   @include background-secondary;
   &[data-on-secondary] {
     @include background-primary;
   }
+  border-radius: 4px;
+  border: solid 2px transparent;
 
-  --vs-controls-color: var(--theme-ui-primary-default);
-  --vs-border-width: 0px;
+  // Search Input
+  .vs__search {
+    @include background-secondary;
+    &[data-on-secondary] {
+      @include background-primary;
+    }
+  }
+  --vs-search-input-bg: var(--theme-background-secondary-default);
+  &[data-on-secondary] {
+    --vs-search-input-bg: var(--theme-background-primary-default);
+  }
+  --vs-search-input-color: var(--theme-ui-primary-default);
+
+  // Font
+  --vs-font-size: 1rem;
+
+  // Borders
+  --vs-border-color: transparent;
+  --vs-border-width: 2px;
   --vs-border-style: solid;
   --vs-border-radius: 4px;
   &:focus-within {
-    --vs-border-width: 2px;
     --vs-border-color: var(--theme-accent-focus-default);
   }
 
+  // Controls
+  --vs-controls-color: var(--theme-ui-primary-default);
+
+  // Selected
+  --vs-selected-bg: var(--theme-background-secondary-default);
+  &[data-on-secondary] {
+    --vs-selected-bg: var(--theme-background-primary-default);
+  }
+  --vs-selected-color: var(--theme-ui-primary-default);
+
+  // Dropdown
   --vs-dropdown-bg: var(--theme-background-secondary-default);
   &[data-on-secondary] {
     --vs-dropdown-bg: var(--theme-background-primary-default);
@@ -77,14 +106,14 @@ const id = randomString()
   --vs-dropdown-color: var(--theme-ui-primary-default);
   --vs-dropdown-option-color: var(--theme-ui-primary-default);
 
-  --vs-selected-bg: var(--theme-background-primary-default);
+  // Options
+  --vs-dropdown-option-bg: var(--theme-background-secondary-default);
   &[data-on-secondary] {
-    --vs-selected-bg: var(--theme-background-secondary-default);
+    --vs-dropdown-option-bg: var(--theme-background-primary-default);
   }
-  --vs-selected-color: var(--theme-ui-primary-default);
-
-  --vs-search-input-color: var(--theme-ui-primary-default);
+  --vs-dropdown-option-color: var(--theme-ui-primary-default);
 
+  // Active State
   --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
   &[data-on-secondary] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);

From 566c6e9bca0981840895619a672e81119f03fe0c Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 18:02:16 +0900
Subject: [PATCH 22/32] =?UTF-8?q?css=E3=82=92=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 24 --------------------
 1 file changed, 24 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index d8862a00b..2b373b062 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -64,16 +64,6 @@ const id = randomString()
   border: solid 2px transparent;
 
   // Search Input
-  .vs__search {
-    @include background-secondary;
-    &[data-on-secondary] {
-      @include background-primary;
-    }
-  }
-  --vs-search-input-bg: var(--theme-background-secondary-default);
-  &[data-on-secondary] {
-    --vs-search-input-bg: var(--theme-background-primary-default);
-  }
   --vs-search-input-color: var(--theme-ui-primary-default);
 
   // Font
@@ -92,10 +82,6 @@ const id = randomString()
   --vs-controls-color: var(--theme-ui-primary-default);
 
   // Selected
-  --vs-selected-bg: var(--theme-background-secondary-default);
-  &[data-on-secondary] {
-    --vs-selected-bg: var(--theme-background-primary-default);
-  }
   --vs-selected-color: var(--theme-ui-primary-default);
 
   // Dropdown
@@ -103,21 +89,11 @@ const id = randomString()
   &[data-on-secondary] {
     --vs-dropdown-bg: var(--theme-background-primary-default);
   }
-  --vs-dropdown-color: var(--theme-ui-primary-default);
-  --vs-dropdown-option-color: var(--theme-ui-primary-default);
-
-  // Options
-  --vs-dropdown-option-bg: var(--theme-background-secondary-default);
-  &[data-on-secondary] {
-    --vs-dropdown-option-bg: var(--theme-background-primary-default);
-  }
-  --vs-dropdown-option-color: var(--theme-ui-primary-default);
 
   // Active State
   --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
   &[data-on-secondary] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
   }
-  --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
 }
 </style>

From 7228d7df2369d378a1bcfb3a91b7192a9543d1a0 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 18:09:04 +0900
Subject: [PATCH 23/32] =?UTF-8?q?css=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 2b373b062..3ad6d50d1 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -95,5 +95,6 @@ const id = randomString()
   &[data-on-secondary] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
   }
+  --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
 }
 </style>

From 00f0f621bada7690d74c252ba30d5a8a51188b17 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 18:34:14 +0900
Subject: [PATCH 24/32] =?UTF-8?q?border=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 3ad6d50d1..0c2cb8482 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -61,7 +61,6 @@ const id = randomString()
     @include background-primary;
   }
   border-radius: 4px;
-  border: solid 2px transparent;
 
   // Search Input
   --vs-search-input-color: var(--theme-ui-primary-default);

From 01993311b2718d3ffc9f6f0dd91bc9a7f7a45b09 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 18:47:02 +0900
Subject: [PATCH 25/32] =?UTF-8?q?=E9=AB=98=E3=81=95=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 0c2cb8482..c91e0a31e 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -61,12 +61,14 @@ const id = randomString()
     @include background-primary;
   }
   border-radius: 4px;
+  height: 30px;
 
   // Search Input
   --vs-search-input-color: var(--theme-ui-primary-default);
 
   // Font
   --vs-font-size: 1rem;
+  --vs-line-height: 1;
 
   // Borders
   --vs-border-color: transparent;

From c57394ecd7456af350cc02348f65c14dbb4c847c Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 19:01:00 +0900
Subject: [PATCH 26/32] =?UTF-8?q?control=E3=81=AE=E8=89=B2=E3=82=92?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index c91e0a31e..0ad666f01 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -80,7 +80,7 @@ const id = randomString()
   }
 
   // Controls
-  --vs-controls-color: var(--theme-ui-primary-default);
+  --vs-controls-color: var(--theme-ui-secondary-default);
 
   // Selected
   --vs-selected-color: var(--theme-ui-primary-default);

From 530394deb4fb71fa69f2015d1adc9a5138ca7045 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sat, 30 Mar 2024 19:16:23 +0900
Subject: [PATCH 27/32] =?UTF-8?q?search=20input=E3=81=AE=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 0ad666f01..673a008fa 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -65,6 +65,9 @@ const id = randomString()
 
   // Search Input
   --vs-search-input-color: var(--theme-ui-primary-default);
+  :global(.vs__search) {
+    height: 1rem;
+  }
 
   // Font
   --vs-font-size: 1rem;

From ccd4ad2cb8c412f199cf4c81f599660b07f956df Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 2 Apr 2024 01:17:34 +0900
Subject: [PATCH 28/32] =?UTF-8?q?=E8=83=8C=E6=99=AF=E3=83=BB=E6=A4=9C?=
 =?UTF-8?q?=E7=B4=A2=E3=81=AE=E5=85=A5=E5=8A=9B=E3=83=BB=E3=83=9C=E3=83=BC?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=83=BB=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7?=
 =?UTF-8?q?=E3=83=B3=E3=81=8C=E3=81=9A=E3=82=8C=E3=81=A6=E3=81=84=E3=81=9F?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 673a008fa..235834345 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -53,9 +53,8 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
+// https://vue-select.org/guide/css.html
 .select {
-  // https://vue-select.org/guide/css.html
-  @include color-ui-primary;
   @include background-secondary;
   &[data-on-secondary] {
     @include background-primary;
@@ -63,15 +62,16 @@ const id = randomString()
   border-radius: 4px;
   height: 30px;
 
-  // Search Input
-  --vs-search-input-color: var(--theme-ui-primary-default);
+  :global(.vs__dropdown-toggle),
+  :global(.vs__selected-options),
+  :global(.vs__actions),
+  :global(.vs__selected),
   :global(.vs__search) {
-    height: 1rem;
+    height: 100%;
   }
 
-  // Font
-  --vs-font-size: 1rem;
-  --vs-line-height: 1;
+  // Search Input
+  --vs-search-input-color: var(--theme-ui-primary-default);
 
   // Borders
   --vs-border-color: transparent;

From 01ee435db6550b5d93ed317b9f22872aa61458b4 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 5 Apr 2024 14:28:08 +0900
Subject: [PATCH 29/32] =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 14 +++++++-------
 src/views/Settings/ProfileTab.vue            |  2 ++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 235834345..02d8e13f2 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -12,7 +12,7 @@
       :reduce="(option: Option) => option.value"
       :selectable="(option: Option) => option.value !== null"
       :clearable="false"
-      :data-on-secondary="$boolAttr(onSecondary)"
+      :background="background"
       :class="$style.select"
     ></v-select>
   </div>
@@ -25,17 +25,17 @@ import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
 
 type Option = { key: string; value: string | null }
+type Background = 'primary' | 'secondary'
 const props = withDefaults(
   defineProps<{
     modelValue?: string | null
-    onSecondary?: boolean
+    background?: Background
     options: Array<Option>
     label?: string
   }>(),
   {
     modelValue: '',
-    onSecondary: false,
-    activateSearch: false
+    background: 'secondary',
   }
 )
 
@@ -56,7 +56,7 @@ const id = randomString()
 // https://vue-select.org/guide/css.html
 .select {
   @include background-secondary;
-  &[data-on-secondary] {
+  &[background=primary] {
     @include background-primary;
   }
   border-radius: 4px;
@@ -90,13 +90,13 @@ const id = randomString()
 
   // Dropdown
   --vs-dropdown-bg: var(--theme-background-secondary-default);
-  &[data-on-secondary] {
+  &[background=primary] {
     --vs-dropdown-bg: var(--theme-background-primary-default);
   }
 
   // Active State
   --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
-  &[data-on-secondary] {
+  &[background=primary] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
   }
   --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index f9b512f18..2286eee47 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -121,6 +121,7 @@ const useProfileUpdate = (
 
       addSuccessToast('プロフィールを更新しました')
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error('プロフィールの更新に失敗しました', e)
 
       addErrorToast(formatResizeError(e, 'プロフィールの更新に失敗しました'))
@@ -155,6 +156,7 @@ import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
 
 const { detail: detailMayBeUndefined } = useMeStore()
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const detail = computed(() => detailMayBeUndefined.value!)
 
 // ホームチャンネルの選択+ひとことのレンダリングに必要

From 08d37afdda81e30d117951b0c9e8260b8f1c9935 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Fri, 5 Apr 2024 16:14:10 +0900
Subject: [PATCH 30/32] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?=
 =?UTF-8?q?=E3=83=83=E3=82=BF=E3=81=A8=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 02d8e13f2..2655c96c5 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -35,7 +35,7 @@ const props = withDefaults(
   }>(),
   {
     modelValue: '',
-    background: 'secondary',
+    background: 'secondary'
   }
 )
 
@@ -55,13 +55,13 @@ const id = randomString()
 }
 // https://vue-select.org/guide/css.html
 .select {
+  // background
   @include background-secondary;
-  &[background=primary] {
+  &[background='primary'] {
     @include background-primary;
   }
   border-radius: 4px;
   height: 30px;
-
   :global(.vs__dropdown-toggle),
   :global(.vs__selected-options),
   :global(.vs__actions),
@@ -90,13 +90,13 @@ const id = randomString()
 
   // Dropdown
   --vs-dropdown-bg: var(--theme-background-secondary-default);
-  &[background=primary] {
+  &[background='primary'] {
     --vs-dropdown-bg: var(--theme-background-primary-default);
   }
 
   // Active State
   --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
-  &[background=primary] {
+  &[background='primary'] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
   }
   --vs-dropdown-option--active-color: var(--theme-ui-primary-default);

From 3fdd33c4c23eb4ac7784148b019cc1f1a84ed7cb Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sun, 7 Apr 2024 15:38:24 +0900
Subject: [PATCH 31/32] =?UTF-8?q?=E5=B1=9E=E6=80=A7=E3=81=AE=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 2655c96c5..bd97e678f 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -12,7 +12,7 @@
       :reduce="(option: Option) => option.value"
       :selectable="(option: Option) => option.value !== null"
       :clearable="false"
-      :background="background"
+      :data-background="background"
       :class="$style.select"
     ></v-select>
   </div>

From a56db2b7a78f4d1cf5006cbf9db2c013727a6fae Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Sun, 7 Apr 2024 16:15:38 +0900
Subject: [PATCH 32/32] =?UTF-8?q?style=E3=82=92data-background=E3=81=AB?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormSelectorFilterable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index bd97e678f..ff7bf10c8 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -57,7 +57,7 @@ const id = randomString()
 .select {
   // background
   @include background-secondary;
-  &[background='primary'] {
+  &[data-background='primary'] {
     @include background-primary;
   }
   border-radius: 4px;
@@ -90,13 +90,13 @@ const id = randomString()
 
   // Dropdown
   --vs-dropdown-bg: var(--theme-background-secondary-default);
-  &[background='primary'] {
+  &[data-background='primary'] {
     --vs-dropdown-bg: var(--theme-background-primary-default);
   }
 
   // Active State
   --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
-  &[background='primary'] {
+  &[data-background='primary'] {
     --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
   }
   --vs-dropdown-option--active-color: var(--theme-ui-primary-default);