Merge pull request #677 from dataelement/fix/sidebar-focus-truncation

fix: sidebar Focus list no longer truncates at 12 items without expand option

Author: yaojin3616

frontend/src/pages/agent-detail/AgentDetailPage.tsx

@@ -2063,6 +2063,10 @@ export default function AgentDetailPage() {
     const [showAllFocus, setShowAllFocus] = useState(false);
     const [showCompletedFocus, setShowCompletedFocus] = useState(false);
     const [showAllReflections, setShowAllReflections] = useState(false);
+    // Sidebar Focus group expand states
+    const [showAllSideActive, setShowAllSideActive] = useState(false);
+    const [showAllSideSystem, setShowAllSideSystem] = useState(false);
+    const [showAllSideCompleted, setShowAllSideCompleted] = useState(false);
     const [awareView, setAwareView] = useState<'list' | 'calendar'>('list');
     const [awareCalendarMode, setAwareCalendarMode] = useState<'day' | 'week' | 'month'>('week');
     const [awareCalendarDate, setAwareCalendarDate] = useState<Date>(() => new Date());
@@ -4448,12 +4452,42 @@ export default function AgentDetailPage() {
                 </div>
             );
         };
-        const renderFocusGroup = (title: string, items: FocusItem[]) => {
+        const SIDE_FOCUS_LIMIT = 12;
+        const renderFocusGroup = (
+            title: string,
+            items: FocusItem[],
+            showAll: boolean,
+            setShowAll: (val: boolean) => void,
+        ) => {
             if (items.length === 0) return null;
+            const hasMore = items.length > SIDE_FOCUS_LIMIT;
+            const visibleItems = showAll ? items : items.slice(0, SIDE_FOCUS_LIMIT);
             return (
                 <div className="aware-side-focus-group">
-                    <div className="aware-side-subtitle">{title}</div>
-                    {items.slice(0, 12).map(renderFocusItem)}
+                    <div className="aware-side-subtitle" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <span>{title}</span>
+                        {hasMore && (
+                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                {showAll ? '' : `${SIDE_FOCUS_LIMIT}/${items.length}`}
+                            </span>
+                        )}
+                    </div>
+                    {visibleItems.map(renderFocusItem)}
+                    {hasMore && (
+                        <button
+                            type="button"
+                            className="aware-side-collapse"
+                            onClick={() => setShowAll(!showAll)}
+                            style={{ marginTop: '4px', width: '100%', textAlign: 'center', borderTop: '1px dashed var(--border-subtle)', paddingTop: '6px' }}
+                        >
+                            <span>
+                                {showAll
+                                    ? (isZh ? '收起' : 'Show less')
+                                    : (isZh ? `显示更多 (+${items.length - SIDE_FOCUS_LIMIT})` : `Show more (+${items.length - SIDE_FOCUS_LIMIT})`)
+                                }
+                            </span>
+                        </button>
+                    )}
                 </div>
             );
         };
@@ -4612,19 +4646,38 @@ export default function AgentDetailPage() {
                             <div className="aware-side-empty">{t('agent.aware.focusEmpty')}</div>
                         ) : (
                             <>
-                                {renderFocusGroup(isZh ? '进行中' : 'In progress', activeFocusItems)}
-                                {renderFocusGroup(isZh ? '系统 Focus' : 'System Focus', systemFocusItems)}
+                                {renderFocusGroup(isZh ? '进行中' : 'In progress', activeFocusItems, showAllSideActive, setShowAllSideActive)}
+                                {renderFocusGroup(isZh ? '系统 Focus' : 'System Focus', systemFocusItems, showAllSideSystem, setShowAllSideSystem)}
                                 {completedFocusItems.length > 0 && (
                                     <div className="aware-side-focus-group">
                                         <button
                                             type="button"
                                             className="aware-side-collapse"
-                                            onClick={() => setShowCompletedFocus(!showCompletedFocus)}
+                                            onClick={() => { setShowCompletedFocus(!showCompletedFocus); setShowAllSideCompleted(false); }}
                                         >
                                             <span>{showCompletedFocus ? (isZh ? '收起已完成' : 'Hide completed') : (isZh ? `已完成 (${completedFocusItems.length})` : `Completed (${completedFocusItems.length})`)}</span>
                                             <span className={`aware-side-chevron ${showCompletedFocus ? 'open' : ''}`}>▶</span>
                                         </button>
-                                        {showCompletedFocus && completedFocusItems.slice(0, 12).map(renderFocusItem)}
+                                        {showCompletedFocus && (
+                                            <>
+                                                {(showAllSideCompleted ? completedFocusItems : completedFocusItems.slice(0, SIDE_FOCUS_LIMIT)).map(renderFocusItem)}
+                                                {completedFocusItems.length > SIDE_FOCUS_LIMIT && (
+                                                    <button
+                                                        type="button"
+                                                        className="aware-side-collapse"
+                                                        onClick={() => setShowAllSideCompleted(!showAllSideCompleted)}
+                                                        style={{ marginTop: '4px', width: '100%', textAlign: 'center', borderTop: '1px dashed var(--border-subtle)', paddingTop: '6px' }}
+                                                    >
+                                                        <span>
+                                                            {showAllSideCompleted
+                                                                ? (isZh ? '收起' : 'Show less')
+                                                                : (isZh ? `显示更多 (+${completedFocusItems.length - SIDE_FOCUS_LIMIT})` : `Show more (+${completedFocusItems.length - SIDE_FOCUS_LIMIT})`)
+                                                            }
+                                                        </span>
+                                                    </button>
+                                                )}
+                                            </>
+                                        )}
                                     </div>
                                 )}
                             </>