From c2d620025e5bf0b5c8b4553eb73117312bcacb77 Mon Sep 17 00:00:00 2001 From: elpatron Date: Sat, 30 May 2026 15:10:11 +0200 Subject: [PATCH] feat(ui): Beta-Badge in Login-, Dashboard- und Logbuch-Titelzeile Wiederverwendbare BetaBadge-Komponente mit i18n-Tooltip. Co-authored-by: Cursor --- client/src/App.css | 34 +++++++++++++++++++++- client/src/App.tsx | 2 ++ client/src/components/AuthOnboarding.tsx | 6 +++- client/src/components/BetaBadge.tsx | 19 ++++++++++++ client/src/components/LogbookDashboard.tsx | 6 +++- client/src/i18n/locales/de.json | 4 ++- client/src/i18n/locales/en.json | 4 ++- 7 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 client/src/components/BetaBadge.tsx diff --git a/client/src/App.css b/client/src/App.css index 3421dd9..2868e45 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -63,6 +63,16 @@ body { margin-bottom: 15px; } +.auth-brand-title-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 14px; +} + +.auth-brand-title-row h1, .auth-brand h1 { font-size: 32px; font-weight: 700; @@ -71,7 +81,7 @@ body { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - margin: 0 0 14px 0; + margin: 0; line-height: 1.25; letter-spacing: -0.5px; } @@ -3191,6 +3201,28 @@ html.theme-cupertino .events-scroll-container { border: 1px solid rgba(251, 191, 36, 0.25); } +.beta-badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 999px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--app-accent-light); + background: var(--app-accent-bg); + border: 1px solid var(--app-accent-focus-ring); + flex-shrink: 0; +} + +.header-brand-title-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px; +} + .role-badge { display: inline-flex; align-items: center; diff --git a/client/src/App.tsx b/client/src/App.tsx index 58e2a02..5d1e7ee 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -28,6 +28,7 @@ import PwaInstallPrompt from './components/PwaInstallPrompt.tsx' import PwaUpdatePrompt from './components/PwaUpdatePrompt.tsx' import AppFooter from './components/AppFooter.tsx' import LogbookRoleBadge from './components/LogbookRoleBadge.tsx' +import BetaBadge from './components/BetaBadge.tsx' import { db } from './services/db.js' import { getLogbookAccess } from './services/logbookAccess.js' import type { LogbookAccessRole } from './services/logbook.js' @@ -452,6 +453,7 @@ function App() {

{activeLogbookTitle}

+ {activeAccessRole && activeAccessRole !== 'OWNER' && ( )} diff --git a/client/src/components/AuthOnboarding.tsx b/client/src/components/AuthOnboarding.tsx index d614c05..8e02d43 100644 --- a/client/src/components/AuthOnboarding.tsx +++ b/client/src/components/AuthOnboarding.tsx @@ -13,6 +13,7 @@ import { } from '../services/auth.js' import { KeyRound, ShieldAlert, Languages, HelpCircle, UserRound, X } from 'lucide-react' import RegistrationDisclaimer from './RegistrationDisclaimer.tsx' +import BetaBadge from './BetaBadge.tsx' interface AuthOnboardingProps { onAuthenticated: () => void @@ -408,7 +409,10 @@ export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnbo
Kapteins Daagbok -

{t('app.name')}

+
+

{t('app.name')}

+ +

{t('auth.tagline')}

diff --git a/client/src/components/BetaBadge.tsx b/client/src/components/BetaBadge.tsx new file mode 100644 index 0000000..a67fabd --- /dev/null +++ b/client/src/components/BetaBadge.tsx @@ -0,0 +1,19 @@ +import { useTranslation } from 'react-i18next' + +interface BetaBadgeProps { + className?: string +} + +export default function BetaBadge({ className = '' }: BetaBadgeProps) { + const { t } = useTranslation() + + return ( + + {t('app.beta')} + + ) +} diff --git a/client/src/components/LogbookDashboard.tsx b/client/src/components/LogbookDashboard.tsx index 1cf44cb..e2fb9ef 100644 --- a/client/src/components/LogbookDashboard.tsx +++ b/client/src/components/LogbookDashboard.tsx @@ -4,6 +4,7 @@ import { useLiveQuery } from 'dexie-react-hooks' import { db } from '../services/db.js' import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js' import LogbookRoleBadge from './LogbookRoleBadge.tsx' +import BetaBadge from './BetaBadge.tsx' import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js' import { logoutUser } from '../services/auth.js' import { useDialog } from './ModalDialog.tsx' @@ -177,7 +178,10 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
-

{t('app.name')}

+
+

{t('app.name')}

+ +

{t('app.tagline')}

diff --git a/client/src/i18n/locales/de.json b/client/src/i18n/locales/de.json index c360709..fc7ffb9 100644 --- a/client/src/i18n/locales/de.json +++ b/client/src/i18n/locales/de.json @@ -2,7 +2,9 @@ "translation": { "app": { "name": "Kapteins Daagbok", - "tagline": "Privates Yacht-Logbuch" + "tagline": "Privates Yacht-Logbuch", + "beta": "Beta", + "beta_hint": "Beta-Version — Funktionen können sich noch ändern" }, "nav": { "dashboard": "Dashboard", diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json index a813db7..60ea864 100644 --- a/client/src/i18n/locales/en.json +++ b/client/src/i18n/locales/en.json @@ -2,7 +2,9 @@ "translation": { "app": { "name": "Kapteins Daagbok", - "tagline": "Private Yacht Logbook" + "tagline": "Private Yacht Logbook", + "beta": "Beta", + "beta_hint": "Beta release — features may still change" }, "nav": { "dashboard": "Dashboard",