further ui cleanup, trimming quick stats

frontend/src/components/PromptDisplay.jsx

@@ -6,9 +6,16 @@ const PromptDisplay = () => {
   const [error, setError] = useState(null);
   const [selectedIndex, setSelectedIndex] = useState(null);
   const [viewMode, setViewMode] = useState('history'); // 'history' or 'drawn'
+  const [poolStats, setPoolStats] = useState({
+    total: 0,
+    target: 20,
+    sessions: 0,
+    needsRefill: true
+  });
 
   useEffect(() => {
     fetchMostRecentPrompt();
+    fetchPoolStats();
   }, []);
 
   const fetchMostRecentPrompt = async () => {
@@ -98,13 +105,10 @@ const PromptDisplay = () => {
         // Mark as selected and show success
         setSelectedIndex(index);
 
-        // Instead of showing an alert, refresh the page to show the updated history
-        // The default view shows the most recent prompt from history
-        alert(`Prompt added to history as ${data.position_in_history}! Refreshing to show updated history...`);
-
-        // Refresh the page to show the updated history
+        // Refresh the page to show the updated history and pool stats
         // The default view shows the most recent prompt from history (position 0)
         fetchMostRecentPrompt();
+        fetchPoolStats();
       } else {
         const errorData = await response.json();
         setError(`Failed to add prompt to history: ${errorData.detail || 'Unknown error'}`);
@@ -114,14 +118,31 @@ const PromptDisplay = () => {
     }
   };
 
+  const fetchPoolStats = async () => {
+    try {
+      const response = await fetch('/api/v1/prompts/stats');
+      if (response.ok) {
+        const data = await response.json();
+        setPoolStats({
+          total: data.total_prompts || 0,
+          target: data.target_pool_size || 20,
+          sessions: data.available_sessions || 0,
+          needsRefill: data.needs_refill || true
+        });
+      }
+    } catch (err) {
+      console.error('Error fetching pool stats:', err);
+    }
+  };
+
   const handleFillPool = async () => {
     setLoading(true);
     try {
       const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
       if (response.ok) {
-        alert('Prompt pool filled successfully!');
-        // Refresh the prompt
+        // Refresh the prompt and pool stats - no alert needed, UI will show updated stats
         fetchMostRecentPrompt();
+        fetchPoolStats();
       } else {
         setError('Failed to fill prompt pool');
       }
@@ -159,8 +180,8 @@ const PromptDisplay = () => {
               {prompts.map((promptObj, index) => (
                 <div
                   key={index}
-                  className={`prompt-card cursor-pointer ${selectedIndex === index ? 'selected' : ''}`}
-                  onClick={() => setSelectedIndex(index)}
+                  className={`prompt-card ${viewMode === 'drawn' ? 'cursor-pointer' : ''} ${selectedIndex === index ? 'selected' : ''}`}
+                  onClick={viewMode === 'drawn' ? () => setSelectedIndex(index) : undefined}
                 >
                   <div className="flex items-start gap-3">
                     <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${selectedIndex === index ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>
@@ -178,14 +199,21 @@ const PromptDisplay = () => {
                           {promptObj.text.length} characters
                         </span>
                         <span>
-                          {selectedIndex === index ? (
-                            <span className="text-green-600">
-                              <i className="fas fa-check-circle mr-1"></i>
-                              Selected
-                            </span>
+                          {viewMode === 'drawn' ? (
+                            selectedIndex === index ? (
+                              <span className="text-green-600">
+                                <i className="fas fa-check-circle mr-1"></i>
+                                Selected
+                              </span>
+                            ) : (
+                              <span className="text-gray-500">
+                                Click to select
+                              </span>
+                            )
                           ) : (
-                            <span className="text-gray-500">
-                              Click to select
+                            <span className="text-gray-600">
+                              <i className="fas fa-history mr-1"></i>
+                              Most recent from history
                             </span>
                           )}
                         </span>
@@ -199,23 +227,36 @@ const PromptDisplay = () => {
 
           <div className="flex flex-col gap-4">
             <div className="flex gap-2">
-              <button
-                className="btn btn-success flex-1"
-                onClick={() => handleAddToHistory(selectedIndex !== null ? selectedIndex : 0)}
-                disabled={selectedIndex === null}
-              >
-                <i className="fas fa-history"></i>
-                {selectedIndex !== null ? 'Use Selected Prompt' : 'Select a Prompt First'}
-              </button>
-              <button className="btn btn-primary flex-1" onClick={handleDrawPrompts}>
+              {viewMode === 'drawn' && (
+                <button
+                  className="btn btn-success flex-1"
+                  onClick={() => handleAddToHistory(selectedIndex !== null ? selectedIndex : 0)}
+                  disabled={selectedIndex === null}
+                >
+                  <i className="fas fa-history"></i>
+                  {selectedIndex !== null ? 'Use Selected Prompt' : 'Select a Prompt First'}
+                </button>
+              )}
+              <button className={`btn btn-primary ${viewMode === 'drawn' ? 'flex-1' : 'w-full'}`} onClick={handleDrawPrompts}>
                 <i className="fas fa-dice"></i>
                 {viewMode === 'history' ? 'Draw 3 New Prompts' : 'Draw 3 More Prompts'}
               </button>
             </div>
 
-            <button className="btn btn-secondary" onClick={handleFillPool}>
-              <i className="fas fa-sync"></i> Fill Prompt Pool
-            </button>
+            <div className="relative">
+              <button className="btn btn-secondary w-full relative overflow-hidden" onClick={handleFillPool}>
+                <div className="absolute top-0 left-0 h-full bg-green-500 opacity-20 transition-all duration-300"
+                     style={{ width: `${Math.min((poolStats.total / poolStats.target) * 100, 100)}%` }}>
+                </div>
+                <div className="relative z-10 flex items-center justify-center gap-2">
+                  <i className="fas fa-sync"></i>
+                  <span>Fill Prompt Pool ({poolStats.total}/{poolStats.target})</span>
+                </div>
+              </button>
+              <div className="text-xs text-gray-600 mt-1 text-center">
+                {Math.round((poolStats.total / poolStats.target) * 100)}% full
+              </div>
+            </div>
           </div>
 
           <div className="mt-6 text-sm text-gray-600">

frontend/src/components/StatsDashboard.jsx

@@ -67,8 +67,7 @@ const StatsDashboard = () => {
     try {
       const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
       if (response.ok) {
-        alert('Prompt pool filled successfully!');
-        // Refresh stats
+        // Refresh stats - no alert needed, UI will show updated stats
         fetchStats();
       } else {
         alert('Failed to fill prompt pool');
@@ -126,17 +125,9 @@ const StatsDashboard = () => {
             ></div>
           </div>
           <div className="text-xs text-gray-600 mt-1">
-            {stats.pool.needsRefill ? (
-              <span className="text-orange-600">
-                <i className="fas fa-exclamation-triangle mr-1"></i>
-                Needs refill ({stats.pool.target - stats.pool.total} prompts needed)
-              </span>
-            ) : (
-              <span className="text-green-600">
-                <i className="fas fa-check-circle mr-1"></i>
-                Pool is full
-              </span>
-            )}
+            <span className="text-gray-600">
+              {stats.pool.total}/{stats.pool.target} prompts
+            </span>
           </div>
         </div>
 
@@ -169,11 +160,7 @@ const StatsDashboard = () => {
           <li className="flex items-start">
             <i className="fas fa-bolt text-yellow-600 mt-1 mr-2"></i>
             <span>
-              {stats.pool.needsRefill ? (
-                <span className="text-orange-600">Pool needs refilling</span>
-              ) : (
-                <span className="text-green-600">Pool is ready for use</span>
-              )}
+              <span className="text-gray-600">Pool is {Math.round((stats.pool.total / stats.pool.target) * 100)}% full</span>
             </span>
           </li>
           <li className="flex items-start">
@@ -191,20 +178,6 @@ const StatsDashboard = () => {
         </ul>
       </div>
 
-      {stats.pool.needsRefill && (
-        <div className="mt-6">
-          <button
-            className="btn btn-primary w-full"
-            onClick={handleFillPool}
-          >
-            <i className="fas fa-sync mr-2"></i>
-            Fill Prompt Pool ({stats.pool.target - stats.pool.total} prompts)
-          </button>
-          <p className="text-xs text-gray-600 mt-2 text-center">
-            This will use AI to generate new prompts and fill the pool to target capacity
-          </p>
-        </div>
-      )}
     </div>
   );
 };

frontend/src/layouts/Layout.astro

@@ -30,7 +30,7 @@ import '../styles/global.css';
     </main>
 
     <footer>
-      <p>Daily Journal Prompt Generator &copy; 2024</p>
+      <p>Daily Journal Prompt Generator &copy; 2026</p>
       <p>Powered by AI creativity</p>
     </footer>
   </body>

frontend/src/pages/index.astro

@@ -37,15 +37,12 @@ import StatsDashboard from '../components/StatsDashboard.jsx';
           </div>
 
           <div class="flex flex-col gap-2">
-            <button class="btn btn-primary" onclick="document.querySelector('button[onclick*=\"handleDrawPrompts\"]')?.click()">
-              <i class="fas fa-dice"></i> Draw 3 Prompts
-            </button>
-            <button class="btn btn-secondary" onclick="document.querySelector('button[onclick*=\"handleFillPool\"]')?.click()">
-              <i class="fas fa-sync"></i> Fill Pool
-            </button>
             <button class="btn btn-warning" onclick="window.location.href='/api/v1/prompts/history'">
               <i class="fas fa-history"></i> View History (API)
             </button>
+            <button class="btn btn-info" onclick="window.location.href='/docs'">
+              <i class="fas fa-book"></i> API Documentation
+            </button>
           </div>
         </div>
       </div>