From 6518a7ed5ee8800741351166a724da53cb2f271e Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 25 Jan 2026 17:11:00 -1000
Subject: Fix UI bugs #44, #45, #46
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- #44: Replace oversized SVG arrow with simple ▾ character for Details dropdown
- #45: Change Conditions from external link to normal tab button (fixes back button)
- #46: Use dark medium-opacity background (black/50%) for atoms instead of white/5%

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'web/templates')

diff --git a/web/templates/index.html b/web/templates/index.html
index f4c0b59..a03fdae 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -9,8 +9,8 @@
     <style>
         :root {
             --panel-bg: rgba(0, 0, 0, 0.4);
-            --card-bg: rgba(255, 255, 255, 0.05);
-            --card-bg-hover: rgba(255, 255, 255, 0.1);
+            --card-bg: rgba(0, 0, 0, 0.5);
+            --card-bg-hover: rgba(0, 0, 0, 0.6);
             --input-bg: rgba(0, 0, 0, 0.4);
             --modal-bg: rgba(0, 0, 0, 0.8);
             --modal-overlay: rgba(0, 0, 0, 0.7);
@@ -64,21 +64,21 @@
                     onclick="setActiveTab(this)">
                     🛒 Shopping
                 </button>
-                <a href="/conditions"
-                   class="tab-button"
-                   target="_blank">
+                <button
+                    class="tab-button {{if eq .ActiveTab "conditions"}}tab-button-active{{end}}"
+                    hx-get="/tabs/conditions"
+                    hx-target="#tab-content"
+                    hx-push-url="?tab=conditions"
+                    onclick="setActiveTab(this)">
                     🌋 Conditions
-                </a>
+                </button>
 
                 <!-- Details Dropdown -->
                 <div class="relative" id="details-dropdown">
                     <button
                         class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}"
                         onclick="toggleDetailsDropdown(event)">
-                        📁 Details
-                        <svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                        </svg>
+                        📁 Details ▾
                     </button>
                     <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-panel backdrop-blur-sm rounded-lg p-1 min-w-[140px] z-20">
                         <button
-- 
cgit v1.2.3