update the search results view

app/assets/stylesheets/earthworks.css

@@ -69,11 +69,7 @@
   box-shadow: -4px 4px 4px 0px var(--stanford-fog-light);
 }
 
-.document-counter {
-  display: none;
-}
-
-.documents-list .documentHeader .index_title {
-  margin-left: .75rem;
-  align-self: center;
+.documents-list .document {
+  padding-top: 0px;
+  margin-top: 0px;
 }

app/components/earthworks/search_result_component.html.erb

@@ -0,0 +1,33 @@
+<%# This template copies from Blacklight's components/document_component.html.erb 
+      # for the wrapping `content_tag @component` structure
+      # and adds custom layout within for the document header, status-icons and more-info areas %>
+
+<%= content_tag @component,
+  id: @id,
+  data: {
+    'document-id': @document.id.to_s.parameterize,
+    'document-counter': @counter,
+    'search-results-target': 'result',
+    'action': 'mouseenter->search-results#previewResultOnMap mouseleave->search-results#clearPreview'
+  },
+  itemscope: true,
+  itemtype: @document.itemtype,
+  class: classes.flatten.join(' ') do %>
+
+    <%= content_tag :div, class: 'documentHeader index-split d-flex flex-grow-1 flex-column m-2', data: { layer_id: @document.id, geom: @document.geometry.geojson } do %>
+      <h3 class="index_title d-flex flex-grow-1">
+        <%= helpers.link_to_document(@document, counter: @counter, itemprop: "name") %>
+      </h3>
+
+      <div class='status-icons flex-grow-1 ms-0'>
+        <%= render Geoblacklight::HeaderIconsComponent.new(document: @document) %>
+      </div>
+    <% end %>
+  <% end %>
+  <div class='more-info-area border-bottom'>
+    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse'>
+      <small itemprop="description">
+        <%= index_fields_display %>
+      </small>
+    </div>
+  </div>

app/components/earthworks/search_result_component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Earthworks
+  class SearchResultComponent < Geoblacklight::SearchResultComponent
+  end
+end

app/components/geoblacklight/header_icons_component.html.erb

@@ -0,0 +1,7 @@
+<div>
+  <% @fields.each do |field| %>
+    <% icon, label = get_icon(field) %>
+    <%= icon %>
+    <span class="me-1"><%= label %></span>
+  <% end %>
+</div>

app/components/geoblacklight/header_icons_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Geoblacklight
+  class HeaderIconsComponent < ViewComponent::Base
+    attr_reader :document, :fields, :icon_name
+
+    def initialize(document:,
+                   fields: [Settings.FIELDS.RESOURCE_CLASS, Settings.FIELDS.PROVIDER, Settings.FIELDS.ACCESS_RIGHTS])
+      @document = document
+      @fields = fields
+      super
+    end
+
+    def get_icon(field)
+      icon_name = @document[field]
+      if icon_name&.include?('Datasets') && @document[Settings.FIELDS.RESOURCE_TYPE]
+        specific_icon = @document[Settings.FIELDS.RESOURCE_TYPE]
+        specific_icon = specific_icon.first if specific_icon.is_a?(Array)
+        specific_icon = specific_icon&.gsub(' data', '')
+        icon = geoblacklight_icon(specific_icon)
+        return [icon, specific_icon] unless icon.include?('icon-missing')
+      end
+      icon_name = icon_name.first if icon_name.is_a?(Array)
+      [geoblacklight_icon(icon_name), icon_name]
+    end
+  end
+end

app/controllers/catalog_controller.rb

@@ -34,7 +34,7 @@ class CatalogController < ApplicationController
     # config.index.show_link = 'title_display'
     # config.index.record_display_type = 'format'
 
-    config.index.document_component = Geoblacklight::SearchResultComponent
+    config.index.document_component = Earthworks::SearchResultComponent
     config.index.title_field = Settings.FIELDS.TITLE
 
     config.crawler_detector = ->(req) { req.env['HTTP_USER_AGENT']&.include?('bot') }