From 79b2199ba2181bb8a384750917540b3cd3b351cc Mon Sep 17 00:00:00 2001
From: uroma <uroma@rommark.dev>
Date: Mon, 19 Jan 2026 17:02:12 +0000
Subject: [PATCH] feat: add projects page HTML structure

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 public/projects.html | 100 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 public/projects.html
diff --git a/public/projects.html b/public/projects.html
new file mode 100644
index 00000000..2f8bdbb1
--- /dev/null
+++ b/public/projects.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects - Claude Code Web Interface</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/claude-ide/projects.css">
+</head>
+<body>
+    <div id="app">
+        <!-- Header -->
+        <header class="projects-header">
+            <div class="header-left">
+                <h1>Projects</h1>
+                <a href="/" class="back-link">Back to Sessions</a>
+            </div>
+            <div class="header-right">
+                <input type="text" id="search-input" class="search-input" placeholder="Search projects...">
+                <button id="new-project-btn" class="btn-primary">+ New Project</button>
+                <button id="recycle-bin-btn" class="btn-secondary">Recycle Bin</button>
+            </div>
+        </header>
+
+        <!-- Projects Grid -->
+        <div id="projects-grid" class="projects-grid">
+            <!-- Project cards will be dynamically inserted here -->
+        </div>
+
+        <!-- Empty State -->
+        <div id="empty-state" class="empty-state" style="display: none;">
+            <h2>No projects yet</h2>
+            <p>Create your first project to get started organizing your work.</p>
+            <button id="empty-state-new-project-btn" class="btn-primary">+ New Project</button>
+        </div>
+
+        <!-- Create/Edit Project Modal -->
+        <div id="project-modal" class="modal" style="display: none;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 id="modal-title">Create Project</h2>
+                    <button id="close-modal-btn" class="close-btn">&times;</button>
+                </div>
+                <form id="project-form">
+                    <div class="form-group">
+                        <label for="project-name">Name *</label>
+                        <input type="text" id="project-name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="project-path">Path *</label>
+                        <input type="text" id="project-path" name="path" required placeholder="/path/to/project">
+                    </div>
+                    <div class="form-group">
+                        <label for="project-description">Description</label>
+                        <textarea id="project-description" name="description" rows="3" placeholder="Brief description of the project"></textarea>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="project-icon">Icon</label>
+                            <input type="text" id="project-icon" name="icon" placeholder="folder">
+                        </div>
+                        <div class="form-group">
+                            <label for="project-color">Color</label>
+                            <input type="color" id="project-color" name="color" value="#3498db">
+                        </div>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="submit" class="btn-primary">Save</button>
+                        <button type="button" id="cancel-modal-btn" class="btn-secondary">Cancel</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Recycle Bin Modal -->
+        <div id="recycle-bin-modal" class="modal" style="display: none;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>Recycle Bin</h2>
+                    <button id="close-recycle-bin-btn" class="close-btn">&times;</button>
+                </div>
+                <div id="recycle-bin-content" class="recycle-bin-content">
+                    <!-- Deleted items will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Context Menu -->
+        <div id="context-menu" class="context-menu" style="display: none;">
+            <ul>
+                <li id="ctx-open"><span class="icon">→</span> Open</li>
+                <li id="ctx-edit"><span class="icon">✎</span> Edit</li>
+                <li id="ctx-delete"><span class="icon">🗑</span> Delete</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="/claude-ide/projects.js"></script>
+</body>
+</html>
