tarakan/lib/tarakan_web/live/leaderboard_live.html.heex

<Layouts.app flash={@flash} current_scope={@current_scope} current_path={assigns[:current_path]}>
  <Layouts.page>
    <.breadcrumbs id="leaderboard-breadcrumb">
      <:crumb navigate={~p"/"}>registry</:crumb>
      <:crumb>leaderboard</:crumb>
    </.breadcrumbs>

    <div class="flex flex-col gap-3 border-b-2 border-strong pb-5 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <h1 class="font-display text-3xl font-medium uppercase tracking-[0.02em] text-ink sm:text-4xl">
          Leaderboard
        </h1>
      </div>

      <div class="flex max-w-full flex-col gap-2 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        <div
          id="leaderboard-sort"
          class="flex border border-strong font-display text-[10px] uppercase tracking-[0.12em]"
          role="group"
          aria-label="Rank by"
        >
          <button
            :for={
              {value, label} <- [
                {"reputation", "Reputation"},
                {"reviews", "Reports"},
                {"findings", "Findings"},
                {"verdicts", "Checks"}
              ]
            }
            type="button"
            phx-click="sort"
            phx-value-by={value}
            aria-pressed={to_string(@sort == value)}
            class={[
              "shrink-0 px-3 py-2 transition sm:py-1.5",
              @sort == value && "bg-btn text-btn-fg",
              @sort != value && "text-ink-faint hover:text-ink"
            ]}
          >
            {label}
          </button>
        </div>

        <div class="flex gap-2">
          <form id="leaderboard-severity-form" phx-change="filter_severity">
            <label for="leaderboard-severity" class="sr-only">Filter by severity</label>
            <select
              id="leaderboard-severity"
              name="severity"
              class="h-full border border-strong bg-ground px-2 py-2 font-display text-[10px] uppercase tracking-[0.12em] text-ink-faint transition focus:border-phosphor focus:outline-none sm:py-1.5"
            >
              <option value="" selected={is_nil(@severity)}>All severities</option>
              <option
                :for={severity <- ~w(critical high medium low info)}
                value={severity}
                selected={@severity == severity}
              >
                {severity}
              </option>
            </select>
          </form>

          <div
            id="leaderboard-window"
            class="flex border border-strong font-display text-[10px] uppercase tracking-[0.12em]"
            role="group"
            aria-label="Time window"
          >
            <button
              :for={
                {value, label} <- [
                  {"7", "7d"},
                  {"30", "30d"},
                  {"90", "90d"},
                  {"all", "All time"}
                ]
              }
              type="button"
              phx-click="filter_window"
              phx-value-window={value}
              aria-pressed={to_string(@window == value)}
              class={[
                "shrink-0 px-3 py-2 transition sm:py-1.5",
                @window == value && "bg-btn text-btn-fg",
                @window != value && "text-ink-faint hover:text-ink"
              ]}
            >
              {label}
            </button>
          </div>
        </div>
      </div>
    </div>

    <p :if={@entries == []} id="leaderboard-empty" class="mt-8 font-mono text-sm text-ink-faint">
      No ranked contributors yet.
    </p>

    <ol
      :if={@entries != []}
      id="leaderboard"
      class="mt-6 divide-y divide-rule border-t border-rule"
    >
      <li
        :for={{entry, index} <- Enum.with_index(@entries, 1)}
        id={"leaderboard-rank-#{index}"}
        class="flex items-center gap-4 py-3"
      >
        <span class={[
          "w-8 shrink-0 text-right font-display text-xl font-medium tabular-nums",
          rank_style(index)
        ]}>
          {index}
        </span>

        <div class="min-w-0 flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <.handle_link handle={entry.account.handle} class="font-mono text-sm text-ink" />
            <span class="border border-rule px-1.5 font-display text-[10px] uppercase tracking-[0.12em] text-ink-faint">
              {tier_label(entry.account.trust_tier)}
            </span>
            <span
              :for={badge <- Map.get(@badges, entry.account.id, [])}
              id={"leaderboard-rank-#{index}-badge-#{badge}"}
              class="border border-rule px-1.5 font-display text-[10px] uppercase tracking-[0.12em] text-quote"
            >
              {badge_label(badge)}
            </span>
          </div>
          <p class="mt-0.5 font-mono text-[11px] text-ink-faint">
            {entry.stats.reviews} reports · {entry.stats.findings} findings · {entry.stats.verdicts} checks<span
              :if={entry.slashed_stakes > 0}
              class="text-signal"
            > · {entry.slashed_stakes} slashed</span>
          </p>
        </div>

        <div class="shrink-0 text-right">
          <p class="font-display text-2xl font-medium tabular-nums text-ink">
            {entry.reputation.total}
          </p>
          <p class="font-mono text-[11px] text-ink-faint">
            reputation
          </p>
        </div>
      </li>
    </ol>
  </Layouts.page>
</Layouts.app>