lib/medicode_web/components/sidebar_component.ex

defmodule MedicodeWeb.Components.SidebarComponent do
  @moduledoc """
  Main layout header component
  """

  import MedicodeWeb.CoreComponents

  use Phoenix.Component
  use MedicodeWeb, :verified_routes

  def sidebar(assigns) do
    ~H"""
    <header class="hidden w-[335px] min-w-[335px] pt-6 border-r border-gray-200 lg:flex flex-col gap-12 overflow-hidden">
      <div class="flex items-center pl-6 gap-[10.5px]">
        <img src={~p"/images/logo.svg"} width="48" />

        <h1 class="text-lg leading-normal px-2 font-semibold">
          MediCode
        </h1>
      </div>

      <%= if @current_user do %>
        <div class="flex-1 flex flex-col px-6 gap-4">
          <.link
            href={~p"/"}
            class="text-[0.8125rem] flex justify-center gap-2 w-full text-white font-semibold hover:text-slate-300 px-3 py-2 bg-emerald-600 rounded-lg"
          >
            <.icon name="hero-document-plus" />
            <span>Start a new transcription</span>
          </.link>
          <p class="text-xs leading-normal tracking-[0.2em] font-semibold uppercase">Today</p>
          <div class="flex flex-col gap-4">
            <.link
              :for={transcription <- @transcriptions}
              navigate={~p"/transcriptions/#{transcription.id}"}
              class="font-semibold text-lg leading-normal"
            >
              <%= transcription.filename %>
            </.link>
          </div>
        </div>
      <% end %>

      <ul class="flex flex-col items-center gap-4 px-4">
        <%= if @current_user do %>
          <li class="text-[0.8125rem] leading-6 text-zinc-900">
            <%= @current_user.email %>
          </li>
          <li class="w-full">
            <.link
              navigate={~p"/users/settings"}
              class="text-[0.8125rem] text-left w-full block leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
            >
              Settings
            </.link>
          </li>
          <li class="w-full">
            <.link
              href={~p"/users/log_out"}
              method="delete"
              class="text-[0.8125rem] text-left w-full block leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
            >
              Log out
            </.link>
          </li>
        <% end %>
      </ul>

      <%= if @current_user do %>
        <div class="px-6 flex flex-col items-center">
          <%= if Medicode.Coding.icd9_present?() do %>
            <div
              class="w-full px-3 py-2 bg-emerald-600 text-white text-center rounded-lg"
              title="Precalculated vector embeddings for classification labels were found."
            >
              <.icon name="hero-check-circle" /> Vector embeddings found!
            </div>
          <% else %>
            <div
              class="w-full px-3 py-2 bg-red-300 text-slate-900 text-center rounded-lg"
              title="Precalculated vector embeddings for classification labels were found."
            >
              <.icon name="hero-x-circle" /> Vector embeddings need to be built. Run
              <code class="p-1 text-sm bg-slate-300 rounded-lg">mix build_code_vectors</code>
              on the server.
            </div>
          <% end %>
        </div>
      <% end %>
    </header>
    """
  end
end