[pull] main from olegshulyakov:main

package.json

@@ -17,6 +17,9 @@
     "preview": "npm run build && vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dexie": "^4.0.11",
     "highlight.js": "^11.10.0",
     "i18next": "^25.5.2",
@@ -35,7 +38,8 @@
     "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0"
+    "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

src/App.tsx

@@ -14,18 +14,18 @@ import { Footer } from './components/Footer';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
 import { ToastPopup } from './components/ToastPopup';
-import { AppContextProvider, useAppContext } from './context/app';
-import { ChatContextProvider } from './context/chat';
+import { useDebouncedCallback } from './hooks/useDebouncedCallback';
+import { usePWAUpdatePrompt } from './hooks/usePWAUpdatePrompt';
+import ChatPage from './pages/Chat';
+import SettingsPage from './pages/Settings';
+import WelcomePage from './pages/Welcome';
+import { AppContextProvider, useAppContext } from './store/app';
+import { ChatContextProvider } from './store/chat';
 import {
   InferenceContextProvider,
   useInferenceContext,
-} from './context/inference';
-import { ModalProvider } from './context/modal';
-import { useDebouncedCallback } from './hooks/useDebouncedCallback';
-import { usePWAUpdatePrompt } from './hooks/usePWAUpdatePrompt';
-import ChatScreen from './pages/ChatScreen';
-import Settings from './pages/Settings';
-import WelcomeScreen from './pages/WelcomeScreen';
+} from './store/inference';
+import { ModalProvider } from './store/modal';
 
 const DEBOUNCE_DELAY = 5000;
 const TOAST_IDS = {
@@ -44,8 +44,8 @@ const App: FC = () => {
                 <Routes>
                   <Route element={<AppLayout />}>
                     <Route path="/chat/:convId" element={<Chat />} />
-                    <Route path="/settings" element={<Settings />} />
-                    <Route path="*" element={<WelcomeScreen />} />
+                    <Route path="/settings" element={<SettingsPage />} />
+                    <Route path="*" element={<WelcomePage />} />
                   </Route>
                 </Routes>
               </ChatContextProvider>
@@ -151,7 +151,7 @@ const AppLayout: FC = () => {
 const Chat: FC = () => {
   const { convId } = useParams();
   if (!convId) return <Navigate to="/" replace />;
-  return <ChatScreen currConvId={convId} />;
+  return <ChatPage currConvId={convId} />;
 };
 
 export default App;

src/components/BtnWithTooltips.tsx

@@ -0,0 +1,49 @@
+import { Button } from './Button';
+
+/**
+ * @deprecated Use `title` and `aria-label` props in button directly as utiliy classes.
+ *
+ * Wraps any button that needs a tooltip message.
+ *
+ * @param className - Optional additional classes to apply to the button
+ * @param onClick - Optional click handler for the container element
+ * @param onMouseLeave - Optional mouse leave handler for the inner button
+ * @param children - React node to render inside the button
+ * @param tooltipsContent - Text content to show in tooltip
+ * @param disabled - Whether the button should be disabled
+ */
+export function BtnWithTooltips({
+  className,
+  onClick,
+  onMouseLeave,
+  children,
+  tooltipsContent,
+  disabled,
+}: {
+  className?: string;
+  onClick?: () => void;
+  onMouseLeave?: () => void;
+  children: React.ReactNode;
+  tooltipsContent: string;
+  disabled?: boolean;
+}) {
+  // the onClick handler is on the container, so screen readers can safely ignore the inner button
+  // this prevents the label from being read twice
+  return (
+    <div
+      className="tooltip tooltip-bottom"
+      data-tip={tooltipsContent}
+      role="button"
+      onClick={onClick}
+    >
+      <Button
+        className={`${className ?? ''} flex items-center justify-center`}
+        disabled={disabled}
+        onMouseLeave={onMouseLeave}
+        aria-hidden={true}
+      >
+        {children}
+      </Button>
+    </div>
+  );
+}