refactor: refine toolbar controls and model drawer

web/default/src/components/data-table/toolbar/toolbar.tsx

@@ -77,11 +77,6 @@ export type DataTableToolbarProps<TData> = {
    */
    */
   additionalSearch?: ReactNode
   additionalSearch?: ReactNode
   /**
   /**
-   * Extra controls displayed immediately after the filter chips, before the
-   * right-aligned action cluster.
-   */
-  afterFilters?: ReactNode
-  /**
    * Whether non-table filters (e.g. `additionalSearch` or `expandable`
    * Whether non-table filters (e.g. `additionalSearch` or `expandable`
    * inputs) are currently active. Controls Reset button visibility
    * inputs) are currently active. Controls Reset button visibility
    * when no column filters are set.
    * when no column filters are set.
@@ -351,7 +346,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
           {props.customSearch !== undefined ? props.customSearch : searchInput}
           {props.customSearch !== undefined ? props.customSearch : searchInput}
           {props.additionalSearch}
           {props.additionalSearch}
           {filterChips}
           {filterChips}
-          {props.afterFilters}
           <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
           <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
             {expandToggle}
             {expandToggle}
           </div>
           </div>
@@ -387,7 +381,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
       {props.customSearch !== undefined ? props.customSearch : searchInput}
       {props.customSearch !== undefined ? props.customSearch : searchInput}
       {props.additionalSearch}
       {props.additionalSearch}
       {filterChips}
       {filterChips}
-      {props.afterFilters}
       {expanded && hasExpandable && props.expandable}
       {expanded && hasExpandable && props.expandable}
 
 
       <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
       <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>

web/default/src/features/channels/components/channels-table.tsx

@@ -409,7 +409,7 @@ export function ChannelsTable() {
             singleSelect: true,
             singleSelect: true,
           },
           },
         ],
         ],
-        afterFilters: (
+        preActions: (
           <Tooltip>
           <Tooltip>
             <TooltipTrigger
             <TooltipTrigger
               render={
               render={

web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx

@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useCallback, useMemo } from 'react'
 import { useState, useCallback, useMemo } from 'react'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
 import { useNavigate, getRouteApi } from '@tanstack/react-router'
 import { useNavigate, getRouteApi } from '@tanstack/react-router'
-import { type Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 import { Eye, EyeOff } from 'lucide-react'
 import { Eye, EyeOff } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 import { useIsAdmin } from '@/hooks/use-admin'
 import { useIsAdmin } from '@/hooks/use-admin'
@@ -265,6 +265,9 @@ export function CommonLogsFilterBar<TData>(
   const statsBar = (
   const statsBar = (
     <div className='flex flex-wrap items-center gap-2'>
     <div className='flex flex-wrap items-center gap-2'>
       <CommonLogsStats />
       <CommonLogsStats />
+    </div>
+  )
+  const sensitiveToggle = (
     <Tooltip>
     <Tooltip>
       <TooltipTrigger
       <TooltipTrigger
         render={
         render={
@@ -283,7 +286,6 @@ export function CommonLogsFilterBar<TData>(
         {sensitiveVisible ? t('Hide') : t('Show')}
         {sensitiveVisible ? t('Hide') : t('Show')}
       </TooltipContent>
       </TooltipContent>
     </Tooltip>
     </Tooltip>
-    </div>
   )
   )
 
 
   const dateRangeFilter = (
   const dateRangeFilter = (
@@ -410,6 +412,7 @@ export function CommonLogsFilterBar<TData>(
     <LogsFilterToolbar
     <LogsFilterToolbar
       table={props.table}
       table={props.table}
       stats={statsBar}
       stats={statsBar}
+      actionStart={sensitiveToggle}
       primaryFilters={
       primaryFilters={
         <>
         <>
           {dateRangeFilter}
           {dateRangeFilter}

web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
-import { type Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { useMediaQuery } from '@/hooks'
 import { ChevronDown, Loader2 } from 'lucide-react'
 import { ChevronDown, Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
@@ -44,6 +44,7 @@ interface LogsFilterToolbarProps<TData> {
   mobileFilters?: ReactNode
   mobileFilters?: ReactNode
   mobileFilterCount?: number
   mobileFilterCount?: number
   stats?: ReactNode
   stats?: ReactNode
+  actionStart?: ReactNode
   hasActiveFilters: boolean
   hasActiveFilters: boolean
   hasAdvancedActiveFilters?: boolean
   hasAdvancedActiveFilters?: boolean
   advancedFilterCount?: number
   advancedFilterCount?: number
@@ -142,6 +143,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
           <div className='mt-2 flex flex-col gap-2'>
           <div className='mt-2 flex flex-col gap-2'>
             {props.stats}
             {props.stats}
             <div className='flex items-center justify-end gap-1.5'>
             <div className='flex items-center justify-end gap-1.5'>
+              {props.actionStart}
               <DrawerTrigger asChild>
               <DrawerTrigger asChild>
                 <Button
                 <Button
                   type='button'
                   type='button'
@@ -240,6 +242,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
       <div className='mt-2 flex flex-wrap items-center gap-2'>
       <div className='mt-2 flex flex-wrap items-center gap-2'>
         {props.stats}
         {props.stats}
         <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
         <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
+          {props.actionStart}
           <Button
           <Button
             type='button'
             type='button'
             variant='outline'
             variant='outline'