feat: add drag-and-drop, toast notifications, connection status, and …

[iamahsanmehmood]

Summary

Improve the LocalSend Web UX with 4 new features: drag-and-drop file upload, toast notifications, connection status indicator, and custom input dialogs.

Changes

1. Drag & Drop File Upload

• Drop files directly onto the page to send them to the first available peer
• Full-screen overlay with upload icon shown while dragging files
• Error toast shown if no peers are available

2. Toast Notification System

New component: Toast.vue

• Auto-dismissing toast notifications (4s) for success/error/info messages
• Slide-in animation from the right
• Shown after file transfer completes or fails
• Browser Notification API used when the tab is in the background

3. Connection Status Indicator

• Live status dot in the header: 🟢 Connected / 🟡 Reconnecting / 🔴 Disconnected
• Status text shown on larger screens
• Updates automatically during WebSocket connect/disconnect/retry cycles

4. Custom Input Dialogs

New component: InputDialog.vue

• Replaces all native prompt() calls with styled modal dialogs
• Used for entering alias name, PIN, and transfer PIN
• Supports keyboard shortcuts (Enter to confirm), auto-focus, and text selection
• Consistent dark mode styling

Additional Improvements

• Dark mode support for Dialog.vue — Added dark:bg-gray-800 dark:text-white classes
• i18n for SessionDialog.vue — Replaced hardcoded "Total:" and "Files:" with t() calls
• New i18n keys added to en.json for all new UI elements

Files Changed

File	Change
app/components/Toast.vue	[NEW] Toast notification component
app/components/dialog/InputDialog.vue	[NEW] Reusable input modal dialog
app/components/dialog/Dialog.vue	[MODIFIED] Dark mode support
app/components/dialog/SessionDialog.vue	[MODIFIED] i18n for hardcoded strings
app/pages/index.vue	[MODIFIED] Drag & drop, connection status, custom modals
app/services/store.ts	[MODIFIED] Toast system, connection status, browser notifications
i18n/locales/en.json	[MODIFIED] New translation keys

Testing

• Drag and drop: verified overlay shows on dragover, hides on dragleave/drop
• Toast: verified success/error toasts appear after session state changes
• Connection status: verified dot color updates during connect/disconnect lifecycle
• Input dialogs: verified alias, PIN, and transfer PIN use custom modals instead of prompt()