From 2b8d898429c5ee73d6f499edd679be63b423463d Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Tue, 24 Feb 2026 11:21:30 +0100
Subject: [PATCH] style: match cycle status buttons to filter button pattern

All three status buttons (Paid/Suspended/Unpaid) are now always
visible. The active status is highlighted with its color (btn-active),
inactive buttons are neutral gray - identical to the filter buttons.
---
 .../show/membership_fees_component.ex         | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/lib/mv_web/live/member_live/show/membership_fees_component.ex b/lib/mv_web/live/member_live/show/membership_fees_component.ex
index 7712085..72da1da 100644
--- a/lib/mv_web/live/member_live/show/membership_fees_component.ex
+++ b/lib/mv_web/live/member_live/show/membership_fees_component.ex
@@ -218,39 +218,39 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                 <%= if @can_update_cycle do %>
                   <div class="join">
                     <button
-                      :if={cycle.status != :paid}
                       type="button"
                       phx-click="mark_cycle_status"
                       phx-value-cycle_id={cycle.id}
                       phx-value-status="paid"
                       phx-target={@myself}
-                      class="join-item btn btn-sm btn-outline btn-success"
+                      class={cycle_status_btn_class(cycle.status, :paid)}
+                      disabled={cycle.status == :paid}
                       title={gettext("Mark as paid")}
                     >
                       <.icon name="hero-check-circle" class="size-4" />
                       {gettext("Paid")}
                     </button>
                     <button
-                      :if={cycle.status != :suspended}
                       type="button"
                       phx-click="mark_cycle_status"
                       phx-value-cycle_id={cycle.id}
                       phx-value-status="suspended"
                       phx-target={@myself}
-                      class="join-item btn btn-sm btn-outline btn-warning"
+                      class={cycle_status_btn_class(cycle.status, :suspended)}
+                      disabled={cycle.status == :suspended}
                       title={gettext("Mark as suspended")}
                     >
                       <.icon name="hero-pause-circle" class="size-4" />
                       {gettext("Suspended")}
                     </button>
                     <button
-                      :if={cycle.status != :unpaid}
                       type="button"
                       phx-click="mark_cycle_status"
                       phx-value-cycle_id={cycle.id}
                       phx-value-status="unpaid"
                       phx-target={@myself}
-                      class="join-item btn btn-sm btn-outline btn-error"
+                      class={cycle_status_btn_class(cycle.status, :unpaid)}
+                      disabled={cycle.status == :unpaid}
                       title={gettext("Mark as unpaid")}
                     >
                       <.icon name="hero-x-circle" class="size-4" />
@@ -1221,6 +1221,19 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
   defp translate_receipt_type("income"), do: gettext("Income")
   defp translate_receipt_type(other), do: other
 
+  # Returns CSS classes for a cycle status button.
+  # Active (current) status is highlighted with color; others are neutral gray.
+  defp cycle_status_btn_class(current_status, btn_status) do
+    base = "join-item btn btn-sm"
+
+    case {current_status == btn_status, btn_status} do
+      {true, :paid} -> "#{base} btn-success btn-active"
+      {true, :suspended} -> "#{base} btn-warning btn-active"
+      {true, :unpaid} -> "#{base} btn-error btn-active"
+      _ -> base
+    end
+  end
+
   # Helper component for section box
   attr :title, :string, required: true
   slot :inner_block, required: true