feat(frontend): 設定の検索 #15505

syuilo · 2025-02-16T03:51:50Z

What

Resolve #13189

TODO

コントロールパネル
設定画面のHMRが効かない
日本語対応の検索(ひらがなカタカナ区別しない等)
IME確定前でも検索する

Why

Additional info (optional)

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Add story of storybook
(If needed) Update CHANGELOG.md
(If possible) Add tests

codecov · 2025-02-16T03:53:56Z

Codecov Report

Attention: Patch coverage is 1.84382% with 3620 lines in your changes missing coverage. Please review.

Project coverage is 14.27%. Comparing base (a3d236c) to head (ae53a40).
Report is 701 commits behind head on develop.

Files with missing lines	Patch %	Lines
...es/frontend/lib/vite-plugin-create-search-index.ts	0.10%	997 Missing ⚠️
...ntend/src/scripts/autogen/settings-search-index.ts	0.12%	794 Missing ⚠️
...ckages/frontend/src/pages/settings/preferences.vue	0.00%	362 Missing and 1 partial ⚠️
...ackages/frontend/src/pages/settings/appearance.vue	0.00%	243 Missing and 1 partial ⚠️
packages/frontend/src/pages/settings/privacy.vue	0.00%	171 Missing ⚠️
...ackages/frontend/src/pages/settings/mute-block.vue	0.00%	136 Missing ⚠️
...ages/frontend/src/pages/settings/import-export.vue	0.00%	128 Missing ⚠️
packages/frontend/src/pages/settings/profile.vue	0.00%	126 Missing ⚠️
packages/frontend/src/components/MkSuperMenu.vue	0.00%	115 Missing ⚠️
packages/frontend/src/pages/settings/other.vue	0.00%	81 Missing ⚠️
... and 11 more

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #15505       +/-   ##
============================================
- Coverage    41.74%   14.27%   -27.48%     
============================================
  Files         1549      779      -770     
  Lines       196555    71368   -125187     
  Branches      2767     1243     -1524     
============================================
- Hits         82055    10187    -71868     
+ Misses      113939    60758    -53181     
+ Partials       561      423      -138

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

syuilo · 2025-02-16T03:57:24Z

地道に設定項目のインデックス化をしてくださる方を募集しています

syuilo · 2025-02-16T03:59:34Z

検索の対象にしたい要素(設定項目)を<MkSearchMarker markerId="UUID">で囲む
packages/frontend/src/scripts/settings-index.ts にインデックスを定義する

anatawa12 · 2025-02-16T05:00:16Z

今後設定項目増えたときも大変だし項目移動したとき更新を忘れる気がするのでなんか.vueファイルを探索して自動でインデックス作りたい気がする

MkSearchMarkerのuuidもできたら自動で埋めたい

syuilo · 2025-02-16T08:53:19Z

vueファイルの解析は実装が困難かも

どのように項目ごとの(i18n対応した)検索キーワードを定義するか？

syuilo · 2025-02-16T08:54:58Z

windowsの設定とかiosの設定の検索は自分が確認した感じインデックスを手動で用意する方式っぽい挙動してた(過去のバージョンで削除された機能が検索だと出てきたり(押しても何も起こらない)、逆に結果に漏れがあったり)

syuilo · 2025-02-16T08:59:51Z

ベストプラクティス募集中

anatawa12 · 2025-02-16T09:02:11Z

misskeyjsみたいな事前生成を考えてたのでMkSearchMarkerを正規表現マッチとかでできないかなと思ってたのですがむりかなぁ

アンジャッシュしてる気もしてるので明示するとsettings-index.tsだけを自動生成してMkSearchMarkerは手動で振るのを考えてました。locationLabelとキーワード系はMkSearchMarkerのatrtributeとかにある程度手動で振ったうえで、ページタイトルからも勝手に持ってきて
MkSearchMarkerも自動生成できるといいのですが難しいともうので

syuilo · 2025-02-16T09:03:27Z

locationLabelとキーワード系はMkSearchMarkerのatrtributeとかにある程度手動で振ったうえで

これが難しい気がするのよね
キーワードは静的に決定できない(ユーザーの言語によって変わるため)

samunohito · 2025-02-16T09:05:22Z

①「プロフィールの名前だけを変えるコンポーネント」を用意する
↓これを単独のコンポーネントにするイメージ

<MkInput v-model="profile.name" :max="30" manualSave :mfmAutocomplete="['emoji']">
  <template #label>{{ i18n.ts._profile.name }}</template>
</MkInput>

②既存のページコンポーネントの中身を①に置き換える（今までと同じ機能を提供させるため）
③検索用キーワード（i18n対応）とコンポーネントのレンダリング用関数の組み合わたオブジェクト配列をインデックスとして用意し、検索時はキーワードにヒットしたやつのみレンダリングするとか…

