fix: Mobile hamburger menu and iPad sidebar visibility

Mobile fixes:
- Add click toggle handler for hamburger menu (was hover-only)
- Menu now opens/closes on tap and closes when clicking outside
- Keep hover support for desktop

iPad fixes:
- Sidebar content now visible on touch devices (901-1280px)
- Added (hover: hover) media query to prevent hide-on-hover on tablets

Security improvements:
- Replace exec.CommandContext with go-git library for git operations
- Add path traversal and command injection prevention
- Fix race condition in template hot reload
- Add environment-based cookie Secure flag

Code quality:
- Add constants.go for magic numbers
- Remove unused code (ParsePreferenceToggleRequest, DomainError)
- Add FOUC prevention with inline critical CSS
- Add Makefile dev/run/clean targets
- Fix README git clone URL
- Add doc/DECISIONS.md for architectural decisions

Tests:
- Add hamburger menu click toggle tests
- Add iPad sidebar visibility tests
- Update security tests for go-git implementation
- Add cookie Secure flag tests
This commit is contained in:
juanatsap
2025-11-30 09:29:35 +00:00
parent 60c1b5ac2b
commit eb92f64e93
18 changed files with 874 additions and 183 deletions
+30 -1
View File
@@ -39,7 +39,36 @@
<!-- HTMX Configuration -->
<meta name="htmx-config" content='{"timeout":5000,"defaultSwapStyle":"innerHTML","defaultSwapDelay":0,"defaultSettleDelay":20}'>
<!-- FOUC Prevention: Apply color theme before page render -->
<!-- FOUC Prevention: Inline critical CSS + Apply color theme before page render -->
<!-- Critical theme variables inlined to prevent flash of unstyled content -->
<style>
/* Light theme (default) - critical variables only */
:root {
--page-bg: #d6d6d6;
--paper-bg: #ffffff;
--text-primary: #1a1a1a;
--sidebar-bg: #d1d4d2;
}
/* Dark theme - critical variables only */
[data-color-theme="dark"] {
--page-bg: #3a3a3a;
--paper-bg: #1a1a1a;
--text-primary: #e0e0e0;
--sidebar-bg: #3a3d3e;
}
/* Auto theme follows system preference */
@media (prefers-color-scheme: dark) {
[data-color-theme="auto"] {
--page-bg: #3a3a3a;
--paper-bg: #1a1a1a;
--text-primary: #e0e0e0;
--sidebar-bg: #3a3d3e;
}
}
/* Apply critical styles immediately */
html { background-color: var(--page-bg); }
body { color: var(--text-primary); }
</style>
<script>
(function() {
let theme = localStorage.getItem('color-theme-mode');