From 6ae9486b4d0ba8a048e297287cf1d372b85cc61b Mon Sep 17 00:00:00 2001
From: Bruno Canepa <8711973+bruncanepa@users.noreply.github.com>
Date: Sat, 6 Dec 2025 14:29:49 -0300
Subject: [PATCH] add 3 toggle botons

---
 .../controllers/theme_controller.js           | 67 ++++++++++++-------
 app/views/users/_theme.html.erb               | 52 +++++++++-----
 app/views/users/show.html.erb                 |  6 +-
 3 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js
index c5476c06c..150864622 100644
--- a/app/javascript/controllers/theme_controller.js
+++ b/app/javascript/controllers/theme_controller.js
@@ -1,48 +1,63 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["sunIcon", "moonIcon"]
+  static targets = ["lightBtn", "darkBtn", "autoBtn"]
 
   connect() {
     this.applyStoredTheme()
-    this.updateIcon()
+    this.updateButtons()
   }
 
-  toggle() {
-    const currentTheme = document.documentElement.getAttribute("data-theme")
-    // If no theme is set, check system preference or default to light
-    let newTheme
-    if (!currentTheme) {
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
-      newTheme = prefersDark ? "light" : "dark"
-    } else {
-      newTheme = currentTheme === "dark" ? "light" : "dark"
-    }
-    this.setTheme(newTheme)
-    this.updateIcon()
+  setLight() {
+    this.setTheme("light")
+    document.documentElement.setAttribute("data-theme", "light")
+    this.updateButtons()
+  }
+
+  setDark() {
+    this.setTheme("dark")
+    document.documentElement.setAttribute("data-theme", "dark")
+    this.updateButtons()
+  }
+
+  setAuto() {
+    this.setTheme("auto")
+    document.documentElement.removeAttribute("data-theme")
+    this.updateButtons()
   }
 
   setTheme(theme) {
-    document.documentElement.setAttribute("data-theme", theme)
     localStorage.setItem("theme", theme)
   }
 
   applyStoredTheme() {
-    const storedTheme = localStorage.getItem("theme")
-    if (storedTheme) {
-      document.documentElement.setAttribute("data-theme", storedTheme)
+    const storedTheme = localStorage.getItem("theme") || "auto"
+
+    if (storedTheme === "light") {
+      document.documentElement.setAttribute("data-theme", "light")
+    } else if (storedTheme === "dark") {
+      document.documentElement.setAttribute("data-theme", "dark")
+    } else {
+      // auto - don't set data-theme, let CSS media query handle it
+      document.documentElement.removeAttribute("data-theme")
     }
   }
 
-  updateIcon() {
-    const currentTheme = document.documentElement.getAttribute("data-theme")
-    const isDark = currentTheme === "dark" ||
-                   (!currentTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  updateButtons() {
+    const storedTheme = localStorage.getItem("theme") || "auto"
 
-    // Show moon icon in light mode, sun icon in dark mode
-    if (this.hasSunIconTarget && this.hasMoonIconTarget) {
-      this.sunIconTarget.style.display = isDark ? "block" : "none"
-      this.moonIconTarget.style.display = isDark ? "none" : "block"
+    // Reset all buttons
+    if (this.hasLightBtnTarget) this.lightBtnTarget.removeAttribute("aria-selected")
+    if (this.hasDarkBtnTarget) this.darkBtnTarget.removeAttribute("aria-selected")
+    if (this.hasAutoBtnTarget) this.autoBtnTarget.removeAttribute("aria-selected")
+
+    // Highlight active button
+    if (storedTheme === "light" && this.hasLightBtnTarget) {
+      this.lightBtnTarget.setAttribute("aria-selected", "true")
+    } else if (storedTheme === "dark" && this.hasDarkBtnTarget) {
+      this.darkBtnTarget.setAttribute("aria-selected", "true")
+    } else if (this.hasAutoBtnTarget) {
+      this.autoBtnTarget.setAttribute("aria-selected", "true")
     }
   }
 }
diff --git a/app/views/users/_theme.html.erb b/app/views/users/_theme.html.erb
index 6ba153326..86cf694e2 100644
--- a/app/views/users/_theme.html.erb
+++ b/app/views/users/_theme.html.erb
@@ -1,16 +1,36 @@
-<button type="button" class="btn btn--icon" data-action="click->theme#toggle" title="Toggle theme" style="position: absolute; right: 3rem; top: 5px; z-index: 100;">
-  <svg data-theme-target="sunIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
-    <circle cx="12" cy="12" r="5"/>
-    <line x1="12" y1="1" x2="12" y2="3"/>
-    <line x1="12" y1="21" x2="12" y2="23"/>
-    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-    <line x1="1" y1="12" x2="3" y2="12"/>
-    <line x1="21" y1="12" x2="23" y2="12"/>
-    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-  </svg>
-  <svg data-theme-target="moonIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-  </svg>
-</button>
+<div class="flex flex-column align-center gap txt-medium--responsive txt-medium margin-block-start-double">
+  <strong class="txt-medium">Appearance</strong>
+
+  <div class="nav__hotkeys" role="list" style="margin: 1rem auto;">
+    <button type="button" class="popup__item btn borderless" data-action="click->theme#setLight" data-theme-target="lightBtn" role="listitem">
+      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5"/>
+        <line x1="12" y1="1" x2="12" y2="3"/>
+        <line x1="12" y1="21" x2="12" y2="23"/>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+        <line x1="1" y1="12" x2="3" y2="12"/>
+        <line x1="21" y1="12" x2="23" y2="12"/>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+      </svg>
+      <span>Always light</span>
+    </button>
+
+    <button type="button" class="popup__item btn borderless" data-action="click->theme#setDark" data-theme-target="darkBtn" role="listitem">
+      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+      </svg>
+      <span>Always dark</span>
+    </button>
+
+    <button type="button" class="popup__item btn borderless" data-action="click->theme#setAuto" data-theme-target="autoBtn" role="listitem">
+      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+        <line x1="8" y1="21" x2="16" y2="21"/>
+        <line x1="12" y1="17" x2="12" y2="21"/>
+      </svg>
+      <span>Same as OS</span>
+    </button>
+  </div>
+</div>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index cb95a38fd..e59e9cad8 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,10 +1,6 @@
 <% @page_title = @user.name %>
 <% me_or_you = Current.user == @user ? "me" : @user.first_name %>
 
-<% if Current.user == @user %>
-  <%= render "users/theme" %>
-<% end %>
-
 <div class="profile-layout">
   <section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
     <div class="flex flex-column gap position-relative">
@@ -43,6 +39,8 @@
     <section class="panel shadow" style="--panel-size: 45ch;">
       <%= render "users/transfer", user: @user %>
 
+      <%= render "users/theme" %>
+
       <div class="center margin-block-start-double">
         <%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
         <span>Sign out</span>