mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-06-30 06:51:05 +02:00
MarekWo
f8ef1ac297
Major documentation update with new data structure: Breaking Changes: - Data storage moved from host directories to ./data/ inside project - MC_CONFIG_DIR default changed: /root/.config/meshcore → ./data/meshcore - MC_ARCHIVE_DIR default changed: /mnt/archive/meshcore → ./data/archive - Requires migration for existing installations (see MIGRATION.md) Documentation: - Add MIGRATION.md - step-by-step guide for existing users - Add FRESH_INSTALL.md - complete installation guide for new users - Update README.md - new Configuration section with ./data/ structure - Update .env.example - placeholders instead of real values, new defaults - Update .claude/CLAUDE.md - updated environment variables documentation - Change serial device detection from 'ls -l' to 'ls' (cleaner output) Code Cleanup: - Remove deprecated MC_REFRESH_INTERVAL variable (unused since intelligent refresh) - Remove MC_REFRESH_INTERVAL from app/config.py - Remove refresh_interval from app/routes/views.py (5 functions) - Remove refresh_interval from app/routes/api.py - Remove refreshInterval from app/templates/index.html - Remove refreshInterval from app/templates/dm.html - Remove MC_REFRESH_INTERVAL from docker-compose.yml Configuration: - Update .gitignore - exclude data/ and docs/github-discussion-*.md - Serial port: use /dev/serial/by-id/[YOUR_DEVICE_ID] placeholder - Device name: use [YOUR_DEVICE_NAME] placeholder Benefits: - All project data in one location (easier backups) - Better portability (no host dependencies) - Cleaner codebase (removed unused variables) - Comprehensive documentation for migration and fresh install 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
178 lines
7.3 KiB
HTML
178 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Direct Messages - mc-webui</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
|
|
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
|
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
|
|
<!-- Emoji Picker -->
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
|
|
<style>
|
|
emoji-picker {
|
|
--emoji-size: 1.5rem;
|
|
--num-columns: 8;
|
|
}
|
|
.emoji-picker-container {
|
|
position: relative;
|
|
}
|
|
.emoji-picker-popup {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
z-index: 1000;
|
|
margin-bottom: 0.5rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
.emoji-picker-popup.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 576px) {
|
|
emoji-picker {
|
|
--emoji-size: 1.25rem;
|
|
--num-columns: 6;
|
|
}
|
|
.emoji-picker-popup {
|
|
right: auto;
|
|
left: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* PWA safe area handling - ensure bottom UI is visible above system bars */
|
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
body {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navbar for DM page -->
|
|
<nav class="navbar navbar-dark bg-success">
|
|
<div class="container-fluid">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<a href="/" class="btn btn-outline-light btn-sm" title="Back to Channels">
|
|
<i class="bi bi-arrow-left"></i>
|
|
</a>
|
|
<span class="navbar-brand mb-0 h1">
|
|
<i class="bi bi-envelope"></i> DM
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<select id="dmConversationSelector" class="form-select form-select-sm" style="width: auto; min-width: 120px;" title="Select conversation">
|
|
<option value="">Select chat...</option>
|
|
<!-- Conversations loaded dynamically via JavaScript -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<div class="container-fluid d-flex flex-column" style="height: 100%;">
|
|
<!-- Messages Container -->
|
|
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
|
|
<div class="col-12" style="height: 100%;">
|
|
<div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
|
|
<div id="dmMessagesList">
|
|
<!-- Placeholder shown when no conversation selected -->
|
|
<div class="dm-empty-state">
|
|
<i class="bi bi-envelope"></i>
|
|
<p class="mb-1">Select a conversation</p>
|
|
<small class="text-muted">Choose from the dropdown above or start a new chat from channel messages</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send Message Form -->
|
|
<div class="row border-top bg-light">
|
|
<div class="col-12">
|
|
<form id="dmSendForm" class="p-2">
|
|
<div class="emoji-picker-container">
|
|
<div class="input-group">
|
|
<input type="text"
|
|
id="dmMessageInput"
|
|
class="form-control"
|
|
placeholder="Type a message..."
|
|
maxlength="200"
|
|
disabled>
|
|
<button type="button" class="btn btn-outline-secondary" id="dmEmojiBtn" title="Insert emoji">
|
|
<i class="bi bi-emoji-smile"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-success px-4" id="dmSendBtn" disabled>
|
|
<i class="bi bi-send"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Emoji picker popup (hidden by default) -->
|
|
<div id="dmEmojiPickerPopup" class="emoji-picker-popup hidden"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<small class="text-muted"><span id="dmCharCounter">0</span> / 140</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="row border-top">
|
|
<div class="col-12">
|
|
<div class="p-1 small text-muted d-flex justify-content-between align-items-center">
|
|
<span id="dmStatusText">
|
|
<i class="bi bi-circle-fill text-secondary"></i> Ready
|
|
</span>
|
|
<span id="dmLastRefresh">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Toast container for notifications -->
|
|
<div class="toast-container position-fixed top-0 start-0 p-3">
|
|
<div id="notificationToast" class="toast" role="alert">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">mc-webui</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="{{ url_for('static', filename='js/dm.js') }}"></script>
|
|
|
|
<script>
|
|
// Pass configuration from Flask to JavaScript
|
|
window.MC_CONFIG = {
|
|
deviceName: "{{ device_name }}",
|
|
initialConversation: "{{ initial_conversation or '' }}"
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|