Add optional colors and icons to tags, introduce everything tag, clea…

…nup tag components

app/components/admin/boxes/box_form_component.html.erb

@@ -29,7 +29,7 @@
             </div>
             <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.select :color, @color_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.select :color, Colorized.select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
           </div>

app/components/admin/boxes/box_form_component.rb

@@ -2,6 +2,5 @@ class Admin::Boxes::BoxFormComponent < ViewComponent::Base
   def initialize(box:, action:)
     @box = box
     @action = action
-    @color_select_options = Box.colors.keys.map { |color| [color, { class: "bg-#{color}-100 text-#{color}-600" }] }
   end
 end

app/components/admin/permissions/groups_list_row_component.html.erb

@@ -13,7 +13,9 @@
     </div>
     <div class="flex justify-start items-start overflow-hidden gap-2 px-4">
       <div class="flex flex-wrap justify-start items-start gap-2">
-        <%= render Admin::Permissions::TagComponent.with_collection(@group.tags) %>
+        <% @group.tags.each do |tag| %>
+          <%= render Common::TagComponent.new(tag) %>
+        <% end  %>
       </div>
     </div>
   </div>

app/components/admin/tags/tag_form_component.html.erb

@@ -17,6 +17,16 @@
                 <%= form.text_field :name, placeholder: "Názov štítku", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
               </div>
             </div>
+            <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.select :color, Colorized.select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              </div>
+            </div>
+            <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+              <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
+                <%= form.select :icon, Iconized.select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              </div>
+            </div>
           </div>
           <div class="flex justify-start items-start self-stretch flex-grow-0 flex-shrink-0 gap-2 p-6">
             <%= link_to admin_tenant_tags_path(Current.tenant), class: "flex justify-center items-center flex-grow relative overflow-hidden gap-2.5 px-3.5 py-2.5 rounded-md bg-white border border-gray-300", data: { turbo_frame: "_top" } do %>

app/components/admin/tags/tags_list_component.html.erb

@@ -17,8 +17,8 @@
         <%= render Icons::InfoComponent.big_gray %>
       </div>
       <div class="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
-        <div class="text-center text-gray-900 text-lg font-medium leading-loose">Nataviť prístup na základe štítkov</div>
-        <div class="text-center text-gray-500 text-base font-normal leading-normal">Jednotlivý používatelia alebo skupiny používateľov môžu mať rozdielny prístup k správam</div>
+        <div class="text-center text-gray-900 text-lg font-medium leading-loose">Nastaviť prístup na základe štítkov</div>
+        <div class="text-center text-gray-500 text-base font-normal leading-normal">Jednotliví používatelia alebo skupiny používateľov môžu mať rozdielny prístup k správam</div>
       </div>
       <%= link_to admin_tenant_tag_groups_path, class: "px-3.5 py-2.5 bg-white rounded-md border border-gray-300 justify-center items-center gap-2.5 flex hover:bg-gray-100" do %>
         <p class="text-gray-900 text-base font-medium leading-normal">Nastaviť prístup</p>

app/components/admin/tags/tags_list_row_component.html.erb

@@ -1,12 +1,7 @@
 <div class="self-stretch p-6 border-b border-gray-200 items-center gap-4 inline-flex">
   <div class="grow shrink basis-0 gap-1">
     <div class="text-gray-900 text-lg font-medium leading-loose">
-      <%= tag.turbo_frame id: "tag-name-#{@tag.id}" do %>
-        <%= render Common::InlineRenameComponent.new(name: @tag.name, model: @tag, url: admin_tenant_tag_path(@tag.tenant, @tag)) %>
-      <% end %>
-      <% if @tag.external_name.present? %>
-        <span class="text-sm text-gray-600 px-2 py-1 rounded-md bg-gray-50 border border-gray-300"><%= @tag.external_name %></span>
-      <% end %>
+      <%= render Common::TagComponent.new(@tag) %>
     </div>
   </div>
   <%= render Admin::Tags::VisibilityToggleComponent.new(@tag) %>

app/components/common/box_label_component.html.erb