Sayamame-beans · 2025-02-16T09:05:28Z

全言語いずれもヒットするようになれば影響なしです…?

anatawa12 · 2025-02-16T09:05:28Z

ソースコードを解析して属性上のi18n.ts.someThingをsettings-index.tsコピペできればいいかなと考えてました

もしくはi18n.ts.somethingの戻り値にidをもたせる

syuilo · 2025-02-16T09:06:14Z

ソースコードを解析して属性上のi18n.ts.someThingをsettings-index.tsコピペできればいいかなと考えてました

これ考えたけど、(ないとは思うけど)コンポーネント側が i18n という変数名以外でインポートしてたら壊れるなと

samunohito · 2025-02-16T09:06:22Z

（いずれにせよ、手で紐づけは現実的ではなく、動的なアプローチじゃないと厳しい認識）

syuilo · 2025-02-16T09:06:51Z

ソースコードを解析して属性上のi18n.ts.someThingをsettings-index.tsコピペできればいいかなと考えてました

これ考えたけど、(ないとは思うけど)コンポーネント側が i18n という変数名以外でインポートしてたら壊れるなと

壊れたら壊れたでビルド時にエラーになって気付けそうだから別に良いか

anatawa12 · 2025-02-16T09:07:52Z

壊れたら気付けると思いますし、'@/i18n.js'で全ファイルgrepしてi18n以外の場合を探して(またそれこそlintして)上げればいいかなと

syuilo · 2025-02-16T09:07:58Z

というわけでマニュアルインデックス定義は廃止して

	<MkSearchMarker
		:locationLabel="[i18n.ts.privacy, i18n.ts.makeFollowManuallyApprove]"
		:icon="'ti ti-lock-open'"
		:keywords="['follow', 'lock', i18n.ts.lockedAccountInfo]"
		:path="'/settings/privacy'"
	>
		<MkSwitch v-model="isLocked" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
	</MkSearchMarker>

でやっていくことにしました

syuilo · 2025-02-16T09:10:32Z

vueファイルを解析してインデックスを生成する処理の実装を行ってくださる方を募集しています
MkSearchMarkerを各検索対象項目に設置していく作業を行ってくださる方を募集しています

anatawa12 · 2025-02-16T09:10:42Z

:pathも現状packages/frontend/src/pages/settings/(ページのパス名).(分けてる場合の名前).vueになってるので省略可能(違う場合にのみ指定)にして良さそう。

anatawa12 · 2025-02-16T09:11:21Z

vueファイルを解析してインデックスを生成する処理の実装を行ってくださる方を募集しています

着手未定だけど興味はあります

syuilo · 2025-02-16T09:12:39Z

正規表現だと難しい可能性があるからXMLとかHTMLパーサーを使って解析すると柔軟にできそう

syuilo · 2025-02-16T09:13:11Z

vue独自の構文とかは存在しないため

anatawa12 · 2025-02-16T09:13:18Z

正規表現だと難しい可能性があるからXMLとかHTMLパーサーを使って解析すると柔軟にできそう

これはそうだと思ってます

syuilo · 2025-02-16T10:36:13Z

動的に設定項目が生成される(v-for等)ケースは対応が困難かも

syuilo · 2025-02-16T10:37:08Z

例えばサウンドの設定は種類ごとにv-forで設定項目が動的に生成されている

kakkokari-gtyih · 2025-02-16T10:39:57Z

例えばサウンドの設定は種類ごとにv-forで設定項目が動的に生成されている

正確にそこを指し示すことができなかったとしてもページに飛ばすことはできるだろうから、キーワードにサウンド名を全部入れるのでとりあえずは良い気はする

…y-ges enhance: 設定の検索で上下矢印を使用することで検索結果を移動できるように

…ge-window fix(frontend): PageWindowでSearchMarkerが動作するように

…ghlight-time enhance(frontend): SearchMarkerの点滅を一定時間で止める

kakkokari-gtyih · 2025-03-05T10:05:19Z

インデックス更新のときに出る大量のログどうにかしたいわね

syuilo · 2025-03-05T10:23:43Z

コントロールパネルのインデックス化を担当してくださる人材を募集しています

…duce-logs enhance(frontend): 検索インデックス作成時のログを削減

syuilo · 2025-03-06T14:14:46Z

コンパネなどは追々

syuilo · 2025-03-06T14:15:27Z

🙏

Sayamame-beans · 2025-03-06T14:51:29Z

コンパネなどは追々

後で(機運が来れば)実装される/出来るものは、issueにしておいてもらえると助かるかもしれません 🙏 (忘れてしまいそうなので… & それを見た誰かが作業出来るかもなので)

