From 39d75239e4bc26254cc19470de093ac4d26127d0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:06:50 +0000
Subject: [PATCH] feat: add icons to profile modal tab buttons

- Adds outline-style SVG icons to all navigation buttons in the profile modal.
- Uses `currentColor` to ensure icons adapt to button states (active/hover).
- Ensures consistency with sidebar icons for "Subscriptions" and "Watch history".
- Specific mappings:
  - Account: User Circle
  - Relays: Server
  - Wallet: Lightning Bolt (Polygon)
  - Storage: Cloud
  - Hashtags: Hashtag
  - Subscriptions: Stack (Sidebar style)
  - Friends: Star
  - Safety: Shield Check
  - Blocked: Ban
  - Messages: Mail/Envelope
  - Watch History: Clock (Sidebar style)
  - Admin: Briefcase
  - Logout: Logout Arrow
---
 components/profile-modal.html | 178 ++++++++++++++++++++++++++++++++++
 1 file changed, 178 insertions(+)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index 93f9bb5e..50458cef 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -80,6 +80,19 @@
                 aria-selected="true"
                 data-state="active"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
                 Account
               </button>
               <button
@@ -89,6 +102,19 @@
                 aria-controls="profilePaneRelays"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 01-2 2v4a2 2 0 012 2h14a2 2 0 012-2v-4a2 2 0 01-2-2m-2-4h.01M17 16h.01"
+                  />
+                </svg>
                 Relays
               </button>
               <button
@@ -98,6 +124,18 @@
                 aria-controls="profilePaneWallet"
                 aria-selected="false"
               >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                </svg>
                 Wallet
               </button>
               <button
@@ -107,6 +145,19 @@
                 aria-controls="profilePaneStorage"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
+                  />
+                </svg>
                 Storage
               </button>
               <button
@@ -116,6 +167,19 @@
                 aria-controls="profilePaneHashtags"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
+                  />
+                </svg>
                 Hashtags
               </button>
               <button
@@ -125,6 +189,22 @@
                 aria-controls="profilePaneSubscriptions"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="2"
+                >
+                  <path
+                    d="M21.698,10.658L24,12L11.998,19L0,12L2.301,10.658L11.998,16.316L21.698,10.658ZM11.998,21.315L2.301,15.657L0,17L11.998,24L24,17L21.698,15.658L11.998,21.315ZM24,7L11.998,-0L0,7L11.998,14L24,7Z"
+                    fill-rule="nonzero"
+                  />
+                </svg>
                 Subscriptions
               </button>
               <button
@@ -134,6 +214,19 @@
                 aria-controls="profilePaneFriends"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+                  />
+                </svg>
                 Friends
               </button>
               <button
@@ -143,6 +236,19 @@
                 aria-controls="profilePaneSafety"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                  />
+                </svg>
                 Safety
               </button>
               <button
@@ -152,6 +258,19 @@
                 aria-controls="profilePaneBlocked"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
+                </svg>
                 Blocked
               </button>
               <button
@@ -161,6 +280,19 @@
                 aria-controls="profilePaneMessages"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                  />
+                </svg>
                 Messages
                 <span
                   id="profileMessagesUnreadDot"
@@ -175,6 +307,26 @@
                 aria-controls="profilePaneHistory"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="2"
+                >
+                  <g transform="matrix(1,0,0,1,12,12)">
+                    <g transform="matrix(1,0,0,1,-12,-12)">
+                      <path
+                        d="M12,2C6.486,2 2,6.486 2,12C2,17.514 6.486,22 12,22C17.514,22 22,17.514 22,12C22,6.486 17.514,2 12,2ZM12,4C16.411,4 20,7.589 20,12C20,16.411 16.411,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4ZM11,7C10.448,7 10,7.448 10,8L10,13C10,13.266 10.105,13.52 10.293,13.707L13.293,16.707C13.683,17.098 14.317,17.098 14.707,16.707C15.098,16.317 15.098,15.683 14.707,15.293L12,12.586L12,8C12,7.448 11.552,7 11,7Z"
+                        fill-rule="nonzero"
+                      />
+                    </g>
+                  </g>
+                </svg>
                 Watch history
               </button>
               <button
@@ -184,6 +336,19 @@
                 aria-controls="profilePaneAdmin"
                 aria-selected="false"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                  />
+                </svg>
                 Admin (Moderation)
               </button>
               <button
@@ -192,6 +357,19 @@
                 class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium mt-6 lg:hidden"
                 data-variant="critical"
               >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
                 Logout
               </button>
             </nav>