From dc790d7662a1740213fdb3e9185f3f9b44b183c6 Mon Sep 17 00:00:00 2001
From: neo773 <neo773@protonmail.com>
Date: Mon, 14 Apr 2025 22:57:43 +0530
Subject: [PATCH] WIP

---
 app/assets/images/icon-assistant.svg         | 20 +++++++++++++-------
 app/helpers/application_helper.rb            |  4 ++--
 app/views/layouts/application.html.erb       |  2 +-
 app/views/layouts/sidebar/_nav_item.html.erb |  2 +-
 app/views/shared/_icon_custom.html.erb       |  6 ++++++
 5 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 app/views/shared/_icon_custom.html.erb

diff --git a/app/assets/images/icon-assistant.svg b/app/assets/images/icon-assistant.svg
index 1e4e7d2a..7ba1299f 100644
--- a/app/assets/images/icon-assistant.svg
+++ b/app/assets/images/icon-assistant.svg
@@ -1,25 +1,31 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect x="0.75" y="0.75" width="18.5" height="18.5" rx="5.25"
+        class="gradient-fill"
         fill="url(#paint0_linear_2046_1939)" />
-    <rect x="0.75" y="0.75" width="18.5" height="18.5" rx="5.25" stroke="#818181" stroke-width="1.5" />
+    <rect x="0.75" y="0.75" width="18.5" height="18.5" rx="5.25" stroke="currentColor" stroke-width="1.5" />
     <path
         d="M13.166 5.78146C13.4233 5.77662 13.6358 5.98129 13.6407 6.2386C13.6575 7.13281 13.688 8.02308 13.7308 8.91583C13.7431 9.1729 13.5447 9.39128 13.2876 9.40361C13.0306 9.41593 12.8122 9.21753 12.7999 8.96046C12.7567 8.05922 12.7259 7.1599 12.7089 6.25615C12.704 5.99883 12.9087 5.78631 13.166 5.78146Z"
-        fill="#737373" />
+        fill="currentColor" />
     <path
         d="M9.35116 6.19917C9.49883 5.98839 9.44768 5.69781 9.2369 5.55013C9.02612 5.40246 8.73554 5.45361 8.58786 5.66439C8.20561 6.20997 7.79785 6.74728 7.3802 7.29762C7.22057 7.50796 7.05946 7.72025 6.89782 7.93558C6.89774 7.8919 6.89758 7.84771 6.89727 7.80294C6.89466 7.42332 6.88115 7.01776 6.8079 6.61074C6.76232 6.35744 6.52004 6.18906 6.26674 6.23464C6.01345 6.28022 5.84506 6.5225 5.89064 6.7758C5.94925 7.10149 5.96277 7.44189 5.9653 7.80935C5.96592 7.90008 5.96583 7.9938 5.96575 8.08947C5.96549 8.36824 5.96523 8.66365 5.98243 8.95029C5.98629 9.01454 6.00299 9.07497 6.02989 9.12923C5.58396 9.77068 5.16482 10.433 4.81446 11.1202C4.8097 11.1296 4.80269 11.1428 4.79392 11.1593C4.74038 11.2602 4.62146 11.4842 4.55147 11.7C4.51162 11.8229 4.46721 12.0002 4.48814 12.1832C4.49932 12.281 4.53101 12.3969 4.60706 12.506C4.68604 12.6193 4.7952 12.6996 4.91859 12.7462C5.67618 13.0326 6.51425 13.0618 7.30714 13.0015C7.95092 12.9525 8.60078 12.8405 9.17979 12.7407C9.31222 12.7179 9.44094 12.6957 9.56504 12.6751C9.81891 12.6329 9.99049 12.3928 9.94826 12.1389C9.90603 11.8851 9.66599 11.7135 9.41211 11.7557C9.27728 11.7782 9.14113 11.8016 9.00391 11.8252C8.42721 11.9244 7.83168 12.0269 7.2364 12.0722C6.58727 12.1216 5.98075 12.0984 5.45339 11.9432C5.49547 11.8288 5.55538 11.7146 5.60631 11.6175C5.61995 11.5915 5.63296 11.5667 5.64479 11.5435C6.11404 10.623 6.72498 9.73396 7.38096 8.84686C7.61644 8.52843 7.86038 8.20687 8.10509 7.8843C8.53175 7.3219 8.96074 6.75642 9.35116 6.19917Z"