* wip * wip * wip * test * wip rollup pluginでsearchIndexの情報生成 * wip * SPDX * wip: markerIdを自動付与 * rollupでビルド時・devモード時に毎回uuidを生成するように * 開発サーバーでだけ必要な挙動は開発サーバーのみで * 条件が逆 * wip: childrenの生成 * update comment * update comment * rename auto generated file * hashをパスと行数から決定 * Update privacy.vue * Update privacy.vue * wip * Update general.vue * Update general.vue * wip * wip * Update SearchMarker.vue * wip * Update profile.vue * Update mute-block.vue * Update mute-block.vue * Update general.vue * Update general.vue * childrenがduplicate key errorを吐く問題をいったん解決 * マーカーの形を成形 * loggerを置きかえ * とりあえず省略記法に対応 * Refactor and Format codes * wip * Update settings-search-index.ts * wip * wip * とりあえず不確定要因の仮置きidを削除 * hashの生成を正規化（絶対パスになっていたのを緩和） * pathの入力を省略可能に * adminでもパス生成できるように * Update settings-search-index.ts * Update privacy.vue * wip * build searchIndex * wip * build * Update general.vue * build * Update sounds.vue * build * build * Update sounds.vue * 🎨 * 🎨 * Update privacy.vue * Update privacy.vue * Update security.vue * create-search-indexを多少改善 * build * Update 2fa.vue * wip * 必ずtransformCodeCacheを利用するように, キャッシュの明確な受け渡しを定義 * キャッシュはdevServerでなくても更新 * Revert "wip" This reverts commit 41bffd3. * inlining * wip * Update theme.vue * 🎨 * wip normalize * Update theme.vue * キャッシュのパス変換 * build * wip * wip * Update SearchMarker.vue * i18n.ts['key'] の形式が取り出せない問題のFix * build * 仮でpath入れ * 必ず絶対パスが使われるように * wip * 🎨 * storybookビルド時はcreateSearchIndexをしない * inliningの構造化 * format code * Update index.vue * wip * wip * 🎨 * wip * wip * wip * wip * wip * wip * wip * wip * clean up * Update navbar.vue * enhance: 検索で上下矢印を使用することで検索結果を移動できるように * refactor * fix(frontend): PageWindowでSearchMarkerが動作するように * enhance(frontend): SearchMarkerの点滅を一定時間で止める * lint fix * fix: 子要素監視が抜けていたのを修正 * アニメーションの回数はCSSで制御するように * refactor * enhance(frontend): 検索インデックス作成時のログを削減 * revert * fix * fix --------- Co-authored-by: tai-cha <dev@taichan.site> Co-authored-by: taichan <40626578+tai-cha@users.noreply.github.com> Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>

tai-cha · 2025-03-07T03:59:46Z

インデックス更新のときに出る大量のログどうにかしたいわね

これ実装落ち着いたら消そうと思ってて忘れていたやつなので感謝 🙏

* wip * wip * wip * test * wip rollup pluginでsearchIndexの情報生成 * wip * SPDX * wip: markerIdを自動付与 * rollupでビルド時・devモード時に毎回uuidを生成するように * 開発サーバーでだけ必要な挙動は開発サーバーのみで * 条件が逆 * wip: childrenの生成 * update comment * update comment * rename auto generated file * hashをパスと行数から決定 * Update privacy.vue * Update privacy.vue * wip * Update general.vue * Update general.vue * wip * wip * Update SearchMarker.vue * wip * Update profile.vue * Update mute-block.vue * Update mute-block.vue * Update general.vue * Update general.vue * childrenがduplicate key errorを吐く問題をいったん解決 * マーカーの形を成形 * loggerを置きかえ * とりあえず省略記法に対応 * Refactor and Format codes * wip * Update settings-search-index.ts * wip * wip * とりあえず不確定要因の仮置きidを削除 * hashの生成を正規化（絶対パスになっていたのを緩和） * pathの入力を省略可能に * adminでもパス生成できるように * Update settings-search-index.ts * Update privacy.vue * wip * build searchIndex * wip * build * Update general.vue * build * Update sounds.vue * build * build * Update sounds.vue * 🎨 * 🎨 * Update privacy.vue * Update privacy.vue * Update security.vue * create-search-indexを多少改善 * build * Update 2fa.vue * wip * 必ずtransformCodeCacheを利用するように, キャッシュの明確な受け渡しを定義 * キャッシュはdevServerでなくても更新 * Revert "wip" This reverts commit 41bffd3. * inlining * wip * Update theme.vue * 🎨 * wip normalize * Update theme.vue * キャッシュのパス変換 * build * wip * wip * Update SearchMarker.vue * i18n.ts['key'] の形式が取り出せない問題のFix * build * 仮でpath入れ * 必ず絶対パスが使われるように * wip * 🎨 * storybookビルド時はcreateSearchIndexをしない * inliningの構造化 * format code * Update index.vue * wip * wip * 🎨 * wip * wip * wip * wip * wip * wip * wip * wip * clean up * Update navbar.vue * enhance: 検索で上下矢印を使用することで検索結果を移動できるように * refactor * fix(frontend): PageWindowでSearchMarkerが動作するように * enhance(frontend): SearchMarkerの点滅を一定時間で止める * lint fix * fix: 子要素監視が抜けていたのを修正 * アニメーションの回数はCSSで制御するように * refactor * enhance(frontend): 検索インデックス作成時のログを削減 * revert * fix * fix --------- Co-authored-by: tai-cha <dev@taichan.site> Co-authored-by: taichan <40626578+tai-cha@users.noreply.github.com> Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>

