From f222131dfe488caa77b10a653fae2bece6fc3a2a Mon Sep 17 00:00:00 2001
From: xarmian <xarmian@gmail.com>
Date: Fri, 17 Apr 2026 23:05:40 -0400
Subject: [PATCH] fix(ui): always show faint hover-only sidebar + buttons and
 card stars (#141)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ui): always show faint hover-only controls

The sidebar + buttons and item-card star buttons were fully hidden
until hover, which wasn't discoverable. They're already muted enough
that showing them at reduced opacity is fine, and they still pop to
full opacity on hover.

- Sidebar .section-add-btn: opacity 0 -> 0.5
- Sidebar .nav-quick-add: visibility:hidden -> opacity 0.5
- ItemCard .star-btn: opacity 0 -> 0.4 (unstarred outline ☆ now visible)

Refs IDEA-605

* fix(ui): bump unstarred star opacity 0.4 -> 0.65 for mobile readability
---
 .../lib/components/collections/ItemCard.svelte  |  2 +-
 web/src/lib/components/layout/Sidebar.svelte    | 17 ++++-------------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/collections/ItemCard.svelte b/web/src/lib/components/collections/ItemCard.svelte
index 248736be..7820db57 100644
--- a/web/src/lib/components/collections/ItemCard.svelte
+++ b/web/src/lib/components/collections/ItemCard.svelte
@@ -330,7 +330,7 @@
 		font-size: 0.95em;
 		line-height: 1;
 		color: var(--text-muted);
-		opacity: 0;
+		opacity: 0.65;
 		transition: opacity 0.15s, color 0.15s;
 		flex-shrink: 0;
 	}
diff --git a/web/src/lib/components/layout/Sidebar.svelte b/web/src/lib/components/layout/Sidebar.svelte
index 59418e99..687e1315 100644
--- a/web/src/lib/components/layout/Sidebar.svelte
+++ b/web/src/lib/components/layout/Sidebar.svelte
@@ -636,17 +636,12 @@
 		padding: 0 var(--space-1);
 		border-radius: var(--radius-sm);
 		line-height: 1;
-		opacity: 0;
+		opacity: 0.5;
 		transition: opacity 0.15s, color 0.15s;
 	}
 	.section-header:hover .section-add-btn {
 		opacity: 1;
 	}
-	@media (hover: none) {
-		.section-add-btn {
-			opacity: 1;
-		}
-	}
 	.section-add-btn:hover {
 		color: var(--text-primary);
 		background: var(--bg-hover);
@@ -667,15 +662,11 @@
 		border-radius: var(--radius-sm);
 		cursor: pointer;
 		padding: 0;
-		visibility: hidden;
+		opacity: 0.5;
+		transition: opacity 0.15s, color 0.15s, background 0.15s;
 	}
 	.nav-item:hover .nav-quick-add {
-		visibility: visible;
-	}
-	@media (hover: none) {
-		.nav-quick-add {
-			visibility: visible;
-		}
+		opacity: 1;
 	}
 	.nav-quick-add:hover {
 		color: var(--text-primary);