sinfin · pj258 · Dec 4, 2025 · Dec 5, 2025 · Dec 12, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,11 @@ All notable changes to this project will be documented in this file.
 - Cells -> ViewComponents refactoring:
   - Folio::Console::Form::HeaderCell -> Folio::Console::Form::HeaderComponent
   - Folio::PublishableHintCell -> Folio::Publishable::HintComponent
+  - Folio::Console::Ui::FlagCell -> Folio::Console::Ui::FlagComponent
+  - Folio::Console::Ui::WarningRibbonCell -> Folio::Console::Ui::WarningRibbonComponent
+  - Folio::Console::ConsoleNotes::CatalogueTooltipCell -> Folio::Console::ConsoleNotes::CatalogueTooltipComponent
+  - Folio::Console::CatalogueSortArrowsCell -> Folio::Console::CatalogueSortArrowsComponent
+  - Folio::Console::Ui::WithIconCell -> Folio::Console::Ui::WithIconComponent
 - generalized tiptap_config.use_as_single_image_in_toolbar -> tiptap_config.toolbar with icon and slot names
 
 ### Fixed

diff --git a/app/cells/folio/console/atoms/previews/_inner_insert.slim b/app/cells/folio/console/atoms/previews/_inner_insert.slim
@@ -4,9 +4,8 @@
       = folio_icon(:link)
 
     span.f-c-atoms-previews__insert-hint-big-btn
-      == cell('folio/console/ui/with_icon',
-              t('.add_atom'),
-              icon: :plus)
+      == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.add_atom'),
+                                                                          icon: :plus))
 
     span.f-c-atoms-previews__insert-hint-btn
       = folio_icon(:plus)

diff --git a/app/cells/folio/console/catalogue_cell.rb b/app/cells/folio/console/catalogue_cell.rb
@@ -428,9 +428,9 @@ def label_for(attr = nil, skip_desktop_header: false, allow_sorting: false)
       else
         base = klass.human_attribute_name(attr)
 
-        if allow_sorting && arrows = cell("folio/console/catalogue_sort_arrows",
-                                          klass:,
-                                          attr:).show
+        component = Folio::Console::CatalogueSortArrowsComponent.new(klass:, attr:)
+        if allow_sorting && component.render?
+          arrows = render_view_component(component)
           content_tag(:span, "#{base} #{arrows}", class: "f-c-catalogue__label-with-arrows")
         else
           base

diff --git a/app/cells/folio/console/catalogue_sort_arrows_cell.rb b/app/cells/folio/console/catalogue_sort_arrows_cell.rb
diff --git a/app/cells/folio/console/dropdown/show.slim b/app/cells/folio/console/dropdown/show.slim
@@ -9,8 +9,7 @@
             span.dropdown-divider__title = link[:title]
           .dropdown-divider__line
       - else
-        == cell('folio/console/ui/with_icon',
-                link[:title],
-                href: link[:url],
-                class: 'dropdown-item',
-                icon: link[:icon])
+        == render_view_component(Folio::Console::Ui::WithIconComponent.new(link[:title],
+                                                                            href: link[:url],
+                                                                            html_class: 'dropdown-item',
+                                                                            icon: link[:icon]))
diff --git a/app/cells/folio/console/merges/form/show.slim b/app/cells/folio/console/merges/form/show.slim
@@ -9,9 +9,8 @@
           = t('.original')
 
         h2.h4.col.my-4.f-c-merges-form__title-with-icon
-          == cell('folio/console/ui/with_icon',
-                  t('.duplicate'),
-                  icon: :chevron_left)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.duplicate'),
+                                                                              icon: :chevron_left))
 
       .f-c-merges-form__rows
         - model.structure.each do |row|