wip

a37a945

github-actions bot added the packages/frontend Client side specific issue/PR label Feb 16, 2025

wip

534a957

wip

83fc29f

syuilo and others added 10 commits March 5, 2025 18:11

Merge pull request #15601 from kakkokari-gtyih/enh-settings-search-ke…

13aa10c

…y-ges enhance: 設定の検索で上下矢印を使用することで検索結果を移動できるように

refactor

0fc6b73

fix(frontend): PageWindowでSearchMarkerが動作するように

a9794e6

enhance(frontend): SearchMarkerの点滅を一定時間で止める

41d4b34

lint fix

f0b52d6

fix: 子要素監視が抜けていたのを修正

a08adc1

Merge pull request #15602 from kakkokari-gtyih/fix-settings-search-pa…

4c650f1

…ge-window fix(frontend): PageWindowでSearchMarkerが動作するように

Merge branch 'settings-search' into enh-settings-search-highlight-time

e2dd906

アニメーションの回数はCSSで制御するように

81051cf

Merge pull request #15603 from kakkokari-gtyih/enh-settings-search-hi…

14ddc82

…ghlight-time enhance(frontend): SearchMarkerの点滅を一定時間で止める

refactor

2d03981

kakkokari-gtyih and others added 5 commits March 5, 2025 19:34

enhance(frontend): 検索インデックス作成時のログを削減

f6e237e

revert

7327b3a

fix

d888021

fix

9f9eb5a

Merge pull request #15604 from kakkokari-gtyih/enh-settings-search-re…

575a67e

…duce-logs enhance(frontend): 検索インデックス作成時のログを削減

kakkokari-gtyih modified the milestones: v2025.3.0, v2025.3.1 Mar 5, 2025

Merge branch 'develop' into settings-search

ae53a40

syuilo marked this pull request as ready for review March 6, 2025 14:14

syuilo merged commit 0214a00 into develop Mar 6, 2025
24 of 26 checks passed

syuilo deleted the settings-search branch March 6, 2025 14:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): 設定の検索 #15505

feat(frontend): 設定の検索 #15505

syuilo commented Feb 16, 2025 •

edited

Loading

codecov bot commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

samunohito commented Feb 16, 2025

Sayamame-beans commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025

samunohito commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 •

edited

Loading

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

kakkokari-gtyih commented Feb 16, 2025

kakkokari-gtyih commented Mar 5, 2025

syuilo commented Mar 5, 2025

syuilo commented Mar 6, 2025

syuilo commented Mar 6, 2025

Sayamame-beans commented Mar 6, 2025

tai-cha commented Mar 7, 2025

feat(frontend): 設定の検索 #15505

feat(frontend): 設定の検索 #15505

Conversation

syuilo commented Feb 16, 2025 • edited Loading

What

Why

Additional info (optional)

Checklist

codecov bot commented Feb 16, 2025 • edited Loading

Codecov Report

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 • edited Loading

syuilo commented Feb 16, 2025 • edited Loading

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

samunohito commented Feb 16, 2025

Sayamame-beans commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 • edited Loading

syuilo commented Feb 16, 2025

samunohito commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025 • edited Loading

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025 • edited Loading

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

anatawa12 commented Feb 16, 2025

syuilo commented Feb 16, 2025

syuilo commented Feb 16, 2025

kakkokari-gtyih commented Feb 16, 2025

kakkokari-gtyih commented Mar 5, 2025

syuilo commented Mar 5, 2025

syuilo commented Mar 6, 2025

syuilo commented Mar 6, 2025

Sayamame-beans commented Mar 6, 2025

tai-cha commented Mar 7, 2025

syuilo commented Feb 16, 2025 •

edited

Loading

codecov bot commented Feb 16, 2025 •

edited

Loading

anatawa12 commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025 •

edited

Loading

anatawa12 commented Feb 16, 2025 •

edited

Loading

syuilo commented Feb 16, 2025 •

edited

Loading

anatawa12 commented Feb 16, 2025 •

edited

Loading