@@ -1,36 +1,5 @@
-<%# !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! %>
-<%# If color values are changed, adjust the color list below !!!!!!!!! %>
-<%# !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! %>
 <div class="flex shrink-0 justify-center items-center relative overflow-hidden gap-1.5 px-2 py-1 rounded-md bg-<%= @box.color %>-100 border border-<%= @box.color %>-400 <%= @classes %>">
   <span class="<%= @font_size_class %> text-left text-<%= @box.color %>-600">
     <%= @box.short_name || @box.name[0] %>
   </span>
 </div>
-
-<%#  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! %>
-<%#  Necessary to generate proper CSS for dynamically generated colors %>
-<%#  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! %>
-<%#  !!!!!!   Change values here, if values in template change  !!!!!! %>
-<%#  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! %>
-<%#  class="bg-slate-100 border border-slate-400 text-slate-600" %>
-<%#  class="bg-gray-100 border border-gray-400 text-gray-600" %>
-<%#  class="bg-zinc-100 border border-zinc-400 text-zinc-600" %>
-<%#  class="bg-neutral-100 border border-neutral-400 text-neutral-600" %>
-<%#  class="bg-stone-100 border border-stone-400 text-stone-600" %>
-<%#  class="bg-red-100 border border-red-400 text-red-600" %>
-<%#  class="bg-orange-100 border border-orange-400 text-orange-600" %>
-<%#  class="bg-amber-100 border border-amber-400 text-amber-600" %>
-<%#  class="bg-yellow-100 border border-yellow-400 text-yellow-600" %>
-<%#  class="bg-lime-100 border border-lime-400 text-lime-600" %>
-<%#  class="bg-green-100 border border-green-400 text-green-600" %>
-<%#  class="bg-emerald-100 border border-emerald-400 text-emerald-600" %>
-<%#  class="bg-teal-100 border border-teal-400 text-teal-600" %>
-<%#  class="bg-cyan-100 border border-cyan-400 text-cyan-600" %>
-<%#  class="bg-sky-100 border border-sky-400 text-sky-600" %>
-<%#  class="bg-blue-100 border border-blue-400 text-blue-600" %>
-<%#  class="bg-indigo-100 border border-indigo-400 text-indigo-600" %>
-<%#  class="bg-violet-100 border border-violet-400 text-violet-600" %>
-<%#  class="bg-purple-100 border border-purple-400 text-purple-600" %>
-<%#  class="bg-fuchsia-100 border border-fuchsia-400 text-fuchsia-600" %>
-<%#  class="bg-pink-100 border border-pink-400 text-pink-600" %>
-<%#  class="bg-rose-100 border border-rose-400 text-rose-600" %>

app/components/common/icon_component.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-3 w-3 <%= @classes %>">
+  <path stroke-linecap="round" stroke-linejoin="round" d="<%= @svg %>" />
+</svg>

app/components/common/icon_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Common
+  class IconComponent < ViewComponent::Base
+    ICONS = {
+      "key" => "M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z",
+      "fingerprint" => "M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33",
+      "pencil" => "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125",
+      "check" => "M4.5 12.75l6 6 9-13.5"
+    }.freeze
+
+    def initialize(icon, classes: "")
+      @icon = icon
+      @svg = ICONS[icon]
+      @classes = classes
+    end
+
+    def self.select_options
+      [""] + ICONS.keys
+    end
+  end
+end

app/components/common/tag_component.html.erb

@@ -1,3 +1,6 @@
-<span title="<%= @label %>" class="truncate max-w-[calc(100vw-32px)] sm:max-w-[calc(100vw-64px)]  rounded-md px-1.5 py-0.5 text-xs md:text-sm font-medium ring-1 ring-inset text-gray-600 bg-gray-50 ring-gray-500/10 <%= @classes %>">
+<span title="<%= @label %>" class="truncate max-w-[calc(100vw-32px)] sm:max-w-[calc(100vw-64px)] rounded-md px-1.5 py-0.5 text-xs md:text-sm font-medium ring-1 ring-inset text-<%= @color %>-600 bg-<%= @color %>-50 ring-<%= @color %>-500/10 <%= @classes %>">
+  <% if @icon.present? %>
+    <%= render Common::IconComponent.new(@icon, classes: "inline") %>
+  <% end %>
   <%= @label %>
 </span>

