Refactor: Extract database picker UI into ChatDatabasePicker component and update state management logic

src/App.jsx

@@ -1505,8 +1505,7 @@ async function regenerateFromIndex(index, overrideUserText = null) {
     setLibraryJobs([])
     setActiveLibrarySlug(null)
     setEditingLibrarySlug(null)
-    setIsDbPickerOpen(false)
-    setChatLibraryBySession({})
+    clearChatLibrarySelections()
     await refreshLibraries()
     await refreshLibraryJobs()
   }
@@ -2270,11 +2269,7 @@ async function createNewChat() {
     .then(() => {
       const newSessions = chatSessions.filter(s => s.session_id !== sessionId);
       setChatSessions(newSessions);
-      setChatLibraryBySession(prev => {
-        const next = { ...(prev || {}) }
-        delete next[sessionId]
-        return next
-      })
+      setChatLibraryForSession(sessionId, null)
       if (activeSessionId === sessionId) {
         setActiveSessionId(newSessions.length > 0 ? newSessions[0].session_id : null);
       }
@@ -2744,74 +2739,15 @@ async function createNewChat() {
                   placeholder="Ask any question..."
                   maxRows={13}
                 />
-                <div className="footer-tool-group" ref={dbPickerRef}>
-                  <button
-                    type="button"
-                    className={"db-picker-toggle" + (chatLibrary ? " active" : "")}
-                    onClick={() => {
-                      if (!activeSessionId) return
-                      setIsDbPickerOpen(prev => !prev)
-                    }}
-                    title={chatLibrary ? `Database: ${chatLibrary.name}${chatLibraryStatusSuffix}` : 'Select database for this chat'}
-                    aria-haspopup="menu"
-                    aria-expanded={isDbPickerOpen}
-                    disabled={!activeSessionId}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-                         aria-hidden="true">
-                      <ellipse cx="12" cy="5" rx="8" ry="3"/>
-                      <path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/>
-                      <path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>
-                    </svg>
-                  </button>
-                  {isDbPickerOpen && (
-                    <div className="db-picker-menu" role="menu">
-                      <button
-                        type="button"
-                        className={"db-picker-option" + (!chatLibrarySlug ? " selected" : "")}
-                        onClick={() => {
-                          setChatLibraryForSession(activeSessionId, null)
-                          setIsDbPickerOpen(false)
-                        }}
-                      >
-                        <span>No database</span>
-                        {!chatLibrarySlug && <span className="db-picker-status">Selected</span>}
-                      </button>
-                      {libraries.length === 0 ? (
-                        <div className="db-picker-empty">No databases yet.</div>
-                      ) : (
-                        libraries.map(library => {
-                          const selected = chatLibrarySlug === library.slug
-                          const syncing = isLibrarySyncing(library.slug)
-                          const status = !library.files?.length
-                            ? 'Empty'
-                            : library.states?.is_indexed
-                              ? 'Ready'
-                              : syncing
-                                ? 'Syncing'
-                                : 'Needs sync'
-
-                          return (
-                            <button
-                              key={library.slug}
-                              type="button"
-                              className={"db-picker-option" + (selected ? " selected" : "")}
-                              disabled={!library.files?.length}
-                              onClick={() => {
-                                setChatLibraryForSession(activeSessionId, library.slug)
-                                setIsDbPickerOpen(false)
-                              }}
-                            >
-                              <span>{library.name}</span>
-                              <span className="db-picker-status">{selected ? 'Selected' : status}</span>
-                            </button>
-                          )
-                        })
-                      )}
-                    </div>
-                  )}
-                </div>
+                <ChatDatabasePicker
+                  activeSessionId={activeSessionId}
+                  chatLibrary={chatLibrary}
+                  chatLibrarySlug={chatLibrarySlug}
+                  chatLibraryStatusSuffix={chatLibraryStatusSuffix}
+                  isLibrarySyncing={isLibrarySyncing}
+                  libraries={libraries}
+                  setChatLibraryForSession={setChatLibraryForSession}
+                />
                   <div className="footer-tool-group" ref={attachmentMenuRef}>
                     <button
                       type="button"