Refactor UI component styling with updated rounded designs

apps/desktop/src/components/chat/body/index.tsx

@@ -38,7 +38,7 @@ export function ChatBody({
       className={cn([
         "flex-1 overflow-y-auto flex flex-col",
         chat.mode === "RightPanelOpen" &&
-          "border border-neutral-200 mt-1 rounded-md rounded-b-none",
+          "border border-neutral-200 rounded-xl rounded-b-none",
       ])}
     >
       <div className="flex-1" />

apps/desktop/src/components/chat/header.tsx

@@ -37,7 +37,7 @@ export function ChatHeader({
       data-tauri-drag-region={chat.mode === "RightPanelOpen"}
       className={cn([
         "flex items-center justify-between px-1 border-b border-neutral-200 h-9",
-        chat.mode === "RightPanelOpen" && "border rounded-md",
+        chat.mode === "RightPanelOpen" && "border rounded-xl",
       ])}
     >
       <div className="flex items-center">

apps/desktop/src/components/main/body/index.tsx

@@ -336,7 +336,7 @@ export function StandardTabWrapper({
 }) {
   return (
     <div className="flex flex-col h-full">
-      <div className="flex flex-col rounded-lg border border-neutral-200 flex-1 overflow-hidden relative">
+      <div className="flex flex-col rounded-xl border border-neutral-200 flex-1 overflow-hidden relative">
         {children}
         {floatingButton}
         <TabChatButton />

apps/desktop/src/components/main/body/search.tsx

@@ -143,7 +143,7 @@ function ExpandedSearch({
             "text-sm placeholder:text-sm placeholder:text-neutral-400",
             "w-full pl-9 h-full",
             query ? "pr-9" : showShortcut ? "pr-14" : "pr-4",
-            "rounded-lg bg-neutral-100 border border-transparent",
+            "rounded-xl bg-neutral-100 border border-transparent",
             "focus:outline-none focus:bg-neutral-200 focus:border-black",
           ])}
         />

apps/desktop/src/components/main/body/shared.tsx

@@ -80,26 +80,30 @@ export function TabItemBase({
         onClick={handleSelectThis}
         onMouseDown={handleMouseDown}
         className={cn([
-          "flex items-center gap-1 cursor-pointer group relative",
-          "w-48 h-full pl-2 pr-2",
-          "rounded-lg border",
+          "flex items-center gap-1 relative",
+          "w-48 h-full px-2",
+          "rounded-xl border",
+          "cursor-pointer group",
           "transition-colors duration-200",
-          active && selected
-            ? ["bg-red-50", "text-red-600", "border-red-500"]
-            : active
-              ? ["bg-red-50", "text-red-500", "border-0"]
-              : selected
-                ? ["bg-neutral-50", "text-black", "border-black"]
-                : ["bg-neutral-50", "text-neutral-500", "border-transparent"],
+          active && selected && ["bg-red-50", "text-red-600", "border-red-400"],
+          active && !selected && ["bg-red-50", "text-red-500", "border-0"],
+          !active &&
+            selected && ["bg-neutral-50", "text-black", "border-stone-400"],
+          !active &&
+            !selected && [
+              "bg-neutral-50",
+              "text-neutral-500",
+              "border-transparent",
+            ],
         ])}
       >
         <div className="flex items-center gap-2 text-sm flex-1 min-w-0">
           <div className="flex-shrink-0 relative w-4 h-4">
             <div
-              className={cn(
+              className={cn([
                 "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
                 isHovered ? "opacity-0" : "opacity-100",
-              )}
+              ])}
             >
               {active ? (
                 <div className="relative size-2">
@@ -111,10 +115,10 @@ export function TabItemBase({
               )}
             </div>
             <div
-              className={cn(
+              className={cn([
                 "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
                 isHovered ? "opacity-100" : "opacity-0",
-              )}
+              ])}
             >
               <button
                 onClick={(e) => {
@@ -123,11 +127,13 @@ export function TabItemBase({
                 }}
                 className={cn([
                   "flex items-center justify-center transition-colors",
-                  active
-                    ? "text-red-600 hover:text-red-700"
-                    : selected
-                      ? "text-neutral-700 hover:text-neutral-900"
-                      : "text-neutral-500 hover:text-neutral-700",
+                  active && "text-red-600 hover:text-red-700",
+                  !active &&
+                    selected &&
+                    "text-neutral-700 hover:text-neutral-900",
+                  !active &&
+                    !selected &&
+                    "text-neutral-500 hover:text-neutral-700",
                 ])}
               >
                 <X size={16} />

apps/desktop/src/components/main/sidebar/banner/component.tsx

@@ -50,15 +50,18 @@ export function Banner({
 
         <div className="flex flex-col gap-2 mt-1">
           {banner.primaryAction && (
-            <Button onClick={banner.primaryAction.onClick} className="w-full">
+            <Button
+              onClick={banner.primaryAction.onClick}
+              className="w-full rounded-full bg-gradient-to-t from-stone-600 to-stone-500"
+            >
               {banner.primaryAction.label}
             </Button>
           )}
           {banner.secondaryAction && (
             <Button
               onClick={banner.secondaryAction.onClick}
               variant="outline"
-              className="w-full"
+              className="w-full rounded-full bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900"
             >
               {banner.secondaryAction.label}
             </Button>

apps/desktop/src/components/main/sidebar/index.tsx

@@ -24,10 +24,10 @@ export function LeftSidebar() {
       <header
         data-tauri-drag-region
         className={cn([
-          "flex flex-row shrink-0",
-          "flex w-full items-center justify-end h-9 py-1",
-          "rounded-lg",
-          "pl-[72px] bg-neutral-50",
+          "flex flex-row items-center justify-end",
+          "w-full h-9 py-1 pl-[72px]",
+          "shrink-0",
+          "rounded-xl bg-neutral-50",
         ])}
       >
         {import.meta.env.DEV && (

apps/desktop/src/components/main/sidebar/profile/auth.tsx

@@ -137,13 +137,13 @@ export function AuthSection({
   };
 
   return (
-    <div className="px-1 py-2">
+    <div className="p-1 pt-2">
       <Button
         onClick={() => handleStartSignIn()}
         variant="default"
         className="w-full"
       >
-        <LogIn className="w-4 h-4 mr-2" />
+        <LogIn size={16} />
         Sign in
       </Button>
     </div>

apps/desktop/src/components/main/sidebar/profile/index.tsx

@@ -25,10 +25,7 @@ import { useAutoCloser } from "../../../../hooks/useAutoCloser";
 import * as main from "../../../../store/tinybase/main";
 import { useTabs } from "../../../../store/zustand/tabs";
 import { AuthSection } from "./auth";
-import {
-  NotificationsMenuContent,
-  NotificationsMenuHeader,
-} from "./notification";
+import { NotificationsMenuContent } from "./notification";
 import { UpdateChecker } from "./ota";
 import { MenuItem } from "./shared";
 
@@ -141,9 +138,9 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
     closeMenu();
   }, [openNew, closeMenu]);
 
-  const handleClickNotifications = useCallback(() => {
-    setCurrentView("notifications");
-  }, []);
+  // const handleClickNotifications = useCallback(() => {
+  //   setCurrentView("notifications");
+  // }, []);
 
   const handleBackToMain = useCallback(() => {
     setCurrentView("main");
@@ -190,8 +187,8 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
             transition={{ duration: 0.2, ease: "easeInOut" }}
             className="absolute bottom-full left-0 right-0 mb-1"
           >
-            <div className="bg-neutral-50 rounded-lg overflow-hidden shadow-lg border">
-              <div className="pt-1.5">
+            <div className="bg-neutral-50 rounded-xl overflow-hidden shadow-sm border">
+              <div className="pt-1">
                 <AnimatePresence mode="wait">
                   {currentView === "main" ? (
                     <motion.div
@@ -202,12 +199,12 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
                       transition={{ duration: 0.2, ease: "easeInOut" }}
                       ref={mainViewRef}
                     >
-                      <NotificationsMenuHeader
+                      {/*<NotificationsMenuHeader
                         onClick={handleClickNotifications}
-                      />
+                      />*/}
                       <UpdateChecker />
 
-                      <div className="my-1.5 border-t border-neutral-100" />
+                      <div className="my-1 border-t border-neutral-100" />
 
                       {menuItems.map((item) => (
                         <MenuItem key={item.label} {...item} />
@@ -240,7 +237,7 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
         )}
       </AnimatePresence>
 
-      <div className="bg-neutral-50 rounded-lg overflow-hidden">
+      <div className="bg-neutral-50 rounded-xl overflow-hidden">
         <ProfileButton
           isExpanded={isExpanded}
           onClick={() => setIsExpanded(!isExpanded)}

apps/desktop/src/components/main/sidebar/profile/shared.tsx

@@ -14,37 +14,41 @@ export function MenuItem({
   onClick: () => void;
 }) {
   return (
-    <button
-      className={cn(
-        "flex w-full items-center gap-2.5 rounded-lg",
-        "px-4 py-1.5",
-        "text-sm text-black",
-        "transition-colors hover:bg-neutral-100",
-      )}
-      onClick={onClick}
-    >
-      <Icon className={cn("h-4 w-4 flex-shrink-0", "text-black")} />
-      <span className={cn(["flex-1", "text-left"])}>{label}</span>
-      {badge &&
-        (typeof badge === "number" ? (
-          <span
-            className={cn(
-              "rounded-full",
-              "px-2 py-0.5",
-              "bg-red-500",
-              "text-xs font-semibold text-white",
-            )}
-          >
-            {badge}
-          </span>
-        ) : (
-          badge
-        ))}
-      {SuffixIcon && (
-        <SuffixIcon
-          className={cn("h-4 w-4 flex-shrink-0", "text-neutral-400")}
-        />
-      )}
-    </button>
+    <div className="px-1">
+      <button
+        className={cn(
+          "flex w-full justify-between rounded-lg",
+          "px-3 py-1.5",
+          "text-sm text-black",
+          "transition-colors hover:bg-neutral-100",
+        )}
+        onClick={onClick}
+      >
+        <div className="flex items-center justify-start gap-2.5">
+          <Icon className="h-4 w-4 flex-shrink-0 text-black" />
+          {label}
+        </div>
+        {badge &&
+          (typeof badge === "number" ? (
+            <span
+              className={cn(
+                "rounded-full",
+                "px-2 py-0.5",
+                "bg-red-500",
+                "text-xs font-semibold text-white",
+              )}
+            >
+              {badge}
+            </span>
+          ) : (
+            badge
+          ))}
+        {SuffixIcon && (
+          <SuffixIcon
+            className={cn("h-4 w-4 flex-shrink-0", "text-neutral-400")}
+          />
+        )}
+      </button>
+    </div>
   );
 }

apps/desktop/src/components/settings/ai/llm/configure.tsx

@@ -86,7 +86,7 @@ function NonHyprProviderCard({
   return (
     <AccordionItem
       value={config.id}
-      className={cn(["rounded-lg border-2 border-dashed bg-neutral-50"])}
+      className="rounded-xl border-2 border-dashed bg-neutral-50"
       disabled={locked}
     >
       <AccordionTrigger
@@ -165,7 +165,7 @@ function HyprProviderCard({
   return (
     <AccordionItem
       value={providerId}
-      className={cn(["rounded-lg border-2 border-dashed bg-neutral-50"])}
+      className="rounded-xl border-2 border-dashed bg-neutral-50"
       disabled={locked}
     >
       <AccordionTrigger

apps/desktop/src/components/settings/ai/llm/select.tsx

@@ -79,7 +79,7 @@ export function SelectProviderAndModel() {
       <div
         className={cn([
           "flex flex-col gap-4",
-          "p-4 rounded-lg border border-neutral-200",
+          "p-4 rounded-xl border border-neutral-200",
           !!current_llm_provider && !!current_llm_model
             ? "bg-neutral-50"
             : "bg-red-50",

apps/desktop/src/components/settings/ai/stt/configure.tsx

@@ -91,7 +91,7 @@ function NonHyprProviderCard({
     <AccordionItem
       disabled={config.disabled || locked}
       value={config.id}
-      className={cn(["rounded-lg border-2 border-dashed bg-neutral-50"])}
+      className="rounded-xl border-2 border-dashed bg-neutral-50"
     >
       <AccordionTrigger
         className={cn([
@@ -164,7 +164,7 @@ function HyprProviderCard({
   return (
     <AccordionItem
       value={providerId}
-      className={cn(["rounded-lg border-2 border-dashed bg-neutral-50"])}
+      className="rounded-xl border-2 border-dashed bg-neutral-50"
     >
       <AccordionTrigger className={cn(["capitalize gap-2 px-4"])}>
         <div className="flex items-center gap-2">

apps/desktop/src/components/settings/ai/stt/select.tsx

@@ -73,7 +73,7 @@ export function SelectProviderAndModel() {
       <div
         className={cn([
           "flex flex-col gap-4",
-          "p-4 rounded-lg border border-neutral-200",
+          "p-4 rounded-xl border border-neutral-200",
           !!current_stt_provider && !!current_stt_model
             ? "bg-neutral-50"
             : "bg-red-50",

apps/desktop/src/components/settings/template/editor.tsx

@@ -68,7 +68,7 @@ export function TemplateEditor({ id }: { id: string }) {
               value={field.state.value}
               onChange={(e) => field.handleChange(e.target.value)}
               placeholder="Describe the template purpose and usage..."
-              className="min-h-[100px] resize-none shadow-none"
+              className="min-h-[100px] resize-none shadow-none rounded-xl"
             />
           </div>
         )}

apps/desktop/src/components/settings/template/index.tsx

@@ -39,7 +39,7 @@ function TemplateList() {
         </div>
 
         {hasNoResults ? (
-          <div className="text-center py-12 text-neutral-500 bg-neutral-50 rounded-lg p-4 border border-neutral-200">
+          <div className="text-center py-12 text-neutral-500 bg-neutral-50 rounded-xl p-4 border border-neutral-200">
             <BookText size={48} className="mx-auto mb-4 text-neutral-300" />
             <p className="text-sm">
               {searchQuery.length > 0

apps/desktop/src/components/settings/template/local.tsx

@@ -22,7 +22,7 @@ function UserTemplatesList({ query }: { query: string }) {
 
   if (templates.length === 0) {
     return (
-      <div className="text-center py-12 text-neutral-500 bg-neutral-50 rounded-lg p-4 border border-neutral-200">
+      <div className="text-center py-12 text-neutral-500 bg-neutral-50 rounded-xl p-4 border border-neutral-200">
         <BookText size={48} className="mx-auto mb-4 text-neutral-300" />
         <p className="text-sm">
           {query.length > 0 ? "No templates found" : "No templates yet"}

apps/desktop/src/components/settings/template/sections.tsx

@@ -215,7 +215,7 @@ function SectionItem({
 
         <div
           className={cn(
-            "min-h-[100px] border rounded-md overflow-clip transition-colors",
+            "min-h-[100px] border rounded-xl overflow-clip transition-colors",
             isFocused
               ? "border-blue-500 ring-2 ring-primary/20"
               : "border-input",