makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add package icon as favicon and in top bar title
All checks were successful
CI / ci (push) Successful in 12s
Details

Browse Source 
Add Lucide package icon as SVG favicon (white stroke) and display it
next to the GearBox title in the TotalsBar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-15 22:57:43 +01:00
parent 9bcdcc7168
commit 5938a686c7
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>GearBox</title> <title>GearBox</title>
</head> </head>
<body> <body>

1
public/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

12
src/client/components/TotalsBar.tsx
View File

@@ -1,6 +1,7 @@
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
import { useTotals } from "../hooks/useTotals"; import { useTotals } from "../hooks/useTotals";
import { formatPrice, formatWeight } from "../lib/formatters"; import { formatPrice, formatWeight } from "../lib/formatters";
import { LucideIcon } from "../lib/iconData";
interface TotalsBarProps { interface TotalsBarProps {
title?: string; title?: string;
@@ -30,15 +31,22 @@ export function TotalsBar({
{ label: "spent", value: formatPrice(null) }, { label: "spent", value: formatPrice(null) },
]); ]);
const titleContent = (
<span className="flex items-center gap-2">
<LucideIcon name="package" size={20} className="text-gray-500" />
{title}
</span>
);
const titleElement = linkTo ? ( const titleElement = linkTo ? (
<Link <Link
to={linkTo} to={linkTo}
className="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors" className="text-lg font-semibold text-gray-900 hover:text-gray-600 transition-colors"
> >
{title} {titleContent}
</Link> </Link>
) : ( ) : (
<h1 className="text-lg font-semibold text-gray-900">{title}</h1> <h1 className="text-lg font-semibold text-gray-900">{titleContent}</h1>
); );
// If stats prop is explicitly an empty array, show title only (dashboard mode) // If stats prop is explicitly an empty array, show title only (dashboard mode)