session-spec UI

static/index.html

@@ -194,18 +194,31 @@
             <div class="card-header">
               <h2>💬 Chat with Documents</h2>
               <p>Ask questions about your uploaded materials and get AI-powered answers</p>
-              <div class="session-controls" style="margin-top: 16px; display:flex; align-items:center; gap:8px; flex-wrap: wrap;">
-                <div class="session-dropdown-wrapper" style="display:flex; align-items:center; gap:4px;">
+              <div class="session-controls">
+                <div class="session-dropdown-wrapper">
                   <select id="session-dropdown" class="session-dropdown">
                     <option value="">Select Session</option>
                   </select>
-                  <button id="create-session-btn" class="btn-icon" title="Create new session">+</button>
                 </div>
                 <div class="session-actions" style="display:none;">
-                  <button id="rename-session-btn" class="btn-icon" title="Rename session">✏️</button>
-                  <button id="delete-session-btn" class="btn-icon" title="Delete session">🗑️</button>
+                  <button id="rename-session-btn" class="btn-icon session-action-btn" title="Rename session">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                    </svg>
+                  </button>
+                  <button id="delete-session-btn" class="btn-icon session-action-btn" title="Delete session">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <polyline points="3,6 5,6 21,6"/>
+                      <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
+                      <line x1="10" y1="11" x2="10" y2="17"/>
+                      <line x1="14" y1="11" x2="14" y2="17"/>
+                    </svg>
+                  </button>
+                </div>
+                <div class="clear-history-wrapper">
+                  <button id="clear-chat-btn" class="btn-secondary">Clear History</button>
                 </div>
-                <button id="clear-chat-btn" class="btn-secondary">Clear History</button>
               </div>
             </div>
             <div id="chat">

static/styles.css

@@ -1639,15 +1639,13 @@
 .session-controls {
   display: flex;
   align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+  justify-content: space-between;
   margin-top: 16px;
+  gap: 16px;
 }
 
 .session-dropdown-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+  flex: 0 0 auto;
 }
 
 .session-dropdown {
@@ -1655,47 +1653,95 @@
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 8px 12px;
+  padding: 10px 16px;
   font-size: 14px;
-  min-width: 200px;
+  min-width: 220px;
   cursor: pointer;
-  transition: border-color 0.2s ease;
+  transition: all 0.2s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 40px;
 }
 
 .session-dropdown:focus {
   outline: none;
   border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
 .session-dropdown:hover {
   border-color: var(--border-light);
+  background-color: var(--card-hover);
 }
 
 .session-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
+  flex: 0 0 auto;
 }
 
-.session-actions .btn-icon {
-  background: var(--card);
-  color: var(--text-secondary);
+.session-action-btn {
+  background: transparent;
+  color: var(--text);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 6px 8px;
+  padding: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
 }
 
-.session-actions .btn-icon:hover {
+.session-action-btn svg {
+  width: 16px;
+  height: 16px;
+  stroke: var(--text);
+}
+
+.session-action-btn:hover {
   background: var(--card-hover);
+  border-color: var(--border-light);
+  transform: translateY(-1px);
+}
+
+.session-action-btn:active {
+  transform: translateY(0);
+}
+
+.clear-history-wrapper {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  flex: 1;
+}
+
+.clear-history-wrapper .btn-secondary {
+  background: var(--card);
   color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.clear-history-wrapper .btn-secondary:hover {
+  background: var(--card-hover);
   border-color: var(--border-light);
+  transform: translateY(-1px);
 }
 
-.session-actions .btn-icon:active {
-  transform: scale(0.95);
+.clear-history-wrapper .btn-secondary:active {
+  transform: translateY(0);
 }
 
 /* Modal styles for session management */
@@ -1725,6 +1771,7 @@
   .session-controls {
     flex-direction: column;
     align-items: stretch;
+    gap: 12px;
   }
   
   .session-dropdown-wrapper {
@@ -1738,5 +1785,11 @@
   
   .session-actions {
     justify-content: center;
+    order: 2;
+  }
+  
+  .clear-history-wrapper {
+    order: 3;
+    justify-content: center;
   }
 }