fixed sessions layout (#3138)

2025-03-12 09:21:16 +01:00 · 2025-03-12 09:21:16 +01:00 · 5df934c9ce
commit 5df934c9ce
parent e027a2d016
12 changed files with 109 additions and 116 deletions
--- a/frontend/app/components/Login/Login.tsx
+++ b/frontend/app/components/Login/Login.tsx
@ -208,7 +208,7 @@ function Login({ location }: LoginProps) {
                  {t('Login')}
                </Button>

-                <div className="my-8 text-center">
+                <div className="my-8 flex justify-center items-center flex-wrap">
                  <span className="color-gray-medium">
                    {t('Having trouble logging in?')}
                  </span>{' '}
--- a/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx
+++ b/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx
@ -52,7 +52,7 @@ export default function ErrorBars(props: Props) {
          {/* <div className={cn("rounded-tr rounded-br", bgColor, stl.bar)}></div> */}
        </div>
      </div>
-      <div className="mt-1 color-gray-medium text-sm">{t(state)}</div>
+      <div className="mt-1 color-gray-medium text-sm truncate">{t(state)}</div>
    </div>
  );
 }
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@ -10,7 +10,7 @@ import {
  assist as assistRoute,
  isRoute,
  liveSession,
-  sessions as sessionsRoute
+  sessions as sessionsRoute,
 } from 'App/routes';
 import { capitalize } from 'App/utils';
 import { Avatar, CountryFlag, Icon, Label, TextEllipsis } from 'UI';
@ -76,7 +76,7 @@ interface Props {
 const PREFETCH_STATE = {
  none: 0,
  loading: 1,
-  fetched: 2
+  fetched: 2,
 };

 function SessionItem(props: RouteComponentProps & Props) {
@ -102,7 +102,7 @@ function SessionItem(props: RouteComponentProps & Props) {
    // location,
    isDisabled,
    live: propsLive,
-    isAdd
+    isAdd,
  } = props;

  const {
@ -128,43 +128,47 @@ function SessionItem(props: RouteComponentProps & Props) {
    platform,
    timezone: userTimezone,
    isCallActive,
-    agentIds
+    agentIds,
  } = session;

  // Memoize derived values
  const queryParams = useMemo(
    () => Object.fromEntries(new URLSearchParams(location.search)),
-    [location.search]
+    [location.search],
  );

  const isMobile = platform !== 'web';
-  const formattedDuration = useMemo(() => durationFormatted(duration), [duration]);
+  const formattedDuration = useMemo(
+    () => durationFormatted(duration),
+    [duration],
+  );
  const hasUserId = userId || userAnonymousId;

  const isSessions = useMemo(
    () => isRoute(SESSIONS_ROUTE, location.pathname),
-    [location.pathname]
+    [location.pathname],
  );

  const isAssist = useMemo(() => {
    return (
      (!ignoreAssist &&
-       (isRoute(ASSIST_ROUTE, location.pathname) ||
-        isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
-        location.pathname.includes('multiview'))) ||
+        (isRoute(ASSIST_ROUTE, location.pathname) ||
+          isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
+          location.pathname.includes('multiview'))) ||
      propsLive
    );
  }, [ignoreAssist, location.pathname, propsLive]);

  const isLastPlayed = lastPlayedSessionId === sessionId;
  const live = sessionLive || propsLive;
-  const isMultiviewDisabled = isDisabled && location.pathname.includes('multiview');
+  const isMultiviewDisabled =
+    isDisabled && location.pathname.includes('multiview');

  // Memoize metadata list creation
  const _metaList = useMemo(() => {
    return Object.keys(metadata).map((key) => ({
      label: key,
-      value: metadata[key]
+      value: metadata[key],
    }));
  }, [metadata]);

@ -193,7 +197,14 @@ function SessionItem(props: RouteComponentProps & Props) {
    if (!disableUser && !hasUserFilter && hasUserId) {
      onUserClick(userId, userAnonymousId);
    }
-  }, [disableUser, hasUserFilter, hasUserId, onUserClick, userId, userAnonymousId]);
+  }, [
+    disableUser,
+    hasUserFilter,
+    hasUserId,
+    onUserClick,
+    userId,
+    userAnonymousId,
+  ]);

  const handleAddClick = useCallback(() => {
    if (!isDisabled && onClick) {
@ -205,11 +216,11 @@ function SessionItem(props: RouteComponentProps & Props) {
  const formattedTime = useMemo(() => {
    const timezoneToUse =
      shownTimezone === 'user' && userTimezone
-      ? {
-          label: userTimezone.split('+').join(' +'),
-          value: userTimezone.split(':')[0]
-        }
-      : timezone;
+        ? {
+            label: userTimezone.split('+').join(' +'),
+            value: userTimezone.split(':')[0],
+          }
+        : timezone;

    return formatTimeOrDate(startedAt, timezoneToUse);
  }, [startedAt, shownTimezone, userTimezone, timezone]);
@ -229,9 +240,9 @@ function SessionItem(props: RouteComponentProps & Props) {
              startedAt,
              {
                label: userTimezone.split('+').join(' +'),
-                value: userTimezone.split(':')[0]
+                value: userTimezone.split(':')[0],
              },
-              true
+              true,
            )}{' '}
            {userTimezone}
          </span>
@ -243,7 +254,9 @@ function SessionItem(props: RouteComponentProps & Props) {
  return (
    <Tooltip
      title={
-        !isMultiviewDisabled ? '' : t(`Session already added into the multiview`)
+        !isMultiviewDisabled
+          ? ''
+          : t(`Session already added into the multiview`)
      }
    >
      <div
@ -261,7 +274,7 @@ function SessionItem(props: RouteComponentProps & Props) {
            {!compact && (
              <div
                className={
-                  'flex flex-col shrink-0 pr-2 gap-2 w-full lg:w-[40%]'
+                  'flex flex-col shrink-0 pr-2 gap-2 w-full lg:w-[40%] max-w-[260px]'
                }
              >
                <div className="flex items-center pr-2 shrink-0">
@ -393,7 +406,7 @@ function SessionItem(props: RouteComponentProps & Props) {
            )}
          </div>

-          <div className="flex items-center m-auto">
+          <div className="flex items-center m-auto w-[15%] justify-end">
            <div
              className={cn(
                stl.playLink,
@ -416,14 +429,10 @@ function SessionItem(props: RouteComponentProps & Props) {
                  </Label>
                </div>
              )}
-              {isSessions && (
-                <div className="flex-shrink-0 w-24  mb-2 lg:mb-0">
-                  {isLastPlayed && (
-                    <Label className="bg-neutral-100 p-1 py-0 text-xs whitespace-nowrap rounded-xl text-neutral-400 ms-auto">
-                      {t('LAST PLAYED')}
-                    </Label>
-                  )}
-                </div>
+              {isSessions && isLastPlayed && (
+                <Label className="bg-neutral-100 p-1 py-0 text-xs whitespace-nowrap rounded-xl text-neutral-400 ms-auto">
+                  {t('LAST PLAYED')}
+                </Label>
              )}
              {isAdd ? (
                <div
@ -453,4 +462,4 @@ function SessionItem(props: RouteComponentProps & Props) {
  );
 }

-export default withRouter(observer(SessionItem));
+export default withRouter(observer(SessionItem));
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx
@ -1,14 +1,17 @@
 import React from 'react';
 import Period from 'Types/app/period';
 import SelectDateRange from 'Shared/SelectDateRange';
-import { Space } from 'antd';
+import { Grid, Space } from 'antd';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import SessionSort from '../SessionSort';
 import SessionTags from '../SessionTags';

+const { useBreakpoint } = Grid;
+
 function SessionHeader() {
  const { searchStore } = useStore();
+  const screens = useBreakpoint();
  const { startDate, endDate, rangeValue } = searchStore.instance;

  const period = Period({
@ -25,10 +28,14 @@ function SessionHeader() {

  return (
    <div className="flex items-center px-4 py-3 justify-between w-full">
-      <div className="flex items-center w-full justify-end">
+      <div
+        className={`flex w-full flex-wrap gap-2 ${screens.md ? 'justify-between' : 'justify-start'}`}
+      >
        <SessionTags />
-        <div className="mr-auto" />
-        <Space>
+        <div
+          style={{ flexDirection: screens.md ? 'row' : 'column' }}
+          className={'flex items-start'}
+        >
          <SelectDateRange
            isAnt
            period={period}
@ -36,7 +43,7 @@ function SessionHeader() {
            right
          />
          <SessionSort />
-        </Space>
+        </div>
      </div>
    </div>
  );
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx
@ -63,12 +63,14 @@ function SessionSort() {
  const defaultOption = `${sort}-${order}`;

  return (
-    <SortDropdown
-      defaultOption={defaultOption}
-      onSort={onSort}
-      sortOptions={sortOptions(t)}
-      current={sortOptionsMap(t)[defaultOption]}
-    />
+    <div className="px-[7px]">
+      <SortDropdown
+        defaultOption={defaultOption}
+        onSort={onSort}
+        sortOptions={sortOptions(t)}
+        current={sortOptionsMap(t)[defaultOption]}
+      />
+    </div>
  );
 }

--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
@ -1,11 +1,13 @@
 import { issues_types, types } from 'Types/session/issue';
-import { Segmented } from 'antd';
+import { Grid, Segmented } from 'antd';
 import { Angry, CircleAlert, Skull, WifiOff, ChevronDown } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import React, { useState, useEffect, useRef } from 'react';
 import { useStore } from 'App/mstore';
 import { useTranslation } from 'react-i18next';

+const { useBreakpoint } = Grid;
+
 const tagIcons = {
  [types.ALL]: undefined,
  [types.JS_EXCEPTION]: <CircleAlert size={14} />,
@ -17,6 +19,7 @@ const tagIcons = {

 function SessionTags() {
  const { t } = useTranslation();
+  const screens = useBreakpoint();
  const { projectsStore, sessionStore, searchStore } = useStore();
  const total = sessionStore.total;
  const platform = projectsStore.active?.platform || '';
@ -87,51 +90,25 @@ function SessionTags() {

  return (
    <div className="flex items-center">
-      {isMobile ? (
-        <div className="relative" ref={dropdownRef}>
-          <button
-            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-            className="flex items-center text-start justify-between w-full px-3 py-2 text-base bg-white border rounded-lg focus:outline-none"
-          >
-            <div className="flex items-center">
-              {activeOption.icon && (
-                <span className="mr-2">{activeOption.icon}</span>
-              )}
-              <span className="text-start">{activeOption.label}</span>
-            </div>
-            <ChevronDown
-              size={16}
-              className={`ml-2 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
-            />
-          </button>
-
-          {isDropdownOpen && (
-            <div className="absolute z-10 w-full min-w-40 mt-1 bg-white border rounded-xl max-h-60 overflow-auto">
-              {filteredOptions.map((option) => (
-                <div
-                  key={option.value}
-                  className={`flex items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${
-                    option.value === activeTab[0]
-                      ? 'bg-gray-50 font-medium'
-                      : ''
-                  }`}
-                  onClick={() => handleSelectOption(option.value)}
-                >
-                  {option.icon && <span className="mr-2">{option.icon}</span>}
-                  <span>{option.label}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      ) : (
-        <Segmented
-          options={filteredOptions}
-          value={activeTab[0]}
-          onChange={(value) => searchStore.toggleTag(value as any)}
-          size={'small'}
-        />
-      )}
+      <Segmented
+        vertical={!screens.md}
+        options={issues_types
+          .filter(
+            (tag) =>
+              tag.type !== 'mouse_thrashing' &&
+              (platform === 'web'
+                ? tag.type !== types.TAP_RAGE
+                : tag.type !== types.CLICK_RAGE),
+          )
+          .map((tag: any) => ({
+            value: tag.type,
+            icon: tagIcons[tag.type],
+            label: t(tag.name),
+          }))}
+        value={activeTab[0]}
+        onChange={(value: any) => searchStore.toggleTag(value)}
+        size="small"
+      />
    </div>
  );
 }
--- a/frontend/app/layout/Layout.tsx
+++ b/frontend/app/layout/Layout.tsx
@ -23,7 +23,7 @@ function Layout(props: Props) {

  useEffect(() => {
    const handleResize = () => {
-      const isMobile = window.innerWidth < 1200;
+      const isMobile = window.innerWidth < 1280;
      if (isMobile) {
        setCollapsed(true);
      } else {
--- a/frontend/app/layout/TopHeader.tsx
+++ b/frontend/app/layout/TopHeader.tsx
@ -48,7 +48,7 @@ function TopHeader() {
            settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed);
          }}
          style={{ paddingTop: '4px' }}
-          className="cursor-pointer"
+          className="cursor-pointer xl:block hidden"
        >
          <Tooltip
            title={
--- a/frontend/app/locales/es.json
+++ b/frontend/app/locales/es.json
@ -1307,7 +1307,7 @@
  "User's Time": "Hora del usuario",
  "Event": "Evento",
  "CALL IN PROGRESS": "LLAMADA EN CURSO",
-  "LAST PLAYED": "ÚLTIMA REPRODUCCIÓN",
+  "LAST PLAYED": "VISTO",
  "Sessions Settings": "Configuración de Sesiones",
  "The percentage of session you want to capture": "El porcentaje de sesiones que deseas capturar",
  "Sessions exceeding this specified limit will not be captured or stored.": "Las sesiones que superen este límite especificado no se capturarán ni almacenarán.",
--- a/frontend/app/locales/fr.json
+++ b/frontend/app/locales/fr.json
@ -1307,7 +1307,7 @@
  "User's Time": "Heure de l'utilisateur",
  "Event": "Événement",
  "CALL IN PROGRESS": "APPEL EN COURS",
-  "LAST PLAYED": "DERNIÈRE LECTURE",
+  "LAST PLAYED": "VISIONNÉ",
  "Sessions Settings": "Paramètres des sessions",
  "The percentage of session you want to capture": "Le pourcentage de sessions que vous souhaitez capturer",
  "Sessions exceeding this specified limit will not be captured or stored.": "Les sessions dépassant cette limite ne seront ni capturées ni stockées.",
--- a/frontend/app/locales/ru.json
+++ b/frontend/app/locales/ru.json
@ -1307,8 +1307,8 @@
  "Local Time:": "Местное время:",
  "User's Time": "Время пользователя",
  "Event": "Событие",
-  "CALL IN PROGRESS": "ЗВОНОК В ПРОЦЕССЕ",
-  "LAST PLAYED": "ПОСЛЕДНЕЕ ВОСПРОИЗВЕДЕНИЕ",
+  "CALL IN PROGRESS": "ИДЕТ ЗВОНОК",
+  "LAST PLAYED": "ПРОСМОТРЕНО",
  "Sessions Settings": "Настройки сессий",
  "The percentage of session you want to capture": "Процент сессий, которые вы хотите захватывать",
  "Condition Set": "Набор условий",
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -7,26 +7,24 @@ deprecatedDefaults.forEach(color => {
 })

 module.exports = {
-  content: [
-    './app/**/*.tsx',
-    './app/**/*.js'
-  ],
+  mode: 'jit',
+  content: ['./app/**/*.tsx', './app/**/*.js'],
  theme: {
    colors: {
      ...defaultColors,
-      ...colors
+      ...colors,
    },
    extend: {
      keyframes: {
        'fade-in': {
          '0%': {
-            opacity: '0'
+            opacity: '0',
            // transform: 'translateY(-10px)'
          },
          '100%': {
-            opacity: '1'
+            opacity: '1',
            // transform: 'translateY(0)'
-          }
+          },
        },
        'bg-spin': {
          '0%': {
@ -37,31 +35,31 @@ module.exports = {
          },
          '100%': {
            backgroundPosition: '0 50%',
-          }
-        }
+          },
+        },
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out',
-        'bg-spin': 'bg-spin 1s ease infinite'
+        'bg-spin': 'bg-spin 1s ease infinite',
      },
      colors: {
-        'disabled-text': 'rgba(0,0,0, 0.38)'
+        'disabled-text': 'rgba(0,0,0, 0.38)',
      },
      boxShadow: {
        'border-blue': `0 0 0 1px ${colors['active-blue-border']}`,
        'border-main': `0 0 0 1px ${colors['main']}`,
-        'border-gray': '0 0 0 1px #999'
+        'border-gray': '0 0 0 1px #999',
      },
      button: {
-        'background-color': 'red'
-      }
-    }
+        'background-color': 'red',
+      },
+    },
  },
  variants: {
-    visibility: ['responsive', 'hover', 'focus', 'group-hover']
+    visibility: ['responsive', 'hover', 'focus', 'group-hover'],
  },
  plugins: [],
  corePlugins: {
-    preflight: false
-  }
+    preflight: false,
+  },
 };