Skip to content

Feat/channel search tree view#5070

Open
ue-creates wants to merge 10 commits intomasterfrom
feat/channel-search-tree-view
Open

Feat/channel search tree view#5070
ue-creates wants to merge 10 commits intomasterfrom
feat/channel-search-tree-view

Conversation

@ue-creates
Copy link

@ue-creates ue-creates commented Feb 12, 2026

概要

チャンネル検索結果に他の部分と同様のチャンネルツリーを表示するようにしました。

なぜこの PR を入れたいのか

目的のチャンネルまで行きやすくするため。
(チャンネル名が重複してチャンネル検索が行いづらい場合、その親チャンネルを検索し、そこに飛んでから子チャンネルに飛ぶ必要があったためその手間を減らしたい。)

動作確認の手順

実際に検索を行い、目視で確認した。

UI 変更部分のスクリーンショット

before

image

after

image image

PR を出す前の確認事項

  • (機能の追加なら)追加することの合意がチームで取れている
    • 取れていない場合はチェックを外して PR にすれば OK
  • 動作確認ができている
  • 自分で一度コードを眺めて自分的に問題はなさそう

見てほしいところ・聞きたいことなど

(自分の環境下では大丈夫だったのですが、)検索が遅くなりすぎてないかの確認もお願いしたいです。

Summary by CodeRabbit

  • New Features

    • チャネル要素にトピック表示のオン/オフを追加。親から子へ伝播でき、子ツリーで抑制可能です。
    • 検索結果表示でチャネルリストをツリー表示に切替え、フィルタ済みの部分木を表示します。
  • Style

    • トピック表示周りのレイアウトとマージンを調整し、表示位置を改善しました。
  • Other

    • ツリー生成時の並び替えを制御可能にし、表示挙動とパフォーマンスを改善しました。

@ue-creates ue-creates self-assigned this Feb 12, 2026
@github-actions
Copy link

@coderabbitai
Copy link

coderabbitai bot commented Feb 12, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8e92d31 and 86595a4.

📒 Files selected for processing (1)
  • src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue

📝 Walkthrough

Walkthrough

チャンネル表示にトピック表示制御を追加するため、ComponentにshowTopic/preventChildTopicを導入し、ChannelElementが条件付きでChannelElementTopicをマウント。検索レンダリングをChannelTreeへ切替え、constructTreeにソート制御パラメータを追加。

Changes

Cohort / File(s) Summary
トピック表示制御
src/components/Main/NavigationBar/ChannelList/ChannelElement.vue, src/components/Main/NavigationBar/ChannelList/ChannelElementTopic.vue, src/components/Main/NavigationBar/ChannelList/ChannelTree.vue
showTopic?: boolean を追加。ChannelElement.vueChannelElementTopicv-if="showTopic" で条件レンダリングし、data-is-topic-shown 属性を追加。ChannelElementTopic.vue にマージン系スタイルを追加。ChannelTree.vueshowTopic と子伝搬抑止用 preventChildTopic?: boolean を追加し、子へプロップスを伝播。
チャンネル表示切替 / レンダリング経路
src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue, src/components/Main/NavigationBar/ChannelList/ChannelList.vue
検索時のレンダリングで ChannelListChannelTreeComponent に置換し、filteredChannelTree 計算プロパティを追加して部分ツリーを構築して渡す。ChannelList.vue ではトピック関連のクラス/CSSを削除。
ツリー構成ロジック
src/lib/channelTree.ts
constructTree にオプション shouldSort?: boolean(デフォルト true)を追加し、子ノードソートを条件化。constructTreeFromIds からはソート無効で呼び出すよう変更。

Sequence Diagram(s)

sequenceDiagram
    participant ChannelsTab as ChannelsTab
    participant ChannelTree as ChannelTreeComponent
    participant ChannelElement as ChannelElement
    participant Topic as ChannelElementTopic

    ChannelsTab->>ChannelTree: render(channels or filteredChannelTree, showTopic?, preventChildTopic?)
    ChannelTree->>ChannelElement: render node (passes showTopic && !preventChildTopic)
    ChannelElement->>ChannelElement: evaluate showTopic
    alt showTopic == true
        ChannelElement->>Topic: mount (prop: channel-id)
    else showTopic == false
        ChannelElement-->>Topic: not mounted
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • Takeno-hito
  • uni-kakurenbo
  • otukado
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed PR タイトル「Feat/channel search tree view」は、チャンネル検索結果にツリービューを表示する機能追加という主要な変更を的確に表現している。
Description check ✅ Passed PR 説明書は必須セクション(概要、理由、動作確認手順、UI 変更スクリーンショット、事前確認事項)をすべて含み、十分な情報が記載されている。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/channel-search-tree-view

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Feb 12, 2026

Codecov Report

❌ Patch coverage is 90.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 62.64%. Comparing base (0e4b6ba) to head (86595a4).
⚠️ Report is 16 commits behind head on master.

Files with missing lines Patch % Lines
src/lib/channelTree.ts 90.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #5070      +/-   ##
==========================================
+ Coverage   62.59%   62.64%   +0.04%     
==========================================
  Files         108      108              
  Lines        3096     3100       +4     
  Branches      629      632       +3     
==========================================
+ Hits         1938     1942       +4     
  Misses       1048     1048              
  Partials      110      110              

☔ 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.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/lib/channelTree.ts (1)

68-84: ⚠️ Potential issue | 🟠 Major

shouldSort が再帰呼び出しへ伝播していません。
shouldSort=false の場合でも子孫でソートが実行され、順序保持の意図が崩れます。再帰呼び出しにも shouldSort を渡してください。

🧩 修正案
-      const result = constructTree(child, channelEntities, subscribedChannels)
+      const result = constructTree(
+        child,
+        channelEntities,
+        subscribedChannels,
+        shouldSort
+      )
🤖 Fix all issues with AI agents
In `@src/components/Main/NavigationBar/NavigationContent/ChannelsTab.vue`:
- Around line 133-140: filteredChannelTree currently returns
constructTreeFromIds(...) directly, which can include archived child channels
when a parent matches; modify the computed to post-process the tree with
filterTrees to exclude archived nodes (use filteredChannels, channelsMap and
constructTreeFromIds to build the initial tree, then call filterTrees on that
result and remove nodes where node.archived is true) so archived children are
not shown in search results.

Copy link
Contributor

@otukado otukado left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

検索ワードが親チャンネルと子チャンネル両方に含まれているときには、両方を表示した方がいいと思います 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants