search tags when on click

lib/memex_web/components/contexts_table_component.ex

@@ -105,7 +105,17 @@ defmodule MemexWeb.Components.ContextsTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.context_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, context, %{actions: actions}) do

lib/memex_web/components/notes_table_component.ex

@@ -105,7 +105,17 @@ defmodule MemexWeb.Components.NotesTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.note_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, note, %{actions: actions}) do

lib/memex_web/components/pipelines_table_component.ex

@@ -118,7 +118,17 @@ defmodule MemexWeb.Components.PipelinesTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.pipeline_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, pipeline, %{actions: actions}) do

lib/memex_web/live/context_live/show.html.heex

@@ -3,7 +3,13 @@
     <%= @context.slug %>
   </h1>
 
-  <p><%= if @context.tags, do: @context.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @context.tags do %>
+      <.link navigate={Routes.context_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
   <.context_content context={@context} />
 

lib/memex_web/live/note_live/show.html.heex

@@ -3,7 +3,13 @@
     <%= @note.slug %>
   </h1>
 
-  <p><%= if @note.tags, do: @note.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @note.tags do %>
+      <.link navigate={Routes.note_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
   <.note_content note={@note} />
 

lib/memex_web/live/pipeline_live/show.html.heex

@@ -3,7 +3,13 @@
     <%= @pipeline.slug %>
   </h1>
 
-  <p><%= if @pipeline.tags, do: @pipeline.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @pipeline.tags do %>
+      <.link navigate={Routes.pipeline_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
   <%= if @pipeline.description do %>
     <textarea

lib/memex_web/templates/error/error.html.heex

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
-      <%= dgettext("errors", "Error") %>| memEx
+      <%= dgettext("errors", "Error") %> | memEx
     </title>
     <link rel="stylesheet" href="/css/app.css" />
     <script defer type="text/javascript" src="/js/app.js">