Skip to content

feat: chat UX — resizable input, emoji picker, date separators, sound/vibration notifications#56

Merged
AbdulKhaliq59 merged 2 commits intodev2from
feat/chat-ux-notifications-improvements
Mar 23, 2026
Merged

feat: chat UX — resizable input, emoji picker, date separators, sound/vibration notifications#56
AbdulKhaliq59 merged 2 commits intodev2from
feat/chat-ux-notifications-improvements

Conversation

@AbdulKhaliq59
Copy link
Collaborator

@AbdulKhaliq59 AbdulKhaliq59 commented Mar 23, 2026

Summary

A focused UX pass on the chat experience and notification system.

Chat input

  • Replaced single-line <Input> with an auto-resizing <textarea> (max 160 px, then scrolls internally)
  • Enter sends, Shift+Enter inserts a newline
  • Font size raised to 16px (prevents iOS Safari auto-zoom on focus)
  • Buttons align to the bottom edge as the textarea grows

Emoji picker

  • Lazy-loaded via next/dynamic — zero bundle cost until first open
  • Full CSS variable theming to match app design tokens (light + dark)
  • Mobile: full-width flush panel · Desktop: 300 px right-aligned popover
  • Inserts emoji at the cursor position, not just appended to the end

Keyboard / layout fix

  • Chat container switched from h-screenh-[100dvh] so the layout shrinks when the mobile soft keyboard opens
  • MessageInput removed from fixed bottom-0 — now a natural flex-shrink-0 element, always visible above the keyboard

Date separators

  • Messages grouped by calendar day with "Today" / "Yesterday" / "Friday, 20 March 2026" indicators
  • Pill-shaped label with hairline rules, supports light and dark themes

Sound & vibration notifications

  • soundService.ts: two-note C6 → E6 double-pop synthesised via Web Audio API (no audio file needed). Triangle + sine harmonic stack at high gain for clear audibility
  • AudioContext auto-unlocked on first user gesture so WebSocket-triggered sounds are never blocked by the browser autoplay policy
  • Vibration API wrapper with double-pulse haptic pattern
  • NotificationsTab — new Sound & Vibration section: toggles write to localStorage instantly and sync the notification service live. Enabling either plays an immediate preview

Test plan

  • Open a chat on mobile — bottom nav disappears, soft keyboard does not overlap the input
  • Type a multi-line message — textarea expands smoothly, stops at ~5 lines then scrolls
  • Press Enter — message sends; Shift+Enter — new line inserted
  • Open emoji picker — appears above input, closes on outside click / Escape, selected emoji lands at cursor
  • Load a chat with messages from multiple days — date separators appear correctly for Today, Yesterday, and older dates
  • Receive a message while on another tab — notification sound plays (two-note pop) and device vibrates
  • Settings → Notifications → toggle Sound off → receive a message → no sound
  • Settings → Notifications → toggle Vibration off → receive a message → no vibration
  • Toggle Sound ON from settings — preview tone plays immediately

The prop was declared but never consumed. Wrap the mobile <nav> block
in {!hideBottomNav && ...} so chat sub-screens and transfer flows can
suppress it. Chat page already passed the prop — no changes needed there.
@netlify
Copy link

netlify bot commented Mar 23, 2026

Deploy Preview for qiew-code-dev2 ready!

Name Link
🔨 Latest commit d10f193
🔍 Latest deploy log https://app.netlify.com/projects/qiew-code-dev2/deploys/69c136818909250008905b44
😎 Deploy Preview https://deploy-preview-56--qiew-code-dev2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Lockfile was out of sync after emoji-picker-react was added to
package.json, causing CI frozen-lockfile installs to fail.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@AbdulKhaliq59 AbdulKhaliq59 merged commit 20cfdd5 into dev2 Mar 23, 2026
9 checks passed
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