AOSSIE-Org / AOSSIE-Org/OpenPeerChat-react-native

[FEATURE]: UI/UX Overhaul & Implementation of Walkie-Talkie (PTT) Mode

Open
#5 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
7
Forks
5
PR merge metrics
No merged PRs in 30d

Description

### Feature and its Use Cases

### Is your feature request related to a problem? Please describe.
The current interface of **OpenPeerChat** functions well as a proof-of-concept but lacks the visual polish and intuitive UX expected of modern communication apps.
* **Visuals:** The UI is stark and utilitarian (see attached screenshots below), which may deter new users.
* **Functionality:** Communication is currently limited to text. In peer-to-peer scenarios (festivals, emergencies, hiking), typing is often slower than speaking.

### Describe the solution you'd like
I propose a major **UI/UX Redesign** combined with a new **Walkie-Talkie (Push-to-Talk)** feature. The goal is to shift the app's aesthetic to a "Modern Utility" style (Dark Mode with Neon Accents) and make voice communication the primary or secondary mode of interaction.

### 1. UI/UX Redesign (Visuals)
We should overhaul the following screens to improve hierarchy and feedback:

* **Home Screen:** Replace the empty list with a prominent "Scan/Broadcast" status indicator and a modern logo header.
* **Peer List:** Replace generic "Peer IDs" with friendly aliases/avatars. Use clear signal strength bars (Green/Yellow/Red) instead of raw numbers.
* **Connection Request:** Move from a system alert to a friendly "Slide-up" bottom sheet modal with distinct Accept/Decline buttons.

### 2. Walkie-Talkie Feature (Functionality)
Integrate a **Half-Duplex Voice** feature into the chat interface:
* **Push-to-Talk (PTT) Button:** A large, accessible button in the chat footer (replacing or alongside the 'Send' icon).
* **Interaction:** User holds the button to broadcast audio -> Release to listen.
* **Feedback:** Visual waveform or "On Air" indicator when speaking; "Receiving..." indicator when a peer is talking.

### UI References (Baseline)

Image

### Proposed Tech Stack / Libs
* **Voice:** `react-native-audio-recorder-player` or `react-native-webrtc` (for P2P audio streaming).
* **UI:** `react-native-reanimated` (for PTT button animations) and `lottie-react-native` (for voice waveforms).

### Checklist
- [ ] Design new "Dark/Cyberpunk" theme assets.
- [ ] Implement Push-to-Talk logic (Audio capture & stream).
- [ ] Redesign Peer List items with signal indicators.
- [ ] Replace system alerts with custom Modals/Bottom Sheets.

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.