-        fill="#737373" />
+        fill="currentColor" />
     <path
         d="M13.1953 13.7096C13.2749 13.4649 13.141 13.2019 12.8962 13.1224C12.6515 13.0428 12.3886 13.1767 12.309 13.4215C12.1983 13.7621 12.0525 14.0208 11.8709 14.199C11.6971 14.3694 11.4701 14.4868 11.1471 14.517C10.6661 14.5621 10.1781 14.3594 9.96528 14.0074C9.83214 13.7871 9.54566 13.7165 9.32541 13.8496C9.10516 13.9828 9.03455 14.2693 9.16769 14.4895C9.61336 15.2268 10.4996 15.5138 11.2341 15.445C11.7632 15.3954 12.192 15.1895 12.5235 14.8644C12.8471 14.547 13.0561 14.1379 13.1953 13.7096Z"
-        fill="#737373" />
+        fill="currentColor" />
     <path
         d="M13.166 5.78146C13.4233 5.77662 13.6358 5.98129 13.6407 6.2386C13.6575 7.13281 13.688 8.02308 13.7308 8.91583C13.7431 9.1729 13.5447 9.39128 13.2876 9.40361C13.0306 9.41593 12.8122 9.21753 12.7999 8.96046C12.7567 8.05922 12.7259 7.1599 12.7089 6.25615C12.704 5.99883 12.9087 5.78631 13.166 5.78146Z"
-        stroke="#737373" stroke-width="0.3" stroke-linecap="round" />
+        stroke="currentColor" stroke-width="0.3" stroke-linecap="round" />
     <path
         d="M9.35116 6.19917C9.49883 5.98839 9.44768 5.69781 9.2369 5.55013C9.02612 5.40246 8.73554 5.45361 8.58786 5.66439C8.20561 6.20997 7.79785 6.74728 7.3802 7.29762C7.22057 7.50796 7.05946 7.72025 6.89782 7.93558C6.89774 7.8919 6.89758 7.84771 6.89727 7.80294C6.89466 7.42332 6.88115 7.01776 6.8079 6.61074C6.76232 6.35744 6.52004 6.18906 6.26674 6.23464C6.01345 6.28022 5.84506 6.5225 5.89064 6.7758C5.94925 7.10149 5.96277 7.44189 5.9653 7.80935C5.96592 7.90008 5.96583 7.9938 5.96575 8.08947C5.96549 8.36824 5.96523 8.66365 5.98243 8.95029C5.98629 9.01454 6.00299 9.07497 6.02989 9.12923C5.58396 9.77068 5.16482 10.433 4.81446 11.1202C4.8097 11.1296 4.80269 11.1428 4.79392 11.1593C4.74038 11.2602 4.62146 11.4842 4.55147 11.7C4.51162 11.8229 4.46721 12.0002 4.48814 12.1832C4.49932 12.281 4.53101 12.3969 4.60706 12.506C4.68604 12.6193 4.7952 12.6996 4.91859 12.7462C5.67618 13.0326 6.51425 13.0618 7.30714 13.0015C7.95092 12.9525 8.60078 12.8405 9.17979 12.7407C9.31222 12.7179 9.44094 12.6957 9.56504 12.6751C9.81891 12.6329 9.99049 12.3928 9.94826 12.1389C9.90603 11.8851 9.66599 11.7135 9.41211 11.7557C9.27728 11.7782 9.14113 11.8016 9.00391 11.8252C8.42721 11.9244 7.83168 12.0269 7.2364 12.0722C6.58727 12.1216 5.98075 12.0984 5.45339 11.9432C5.49547 11.8288 5.55538 11.7146 5.60631 11.6175C5.61995 11.5915 5.63296 11.5667 5.64479 11.5435C6.11404 10.623 6.72498 9.73396 7.38096 8.84686C7.61644 8.52843 7.86038 8.20687 8.10509 7.8843C8.53175 7.3219 8.96074 6.75642 9.35116 6.19917Z"
