add matching icons for file uploads (#499)

lib/mindwendel/attachments.ex

@@ -19,6 +19,24 @@ defmodule Mindwendel.Attachments do
     Repo.get(File, id)
   end
 
+  @doc """
+  Returns a simplified file type: image, pdf or misc
+
+  ## Examples
+
+      iex> simplified_attached_file_type("application/pdf")
+      "pdf"
+
+  """
+  def simplified_attached_file_type(file_type) do
+    case String.split(file_type, "/") do
+      ["image", _] -> "image"
+      [_, "pdf"] -> "pdf"
+      [_, _] -> "misc"
+      [_] -> "misc"
+    end
+  end
+
   @doc """
   Returns an `%Ecto.Changeset{}` for tracking attached_file changes.
 

lib/mindwendel_web/components/core_components.ex

@@ -607,6 +607,28 @@ defmodule MindwendelWeb.CoreComponents do
     """
   end
 
+  @doc """
+  Renders a File Icon.
+
+  ## Examples
+
+      <.file_icon type="image" />
+  """
+  attr :type, :string, required: true
+  attr :class, :string, default: nil
+
+  def file_icon(assigns) do
+    ~H"""
+    <i class={[
+      "bi",
+      @type == "image" && "bi-file-earmark-image",
+      @type == "pdf" && "bi-file-earmark-pdf",
+      !Enum.member?(["image", "pdf"], @type) && "bi-file-earmark",
+      @class
+    ]} />
+    """
+  end
+
   @doc """
   Renders a [Heroicon](https://heroicons.com).
 

lib/mindwendel_web/live/idea_live/card_component.ex

@@ -1,5 +1,6 @@
 defmodule MindwendelWeb.IdeaLive.CardComponent do
   use MindwendelWeb, :live_component
+  alias Mindwendel.Attachments
   alias Mindwendel.Ideas
   alias Mindwendel.IdeaLabels
   alias Mindwendel.Likes

lib/mindwendel_web/live/idea_live/card_component.html.heex

@@ -69,8 +69,8 @@
 
     <%= if length(@idea.files) > 0 do %>
       <%= for attachment <- @idea.files do %>
-        <i class="bi bi-file-earmark"></i>
         <p class="text-muted">
+          <.file_icon type={Attachments.simplified_attached_file_type(attachment.file_type)} />
           <.link href={~p"/files/#{attachment.id}"}>
             <%= attachment.name || gettext("No filename") %>
           </.link>

lib/mindwendel_web/live/idea_live/show_component.ex

@@ -1,3 +1,5 @@
 defmodule MindwendelWeb.IdeaLive.ShowComponent do
+  alias Mindwendel.Attachments
+
   use MindwendelWeb, :live_component
 end

lib/mindwendel_web/live/idea_live/show_component.html.heex

@@ -21,9 +21,9 @@
 
   <%= if length(@idea.files) > 0 do %>
     <%= for attachment <- @idea.files do %>
-      <i class="bi bi-file-earmark"></i>
       <p class="text-muted">
-        <.link href={~p"/files/#{attachment.id}"} download={attachment.name}>
+        <.file_icon type={Attachments.simplified_attached_file_type(attachment.file_type)} />
+        <.link href={~p"/files/#{attachment.id}"}>
           <%= attachment.name || gettext("No filename") %>
         </.link>
       </p>

test/mindwendel/attachments_test.exs

@@ -11,6 +11,20 @@ defmodule Mindwendel.AttachmentsTest do
     end
   end
 
+  describe "simplified_attached_file_type" do
+    test "simplifies the file type for an image" do
+      assert Attachments.simplified_attached_file_type("image/jpeg") == "image"
+    end
+
+    test "simplifies the file type for a pdf" do
+      assert Attachments.simplified_attached_file_type("application/pdf") == "pdf"
+    end
+
+    test "simplifies the file type for an unknown file" do
+      assert Attachments.simplified_attached_file_type("application_unknown") == "misc"
+    end
+  end
+
   describe "delete_attached_file" do
     test "deletes the file" do
       idea =