RomanNum3ral
/
whisper-money
mirror of https://github.com/whisper-money/whisper-money.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(budgets): make budget title clickable with muted hover effect (#186) 

## Summary

- Wraps the budget name in `BudgetListCard` with an Inertia `<Link>`
that navigates to the budget detail page
- Applies the same `-my-1 -ml-1.5 ... rounded-md px-1.5 py-1
transition-colors hover:bg-muted` hover effect used on dashboard account
card titles
- The existing "View Details" button in the card footer is unchanged
This commit is contained in:
Víctor Falcón 2026-03-03 10:47:37 +00:00 committed by GitHub
parent 40a7942b85
commit 970e85814e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/budgets/budget-list-card.tsx
View File

@ -84,7 +84,14 @@ export function BudgetListCard({ budget, currencyCode }: Props) {
<CardHeader>
<div className="flex items-start justify-between">
<div className="space-y-1">
<CardTitle className="text-xl">{budget.name}</CardTitle>
<CardTitle className="text-xl">
<Link
href={show({ budget: budget.id }).url}
className="-my-1 -ml-1.5 inline-flex items-center rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
>
{budget.name}
</Link>
</CardTitle>
<CardDescription className="flex items-center gap-2">
<Calendar className="h-3 w-3" />
{periodLabel}

2
resources/js/components/budgets/budget-period-navigation.tsx
View File

@ -67,7 +67,7 @@ export function BudgetPeriodNavigation({
<button
onClick={handleCurrent}
className="border border-border bg-background px-3 py-1.5 text-center text-sm font-medium hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
className="border border-border bg-background px-3 py-1.5 text-center text-sm font-medium text-nowrap hover:bg-accent focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
>
{periodLabel}
</button>

26
resources/js/pages/budgets/show.tsx
View File

@ -13,13 +13,11 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Skeleton } from '@/components/ui/skeleton';
import { useLocale } from '@/hooks/use-locale';
import AppSidebarLayout from '@/layouts/app/app-sidebar-layout';
import { BreadcrumbItem } from '@/types';
import { Account, Bank } from '@/types/account';
import { Budget, BudgetPeriod, getBudgetPeriodTypeLabel } from '@/types/budget';
import { Budget, BudgetPeriod } from '@/types/budget';
import { Category } from '@/types/category';
import { formatDate } from '@/utils/date';
import { __ } from '@/utils/i18n';
import { Head, router } from '@inertiajs/react';
import { ChevronDown, Loader2 } from 'lucide-react';
@ -46,7 +44,6 @@ export default function BudgetShow({
banks,
currencyCode,
}: Props) {
const locale = useLocale();
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
@ -82,10 +79,6 @@ export default function BudgetShow({
return null;
}, [budget]);
const periodTypeLabel = useMemo(() => {
return getBudgetPeriodTypeLabel(budget.period_type);
}, [budget.period_type]);
const periodTransactions = useMemo(() => {
return (
currentPeriod.budget_transactions
@ -94,16 +87,6 @@ export default function BudgetShow({
);
}, [currentPeriod]);
const periodDescriptionLabel = useMemo(() => {
const start = formatDate(
currentPeriod.start_date,
"MMM d, ''yy",
locale,
);
const end = formatDate(currentPeriod.end_date, "MMM d, ''yy", locale);
return `${start} - ${end}`;
}, [currentPeriod, locale]);
return (
<AppSidebarLayout breadcrumbs={breadcrumbs}>
<Head title={budget.name} />
@ -129,13 +112,6 @@ export default function BudgetShow({
</span>
)}
</div>
<span className="opacity-25">/</span>
<div className="inline">
<span>{periodDescriptionLabel} </span>
<span className="opacity-50">
({__(periodTypeLabel)})
</span>
</div>
</div>
}
/>