From a85ce30c2d2351d30ffc5261f96565c38b7c0eab Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <2+defunkt@users.noreply.github.com>
Date: Mon, 28 Jul 2025 16:03:55 -0700
Subject: [PATCH] TODO

---
 packages/cubby/src/components/Project.tsx | 16 +++++++-
 packages/cubby/src/css/project.css        | 48 +++++++++++++++++++++++
 packages/cubby/src/js/project.js          | 17 ++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 packages/cubby/src/css/project.css

diff --git a/packages/cubby/src/components/Project.tsx b/packages/cubby/src/components/Project.tsx
index 34a1e33..ec9e219 100644
--- a/packages/cubby/src/components/Project.tsx
+++ b/packages/cubby/src/components/Project.tsx
@@ -11,10 +11,24 @@ export function Project({ project, readme, files }: ProjectProps) {
   const name = project.name
   return (
     <>
+      <link rel="stylesheet" href="/src/css/project.css" />
       <p><a href="/">« Back</a></p>
       <div class="content-wrapper">
         <div class="main-content">
-          <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) as string }} />
+          <div class="tab-container">
+            <input type="radio" id="readme-tab" name="tabs" checked hidden />
+            <input type="radio" id="todo-tab" name="tabs" hidden />
+            <div class="tab-buttons">
+              <label for="readme-tab" class="tab-button">README</label>
+              <label for="todo-tab" class="tab-button">TODO</label>
+            </div>
+            <div class="tab-content readme-content">
+              <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) as string }} />
+            </div>
+            <div class="tab-content">
+              <iframe src={`https://todo.theworkshop.cc/todos/${name}`} />
+            </div>
+          </div>
         </div>
         <div class="side-content">
           <h2>Links</h2>
diff --git a/packages/cubby/src/css/project.css b/packages/cubby/src/css/project.css
new file mode 100644
index 0000000..bde61eb
--- /dev/null
+++ b/packages/cubby/src/css/project.css
@@ -0,0 +1,48 @@
+.tab-container {
+  width: 100%;
+  position: relative;
+}
+
+.tab-buttons {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab-button {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+#readme-tab:checked ~ .tab-buttons label[for="readme-tab"],
+#todo-tab:checked ~ .tab-buttons label[for="todo-tab"] {
+  border-bottom: 2px solid #000;
+}
+
+.tab-content {
+  display: none;
+  width: 100%;
+  height: 600px;
+}
+
+#readme-tab:checked ~ .tab-content.readme-content,
+#todo-tab:checked ~ .tab-content:not(.readme-content) {
+  display: block;
+}
+
+.tab-content iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.readme-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.readme-content h1 {
+  margin-top: 0;
+}
\ No newline at end of file
diff --git a/packages/cubby/src/js/project.js b/packages/cubby/src/js/project.js
index cac3604..c745cee 100644
--- a/packages/cubby/src/js/project.js
+++ b/packages/cubby/src/js/project.js
@@ -77,6 +77,23 @@ uploadButton.addEventListener("click", () => {
     uploadFile(file)
 })
 
+document.addEventListener("DOMContentLoaded", () => {
+    const tabButtons = document.querySelectorAll(".tab-button")
+    const tabContents = document.querySelectorAll(".tab-content")
+
+    tabButtons.forEach(button => {
+        button.addEventListener("click", () => {
+            const tab = button.dataset.tab
+
+            tabButtons.forEach(btn => btn.classList.remove("active"))
+            tabContents.forEach(content => content.classList.remove("active"))
+
+            button.classList.add("active")
+            document.querySelector(`[data-content="${tab}"]`).classList.add("active")
+        })
+    })
+})
+
 document.addEventListener("dragenter", (e) => {
     e.preventDefault()
     e.stopPropagation()