v0.3.0: OAuth2, CSRF, rate limiting, issue CRUD, webhooks, card detail, checklists

- OAuth2 Gitea (login/callback/logout) with fallback admin mode
- Session management with signed cookies (itsdangerous, 7 days)
- CSRF protection middleware on all POST/PUT/PATCH/DELETE
- Rate limiting in-memory (60 req/min per IP)
- Issue creation from FlowDeck (POST /api/issues/{owner}/{repo})
- Inline issue editing (PATCH /api/issues/{owner}/{repo}/{issue_id})
- Card detail modal (double-click): description, labels, comments
- Checklists with toggleable items (CRUD endpoints + UI)
- Priority + due date editable on cards
- Webhook receiver (POST /api/webhook) with HMAC-SHA256
- Auto-register/status webhooks for repos
- GiteaClient: create_issue, update_issue, get_comments, webhooks, collaborators
- New DB tables: users, user_tokens, checklists, checklist_items
- CSS: modal, forms, checklists, comments, PR section

static/css/app.css

@@ -159,10 +159,95 @@ body { min-height: 100vh; }
 .btn-primary:hover { opacity: 0.9; }
 .btn-sm { padding: 4px 10px; font-size: 12px; }
 
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center; z-index: 1000;
+}
+.modal-container {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 12px; width: 90%; max-width: 640px; max-height: 80vh;
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.modal-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+}
+.modal-header h3 { font-size: 15px; }
+.modal-close { background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; }
+.modal-body { padding: 16px; overflow-y: auto; flex: 1; }
+
+/* ── Forms ── */
+.new-issue-form {
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.new-issue-form h4 { font-size: 14px; margin-bottom: 8px; }
+.form-input, .form-select {
+  width: 100%; background: var(--bg); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px 12px; color: var(--text); font-size: 13px;
+  margin-bottom: 8px;
+}
+.form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); }
+.form-input-sm { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; color: var(--text); font-size: 12px; }
+.form-select-sm { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; color: var(--text); font-size: 12px; }
+.form-row { display: flex; gap: 8px; }
+.form-actions { display: flex; gap: 8px; margin-top: 4px; }
+.filter-input {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
+  padding: 4px 8px; color: var(--text); font-size: 13px; width: 140px;
+}
+
+/* ── Card Detail ── */
+.detail-section { margin-bottom: 16px; }
+.detail-section h4 { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
+.detail-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; flex-wrap: wrap; }
+.detail-editable { display: flex; gap: 12px; margin-bottom: 12px; font-size: 12px; align-items: center; }
+.detail-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
+.detail-state { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
+.detail-state.open { background: var(--green); color: white; }
+.detail-state.closed { background: var(--red); color: white; }
+
+/* ── Comments ── */
+.comment {
+  padding: 8px 0; border-bottom: 1px solid var(--border);
+  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
+}
+.comment-date { font-size: 11px; color: var(--text-dim); }
+.comment-body { width: 100%; font-size: 13px; padding: 4px 0; }
+
+/* ── Checklists ── */
+.checklist { margin-bottom: 12px; }
+.checklist-items { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
+.checklist-items li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
+.checklist-check { cursor: pointer; }
+.checklist-items .checked { text-decoration: line-through; color: var(--text-dim); }
+.btn-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 16px; }
+.add-item { display: flex; gap: 4px; margin-top: 4px; }
+
+/* ── PRs section ── */
+.prs-section { padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
+.prs-section h3 { font-size: 14px; margin-bottom: 8px; }
+.prs-list { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
+.pr-card { padding: 6px 0; font-size: 13px; }
+.pr-title { color: var(--accent); text-decoration: none; }
+.pr-meta { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; }
+
+/* ── Markdown body ── */
+.markdown-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
+
+/* ── Loading ── */
+.loading { text-align: center; padding: 24px; color: var(--text-dim); }
+
+/* ── User info ── */
+#user-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
+#user-info .avatar { width: 20px; height: 20px; }
+
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .board-columns { flex-direction: column; }
   .board-column { max-width: 100%; min-height: 200px; }
   .dashboard-header { flex-direction: column; align-items: flex-start; }
   .search-input { width: 100%; }
+  .modal-container { width: 95%; max-height: 90vh; }
 }