Background tasks lose socket context, so emit() doesn't work.
Fixed by capturing socket ID and using socketio.emit(room=sid).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Browser blocks mixed content (HTTPS page -> HTTP WebSocket on port 5001).
Solution: Route WebSocket through main Flask app which goes through
existing HTTPS reverse proxy.
- Add Flask-SocketIO to main mc-webui app
- WebSocket handler proxies commands to bridge via HTTP
- Remove port 5001 external exposure (no longer needed)
- Remove duplicate title from console header
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Flask-SocketIO backend with gevent for real-time communication
- Create chat-style console UI showing only user's command responses
- WebSocket commands tracked separately from HTTP API (ws_ prefix)
- Console accessible from main menu as fullscreen modal
- Command history navigation with arrow keys
- Auto-reconnection on disconnect
- Update service worker cache for offline support
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed hard limit from 8 to 40 channels (most LoRa devices support up to 40)
- Added soft warning when exceeding 7 channels (some devices may have lower limits)
- Warning displayed in UI after successful channel creation/join
- Updated error message to reflect new 40-channel maximum
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Simplify README.md from ~925 to ~217 lines
- Create docs/user-guide.md with detailed feature documentation
- Create docs/architecture.md with technical details and API reference
- Create docs/troubleshooting.md (merged from COMMON_ISSUES.md + README)
- Move DOCKER_INSTALL.md to docs/docker-install.md
- Remove COMMON_ISSUES.md (content merged into troubleshooting.md)
- Add Documentation section with links to all docs
The README now focuses on quick start and installation,
while detailed documentation is organized in docs/ folder.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove images/installation guide/ folder and its contents:
- 01-02. Flashing - selecting role.png
- 01-03. Flashing - connecting to device.png
- 01-04. Flashing - flashing process.png
- 01. Flashing.png
- manual approval.png
These screenshots were originally planned for the installation guide
but are no longer needed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete the offline support implementation by hosting emoji-picker-element locally, eliminating the last external CDN dependency. Application now works 100% offline without any internet connection.
Changes:
- Download and host emoji-picker-element 1.28.1 locally (~100 KB)
- index.js, picker.js, database.js
- Download and host emoji data JSON (~429 KB)
- en/emojibase/data.json with full emoji database
- Update index.html and dm.html:
- Replace CDN emoji picker import with local version
- Also migrate Bootstrap CSS/JS to local in dm.html (was missed before)
- Configure emoji picker to use local data source in app.js and dm.js
- Set picker.dataSource to local JSON path
- Update Service Worker (v2 → v3):
- Add emoji picker files to pre-cache list
- Total offline cache size: ~1.2 MB
- Update documentation:
- README.md: Add emoji picker to offline support features
- CLAUDE.md: Document emoji picker implementation and file structure
Total offline package breakdown:
- Bootstrap CSS/JS: ~307 KB
- Bootstrap Icons: ~398 KB
- Emoji Picker: ~100 KB
- Emoji Data: ~429 KB
- Total: ~1.2 MB
Benefits:
- Zero external dependencies (no CDN calls)
- Full emoji picker functionality offline
- Faster page load (no external requests)
- Perfect for air-gapped mesh network deployments
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement complete offline functionality by hosting Bootstrap CSS/JS and icons locally, eliminating dependency on external CDNs. This ensures the application works reliably in internet-free environments, perfect for mesh networks in remote or emergency scenarios.
Changes:
- Download and host Bootstrap 5.3.2 CSS/JS locally (~307 KB total)
- Download and host Bootstrap Icons 1.11.2 CSS and fonts (~300 KB)
- Update base.html to use local library paths instead of CDN URLs
- Enhance Service Worker with hybrid caching strategy:
- Cache-first for vendor libraries (static, unchanging)
- Network-first for app code (dynamic, needs updates)
- Bump Service Worker cache version to v2
- Add vendor libraries to pre-cache list for instant offline availability
- Update README.md with offline support documentation
- Update project structure documentation
Benefits:
- Works without internet connection (no CDN dependency)
- Faster initial page load (no external requests)
- Reliable operation during internet outages
- Perfect for air-gapped and remote mesh network deployments
File sizes:
- Bootstrap CSS: ~227 KB
- Bootstrap JS: ~80 KB
- Bootstrap Icons CSS: ~98 KB
- Bootstrap Icons Fonts: ~300 KB (woff2 + woff)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Updates README.md for the new PWA notification feature:
- Added PWA notifications to Key Features list with platform support notes
- Created comprehensive "PWA Notifications (Experimental)" section in Usage:
- How to enable/disable notifications
- Platform support (tested on Windows/Firefox, Android requires testing)
- Installing as PWA instructions for Android and Desktop
- Troubleshooting guide
- Added to Completed Features checklist
- Updated Project Structure to include sw.js and manifest.json
Testing status:
- ✅ Windows Desktop (Firefox) - working correctly
- ⚠️ Android Mobile - requires further testing (PWA via Chrome)
Note: .claude/CLAUDE.md also updated but excluded from git (in .gitignore)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Previous implementation always disabled notifications when permission
was granted, regardless of current state. This made it impossible to
re-enable notifications after disabling them.
Now properly checks localStorage state and toggles:
- If currently enabled → disable (show "Notifications disabled")
- If currently disabled → enable (show "Notifications enabled")
This fixes the issue where clicking the toggle when disabled would
show "Notifications disabled" instead of enabling them.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The "purpose": "any maskable" property caused Android to apply
adaptive icon treatment (circular/rounded square mask) to icons
that were not designed with safe zones for maskable display.
This resulted in the icon being incorrectly cropped on Android home screen.
Removed maskable purpose while keeping useful PWA enhancements:
- description field
- categories
- start_url and scope
Icons now display correctly without cropping.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes:
- Convert all Polish UI text to English (buttons, labels, messages)
- Menu: "Powiadomienia" → "Notifications"
- Status badges: "Włączone/Wyłączone/Zablokowane" → "Enabled/Disabled/Blocked"
- Toast messages: all notification messages translated to English
- Notification bodies: "Nowe: X kanały" → "New: X channels"
- Fix notification toggle UI bug
- Badge now correctly shows "Disabled" when user turns off notifications
- Previously showed "Enabled" whenever permission was granted (ignoring localStorage)
- Now checks both permission AND localStorage state
This ensures the UI respects the international nature of the project
and fixes the toggle state display issue found during Android testing.
Files modified:
- app/templates/base.html
- app/static/js/app.js
- app/static/js/dm.js
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implements Progressive Web App notification capabilities:
- Service Worker foundation for PWA installability and offline support
- Browser notification toggle in side menu with permission management
- Local notifications triggered on new messages (channels, DMs, pending)
- App Badge API integration showing total unread count on app icon
- Smart notification logic (only when app hidden, only for NEW messages)
- Graceful degradation for unsupported browsers
Technical details:
- Service Worker with network-first fetch strategy for dynamic content
- Notification permission stored in localStorage (mc_notifications_enabled)
- Delta-based notification tracking (prevents spam on page load)
- Notification tag prevents duplicate alerts
- App badge auto-clears when user returns to app
Limitations (documented):
- Android may freeze background JS after 5-10 minutes (OS behavior)
- Full "wake device" support requires Web Push API (future enhancement)
- Works best for active users who check app regularly
Files modified:
- app/static/js/sw.js (new)
- app/templates/base.html
- app/static/js/app.js
- app/static/js/dm.js
- app/static/manifest.json
- app/static/css/style.css
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add localStorage persistence for Direct Messages page to remember and restore the last selected conversation when user returns to the page.
Changes:
- Save selected conversation to localStorage when user selects a conversation
- Restore last conversation on page load (if no URL parameter provided)
- Clear localStorage when user returns to empty state
- Updated README.md with persistence documentation
- Priority: URL parameter > localStorage > empty state
This improves UX by maintaining conversation context across page navigation, similar to how the main page remembers the selected channel.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change .fab-badge-pending from orange to red
- Change .fab-badge-dm from green to red
- Use same color as notification bell badge (#dc3545)
- Improves visibility especially on green DM button
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add badge for pending contacts on Contact Management FAB button (orange)
- Move DM badge from notification bell to Direct Messages FAB button (green)
- Add universal updateFabBadge() function for all FAB badges
- Add updatePendingContactsBadge() function with localStorage type filter support
- Update badges every 10 seconds with auto-refresh
- Update badges when modals are closed
Frontend changes:
- New CSS classes: .fab-badge, .fab-badge-pending, .fab-badge-dm
- position: relative added to .fab for badge positioning
- Removed DM badge code from notification bell
- Added modal event handlers for badge updates
Backend: No changes (uses existing /api/contacts/pending endpoint with types parameter)
This improves UX by showing notification counts directly on relevant FAB buttons
instead of crowding the notification bell. DM badge moved from bell to DM button,
and new pending contacts badge added to Contact Management button.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add query parameter 'types' to GET /api/contacts/pending endpoint
- Save user's type filter selection to localStorage (pendingContactsTypeFilter)
- Restore filter on page reload (Pending Contacts page)
- Contact Management badge shows count based on saved filter
- Default filter: CLI only (type=1)
Frontend changes:
- Add localStorage functions (save/load/set checkboxes)
- Modify loadPendingContacts() to use types from checkboxes
- Modify loadContactCounts() to use filter from localStorage
- Checkbox changes trigger save to localStorage + API reload
Backend changes:
- Add 'types' query parameter to GET /api/contacts/pending
- Filter pending contacts by type before returning
- Validate types parameter (must be 1-4)
This allows users to customize which contact types they want to see
in pending contacts list, and the selection persists across sessions.
The same filter is used consistently across all pages (Pending Contacts
page and Contact Management page).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replaced hardcoded "MarWoj" device name with regex pattern to support
any device name in meshcli prompt detection. The prompt format is
<DeviceName>|* and varies per installation.
Changes:
- Line 430: Use re.match(r'^.+\|\*', line) instead of line.startswith('MarWoj|*')
- Line 667: Update comment to use generic <DeviceName> placeholder
This ensures the code works correctly for all users regardless of their
meshcore device name configuration.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Problem:
- Previous fix only skipped prompt at start
- stdout also has prompt at end: '{...}\nMarWoj|* '
- json.loads() failed with 'Extra data: line 302 column 2'
Solution:
- Use complete brace-matching (count depth, find matching braces)
- Extract only JSON object between first '{' and matching '}'
- Same technique as bridge uses for .pending_contacts
- Ignores prompts both before and after JSON
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Problem:
- Bridge returns meshcli prompt before JSON: 'MarWoj|* .contacts\n{...}'
- json.loads() failed with 'Expecting value: line 1 column 1'
Solution:
- Use brace-matching to find first '{' in stdout
- Parse JSON starting from first brace (same technique as .pending_contacts)
- Removed debug logs (issue diagnosed)
This fixes contact deletion with trailing spaces - now .contacts returns
exact names and remove_contact uses them correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Need to see what .contacts returns (stdout has 10557 chars but JSON parsing fails).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Problem:
- Contact deletion failed when names had trailing/leading spaces
- meshcli's remove_contact requires exact name match
- Backend was stripping names before deletion
Solution:
- Added get_contacts_json() function to fetch exact contact names
- Modified delete_contact() to look up exact name before deletion
- Uses .contacts command to get names with preserved spacing
- Includes fallback to direct deletion if .contacts fails
Benefits:
- Fixes trailing space deletion issue
- Supports lookup by public_key, public_key_prefix, or name
- Backward compatible with fallback mechanism
- No frontend changes required
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Removed Node Discovery feature that was experiencing persistent timeout
issues. Feature attempted to scan mesh network for nearby repeaters but
consistently failed due to bridge timing constraints.
Changes:
- Remove node_discover() function from cli.py
- Remove 'node_discover' from SPECIAL_COMMANDS in api.py
- Remove Discover Nodes button and modal from base.html
- Remove discoverNodes() and displayNodeDiscoveryResults() from app.js
- Remove Discover Nodes documentation from README.md
IMPORTANT: Advert message cleanup ("Advert sent") is preserved and
working correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Integrate pending contacts refactoring with JSON format
- Resolve conflict in special commands handler
- Keep node_discover functionality from main
- Add filtering and batch approval from dev
- Change backend from 'pending_contacts' to '.pending_contacts' command
- Parse JSON response with enriched contact data (type, GPS, timestamps)
- Add type badges (CLI/REP/ROOM/SENS) with color coding
- Add Map button for contacts with GPS coordinates
- Add type filter (checkboxes, default: CLI only) and name search
- Add batch approval with confirmation modal
- Follow existing contacts UI pattern for consistency
- Mobile-first design with touch-friendly controls
Breaking change: /api/contacts/pending response format changed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The .node_discover command returns prompt line before JSON array.
Added parser to extract only JSON by finding first '[' character
and ignoring everything before it (including 'MarWoj|* .node_discover').
Fixes JSON parsing error: 'Expecting value: line 1 column 1 (char 0)'
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented new "Discover Nodes" feature in Network Commands menu:
- Added .node_discover command to meshcli wrapper (cli.py)
- Created interactive modal with sortable table showing nearby repeaters
- Displays SNR, RSSI, path length, and signal quality indicators
- Added refresh functionality to rescan for nodes
Fixed advert notification to show clean "Advert sent" message
instead of full meshcli output.
Technical changes:
- app/meshcore/cli.py: Added node_discover() function with JSON parsing
- app/routes/api.py: Updated SPECIAL_COMMANDS and execute_special_command()
to handle node_discover return type and clean advert message
- app/templates/base.html: Added "Discover Nodes" menu button and modal
- app/static/js/app.js: Added discoverNodes() and displayNodeDiscoveryResults()
- README.md: Added documentation for Discover Nodes feature
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed viewport fix approach to be less invasive:
- Removed document.body.style.height modification
- Use document.documentElement.offsetHeight instead
- Trigger resize event instead of modifying DOM
- Increased delay from 100ms to 150ms for better stability
This should prevent potential conflicts with channel loading and
other page initialization code.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Two critical fixes:
1. DM Badge Sync Issue:
- After closing DM modal, badge showed correct count for 10 seconds
- Then auto-refresh (running every 10s) used stale dmLastSeenTimestamps
- Solution: Call loadDmLastSeenTimestampsFromServer() before updating badge
- This ensures app.js auto-refresh uses current server state
2. Android PWA Viewport Corruption:
- Viewport corrupted on F5 refresh in Android PWA mode
- Status bar content hidden under system UI
- Solution: Force viewport recalculation on page load
- Scrolls to top and forces reflow after 100ms delay
Testing needed on Android PWA to verify both fixes work correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed DM badge update logic to use /api/dm/conversations endpoint
instead of /api/dm/updates?last_seen={} which was causing incorrect
unread counts (showing 99+, then 2, when there should be 0).
The new approach:
- Fetches all conversations with their unread counts
- Sums up unread messages across all conversations
- Updates badge without full page reload (avoiding viewport corruption)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace full page reload with targeted badge update when DM modal closes.
This prevents the viewport corruption issue that was reintroduced by
window.location.reload() in the previous commit.
Problem:
- Previous solution used window.location.reload() to update badges
- This caused viewport corruption (status bar hidden under system UI)
- Same issue we solved by using modals instead of navigation
New solution:
- Fetch latest unread counts from /api/dm/updates when modal closes
- Update only the green DM badge (notification-badge-dm) on notification bell
- No page reload = no viewport corruption
- Keeps modal solution benefits intact
Changes:
- Remove window.location.reload() from hidden.bs.modal event listener
- Add async fetch to /api/dm/updates endpoint
- Update notification-badge-dm element directly using DOM manipulation
- Handle badge creation/update/hiding based on unread count
Result:
- DM badges update correctly after closing modal
- No viewport corruption
- Fast, smooth user experience
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add event listener for DM modal close event that reloads the main page.
This ensures that unread DM badges are properly updated after user reads
messages in the DM modal.
Previously, when using the "Home" button, the page would reload via navigateTo('/').
Now with the "Close" button, the modal just closes without reloading, leaving
stale unread counts in the notification badges.
Changes:
- Add 'hidden.bs.modal' event listener to dmModal
- Call window.location.reload() when DM modal is closed
- This updates all unread badges on the main page
Note: This should not cause viewport corruption issues because:
1. Modal is fully closed before reload
2. No offcanvas or other Bootstrap components are active
3. Regular page reload, not navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
After removing navbars from modal embedded pages, add proper page headers
and optimize button layout for better mobile UX.
Changes to Pending Contacts page:
- Add H4 page header "Pending Contacts" with badge counter
- Replace two large buttons (Contact Management + Home) with smaller ones
- Change Home button to Refresh button (more useful in modal context)
- Use btn-sm for compact button sizes
- Replace back-buttons class with d-flex gap-2 for simpler layout
Changes to Existing Contacts page:
- Add H4 page header "Existing Contacts" with counter badge
- Same button improvements as Pending Contacts
- Replace Home button with Refresh button
Changes to Contact Management settings:
- Set default "Days of Inactivity" value to 0 (ignore) instead of 2
- This is safer default as 0 means "do not filter by inactivity"
Result:
- Clear page headers indicate current location in modal
- Smaller, more compact buttons save screen space
- Refresh buttons are more useful than Home (which is Close in modal)
- Safer default value for cleanup prevents accidental bulk deletions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add custom CSS overrides to ensure fullscreen modals fill the entire viewport
without any gaps on top, left, right, or bottom edges.
Changes:
- Force modal-dialog to use 0 margin and 100vw/100vh dimensions
- Remove border and border-radius from modal-content
- Set overflow hidden on modal-body to prevent scrollbars
- Use !important to override Bootstrap default styles
This fixes the issue where modals had visible gaps on the top and left sides
while content was slightly cut off on the right and bottom edges.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
After testing the modal implementation on Android PWA, removed duplicate
navigation elements and optimized layout to maximize screen real estate.
Changes to DM modal:
- Removed navbar with back button and "DM" title (duplicates modal header)
- Moved conversation selector to top of content as clean dropdown bar
- Changed main container from dynamic height to fixed 100vh
Changes to Contact Management modals:
- Removed navbar with home button from contacts_base.html
- Removed navbar_content blocks from all contact pages (manage, pending, existing)
- Removed padding/margins from base container (px-3 py-4 → p-0)
- Removed row gutters (added g-0 class)
- Removed col width constraint (col-lg-8 mx-auto → col-12)
- Added padding back to individual page content (p-3) for readability
Changes to modal close buttons:
- Replaced small X icon (btn-close) with proper button
- Added "Close" text with X icon for better visibility on mobile
- Used btn-outline-light styling for consistency with green/blue headers
Result:
- Modals now fill entire available screen space without margins
- No duplicate headers or navigation elements
- Clearer, more intuitive close action with labeled button
- Better mobile experience with larger touch targets
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement modal dialogs to resolve PWA viewport corruption issues on Android.
When navigating between pages using window.location.href, the viewport height
calculation becomes corrupted, causing the status bar to be hidden under system UI.
Changes:
- Add fullscreen modals for Direct Messages and Contact Management in index.html
- Configure FAB buttons to open modals instead of navigating to new pages
- Add JavaScript to reload iframe content when modals are opened (ensures fresh data)
- Remove DM and Contact Management from offcanvas menu to avoid duplication
- Both modals use iframes to embed existing /dm and /contacts/manage pages
- Modal headers styled with appropriate colors (green for DM, blue for Contacts)
This approach bypasses the viewport corruption issue since modals don't trigger
the problematic navigation flow that occurs with page changes in PWA mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Previous sticky bar implementation took up vertical space in layout,
making viewport issues worse. Replaced with proper floating action
buttons that don't affect layout.
Changes:
- Remove sticky bar from index.html
- Add FAB container with fixed position (no layout impact)
- Two circular buttons: DM (green) and Contacts (blue)
- position: fixed, right: 16px, top: 80px
- z-index: 900 (lower than offcanvas menu 1045)
- Beautiful gradients and shadows
- Hover/active animations (scale transform)
- Mobile responsive (smaller on <768px)
Features:
- No vertical space taken (fixed position)
- Covered by offcanvas when menu opens (z-index hierarchy)
- Always visible in corner
- Uses navigateTo() for clean navigation
Test scenario:
1. Click FAB buttons (bypass offcanvas menu completely)
2. Navigate to DM / Contact Management
3. Return to main page
4. Check if status bar corruption still occurs
If FABs work: problem is in offcanvas cleanup
If FABs fail: problem is deeper in viewport/layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added semi-transparent floating buttons under navbar to test
if viewport corruption is caused by offcanvas menu or navigation itself.
Changes:
- Add floating-test-buttons div in index.html
- Two buttons: DM and Contacts (using navigateTo())
- Sticky position under navbar
- Semi-transparent background with backdrop blur
- Centered layout with gap between buttons
Test scenario:
1. Click floating buttons (bypass offcanvas menu)
2. Navigate to DM / Contact Management
3. Return to main page via Home button
4. Check if status bar is still visible
If floating buttons work correctly:
- Problem is in offcanvas menu cleanup
- Can keep these buttons as permanent quick navigation
If floating buttons also cause corruption:
- Problem is deeper (viewport/layout issue)
- Need different approach
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The main page (app.js) was missing viewport recalculation logic
that was already present in dm.js, causing layout corruption when
returning from other pages in PWA mode.
Changes:
- Add viewport recalculation in DOMContentLoaded:
- window.scrollTo(0, 0) - reset scroll position
- window.dispatchEvent(new Event('resize')) - trigger reflow
- document.body.offsetHeight - force layout recalculation
- Add pageshow event listener:
- Handles page restoration from browser cache (Back button)
- Recalculates viewport when event.persisted is true
- Add visibilitychange event listener:
- Handles PWA returning from background
- 100ms delay to ensure proper timing
This fixes the issue where:
1. User opens menu on main page
2. Navigates to Contact Management
3. Clicks Home button to return
4. Status bar is hidden under Android system buttons
The viewport wasn't being recalculated after navigation,
leaving the layout with incorrect heights from cached state.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Root cause: Bootstrap offcanvas leaves backdrop/body classes in DOM
when navigating via window.location.href, causing viewport issues.
Changes:
- Remove hamburger menu button from DM navbar (caused overflow)
- Reduce menu button icon size on channels (remove font-size override)
- Add global navigateTo() function in app.js and contacts.js
- Function closes offcanvas, removes backdrops, clears body classes
- Replace all window.location.href calls with navigateTo()
- Updated navigation in: base.html, contacts*.html templates
- Add 100ms delay before navigation to ensure cleanup completes
This fixes the issue where:
1. Opening offcanvas menu on main page
2. Navigating to DM or Contact Management
3. Returning to main page
Results in corrupted viewport with hidden status bar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Unify navbar:
- Add menu button to DM navbar (same icon as channels) for consistent height
- Both navbars now have 3 elements: back/brand, dropdown, menu button
Unify message input area:
- Disable textarea resize on both pages (resize: none)
- Unify input font-size on mobile (0.9rem)
- Unify form padding on mobile (0.5rem)
- Unify border-radius for send buttons
Unify message bubbles:
- Set DM message max-width to 70% (same as channels)
- Unify padding: 0.75rem 1rem (same as channels)
- Unify max-width on mobile: 85% for both
- Remove explicit font-size from DM bubbles (inherit default)
- Unify animation duration: 0.3s
Unify selectors:
- Apply same mobile styles to both #channelSelector and #dmConversationSelector
PWA fixes:
- Move safe-area handling from inline styles to main CSS
- Apply safe-area-inset-bottom globally for both pages
- Remove duplicate inline styles from dm.html
This should fix the Android PWA viewport issue where the bottom bar
gets hidden under system navigation after navigating to DM page.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change DM message input from input to textarea (rows=2) for consistency
- Increase DM form padding (p-2 → p-3) to match channel view
- Increase DM status bar padding (p-1 → p-2) with larger font
- Replace "Last refresh:" with "Updated:" in both views
- Update DM status to show connection states (Connected/Connecting/Disconnected) instead of "Ready"
- Add loadStatus() function to DM page for proper connection monitoring
- Unify message input area height and status bar appearance across both pages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
