Address review feedback: fix React patterns, accessibility, and performance

Co-authored-by: PeterDaveHello <[email protected]>

Author: Copilot

src/_locales/zh-hant/main.json

@@ -98,7 +98,7 @@
   "Clear conversations": "清空對話記錄",
   "Settings": "設定",
   "Search": "搜尋",
-  "Search conversations...": "搜尋聊天記錄...",
+  "Search conversations...": "搜尋對話記錄...",
   "Feature Pages": "功能頁面",
   "Keyboard Shortcuts": "快速鍵設定",
   "Open Conversation Page": "開啟獨立對話頁面",

src/pages/IndependentPanel/App.jsx

@@ -6,7 +6,7 @@ import {
   getSession,
   deleteSession,
 } from '../../services/local-session.mjs'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 import './styles.scss'
 import { useConfig } from '../../hooks/use-config.mjs'
 import { useTranslation } from 'react-i18next'
@@ -104,28 +104,29 @@ function App() {
     await setSessionIdSafe(sessions[0].sessionId)
   }
 
-  // Filter sessions based on search query
-  const filteredSessions = sessions.filter((session) => {
-    if (!searchQuery.trim()) return true
+  // Filter sessions based on search query (memoized for performance)
+  const filteredSessions = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase()
+    if (!query) return sessions
 
-    const query = searchQuery.toLowerCase()
-
-    // Search in session name
-    if (session.sessionName && session.sessionName.toLowerCase().includes(query)) {
-      return true
-    }
+    return sessions.filter((session) => {
+      // Search in session name
+      if (session.sessionName && session.sessionName.toLowerCase().includes(query)) {
+        return true
+      }
 
-    // Search in conversation records
-    if (session.conversationRecords && Array.isArray(session.conversationRecords)) {
-      return session.conversationRecords.some((record) => {
-        const questionMatch = record.question && record.question.toLowerCase().includes(query)
-        const answerMatch = record.answer && record.answer.toLowerCase().includes(query)
-        return questionMatch || answerMatch
-      })
-    }
+      // Search in conversation records
+      if (session.conversationRecords) {
+        return session.conversationRecords.some((record) => {
+          const questionMatch = record.question && record.question.toLowerCase().includes(query)
+          const answerMatch = record.answer && record.answer.toLowerCase().includes(query)
+          return questionMatch || answerMatch
+        })
+      }
 
-    return false
-  })
+      return false
+    })
+  }, [sessions, searchQuery])
 
   return (
     <div className="IndependentPanel">
@@ -145,43 +146,44 @@ function App() {
           <hr />
           <div className="search-container">
             <input
-              type="text"
+              type="search"
               placeholder={t('Search conversations...')}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="search-input"
+              aria-label={t('Search')}
+              autoComplete="off"
             />
           </div>
           <div className="chat-list">
-            {filteredSessions.map(
-              (
-                session,
-                index, // TODO editable session name
-              ) => (
-                <button
-                  key={index}
-                  className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
-                  style="display: flex; align-items: center; justify-content: space-between;"
-                  onClick={() => {
-                    setSessionIdSafe(session.sessionId)
-                  }}
-                >
-                  {session.sessionName}
-                  <span className="gpt-util-group">
-                    <DeleteButton
-                      size={14}
-                      text={t('Delete Conversation')}
-                      onConfirm={() =>
-                        deleteSession(session.sessionId).then((sessions) => {
-                          setSessions(sessions)
-                          setSessionIdSafe(sessions[0].sessionId)
-                        })
-                      }
-                    />
-                  </span>
-                </button>
-              ),
-            )}
+            {filteredSessions.map((session) => (
+              <button
+                key={session.sessionId}
+                className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+                onClick={() => {
+                  setSessionIdSafe(session.sessionId)
+                }}
+              >
+                {session.sessionName}
+                <span className="gpt-util-group">
+                  <DeleteButton
+                    size={14}
+                    text={t('Delete Conversation')}
+                    onConfirm={() =>
+                      deleteSession(session.sessionId).then((sessions) => {
+                        setSessions(sessions)
+                        setSessionIdSafe(sessions[0].sessionId)
+                      })
+                    }
+                  />
+                </span>
+              </button>
+            ))}
           </div>
           <hr />
           <div className="chat-sidebar-button-group">

src/pages/IndependentPanel/styles.scss

@@ -71,6 +71,10 @@
     width: 60px;
   }
 
+  .chat-sidebar.collapsed .search-container {
+    display: none;
+  }
+
   .chat-sidebar:hover,
   .chat-sidebar:not(.collapsed) {
     min-width: 250px;
@@ -100,6 +104,8 @@
     color: var(--font-color);
     font-size: 14px;
     font-family: 'Cairo', sans-serif;
+    box-sizing: border-box;
+    line-height: 1.2;
   }
 
   .search-input::placeholder {
@@ -108,10 +114,14 @@
   }
 
   .search-input:focus {
-    outline: none;
     border-color: var(--font-active-color);
   }
 
+  .search-input:focus-visible {
+    outline: 2px solid var(--font-active-color);
+    outline-offset: 2px;
+  }
+
   .chat-list {
     display: flex;
     flex-direction: column;