Minor fe fixes

client/src/App.tsx

@@ -4,7 +4,7 @@ import './index.css';
 import 'highlight.js/styles/vs2015.css';
 import Tab from './Tab';
 import { TabsContext } from './context/tabsContext';
-import { UITabType } from './types/general';
+import { RepoType, UITabType } from './types/general';
 import {
   getJsonFromStorage,
   getPlainFromStorage,
@@ -13,9 +13,11 @@ import {
   savePlainToStorage,
   TABS_KEY,
 } from './services/storage';
-import { initApi } from './services/api';
+import { getRepos, initApi } from './services/api';
 import { useComponentWillMount } from './hooks/useComponentWillMount';
 import { RepoSource } from './types';
+import { RepositoriesContext } from './context/repositoriesContext';
+import { AnalyticsContextProvider } from './context/providers/AnalyticsContextProvider';
 
 type Props = {
   deviceContextValue: DeviceContextType;
@@ -37,6 +39,7 @@ function App({ deviceContextValue }: Props) {
   const [activeTab, setActiveTab] = useState(
     getPlainFromStorage(LAST_ACTIVE_TAB_KEY) || 'initial',
   );
+  const [repositories, setRepositories] = useState<RepoType[] | undefined>();
 
   const handleAddTab = useCallback(
     (repoRef: string, repoName: string, name: string, source: RepoSource) => {
@@ -100,17 +103,51 @@ function App({ deviceContextValue }: Props) {
     [tabs, activeTab, handleAddTab, handleRemoveTab],
   );
 
+  const fetchRepos = useCallback(() => {
+    getRepos().then((data) => {
+      const list = data?.list?.sort((a, b) => (a.name < b.name ? -1 : 1)) || [];
+      setRepositories(list);
+    });
+  }, []);
+
+  useEffect(() => {
+    fetchRepos();
+    const intervalId = setInterval(fetchRepos, 5000);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  const reposContextValue = useMemo(
+    () => ({
+      repositories,
+      setRepositories,
+      localSyncError: false,
+      githubSyncError: false,
+      fetchRepos,
+    }),
+    [repositories],
+  );
+
   return (
-    <TabsContext.Provider value={contextValue}>
-      {tabs.map((t) => (
-        <Tab
-          key={t.key}
-          deviceContextValue={deviceContextValue}
-          isActive={t.key === activeTab}
-          tab={t}
-        />
-      ))}
-    </TabsContext.Provider>
+    <AnalyticsContextProvider
+      forceAnalytics={deviceContextValue.forceAnalytics}
+      isSelfServe={deviceContextValue.isSelfServe}
+      envConfig={deviceContextValue.envConfig}
+    >
+      <RepositoriesContext.Provider value={reposContextValue}>
+        <TabsContext.Provider value={contextValue}>
+          {tabs.map((t) => (
+            <Tab
+              key={t.key}
+              deviceContextValue={deviceContextValue}
+              isActive={t.key === activeTab}
+              tab={t}
+            />
+          ))}
+        </TabsContext.Provider>
+      </RepositoriesContext.Provider>
+    </AnalyticsContextProvider>
   );
 }
 

client/src/Tab.tsx

@@ -1,11 +1,8 @@
-import React, { useMemo, useState } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Settings from './components/Settings';
-import { RepoType, UITabType } from './types/general';
+import { UITabType } from './types/general';
 import { DeviceContextType } from './context/deviceContext';
-import { RepositoriesContext } from './context/repositoriesContext';
 import './index.css';
-import { AnalyticsContextProvider } from './context/providers/AnalyticsContextProvider';
 import ReportBugModal from './components/ReportBugModal';
 import { UIContextProvider } from './context/providers/UiContextProvider';
 import { DeviceContextProvider } from './context/providers/DeviceContextProvider';
@@ -21,47 +18,24 @@ type Props = {
 };
 
 function Tab({ deviceContextValue, isActive, tab }: Props) {
-  const [repositories, setRepositories] = useState<RepoType[] | undefined>();
-
-  const reposContextValue = useMemo(
-    () => ({
-      repositories,
-      setRepositories,
-      localSyncError: false,
-      githubSyncError: false,
-    }),
-    [repositories],
-  );
-
   return (
     <div className={`${isActive ? '' : 'hidden'} `}>
       <BrowserRouter>
-        <AnalyticsContextProvider
-          forceAnalytics={deviceContextValue.forceAnalytics}
-          isSelfServe={deviceContextValue.isSelfServe}
-          envConfig={deviceContextValue.envConfig}
-        >
-          <DeviceContextProvider deviceContextValue={deviceContextValue}>
-            <UIContextProvider tab={tab}>
-              <AppNavigationProvider>
-                <SearchContextProvider tab={tab}>
-                  <RepositoriesContext.Provider value={reposContextValue}>
-                    <ChatContextProvider>
-                      <Routes>
-                        <Route
-                          path="*"
-                          element={<ContentContainer tab={tab} />}
-                        />
-                      </Routes>
-                      <Settings />
-                      <ReportBugModal />
-                    </ChatContextProvider>
-                  </RepositoriesContext.Provider>
-                </SearchContextProvider>
-              </AppNavigationProvider>
-            </UIContextProvider>
-          </DeviceContextProvider>
-        </AnalyticsContextProvider>
+        <DeviceContextProvider deviceContextValue={deviceContextValue}>
+          <UIContextProvider tab={tab}>
+            <AppNavigationProvider>
+              <SearchContextProvider tab={tab}>
+                <ChatContextProvider>
+                  <Routes>
+                    <Route path="*" element={<ContentContainer tab={tab} />} />
+                  </Routes>
+                  <Settings />
+                  <ReportBugModal />
+                </ChatContextProvider>
+              </SearchContextProvider>
+            </AppNavigationProvider>
+          </UIContextProvider>
+        </DeviceContextProvider>
       </BrowserRouter>
     </div>
   );

client/src/components/Accordion/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronDownFilled, ChevronUpFilled } from '../../icons';
 import { ACCORDION_CHILDREN_ANIMATION } from '../../consts/animations';
@@ -25,6 +25,9 @@ const Accordion = ({
   defaultExpanded = true,
 }: Props) => {
   const [expanded, setExpanded] = useState(defaultExpanded);
+  useEffect(() => {
+    setExpanded(defaultExpanded);
+  }, [defaultExpanded]);
   return (
     <div
       className={`rounded border hover:border-bg-border ${

client/src/components/Breadcrumbs/BreadcrumbSection.tsx

@@ -13,8 +13,8 @@ type Props = {
 
 const typeMap = {
   link: {
-    default: 'text-label-muted hover:text-bg-main active:text-bg-main',
-    isLast: 'text-label-base',
+    default: 'text-label-base hover:text-bg-main active:text-bg-main',
+    isLast: 'text-label-title',
   },
   button: {
     default:

client/src/components/Chat/AllCoversations/index.tsx

@@ -89,7 +89,7 @@ const AllConversations = ({
         isHistoryOpen ? 'mr-0' : '-mr-97'
       } transition-all duration-300 ease-out-slow`}
     >
-      <div className="p-4 bg-chat-bg-sub border-b border-chat-bg-divider flex items-center gap-2 text-label-title">
+      <div className="p-4 bg-chat-bg-base/35 border-b border-chat-bg-border flex items-center gap-2 text-label-title">
         {!!openItem && (
           <ChipButton variant="filled" onClick={() => setOpenItem(null)}>
             <ArrowLeft sizeClassName="w-4 h-4" />
@@ -106,12 +106,16 @@ const AllConversations = ({
             Create new
           </ChipButton>
         )}
-        <ChipButton variant="filled" onClick={() => setHistoryOpen(false)}>
+        <ChipButton
+          variant="filled"
+          colorScheme="base"
+          onClick={() => setHistoryOpen(false)}
+        >
           <CloseSign sizeClassName="w-3.5 h-3.5" />
         </ChipButton>
       </div>
       {!openItem && (
-        <div className="flex flex-col gap-1 py-4 overflow-auto flex-1 pb-12 bg-chat-bg-sub">
+        <div className="flex flex-col gap-1 py-4 overflow-auto flex-1 pb-12">
           {conversations.map((c) => (
             <ConversationListItem
               key={c.thread_id}

client/src/components/Chat/ChipButton.tsx

@@ -3,17 +3,23 @@ import { PropsWithChildren } from 'react';
 type Props = {
   variant?: 'filled' | 'outlined';
   onClick?: () => void;
+  colorScheme?: 'chat' | 'base';
 };
 
 const ChipButton = ({
   children,
   variant,
   onClick,
+  colorScheme = 'chat',
 }: PropsWithChildren<Props>) => {
   return (
     <button
-      className={`flex items-center justify-center gap-1 py-1 px-3 rounded-full text-label-title ${
-        variant === 'filled' ? 'bg-chat-bg-sub' : 'border border-chat-bg-border'
+      className={`flex items-center justify-center gap-1 py-1 px-3 h-7 rounded-full text-label-title ${
+        variant === 'filled'
+          ? colorScheme === 'chat'
+            ? 'bg-chat-bg-sub'
+            : 'bg-bg-sub'
+          : 'border border-chat-bg-border'
       } caption`}
       onClick={onClick}
     >