Skip to content

最下部へ戻るためのフローティングボタンを表示する#96

Merged
ktmage merged 1 commit intodevelopmentfrom
feature/95-scroll-to-bottom-button
Mar 8, 2026
Merged

最下部へ戻るためのフローティングボタンを表示する#96
ktmage merged 1 commit intodevelopmentfrom
feature/95-scroll-to-bottom-button

Conversation

@ktmage
Copy link
Copy Markdown
Owner

@ktmage ktmage commented Mar 8, 2026

Summary

チャット画面で最下部から離れたときに、右下へ『最下部へ戻る』フローティングボタンを表示するようにします。
自動スクロールの状態を useAutoScroll から参照できるようにし、スクロールバーや入力欄に干渉しない配置と、フェード付きの表示切り替えを追加しています。

Related Issue

Resolves #95

Changes

  • useAutoScrollisNearBottomscrollToBottom() を追加し、最下部追従状態を UI から参照できるようにした
  • ScrollToBottomButton を新規追加し、既存 IconButton ベースの outlined + 不透明背景のフローティングボタンを実装した
  • MessagesArea にボタンを組み込み、右下 sticky 配置・フェード表示・クリック時の最下部スクロールを追加した
  • 下向きアイコンと aria-label 用ロケール文言を追加した
  • LocaleSchema を導入し、既存翻訳を壊さずロケール追加を型安全に扱えるようにした
  • useAutoScrollMessagesArea のテストを拡張し、表示条件とクリック動作を検証した

Checklist

  • pnpm build passes
  • pnpm test passes

@ktmage ktmage merged commit 8054f37 into development Mar 8, 2026
1 check passed
@ktmage ktmage changed the title feat: add scroll-to-bottom button to chat view (#95) 最下部へ戻るためのフローティングボタンを表示する Mar 8, 2026
@ktmage ktmage deleted the feature/95-scroll-to-bottom-button branch March 8, 2026 09:39
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.

1 participant