neiam
/apollos_crib
It's Apollo's Crib
public · Issues · Pulls 1 · Labels · Forks · Compare · Actions success · Badges · Packages
⭐
Log in to mark this repository.
tint QOL
7189beb · gmorell · 2025-08-26 02:59
Files changed
modified
apps/room_sanctum/lib/room_sanctum_web/live/cfg_query_live/index.ex
+52
−2
@@ -6,10 +6,15 @@ defmodule RoomSanctumWeb.QueryLive.Index do
| 6 | 6 | |
| 7 | 7 | @impl true |
| 8 | 8 | def mount(_params, _session, socket) do |
| 9 | + queries = list_cfg_queries(socket.assigns.current_user.id) | |
| 10 | + available_tints = get_available_tints(queries) | |
| 11 | + | |
| 9 | 12 | {:ok, |
| 10 | 13 | socket |
| 11 | 14 | |> assign(:show_info, false) |
| 12 | − |> stream(:cfg_queries, list_cfg_queries(socket.assigns.current_user.id))} | |
| 15 | + |> assign(:tint, nil) | |
| 16 | + |> assign(:available_tints, available_tints) | |
| 17 | + |> stream(:cfg_queries, queries)} | |
| 13 | 18 | end |
| 14 | 19 | |
| 15 | 20 | @impl true |
@@ -37,7 +42,13 @@ defmodule RoomSanctumWeb.QueryLive.Index do
| 37 | 42 | |
| 38 | 43 | @impl true |
| 39 | 44 | def handle_info({RoomSanctumWeb.QueryLive.FormComponent, {:saved, query}}, socket) do |
| 40 | − {:noreply, stream_insert(socket, :cfg_queries, query)} | |
| 45 | + queries = list_cfg_queries(socket.assigns.current_user.id) | |
| 46 | + available_tints = get_available_tints(queries) | |
| 47 | + | |
| 48 | + {:noreply, | |
| 49 | + socket | |
| 50 | + |> assign(:available_tints, available_tints) | |
| 51 | + |> stream_insert(:cfg_queries, query)} | |
| 41 | 52 | end |
| 42 | 53 | |
| 43 | 54 | @impl true |
@@ -52,10 +63,49 @@ defmodule RoomSanctumWeb.QueryLive.Index do
| 52 | 63 | {:noreply, socket |> assign(:show_info, !socket.assigns.show_info)} |
| 53 | 64 | end |
| 54 | 65 | |
| 66 | + def handle_event("set-tint", %{"tint"=> tint}, socket) do | |
| 67 | + IO.inspect({"set-tint", tint, socket.assigns.tint}) | |
| 68 | + case socket.assigns.tint == tint do | |
| 69 | + true -> {:noreply, socket |> assign(:tint, nil) |> stream(:cfg_queries, list_cfg_queries(socket.assigns.current_user.id), reset: true)} | |
| 70 | + false -> {:noreply, socket |> assign(:tint, tint) |> stream(:cfg_queries, list_cfg_queries(socket.assigns.current_user.id, tint), reset: true)} | |
| 71 | + end | |
| 72 | + end | |
| 73 | + | |
| 55 | 74 | defp list_cfg_queries(uid) do |
| 56 | 75 | Configuration.list_cfg_queries({:user, uid}) |
| 57 | 76 | end |
| 58 | 77 | |
| 78 | + defp list_cfg_queries(uid, tint) do | |
| 79 | + Configuration.list_cfg_queries({:user, uid}) |> Enum.filter(fn q -> | |
| 80 | + (q.meta && q.meta.tint == tint) || (q.source && q.source.meta && q.source.meta.tint == tint) | |
| 81 | + end) | |
| 82 | + end | |
| 83 | + | |
| 84 | + defp get_available_tints(queries) do | |
| 85 | + queries | |
| 86 | + |> Enum.flat_map(fn query -> | |
| 87 | + tints = [] | |
| 88 | + | |
| 89 | + # Add query tint if it exists | |
| 90 | + tints = if query.meta && query.meta.tint do | |
| 91 | + [query.meta.tint | tints] | |
| 92 | + else | |
| 93 | + tints | |
| 94 | + end | |
| 95 | + | |
| 96 | + # Add source tint if it exists | |
| 97 | + tints = if query.source && query.source.meta && query.source.meta.tint do | |
| 98 | + [query.source.meta.tint | tints] | |
| 99 | + else | |
| 100 | + tints | |
| 101 | + end | |
| 102 | + | |
| 103 | + tints | |
| 104 | + end) | |
| 105 | + |> Enum.uniq() | |
| 106 | + |> Enum.sort() | |
| 107 | + end | |
| 108 | + | |
| 59 | 109 | def get_icon(type) do |
| 60 | 110 | RoomSanctumWeb.IconHelpers.icon(type) |
| 61 | 111 | end |
modified
apps/room_sanctum/lib/room_sanctum_web/live/cfg_query_live/index.html.heex
+24
−7
@@ -27,8 +27,25 @@
| 27 | 27 | <tr> |
| 28 | 28 | <th>Source</th> |
| 29 | 29 | <th>Query</th> |
| 30 | − <th></th> | |
| 31 | − <th></th> | |
| 30 | + <th> | |
| 31 | + <span class="text-amber-500"></span> | |
| 32 | + <span class="text-violet-500"></span> | |
| 33 | + <span class="text-rose-500"></span> | |
| 34 | + <span class="text-emerald-500"></span> | |
| 35 | + <span class="text-sky-500"></span> | |
| 36 | + <span class="text-stone-500"></span> | |
| 37 | + <span class="text-stone-950"></span> | |
| 38 | + | |
| 39 | + <!-- Available tints - clickable filters --> | |
| 40 | + <%= for tint <- @available_tints do %> | |
| 41 | + <span class="cursor-pointer mx-1" phx-click="set-tint" phx-value-tint={tint}> | |
| 42 | + <i class={"fa-solid fa-circle text-#{tint}-500 hover:text-#{tint}-700 #{if @tint == tint, do: "text-lg", else: ""}"}></i> | |
| 43 | + </span> | |
| 44 | + <% end %> | |
| 45 | + </th> | |
| 46 | + <th> | |
| 47 | + | |
| 48 | + </th> | |
| 32 | 49 | </tr> |
| 33 | 50 | </thead> |
| 34 | 51 | <tbody id="cfg_queries"> |
@@ -45,17 +62,17 @@
| 45 | 62 | <%= cond do %> |
| 46 | 63 | <% query.meta && query.meta.tint && query.source.meta.tint -> %> |
| 47 | 64 | <!-- Both query and source tints - use fa-stack --> |
| 48 | − <span class="fa-stack"> | |
| 49 | − <i class={"fa-solid fa-circle fa-fw fa-stack-1x z-30 text-#{query.source.meta.tint}-500"}></i> | |
| 50 | − <i class={"fa-solid fa-circle-half-stroke fa-fw z-40 fa-spin fa-stack-1x text-#{query.meta.tint}-500"}></i> | |
| 65 | + <span class="fa-stack cursor-pointer" phx-click="set-tint" phx-value-tint={query.meta.tint}> | |
| 66 | + <i class={"fa-solid fa-circle fa-2x fa-fw fa-stack-1x z-30 text-#{query.source.meta.tint}-500"}></i> | |
| 67 | + <i class={"fa-solid fa-circle-half-stroke fa-2x fa-fw z-40 fa-stack-1x text-#{query.meta.tint}-500"}></i> | |
| 51 | 68 | |
| 52 | 69 | </span> |
| 53 | 70 | <% query.meta && query.meta.tint -> %> |
| 54 | 71 | <!-- Query tint only --> |
| 55 | − <i class={"fa-solid fa-circle-half-stroke fa-spin fa-fw text-#{query.meta.tint}-500"}></i> | |
| 72 | + <i class={"fa-solid fa-circle-half-stroke fa-fw text-#{query.meta.tint}-500 cursor-pointer"} phx-click="set-tint" phx-value-tint={query.meta.tint}></i> | |
| 56 | 73 | <% query.source.meta.tint -> %> |
| 57 | 74 | <!-- Source tint only --> |
| 58 | − <i class={"fa-solid fa-circle text-#{query.source.meta.tint}-500"}></i> | |
| 75 | + <i class={"fa-solid fa-circle text-#{query.source.meta.tint}-500 cursor-pointer"} phx-click="set-tint" phx-value-tint={query.source.meta.tint}></i> | |
| 59 | 76 | <% true -> %> |
| 60 | 77 | <!-- No tints --> |
| 61 | 78 | <% end %> |
Parents: abf819f