From 602e9281800bd89852f0887b0c35eda05377a8c5 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 15 Feb 2026 20:32:11 -0800
Subject: [PATCH] [WV2] Add item info links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an info link (ℹ️) to each item card that opens the item's detail
page in a new tab. The link is:
- Subtle and hidden by default (opacity: 0)
- Visible on hover or focus-within for mouse/keyboard users
- Always visible (60% opacity) on touch devices
- Accessible with proper aria-label
- Opens in new tab with target="_blank" and rel="noopener"

This is the first commit of Phase 2 (Detail-Oriented Experience),
adding contextual navigation to item details.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/assets/stylesheets/wardrobe/show.css      | 35 ++++++++++++++++++-
 .../items/_item_card_content.html.haml        |  5 ++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css
index dbf5d7a4..3329ea3b 100644
--- a/app/assets/stylesheets/wardrobe/show.css
+++ b/app/assets/stylesheets/wardrobe/show.css
@@ -167,7 +167,12 @@ item-card {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  &:hover :is(.item-add-button, .item-remove-button, .item-hide-button, .item-show-button) {
+  &:hover :is(.item-add-button, .item-remove-button, .item-hide-button, .item-show-button),
+  &:hover .item-info-link {
+    opacity: 1;
+  }
+
+  &:focus-within .item-info-link {
     opacity: 1;
   }
 
@@ -202,6 +207,34 @@ item-card {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .item-info-link {
+    flex-shrink: 0;
+    font-size: 0.9rem;
+    text-decoration: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    line-height: 1;
+
+    &:hover {
+      opacity: 1 !important;
+    }
+
+    &:focus {
+      opacity: 1;
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    /* Always visible on touch devices */
+    @media (hover: none) {
+      opacity: 0.6;
+    }
   }
 
   .item-badges {
diff --git a/app/views/wardrobe/items/_item_card_content.html.haml b/app/views/wardrobe/items/_item_card_content.html.haml
index 55d5e577..284498a3 100644
--- a/app/views/wardrobe/items/_item_card_content.html.haml
+++ b/app/views/wardrobe/items/_item_card_content.html.haml
@@ -1,7 +1,10 @@
 .item-thumbnail
   = image_tag item.thumbnail_url, alt: "", loading: "lazy"
 .item-info
-  .item-name= item.name
+  .item-name
+    = item.name
+    = link_to item_path(item), class: "item-info-link", target: "_blank", rel: "noopener" do
+      %span{aria: {label: "Item info"}} ℹ️
   .item-badges
     = render "items/badges/kind", item: item
     = render "items/badges/first_seen", item: item