ashepp · ashepp · Dec 2, 2024
diff --git a/README.md b/README.md
@@ -1 +1,25 @@
-IyBNaW5kc2V5ZTIKCkEgd2ViYXBwIHRoYXQgdmlzdWFsaXplcyBUb2RvaXN0IHRhc2tzIHVzaW5nIEFJIGltYWdlIGdlbmVyYXRpb24uIFRoaXMgdG9vbCBoZWxwcyB5b3UgY3JlYXRlIHZpc3VhbCByZXByZXNlbnRhdGlvbnMgb2YgeW91ciB0YXNrcyBhbmQgZmlsdGVycyB1c2luZyBhZHZhbmNlZCBpbWFnZSBnZW5lcmF0aW9uIHRlY2huaXF1ZXMuCgojIyBGZWF0dXJlcwoKLSBDb25uZWN0IHRvIHlvdXIgVG9kb2lzdCBhY2NvdW50IHVzaW5nIEFQSSBrZXkKLSBWaWV3IGFuZCBzZWxlY3QgZnJvbSB5b3VyIGZhdm9yaXRlcyBhbmQgZmlsdGVycwotIEdlbmVyYXRlIEFJLXBvd2VyZWQgaW1hZ2VzIGJhc2VkIG9uIHNlbGVjdGVkIHRhc2tzCi0gTW9kZXJuLCByZXNwb25zaXZlIFVJIGJ1aWx0IHdpdGggUmVhY3QKLSBTZWN1cmUgaGFuZGxpbmcgb2YgQVBJIGtleXMKCiMjIFNldHVwCgoxLiBDbG9uZSB0aGUgcmVwb3NpdG9yeQoyLiBJbnN0YWxsIGRlcGVuZGVuY2llczogYG5wbSBpbnN0YWxsYAozLiBDcmVhdGUgYSBgLmVudmAgZmlsZSB3aXRoIHlvdXIgVG9kb2lzdCBBUEkga2V5CjQuIFJ1biB0aGUgZGV2ZWxvcG1lbnQgc2VydmVyOiBgbnBtIHN0YXJ0YAoKIyMgVGVjaG5vbG9naWVzCgotIFJlYWN0Ci0gVGFpbHdpbmQgQ1NTCS0gVG9kb2lzdCBBUEkKLSBBSSBJbWFnZSBHZW5lcmF0aW9u
+# Mindseye2
+
+A webapp that visualizes Todoist tasks using AI image generation. This tool helps you create visual representations of your tasks and filters using advanced image generation techniques.
+
+## Features
+
+- Connect to your Todoist account using API key
+- View and select from your favorites and filters
+- Generate AI-powered images based on selected tasks
+- Modern, responsive UI built with React
+- Secure handling of API keys
+
+## Setup
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Create a `.env` file with your Todoist API key
+4. Run the development server: `npm start`
+
+## Technologies
+
+- React
+- Tailwind CSS
+- Todoist API
+- AI Image Generation
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindseye - Todoist Task Visualizer</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f3f4f6;
+            color: #1f2937;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: #374151;
+        }
+        .header p {
+            color: #6b7280;
+            margin-top: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Mindseye</h1>
+            <p>Visualize your Todoist tasks with AI-generated images</p>
+        </div>
+        <div id="root"></div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/src/TodoistVisualizer.js b/src/TodoistVisualizer.js
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+const TodoistVisualizer = () => {
+  const [apiKey, setApiKey] = useState('');
+  const [favorites, setFavorites] = useState([]);
+  const [filters, setFilters] = useState([]);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [images, setImages] = useState({});
+
+  const fetchTodoistData = async () => {
+    setLoading(true);
+    try {
+      const favResponse = await fetch('https://api.todoist.com/rest/v2/favorites', {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`
+        }
+      });
+      const favData = await favResponse.json();
+
+      const filterResponse = await fetch('https://api.todoist.com/rest/v2/filters', {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`
+        }
+      });
+      const filterData = await filterResponse.json();
+
+      setFavorites(favData);
+      setFilters(filterData);
+    } catch (error) {
+      console.error('Error fetching Todoist data:', error);
+    }
+    setLoading(false);
+  };
+
+  const handleItemToggle = (id) => {
+    setSelectedItems(prev => {
+      if (prev.includes(id)) {
+        return prev.filter(item => item !== id);
+      }
+      return [...prev, id];
+    });
+  };
+
+  const generateImages = async () => {
+    const newImages = {};
+    selectedItems.forEach(id => {
+      newImages[id] = '/api/placeholder/300/200';
+    });
+    setImages(newImages);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-8">
+      <Card className="max-w-4xl mx-auto">
+        <CardHeader>
+          <CardTitle>Todoist Task Visualizer</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="flex gap-4">
+              <Input
+                type="password"
+                placeholder="Enter your Todoist API key"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                className="flex-1"
+              />
+              <Button 
+                onClick={fetchTodoistData}
+                disabled={!apiKey || loading}
+              >
+                {loading ? 'Loading...' : 'Fetch Data'}
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold">Favorites</h3>
+              <div className="space-y-2">
+                {favorites.map(favorite => (
+                  <div key={favorite.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`fav-${favorite.id}`}
+                      checked={selectedItems.includes(favorite.id)}
+                      onCheckedChange={() => handleItemToggle(favorite.id)}
+                    />
+                    <label htmlFor={`fav-${favorite.id}`}>{favorite.name}</label>
+                    {images[favorite.id] && (
+                      <img 
+                        src={images[favorite.id]} 
+                        alt={favorite.name}
+                        className="w-20 h-20 object-cover rounded"
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              <h3 className="text-lg font-semibold mt-6">Filters</h3>
+              <div className="space-y-2">
+                {filters.map(filter => (
+                  <div key={filter.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`filter-${filter.id}`}
+                      checked={selectedItems.includes(filter.id)}
+                      onCheckedChange={() => handleItemToggle(filter.id)}
+                    />
+                    <label htmlFor={`filter-${filter.id}`}>{filter.name}</label>
+                    {images[filter.id] && (
+                      <img 
+                        src={images[filter.id]} 
+                        alt={filter.name}
+                        className="w-20 h-20 object-cover rounded"
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Button
+              onClick={generateImages}
+              disabled={selectedItems.length === 0}
+              className="mt-4"
+            >
+              Generate Images
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default TodoistVisualizer;