feat(feedback): implement ChipDip-style floating dev feedback & bug report widget with markdown sync

This commit is contained in:
2026-10-08 11:53:18 +03:00
parent e1cacde543
commit 8cffae46fa
11 changed files with 1104 additions and 3 deletions
+64 -2
View File
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Notes — Персональный тренажер и словарь английского языка</title>
<meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
<link rel="stylesheet" href="/static/css/style.css?v=6.8">
<link rel="stylesheet" href="/static/css/style.css?v=6.9">
<!-- PWA meta and icons -->
<link rel="manifest" href="/manifest.json">
@@ -2046,10 +2046,72 @@
</div>
</div>
<!-- ChipDip-style Floating Feedback & Bug Report Widget -->
<div id="feedback-container" class="feedback-container">
<!-- Floating Launcher Button -->
<button id="feedback-trigger-btn" class="feedback-trigger-btn" title="Сообщить о баге или предложить идею (Dev Chat)" aria-label="Обратная связь">
<span class="feedback-trigger-icon">💬</span>
<span id="feedback-badge" class="feedback-badge hidden">0</span>
</button>
<!-- Floating Chat Window -->
<div id="feedback-widget" class="feedback-widget hidden" role="dialog" aria-labelledby="feedback-widget-title">
<div class="feedback-widget-header">
<div class="feedback-header-left">
<span class="feedback-header-icon">💬</span>
<div>
<div id="feedback-widget-title" class="feedback-header-title">Dev Feedback & Баги</div>
<div class="feedback-header-sub">Синхронизируется с AI-ассистентом</div>
</div>
</div>
<button type="button" id="feedback-close-btn" class="feedback-close-btn" title="Закрыть (Esc)">✕</button>
</div>
<!-- Category Selector Tabs -->
<div class="feedback-category-bar">
<button type="button" class="feedback-cat-chip active" data-category="bug">🐛 Баг</button>
<button type="button" class="feedback-cat-chip" data-category="feature">💡 Фича</button>
<button type="button" class="feedback-cat-chip" data-category="note">📝 Заметка</button>
</div>
<!-- Auto Context Indicator -->
<div class="feedback-context-indicator" id="feedback-context-indicator">
<span class="context-icon">📍</span>
<span id="feedback-context-text" class="context-text">Определение контекста...</span>
</div>
<!-- Chat / Reports Feed -->
<div id="feedback-messages-list" class="feedback-messages-list">
<div class="feedback-empty-state" id="feedback-empty-state">
<span class="empty-icon">📝</span>
<p>Нашли баг или есть идея для фичи?</p>
<small>Напишите сообщение ниже — оно сразу попадет в систему задач AI-разработчика.</small>
</div>
</div>
<!-- Input Area -->
<form id="feedback-form" class="feedback-input-form">
<textarea
id="feedback-input"
class="feedback-textarea"
placeholder="Опишите баг или идею... (Enter для отправки, Shift+Enter для новой строки)"
rows="2"
required
></textarea>
<div class="feedback-form-bottom">
<span class="feedback-hint">Enter — отправить</span>
<button type="submit" id="feedback-send-btn" class="feedback-send-btn" title="Отправить репорт">
<span class="send-icon">➤</span>
</button>
</div>
</form>
</div>
</div>
<!-- Audio Element for native streaming -->
<audio id="global-audio-player" preload="none"></audio>
<script type="module" src="/static/js/app.js?v=6.5"></script>
<script type="module" src="/static/js/app.js?v=6.6"></script>
</body>
</html>