tint QOL

7189beb · gmorell · 2025-08-26 02:59

8 files +76 -9

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