chore: some small improvements (#223)

* chore: stylize error message div
chore: correct styles for sidebar btn
chore: add spinner and replace header "Please wait" on spinner
chore: correct Russian translate
chore: hide clear conversation btn if not conversations
chore: stylize "Need OpenAI key" div

* chore: corrent Russian translate

components/Sidebar/ClearConversations.tsx

@@ -18,7 +18,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
   };
 
   return isConfirming ? (
-    <div className="flex w-full cursor-pointer items-center rounded-md py-3 px-3 hover:bg-[#343541]">
+    <div className="flex w-full cursor-pointer items-center rounded-lg py-3 px-3 hover:bg-gray-500/10">
       <IconTrash size={18} />
 
       <div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">

components/Sidebar/Key.tsx

@@ -30,7 +30,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
       <IconKey size={18} />
 
       <input
-        className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
+        className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
         type="password"
         value={newKey}
         onChange={(e) => setNewKey(e.target.value)}

components/Sidebar/Sidebar.tsx

@@ -202,6 +202,7 @@ export const Sidebar: FC<Props> = ({
       <SidebarSettings
         lightMode={lightMode}
         apiKey={apiKey}
+        conversationsCount={conversations.length}
         onToggleLightMode={onToggleLightMode}
         onApiKeyChange={onApiKeyChange}
         onClearConversations={onClearConversations}

components/Sidebar/SidebarSettings.tsx

@@ -10,6 +10,7 @@ import { SidebarButton } from './SidebarButton';
 interface Props {
   lightMode: 'light' | 'dark';
   apiKey: string;
+  conversationsCount: number;
   onToggleLightMode: (mode: 'light' | 'dark') => void;
   onApiKeyChange: (apiKey: string) => void;
   onClearConversations: () => void;
@@ -23,6 +24,7 @@ interface Props {
 export const SidebarSettings: FC<Props> = ({
   lightMode,
   apiKey,
+  conversationsCount,
   onToggleLightMode,
   onApiKeyChange,
   onClearConversations,
@@ -32,7 +34,9 @@ export const SidebarSettings: FC<Props> = ({
   const { t } = useTranslation('sidebar');
   return (
     <div className="flex flex-col items-center space-y-1 border-t border-white/20 pt-1 text-sm">
-      <ClearConversations onClearConversations={onClearConversations} />
+      {conversationsCount > 0 ? (
+        <ClearConversations onClearConversations={onClearConversations} />
+      ) : null}
 
       <Import onImport={onImportConversations} />