@tradejs/app 1.0.9 → 1.0.10

package/src/app/components/Shared/BulkSelection/index.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  Button,
+  Checkbox,
+  CloseButton,
+  Dialog,
+  Flex,
+  Portal,
+  Text,
+} from '@chakra-ui/react';
+import { useBulkSelection } from './useBulkSelection';
+import type { BulkCheckboxState } from './utils';
+
+interface BulkDeleteToolbarProps {
+  selectedCount: number;
+  checkboxState: BulkCheckboxState;
+  hasSelection: boolean;
+  isDeleting: boolean;
+  dialogOpen: boolean;
+  deleteTitle: ReactNode;
+  deleteDescription: ReactNode;
+  deleteHint?: ReactNode;
+  selectAllLabel?: string;
+  selectedLabel?: ReactNode;
+  onDialogOpenChange: (open: boolean) => void;
+  onToggleAll: (checked: boolean) => void;
+  onRequestDelete?: () => void;
+  onConfirmDelete: () => void;
+}
+
+export const BulkDeleteToolbar = ({
+  selectedCount,
+  checkboxState,
+  hasSelection,
+  isDeleting,
+  dialogOpen,
+  deleteTitle,
+  deleteDescription,
+  deleteHint = 'This action cannot be undone.',
+  selectAllLabel = 'Select filtered items',
+  selectedLabel,
+  onDialogOpenChange,
+  onToggleAll,
+  onRequestDelete,
+  onConfirmDelete,
+}: BulkDeleteToolbarProps) => (
+  <Flex mb={4} gap={4} alignItems="center" w="full" minH="32px">
+    <Checkbox.Root
+      size="sm"
+      colorPalette="teal"
+      checked={checkboxState}
+      onCheckedChange={(details) => onToggleAll(details.checked === true)}
+    >
+      <Checkbox.HiddenInput aria-label={selectAllLabel} />
+      <Checkbox.Control bg="gray.800" borderColor="gray.500" />
+    </Checkbox.Root>
+    <Text color="gray.200" fontWeight="semibold">
+      {selectedLabel ?? `Selected: ${selectedCount}`}
+    </Text>
+
+    <Button
+      type="button"
+      size="sm"
+      colorPalette="red"
+      variant="outline"
+      aria-label="Open delete confirmation"
+      disabled={!hasSelection || isDeleting}
+      onClick={() => {
+        if (!hasSelection || isDeleting) {
+          return;
+        }
+
+        if (onRequestDelete) {
+          onRequestDelete();
+          return;
+        }
+
+        onDialogOpenChange(true);
+      }}
+    >
+      Delete
+    </Button>
+
+    <Dialog.Root
+      open={dialogOpen}
+      onOpenChange={(event) => onDialogOpenChange(event.open)}
+    >
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>{deleteTitle}</Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton position="absolute" right="3" top="3" />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Text fontSize="sm" color="gray.200">
+                {deleteDescription}
+              </Text>
+              {deleteHint ? (
+                <Text fontSize="sm" color="gray.400" mt={2}>
+                  {deleteHint}
+                </Text>
+              ) : null}
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={isDeleting}
+                >
+                  Cancel
+                </Button>
+              </Dialog.ActionTrigger>
+              <Button
+                type="button"
+                colorPalette="red"
+                size="sm"
+                aria-label="Confirm delete"
+                onClick={onConfirmDelete}
+                loading={isDeleting}
+              >
+                Delete
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  </Flex>
+);
+
+export { useBulkSelection };
+export type { BulkCheckboxState };

package/src/app/components/Shared/BulkSelection/useBulkSelection.ts

