various design change from #4343

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>

Author: yujonglee

apps/desktop/src/routes/app/main/_layout.index.tsx

@@ -72,7 +72,7 @@ function Component() {
 
   return (
     <div
-      className="flex h-full gap-1 overflow-hidden p-1"
+      className="flex h-full gap-1 overflow-hidden bg-stone-50 p-1"
       data-testid="main-app-shell"
     >
       {leftsidebar.expanded && !isOnboarding && <LeftSidebar />}

apps/desktop/src/session/components/shared.tsx

@@ -59,7 +59,7 @@ export function useCurrentNoteTab(
 }
 
 export function RecordingIcon() {
-  return <div className="size-2 rounded-full bg-red-500" />;
+  return <div className="size-3 rounded-full bg-red-500" />;
 }
 
 export function useListenButtonState(sessionId: string) {

apps/desktop/src/shared/tabs.tsx

@@ -37,8 +37,18 @@ const accentColors: Record<
   }
 > = {
   neutral: {
-    selected: ["bg-neutral-50", "text-black", "border-stone-400"],
-    unselected: ["bg-neutral-50", "text-neutral-500", "border-transparent"],
+    selected: [
+      "bg-neutral-50",
+      "hover:bg-stone-100",
+      "text-black",
+      "border-stone-400",
+    ],
+    unselected: [
+      "bg-neutral-50",
+      "hover:bg-stone-100",
+      "text-neutral-500",
+      "border-transparent",
+    ],
     hover: {
       selected: "text-neutral-700 hover:text-neutral-900",
       unselected: "text-neutral-500 hover:text-neutral-700",

apps/desktop/src/sidebar/index.tsx

@@ -49,7 +49,6 @@ export function LeftSidebar() {
           "h-9 w-full py-1",
           isLinux ? "justify-between pl-3" : "justify-end pl-20",
           "shrink-0",
-          "rounded-xl bg-neutral-50",
         ])}
       >
         {isLinux && <TrafficLights />}

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

@@ -212,7 +212,7 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
             transition={{ duration: 0.2, ease: "easeInOut" }}
             className="absolute right-0 bottom-full left-0 mb-1"
           >
-            <div className="overflow-hidden rounded-xl border bg-neutral-50 shadow-xs">
+            <div className="overflow-hidden rounded-xl border bg-white shadow-xs">
               <div className="py-1">
                 <AnimatePresence mode="wait">
                   {currentView === "main" ? (
@@ -269,7 +269,7 @@ export function ProfileSection({ onExpandChange }: ProfileSectionProps = {}) {
         )}
       </AnimatePresence>
 
-      <div className="overflow-hidden rounded-xl bg-neutral-50">
+      <div className="overflow-hidden">
         <ProfileButton
           isExpanded={isExpanded}
           onClick={() => setIsExpanded(!isExpanded)}
@@ -312,12 +312,12 @@ function ProfileButton({
   return (
     <button
       className={cn([
-        "flex w-full cursor-pointer items-center gap-2.5",
+        "flex w-full cursor-pointer items-center gap-2.5 rounded-lg",
         "px-4 py-2",
         "text-left",
         "transition-all duration-300",
-        "hover:bg-neutral-100",
-        isExpanded && "border-t border-neutral-100 bg-neutral-50",
+        "hover:bg-neutral-200/50",
+        isExpanded && "border-neutral-300 bg-neutral-200/50",
       ])}
       onClick={onClick}
     >

apps/desktop/src/sidebar/search-input.tsx

@@ -120,7 +120,7 @@ export function SidebarSearchInput() {
           "text-sm placeholder:text-sm placeholder:text-neutral-400",
           "h-full w-full pl-8",
           query ? "pr-8" : showShortcut ? "pr-14" : "pr-4",
-          "rounded-lg bg-neutral-100",
+          "rounded-lg border border-neutral-200 bg-neutral-200/50",
           "focus:bg-neutral-200 focus:outline-hidden",
         ])}
       />

apps/desktop/src/sidebar/timeline/item.tsx

@@ -113,7 +113,7 @@ function ItemBase({
         "w-full cursor-pointer rounded-lg px-3 py-2 text-left",
         multiSelected && "bg-neutral-200",
         !multiSelected && selected && "bg-neutral-200",
-        !multiSelected && !selected && "hover:bg-neutral-100",
+        !multiSelected && !selected && "hover:bg-neutral-200/50",
         ignored && "opacity-40",
       ])}
     >

apps/desktop/src/store/zustand/tabs/basic.ts

@@ -22,7 +22,7 @@ export type BasicState = {
 
 export type BasicActions = {
   openCurrent: (tab: TabInput) => void;
-  openNew: (tab: TabInput) => void;
+  openNew: (tab: TabInput, options?: { position?: "start" | "end" }) => void;
   select: (tab: Tab) => void;
   selectNext: () => void;
   selectPrev: () => void;
@@ -72,9 +72,9 @@ export const createBasicSlice = <
       view: tab.type,
     });
   },
-  openNew: (tab) => {
+  openNew: (tab, options) => {
     const { tabs, history, addRecentlyOpened } = get();
-    set(openTab(tabs, tab, history, true));
+    set(openTab(tabs, tab, history, true, options?.position));
 
     if (tab.type === "sessions") {
       addRecentlyOpened(tab.id);
@@ -271,6 +271,7 @@ const openTab = <T extends BasicState & NavigationState>(
   newTab: TabInput,
   history: Map<string, TabHistory>,
   forceNewTab: boolean,
+  position?: "start" | "end",
 ): Partial<T> => {
   const tabWithDefaults: Tab = {
     ...getDefaultState(newTab),
@@ -317,7 +318,17 @@ const openTab = <T extends BasicState & NavigationState>(
   } else {
     activeTab = { ...tabWithDefaults, active: true, slotId: id() };
     const deactivated = deactivateAll(tabs);
-    nextTabs = [...deactivated, activeTab];
+
+    if (position === "start") {
+      const pinnedCount = deactivated.filter((t) => t.pinned).length;
+      nextTabs = [
+        ...deactivated.slice(0, pinnedCount),
+        activeTab,
+        ...deactivated.slice(pinnedCount),
+      ];
+    } else {
+      nextTabs = [...deactivated, activeTab];
+    }
 
     return updateWithHistory(nextTabs, activeTab, history);
   }