From c575ef6dc11808fe0b389419b9ae36e5943e1c02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Sat, 29 Nov 2025 16:12:47 +0100
Subject: [PATCH] feat(frontend): add page titles to navbar on mobile

- Save vertical space on mobile by showing page title in navbar
- Mobile: "spotlight.cam - {PageTitle}" instead of separate h1
- Desktop: unchanged - page titles remain as separate headings
- Saves ~60-80px vertical space on mobile devices

Pages updated:
- Dashboard, Events, Matches, History, Profile
---
 frontend/src/components/layout/Layout.jsx | 4 ++--
 frontend/src/components/layout/Navbar.jsx | 9 +++++++--
 frontend/src/pages/DashboardPage.jsx      | 4 ++--
 frontend/src/pages/EventsPage.jsx         | 6 +++---
 frontend/src/pages/HistoryPage.jsx        | 6 +++---
 frontend/src/pages/MatchesPage.jsx        | 4 ++--
 frontend/src/pages/ProfilePage.jsx        | 2 +-
 7 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/layout/Layout.jsx b/frontend/src/components/layout/Layout.jsx
index c8f7724..02ff1c4 100644
--- a/frontend/src/components/layout/Layout.jsx
+++ b/frontend/src/components/layout/Layout.jsx
@@ -1,13 +1,13 @@
 import Navbar from './Navbar';
 
-const Layout = ({ children, fullWidth = false, noPadding = false }) => {
+const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = null }) => {
   const mainClasses = fullWidth || noPadding
     ? "flex-1 flex flex-col"
     : "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8";
 
   return (
     <div className="min-h-screen bg-gray-50 flex flex-col">
-      <Navbar />
+      <Navbar pageTitle={pageTitle} />
       <main className={mainClasses}>
         {children}
       </main>
diff --git a/frontend/src/components/layout/Navbar.jsx b/frontend/src/components/layout/Navbar.jsx
index b39371f..979d4ac 100644
--- a/frontend/src/components/layout/Navbar.jsx
+++ b/frontend/src/components/layout/Navbar.jsx
@@ -7,7 +7,7 @@ import { matchesAPI } from '../../services/api';
 import { connectSocket, disconnectSocket, getSocket } from '../../services/socket';
 import { MATCH_STATUS } from '../../constants';
 
-const Navbar = () => {
+const Navbar = ({ pageTitle = null }) => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const [pendingMatchesCount, setPendingMatchesCount] = useState(0);
@@ -67,7 +67,12 @@ const Navbar = () => {
           <div className="flex items-center">
             <Link to="/dashboard" className="flex items-center space-x-2">
               <Video className="w-8 h-8 text-primary-600" />
-              <span className="text-xl font-bold text-gray-900">spotlight.cam</span>
+              <span className="text-xl font-bold text-gray-900">
+                <span className="hidden lg:inline">spotlight.cam</span>
+                <span className="lg:hidden">
+                  {pageTitle ? `spotlight.cam - ${pageTitle}` : 'spotlight.cam'}
+                </span>
+              </span>
             </Link>
           </div>
           {/* Desktop menu */}
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 8e0f95a..412eb29 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -160,9 +160,9 @@ const DashboardPage = () => {
   const hasOutgoing = matchRequests?.outgoing?.length > 0;
 
   return (
-    <Layout>
+    <Layout pageTitle="Dashboard">
       <div className="max-w-5xl mx-auto">
-        <div className="mb-8">
+        <div className="hidden lg:block mb-8">
           <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
           <p className="text-gray-600 mt-1">
             Welcome back, {user?.firstName || user?.username}!
diff --git a/frontend/src/pages/EventsPage.jsx b/frontend/src/pages/EventsPage.jsx
index 895e62b..d96dc94 100644
--- a/frontend/src/pages/EventsPage.jsx
+++ b/frontend/src/pages/EventsPage.jsx
@@ -192,10 +192,10 @@ const EventsPage = () => {
   };
 
   return (
-    <Layout>
+    <Layout pageTitle="Events">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
-        <p className="text-gray-600 mb-8">Join an event and start connecting with other dancers</p>
+        <h1 className="hidden lg:block text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
+        <p className="hidden lg:block text-gray-600 mb-8">Join an event and start connecting with other dancers</p>
 
         {canLoadMorePast && (
           <div className="mb-4 flex justify-center">
diff --git a/frontend/src/pages/HistoryPage.jsx b/frontend/src/pages/HistoryPage.jsx
index 618b5e4..74f5770 100644
--- a/frontend/src/pages/HistoryPage.jsx
+++ b/frontend/src/pages/HistoryPage.jsx
@@ -5,10 +5,10 @@ import { MATCH_STATUS } from '../constants';
 
 const HistoryPage = () => {
   return (
-    <Layout>
+    <Layout pageTitle="History">
       <div className="max-w-4xl mx-auto">
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">Collaboration history</h1>
-        <p className="text-gray-600 mb-8">Your previous matches and ratings</p>
+        <h1 className="hidden lg:block text-3xl font-bold text-gray-900 mb-2">Collaboration history</h1>
+        <p className="hidden lg:block text-gray-600 mb-8">Your previous matches and ratings</p>
 
         {/* Matches Section */}
         <div className="mb-12">
diff --git a/frontend/src/pages/MatchesPage.jsx b/frontend/src/pages/MatchesPage.jsx
index e587989..50de404 100644
--- a/frontend/src/pages/MatchesPage.jsx
+++ b/frontend/src/pages/MatchesPage.jsx
@@ -125,9 +125,9 @@ const MatchesPage = () => {
   const otherMatches = filteredMatches.filter(m => !(m.status === MATCH_STATUS.PENDING && !m.isInitiator));
 
   return (
-    <Layout noPadding>
+    <Layout noPadding pageTitle="Matches">
       <div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-6">
+        <div className="hidden lg:block mb-6">
           <h1 className="text-3xl font-bold text-gray-900">Match Requests</h1>
           <p className="text-gray-600 mt-2">
             Manage your dance partner connections
diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx
index 6ca2753..4554f3f 100644
--- a/frontend/src/pages/ProfilePage.jsx
+++ b/frontend/src/pages/ProfilePage.jsx
@@ -10,7 +10,7 @@ const ProfilePage = () => {
   const [activeTab, setActiveTab] = useState('profile');
 
   return (
-    <Layout>
+    <Layout pageTitle="Profile">
       <div className="min-h-screen bg-gray-50 py-8">
         <div className="max-w-4xl mx-auto px-4">
           {/* Header */}