@@ -0,0 +1,97 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  getBulkSelectionState,
+  pruneSelection,
+  removeSelectedIds,
+  sameIds,
+  setSelectionForId,
+  setSelectionForScope,
+} from './utils';
+
+interface UseBulkSelectionOptions {
+  scopeIds: readonly string[];
+  validIds?: readonly string[];
+  enabled?: boolean;
+}
+
+export const useBulkSelection = ({
+  scopeIds,
+  validIds = scopeIds,
+  enabled = true,
+}: UseBulkSelectionOptions) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSelectedIds((prev) => {
+      if (!enabled) {
+        return prev.length === 0 ? prev : [];
+      }
+
+      const next = pruneSelection({ selectedIds: prev, validIds });
+      return sameIds(prev, next) ? prev : next;
+    });
+  }, [enabled, validIds]);
+
+  const state = useMemo(
+    () =>
+      getBulkSelectionState({
+        selectedIds,
+        scopeIds: enabled ? scopeIds : [],
+      }),
+    [enabled, scopeIds, selectedIds],
+  );
+
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+
+  const toggleSelection = useCallback(
+    (id: string, checked: boolean) => {
+      if (!enabled) {
+        return;
+      }
+
+      setSelectedIds((prev) =>
+        setSelectionForId({ selectedIds: prev, id, checked }),
+      );
+    },
+    [enabled],
+  );
+
+  const setScopeSelected = useCallback(
+    (checked: boolean) => {
+      if (!enabled) {
+        return;
+      }
+
+      setSelectedIds((prev) =>
+        setSelectionForScope({
+          selectedIds: prev,
+          scopeIds,
+          checked,
+        }),
+      );
+    },
+    [enabled, scopeIds],
+  );
+
+  const removeSelection = useCallback((idsToRemove: readonly string[]) => {
+    setSelectedIds((prev) =>
+      removeSelectedIds({ selectedIds: prev, idsToRemove }),
+    );
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds((prev) => (prev.length === 0 ? prev : []));
+  }, []);
+
+  return {
+    selectedIds,
+    selectedIdSet,
+    ...state,
+    toggleSelection,
+    setScopeSelected,
+    removeSelection,
+    clearSelection,
+  };
+};

package/src/app/components/Shared/BulkSelection/utils.ts

@@ -0,0 +1,126 @@
+export type BulkCheckboxState = boolean | 'indeterminate';
+
+export const uniqueIds = (ids: readonly string[]) => Array.from(new Set(ids));
+
+export const sameIds = (left: readonly string[], right: readonly string[]) =>
+  left.length === right.length &&
+  left.every((value, index) => value === right[index]);
+
+export const getScopedSelectedIds = ({
+  selectedIds,
+  scopeIds,
+}: {
+  selectedIds: readonly string[];
+  scopeIds: readonly string[];
+}) => {
+  const scopeSet = new Set(scopeIds);
+
+  return uniqueIds(selectedIds).filter((id) => scopeSet.has(id));
+};
+
+export const getBulkSelectionState = ({
+  selectedIds,
+  scopeIds,
+}: {
+  selectedIds: readonly string[];
+  scopeIds: readonly string[];
+}) => {
+  const uniqueScopeIds = uniqueIds(scopeIds);
+  const selectedScopedIds = getScopedSelectedIds({
+    selectedIds,
+    scopeIds: uniqueScopeIds,
+  });
+  const selectedScopedCount = selectedScopedIds.length;
+  const allScopedSelected =
+    uniqueScopeIds.length > 0 && selectedScopedCount === uniqueScopeIds.length;
+  const hasScopedSelection = selectedScopedCount > 0;
+  const checkboxState: BulkCheckboxState = allScopedSelected
+    ? true
+    : hasScopedSelection
+      ? 'indeterminate'
+      : false;
+
+  return {
+    selectedScopedIds,
+    selectedScopedCount,
+    allScopedSelected,
+    hasScopedSelection,
+    checkboxState,
+  };
+};
+
+export const setSelectionForId = ({
+  selectedIds,
+  id,
+  checked,
+}: {
+  selectedIds: readonly string[];
+  id: string;
+  checked: boolean;
+}) => {
+  const uniqueSelectedIds = uniqueIds(selectedIds);
+
+  if (!checked) {
+    return uniqueSelectedIds.filter((selectedId) => selectedId !== id);
+  }
+
+  if (uniqueSelectedIds.includes(id)) {
+    return uniqueSelectedIds;
+  }
+
+  return [...uniqueSelectedIds, id];
+};
+
+export const setSelectionForScope = ({
+  selectedIds,
+  scopeIds,
+  checked,
+}: {
+  selectedIds: readonly string[];
+  scopeIds: readonly string[];
+  checked: boolean;
+}) => {
+  const uniqueSelectedIds = uniqueIds(selectedIds);
+  const uniqueScopeIds = uniqueIds(scopeIds);
+  const scopeSet = new Set(uniqueScopeIds);
+
+  if (!checked) {
+    return uniqueSelectedIds.filter((id) => !scopeSet.has(id));
+  }
+
+  const nextSet = new Set(uniqueSelectedIds);
+  const nextIds = [...uniqueSelectedIds];
+
+  for (const id of uniqueScopeIds) {
+    if (!nextSet.has(id)) {
+      nextSet.add(id);
+      nextIds.push(id);
+    }
+  }
+
+  return nextIds;
+};
+
+export const removeSelectedIds = ({
+  selectedIds,
+  idsToRemove,
+}: {
+  selectedIds: readonly string[];
+  idsToRemove: readonly string[];
+}) => {
+  const removedSet = new Set(idsToRemove);
+
+  return uniqueIds(selectedIds).filter((id) => !removedSet.has(id));
+};
+
+export const pruneSelection = ({
+  selectedIds,
+  validIds,
+}: {
+  selectedIds: readonly string[];
+  validIds: readonly string[];
+}) => {
+  const validSet = new Set(validIds);
+
+  return uniqueIds(selectedIds).filter((id) => validSet.has(id));
+};

