fix: className order

components/chat-message-actions.tsx

@@ -20,7 +20,7 @@ export function ChatMessageActions({
   return (
     <div
       className={cn(
-        'flex items-center justify-end w-full md:absolute md:-top-2 md:-right-10 md:opacity-0 group-hover:opacity-100 transition-opacity',
+        'flex w-full items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0',
         className
       )}
       {...props}

components/chat-message.tsx

@@ -15,7 +15,7 @@ export interface ChatMessageProps {
 export function ChatMessage({ message, ...props }: ChatMessageProps) {
   return (
     <div
-      className={cn('relative mb-4 flex items-start group md:-ml-12')}
+      className={cn('group relative mb-4 flex items-start md:-ml-12')}
       {...props}
     >
       <div
@@ -28,7 +28,7 @@ export function ChatMessage({ message, ...props }: ChatMessageProps) {
       >
         {message.role === 'user' ? <IconUser /> : <IconOpenAI />}
       </div>
-      <div className="ml-4 px-1 space-y-2 flex-1">
+      <div className="ml-4 flex-1 space-y-2 px-1">
         <div>
           <MemoizedReactMarkdown
             className="prose leading-6 dark:prose-invert prose-p:leading-[1.8rem] prose-pre:rounded-md prose-pre:bg-[#282c34]"

components/sidebar-list.tsx

@@ -10,7 +10,7 @@ export interface SidebarListProps {
 export async function SidebarList({ userId }: SidebarListProps) {
   if (!userId) {
     return (
-      <div className="flex flex-col items-center flex-1 p-6 space-y-4 text-sm">
+      <div className="flex flex-1 flex-col items-center space-y-4 p-6 text-sm">
         <div className="space-y-1 text-center">
           <p className="font-medium">You are not logged in!</p>
           <p className="text-muted-foreground">
@@ -27,7 +27,7 @@ export async function SidebarList({ userId }: SidebarListProps) {
   return (
     <div className="flex-1 overflow-auto">
       {chats?.length ? (
-        <div className="px-2 space-y-2">
+        <div className="space-y-2 px-2">
           {chats.map(chat => (
             <SidebarItem
               key={chat.id}

components/sidebar.tsx

@@ -24,8 +24,8 @@ export function Sidebar({ userId, children }: SidebarProps) {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" className="p-0 -ml-2 h-9 w-9">
-          <IconSidebar className="w-6 h-6" />
+        <Button variant="ghost" className="-ml-2 h-9 w-9 p-0">
+          <IconSidebar className="h-6 w-6" />
           <span className="sr-only">Toggle Sidebar</span>
         </Button>
       </SheetTrigger>

components/ui/icons.tsx

@@ -232,7 +232,7 @@ function IconSpinner({ className, ...props }: React.ComponentProps<'svg'>) {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 256 256"
       fill="currentColor"
-      className={cn('h-4 w-4', className)}
+      className={cn('h-4 w-4 animate-spin', className)}
       {...props}
     >
       <path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" />