Fixed empty website select. Converted session profile to popover.

src/components/common/LoadingPanel.tsx

@@ -29,25 +29,31 @@ export function LoadingPanel({
 }: LoadingPanelProps) {
   const empty = isEmpty ?? checkEmpty(data);
 
-  return (
-    <>
-      {/* Show loading spinner only if no data exists */}
-      {(isLoading || isFetching) && (
-        <Column position="relative" height="100%" {...props}>
-          <Loading icon={loadingIcon} placement={loadingPlacement} />
-        </Column>
-      )}
+  // Show loading spinner only if no data exists
+  if (isLoading || isFetching) {
+    return (
+      <Column position="relative" height="100%" width="100%" {...props}>
+        <Loading icon={loadingIcon} placement={loadingPlacement} />
+      </Column>
+    );
+  }
 
-      {/* Show error */}
-      {error && <ErrorMessage />}
+  // Show error
+  if (error) {
+    return <ErrorMessage />;
+  }
 
-      {/* Show empty state (once loaded) */}
-      {!error && !isLoading && !isFetching && empty && renderEmpty()}
+  // Show empty state (once loaded)
+  if (!error && !isLoading && !isFetching && empty) {
+    return renderEmpty();
+  }
 
-      {/* Show main content when data exists */}
-      {!isLoading && !isFetching && !error && !empty && children}
-    </>
-  );
+  // Show main content when data exists
+  if (!isLoading && !isFetching && !error && !empty) {
+    return children;
+  }
+
+  return null;
 }
 
 function checkEmpty(data: any) {

src/components/hooks/queries/useWebsiteSessionQuery.ts

@@ -8,5 +8,6 @@ export function useWebsiteSessionQuery(websiteId: string, sessionId: string) {
     queryFn: () => {
       return get(`/websites/${websiteId}/sessions/${sessionId}`);
     },
+    enabled: Boolean(websiteId && sessionId),
   });
 }

src/components/hooks/useDateRange.ts

@@ -6,7 +6,7 @@ import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
 
 export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
   const {
-    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev', all },
+    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev' },
   } = useNavigation();
   const { locale } = useLocale();
 
@@ -24,7 +24,7 @@ export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
     date,
     offset,
     compare,
-    isAllTime: !!all,
+    isAllTime: date.endsWith(`:all`),
     isCustomRange: date.startsWith('range:'),
     dateRange,
     dateCompare,

src/components/input/DateFilter.tsx

@@ -99,11 +99,13 @@ export function DateFilter({
     );
   };
 
+  const selectedValue = value.endsWith(':all') ? 'all' : value;
+
   return (
     <>
       <Select
         {...props}
-        value={value}
+        value={selectedValue}
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}

src/components/input/WebsiteDateFilter.tsx

@@ -35,13 +35,12 @@ export function WebsiteDateFilter({
     if (date === 'all') {
       router.push(
         updateParams({
-          date: getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate),
+          date: `${getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate)}:all`,
           offset: undefined,
-          all: 1,
         }),
       );
     } else {
-      router.push(updateParams({ date, offset: undefined, all: undefined }));
+      router.push(updateParams({ date, offset: undefined }));
     }
   };
 

src/components/input/WebsiteSelect.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Select, SelectProps, ListItem } from '@umami/react-zen';
-import { useUserWebsitesQuery, useMessages, useLoginQuery } from '@/components/hooks';
+import { Select, SelectProps, ListItem, Text, Row } from '@umami/react-zen';
+import { useUserWebsitesQuery, useMessages, useLoginQuery, useWebsite } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 
 export function WebsiteSelect({
@@ -14,12 +14,13 @@ export function WebsiteSelect({
   teamId?: string;
   includeTeams?: boolean;
 } & SelectProps) {
+  const website = useWebsite();
   const { formatMessage, messages } = useMessages();
   const [search, setSearch] = useState('');
   const { user } = useLoginQuery();
   const { data, isLoading } = useUserWebsitesQuery(
     { userId: user?.id, teamId },
-    { search, pageSize: 5, includeTeams },
+    { search, pageSize: 10, includeTeams },
   );
 
   const handleSearch = (value: string) => {
@@ -30,6 +31,14 @@ export function WebsiteSelect({
     setSearch('');
   };
 
+  const renderValue = () => {
+    return (
+      <Row maxWidth="160px">
+        <Text truncate>{website.name}</Text>
+      </Row>
+    );
+  };
+
   return (
     <Select
       {...props}
@@ -41,8 +50,10 @@ export function WebsiteSelect({
       onSearch={handleSearch}
       onChange={onChange}
       onOpenChange={handleOpenChange}
+      renderValue={renderValue}
       listProps={{
         renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
+        style: { maxHeight: '400px' },
       }}
     >
       {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}