package/src/app/components/Shared/Filters/Backtest/index.tsx

@@ -2,13 +2,12 @@
 
 import _ from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
-import { Select } from '@UI';
+import { Select } from '#ui';
 import { useFiltersContext } from '../context';
 
 export const SelectBacktest = () => {
   const { filters, backtestFiles, onChangeFilters, ensureBacktestsLoaded } =
     useFiltersContext();
-  const STORAGE_KEY = 'backtest-strategy';
 
   const tests = useMemo(
     () => backtestFiles.filter((file) => file.value.startsWith(filters.symbol)),
@@ -33,6 +32,16 @@ export const SelectBacktest = () => {
   }, [tests]);
 
   const [selectedStrategy, setSelectedStrategy] = useState<string>('');
+  const selectedTestStrategy = useMemo(() => {
+    if (!filters.backtestId) return null;
+
+    const strategyName = tests.find((test) => test.value === filters.backtestId)
+      ?.data?.strategyName;
+
+    return typeof strategyName === 'string' && strategyName
+      ? strategyName
+      : null;
+  }, [filters.backtestId, tests]);
 
   useEffect(() => {
     if (_.isEmpty(strategyItems)) {
@@ -40,59 +49,34 @@ export const SelectBacktest = () => {
       return;
     }
 
-    if (
-      filters.backtestStrategy &&
-      strategyItems.some((item) => item.value === filters.backtestStrategy) &&
-      selectedStrategy !== filters.backtestStrategy
-    ) {
-      setSelectedStrategy(filters.backtestStrategy);
-      return;
-    }
+    const requestedStrategy = filters.backtestStrategy ?? selectedTestStrategy;
 
     if (
-      selectedStrategy &&
-      strategyItems.some((item) => item.value === selectedStrategy)
+      requestedStrategy &&
+      strategyItems.some((item) => item.value === requestedStrategy) &&
+      selectedStrategy !== requestedStrategy
     ) {
+      setSelectedStrategy(requestedStrategy);
       return;
     }
 
-    const saved =
-      typeof window !== 'undefined'
-        ? window.localStorage.getItem(STORAGE_KEY)
-        : null;
-
-    const defaultStrategy =
-      saved && strategyItems.some((item) => item.value === saved)
-        ? saved
-        : strategyItems[0]?.value || '';
-
-    if (defaultStrategy) {
-      setSelectedStrategy(defaultStrategy);
+    if (!requestedStrategy && selectedStrategy) {
+      setSelectedStrategy('');
+      return;
     }
-  }, [strategyItems, filters.backtestStrategy, selectedStrategy]);
-
-  useEffect(() => {
-    if (!filters.backtestId) return;
-
-    const selectedTest = tests.find(
-      (test) => test.value === filters.backtestId,
-    );
-    const strategyName = selectedTest?.data?.strategyName;
 
     if (
-      typeof strategyName === 'string' &&
-      strategyName &&
-      selectedStrategy !== strategyName
+      selectedStrategy &&
+      !strategyItems.some((item) => item.value === selectedStrategy)
     ) {
-      setSelectedStrategy(strategyName);
-    }
-  }, [filters.backtestId, tests, selectedStrategy]);
-
-  useEffect(() => {
-    if (selectedStrategy && typeof window !== 'undefined') {
-      window.localStorage.setItem(STORAGE_KEY, selectedStrategy);
+      setSelectedStrategy('');
     }
-  }, [selectedStrategy]);
+  }, [
+    filters.backtestStrategy,
+    selectedStrategy,
+    selectedTestStrategy,
+    strategyItems,
+  ]);
 
   const onChange = (value: string[]) => {
     onChangeFilters?.({
@@ -103,9 +87,6 @@ export const SelectBacktest = () => {
   const onChangeStrategy = (value: string[]) => {
     const nextStrategy = value[0] || '';
     setSelectedStrategy(nextStrategy);
-    if (nextStrategy && typeof window !== 'undefined') {
-      window.localStorage.setItem(STORAGE_KEY, nextStrategy);
-    }
 
     const hasSelectedTest =
       filters.backtestId &&
@@ -131,11 +112,13 @@ export const SelectBacktest = () => {
   const strategyTests = tests.filter(
     (test) => test.data?.strategyName === selectedStrategy,
   );
+  const hasStrategyItems = !_.isEmpty(strategyItems);
 
   return (
     <>
       <Select
-        placeholder="Strategy"
+        placeholder={hasStrategyItems ? 'Strategy' : 'No strategies'}
+        emptyState="No strategies for this symbol"
         defaultValue={[selectedStrategy]}
         value={[selectedStrategy]}
         onChange={onChangeStrategy}
@@ -145,6 +128,7 @@ export const SelectBacktest = () => {
           }
         }}
         items={strategyItems}
+        disabled={!hasStrategyItems}
         width="220px"
       />
       <Select
@@ -164,6 +148,7 @@ export const SelectBacktest = () => {
           },
           ...strategyTests,
         ]}
+        disabled={!selectedStrategy}
         width="240px"
       />
     </>

package/src/app/components/Shared/Filters/FavoriteIndicator/index.tsx

@@ -1,12 +1,14 @@
 import { useFiltersContext } from '../context';
-import { FavoriteButton } from '@shared/FavoriteButton';
-import { useTickers } from '@store';
+import { FavoriteButton } from '#shared/FavoriteButton';
+import { useTickers } from '#store';
 
 export const FavoriteIndicator = () => {
   const {
     filters: { symbol, provider },
   } = useFiltersContext();
-  const { checkIsFavorite, toggleFavorite } = useTickers(provider || 'bybit');
+  const { checkIsFavorite, toggleFavorite } = useTickers(provider || 'bybit', {
+    enabled: false,
+  });
   const isFavorite = checkIsFavorite(symbol);
 
   return (

package/src/app/components/Shared/Filters/Indicators/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import _ from 'lodash';
-import { useIndicators } from '@store';
-import { Select } from '@UI';
+import { useIndicators } from '#store';
+import { Select } from '#ui';
 
 export const SelectIndicator = () => {
   const { selectedIndicators, indicatorsItems, setEnabledIndicators } =

package/src/app/components/Shared/Filters/Interval/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Segment } from '@UI';
+import { Segment } from '#ui';
 import { Interval } from '@tradejs/types';
 import { intervals } from './intervals';
 import { useFiltersContext } from '../context';

package/src/app/components/Shared/Filters/Provider/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Select } from '@UI';
+import { Select } from '#ui';
+import { getDefaultMarketSymbol } from '#app/lib/marketDefaults';
 import { useFiltersContext } from '../context';
 
 const items = [
@@ -14,8 +15,13 @@ export const SelectProvider = () => {
 
   const onChange = (value: string[]) => {
     if (!value[0]) return;
+    const provider = value[0] as 'bybit' | 'binance' | 'coinbase';
+    const universe =
+      provider === 'bybit' ? filters.universe ?? 'crypto' : 'crypto';
     onChangeFilters?.({
-      provider: value[0] as 'bybit' | 'binance' | 'coinbase',
+      provider,
+      universe,
+      symbol: getDefaultMarketSymbol(provider, universe),
       backtestId: null,
       backtestStrategy: null,
     });

package/src/app/components/Shared/Filters/Symbol/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import _ from 'lodash';
-import { SelectWithSearch } from '@UI';
+import { SelectWithSearch } from '#ui';
 import { useFiltersContext } from '../context';
 
 interface SelectSymbolProps {}
@@ -11,7 +11,7 @@ export const SelectSymbol = ({}: SelectSymbolProps) => {
     useFiltersContext();
   const defaultInputValue =
     tickers.find(({ value }) => value === filters.symbol)?.label ||
-    filters.symbol;
+    filters.symbol.replace(/USDT$/i, '');
 
   const onChange = (value: string[]) => {
     if (_.isEmpty(value)) {
@@ -29,12 +29,13 @@ export const SelectSymbol = ({}: SelectSymbolProps) => {
 
   return (
     <SelectWithSearch
+      key={`${filters.provider}:${filters.universe}:${filters.symbol}`}
       defaultValue={[filters.symbol]}
       defaultInputValue={defaultInputValue}
       onChange={onChange}
       onOpenChange={(open) => {
         if (open) {
-          void ensureTickersLoaded?.();
+          void Promise.resolve(ensureTickersLoaded?.()).catch(() => undefined);
         }
       }}
       items={tickers}

package/src/app/components/Shared/Filters/Universe/index.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Select } from '#ui';
+import type { MarketUniverse } from '@tradejs/types';
+import { getDefaultMarketSymbol } from '#app/lib/marketDefaults';
+import { useFiltersContext } from '../context';
+
+export const SelectUniverse = () => {
+  const { filters, onChangeFilters } = useFiltersContext();
+  const items =
+    filters.provider === 'bybit'
+      ? [
+          { value: 'crypto', label: 'Crypto' },
+          { value: 'tradfi', label: 'TradFi' },
+        ]
+      : [{ value: 'crypto', label: 'Crypto' }];
+
+  return (
+    <Select
+      key={`${filters.provider}:${filters.universe}`}
+      defaultValue={[filters.universe ?? 'crypto']}
+      onChange={(value: string[]) => {
+        if (!value[0]) return;
+        const universe = value[0] as MarketUniverse;
+        onChangeFilters?.({
+          universe,
+          symbol: getDefaultMarketSymbol(filters.provider ?? 'bybit', universe),
+          backtestId: null,
+          backtestStrategy: null,
+        });
+      }}
+      items={items}
+      width="120px"
+    />
+  );
+};

package/src/app/components/Shared/Filters/index.ts

@@ -5,10 +5,12 @@ import { SelectSymbol } from './Symbol';
 import { SelectBacktest } from './Backtest';
 import { SelectIndicator } from './Indicators';
 import { FavoriteIndicator } from './FavoriteIndicator';
+import { SelectUniverse } from './Universe';
 
 export const Filters = {
   Root,
   SelectProvider,
+  SelectUniverse,
   SelectInterval,
   SelectSymbol,
   SelectBacktest,