Modernize frontend with tabs, HTMX, and Tailwind build pipeline

Complete UI overhaul implementing modern design patterns with HTMX for
dynamic updates, proper Tailwind build pipeline, and improved UX.

Build Pipeline:
- Add npm + PostCSS + Tailwind CSS configuration
- Custom design system with brand colors
- Compiled CSS: 27KB (vs 3MB CDN), 99% reduction
- Makefile for unified build commands
- Inter font for improved typography

Tab Interface:
- Separate Tasks tab from Notes tab using HTMX
- Partial page updates without full refreshes
- Tab state management with proper refresh handling
- New endpoints: /tabs/tasks, /tabs/notes, /tabs/refresh

Template Architecture:
- Modular partials system (7 reusable components)
- Cleaner separation of concerns

Empty Board Management:
- Active boards in main 3-column grid
- Empty boards in collapsible section
- Reduces visual clutter

Visual Design Enhancements:
- Inter font, brand color accents
- Improved typography hierarchy and spacing
- Enhanced card styling with hover effects

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 123 insertions, 0 deletions

diff --git a/web/static/css/input.css b/web/static/css/input.css
new file mode 100644
index 0000000..16e7d2e
--- /dev/null
+++ b/web/static/css/input.css
@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+  body {
+    @apply antialiased text-gray-900 bg-gradient-to-br from-gray-50 to-gray-100;
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+
+  h1 {
+    @apply text-4xl font-bold tracking-tight;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold tracking-tight;
+  }
+
+  h3 {
+    @apply text-lg font-semibold;
+  }
+}
+
+/* Custom components */
+@layer components {
+  .card {
+    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 transition-all duration-200;
+  }
+
+  .card-hover {
+    @apply hover:shadow-lg hover:border-gray-300 hover:-translate-y-0.5;
+  }
+
+  .section-header {
+    @apply text-2xl font-bold text-gray-900 mb-6;
+  }
+
+  .tab-button {
+    @apply px-6 py-3 font-medium text-gray-600 border-b-2 border-transparent
+           hover:text-gray-900 hover:border-gray-300 transition-colors cursor-pointer;
+  }
+
+  .tab-button-active {
+    @apply text-primary-600 border-primary-600;
+  }
+
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .board-card {
+    @apply card card-hover;
+  }
+
+  .trello-card-item {
+    @apply bg-white border border-gray-200 rounded-lg p-4
+           hover:shadow-md hover:border-trello/30 transition-all;
+  }
+
+  .task-item {
+    @apply flex items-start gap-3 p-4 rounded-lg
+           hover:bg-gray-50 transition-colors;
+  }
+
+  .note-card {
+    @apply card card-hover border-l-4 border-l-obsidian;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+/* Custom utilities */
+@layer utilities {
+  .section-spacing {
+    @apply mb-10;
+  }
+
+  .content-max-width {
+    @apply max-w-7xl mx-auto px-6 lg:px-8;
+  }
+
+  .card-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+  }
+
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(203 213 225) rgb(241 245 249);
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: rgb(241 245 249);
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: rgb(203 213 225);
+    border-radius: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: rgb(148 163 184);
+  }
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+}