feat(studio): filter active-dot indicator and hover-only archive button

apps/studio/components/ui/AdvisorPanel/AdvisorFilters.tsx

@@ -63,14 +63,19 @@ export const AdvisorFilters = ({
           </TabsList>
         </Tabs>
         <div className="flex items-center gap-x-2 pr-3">
-          <ButtonTooltip
-            variant="text"
-            className={cn('w-7 h-7 p-0', showFilters && 'text-foreground bg-surface-300')}
-            icon={<ListFilter strokeWidth={1.5} />}
-            onClick={() => setShowFilters((value) => !value)}
-            aria-label="Toggle filters"
-            tooltip={{ content: { side: 'bottom', text: 'Filter' } }}
-          />
+          <div className="relative">
+            <ButtonTooltip
+              variant="text"
+              className={cn('w-7 h-7 p-0', showFilters && 'text-foreground bg-surface-300')}
+              icon={<ListFilter strokeWidth={1.5} />}
+              onClick={() => setShowFilters((value) => !value)}
+              aria-label="Toggle filters"
+              tooltip={{ content: { side: 'bottom', text: 'Filter' } }}
+            />
+            {!showFilters && hasActiveFilters && (
+              <span className="pointer-events-none absolute right-1 top-1 h-2 w-2 rounded-full bg-brand" />
+            )}
+          </div>
           <ButtonTooltip
             variant="text"
             className="w-7 h-7 p-0"

apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx

@@ -121,7 +121,7 @@ export const AdvisorPanelBody = ({
           const metadataCapitalize = secondaryText === undefined && item.createdAt !== undefined
 
           return (
-            <div key={`${item.source}-${item.id}`} className="relative border-b">
+            <div key={`${item.source}-${item.id}`} className="group relative border-b">
               <Button
                 variant="text"
                 className={cn(
@@ -162,7 +162,10 @@ export const AdvisorPanelBody = ({
                   variant="text"
                   disabled={!canArchive}
                   aria-label={archiveLabel}
-                  className={cn('pointer-events-auto h-7 w-7 p-0', !canArchive && 'opacity-30')}
+                  className={cn(
+                    'pointer-events-auto h-7 w-7 p-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+                    !canArchive && 'group-hover:opacity-30 focus-visible:opacity-30'
+                  )}
                   icon={
                     canArchive && isArchived ? (
                       <ArchiveRestore size={16} strokeWidth={1.5} />