-        stroke="#737373" stroke-width="0.3" stroke-linecap="round" />
+        stroke="currentColor" stroke-width="0.3" stroke-linecap="round" />
     <path
         d="M13.1953 13.7096C13.2749 13.4649 13.141 13.2019 12.8962 13.1224C12.6515 13.0428 12.3886 13.1767 12.309 13.4215C12.1983 13.7621 12.0525 14.0208 11.8709 14.199C11.6971 14.3694 11.4701 14.4868 11.1471 14.517C10.6661 14.5621 10.1781 14.3594 9.96528 14.0074C9.83214 13.7871 9.54566 13.7165 9.32541 13.8496C9.10516 13.9828 9.03455 14.2693 9.16769 14.4895C9.61336 15.2268 10.4996 15.5138 11.2341 15.445C11.7632 15.3954 12.192 15.1895 12.5235 14.8644C12.8471 14.547 13.0561 14.1379 13.1953 13.7096Z"
-        stroke="#737373" stroke-width="0.3" stroke-linecap="round" />
+        stroke="currentColor" stroke-width="0.3" stroke-linecap="round" />
+    <style>
+        [data-theme=dark] .gradient-fill {
+            fill: transparent;
+        }
+    </style>
     <defs>
         <linearGradient id="paint0_linear_2046_1939" x1="10" y1="6.25" x2="10" y2="20"
             gradientUnits="userSpaceOnUse">
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 9f457c7b..64321595 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -5,8 +5,8 @@ module ApplicationHelper
     render partial: "shared/icon", locals: { key:, size:, color: }
   end
 
-  def icon_image(key, size: "md", color: "current")
-    render partial: "shared/icon_image", locals: { key:, size:, color: }
+  def icon_custom(key, size: "md", color: "current")
+    render partial: "shared/icon_custom", locals: { key:, size:, color: }
   end
 
   # Convert alpha (0-1) to 8-digit hex (00-FF)
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2487dcfb..b61c6588 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -125,7 +125,7 @@
         </li>
 
         <li>
-          <%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "assistant", is_custom: true %>
+          <%= render "layouts/sidebar/nav_item", name: "Assistant", path: chats_path, icon_key: "icon-assistant", is_custom: true %>
         </li>
       </ul>
     </nav>
diff --git a/app/views/layouts/sidebar/_nav_item.html.erb b/app/views/layouts/sidebar/_nav_item.html.erb
index 779e5f9d..6b7dd382 100644
--- a/app/views/layouts/sidebar/_nav_item.html.erb
+++ b/app/views/layouts/sidebar/_nav_item.html.erb
@@ -7,7 +7,7 @@
     <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-white md:bg-container-inset" => page_active?(path)) %>
 
     <%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white md:bg-container-inset shadow-xs text-primary" : "group-hover:bg-white-hover md:group-hover:bg-container-inset-hover text-secondary") do %>
-      <%= is_custom ? icon_image(icon_key) : icon(icon_key) %>
+      <%= is_custom ? icon_custom(icon_key) : icon(icon_key) %>
     <% end %>
   </div>
 
diff --git a/app/views/shared/_icon_custom.html.erb b/app/views/shared/_icon_custom.html.erb
new file mode 100644
index 00000000..ae3b6935
--- /dev/null
+++ b/app/views/shared/_icon_custom.html.erb
@@ -0,0 +1,6 @@
+<%# locals: (key:, size: "md", color: "current") %>
+
+<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
+<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
+
+<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>