From 3aa4af93ff7b0f9af57832ace7727db3ad45b19f Mon Sep 17 00:00:00 2001
From: uroma <uroma@rommark.dev>
Date: Mon, 19 Jan 2026 17:15:00 +0000
Subject: [PATCH] feat: add projects page route and navigation link

- Add GET /projects route in server.js with authentication check
- Serve projects.html when authenticated, redirect to login otherwise
- Add navigation header to both landing page and projects page
- Include Sessions, Projects navigation links with active state styling
- Add logout button to navigation header
- Style navigation with dark theme matching existing design
- Make navigation responsive for mobile devices

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 public/claude-landing.html | 115 ++++++++++++++++++++++++++++++++++++
 public/projects.html       | 117 ++++++++++++++++++++++++++++++++++++-
 server.js                  |  11 ++++
 3 files changed, 242 insertions(+), 1 deletion(-)
diff --git a/public/claude-landing.html b/public/claude-landing.html
index 39a9862b..78094852 100644
--- a/public/claude-landing.html
+++ b/public/claude-landing.html
@@ -6,8 +6,113 @@
     <title>Claude Code</title>
     <link rel="stylesheet" href="/claude/css/style.css">
     <link rel="stylesheet" href="/claude/claude-ide/sessions-landing.css">
+    <style>
+        /* Navigation Header Styles */
+        .nav-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(13, 13, 13, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid #333;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            z-index: 1000;
+        }
+
+        .nav-logo {
+            font-size: 20px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .nav-link {
+            padding: 8px 16px;
+            background: transparent;
+            border: 1px solid #333;
+            border-radius: 8px;
+            color: #e0e0e0;
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .nav-link:hover {
+            background: #252525;
+            border-color: #4a9eff;
+            color: #4a9eff;
+        }
+
+        .nav-link.active {
+            background: rgba(74, 158, 255, 0.15);
+            border-color: #4a9eff;
+            color: #4a9eff;
+        }
+
+        .nav-logout {
+            padding: 8px 16px;
+            background: transparent;
+            border: none;
+            color: #888;
+            font-size: 14px;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .nav-logout:hover {
+            color: #e0e0e0;
+        }
+
+        /* Adjust hero section for fixed header */
+        .hero-section {
+            padding-top: 100px;
+        }
+
+        @media (max-width: 768px) {
+            .nav-header {
+                padding: 12px 16px;
+            }
+
+            .nav-logo {
+                font-size: 18px;
+            }
+
+            .nav-link {
+                padding: 6px 12px;
+                font-size: 13px;
+            }
+
+            .hero-section {
+                padding-top: 80px;
+            }
+        }
+    </style>
 </head>
 <body class="sessions-page">
+    <!-- Navigation Header -->
+    <nav class="nav-header">
+        <div class="nav-logo">Claude Code</div>
+        <div class="nav-links">
+            <a href="/claude/" class="nav-link active">Sessions</a>
+            <a href="/projects" class="nav-link">Projects</a>
+            <button class="nav-logout" onclick="logout()">Logout</button>
+        </div>
+    </nav>
+
     <!-- Hero Section -->
     <section class="hero-section">
         <h1 class="hero-title">Claude Code</h1>
@@ -57,5 +162,15 @@
 
     <script src="/claude/js/app.js"></script>
     <script src="/claude/claude-ide/sessions-landing.js"></script>
+    <script>
+        async function logout() {
+            try {
+                await fetch('/claude/api/logout', { method: 'POST' });
+                window.location.href = '/claude/';
+            } catch (error) {
+                console.error('Logout failed:', error);
+            }
+        }
+    </script>
 </body>
 </html>
diff --git a/public/projects.html b/public/projects.html
index 2f8bdbb1..57e905cf 100644
--- a/public/projects.html
+++ b/public/projects.html
@@ -6,14 +6,119 @@
     <title>Projects - Claude Code Web Interface</title>
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/claude-ide/projects.css">
+    <style>
+        /* Navigation Header Styles */
+        .nav-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(13, 13, 13, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid #333;
+            padding: 16px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            z-index: 1000;
+        }
+
+        .nav-logo {
+            font-size: 20px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .nav-link {
+            padding: 8px 16px;
+            background: transparent;
+            border: 1px solid #333;
+            border-radius: 8px;
+            color: #e0e0e0;
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+
+        .nav-link:hover {
+            background: #252525;
+            border-color: #4a9eff;
+            color: #4a9eff;
+        }
+
+        .nav-link.active {
+            background: rgba(74, 158, 255, 0.15);
+            border-color: #4a9eff;
+            color: #4a9eff;
+        }
+
+        .nav-logout {
+            padding: 8px 16px;
+            background: transparent;
+            border: none;
+            color: #888;
+            font-size: 14px;
+            cursor: pointer;
+            transition: color 0.2s ease;
+        }
+
+        .nav-logout:hover {
+            color: #e0e0e0;
+        }
+
+        /* Adjust main content for fixed header */
+        .projects-header {
+            margin-top: 70px;
+        }
+
+        @media (max-width: 768px) {
+            .nav-header {
+                padding: 12px 16px;
+            }
+
+            .nav-logo {
+                font-size: 18px;
+            }
+
+            .nav-link {
+                padding: 6px 12px;
+                font-size: 13px;
+            }
+
+            .projects-header {
+                margin-top: 60px;
+            }
+        }
+    </style>
 </head>
 <body>
+    <!-- Navigation Header -->
+    <nav class="nav-header">
+        <div class="nav-logo">Claude Code</div>
+        <div class="nav-links">
+            <a href="/claude/" class="nav-link">Sessions</a>
+            <a href="/projects" class="nav-link active">Projects</a>
+            <button class="nav-logout" onclick="logout()">Logout</button>
+        </div>
+    </nav>
+
     <div id="app">
         <!-- Header -->
         <header class="projects-header">
             <div class="header-left">
                 <h1>Projects</h1>
-                <a href="/" class="back-link">Back to Sessions</a>
+                <a href="/claude/" class="back-link">Back to Sessions</a>
             </div>
             <div class="header-right">
                 <input type="text" id="search-input" class="search-input" placeholder="Search projects...">
@@ -96,5 +201,15 @@
     </div>
 
     <script src="/claude-ide/projects.js"></script>
+    <script>
+        async function logout() {
+            try {
+                await fetch('/claude/api/logout', { method: 'POST' });
+                window.location.href = '/claude/';
+            } catch (error) {
+                console.error('Logout failed:', error);
+            }
+        }
+    </script>
 </body>
 </html>
diff --git a/server.js b/server.js
index cea96f17..7ee363f1 100644
--- a/server.js
+++ b/server.js
@@ -89,6 +89,17 @@ app.get('/claude/ide/*', requireAuth, (req, res) => {
   res.sendFile(path.join(__dirname, 'public', 'claude-ide', 'index.html'));
 });
 
+// Projects page route
+app.get('/projects', (req, res) => {
+  if (req.session.userId) {
+    // Authenticated - serve projects page
+    res.sendFile(path.join(__dirname, 'public', 'projects.html'));
+  } else {
+    // Not authenticated - redirect to login
+    res.redirect('/claude/');
+  }
+});
+
 // Serve static files (must come after specific routes)
 app.use('/claude', express.static(path.join(__dirname, 'public')));
 
