From 5ac08822ce61cb05036887fc5616d575129a6ca7 Mon Sep 17 00:00:00 2001
From: Claude <claude@firefrostgaming.com>
Date: Tue, 7 Apr 2026 23:13:32 +0000
Subject: [PATCH] Add mobile-first task manager at /tasks

New standalone page: firefrostgaming.com/tasks
- Mobile-optimized task viewer/editor
- Connects directly to Gitea API (no CORS issues)
- Card-based interface with tap-to-expand
- Filter tabs: All / Blockers / Active / Done
- Quick edit: Status, Priority, Owner, Blocker checkbox
- Auto-saves changes to Git
- Touch-friendly (44px+ tap targets)
- Priority color-coded cards
- Works on phone/tablet/desktop

Replaces clunky Decap CMS mobile experience with purpose-built task manager.
---
 tasks.njk | 493 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 493 insertions(+)
 create mode 100644 tasks.njk
diff --git a/tasks.njk b/tasks.njk
new file mode 100644
index 0000000..702beb3
--- /dev/null
+++ b/tasks.njk
@@ -0,0 +1,493 @@
+---
+layout: base
+title: Task Manager - Firefrost Gaming
+eleventyExcludeFromCollections: true
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tasks - Firefrost Gaming</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        #root {
+            min-height: 100vh;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    
+    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    
+    <script type="text/babel">
+        const { useState, useEffect } = React;
+        
+        const GITEA_API = 'https://git.firefrostgaming.com/api/v1';
+        const REPO_OWNER = 'firefrost-gaming';
+        const REPO_NAME = 'firefrost-operations-manual';
+        const TOKEN = 'e0e330cba1749b01ab505093a160e4423ebbbe36';
+
+        // Parse markdown frontmatter and body
+        const parseMarkdown = (content) => {
+          const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+          if (!frontmatterMatch) return { frontmatter: {}, body: content };
+          
+          const frontmatter = {};
+          const yamlLines = frontmatterMatch[1].split('\n');
+          
+          yamlLines.forEach(line => {
+            const match = line.match(/^(\w+):\s*(.+)$/);
+            if (match) {
+              const [, key, value] = match;
+              if (value === 'true') frontmatter[key] = true;
+              else if (value === 'false') frontmatter[key] = false;
+              else if (!isNaN(value) && value.trim() !== '') frontmatter[key] = parseInt(value);
+              else frontmatter[key] = value.trim();
+            }
+          });
+          
+          return { frontmatter, body: frontmatterMatch[2] };
+        };
+
+        // Serialize back to markdown
+        const serializeMarkdown = (frontmatter, body) => {
+          const yamlLines = Object.entries(frontmatter).map(([key, value]) => {
+            return `${key}: ${value}`;
+          });
+          
+          return `---\n${yamlLines.join('\n')}\n---\n${body}`;
+        };
+
+        const MobileTaskManager = () => {
+          const [tasks, setTasks] = useState([]);
+          const [loading, setLoading] = useState(true);
+          const [error, setError] = useState(null);
+          const [expandedTask, setExpandedTask] = useState(null);
+          const [saving, setSaving] = useState(false);
+          const [filter, setFilter] = useState('all');
+
+          const loadTasks = async () => {
+            try {
+              setLoading(true);
+              const response = await fetch(
+                `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/tasks?ref=master`,
+                {
+                  headers: {
+                    'Authorization': `token ${TOKEN}`,
+                    'Accept': 'application/json'
+                  }
+                }
+              );
+              
+              if (!response.ok) throw new Error('Failed to load tasks');
+              
+              const files = await response.json();
+              const taskFiles = files.filter(f => f.name.startsWith('task-') && f.name.endsWith('.md'));
+              
+              const taskPromises = taskFiles.map(async (file) => {
+                const contentResponse = await fetch(
+                  `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${file.path}?ref=master`,
+                  {
+                    headers: {
+                      'Authorization': `token ${TOKEN}`,
+                      'Accept': 'application/json'
+                    }
+                  }
+                );
+                
+                const fileData = await contentResponse.json();
+                const content = atob(fileData.content);
+                const { frontmatter, body } = parseMarkdown(content);
+                
+                return {
+                  path: file.path,
+                  sha: fileData.sha,
+                  name: file.name,
+                  frontmatter,
+                  body,
+                  number: frontmatter.number || 0
+                };
+              });
+              
+              const loadedTasks = await Promise.all(taskPromises);
+              
+              const priorityOrder = { 'P0-Blocker': 0, 'P1-High': 1, 'P2-Medium': 2, 'P3-Low': 3, 'P4-Personal': 4 };
+              loadedTasks.sort((a, b) => {
+                const priorityA = priorityOrder[a.frontmatter.priority] ?? 5;
+                const priorityB = priorityOrder[b.frontmatter.priority] ?? 5;
+                if (priorityA !== priorityB) return priorityA - priorityB;
+                return a.number - b.number;
+              });
+              
+              setTasks(loadedTasks);
+              setLoading(false);
+            } catch (err) {
+              setError(err.message);
+              setLoading(false);
+            }
+          };
+
+          useEffect(() => {
+            loadTasks();
+          }, []);
+
+          const saveTask = async (task) => {
+            try {
+              setSaving(true);
+              const content = serializeMarkdown(task.frontmatter, task.body);
+              const base64Content = btoa(content);
+              
+              const response = await fetch(
+                `${GITEA_API}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${task.path}`,
+                {
+                  method: 'PUT',
+                  headers: {
+                    'Authorization': `token ${TOKEN}`,
+                    'Content-Type': 'application/json'
+                  },
+                  body: JSON.stringify({
+                    content: base64Content,
+                    sha: task.sha,
+                    message: `Update Task #${task.number} via mobile task manager`,
+                    branch: 'master'
+                  })
+                }
+              );
+              
+              if (!response.ok) throw new Error('Failed to save task');
+              
+              await loadTasks();
+              setExpandedTask(null);
+              setSaving(false);
+            } catch (err) {
+              alert('Error saving task: ' + err.message);
+              setSaving(false);
+            }
+          };
+
+          const updateTaskField = (task, field, value) => {
+            const updatedTask = {
+              ...task,
+              frontmatter: {
+                ...task.frontmatter,
+                [field]: value
+              }
+            };
+            saveTask(updatedTask);
+          };
+
+          const getPriorityColor = (priority) => {
+            switch (priority) {
+              case 'P0-Blocker': return '#dc3545';
+              case 'P1-High': return '#FF6B35';
+              case 'P1': return '#FF6B35';
+              case 'P2-Medium': return '#ffc107';
+              case 'P3-Low': return '#4ECDC4';
+              case 'P4-Personal': return '#A855F7';
+              default: return '#6c757d';
+            }
+          };
+
+          const getStatusColor = (status) => {
+            switch (status) {
+              case 'Complete': return '#28a745';
+              case 'In Progress': return '#4ECDC4';
+              case 'Blocked': return '#dc3545';
+              case 'Planned': return '#6c757d';
+              default: return '#6c757d';
+            }
+          };
+
+          const filteredTasks = tasks.filter(task => {
+            if (filter === 'all') return true;
+            if (filter === 'blocker') return task.frontmatter.blocker === true;
+            if (filter === 'active') return task.frontmatter.status === 'In Progress';
+            if (filter === 'complete') return task.frontmatter.status === 'Complete';
+            return true;
+          });
+
+          if (loading) {
+            return (
+              <div style={{ padding: '20px', textAlign: 'center' }}>
+                <div style={{ fontSize: '24px', marginBottom: '10px' }}>🔥❄️</div>
+                <div>Loading tasks...</div>
+              </div>
+            );
+          }
+
+          if (error) {
+            return (
+              <div style={{ padding: '20px', textAlign: 'center', color: '#dc3545' }}>
+                <div style={{ fontSize: '24px', marginBottom: '10px' }}>⚠️</div>
+                <div>Error: {error}</div>
+                <button onClick={loadTasks} style={{ marginTop: '20px', padding: '10px 20px' }}>
+                  Retry
+                </button>
+              </div>
+            );
+          }
+
+          return (
+            <div style={{ 
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              maxWidth: '100%',
+              margin: '0',
+              padding: '0',
+              backgroundColor: '#f5f5f5',
+              minHeight: '100vh'
+            }}>
+              <div style={{
+                backgroundColor: '#0F0F1E',
+                color: 'white',
+                padding: '16px',
+                position: 'sticky',
+                top: 0,
+                zIndex: 100,
+                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+              }}>
+                <h1 style={{ margin: '0 0 12px 0', fontSize: '20px', fontWeight: '700' }}>
+                  🔥 Firefrost Tasks
+                </h1>
+                
+                <div style={{ display: 'flex', gap: '8px', overflowX: 'auto' }}>
+                  {[
+                    { key: 'all', label: 'All', count: tasks.length },
+                    { key: 'blocker', label: 'Blockers', count: tasks.filter(t => t.frontmatter.blocker).length },
+                    { key: 'active', label: 'Active', count: tasks.filter(t => t.frontmatter.status === 'In Progress').length },
+                    { key: 'complete', label: 'Done', count: tasks.filter(t => t.frontmatter.status === 'Complete').length }
+                  ].map(({ key, label, count }) => (
+                    <button
+                      key={key}
+                      onClick={() => setFilter(key)}
+                      style={{
+                        padding: '8px 16px',
+                        borderRadius: '20px',
+                        border: 'none',
+                        backgroundColor: filter === key ? '#4ECDC4' : 'rgba(255,255,255,0.2)',
+                        color: 'white',
+                        fontSize: '14px',
+                        fontWeight: filter === key ? '600' : '400',
+                        whiteSpace: 'nowrap',
+                        cursor: 'pointer'
+                      }}
+                    >
+                      {label} ({count})
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div style={{ padding: '12px' }}>
+                {filteredTasks.map(task => (
+                  <div
+                    key={task.path}
+                    style={{
+                      backgroundColor: 'white',
+                      borderRadius: '12px',
+                      marginBottom: '12px',
+                      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      overflow: 'hidden'
+                    }}
+                  >
+                    <div
+                      onClick={() => setExpandedTask(expandedTask === task.path ? null : task.path)}
+                      style={{
+                        padding: '16px',
+                        cursor: 'pointer',
+                        borderLeft: `4px solid ${getPriorityColor(task.frontmatter.priority)}`
+                      }}
+                    >
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
+                        <div style={{ flex: 1 }}>
+                          <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>
+                            Task #{task.number}
+                          </div>
+                          <div style={{ fontSize: '16px', fontWeight: '600', color: '#0F0F1E' }}>
+                            {task.frontmatter.title}
+                          </div>
+                        </div>
+                        <div style={{ fontSize: '20px', marginLeft: '8px' }}>
+                          {expandedTask === task.path ? '▼' : '▶'}
+                        </div>
+                      </div>
+                      
+                      <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                        <span style={{
+                          display: 'inline-block',
+                          padding: '4px 8px',
+                          borderRadius: '12px',
+                          fontSize: '11px',
+                          fontWeight: '600',
+                          backgroundColor: getPriorityColor(task.frontmatter.priority),
+                          color: 'white'
+                        }}>
+                          {task.frontmatter.priority}
+                        </span>
+                        <span style={{
+                          display: 'inline-block',
+                          padding: '4px 8px',
+                          borderRadius: '12px',
+                          fontSize: '11px',
+                          fontWeight: '600',
+                          backgroundColor: getStatusColor(task.frontmatter.status),
+                          color: 'white'
+                        }}>
+                          {task.frontmatter.status}
+                        </span>
+                        {task.frontmatter.blocker && (
+                          <span style={{
+                            display: 'inline-block',
+                            padding: '4px 8px',
+                            borderRadius: '12px',
+                            fontSize: '11px',
+                            fontWeight: '600',
+                            backgroundColor: '#dc3545',
+                            color: 'white'
+                          }}>
+                            🚨 BLOCKER
+                          </span>
+                        )}
+                        <span style={{
+                          display: 'inline-block',
+                          padding: '4px 8px',
+                          borderRadius: '12px',
+                          fontSize: '11px',
+                          backgroundColor: '#e9ecef',
+                          color: '#495057'
+                        }}>
+                          {task.frontmatter.owner}
+                        </span>
+                      </div>
+                    </div>
+
+                    {expandedTask === task.path && (
+                      <div style={{
+                        padding: '16px',
+                        borderTop: '1px solid #e9ecef',
+                        backgroundColor: '#f8f9fa'
+                      }}>
+                        <div style={{ marginBottom: '16px' }}>
+                          <label style={{ display: 'block', fontSize: '12px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}>
+                            Status
+                          </label>
+                          <select
+                            value={task.frontmatter.status}
+                            onChange={(e) => updateTaskField(task, 'status', e.target.value)}
+                            disabled={saving}
+                            style={{
+                              width: '100%',
+                              padding: '12px',
+                              fontSize: '16px',
+                              borderRadius: '8px',
+                              border: '1px solid #dee2e6',
+                              backgroundColor: 'white'
+                            }}
+                          >
+                            <option value="Planned">Planned</option>
+                            <option value="In Progress">In Progress</option>
+                            <option value="Blocked">Blocked</option>
+                            <option value="Complete">Complete</option>
+                          </select>
+                        </div>
+
+                        <div style={{ marginBottom: '16px' }}>
+                          <label style={{ display: 'block', fontSize: '12px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}>
+                            Priority
+                          </label>
+                          <select
+                            value={task.frontmatter.priority}
+                            onChange={(e) => updateTaskField(task, 'priority', e.target.value)}
+                            disabled={saving}
+                            style={{
+                              width: '100%',
+                              padding: '12px',
+                              fontSize: '16px',
+                              borderRadius: '8px',
+                              border: '1px solid #dee2e6',
+                              backgroundColor: 'white'
+                            }}
+                          >
+                            <option value="P0-Blocker">P0 - Blocker</option>
+                            <option value="P1-High">P1 - High</option>
+                            <option value="P2-Medium">P2 - Medium</option>
+                            <option value="P3-Low">P3 - Low</option>
+                            <option value="P4-Personal">P4 - Personal</option>
+                          </select>
+                        </div>
+
+                        <div style={{ marginBottom: '16px' }}>
+                          <label style={{ display: 'block', fontSize: '12px', fontWeight: '600', marginBottom: '8px', color: '#495057' }}>
+                            Owner
+                          </label>
+                          <select
+                            value={task.frontmatter.owner}
+                            onChange={(e) => updateTaskField(task, 'owner', e.target.value)}
+                            disabled={saving}
+                            style={{
+                              width: '100%',
+                              padding: '12px',
+                              fontSize: '16px',
+                              borderRadius: '8px',
+                              border: '1px solid #dee2e6',
+                              backgroundColor: 'white'
+                            }}
+                          >
+                            <option value="Michael">Michael</option>
+                            <option value="Meg">Meg</option>
+                            <option value="Holly">Holly</option>
+                            <option value="Trinity">Trinity</option>
+                          </select>
+                        </div>
+
+                        <div style={{ marginBottom: '16px' }}>
+                          <label style={{ display: 'flex', alignItems: 'center', fontSize: '14px', fontWeight: '600', color: '#495057' }}>
+                            <input
+                              type="checkbox"
+                              checked={task.frontmatter.blocker === true}
+                              onChange={(e) => updateTaskField(task, 'blocker', e.target.checked)}
+                              disabled={saving}
+                              style={{ marginRight: '8px', width: '20px', height: '20px' }}
+                            />
+                            Launch Blocker
+                          </label>
+                        </div>
+
+                        <div style={{ marginTop: '16px', padding: '12px', backgroundColor: 'white', borderRadius: '8px', fontSize: '14px', lineHeight: '1.6', color: '#495057', whiteSpace: 'pre-wrap' }}>
+                          {task.body.split('\n').slice(0, 5).join('\n')}
+                          {task.body.split('\n').length > 5 && <div style={{ marginTop: '8px', fontStyle: 'italic', color: '#6c757d' }}>...</div>}
+                        </div>
+
+                        {saving && (
+                          <div style={{ marginTop: '12px', textAlign: 'center', color: '#4ECDC4', fontSize: '14px' }}>
+                            💾 Saving...
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {filteredTasks.length === 0 && (
+                  <div style={{ textAlign: 'center', padding: '40px', color: '#6c757d' }}>
+                    No tasks found
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        };
+
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<MobileTaskManager />);
+    </script>
+</body>
+</html>
