From 3fea3931f528db198446e03792441c50ff892551 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 28 May 2026 23:50:03 -0500
Subject: [PATCH] style: AP badge next to bill name instead of blue dot

Tracker and mobile tracker rows now show a small AP badge
immediately to the right of the bill name, replacing the
blue dot on the left.
---
 client/components/MobileTrackerRow.jsx | 16 +++++++--------
 client/pages/TrackerPage.jsx           | 27 +++++++++++++++-----------
 package.json                           |  2 +-
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/client/components/MobileTrackerRow.jsx b/client/components/MobileTrackerRow.jsx
index 40f4356..4c82f2a 100644
--- a/client/components/MobileTrackerRow.jsx
+++ b/client/components/MobileTrackerRow.jsx
@@ -175,14 +175,6 @@ export const MobileTrackerRow = React.memo(function MobileTrackerRow({ row, year
         <div className="flex min-w-0 items-start justify-between gap-3">
           <div className="min-w-0">
             <div className="flex min-w-0 items-center gap-2">
-              {row.autopay_enabled && (
-                <span
-                  className="inline-flex shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-sky-500"
-                  title="Autopay"
-                >
-                  AP
-                </span>
-              )}
               <button
                 type="button"
                 onClick={() => onEditBill?.(row)}
@@ -195,6 +187,14 @@ export const MobileTrackerRow = React.memo(function MobileTrackerRow({ row, year
               >
                 {row.name}
               </button>
+              {row.autopay_enabled && (
+                <span
+                  className="inline-flex shrink-0 rounded border border-sky-500/25 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-bold leading-none text-sky-600 dark:text-sky-300"
+                  title="Autopay"
+                >
+                  AP
+                </span>
+              )}
             </div>
             {row.monthly_notes && (
               <p className="mt-1 line-clamp-2 text-xs italic text-amber-500/80" title={row.monthly_notes}>
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index 9faa8d8..859c43f 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -1016,9 +1016,6 @@ function Row({ row, year, month, refresh, index, onEditBill }) {
         {/* Bill name + category + monthly notes (if set) */}
         <TableCell className="w-[18%] py-3">
           <div className="flex items-center gap-2.5">
-            {row.autopay_enabled && (
-              <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" title="Autopay" />
-            )}
             <div>
               <div className="flex items-center gap-1">
                 {row.website ? (
@@ -1039,6 +1036,14 @@ function Row({ row, year, month, refresh, index, onEditBill }) {
                     {row.name}
                   </span>
                 )}
+                {row.autopay_enabled && (
+                  <span
+                    className="inline-flex shrink-0 rounded border border-sky-500/25 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-bold leading-none text-sky-600 dark:text-sky-300"
+                    title="Autopay"
+                  >
+                    AP
+                  </span>
+                )}
                 <Button
                   size="icon" variant="ghost"
                   className="h-7 w-7 opacity-100 transition-opacity text-muted-foreground hover:text-foreground hover:bg-accent lg:opacity-0 lg:group-hover:opacity-100"
@@ -1412,14 +1417,6 @@ function MobileTrackerRow({ row, year, month, refresh, index, onEditBill }) {
         <div className="flex min-w-0 items-start justify-between gap-3">
           <div className="min-w-0">
             <div className="flex min-w-0 items-center gap-2">
-              {row.autopay_enabled && (
-                <span
-                  className="inline-flex shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-sky-500"
-                  title="Autopay"
-                >
-                  AP
-                </span>
-              )}
               {row.website ? (
                 <a
                   href={row.website}
@@ -1438,6 +1435,14 @@ function MobileTrackerRow({ row, year, month, refresh, index, onEditBill }) {
                   {row.name}
                 </span>
               )}
+              {row.autopay_enabled && (
+                <span
+                  className="inline-flex shrink-0 rounded border border-sky-500/25 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-bold leading-none text-sky-600 dark:text-sky-300"
+                  title="Autopay"
+                >
+                  AP
+                </span>
+              )}
               <Button
                 size="icon" variant="ghost"
                 className="h-7 w-7 opacity-100 transition-opacity text-muted-foreground hover:text-foreground hover:bg-accent lg:opacity-0 lg:group-hover:opacity-100"
diff --git a/package.json b/package.json
index 9eb4b7c..71944c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bill-tracker",
-  "version": "0.30.4",
+  "version": "0.30.5",
   "description": "Monthly bill tracking system",
   "main": "server.js",
   "scripts": {