Improve relationship UI handling (#42)

* Added tabbed view; improved relationships for media profile

* Adds new maybe_limit method for queries

* Improves UI for media items, associated tasks

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -0,0 +1,37 @@
+defmodule PinchflatWeb.CustomComponents.TabComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Takes a list of tabs and renders them in a tabbed layout.
+  """
+  slot :tab, required: true do
+    attr :title, :string, required: true
+  end
+
+  def tabbed_layout(assigns) do
+    ~H"""
+    <div
+      x-data="{ openTab: 0, activeClasses: 'text-meta-5 border-meta-5', inactiveClasses: 'border-transparent' }"
+      class="w-full"
+    >
+      <div class="mb-6 flex flex-wrap gap-5 border-b border-strokedark sm:gap-10">
+        <a
+          :for={{tab, idx} <- Enum.with_index(@tab)}
+          href="#"
+          @click.prevent={"openTab = #{idx}"}
+          x-bind:class={"openTab === #{idx} ? activeClasses : inactiveClasses"}
+          class="border-b-2 py-4 text-sm font-medium hover:text-meta-5 md:text-base"
+        >
+          <span class="text-xl"><%= tab.title %></span>
+        </a>
+      </div>
+      <div>
+        <div :for={{tab, idx} <- Enum.with_index(@tab)} x-show={"openTab === #{idx}"} class="font-medium leading-relaxed">
+          <%= render_slot(tab) %>
+        </div>
+      </div>
+    </div>
+    """
+  end
+end

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -23,7 +23,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   attr :href, :string, required: true
   slot :inner_block
 
-  def reference_link(assigns) do
+  def inline_link(assigns) do
     ~H"""
     <.link href={@href} target="_blank" class="text-blue-500 hover:text-blue-300">
       <%= render_slot(@inner_block) %>