Top bar for Quick Log

src/components/Tracker/SporadicView.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CheckCircle, Plus, Pencil, Trash2, X, Save } from 'lucide-react';
+import { TopBar } from '../ui/TopBar';
 import { Language, WorkoutSet } from '../../types';
 import { t } from '../../services/i18n';
 import ExerciseModal from '../ExerciseModal';
@@ -76,8 +77,14 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
 
     return (
         <div className="flex flex-col h-full max-h-full overflow-hidden relative bg-surface">
-            <div className="px-4 py-3 bg-surface-container shadow-elevation-1 z-20 grid grid-cols-[1fr_auto_1fr] items-center">
-                <div className="flex justify-start">
+            <TopBar
+                title={
+                    <span className="flex items-center gap-2">
+                        <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+                        {t('quick_log', lang)}
+                    </span>
+                }
+                actions={
                     <button
                         onClick={() => {
                             resetForm();
@@ -87,16 +94,8 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
                     >
                         {t('quit', lang)}
                     </button>
-                </div>
-                <div className="flex flex-col items-center">
-                    <h2 className="text-title-medium text-on-surface flex items-center gap-2 font-medium">
-                        <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
-                        {t('quick_log', lang)}
-                    </h2>
-                </div>
-                <div />
-
-            </div>
+                }
+            />
 
             <div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6">
                 <SetLogger

src/components/ui/TopBar.tsx

@@ -2,20 +2,26 @@ import React from 'react';
 import { LucideIcon } from 'lucide-react';
 
 interface TopBarProps {
-    title: string;
+    title: string | React.ReactNode;
     icon?: LucideIcon;
     actions?: React.ReactNode;
+    leading?: React.ReactNode;
 }
 
-export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions }) => {
+export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions, leading }) => {
     return (
         <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0 rounded-b-[24px]">
-            {Icon && (
+            {leading}
+            {!leading && Icon && (
                 <div className="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
                     <Icon size={20} className="text-on-secondary-container" />
                 </div>
             )}
+            {typeof title === 'string' ? (
                 <h2 className="text-xl font-normal text-on-surface flex-1">{title}</h2>
+            ) : (
+                <div className="flex-1 text-xl font-normal text-on-surface">{title}</div>
+            )}
             {actions && <div className="flex items-center gap-2">{actions}</div>}
         </div>
     );