diff --git a/app/cells/folio/console/new_record_modal/toggle.slim b/app/cells/folio/console/new_record_modal/toggle.slim
@@ -1,9 +1,8 @@
-== cell('folio/console/ui/with_icon',
-        options[:label] || t('folio.console.actions.add'),
-        class: "f-c-new-record-modal__toggle",
-        href: "#add",
-        icon: :plus,
-        tag: { \
-          "data-target" => ".#{modal_class_name}", \
-          "data-class" => model.to_s \
-        })
+== render_view_component(Folio::Console::Ui::WithIconComponent.new(options[:label] || t('folio.console.actions.add'),
+                                                                    html_class: "f-c-new-record-modal__toggle",
+                                                                    href: "#add",
+                                                                    icon: :plus,
+                                                                    data: { \
+                                                                      "target" => ".#{modal_class_name}", \
+                                                                      "class" => model.to_s \
+                                                                    }))
diff --git a/app/cells/folio/console/private_attachments/list/show.slim b/app/cells/folio/console/private_attachments/list/show.slim
@@ -3,12 +3,11 @@
     ul.f-c-private-attachments-list__ul
       - model.each do |pa|
         li.f-c-private-attachments-list__li.my-2
-          == cell('folio/console/ui/with_icon',
-                  pa.to_label,
-                  icon: :file_document,
-                  href: Folio::S3.url_rewrite(pa.file.remote_url(expires: 1.hour.from_now)),
-                  target: "_blank",
-                  class: 'f-c-private-attachments-list__a')
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(pa.to_label,
+                                                                              icon: :file_document,
+                                                                              href: Folio::S3.url_rewrite(pa.file.remote_url(expires: 1.hour.from_now)),
+                                                                              target: "_blank",
+                                                                              html_class: 'f-c-private-attachments-list__a'))
 
   - else
     .text-muted = t('folio.console.blank')
diff --git a/app/cells/folio/console/private_attachments/single_dropzone/show.slim b/app/cells/folio/console/private_attachments/single_dropzone/show.slim
@@ -9,9 +9,8 @@ div class=class_name
     - else
       .d-flex.align-items-center
         a.me-3.btn.btn-outline-secondary href=href target="_blank"
-          == cell('folio/console/ui/with_icon',
-                  t('.download'),
-                  icon: :file_document)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.download'),
+                                                                              icon: :file_document))
 
         .f-c-private-attachments-single-dropzone__upload.me-3 data=upload_data
           = folio_icon(:edit,
@@ -31,8 +30,7 @@ div class=class_name
           data=upload_data
           class="btn btn-outline-secondary"
         ]
-          == cell('folio/console/ui/with_icon',
-                  t('.upload'),
-                  icon: :file_document)
+          == render_view_component(Folio::Console::Ui::WithIconComponent.new(t('.upload'),
+                                                                              icon: :file_document))
 
   span.folio-loader.f-c-private-attachments-single-dropzone__loader
diff --git a/app/cells/folio/console/publishable_inputs/item/show.slim b/app/cells/folio/console/publishable_inputs/item/show.slim
@@ -37,6 +37,5 @@ div class=class_name data=data
                   atom_setting: model[:atom_setting] == false ? nil : "#{field}_until"
 
   - if field == :published
-    == cell('folio/console/ui/warning_ribbon',
-            t('.unpublished'),
-            class: "f-c-publishable-inputs-item__warning-ribbon")
+    == render_view_component(Folio::Console::Ui::WarningRibbonComponent.new(text: t('.unpublished'),
+                                                                            class_name: "f-c-publishable-inputs-item__warning-ribbon"))
diff --git a/app/cells/folio/console/ui/warning_ribbon/show.slim b/app/cells/folio/console/ui/warning_ribbon/show.slim
diff --git a/app/cells/folio/console/ui/warning_ribbon_cell.rb b/app/cells/folio/console/ui/warning_ribbon_cell.rb
diff --git a/app/cells/folio/console/ui/with_icon/show.slim b/app/cells/folio/console/ui/with_icon/show.slim
diff --git a/app/cells/folio/console/ui/with_icon_cell.rb b/app/cells/folio/console/ui/with_icon_cell.rb
diff --git a/app/components/folio/console/audited/bar_component.slim b/app/components/folio/console/audited/bar_component.slim
@@ -10,9 +10,8 @@
                                                            href: restore_url,
                                                            data: { confirm: t("folio.console.confirmation"), method: :post }))
 
-      == cell('folio/console/ui/with_icon',
-              t('.show_current'),
-              href: show_url,
-              right_icon: :close,
-              icon_options: { height: 16 },
-              class: "f-c-audited-bar__current-link small")
+      = render(Folio::Console::Ui::WithIconComponent.new(t('.show_current'),
+                                                          href: show_url,
+                                                          right_icon: :close,
+                                                          icon_options: { height: 16 },
+                                                          html_class: "f-c-audited-bar__current-link small"))
diff --git a/app/components/folio/console/audited/dropdown_component.slim b/app/components/folio/console/audited/dropdown_component.slim
@@ -1,22 +1,20 @@
 .f-c-audited-dropdown.small.text-muted
   - unless @audit
