├── screenshot.png
├── README.md
└── index.html


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MartinSantosT/gemini-chat-organizer-hub/HEAD/screenshot.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🧠 Gemini Knowledge Hub (v46.1 Stable)
 2 | 
 3 | ![License](https://img.shields.io/badge/license-MIT-green)
 4 | ![Version](https://img.shields.io/badge/version-46.1-blue)
 5 | ![Tech](https://img.shields.io/badge/stack-HTML%20%7C%20JS%20%7C%20Tailwind-purple)
 6 | ![Status](https://img.shields.io/badge/status-Stable-success)
 7 | 
 8 | > **A "Local Second Brain" for your AI conversations. Single HTML file. No Install. 100% Private.**
 9 | 
10 | ---
11 | 
12 | ## 🚀 Why I built this?
13 | 
14 | I use Google Gemini (and Claude/ChatGPT) daily for coding, business planning, and creative writing. But I ran into a problem: **managing the chaos**.
15 | 
16 | I kept losing the context of my best conversations. Brilliant prompts and complex project discussions were buried under a pile of "Untitled Chats" in my history. I tried Notion, Obsidian, and Trello, but they felt too heavy/slow for simply saving chat links.
17 | 
18 | I needed something **fast, private, and visual**. So, I built **Gemini Knowledge Hub**.
19 | 
20 | ---
21 | 
22 | ## ✨ Key Features
23 | 
24 | ### 🎨 UI & Experience
25 | * **📂 Zero Installation:** It's just **ONE HTML file**. No servers, no databases, no `npm install`. Just download and open in your browser.
26 | * **🌙 Dark Mode (v46):** Native dark mode support for late-night coding sessions. Persists your preference automatically.
27 | * **🔎 Smart Search:** Hybrid search bar with auto-complete suggestions for tags and an instant "Clear" button.
28 | 
29 | ### ⚡ Workflow
30 | * **🚦 Kanban Dashboard:** Organize chats into **Ideas**, **Pins** (High Priority), **Projects** (Active), and **Archive**.
31 | * **☁️ Hybrid Linking:** Each card links to the **Live Cloud Chat** (to continue working) AND a **Local HTML Backup** (to preserve the context forever).
32 | * **✅ Task Tracking:** Add checklists to cards. Unfinished tasks auto-tag the card as `⚠️ Pending`.
33 | * **🏷️ Smart Tagging:** Organize by topic (`#python`, `#marketing`). Click any tag to filter the board instantly.
34 | 
35 | ### 🔒 Data & Privacy
36 | * **🛡️ Local-First:** All data lives in your browser's `localStorage`. Nothing is sent to any server.
37 | * **💾 Timestamped Backups:** Export your entire database to a `.json` file with HH-MM timestamps (e.g., `backup_2025-11-25_14-30.json`).
38 | * **🚑 Rescue Mode:** Automatic sanitization system that detects and fixes corrupt legacy data on startup to prevent crashes.
39 | 
40 | ---
41 | 
42 | ## 📸 Screenshots
43 | 
44 | <img width="2264" height="1235" alt="screenshot-l" src="https://github.com/user-attachments/assets/225a5737-1e4f-4faf-8511-42416faa5868" />
45 | 
46 | <img width="2282" height="1231" alt="screenshot-b" src="https://github.com/user-attachments/assets/07adced0-2414-4f97-b233-c0d61fb370f6" />
47 | 
48 | ---
49 | 
50 | ## 🛠️ How to Use
51 | 
52 | 1.  **Download** the `index.html` file (or `Gemini_Hub.html`) from this repository.
53 | 2.  **Create a folder** on your computer (e.g., `My_AI_Projects`).
54 | 3.  **Place the file** inside that folder.
55 | 4.  **Open it** in any modern browser (Chrome, Edge, Firefox, Brave).
56 | 5.  Click **"+ New Chat"** to start organizing!
57 | 
58 | > **Universal Compatibility:** While I built this for Gemini, it works perfectly for **ChatGPT, Claude, Perplexity**, or even organizing YouTube tutorials and GitHub repos.
59 | 
60 | ---
61 | 
62 | ## ☁️ Pro Tip: Sync across devices
63 | 
64 | Since the app is just one file, you can save the HTML and your exported `.json` backups in **OneDrive, Dropbox, or Google Drive**.
65 | 
66 | * **The File:** Syncs automatically via your cloud provider.
67 | * **The Data:** To move your board state to another computer, click the **Export Backup** button on PC 1, and **Import Backup** on PC 2.
68 | 
69 | ---
70 | 
71 | ## 🔄 Update Log (v46.1)
72 | 
73 | * **Feature:** Added native Dark Mode toggle 🌙.
74 | * **Feature:** "Rescue Mode" added to prevent loading freezes on legacy data.
75 | * **Feature:** Backup filenames now include timestamps to prevent overwriting.
76 | * **UX:** Action buttons moved to card footer; Title links are now "smart" (only clickable if a link exists).
77 | * **Localization:** Fully translated to English for universal usage.
78 | 
79 | ---
80 | 
81 | ## 📄 License
82 | 
83 | **MIT License**. Free and Open Source.
84 | Feel free to fork, modify, and make it your own!
85 | 
86 | Built with ❤️ (and a lot of help from Gemini) by **Martin Santos Temponi**.
87 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="transition-colors duration-300">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Gemini Hub v46 (Dark Mode)</title>
  7 |     <script src="https://cdn.tailwindcss.com"></script>
  8 |     <script>
  9 |         tailwind.config = { darkMode: 'class' }
 10 |     </script>
 11 |     <script src="https://unpkg.com/@phosphor-icons/web"></script>
 12 |     <style>
 13 |         body { font-family: 'Inter', sans-serif; }
 14 |         /* Smooth Transitions */
 15 |         .card-base { transition: all 0.2s ease; cursor: grab; position: relative; }
 16 |         .card-base:active { cursor: grabbing; }
 17 |         
 18 |         /* Column Border Colors */
 19 |         .card-idea { border-left: 5px solid #9333ea; }
 20 |         .card-pinned { border-left: 5px solid #f59e0b; }
 21 |         .card-important { border-left: 5px solid #3b82f6; }
 22 |         .card-reference { border-left: 5px solid #9ca3af; }
 23 |         
 24 |         /* Hover Effects */
 25 |         .card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 50; }
 26 | 
 27 |         .dragging { opacity: 0.5; transform: scale(0.95); border: 2px dashed #6366f1; }
 28 |         .drop-zone-active { background-color: #e0e7ff !important; border-color: #818cf8 !important; }
 29 |         
 30 |         /* Dark Mode Scrollbars */
 31 |         .custom-scroll::-webkit-scrollbar { width: 6px; }
 32 |         .custom-scroll::-webkit-scrollbar-track { background: transparent; }
 33 |         .custom-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
 34 |         .dark .custom-scroll::-webkit-scrollbar-thumb { background-color: #4b5563; }
 35 | 
 36 |         .tag-active { background-color: #4f46e5 !important; color: white !important; border-color: #4f46e5 !important; }
 37 |         
 38 |         #tag-suggestions { max-height: 150px; overflow-y: auto; }
 39 |         .suggestion-item:hover { background-color: #f3f4f6; color: #4f46e5; }
 40 |         .dark .suggestion-item:hover { background-color: #374151; color: #818cf8; }
 41 | 
 42 |         .task-checkbox:checked + span { text-decoration: line-through; color: #9ca3af; }
 43 |         
 44 |         /* Manual Styles */
 45 |         .manual-content h2 { color: #4f46e5; font-weight: bold; font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
 46 |         .dark .manual-content h2 { color: #818cf8; }
 47 |         .manual-content p { margin-bottom: 0.75rem; color: #374151; }
 48 |         .dark .manual-content p { color: #d1d5db; }
 49 |         .manual-content ul { padding-left: 1.5rem; margin-bottom: 1rem; list-style-type: disc; }
 50 | 
 51 |         /* Pulse Alert */
 52 |         @keyframes pulse-alert {
 53 |             0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
 54 |             70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
 55 |             100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
 56 |         }
 57 |         .needs-save {
 58 |             background-color: #ef4444 !important;
 59 |             color: white !important;
 60 |             animation: pulse-alert 2s infinite;
 61 |             border: 1px solid #b91c1c !important;
 62 |         }
 63 |         
 64 |         /* Search Suggestions Box */
 65 |         .search-suggestions-box {
 66 |             max-height: 200px;
 67 |             overflow-y: auto;
 68 |             border: 1px solid #e2e8f0;
 69 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 70 |         }
 71 |         .dark .search-suggestions-box {
 72 |             border-color: #4b5563;
 73 |             background-color: #1f2937;
 74 |             color: #e5e7eb;
 75 |         }
 76 |     </style>
 77 | </head>
 78 | <body class="bg-f3f4f6 text-gray-800 h-screen flex flex-col overflow-hidden select-none bg-gray-100 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300" onclick="closeSearchSuggestions()">
 79 | 
 80 |     <div class="bg-indigo-900 dark:bg-gray-950 text-white p-4 flex justify-between items-center shadow-lg shrink-0 z-20 transition-colors duration-300">
 81 |         <div class="flex items-center gap-3 min-w-max">
 82 |             <div class="bg-white/10 p-2 rounded-lg">
 83 |                 <i class="ph-fill ph-kanban text-2xl text-indigo-300"></i>
 84 |             </div>
 85 |             <div>
 86 |                 <h1 class="text-xl font-bold tracking-wide flex items-center gap-2">
 87 |                     Gemini Hub <span class="text-[10px] bg-indigo-500 px-1.5 py-0.5 rounded text-white tracking-widest font-mono">FINAL v46</span>
 88 |                 </h1>
 89 |                 <p class="text-xs text-indigo-200">Knowledge Management</p>
 90 |             </div>
 91 |         </div>
 92 | 
 93 |         <div class="hidden md:flex items-center gap-4 bg-indigo-800/50 dark:bg-gray-800/50 px-4 py-1.5 rounded-lg border border-indigo-700/50 dark:border-gray-700 shadow-inner">
 94 |             <div class="flex items-center gap-4 text-xs font-medium text-indigo-100" id="header-stats">
 95 |                 <span class="animate-pulse text-yellow-300">Initializing...</span>
 96 |             </div>
 97 |             <div class="w-px h-5 bg-indigo-600 dark:bg-gray-600"></div>
 98 |             <button onclick="openManual()" class="flex items-center gap-2 text-xs font-bold text-indigo-200 hover:text-white transition-colors hover:bg-indigo-700/50 px-2 py-1 rounded">
 99 |                 <i class="ph-bold ph-book-open text-lg"></i> MANUAL
100 |             </button>
101 |         </div>
102 | 
103 |         <div class="flex gap-2 items-center">
104 |              <button onclick="toggleTheme()" class="bg-indigo-800 dark:bg-gray-800 hover:bg-indigo-700 dark:hover:bg-gray-700 text-indigo-200 p-2 rounded-lg transition mr-2 border border-transparent dark:border-gray-700" title="Toggle Dark Mode">
105 |                 <i id="themeIcon" class="ph-bold ph-moon text-xl"></i>
106 |              </button>
107 | 
108 |              <button id="btn-export" onclick="exportData()" class="bg-indigo-800 dark:bg-gray-800 hover:bg-indigo-700 dark:hover:bg-gray-700 text-indigo-200 p-2 rounded-lg transition duration-300 border border-transparent dark:border-gray-700" title="Export Backup (Save Changes)">
109 |                 <i class="ph-bold ph-download-simple text-xl"></i>
110 |              </button>
111 |              
112 |              <button onclick="document.getElementById('fileInput').click()" class="bg-indigo-800 dark:bg-gray-800 hover:bg-indigo-700 dark:hover:bg-gray-700 text-indigo-200 p-2 rounded-lg transition border border-transparent dark:border-gray-700" title="Import Backup">
113 |                 <i class="ph-bold ph-upload-simple text-xl"></i>
114 |              </button>
115 |              <input type="file" id="fileInput" class="hidden" accept=".json" onchange="importData(this)">
116 | 
117 |              <button onclick="openModal()" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg font-bold flex items-center gap-2 transition shadow-md border border-indigo-400 min-w-max">
118 |                 <i class="ph-bold ph-plus"></i> New Chat
119 |             </button>
120 |         </div>
121 |     </div>
122 | 
123 |     <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-2 flex items-center justify-between gap-2 overflow-x-auto shrink-0 shadow-sm z-10 transition-colors duration-300">
124 |         <div class="flex items-center gap-2 overflow-x-auto no-scrollbar">
125 |             <span class="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1 mr-2 shrink-0">
126 |                 <i class="ph-bold ph-funnel"></i> Topics:
127 |             </span>
128 |             <div id="tag-filters" class="flex gap-2 items-center"></div>
129 |         </div>
130 |         <div class="flex gap-2 items-center pl-4 border-l border-gray-200 dark:border-gray-700 shrink-0" id="status-filters"></div>
131 |     </div>
132 | 
133 |     <div class="flex-1 overflow-x-auto overflow-y-hidden p-6 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
134 |         <div class="flex gap-4 h-full min-w-[1300px]">
135 |             <div class="w-1/4 flex flex-col h-full">
136 |                 <div class="flex items-center gap-2 mb-3 text-purple-600 dark:text-purple-300 font-bold bg-purple-50 dark:bg-purple-900/20 p-3 rounded-t-xl border-b border-purple-100 dark:border-purple-900/30 shadow-sm">
137 |                     <i class="ph-fill ph-lightbulb text-xl"></i> <h2>IDEAS</h2> <span id="count-idea" class="ml-auto bg-white dark:bg-gray-800 border border-purple-200 dark:border-purple-800 text-purple-800 dark:text-purple-300 text-xs px-2 py-0.5 rounded-full shadow-sm font-mono">0</span>
138 |                 </div>
139 |                 <div id="col-idea" class="flex-1 bg-gray-100 dark:bg-gray-800/50 rounded-b-xl border border-gray-200 dark:border-gray-700 p-3 pt-6 overflow-y-auto custom-scroll space-y-5 transition-colors" ondrop="drop(event, 'idea')" ondragover="allowDrop(event)" ondragleave="leaveDrop(event)"></div>
140 |             </div>
141 |             <div class="w-1/4 flex flex-col h-full">
142 |                 <div class="flex items-center gap-2 mb-3 text-amber-600 dark:text-amber-400 font-bold bg-amber-50 dark:bg-amber-900/20 p-3 rounded-t-xl border-b border-amber-100 dark:border-amber-900/30 shadow-sm">
143 |                     <i class="ph-fill ph-push-pin text-xl"></i> <h2>PINS</h2> <span id="count-pin" class="ml-auto bg-white dark:bg-gray-800 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-400 text-xs px-2 py-0.5 rounded-full shadow-sm font-mono">0</span>
144 |                 </div>
145 |                 <div id="col-pinned" class="flex-1 bg-gray-100 dark:bg-gray-800/50 rounded-b-xl border border-gray-200 dark:border-gray-700 p-3 pt-6 overflow-y-auto custom-scroll space-y-5 transition-colors" ondrop="drop(event, 'pinned')" ondragover="allowDrop(event)" ondragleave="leaveDrop(event)"></div>
146 |             </div>
147 |             <div class="w-1/4 flex flex-col h-full">
148 |                 <div class="flex items-center gap-2 mb-3 text-blue-600 dark:text-blue-400 font-bold bg-blue-50 dark:bg-blue-900/20 p-3 rounded-t-xl border-b border-blue-100 dark:border-blue-900/30 shadow-sm">
149 |                     <i class="ph-fill ph-star text-xl"></i> <h2>PROJECTS</h2> <span id="count-imp" class="ml-auto bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300 text-xs px-2 py-0.5 rounded-full shadow-sm font-mono">0</span>
150 |                 </div>
151 |                 <div id="col-important" class="flex-1 bg-gray-100 dark:bg-gray-800/50 rounded-b-xl border border-gray-200 dark:border-gray-700 p-3 pt-6 overflow-y-auto custom-scroll space-y-5 transition-colors" ondrop="drop(event, 'important')" ondragover="allowDrop(event)" ondragleave="leaveDrop(event)"></div>
152 |             </div>
153 |             <div class="w-1/4 flex flex-col h-full">
154 |                 <div class="flex items-center gap-2 mb-3 text-gray-600 dark:text-gray-300 font-bold bg-gray-100 dark:bg-gray-800 p-3 rounded-t-xl border-b border-gray-200 dark:border-gray-700 shadow-sm">
155 |                     <i class="ph-fill ph-archive text-xl"></i> <h2>ARCHIVE</h2> <span id="count-ref" class="ml-auto bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-xs px-2 py-0.5 rounded-full shadow-sm font-mono">0</span>
156 |                 </div>
157 |                 
158 |                 <div class="bg-gray-100 dark:bg-gray-800 px-3 pb-2 border-x border-gray-200 dark:border-gray-700">
159 |                     <div class="relative group">
160 |                          <i class="ph-bold ph-magnifying-glass absolute left-3 top-2.5 text-gray-400 group-focus-within:text-indigo-500"></i>
161 |                          <input type="text" id="searchInput" oninput="handleSearchInput()" placeholder="Search..." autocomplete="off" class="w-full pl-9 pr-8 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all shadow-sm placeholder-gray-400">
162 |                          
163 |                          <button id="searchClearBtn" onclick="clearSearch()" class="absolute right-2 top-2 text-gray-400 hover:text-red-500 hidden p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
164 |                             <i class="ph-bold ph-x"></i>
165 |                          </button>
166 | 
167 |                          <div id="search-tag-suggestions" class="hidden absolute top-full left-0 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-50 mt-1 search-suggestions-box"></div>
168 |                     </div>
169 |                 </div>
170 | 
171 |                 <div id="col-reference" class="flex-1 bg-gray-100 dark:bg-gray-800/50 rounded-b-xl border border-gray-200 dark:border-gray-700 p-3 pt-6 overflow-y-auto custom-scroll space-y-5 transition-colors" ondrop="drop(event, 'reference')" ondragover="allowDrop(event)" ondragleave="leaveDrop(event)"></div>
172 |             </div>
173 |         </div>
174 |     </div>
175 | 
176 |     <div id="addModal" class="fixed inset-0 bg-indigo-900/40 dark:bg-black/60 hidden flex items-center justify-center backdrop-blur-sm z-50">
177 |         <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg p-6 transform transition-all scale-100 border border-gray-200 dark:border-gray-700 max-h-[95vh] overflow-y-auto" onclick="closeSuggestions()">
178 |             <div class="flex justify-between items-center mb-4">
179 |                 <h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center gap-2" id="modalTitle"><i class="ph-duotone ph-file-html text-indigo-600 dark:text-indigo-400"></i> Register</h2>
180 |                 <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="ph-bold ph-x text-xl"></i></button>
181 |             </div>
182 |             <form id="chatForm" onsubmit="handleFormSubmit(event)">
183 |                 <input type="hidden" id="editId" value="">
184 |                 <div class="space-y-4">
185 |                     <div>
186 |                         <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Title</label>
187 |                         <input type="text" id="inputTitle" required class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm p-2.5 focus:ring-indigo-500 focus:border-indigo-500 font-bold text-gray-800 dark:bg-gray-700 dark:text-white" placeholder="Ex: Futuristic Photos Prompt">
188 |                     </div>
189 |                     <div class="relative">
190 |                         <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Tags</label>
191 |                         <div class="flex flex-wrap gap-2 p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 focus-within:ring-2 focus-within:ring-indigo-500"><div id="activeTagsContainer" class="flex flex-wrap gap-2"></div><input type="text" id="inputTags" autocomplete="off" class="flex-grow min-w-[100px] outline-none text-sm text-gray-700 dark:text-white dark:bg-transparent placeholder-gray-400" placeholder="Type & Enter..." oninput="showSuggestions()" onfocus="showSuggestions()" onkeydown="handleTagInput(event)"></div>
192 |                         <div id="tag-suggestions" class="hidden absolute left-0 right-0 mt-1 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg z-50"></div>
193 |                     </div>
194 |                     <div class="bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
195 |                         <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 flex justify-between">
196 |                             <span>Task List</span>
197 |                             <span class="text-indigo-500 dark:text-indigo-400 text-[10px] bg-indigo-50 dark:bg-indigo-900/30 px-2 py-0.5 rounded border border-indigo-100 dark:border-indigo-800">Enter to add</span>
198 |                         </label>
199 |                         <div class="flex gap-2 mb-2">
200 |                             <input type="text" id="newTaskInput" class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm p-2 text-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white" placeholder="New task..." onkeypress="handleTaskEnter(event)">
201 |                             <button type="button" onclick="addModalTask()" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg px-3 transition-colors shadow-sm"><i class="ph-bold ph-plus"></i></button>
202 |                         </div>
203 |                         <ul id="taskList" class="space-y-1.5 max-h-48 overflow-y-auto pr-1"></ul>
204 |                     </div>
205 |                     <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
206 |                         <div>
207 |                             <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Local File (HTML)</label>
208 |                             <div class="relative">
209 |                                 <input type="text" id="inputPath" class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm p-2.5 pr-8 font-mono text-xs bg-white dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500" placeholder="red_martin.html">
210 |                                 <i class="ph-bold ph-desktop absolute right-3 top-3 text-gray-400"></i>
211 |                             </div>
212 |                         </div>
213 |                         <div>
214 |                             <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Cloud Link</label>
215 |                             <div class="relative">
216 |                                 <input type="url" id="inputLink" class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm p-2.5 pr-8 font-mono text-xs bg-white dark:bg-gray-700 dark:text-blue-400 focus:ring-indigo-500 focus:border-indigo-500 text-blue-600" placeholder="https://...">
217 |                                 <i class="ph-bold ph-cloud absolute right-3 top-3 text-gray-400"></i>
218 |                             </div>
219 |                         </div>
220 |                     </div>
221 |                     <div>
222 |                         <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Priority</label>
223 |                         <div class="grid grid-cols-4 gap-2 mt-1">
224 |                             <label class="cursor-pointer relative"><input type="radio" name="priority" value="idea" class="peer sr-only" required><div class="text-center py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-purple-50 dark:hover:bg-purple-900/30 peer-checked:bg-purple-100 dark:peer-checked:bg-purple-900/50 peer-checked:border-purple-500 peer-checked:text-purple-800 dark:peer-checked:text-purple-300 transition-all text-xs font-bold flex flex-col items-center"><i class="ph-fill ph-lightbulb text-lg mb-1"></i> Idea</div></label>
225 |                             <label class="cursor-pointer relative"><input type="radio" name="priority" value="pinned" class="peer sr-only"><div class="text-center py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-amber-50 dark:hover:bg-amber-900/30 peer-checked:bg-amber-100 dark:peer-checked:bg-amber-900/50 peer-checked:border-amber-500 peer-checked:text-amber-800 dark:peer-checked:text-amber-300 transition-all text-xs font-bold flex flex-col items-center"><i class="ph-fill ph-push-pin text-lg mb-1"></i> Pin</div></label>
226 |                             <label class="cursor-pointer relative"><input type="radio" name="priority" value="important" class="peer sr-only"><div class="text-center py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/30 peer-checked:bg-blue-100 dark:peer-checked:bg-blue-900/50 peer-checked:border-blue-500 peer-checked:text-blue-800 dark:peer-checked:text-blue-300 transition-all text-xs font-bold flex flex-col items-center"><i class="ph-fill ph-star text-lg mb-1"></i> Proj.</div></label>
227 |                             <label class="cursor-pointer relative"><input type="radio" name="priority" value="reference" class="peer sr-only"><div class="text-center py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 peer-checked:bg-gray-200 dark:peer-checked:bg-gray-600 peer-checked:border-gray-500 peer-checked:text-gray-800 dark:peer-checked:text-gray-200 transition-all text-xs font-bold flex flex-col items-center"><i class="ph-fill ph-archive text-lg mb-1"></i> Arch.</div></label>
228 |                         </div>
229 |                     </div>
230 |                     <div>
231 |                         <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Notes</label>
232 |                         <textarea id="inputDesc" class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm p-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white" rows="2" placeholder="Details (https:// links allowed)"></textarea>
233 |                     </div>
234 |                 </div>
235 |                 <div class="mt-6 flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-700">
236 |                     <button type="button" onclick="closeModal()" class="px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg font-medium transition-colors">Cancel</button>
237 |                     <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 shadow-md transform hover:scale-[1.02] transition-all">Save</button>
238 |                 </div>
239 |             </form>
240 |         </div>
241 |     </div>
242 | 
243 |     <div id="manualModal" class="fixed inset-0 bg-black bg-opacity-60 hidden flex items-center justify-center backdrop-blur-sm z-50">
244 |         <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl h-[85vh] flex flex-col transform transition-all scale-100 border border-gray-200 dark:border-gray-700">
245 |             <div class="flex justify-between items-center p-5 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-white dark:from-gray-800 dark:to-gray-800 rounded-t-xl">
246 |                 <h2 class="text-2xl font-bold text-indigo-900 dark:text-indigo-300 flex items-center gap-2"><i class="ph-fill ph-book-open text-indigo-600 dark:text-indigo-400"></i> Gemini Hub User Manual</h2>
247 |                 <button onclick="closeManual()" class="text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-gray-700 p-2 rounded-full transition"><i class="ph-bold ph-x text-2xl"></i></button>
248 |             </div>
249 |             <div class="p-8 overflow-y-auto custom-scroll manual-content bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 space-y-8">
250 |                 <section>
251 |                     <h3 class="text-xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 flex items-center gap-2"><i class="ph-bold ph-cpu"></i> 1. Architecture & Technology</h3>
252 |                     <p class="text-sm mb-2">This code is a <strong>Personal Knowledge Management (PKM)</strong> tool...</p>
253 |                     <div class="bg-gray-50 dark:bg-gray-700/30 p-4 rounded-lg border border-gray-200 dark:border-gray-600 text-sm">
254 |                         <ul class="list-disc pl-5 space-y-2">
255 |                             <li><strong>Single File Application:</strong> Everything lives in one file.</li>
256 |                             <li><strong>Local Storage:</strong> Fast and private storage in browser.</li>
257 |                             <li><strong>Kanban Structure:</strong> Ideas, Pins, Projects, Archive.</li>
258 |                         </ul>
259 |                     </div>
260 |                 </section>
261 |                 <hr class="border-gray-100 dark:border-gray-700">
262 |                 <section>
263 |                     <h3 class="text-xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 flex items-center gap-2"><i class="ph-bold ph-target"></i> 2. What is this for?</h3>
264 |                     <p>Preserves the "perfect state" of AI chats context by organizing local files.</p>
265 |                 </section>
266 |                 <hr class="border-gray-100 dark:border-gray-700">
267 |                 <section>
268 |                     <h3 class="text-xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 flex items-center gap-2"><i class="ph-bold ph-steps"></i> 3. Getting Started</h3>
269 |                     <div class="space-y-4"><div class="flex gap-3"><div class="font-bold text-indigo-500 dark:text-indigo-400 text-xl">01</div><div><h4 class="font-bold text-gray-900 dark:text-white">Create Workspace</h4></div></div></div>
270 |                 </section>
271 |                 <hr class="border-gray-100 dark:border-gray-700">
272 |                 <section>
273 |                     <h3 class="text-xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 flex items-center gap-2">
274 |                         <i class="ph-bold ph-star"></i> 4. Key Features Guide
275 |                     </h3>
276 |                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
277 |                         <div class="flex gap-2"><div class="text-indigo-500 dark:text-indigo-400"><i class="ph-fill ph-tag text-xl"></i></div><div><strong>Smart Tags:</strong> Categorize cards. Click any tag to filter.</div></div>
278 |                         <div class="flex gap-2"><div class="text-yellow-500"><i class="ph-fill ph-star text-xl"></i></div><div><strong>Favorites:</strong> Mark top cards.</div></div>
279 |                         <div class="flex gap-2"><div class="text-blue-500 dark:text-blue-400"><i class="ph-bold ph-cloud text-xl"></i></div><div><strong>Hybrid Links:</strong> Direct access to Cloud or Local.</div></div>
280 |                         <div class="flex gap-2"><div class="text-red-500 dark:text-red-400"><i class="ph-bold ph-warning text-xl"></i></div><div><strong>Auto-Pending:</strong> Cards with unchecked tasks get tagged.</div></div>
281 |                         <div class="flex gap-2"><div class="text-gray-500 dark:text-gray-400"><i class="ph-bold ph-link text-xl"></i></div><div><strong>Rich Notes:</strong> URLs in notes become clickable.</div></div>
282 |                         <div class="flex gap-2"><div class="text-green-600 dark:text-green-400"><i class="ph-bold ph-check-square text-xl"></i></div><div><strong>Task Progress:</strong> Visual progress bar.</div></div>
283 |                         <div class="flex gap-2"><div class="text-indigo-600 dark:text-indigo-400"><i class="ph-bold ph-hand-grabbing text-xl"></i></div><div><strong>Drag & Drop:</strong> Move cards to change priority.</div></div>
284 |                         <div class="flex gap-2"><div class="text-gray-700 dark:text-gray-300"><i class="ph-bold ph-download-simple text-xl"></i></div><div><strong>Backup System:</strong> Export to JSON to save data.</div></div>
285 |                     </div>
286 |                 </section>
287 |             </div>
288 |         </div>
289 |     </div>
290 | 
291 |     <script>
292 |         let chats = [];
293 |         let activeTag = null;
294 |         let currentEditingTasks = [];
295 |         let currentEditingTags = []; 
296 | 
297 |         function init() { 
298 |             try {
299 |                 // Dark Mode Init
300 |                 if (localStorage.getItem('geminiHubTheme') === 'dark') {
301 |                     document.documentElement.classList.add('dark');
302 |                     document.getElementById('themeIcon').classList.replace('ph-moon', 'ph-sun');
303 |                 }
304 | 
305 |                 const stored = localStorage.getItem('geminiHubChats');
306 |                 if (stored) {
307 |                     try {
308 |                         const parsed = JSON.parse(stored);
309 |                         if (Array.isArray(parsed)) {
310 |                             chats = parsed.filter(item => item && typeof item === 'object');
311 |                         }
312 |                     } catch (parseErr) { console.error("JSON Error:", parseErr); chats = []; }
313 |                 }
314 |                 updateAutoTags(); 
315 |                 renderChats();
316 |             } catch (criticalErr) {
317 |                 console.error("Critical Init Error:", criticalErr);
318 |                 const statsEl = document.getElementById('header-stats');
319 |                 if (statsEl) statsEl.innerHTML = `<span class="text-red-400 font-bold bg-red-900/50 px-2 py-1 rounded">ERROR: ${criticalErr.message}</span>`;
320 |             }
321 |         }
322 | 
323 |         function toggleTheme() {
324 |             const html = document.documentElement;
325 |             const icon = document.getElementById('themeIcon');
326 |             if (html.classList.contains('dark')) {
327 |                 html.classList.remove('dark');
328 |                 localStorage.setItem('geminiHubTheme', 'light');
329 |                 icon.classList.replace('ph-sun', 'ph-moon');
330 |             } else {
331 |                 html.classList.add('dark');
332 |                 localStorage.setItem('geminiHubTheme', 'dark');
333 |                 icon.classList.replace('ph-moon', 'ph-sun');
334 |             }
335 |         }
336 | 
337 |         // --- SMART SEARCH FUNCTIONS (v45) ---
338 |         function getAllAllTags() {
339 |             const all = new Set(); 
340 |             if(Array.isArray(chats)) {
341 |                 chats.forEach(c => { 
342 |                     if(c.tags && Array.isArray(c.tags)) c.tags.forEach(t => { if(typeof t === 'string') all.add(t); }); 
343 |                 }); 
344 |             }
345 |             return Array.from(all).sort(); 
346 |         }
347 | 
348 |         function handleSearchInput() {
349 |             const input = document.getElementById('searchInput');
350 |             const clearBtn = document.getElementById('searchClearBtn');
351 |             const suggestionBox = document.getElementById('search-tag-suggestions');
352 |             const val = input.value;
353 | 
354 |             if (val.length > 0) clearBtn.classList.remove('hidden');
355 |             else clearBtn.classList.add('hidden');
356 | 
357 |             if (val.length > 0) {
358 |                 const allTags = getAllAllTags();
359 |                 const matches = allTags.filter(tag => tag.toLowerCase().includes(val.toLowerCase()) && tag !== 'favorites' && tag !== 'Pending');
360 |                 
361 |                 if (matches.length > 0) {
362 |                     suggestionBox.innerHTML = '';
363 |                     matches.forEach(tag => {
364 |                         const div = document.createElement('div');
365 |                         div.className = 'px-4 py-2 hover:bg-indigo-50 dark:hover:bg-gray-700 cursor-pointer text-sm text-gray-700 dark:text-gray-200 border-b border-gray-100 dark:border-gray-600 last:border-0 flex items-center gap-2';
366 |                         div.innerHTML = `<i class="ph-bold ph-tag text-indigo-400"></i> ${tag}`;
367 |                         div.onclick = (e) => { 
368 |                             e.stopPropagation();
369 |                             selectSearchTag(tag); 
370 |                         };
371 |                         suggestionBox.appendChild(div);
372 |                     });
373 |                     suggestionBox.classList.remove('hidden');
374 |                 } else {
375 |                     suggestionBox.classList.add('hidden');
376 |                 }
377 |             } else {
378 |                 suggestionBox.classList.add('hidden');
379 |             }
380 |             renderChats();
381 |         }
382 | 
383 |         function clearSearch() {
384 |             const input = document.getElementById('searchInput');
385 |             input.value = '';
386 |             document.getElementById('searchClearBtn').classList.add('hidden');
387 |             document.getElementById('search-tag-suggestions').classList.add('hidden');
388 |             renderChats();
389 |             input.focus();
390 |         }
391 | 
392 |         function selectSearchTag(tag) {
393 |             setTagFilter(tag); // Activate filter
394 |             clearSearch();     // Clear text input to remove conflict
395 |         }
396 | 
397 |         function closeSearchSuggestions() {
398 |             document.getElementById('search-tag-suggestions').classList.add('hidden');
399 |         }
400 | 
401 |         // --- CORE FUNCTIONS ---
402 |         function saveData() { 
403 |             localStorage.setItem('geminiHubChats', JSON.stringify(chats)); 
404 |             const btn = document.getElementById('btn-export');
405 |             if (btn) { btn.classList.add('needs-save'); btn.title = "UNSAVED CHANGES! Click to export backup."; }
406 |         }
407 | 
408 |         function exportData() {
409 |             const dataStr = JSON.stringify(chats, null, 2);
410 |             const blob = new Blob([dataStr], { type: "application/json" });
411 |             const url = URL.createObjectURL(blob);
412 |             const now = new Date();
413 |             const timestamp = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}_${String(now.getHours()).padStart(2,'0')}-${String(now.getMinutes()).padStart(2,'0')}`;
414 |             const a = document.createElement('a'); a.href = url; a.download = `gemini-hub-backup-${timestamp}.json`;
415 |             document.body.appendChild(a); a.click(); document.body.removeChild(a);
416 |             const btn = document.getElementById('btn-export');
417 |             if (btn) { btn.classList.remove('needs-save'); btn.title = "Export Backup"; }
418 |         }
419 | 
420 |         function importData(input) {
421 |             const file = input.files[0]; if (!file) return;
422 |             const reader = new FileReader();
423 |             reader.onload = function(e) {
424 |                 try {
425 |                     const json = JSON.parse(e.target.result);
426 |                     if (Array.isArray(json)) {
427 |                         if(confirm('Overwrite current data?')) { 
428 |                             chats = json.filter(item => item && typeof item === 'object');
429 |                             localStorage.setItem('geminiHubChats', JSON.stringify(chats)); 
430 |                             renderChats(); 
431 |                             const btn = document.getElementById('btn-export');
432 |                             if (btn) btn.classList.remove('needs-save');
433 |                             alert('Imported successfully.'); 
434 |                         }
435 |                     } else { alert('Invalid format.'); }
436 |                 } catch(err) { alert('Error reading file.'); }
437 |             }; reader.readAsText(file); input.value = '';
438 |         }
439 | 
440 |         function openManual() { document.getElementById('manualModal').classList.remove('hidden'); }
441 |         function closeManual() { document.getElementById('manualModal').classList.add('hidden'); }
442 |         document.getElementById('manualModal').addEventListener('click', (e) => {
443 |             if (e.target === document.getElementById('manualModal')) closeManual();
444 |         });
445 | 
446 |         function updateAutoTags() {
447 |             let changed = false;
448 |             if (!Array.isArray(chats)) chats = [];
449 |             chats.forEach(chat => {
450 |                 if (!chat) return;
451 |                 if (!chat.tags || !Array.isArray(chat.tags)) chat.tags = [];
452 |                 if (!chat.tasks || !Array.isArray(chat.tasks)) chat.tasks = [];
453 |                 const hasPending = chat.tasks.some(t => t && !t.done);
454 |                 const pendingIndex = chat.tags.findIndex(t => (typeof t === 'string' && t.toLowerCase() === 'pending'));
455 |                 if (hasPending && pendingIndex === -1) { chat.tags.push('Pending'); changed = true; }
456 |                 else if (!hasPending && pendingIndex !== -1) { chat.tags.splice(pendingIndex, 1); changed = true; }
457 |             });
458 |             if (changed) saveData();
459 |         }
460 | 
461 |         function updateHeaderStats(counts) {
462 |             const total = chats.length;
463 |             const statsContainer = document.getElementById('header-stats');
464 |             if (!statsContainer) return;
465 |             statsContainer.innerHTML = `
466 |                 <span class="font-bold text-indigo-200">Total: ${total}</span>
467 |                 <span class="mx-3 text-indigo-500/50 text-lg">|</span>
468 |                 <div class="flex gap-4">
469 |                     <span title="Ideas" class="flex items-center gap-1.5"><i class="ph-fill ph-lightbulb text-purple-400 text-lg"></i> Ideas: <span class="font-bold text-white">${counts.idea}</span></span>
470 |                     <span title="Pins" class="flex items-center gap-1.5"><i class="ph-fill ph-push-pin text-amber-400 text-lg"></i> Pins: <span class="font-bold text-white">${counts.pinned}</span></span>
471 |                     <span title="Projects" class="flex items-center gap-1.5"><i class="ph-fill ph-star text-blue-400 text-lg"></i> Proj: <span class="font-bold text-white">${counts.important}</span></span>
472 |                     <span title="Archive" class="flex items-center gap-1.5"><i class="ph-fill ph-archive text-gray-400 text-lg"></i> Arch: <span class="font-bold text-white">${counts.reference}</span></span>
473 |                 </div>
474 |             `;
475 |         }
476 | 
477 |         function linkify(text) {
478 |             if (!text) return '';
479 |             return text.replace(/(https?:\/\/[^\s]+)/g, url => `<a href="${url}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline break-all relative z-10" onclick="event.stopPropagation()">${url}</a>`);
480 |         }
481 | 
482 |         function renderTaskEditor() {
483 |             const list = document.getElementById('taskList');
484 |             list.innerHTML = '';
485 |             if (currentEditingTasks.length === 0) {
486 |                 list.innerHTML = '<li class="text-xs text-gray-400 italic text-center py-2">No pending tasks.</li>';
487 |                 return;
488 |             }
489 |             currentEditingTasks.forEach((task, index) => {
490 |                 const li = document.createElement('li');
491 |                 li.className = 'flex items-center gap-2 bg-white dark:bg-gray-700 p-2 rounded border border-gray-200 dark:border-gray-600 hover:border-indigo-300 transition-colors group';
492 |                 li.innerHTML = `<input type="checkbox" class="task-checkbox cursor-pointer text-indigo-600 focus:ring-indigo-500 rounded" ${task.done ? 'checked' : ''} onchange="toggleModalTask(${index})"><span class="flex-1 text-sm text-gray-700 dark:text-gray-200 truncate select-text">${task.text}</span><button type="button" onclick="removeModalTask(${index})" class="text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"><i class="ph-bold ph-x"></i></button>`;
493 |                 list.appendChild(li);
494 |             });
495 |         }
496 | 
497 |         function addModalTask() {
498 |             const input = document.getElementById('newTaskInput');
499 |             const text = input.value.trim();
500 |             if (text) {
501 |                 currentEditingTasks.push({ text: text, done: false });
502 |                 input.value = '';
503 |                 renderTaskEditor();
504 |                 input.focus();
505 |             }
506 |         }
507 | 
508 |         function handleTaskEnter(e) { if (e.key === 'Enter') { e.preventDefault(); addModalTask(); } }
509 |         function toggleModalTask(index) { currentEditingTasks[index].done = !currentEditingTasks[index].done; renderTaskEditor(); }
510 |         function removeModalTask(index) { currentEditingTasks.splice(index, 1); renderTaskEditor(); }
511 | 
512 |         function renderEditingTags() {
513 |             const container = document.getElementById('activeTagsContainer');
514 |             container.innerHTML = '';
515 |             currentEditingTags.forEach((tag, index) => {
516 |                 const chip = document.createElement('div');
517 |                 chip.className = 'flex items-center gap-1 px-2 py-1 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 text-xs font-medium rounded-full';
518 |                 chip.innerHTML = `<span>#${tag}</span><button type="button" onclick="removeEditingTag(${index})" class="hover:text-indigo-900 focus:outline-none"><i class="ph-bold ph-x"></i></button>`;
519 |                 container.appendChild(chip);
520 |             });
521 |         }
522 |         function addEditingTag(tag) { tag = tag.trim(); if (tag && !currentEditingTags.includes(tag)) { currentEditingTags.push(tag); renderEditingTags(); } document.getElementById('inputTags').value = ''; document.getElementById('tag-suggestions').classList.add('hidden'); }
523 |         function removeEditingTag(index) { currentEditingTags.splice(index, 1); renderEditingTags(); }
524 |         function handleTagInput(e) { if (e.key === 'Enter') { e.preventDefault(); if (e.target.value.trim()) addEditingTag(e.target.value.trim()); } if (e.key === 'Backspace' && e.target.value === '' && currentEditingTags.length > 0) removeEditingTag(currentEditingTags.length - 1); }
525 | 
526 |         function getAllTags() { const all = new Set(); chats.forEach(c => { if(c.tags) c.tags.forEach(t => all.add(t)); }); return Array.from(all).sort(); }
527 |         function showSuggestions() {
528 |             const input = document.getElementById('inputTags'); const val = input.value.trim().toLowerCase();
529 |             const filtered = getAllTags().filter(tag => !currentEditingTags.includes(tag) && (!val || tag.toLowerCase().includes(val)));
530 |             const box = document.getElementById('tag-suggestions');
531 |             if (filtered.length === 0) { box.classList.add('hidden'); return; }
532 |             box.innerHTML = '';
533 |             filtered.forEach(tag => {
534 |                 const div = document.createElement('div'); div.className = 'suggestion-item px-4 py-2 cursor-pointer text-sm text-gray-700 dark:text-gray-200'; div.innerText = tag;
535 |                 div.onclick = (e) => { e.stopPropagation(); addEditingTag(tag); input.focus(); }; box.appendChild(div);
536 |             });
537 |             box.classList.remove('hidden');
538 |         }
539 |         function closeSuggestions() { setTimeout(() => document.getElementById('tag-suggestions').classList.add('hidden'), 200); }
540 | 
541 |         function drag(ev, id) { ev.dataTransfer.setData("text/plain", id); setTimeout(() => ev.target.classList.add('dragging'), 0); }
542 |         function dragEnd(ev) { ev.target.classList.remove('dragging'); document.querySelectorAll('.drop-zone-active').forEach(el => el.classList.remove('drop-zone-active')); }
543 |         function allowDrop(ev) { ev.preventDefault(); ev.currentTarget.classList.add('drop-zone-active'); }
544 |         function leaveDrop(ev) { ev.currentTarget.classList.remove('drop-zone-active'); }
545 |         function drop(ev, newPriority) {
546 |             ev.preventDefault(); ev.currentTarget.classList.remove('drop-zone-active');
547 |             const id = parseInt(ev.dataTransfer.getData("text/plain"));
548 |             const chatIndex = chats.findIndex(c => c.id === id);
549 |             if (chatIndex > -1 && chats[chatIndex].priority !== newPriority) { chats[chatIndex].priority = newPriority; saveData(); renderChats(); }
550 |         }
551 | 
552 |         function handleFormSubmit(e) {
553 |             e.preventDefault();
554 |             const editId = document.getElementById('editId').value;
555 |             const title = document.getElementById('inputTitle').value;
556 |             let path = document.getElementById('inputPath').value.trim();
557 |             const link = document.getElementById('inputLink').value.trim();
558 |             const priority = document.querySelector('input[name="priority"]:checked').value;
559 |             const desc = document.getElementById('inputDesc').value;
560 |             let tags = currentEditingTags;
561 | 
562 |             const pendingTasks = currentEditingTasks.filter(t => !t.done).length;
563 |             tags = tags.filter(t => t.toLowerCase() !== 'pending');
564 |             if (pendingTasks > 0) tags.push('Pending');
565 | 
566 |             if (path && !path.toLowerCase().endsWith('.html') && !path.toLowerCase().endsWith('.htm')) path += '.html';
567 | 
568 |             const chatData = { title, path, link, priority, desc, tags, tasks: currentEditingTasks };
569 | 
570 |             if (editId) {
571 |                 const index = chats.findIndex(c => c.id == editId);
572 |                 if (index !== -1) chats[index] = { ...chats[index], ...chatData };
573 |             } else {
574 |                 chats.push({ id: Date.now(), ...chatData, date: new Date().toLocaleDateString() });
575 |             }
576 |             saveData();
577 |             closeModal();
578 |             renderChats();
579 |         }
580 | 
581 |         function deleteChat(id) { if(confirm('Delete this card?')) { chats = chats.filter(c => c.id !== id); saveData(); renderChats(); } }
582 |         
583 |         function toggleFavorite(e, id) {
584 |             e.stopPropagation(); const index = chats.findIndex(c => c.id === id); if(index === -1) return;
585 |             let tags = chats[index].tags || [];
586 |             if (tags.includes('favorites')) tags = tags.filter(t => t !== 'favorites');
587 |             else tags.push('favorites');
588 |             chats[index].tags = tags; saveData(); renderChats();
589 |         }
590 | 
591 |         function setTagFilter(tag) { activeTag = (activeTag === tag) ? null : tag; renderChats(); }
592 | 
593 |         function renderTagFilters(allTags, pendingCount, favCount) {
594 |             const container = document.getElementById('tag-filters');
595 |             const statusContainer = document.getElementById('status-filters');
596 |             container.innerHTML = '';
597 |             statusContainer.innerHTML = '';
598 |             const allActive = activeTag === null;
599 |             const btnClass = allActive ? 'bg-gray-800 dark:bg-gray-700 text-white border-gray-800 dark:border-gray-600 cursor-default' : 'bg-white dark:bg-gray-800 text-rose-600 dark:text-rose-400 border-rose-300 dark:border-rose-800 hover:bg-rose-50 dark:hover:bg-rose-900/20 hover:border-rose-500 font-extrabold';
600 |             container.innerHTML += `<button onclick="setTagFilter(null)" class="px-3 py-1 rounded-full text-xs font-bold border transition-colors ${btnClass} whitespace-nowrap flex items-center gap-1 shadow-sm shrink-0"><i class="ph-bold ${allActive ? 'ph-circles-four' : 'ph-x'}"></i> ${allActive ? 'All' : 'Clear Filter'}</button><div class="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1 shrink-0"></div>`;
601 |             allTags.forEach(tag => {
602 |                 if (tag === 'favorites' || tag.toLowerCase() === 'pending') return; 
603 |                 const isActive = activeTag === tag;
604 |                 const btnClassTag = isActive ? 'bg-indigo-600 text-white border-indigo-600 shadow-md' : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-indigo-300 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20';
605 |                 container.innerHTML += `<button onclick="setTagFilter('${tag}')" class="px-3 py-1 rounded-full text-xs font-bold border transition-all ${btnClassTag} whitespace-nowrap flex items-center shrink-0">#${tag}</button>`;
606 |             });
607 |             const isPendingActive = activeTag === 'Pending';
608 |             const pendingClass = isPendingActive ? 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-200 border-red-400 shadow-inner' : 'bg-white dark:bg-gray-800 text-red-500 dark:text-red-400 border-gray-200 dark:border-gray-600 hover:border-red-400 hover:text-red-600 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20';
609 |             statusContainer.innerHTML += `<button onclick="setTagFilter('Pending')" class="px-3 py-1 rounded-full text-xs font-bold border transition-all ${pendingClass} whitespace-nowrap flex items-center gap-1" title="View pending"><i class="ph-bold ph-warning text-lg"></i> Pending (${pendingCount})</button>`;
610 |             const isFavActive = activeTag === 'favorites';
611 |             const favClass = isFavActive ? 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-200 border-yellow-400 shadow-inner' : 'bg-white dark:bg-gray-800 text-yellow-500 dark:text-yellow-400 border-gray-200 dark:border-gray-600 hover:border-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900/20';
612 |             statusContainer.innerHTML += `<button onclick="setTagFilter('favorites')" class="px-3 py-1 rounded-full text-xs font-bold border transition-all ${favClass} whitespace-nowrap flex items-center gap-1" title="View favorites"><i class="ph-fill ph-star text-lg"></i> Favorites (${favCount})</button>`;
613 |         }
614 | 
615 |         function renderChats() {
616 |             try {
617 |                 const cols = { idea: document.getElementById('col-idea'), pinned: document.getElementById('col-pinned'), important: document.getElementById('col-important'), reference: document.getElementById('col-reference') };
618 |                 const searchVal = document.getElementById('searchInput').value.toLowerCase();
619 |                 Object.values(cols).forEach(el => el.innerHTML = '');
620 |                 let counts = { idea: 0, pinned: 0, important: 0, reference: 0 };
621 |                 let allTags = new Set();
622 |                 let pendingCount = 0;
623 |                 let favCount = 0;
624 | 
625 |                 chats.forEach(chat => {
626 |                     if (!chat) return;
627 |                     const cTitle = chat.title || '';
628 |                     const cDesc = chat.desc || '';
629 |                     const matchesSearch = !searchVal || (cTitle.toLowerCase().includes(searchVal) || cDesc.toLowerCase().includes(searchVal));
630 |                     
631 |                     if (matchesSearch) {
632 |                         if (chat.tags) {
633 |                             chat.tags.forEach(t => allTags.add(t));
634 |                             if (chat.tags.some(t => (typeof t === 'string' && t.toLowerCase() === 'pending'))) pendingCount++;
635 |                             if (chat.tags.includes('favorites')) favCount++;
636 |                         }
637 |                     }
638 | 
639 |                     if (!matchesSearch) return;
640 |                     if (activeTag && (!chat.tags || !chat.tags.includes(activeTag))) return;
641 |                     
642 |                     if (!counts.hasOwnProperty(chat.priority)) chat.priority = 'reference';
643 |                     counts[chat.priority]++;
644 |                     cols[chat.priority].innerHTML += createCard(chat);
645 |                 });
646 | 
647 |                 document.getElementById('count-idea').innerText = counts.idea;
648 |                 document.getElementById('count-pin').innerText = counts.pinned;
649 |                 document.getElementById('count-imp').innerText = counts.important;
650 |                 document.getElementById('count-ref').innerText = counts.reference;
651 |                 
652 |                 renderTagFilters(Array.from(allTags).sort(), pendingCount, favCount);
653 |                 updateHeaderStats(counts);
654 |             } catch (renderErr) { console.error("Render Error:", renderErr); }
655 |         }
656 | 
657 |         function createCard(chat) {
658 |             const linkStr = chat.link || '';
659 |             const pathStr = chat.path || '';
660 |             const hasLink = linkStr.length > 0;
661 |             const hasPath = pathStr.length > 0;
662 |             
663 |             let titleHtml;
664 |             if (hasLink || hasPath) {
665 |                  const finalUrl = hasLink ? linkStr : pathStr;
666 |                  titleHtml = `<a href="${finalUrl}" target="_blank" class="font-bold text-gray-800 dark:text-gray-100 text-lg leading-tight transition-colors cursor-pointer hover:text-indigo-600 dark:hover:text-indigo-400 block w-full" title="${chat.title}">${chat.title}</a>`;
667 |             } else {
668 |                  titleHtml = `<span class="font-bold text-gray-800 dark:text-gray-100 text-lg leading-tight cursor-default block w-full" title="${chat.title}">${chat.title}</span>`;
669 |             }
670 |             
671 |             const cloudBtn = hasLink ? `<a href="${linkStr}" target="_blank" title="Open in Cloud" class="px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded border border-blue-100 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/50 hover:border-blue-300 transition-colors flex items-center gap-1 text-[10px]"><i class="ph-bold ph-cloud"></i> Cloud</a>` : '';
672 |             const localIcon = hasPath ? `<span class="flex items-center gap-1 truncate max-w-[120px] text-gray-500 dark:text-gray-400" title="Local File"><i class="ph-duotone ph-desktop text-gray-400 dark:text-gray-500"></i> ${pathStr}</span>` : `<span class="flex items-center gap-1 text-gray-400 dark:text-gray-600 italic"><i class="ph-duotone ph-warning-circle"></i> No local file</span>`;
673 | 
674 |             let tagsHtml = '';
675 |             if (chat.tags && chat.tags.length > 0) {
676 |                 tagsHtml = `<div class="flex flex-wrap gap-1 mt-2 mb-1">`;
677 |                 chat.tags.forEach(tag => {
678 |                     if (typeof tag !== 'string') return;
679 |                     if (tag === 'favorites' || tag.toLowerCase() === 'pending') return;
680 |                     let tagClass = 'bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 border-teal-100 dark:border-teal-800 hover:bg-teal-100 dark:hover:bg-teal-900/50 hover:border-teal-300';
681 |                     tagsHtml += `<button onclick="setTagFilter('${tag}')" class="px-1.5 py-0.5 text-[10px] rounded font-medium border transition-colors cursor-pointer ${tagClass}">#${tag}</button>`
682 |                 });
683 |                 tagsHtml += `</div>`;
684 |             }
685 | 
686 |             let progressHtml = '';
687 |             if (chat.tasks && chat.tasks.length > 0) {
688 |                 const total = chat.tasks.length;
689 |                 const done = chat.tasks.filter(t => t.done).length;
690 |                 const percent = Math.round((done / total) * 100);
691 |                 const colorClass = percent === 100 ? 'bg-green-600' : 'bg-green-400 dark:bg-green-500';
692 |                 const textClass = percent === 100 ? 'text-green-700 dark:text-green-400 font-bold' : 'text-gray-500 dark:text-gray-400';
693 |                 progressHtml = `<div class="mt-2 mb-1"><div class="flex justify-between text-[10px] mb-0.5 ${textClass}"><span class="flex items-center gap-1"><i class="ph-bold ph-check-square"></i> Tasks</span><span>${done}/${total} (${percent}%)</span></div><div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5"><div class="${colorClass} h-1.5 rounded-full transition-all duration-500" style="width: ${percent}%"></div></div></div>`;
694 |             }
695 | 
696 |             const descHtml = chat.desc ? `<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mt-1">${linkify(chat.desc)}</p>` : '';
697 |             
698 |             const isFav = chat.tags && chat.tags.includes('favorites');
699 |             const starIcon = isFav ? '<i class="ph-fill ph-star text-yellow-400 text-xl drop-shadow-sm"></i>' : '<i class="ph-bold ph-star text-yellow-400/60 hover:text-yellow-400 text-xl transition-colors"></i>';
700 |             
701 |             const isPending = chat.tags && chat.tags.some(t => (typeof t === 'string' && t.toLowerCase() === 'pending'));
702 |             const pendingBadge = isPending ? `<div class="flex items-center gap-1 bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-300 border border-red-200 dark:border-red-800 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide cursor-pointer hover:bg-red-100 transition-colors" onclick="setTagFilter('Pending')" title="View pending"><i class="ph-fill ph-warning text-sm"></i> PENDING</div>` : '';
703 | 
704 |             return `
705 |                 <div class="card-${chat.priority} card-base card-hover p-4 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 relative group flex flex-col gap-1" draggable="true" ondragstart="drag(event, ${chat.id})" ondragend="dragEnd(event)">
706 |                     <div class="absolute -top-3 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 bg-white dark:bg-gray-700 rounded-lg p-1 shadow-md border border-gray-200 dark:border-gray-600 z-40">
707 |                          <button onclick="openModal('edit', ${chat.id})" class="p-1 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/50 rounded" title="Edit"><i class="ph-bold ph-pencil-simple"></i></button>
708 |                          <button onclick="deleteChat(${chat.id})" class="p-1 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/50 rounded" title="Delete"><i class="ph-bold ph-trash"></i></button>
709 |                     </div>
710 |                     <div class="flex justify-between items-start mb-1">
711 |                         ${titleHtml}
712 |                     </div>
713 |                     ${tagsHtml}
714 |                     ${descHtml}
715 |                     ${progressHtml}
716 |                     <div class="mt-auto pt-2 flex items-center justify-between text-[10px] font-mono uppercase tracking-wide border-t border-gray-50 dark:border-gray-700 mt-2">
717 |                         <span class="text-gray-400 dark:text-gray-500 flex items-center gap-1"><i class="ph-bold ph-calendar-blank"></i> ${chat.date}</span>
718 |                         <div class="flex items-center gap-2">
719 |                             ${localIcon}${cloudBtn}
720 |                             ${pendingBadge}
721 |                             <button onclick="toggleFavorite(event, ${chat.id})" title="${isFav ? 'Remove from Favorites' : 'Mark as Favorite'}" class="focus:outline-none transform active:scale-90 transition-transform">${starIcon}</button>
722 |                         </div>
723 |                     </div>
724 |                 </div>
725 |             `;
726 |         }
727 |         const modal = document.getElementById('addModal');
728 |         const form = document.getElementById('chatForm');
729 |         function openModal(mode = 'create', id = null) {
730 |             modal.classList.remove('hidden');
731 |             form.reset();
732 |             document.getElementById('editId').value = '';
733 |             document.getElementById('tag-suggestions').classList.add('hidden');
734 |             document.getElementById('inputTags').value = '';
735 |             if (mode === 'edit' && id) {
736 |                 const chat = chats.find(c => c.id === id);
737 |                 if (chat) {
738 |                     document.getElementById('modalTitle').innerText = 'Edit';
739 |                     document.getElementById('editId').value = chat.id;
740 |                     document.getElementById('inputTitle').value = chat.title;
741 |                     document.getElementById('inputPath').value = chat.path || '';
742 |                     document.getElementById('inputLink').value = chat.link || '';
743 |                     document.getElementById('inputDesc').value = chat.desc;
744 |                     currentEditingTags = JSON.parse(JSON.stringify(chat.tags || []));
745 |                     renderEditingTags();
746 |                     const radios = document.getElementsByName('priority');
747 |                     for(let r of radios) { if(r.value === chat.priority) r.checked = true; }
748 |                     currentEditingTasks = JSON.parse(JSON.stringify(chat.tasks || []));
749 |                     renderTaskEditor();
750 |                 }
751 |             } else {
752 |                 document.getElementById('modalTitle').innerText = 'Add New';
753 |                 document.querySelector('input[value="idea"]').checked = true;
754 |                 currentEditingTasks = [];
755 |                 renderTaskEditor();
756 |                 currentEditingTags = [];
757 |                 renderEditingTags();
758 |             }
759 |         }
760 |         function closeModal() { modal.classList.add('hidden'); }
761 |         modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
762 | 
763 |         init();
764 |     </script>
765 | </body>
766 | </html>
767 | 


--------------------------------------------------------------------------------