\n );\n }\n\n return (\n

\n\n {/* Main Content - replace with mode-conditional UI */}\n

\n {mode === \"edit\" && activeList\n ? (\n

\n Editing:{\" \"}\n {activeList.title}\n

\n startPairwise(activeList)}\n className=\"text-sm px-3 py-1 border rounded-md bg-blue-50 hover:bg-blue-100 text-blue-700\"\n disabled={currentItems.length < 2}\n >\n 📊 Compare Items\n \n

\n\n {/* Add Item Form */}\n

\n Add New Item\n

\n\n {/* Items List */}\n

\n Items ({currentItems.length})\n

\n {currentItems.length === 0\n ? (\n

📝

No items yet. Add some items to get started!

\n )\n : (\n

\n {currentItems.map((item, index) => (\n \n

\n {item.label}\n

\n Added{\" \"}\n {new Date(item.createdAt).toLocaleDateString()}\n

\n #{index + 1}\n

\n ))}\n

\n )}\n

\n\n {currentItems.length >= 2 && (\n

✨

\n Ready to compare!\n

\n You have {currentItems.length}{\" \"}\n items. Click \"Compare Items\" to start prioritizing.\n

\n )}\n

\n )\n : mode === \"pairwise\" && activeList\n ? (\n

\n Comparing:{\" \"}\n {activeList.title}\n

\n {pairLoading ? \"Loading…\" : \"Pick the one you prefer\"}\n

\n\n {pair\n ? (\n

\n vote(pair.left.id)}\n className={`p-6 rounded-xl shadow border hover:shadow-md transition text-left bg-white hover:bg-blue-50 ${\n pairLoading ? \"opacity-50 cursor-not-allowed\" : \"\"\n }`}\n >\n

\n {pair.left.label}\n

\n \n vote(pair.right.id)}\n className={`p-6 rounded-xl shadow border hover:shadow-md transition text-left bg-white hover:bg-green-50 ${\n pairLoading ? \"opacity-50 cursor-not-allowed\" : \"\"\n }`}\n >\n

\n {pair.right.label}\n

\n \n

\n )\n : (\n

\n {pairLoading\n ? \"Finding the next pair…\"\n : \"No pair available\"}\n

\n )}\n

\n )\n : mode === \"ranking\" && activeList\n ? (\n startPairwise(activeList)}\n />\n )\n : mode === \"session-result\" && activeSession\n ? (\n setMode(\"sessions\")}\n />\n )\n : mode === \"sessions\"\n ? (\n \n )\n : (\n <>\n {/* Quick Actions */}\n

\n {/* Create New List */}\n

\n Create New List\n

\n\n {/* Sessions */}\n

\n Session History\n

\n View your past comparison and budget allocation sessions.\n

\n \n 📊 View Sessions\n \n

\n\n {/* Lists Grid */}\n

\n {lists.length === 0\n ? (\n

📝

\n No lists yet\n

\n Create your first list to start prioritizing!\n

\n )\n : (\n lists.map((list) => (\n {\n // Navigate to edit mode for the list\n openEditMode(list);\n }}\n >\n

\n {list.title}\n

\n {list.description && (\n

\n {list.description}\n

\n )}\n

\n \n Created{\" \"}\n {new Date(list.createdAt).toLocaleDateString()}\n \n

\n {/* Make Compare a button for quick start */}\n {\n e.stopPropagation();\n startPairwise(list);\n }}\n >\n 📊 Compare\n \n {\n e.stopPropagation();\n openEditMode(list);\n }}\n >\n ✏️ Edit\n \n \n 💰 Budget\n \n

\n ))\n )}\n \n\n {/* Features Overview */}\n

\n How It Works\n

⚖️

\n Pairwise Comparison\n

\n Compare items two at a time to build a ranking based on\n your preferences. Perfect for subjective decisions.\n

💰

\n Budget Allocation\n

\n Distribute a fixed budget across your items to understand\n relative importance and trade-offs.\n

\n \n )}\n \n\n {/* Footer */}\n \n \n );\n}\n\n","deleted","label",[171,172,152],"frontend","components","permalink","https://www.val.town/x/cricks_unmixed4u/value-sort/code/frontend/components/App.tsx","extension","actionData","errors"]