app/components/common/tag_component.rb

@@ -1,8 +1,34 @@
 module Common
   class TagComponent < ViewComponent::Base
-    def initialize(label, classes="")
-      @label = label
+    def initialize(tag, classes="", color: nil)
+      @label = tag.name || tag.external_name
       @classes = classes
+      @color = tag.color || "gray"
+      @icon = tag.icon.presence || (tag.gives_access? ? "key" : nil)
     end
   end
 end
+
+# NOTE: Tailwind processor catches these
+# class="bg-slate-50 border-slate-400 text-slate-600 ring-slate-500/10"
+# class="bg-gray-50 border-gray-400 text-gray-600 ring-gray-500/10"
+# class="bg-zinc-50 border-zinc-400 text-zinc-600 ring-zinc-500/10"
+# class="bg-neutral-50 border-neutral-400 text-neutral-600 ring-neutral-500/10"
+# class="bg-stone-50 border-stone-400 text-stone-600 ring-stone-500/10"
+# class="bg-red-50 border-red-400 text-red-600 ring-red-500/10"
+# class="bg-orange-50 border-orange-400 text-orange-600 ring-orange-500/10"
+# class="bg-amber-50 border-amber-400 text-amber-600 ring-amber-500/10"
+# class="bg-yellow-50 border-yellow-400 text-yellow-600 ring-yellow-500/10"
+# class="bg-lime-50 border-lime-400 text-lime-600 ring-lime-500/10"
+# class="bg-green-50 border-green-400 text-green-600 ring-green-500/10"
+# class="bg-emerald-50 border-emerald-400 text-emerald-600 ring-emerald-500/10"
+# class="bg-teal-50 border-teal-400 text-teal-600 ring-teal-500/10"
+# class="bg-cyan-50 border-cyan-400 text-cyan-600 ring-cyan-500/10"
+# class="bg-sky-50 border-sky-400 text-sky-600 ring-sky-500/10"
+# class="bg-blue-50 border-blue-400 text-blue-600 ring-blue-500/10"
+# class="bg-indigo-50 border-indigo-400 text-indigo-600 ring-indigo-500/10"
+# class="bg-violet-50 border-violet-400 text-violet-600 ring-violet-500/10"
+# class="bg-purple-50 border-purple-400 text-purple-600 ring-purple-500/10"
+# class="bg-fuchsia-50 border-fuchsia-400 text-fuchsia-600 ring-fuchsia-500/10"
+# class="bg-pink-50 border-pink-400 text-pink-600 ring-pink-500/10"
+# class="bg-rose-50 border-rose-400 text-rose-600 ring-rose-500/10"

app/components/message_thread_header_component.html.erb

@@ -9,7 +9,7 @@
       </div>
       <div class="flex flex-wrap justify-start items-center gap-2" data-test="tags">
         <% @thread_tags.each do |thread_tag|%>
-          <%= render MessageThreads::TagComponent.new(thread_tag) %>
+          <%= render Common::TagComponent.new(thread_tag.tag) %>
         <% end %>
         <%= link_to edit_message_thread_tags_path(@message_thread), data: { turbo_frame: "modal" }, title: "Upraviť štítky", class: "rounded-md bg-blue-100 p-1.5 hover:bg-blue-200" do %>
           <%= render Icons::TagComponent.new(css_classes: "h-4 w-4 text-blue-600", stroke_width: 2) %>

app/components/message_threads_table_row_component.html.erb

@@ -17,7 +17,7 @@
         <% if @visible_tags.present? %>
           <div class="flex flex-wrap items-start gap-1" data-test="tags">
             <% @visible_tags.each do |tag| %>
-              <%= render Common::TagComponent.new(tag.name) %>
+              <%= render Common::TagComponent.new(tag) %>
             <% end %>
           </div>
         <% end %>

app/controllers/admin/tags_controller.rb

@@ -61,6 +61,6 @@ def set_tag
   end
 
   def simple_tag_params
-    params.require(:simple_tag).permit(:name, :visible)
+    params.require(:simple_tag).permit(:name, :visible, :color, :icon)
   end
 end

app/models/box.rb

@@ -15,6 +15,8 @@
 #  tenant_id         :bigint           not null
 #
 class Box < ApplicationRecord
+  include Colorized
+
   belongs_to :tenant
   belongs_to :api_connection
 
@@ -30,32 +32,6 @@ class Box < ApplicationRecord
 
   before_create { self.color = Box.colors.keys[name.hash % Box.colors.size] if color.blank? }
 
-  enum :color,
-       {
-         slate: 'slate',
-         gray: 'gray',
-         zinc: 'zinc',
-         neutral: 'neutral',
-         stone: 'stone',
-         red: 'red',
-         orange: 'orange',
-         amber: 'amber',
-         yellow: 'yellow',
-         lime: 'lime',
-         green: 'green',
-         emerald: 'emerald',
-         teal: 'teal',
-         cyan: 'cyan',
-         sky: 'sky',
-         blue: 'blue',
-         indigo: 'indigo',
-         violet: 'violet',
-         purple: 'purple',
-         fuchsia: 'fuchsia',
-         pink: 'pink',
-         rose: 'rose'
-       }
-
   validate :validate_box_with_api_connection
 
   private

app/models/concerns/colorized.rb

@@ -0,0 +1,63 @@
+module Colorized
+  extend ActiveSupport::Concern
+
+  included do
+    enum :color,
+         {
+           slate: 'slate',
+           gray: 'gray',
+           zinc: 'zinc',
+           neutral: 'neutral',
+           stone: 'stone',
+           red: 'red',
+           orange: 'orange',
+           amber: 'amber',
+           yellow: 'yellow',
+           lime: 'lime',
+           green: 'green',
+           emerald: 'emerald',
+           teal: 'teal',
+           cyan: 'cyan',
+           sky: 'sky',
+           blue: 'blue',
+           indigo: 'indigo',
+           violet: 'violet',
+           purple: 'purple',
+           fuchsia: 'fuchsia',
+           pink: 'pink',
+           rose: 'rose'
+         }
+  end
+
+  def self.colors
+    [
+      :slate,
+      :gray,
+      :zinc,
+      :neutral,
+      :stone,
+      :red,
+      :orange,
+      :amber,
+      :yellow,
+      :lime,
+      :green,
+      :emerald,
+      :teal,
+      :cyan,
+      :sky,
+      :blue,
+      :indigo,
+      :violet,
+      :purple,
+      :fuchsia,
+      :pink,
+      :rose
+    ]
+  end
+
+  def self.select_options
+    [""] + colors.map { |color| [color, { class: "bg-#{color}-100 text-#{color}-600" }] }
+  end
+end
+

app/models/concerns/iconized.rb

@@ -0,0 +1,16 @@
+module Iconized
+  extend ActiveSupport::Concern
+
+  def self.icons
+    Common::IconComponent::ICONS.keys
+  end
+
+  def self.select_options
+    [""] + icons
+  end
+
+  included do
+    validates_inclusion_of :icon, in: Iconized.icons, allow_blank: true
+  end
+end
+

app/models/draft_tag.rb

@@ -2,15 +2,21 @@
 #
 # Table name: tags
 #
-#  id            :bigint           not null, primary key
-#  external_name :string
-#  name          :string           not null
-#  type          :string           not null
-#  visible       :boolean          default(TRUE), not null
-#  created_at    :datetime         not null
-#  updated_at    :datetime         not null
-#  owner_id      :bigint
-#  tenant_id     :bigint           not null
+#  id               :bigint           not null, primary key
+#  color            :enum
+#  external_name    :string
+#  icon             :string
+#  name             :string           not null
+#  tag_groups_count :integer          default(0), not null
+#  type             :string           not null
+#  visible          :boolean          default(TRUE), not null
+#  created_at       :datetime         not null
+#  updated_at       :datetime         not null
+#  owner_id         :bigint
+#  tenant_id        :bigint           not null
 #
 class DraftTag < Tag
+  def destroyable?
+    false
+  end
 end