-    == cell('folio/console/ui/with_icon',
-            t('.back'),
-            title: t('.back'),
-            href: @audits[1] ? version_url(@audits[1], 1) : nil,
-            icon: :arrow_u_left_top,
-            icon_options: { height: 16 },
-            class: "f-c-audited-dropdown__back #{@audits[1] ? "f-c-audited-dropdown__back--enabled" : "f-c-audited-dropdown__back--disabled"} small text-reset")
+    = render(Folio::Console::Ui::WithIconComponent.new(t('.back'),
+                                                          title: t('.back'),
+                                                          href: @audits[1] ? version_url(@audits[1], 1) : nil,
+                                                          icon: :arrow_u_left_top,
+                                                          icon_options: { height: 16 },
+                                                          html_class: "f-c-audited-dropdown__back #{@audits[1] ? "f-c-audited-dropdown__back--enabled" : "f-c-audited-dropdown__back--disabled"} small text-reset"))
 
   .f-c-audited-dropdown__dropdown.dropdown
     .f-c-audited-dropdown__toggle.dropdown-toggle[
       data-bs-toggle="dropdown"
     ]
-      == cell('folio/console/ui/with_icon',
-              t('.toggle'),
-              hover: :underline,
-              icon: :history,
-              icon_options: { height: 16 })
+      = render(Folio::Console::Ui::WithIconComponent.new(t('.toggle'),
+                                                          hover: :underline,
+                                                          icon: :history,
+                                                          icon_options: { height: 16 }))
 
     .dropdown-menu.dropdown-menu-right.f-c-audited-dropdown__menu.py-0
       - @audits.each_with_index do |version, i|

diff --git a/app/components/folio/console/catalogue_sort_arrows_component.rb b/app/components/folio/console/catalogue_sort_arrows_component.rb
@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+class Folio::Console::CatalogueSortArrowsComponent < Folio::Console::ApplicationComponent
+  bem_class_name :active, :desc
+
+  def initialize(klass:, attr:)
+    @klass = klass
+    @attr = attr
+  end
+
+  def render?
+    return false unless @klass.present?
+
+    @klass.respond_to?("sort_by_#{asc_key}") && @klass.respond_to?("sort_by_#{desc_key}")
+  end
+
+  def url
+    h = request.query_parameters.dup
+    h.delete("page")
+
+    if asc?
+      h["sort"] = desc_key
+    else
+      h["sort"] = asc_key
+    end
+
+    "#{request.path}?#{h.to_query}"
+  end
+
+  def active?
+    @active
+  end
+
+  def asc?
+    @asc
+  end
+
+  def desc?
+    @desc
+  end
+
+  def title
+    if active?
+      t(".sort_desc")
+    else
+      t(".sort_asc")
+    end
+  end
+
+  private
+    def before_render
+      @asc = controller.params[:sort] == asc_key
+      @desc = controller.params[:sort] == desc_key
+      @active = @asc || @desc
+    end
+
+    def asc_key
+      @asc_key ||= "#{@attr}_asc"
+    end
+
+    def desc_key
+      @desc_key ||= "#{@attr}_desc"
+    end
+end
diff --git a/...ue_sort_arrows/catalogue_sort_arrows.sass → ...sole/catalogue_sort_arrows_component.sass b/...ue_sort_arrows/catalogue_sort_arrows.sass → ...sole/catalogue_sort_arrows_component.sass
@@ -38,3 +38,4 @@
 
   &--desc &__inner
     transform: rotate(180deg)
+
diff --git a/...o/console/catalogue_sort_arrows/show.slim → ...sole/catalogue_sort_arrows_component.slim b/...o/console/catalogue_sort_arrows/show.slim → ...sole/catalogue_sort_arrows_component.slim
@@ -1,5 +1,5 @@
 a[
-  class=class_name
+  class=bem_class_name
   href=url
   title=title
 ]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,3 +38,4 @@

		&--desc &__inner
		transform: rotate(180deg)