refactoring: TypeScript migration, security fixes,

client/src/components/Layout/DemoBanner.tsx

@@ -2,7 +2,26 @@ import React, { useState, useEffect } from 'react'
 import { Info, Github, Shield, Key, Users, Database, Upload, Clock, Puzzle, CalendarDays, Globe, ArrowRightLeft, Map, Briefcase, ListChecks, Wallet, FileText, Plane } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
-const texts = {
+interface DemoTexts {
+  titleBefore: string
+  titleAfter: string
+  title: string
+  description: string
+  resetIn: string
+  minutes: string
+  uploadNote: string
+  fullVersionTitle: string
+  features: string[]
+  addonsTitle: string
+  addons: [string, string][]
+  whatIs: string
+  whatIsDesc: string
+  selfHost: string
+  selfHostLink: string
+  close: string
+}
+
+const texts: Record<string, DemoTexts> = {
   de: {
     titleBefore: 'Willkommen bei ',
     titleAfter: '',
@@ -72,9 +91,9 @@ const texts = {
 const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
 const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
 
-export default function DemoBanner() {
-  const [dismissed, setDismissed] = useState(false)
-  const [minutesLeft, setMinutesLeft] = useState(59 - new Date().getMinutes())
+export default function DemoBanner(): React.ReactElement | null {
+  const [dismissed, setDismissed] = useState<boolean>(false)
+  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes())
   const { language } = useTranslation()
   const t = texts[language] || texts.en
 
@@ -98,7 +117,7 @@ export default function DemoBanner() {
         maxWidth: 480, width: '100%',
         boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
         maxHeight: '90vh', overflow: 'auto',
-      }} onClick={e => e.stopPropagation()}>
+      }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
 
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>

client/src/components/Layout/Navbar.tsx

@@ -6,18 +6,34 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import { addonsApi } from '../../api/client'
 import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
 
-const ADDON_ICONS = { CalendarDays, Briefcase, Globe }
+const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe }
 
-export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }) {
+interface NavbarProps {
+  tripTitle?: string
+  tripId?: string
+  onBack?: () => void
+  showBack?: boolean
+  onShare?: () => void
+}
+
+interface Addon {
+  id: string
+  name: string
+  icon: string
+  type: string
+}
+
+export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
   const { user, logout } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
   const { t, locale } = useTranslation()
   const navigate = useNavigate()
   const location = useLocation()
-  const [userMenuOpen, setUserMenuOpen] = useState(false)
-  const [appVersion, setAppVersion] = useState(null)
-  const [globalAddons, setGlobalAddons] = useState([])
+  const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
+  const [appVersion, setAppVersion] = useState<string | null>(null)
+  const [globalAddons, setGlobalAddons] = useState<Addon[]>([])
   const darkMode = settings.dark_mode
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)