Skip to content

Chat: use the Button primitive instead of raw <button> elements #250

Open

Description

@Sall25

Today

The app has a Button primitive (src/components/tiptap-ui-primitive/button). It gives every button the same:

  • sizes and variants (ghost, …);
  • hover and active states;
  • dark mode;
  • disabled look;
  • a built-in tooltip (tooltip / showTooltip).

The chat builds its own with raw <button> and per-file CSS:

File Raw <button>
src/features/chat/chat-room-view.tsx 32
src/features/chat/chat-modals.tsx 8
src/features/chat/study-session.tsx 5
src/features/chat/chats-panel.tsx 3
src/features/chat/rooms-section/rooms-section.tsx check

So chat buttons look and behave a bit differently from the rest of the app (focus ring, dark mode, disabled state), and each style is maintained twice.

What to do

  • Replace them with Button, then delete the CSS that only re-styled the raw buttons.
  • Keep a raw <button> only where Button gets in the way (for example a button laid over a message bubble). Leave a one-line comment there.
  • Do it one file per PR if that's easier to review.

Done when

  • No raw <button> left in src/features/chat except the commented ones.
  • Chat looks the same or better, in light and dark mode.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions