Conversation
| }); | ||
|
|
||
| // channelName に書き換える処理だけを実行したいので，空の JSX を返す | ||
| return <></>; |
There was a problem hiding this comment.
ChannelHeaderコンポーネントを作るのであればページタイトルの更新処理もこっちに移動させてしまったほうが可読性が高い気がしますがどうでしょう？逆バケツリレー的なことをしていることもあって、余計に流れが追いづらいかもです
今後コード量が増えてくることを考えると、やはりAppShell.tsxは遠いのでこっちに処理をまとめてしまったほうが綺麗な気がします
There was a problem hiding this comment.
現状だと，AppShell において，ヘッダー内にナビゲーションメニューのトグルが実装されています。このため，ヘッダーを書き換えると，もれなくトグルが消滅してしまうようです。ほかにも，Server Components と Client Components が混在しているため，下手にいじると Hydration に起因するエラーに見舞われる難しいところもあります。
こうした背景から，チャンネル名（ページタイトル）をヘッダーに表示するためには，Client Components として localStorage 経由で子たる ChannelHeader から親たる AppShell へのバケツリレーで伝搬させる強引な方法を採らない限り，実装不可能な気がしています。
良さげな打開案ってありますかね……？
There was a problem hiding this comment.
ハンバーガーメニューは仮置きだったのでなくすのはありです。特にプロダクトの性質上基本的にチャンネルページ以外のページが存在しないので、そこにヘッダーを置いて左サイドバーを表示させるボタンを配置させても良さそうです。
ただこれ、個人的にはヘッダーを二重にするのが良いかなと思っていました。Discord, Mattermost, Slackいずれも二重のヘッダーを採用しているので、とりあえずAppShellのヘッダーは以前の状態を維持しつつ、新しくチャンネルページにabsoluteとかで配置するのはどうでしょう
|
以下の変更を加えました。
|
| position: fixed; | ||
| top: 3rem; | ||
| z-index: 10; | ||
| width: 100%; |
| include: { | ||
| members: true, | ||
| }, |
There was a problem hiding this comment.
これは不要な気がします👀
| include: { | |
| members: true, | |
| }, |
src/hooks/useCurrentChannel.ts
Outdated
|
|
||
| if (!context) | ||
| throw new Error( | ||
| "useCurrentChannel must be used within a <CurrentChannelProvider>" |
There was a problem hiding this comment.
細かいんですがエラーメッセージは日本語のほうが良いかもです
(分かりやすいというのもありますが、自分で書いたエラーなのかライブラリがthrowしたエラーなのかの区別がつきやすい)
|
上記3項目について修正しました！ |
3 participants
関連 Issue(s)
変更内容
各チャンネルのページにおいて，ヘッダーやページのタイトルを Digichat ではなくチャンネル名を表示するようにしました。
スクリーンショット
確認手順
pnpm run devを実行し，開発用サーバーを立ち上げる。/channels/[channel_id]/) へアクセスする。Digichat > チャンネル名のような形式になっている。