null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

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.
This commit is contained in:
null 2026-05-28 23:50:03 -05:00
parent 792980b8ba
commit 3fea3931f5
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/components/MobileTrackerRow.jsx
View File

@ -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}>

27
client/pages/TrackerPage.jsx
View File

@ -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"

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bill-tracker",
"version": "0.30.4",
"version": "0.30.5",
"description": "Monthly bill tracking system",
"main": "server.js",
"scripts": {