feat(about): add monthly supporters section with 5 tiers

- Tier cards (Hostel Bunkmate through No Return Ticket) with gradient icons and placeholder state for empty tiers - Animated shimmer badge and subtle radial glow behind the card - Mobile-responsive layout, name chips show just the month on small screens to avoid overflow - Copy + translations for all 15 supported languages
2026-06-19 13:21:46 +00:00 · 2026-04-18 00:22:00 +02:00
parent 71637a8483
commit 0c00f8e0b3
16 changed files with 375 additions and 2 deletions
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen } from 'lucide-react'
+import { Info, Coffee, Heart, ExternalLink, Bug, Lightbulb, BookOpen, Tent, Compass, Plane, Crown, Infinity as InfinityIcon } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import Section from './Section'

@@ -7,8 +7,229 @@ interface Props {
  appVersion: string
 }

+type SupporterTierId = 'no_return_ticket' | 'lost_luggage_vip' | 'business_class_dreamer' | 'budget_traveller' | 'hostel_bunkmate'
+
+interface SupporterTier {
+  id: SupporterTierId
+  labelKey: string
+  price: string
+  gradient: string
+  glow: string
+  icon: typeof Tent
+}
+
+const SUPPORTER_TIERS: SupporterTier[] = [
+  { id: 'no_return_ticket', labelKey: 'settings.about.supporter.tier.noReturnTicket', price: '∞', gradient: 'linear-gradient(135deg, #fbbf24, #ec4899 55%, #6366f1)', glow: 'rgba(236,72,153,0.45)', icon: InfinityIcon },
+  { id: 'lost_luggage_vip', labelKey: 'settings.about.supporter.tier.lostLuggageVip', price: '$30', gradient: 'linear-gradient(135deg, #a855f7, #ec4899)', glow: 'rgba(168,85,247,0.35)', icon: Crown },
+  { id: 'business_class_dreamer', labelKey: 'settings.about.supporter.tier.businessClassDreamer', price: '$15', gradient: 'linear-gradient(135deg, #6366f1, #0ea5e9)', glow: 'rgba(99,102,241,0.35)', icon: Plane },
+  { id: 'budget_traveller', labelKey: 'settings.about.supporter.tier.budgetTraveller', price: '$10', gradient: 'linear-gradient(135deg, #14b8a6, #06b6d4)', glow: 'rgba(20,184,166,0.3)', icon: Compass },
+  { id: 'hostel_bunkmate', labelKey: 'settings.about.supporter.tier.hostelBunkmate', price: '$5', gradient: 'linear-gradient(135deg, #64748b, #94a3b8)', glow: 'rgba(100,116,139,0.25)', icon: Tent },
+]
+
+interface Supporter {
+  username: string
+  tier: SupporterTierId
+  since: string
+  link?: string
+}
+
+const SUPPORTERS: Supporter[] = [
+  { username: 'Someone', tier: 'hostel_bunkmate', since: '2026-04' },
+]
+
+function SupporterSection({ t, locale }: { t: (key: string, vars?: Record<string, string | number>) => string; locale: string }) {
+  if (SUPPORTERS.length === 0) return null
+
+  const formatSince = (yearMonth: string): string => {
+    const [y, m] = yearMonth.split('-').map(Number)
+    if (!y || !m) return yearMonth
+    try {
+      return new Date(y, m - 1, 1).toLocaleDateString(locale, { year: 'numeric', month: 'long' })
+    } catch { return yearMonth }
+  }
+
+  return (
+    <div className="supporter-section">
+      <style>{`
+        .supporter-section { margin-top: 20px; }
+        .supporter-card {
+          position: relative;
+          border-radius: 20px;
+          padding: 22px 22px 18px;
+          background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, rgba(236,72,153,0.04) 100%);
+          border: 1px solid rgba(99,102,241,0.18);
+          overflow: hidden;
+        }
+        .supporter-glow {
+          position: absolute; inset: -60px; z-index: 0; pointer-events: none;
+          background: radial-gradient(500px 240px at 15% -10%, rgba(99,102,241,0.18), transparent 60%), radial-gradient(400px 200px at 90% 110%, rgba(236,72,153,0.12), transparent 60%);
+          animation: supporterGlow 6s ease-in-out infinite;
+        }
+        .supporter-header {
+          position: relative; z-index: 1;
+          display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+          margin-bottom: 6px;
+        }
+        .supporter-badge {
+          display: inline-flex; align-items: center; gap: 6px;
+          padding: 4px 10px; border-radius: 999px;
+          background: linear-gradient(90deg, #6366f1, #ec4899, #fbbf24);
+          background-size: 200% 100%;
+          animation: supporterShimmer 4s ease-in-out infinite;
+          color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+          box-shadow: 0 4px 16px rgba(236,72,153,0.25);
+          white-space: nowrap;
+        }
+        .supporter-title {
+          margin: 0; font-size: 16px; font-weight: 700;
+          color: var(--text-primary); letter-spacing: -0.01em;
+        }
+        .supporter-subtitle {
+          position: relative; z-index: 1;
+          margin: 0 0 16px; font-size: 12.5px;
+          color: var(--text-secondary); line-height: 1.55;
+        }
+        .supporter-tiers {
+          position: relative; z-index: 1;
+          display: flex; flex-direction: column; gap: 10px;
+        }
+        .supporter-tier {
+          display: flex; align-items: flex-start; gap: 12px;
+          padding: 10px 12px; border-radius: 14px;
+          background: var(--bg-card);
+          border: 1px solid var(--border-primary);
+        }
+        .supporter-tier-icon {
+          width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
+          display: flex; align-items: center; justify-content: center;
+          color: #fff;
+        }
+        .supporter-tier-body { flex: 1; min-width: 0; }
+        .supporter-tier-head {
+          display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
+        }
+        .supporter-tier-label {
+          font-size: 13.5px; font-weight: 700; color: var(--text-primary);
+        }
+        .supporter-tier-price {
+          font-size: 11px; font-weight: 600; color: var(--text-faint);
+          padding: 1px 7px; border-radius: 6px; background: var(--bg-tertiary);
+        }
+        .supporter-tier-chips {
+          display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
+        }
+        .supporter-tier-empty {
+          font-size: 11.5px; font-style: italic; color: var(--text-faint);
+        }
+        .supporter-chip {
+          display: inline-flex; align-items: center; gap: 7px;
+          padding: 4px 10px; border-radius: 999px;
+          background: var(--bg-tertiary);
+          border: 1px solid var(--border-primary);
+          text-decoration: none;
+          transition: border-color 0.15s, box-shadow 0.15s;
+          max-width: 100%;
+        }
+        .supporter-chip-name {
+          font-size: 12px; font-weight: 600; color: var(--text-primary);
+          white-space: nowrap;
+        }
+        .supporter-chip-since {
+          font-size: 10.5px; font-weight: 500; color: var(--text-faint);
+          white-space: nowrap;
+        }
+        .supporter-chip-since-short { display: none; }
+        @keyframes supporterShimmer {
+          0%, 100% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+        }
+        @keyframes supporterGlow {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 0.75; }
+        }
+        @media (max-width: 640px) {
+          .supporter-card { border-radius: 16px; padding: 16px 14px 14px; }
+          .supporter-glow { inset: -40px; }
+          .supporter-header { gap: 8px; }
+          .supporter-badge { font-size: 10px; padding: 3px 9px; letter-spacing: 0.03em; }
+          .supporter-title { font-size: 15px; flex-basis: 100%; }
+          .supporter-subtitle { font-size: 12px; margin-bottom: 14px; }
+          .supporter-tier { padding: 10px; gap: 10px; border-radius: 12px; }
+          .supporter-tier-icon { width: 34px; height: 34px; border-radius: 10px; }
+          .supporter-tier-label { font-size: 13px; }
+          .supporter-tier-chips { gap: 5px; margin-top: 7px; }
+          .supporter-chip { padding: 3px 9px; }
+          .supporter-chip-since { font-size: 10px; }
+          .supporter-chip-since-full { display: none; }
+          .supporter-chip-since-short { display: inline; }
+        }
+      `}</style>
+      <div className="supporter-card">
+        <div className="supporter-glow" />
+
+        <div className="supporter-header">
+          <span className="supporter-badge">{t('settings.about.supporters.badge')}</span>
+          <h3 className="supporter-title">{t('settings.about.supporters.title')}</h3>
+        </div>
+        <p className="supporter-subtitle">{t('settings.about.supporters.subtitle')}</p>
+
+        <div className="supporter-tiers">
+          {SUPPORTER_TIERS.map(tier => {
+            const members = SUPPORTERS.filter(s => s.tier === tier.id)
+            const empty = members.length === 0
+            const TierIcon = tier.icon
+            return (
+              <div key={tier.id} className="supporter-tier" style={{ opacity: empty ? 0.55 : 1 }}>
+                <div className="supporter-tier-icon" style={{ background: tier.gradient, boxShadow: `0 6px 18px ${tier.glow}` }}>
+                  <TierIcon size={18} strokeWidth={2.2} />
+                </div>
+                <div className="supporter-tier-body">
+                  <div className="supporter-tier-head">
+                    <span className="supporter-tier-label">{t(tier.labelKey)}</span>
+                    <span className="supporter-tier-price">{tier.price}</span>
+                  </div>
+                  <div className="supporter-tier-chips">
+                    {empty && (
+                      <span className="supporter-tier-empty">
+                        {t('settings.about.supporters.tierEmpty')}
+                      </span>
+                    )}
+                    {members.map(m => {
+                      const chipContent = (
+                        <>
+                          <span className="supporter-chip-name">{m.username}</span>
+                          <span className="supporter-chip-since supporter-chip-since-full">
+                            · {t('settings.about.supporters.since', { date: formatSince(m.since) })}
+                          </span>
+                          <span className="supporter-chip-since supporter-chip-since-short">
+                            · {formatSince(m.since)}
+                          </span>
+                        </>
+                      )
+                      return m.link ? (
+                        <a key={m.username} href={m.link} target="_blank" rel="noopener noreferrer" className="supporter-chip"
+                          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-faint)'; e.currentTarget.style.boxShadow = `0 2px 8px ${tier.glow}` }}
+                          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+                        >
+                          {chipContent}
+                        </a>
+                      ) : (
+                        <div key={m.username} className="supporter-chip">{chipContent}</div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function AboutTab({ appVersion }: Props): React.ReactElement {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()

  return (
    <Section title={t('settings.about')} icon={Info}>
@@ -141,6 +362,8 @@ export default function AboutTab({ appVersion }: Props): React.ReactElement {
          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
        </a>
      </div>
+
+      <SupporterSection t={t} locale={locale} />
    </Section>
  )
 }
@@ -313,6 +313,16 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'اقتراح ميزة',
  'settings.about.featureRequestHint': 'اقترح ميزة جديدة',
  'settings.about.wikiHint': 'التوثيق والأدلة',
+  'settings.about.supporters.badge': 'الداعمون الشهريون',
+  'settings.about.supporters.title': 'رفاق رحلة TREK',
+  'settings.about.supporters.subtitle': 'بينما تخطّط لمسارك التالي، يساعد هؤلاء الأشخاص في التخطيط لمستقبل TREK. تذهب مساهمتهم الشهرية مباشرةً إلى التطوير والساعات الفعلية المبذولة — حتى يظلّ TREK مفتوح المصدر.',
+  'settings.about.supporters.since': 'داعم منذ {date}',
+  'settings.about.supporters.tierEmpty': 'كن الأول',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK هو مخطط سفر مستضاف ذاتيًا يساعدك على تنظيم رحلاتك من أول فكرة حتى آخر ذكرى. تخطيط يومي، ميزانية، قوائم تعبئة، صور والمزيد — كل شيء في مكان واحد، على خادمك الخاص.',
  'settings.about.madeWith': 'صُنع بـ',
  'settings.about.madeBy': 'بواسطة موريس ومجتمع مفتوح المصدر متنامٍ.',
@@ -240,6 +240,16 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Solicitar recurso',
  'settings.about.featureRequestHint': 'Sugira um novo recurso',
  'settings.about.wikiHint': 'Documentação e guias',
+  'settings.about.supporters.badge': 'Apoiadores Mensais',
+  'settings.about.supporters.title': 'Companheiros de viagem do TREK',
+  'settings.about.supporters.subtitle': 'Enquanto você planeja sua próxima rota, essas pessoas planejam junto o futuro do TREK. A contribuição mensal delas vai direto para o desenvolvimento e horas reais investidas — para o TREK continuar Open Source.',
+  'settings.about.supporters.since': 'apoiador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Seja o primeiro',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK é um planejador de viagens auto-hospedado que ajuda você a organizar suas viagens da primeira ideia à última lembrança. Planejamento diário, orçamento, listas de bagagem, fotos e muito mais — tudo em um só lugar, no seu próprio servidor.',
  'settings.about.madeWith': 'Feito com',
  'settings.about.madeBy': 'por Maurice e uma crescente comunidade open-source.',
@@ -264,6 +264,16 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Navrhnout funkci',
  'settings.about.featureRequestHint': 'Navrhněte novou funkci',
  'settings.about.wikiHint': 'Dokumentace a návody',
+  'settings.about.supporters.badge': 'Měsíční podporovatelé',
+  'settings.about.supporters.title': 'Společníci na cestě s TREK',
+  'settings.about.supporters.subtitle': 'Zatímco plánuješ další trasu, tihle lidé plánují společně se mnou budoucnost TREK. Jejich měsíční příspěvek jde přímo na vývoj a reálně strávené hodiny — aby TREK zůstal Open Source.',
+  'settings.about.supporters.since': 'podporovatel od {date}',
+  'settings.about.supporters.tierEmpty': 'Buď první',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK je samohostovaný plánovač cest, který vám pomůže organizovat výlety od prvního nápadu po poslední vzpomínku. Denní plánování, rozpočet, balicí seznamy, fotky a mnoho dalšího — vše na jednom místě, na vašem vlastním serveru.',
  'settings.about.madeWith': 'Vytvořeno s',
  'settings.about.madeBy': 'Mauricem a rostoucí open-source komunitou.',
@@ -313,6 +313,16 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Feature vorschlagen',
  'settings.about.featureRequestHint': 'Schlage ein neues Feature vor',
  'settings.about.wikiHint': 'Dokumentation & Anleitungen',
+  'settings.about.supporters.badge': 'Monatliche Unterstützer',
+  'settings.about.supporters.title': 'Reisebegleitung für TREK',
+  'settings.about.supporters.subtitle': 'Während du deine nächste Route planst, planen diese Leute mit, wie TREK weitergeht. Ihr monatlicher Beitrag fließt direkt in Entwicklung und echten Zeitaufwand — damit TREK Open Source bleibt.',
+  'settings.about.supporters.since': 'Unterstützer seit {date}',
+  'settings.about.supporters.tierEmpty': 'Sei die/der Erste',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK ist ein selbst gehosteter Reiseplaner, der dir hilft, deine Trips von der ersten Idee bis zur letzten Erinnerung zu organisieren. Tagesplanung, Budget, Packlisten, Fotos und vieles mehr — alles an einem Ort, auf deinem eigenen Server.',
  'settings.about.madeWith': 'Entwickelt mit',
  'settings.about.madeBy': 'von Maurice und einer wachsenden Open-Source-Community.',
@@ -372,6 +372,16 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Feature Request',
  'settings.about.featureRequestHint': 'Suggest a new feature',
  'settings.about.wikiHint': 'Documentation & guides',
+  'settings.about.supporters.badge': 'Monthly Supporters',
+  'settings.about.supporters.title': 'Travel companions for TREK',
+  'settings.about.supporters.subtitle': "While you're planning your next route, these folks are helping plan TREK's future. Their monthly contribution goes straight into development and real hours spent — so TREK stays Open Source.",
+  'settings.about.supporters.since': 'supporter since {date}',
+  'settings.about.supporters.tierEmpty': 'Be the first',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK is a self-hosted travel planner that helps you organize your trips from the first idea to the last memory. Day planning, budget, packing lists, photos and much more — all in one place, on your own server.',
  'settings.about.madeWith': 'Made with',
  'settings.about.madeBy': 'by Maurice and a growing open-source community.',
@@ -309,6 +309,16 @@ const es: Record<string, string> = {
  'settings.about.featureRequest': 'Solicitar función',
  'settings.about.featureRequestHint': 'Sugiere una nueva función',
  'settings.about.wikiHint': 'Documentación y guías',
+  'settings.about.supporters.badge': 'Patrocinadores Mensuales',
+  'settings.about.supporters.title': 'Compañía de viaje para TREK',
+  'settings.about.supporters.subtitle': 'Mientras planeas tu próxima ruta, estas personas ayudan a planear el futuro de TREK. Su aporte mensual va directo al desarrollo y a las horas reales invertidas — para que TREK siga siendo Open Source.',
+  'settings.about.supporters.since': 'patrocinador desde {date}',
+  'settings.about.supporters.tierEmpty': 'Sé el primero',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK es un planificador de viajes autoalojado que te ayuda a organizar tus viajes desde la primera idea hasta el último recuerdo. Planificación diaria, presupuesto, listas de equipaje, fotos y mucho más — todo en un solo lugar, en tu propio servidor.',
  'settings.about.madeWith': 'Hecho con',
  'settings.about.madeBy': 'por Maurice y una creciente comunidad de código abierto.',
@@ -308,6 +308,16 @@ const fr: Record<string, string> = {
  'settings.about.featureRequest': 'Proposer une fonctionnalité',
  'settings.about.featureRequestHint': 'Suggérez une nouvelle fonctionnalité',
  'settings.about.wikiHint': 'Documentation et guides',
+  'settings.about.supporters.badge': 'Soutiens Mensuels',
+  'settings.about.supporters.title': 'Compagnons de voyage pour TREK',
+  'settings.about.supporters.subtitle': 'Pendant que tu planifies ton prochain itinéraire, ces personnes aident à planifier l\'avenir de TREK. Leur contribution mensuelle va directement au développement et aux heures réellement passées — pour que TREK reste Open Source.',
+  'settings.about.supporters.since': 'soutien depuis {date}',
+  'settings.about.supporters.tierEmpty': 'Sois le premier',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK est un planificateur de voyage auto-hébergé qui vous aide à organiser vos voyages de la première idée au dernier souvenir. Planification journalière, budget, listes de bagages, photos et bien plus — le tout au même endroit, sur votre propre serveur.',
  'settings.about.madeWith': 'Fait avec',
  'settings.about.madeBy': 'par Maurice et une communauté open-source grandissante.',
@@ -263,6 +263,16 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Funkció javaslat',
  'settings.about.featureRequestHint': 'Javasolj egy új funkciót',
  'settings.about.wikiHint': 'Dokumentáció és útmutatók',
+  'settings.about.supporters.badge': 'Havi támogatók',
+  'settings.about.supporters.title': 'Útitársak a TREK mellett',
+  'settings.about.supporters.subtitle': 'Miközben te a következő útvonaladat tervezed, ők a TREK jövőjét tervezik velem együtt. Havi hozzájárulásuk közvetlenül fejlesztésre és valódi órákra fordítódik — hogy a TREK Open Source maradhasson.',
+  'settings.about.supporters.since': 'támogató {date} óta',
+  'settings.about.supporters.tierEmpty': 'Légy az első',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'A TREK egy saját szerveren üzemeltetett útitervező, amely segít az utazásaid megszervezésében az első ötlettől az utolsó emlékig. Napi tervezés, költségvetés, csomagolási listák, fotók és még sok más — minden egy helyen, a saját szervereden.',
  'settings.about.madeWith': 'Készítve',
  'settings.about.madeBy': 'Maurice és egy növekvő nyílt forráskódú közösség által.',
@@ -370,6 +370,16 @@ const id: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Permintaan Fitur',
  'settings.about.featureRequestHint': 'Sarankan fitur baru',
  'settings.about.wikiHint': 'Dokumentasi & panduan',
+  'settings.about.supporters.badge': 'Pendukung Bulanan',
+  'settings.about.supporters.title': 'Rekan perjalanan untuk TREK',
+  'settings.about.supporters.subtitle': 'Saat kamu merencanakan rute berikutnya, orang-orang ini ikut merencanakan masa depan TREK. Kontribusi bulanan mereka langsung masuk ke pengembangan dan jam kerja nyata — supaya TREK tetap Open Source.',
+  'settings.about.supporters.since': 'pendukung sejak {date}',
+  'settings.about.supporters.tierEmpty': 'Jadilah yang pertama',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK adalah perencana perjalanan self-hosted yang membantu kamu mengatur perjalanan dari ide pertama hingga kenangan terakhir. Perencanaan harian, anggaran, daftar bawaan, foto dan masih banyak lagi — semua di satu tempat, di servermu sendiri.',
  'settings.about.madeWith': 'Dibuat dengan',
  'settings.about.madeBy': 'oleh Maurice dan komunitas open-source yang terus berkembang.',
@@ -263,6 +263,16 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Richiedi funzionalità',
  'settings.about.featureRequestHint': 'Suggerisci una nuova funzionalità',
  'settings.about.wikiHint': 'Documentazione e guide',
+  'settings.about.supporters.badge': 'Sostenitori Mensili',
+  'settings.about.supporters.title': 'Compagni di viaggio per TREK',
+  'settings.about.supporters.subtitle': 'Mentre pianifichi il tuo prossimo itinerario, queste persone aiutano a pianificare il futuro di TREK. Il loro contributo mensile va direttamente allo sviluppo e alle ore realmente investite — per mantenere TREK Open Source.',
+  'settings.about.supporters.since': 'sostenitore da {date}',
+  'settings.about.supporters.tierEmpty': 'Sii il primo',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK è un pianificatore di viaggi self-hosted che ti aiuta a organizzare i tuoi viaggi dalla prima idea all\'ultimo ricordo. Pianificazione giornaliera, budget, liste bagagli, foto e molto altro — tutto in un unico posto, sul tuo server.',
  'settings.about.madeWith': 'Fatto con',
  'settings.about.madeBy': 'da Maurice e una crescente comunità open-source.',
@@ -308,6 +308,16 @@ const nl: Record<string, string> = {
  'settings.about.featureRequest': 'Feature aanvragen',
  'settings.about.featureRequestHint': 'Stel een nieuwe functie voor',
  'settings.about.wikiHint': 'Documentatie en handleidingen',
+  'settings.about.supporters.badge': 'Maandelijkse Steuners',
+  'settings.about.supporters.title': 'Reisgezelschap voor TREK',
+  'settings.about.supporters.subtitle': 'Terwijl jij je volgende route plant, plannen deze mensen mee aan de toekomst van TREK. Hun maandelijkse bijdrage gaat rechtstreeks naar ontwikkeling en echte uren — zodat TREK Open Source blijft.',
+  'settings.about.supporters.since': 'steuner sinds {date}',
+  'settings.about.supporters.tierEmpty': 'Wees de eerste',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK is een zelf-gehoste reisplanner die je helpt je reizen te organiseren van het eerste idee tot de laatste herinnering. Dagplanning, budget, paklijsten, foto\'s en nog veel meer — alles op één plek, op je eigen server.',
  'settings.about.madeWith': 'Gemaakt met',
  'settings.about.madeBy': 'door Maurice en een groeiende open-source community.',
@@ -281,6 +281,16 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'settings.about.featureRequest': 'Zaproponuj funkcję',
  'settings.about.featureRequestHint': 'Zaproponuj nową funkcję',
  'settings.about.wikiHint': 'Dokumentacja i poradniki',
+  'settings.about.supporters.badge': 'Miesięczni Patroni',
+  'settings.about.supporters.title': 'Towarzystwo podróży dla TREK',
+  'settings.about.supporters.subtitle': 'Gdy planujesz kolejną trasę, te osoby planują razem ze mną przyszłość TREK. Ich comiesięczny wkład idzie bezpośrednio na rozwój i realnie przepracowane godziny — aby TREK pozostał Open Source.',
+  'settings.about.supporters.since': 'patron od {date}',
+  'settings.about.supporters.tierEmpty': 'Bądź pierwszy',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK to samodzielnie hostowany planer podróży, który pomaga organizować wyprawy od pierwszego pomysłu po ostatnie wspomnienie. Planowanie dzienne, budżet, listy pakowania, zdjęcia i wiele więcej — wszystko w jednym miejscu, na własnym serwerze.',
  'settings.about.madeWith': 'Stworzone z',
  'settings.about.madeBy': 'przez Maurice\'a i rosnącą społeczność open-source.',
@@ -308,6 +308,16 @@ const ru: Record<string, string> = {
  'settings.about.featureRequest': 'Предложить функцию',
  'settings.about.featureRequestHint': 'Предложите новую функцию',
  'settings.about.wikiHint': 'Документация и руководства',
+  'settings.about.supporters.badge': 'Ежемесячные спонсоры',
+  'settings.about.supporters.title': 'Спутники TREK',
+  'settings.about.supporters.subtitle': 'Пока ты планируешь следующий маршрут, эти люди планируют вместе со мной будущее TREK. Их ежемесячный взнос идёт напрямую в разработку и реально потраченные часы — чтобы TREK оставался Open Source.',
+  'settings.about.supporters.since': 'спонсор с {date}',
+  'settings.about.supporters.tierEmpty': 'Стань первым',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK — это самостоятельно размещаемый планировщик путешествий, который помогает организовать поездки от первой идеи до последнего воспоминания. Планирование по дням, бюджет, списки вещей, фото и многое другое — всё в одном месте, на вашем собственном сервере.',
  'settings.about.madeWith': 'Сделано с',
  'settings.about.madeBy': 'Морисом и растущим open-source сообществом.',
@@ -308,6 +308,16 @@ const zh: Record<string, string> = {
  'settings.about.featureRequest': '功能建议',
  'settings.about.featureRequestHint': '建议一个新功能',
  'settings.about.wikiHint': '文档和指南',
+  'settings.about.supporters.badge': '月度支持者',
+  'settings.about.supporters.title': '与 TREK 同行的伙伴',
+  'settings.about.supporters.subtitle': '当你在规划下一段路线时，这些人也在一起规划 TREK 的未来。他们每月的支持直接用于开发与真实投入的时间——让 TREK 保持开源。',
+  'settings.about.supporters.since': '{date} 起的支持者',
+  'settings.about.supporters.tierEmpty': '成为第一个',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK 是一个自托管的旅行规划工具，帮助你从最初的想法到最后的回忆，全程组织你的旅行。日程规划、预算、行李清单、照片等——一切尽在一处，在你自己的服务器上。',
  'settings.about.madeWith': '用',
  'settings.about.madeBy': '由 Maurice 和不断壮大的开源社区打造。',
@@ -367,6 +367,16 @@ const zhTw: Record<string, string> = {
  'settings.about.featureRequest': '功能建議',
  'settings.about.featureRequestHint': '建議新功能',
  'settings.about.wikiHint': '文件與指南',
+  'settings.about.supporters.badge': '月度支持者',
+  'settings.about.supporters.title': '與 TREK 同行的夥伴',
+  'settings.about.supporters.subtitle': '當你規劃下一段路線時，這些人也在一起規劃 TREK 的未來。他們每月的支持直接用於開發與實際投入的時間——讓 TREK 保持開源。',
+  'settings.about.supporters.since': '自 {date} 起的支持者',
+  'settings.about.supporters.tierEmpty': '成為第一個',
+  'settings.about.supporter.tier.noReturnTicket': 'No Return Ticket',
+  'settings.about.supporter.tier.lostLuggageVip': 'Lost Luggage VIP',
+  'settings.about.supporter.tier.businessClassDreamer': 'Business Class Dreamer',
+  'settings.about.supporter.tier.budgetTraveller': 'Budget Traveller',
+  'settings.about.supporter.tier.hostelBunkmate': 'Hostel Bunkmate',
  'settings.about.description': 'TREK 是一款自架旅遊規劃器，幫助您從最初構想到最後回憶，整理每次旅行。日程規劃、預算、行李清單、照片及更多功能——全部集中在您自己的伺服器上。',
  'settings.about.madeWith': '以',
  'settings.about.madeBy': '由 Maurice 及不斷成長的開源社群製作。',