ui: always show sessiontags

frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx

@@ -1,8 +1,4 @@
-import { Input } from 'antd';
 import React from 'react';
-import { useStore } from 'App/mstore';
-
-import { observer } from 'mobx-react-lite';
 import NoSessionsMessage from 'Shared/NoSessionsMessage/NoSessionsMessage';
 import MainSearchBar from 'Shared/MainSearchBar/MainSearchBar';
 import usePageTitle from '@/hooks/usePageTitle';
@@ -13,22 +9,8 @@ import SessionHeader from './components/SessionHeader';
 import LatestSessionsMessage from './components/LatestSessionsMessage';
 
 function SessionsTabOverview() {
-  const [query, setQuery] = React.useState('');
-  const { aiFiltersStore, searchStore } = useStore();
-  const appliedFilter = searchStore.instance;
   usePageTitle('Sessions - OpenReplay');
 
-  const handleKeyDown = (event: any) => {
-    if (event.key === 'Enter') {
-      fetchResults();
-    }
-  };
-  const fetchResults = () => {
-    void aiFiltersStore.omniSearch(query, appliedFilter.toData());
-  };
-
-  const testingKey =
-    localStorage.getItem('__mauricio_testing_access') === 'true';
   return (
     <>
       <NoSessionsMessage />
@@ -36,15 +18,6 @@ function SessionsTabOverview() {
       <MainSearchBar />
       <div className="my-4" />
       <div className="widget-wrapper">
-        {testingKey ? (
-          <Input
-            value={query}
-            onKeyDown={handleKeyDown}
-            onChange={(e) => setQuery(e.target.value)}
-            className="mb-2"
-            placeholder="ask session ai"
-          />
-        ) : null}
         <SessionHeader />
         <div className="border-b" />
         <LatestSessionsMessage />
@@ -59,4 +32,4 @@ export default withPermissions(
   '',
   false,
   false,
-)(observer(SessionsTabOverview));
+)(SessionsTabOverview);

frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx

@@ -20,73 +20,13 @@ const tagIcons = {
 function SessionTags() {
   const { t } = useTranslation();
   const screens = useBreakpoint();
-  const { projectsStore, sessionStore, searchStore } = useStore();
+  const { projectsStore, searchStore } = useStore();
-  const total = sessionStore.total;
   const platform = projectsStore.active?.platform || '';
   const activeTab = searchStore.activeTags;
-  const [isMobile, setIsMobile] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
 
-  const filteredOptions = issues_types
+  React.useEffect(() => {
-    .filter(
+    searchStore.toggleTag(types.ALL);
-      (tag) =>
+  }, [projectsStore.activeSiteId])
-        tag.type !== 'mouse_thrashing' &&
-        (platform === 'web'
-          ? tag.type !== types.TAP_RAGE
-          : tag.type !== types.CLICK_RAGE),
-    )
-    .map((tag) => ({
-      value: tag.type,
-      icon: tagIcons[tag.type],
-      label: t(tag.name),
-    }));
-
-  // Find the currently active option
-  const activeOption =
-    filteredOptions.find((option) => option.value === activeTab[0]) ||
-    filteredOptions[0];
-
-  // Check if on mobile
-  useEffect(() => {
-    const checkIfMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    checkIfMobile();
-    window.addEventListener('resize', checkIfMobile);
-
-    return () => {
-      window.removeEventListener('resize', checkIfMobile);
-    };
-  }, []);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !(dropdownRef.current as HTMLElement).contains(event.target as Node)
-      ) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Handler for dropdown item selection
-  const handleSelectOption = (value: string) => {
-    searchStore.toggleTag(value as any);
-    setIsDropdownOpen(false);
-  };
-
-  if (total === 0 && (activeTab.length === 0 || activeTab[0] === 'all')) {
-    return null;
-  }
 
   return (
     <div className="flex items-center">