improvement(ui/ux): logs (#762)

* improvement: filters ui/ux and logic complete

* improvement(ui/ux): logs control bar

* improvement(ui): log table

* improvement: logs sidebar

* ran lint

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/logs/components/control-bar/control-bar.tsx

@@ -1,41 +1,20 @@
-import { useState } from 'react'
-import { ChevronDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-
 export default function FilterSection({
   title,
-  defaultOpen = false,
   content,
 }: {
   title: string
-  defaultOpen?: boolean
   content?: React.ReactNode
 }) {
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className='mb-3'>
-      <CollapsibleTrigger asChild>
-        <Button
-          variant='ghost'
-          className='flex w-full justify-between rounded-md px-2 font-medium text-sm hover:bg-accent'
-        >
-          <span>{title}</span>
-          <ChevronDown
-            className={`mr-[5px] h-4 w-4 text-muted-foreground transition-transform ${
-              isOpen ? 'rotate-180' : ''
-            }`}
-          />
-        </Button>
-      </CollapsibleTrigger>
-      <CollapsibleContent className='pt-2'>
+    <div className='space-y-1'>
+      <div className='font-medium text-muted-foreground text-xs'>{title}</div>
+      <div>
         {content || (
           <div className='text-muted-foreground text-sm'>
             Filter options for {title} will go here
           </div>
         )}
-      </CollapsibleContent>
-    </Collapsible>
+      </div>
+    </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/logs/components/filters/components/filter-section.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Check, ChevronDown, Folder } from 'lucide-react'
+import { Check, ChevronDown } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import {
@@ -9,8 +9,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useFilterStore } from '@/app/workspace/[workspaceId]/logs/stores/store'
 import { useFolderStore } from '@/stores/folders/store'
+import { useFilterStore } from '@/stores/logs/filters/store'
 
 interface FolderOption {
   id: string
@@ -91,49 +91,35 @@ export default function FolderFilter() {
     setFolderIds([])
   }
 
-  // Add special option for workflows without folders
-  const includeRootOption = true
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline' size='sm' className='w-full justify-between font-normal text-sm'>
+        <Button
+          variant='outline'
+          size='sm'
+          className='w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[#FFFFFF] font-normal text-sm dark:border-[#414141] dark:bg-[#202020]'
+        >
           {loading ? 'Loading folders...' : getSelectedFoldersText()}
           <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='start' className='max-h-[300px] w-[200px] overflow-y-auto'>
+      <DropdownMenuContent
+        align='start'
+        className='max-h-[300px] w-[200px] overflow-y-auto rounded-lg border-[#E5E5E5] bg-[#FFFFFF] shadow-xs dark:border-[#414141] dark:bg-[#202020]'
+      >
         <DropdownMenuItem
           key='all'
           onSelect={(e) => {
             e.preventDefault()
             clearSelections()
           }}
-          className='flex cursor-pointer items-center justify-between p-2 text-sm'
+          className='flex cursor-pointer items-center justify-between rounded-md px-3 py-2 font-[380] text-card-foreground text-sm hover:bg-secondary/50 focus:bg-secondary/50'
         >
           <span>All folders</span>
           {folderIds.length === 0 && <Check className='h-4 w-4 text-primary' />}
         </DropdownMenuItem>
 
-        {/* Option for workflows without folders */}
-        {includeRootOption && (
-          <DropdownMenuItem
-            key='root'
-            onSelect={(e) => {
-              e.preventDefault()
-              toggleFolderId('root')
-            }}
-            className='flex cursor-pointer items-center justify-between p-2 text-sm'
-          >
-            <div className='flex items-center'>
-              <Folder className='mr-2 h-3 w-3 text-muted-foreground' />
-              No folder
-            </div>
-            {isFolderSelected('root') && <Check className='h-4 w-4 text-primary' />}
-          </DropdownMenuItem>
-        )}
-
-        {(!loading && folders.length > 0) || includeRootOption ? <DropdownMenuSeparator /> : null}
+        {!loading && folders.length > 0 && <DropdownMenuSeparator />}
 
         {!loading &&
           folders.map((folder) => (
@@ -143,13 +129,9 @@ export default function FolderFilter() {
                 e.preventDefault()
                 toggleFolderId(folder.id)
               }}
-              className='flex cursor-pointer items-center justify-between p-2 text-sm'
+              className='flex cursor-pointer items-center justify-between rounded-md px-3 py-2 font-[380] text-card-foreground text-sm hover:bg-secondary/50 focus:bg-secondary/50'
             >
               <div className='flex items-center'>
-                <div
-                  className='mr-2 h-2 w-2 rounded-full'
-                  style={{ backgroundColor: folder.color }}
-                />
                 <span className='truncate' title={folder.path}>
                   {folder.path}
                 </span>
@@ -159,7 +141,10 @@ export default function FolderFilter() {
           ))}
 
         {loading && (
-          <DropdownMenuItem disabled className='p-2 text-muted-foreground text-sm'>
+          <DropdownMenuItem
+            disabled
+            className='rounded-md px-3 py-2 font-[380] text-muted-foreground text-sm'
+          >
             Loading folders...
           </DropdownMenuItem>
         )}