Issue #3507508: Define files template and dynamic java-script for search

assets/js/file-search.js

+(function (Drupal) {
+  Drupal.behaviors.fileSearch = {
+    attach: function (context) {
+      document
+        .getElementById("fileSearch")
+        .addEventListener("keyup", function () {
+          let filter = this.value.toLowerCase();
+          let files = document.querySelectorAll(".file-item");
+          console.log(files);
+
+          files.forEach((file) => {
+            let fileName = file.getAttribute("data-name").toLowerCase();
+            if (fileName.includes(filter)) {
+              file.style.display = "flex"; // Show matching files
+            } else {
+              file.style.display = "none"; // Hide non-matching files
+            }
+          });
+        });
+    },
+  };
+})(Drupal);

assets/style/seeds-page.pcss.css

 @import "./variables.pcss.css";
 @import "./general.pcss.css";
+@import "./widget-types.pcss.css";

assets/style/widget-types.pcss.css

+.file-container {
+  width: 100%;
+  margin: 20px auto;
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-shadow: $box-shadow;
+
+  .search-box {
+    width: 100%;
+    max-width: 400px;
+    padding: 10px;
+    margin: 20px auto;
+    display: block;
+    font-size: 16px;
+    border: 2px solid $border-color;
+    border-radius: 8px;
+    outline: none;
+    transition: $transition-time;
+    &:focus {
+      border-color: $primary-color;
+      box-shadow: $focus-shadow;
+    }
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #ececec;
+    background: $white;
+    transition: background $transition-time, transform $transition-time;
+    &:last-child {
+      border-bottom: none;
+    }
+    &:nth-child(even) {
+      background: $even-bg;
+    }
+    &:hover {
+      background: $hover-bg;
+      transform: translateX(5px);
+    }
+  }
+  .field__item {
+    flex: 1;
+  }
+  .file-info {
+    text-align: end;
+  }
+  .file-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    margin-right: 20px;
+    border-radius: 50%;
+    background: $file-icon-bg;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .file-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: $primary-color;
+    display: block;
+  }
+
+  .file-size {
+    font-size: 14px;
+    color: $text-color;
+  }
+}

seeds_widgets.module

@@ -6,6 +6,7 @@
 
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\StringTranslation\ByteSizeMarkup;
 
 /**
  * Implements hook_help().
@@ -23,6 +24,18 @@ function seeds_widgets_help($route_name, RouteMatchInterface $route_match) {
   }
 }
 
+/**
+ * Implements hook_theme().
+ */
+function seeds_widgets_theme($existing, $type, $theme, $path) {
+
+  $templates['field__block_content__field_seeds_unlimited_media__seeds_files'] = [
+    'base hook' => 'field',
+  ];
+
+  return $templates;
+}
+
 /**
  * Implements hook_entity_view_mode_alter().
  */
@@ -32,3 +45,38 @@ function seeds_widgets_entity_view_mode_alter(&$view_mode, EntityInterface $enti
     $view_mode = str_replace("paragraph.", "", $view_mode_id);
   }
 }
+
+/**
+ *
+ */
+function seeds_widgets_preprocess_field__block_content__field_seeds_unlimited_media__seeds_files(&$variables) {
+  $entity = $variables["element"]["#object"];
+  // Map MIME types to icon paths.
+  $icon_map = [
+    'text/plain' => '/modules/contrib/seeds_widgets/assets/images/plain.png',
+    'application/msword' => '/modules/contrib/seeds_widgets/assets/images/document.png',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document' => '/modules/contrib/seeds_widgets/assets/images/docx.png',
+    'application/pdf' => '/modules/contrib/seeds_widgets/assets/images/pdf.png',
+    'text/csv' => '/modules/contrib/seeds_widgets/assets/images/csv.png',
+  ];
+
+  /** @var \Drupal\seeds_widgets\SeedsWidgetsManager $seeds_widgets_manager */
+  $seeds_widgets_manager = \Drupal::service('seeds_widgets.manager');
+  if ($seeds_widgets_manager::isSeedsBlock($entity, 'seeds_files')) {
+    foreach ($variables["items"] as &$item) {
+      $media = $item['content']['#media'];
+      $file = $media->get("field_media_file")->entity;
+
+      if ($file && $file instanceof File) {
+        $mime_type = $file->getMimeType();
+
+        $item['name'] = $file->getFilename();
+        $item['size'] = ByteSizeMarkup::create($file->getSize())->__toString();
+        $item['type'] = $mime_type;
+        $item['icon'] = $icon_map[$mime_type] ?? '/modules/contrib/seeds_widgets/assets/images/document.png';
+      }
+
+    }
+  }
+
+}

templates/field--block-content--field-seeds-unlimited-media--seeds-files.html.twig

+{{ attach_library('seeds_widgets/file_search') }}
+
+<div class="file-container">
+    <input type="text" id="fileSearch" placeholder="🔍 Search files..." class="search-box">
+
+    {% for item in items %}
+        <div class="file-item" data-name="{{ item.name }}">
+            <div class="file-icon">
+                <img src="{{ item.icon }}" alt="{{ item.name }} Icon">
+            </div>
+            <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+            <div class="file-info">
+                <span class="file-name">{{ item.name }}</span>
+                <span class="file-size">{{ item.size }}</span>
+            </div>
+        </div>
+    {% endfor %}
+</div>
\ No newline at end of file