@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

package/src/components/MainMenu/helperComponents/Favorites/Favorites.tsx

@@ -0,0 +1,176 @@
+import { Button } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { SegmentControl, WIDTH } from '@cloud-ru/ds-segment-control';
+import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { MouseEvent, useMemo } from 'react';
+
+import { headerLocale } from '../../../../locale';
+import { FavoriteProps, InnerLink, LinksGroup } from '../../types';
+import { resolveInnerLinksByIds } from '../../utils';
+import { EmptyState, FavoritesItemsSkeleton, FavoritesSortable } from './components';
+import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS, FavoritesSegment } from './constants';
+import styles from './styles.module.scss';
+import { getCommonCardProps } from './utils';
+
+export type FavoritesProps = {
+  /** Список избранных сервисов */
+  favorite: FavoriteProps;
+  /** Группы сервисов для разрешения id в карточки */
+  allServiceGroups: LinksGroup[];
+  /** CSS-класс строки заголовка (segment + кнопка настроек) */
+  headerClassName?: string;
+  /** Флаг мобильной раскладки */
+  isMobile?: boolean;
+};
+
+export function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }: FavoritesProps) {
+  const { t } = headerLocale.useTranslations();
+  const loading = favorite.loading;
+
+  const [segment, setSegment] = useValueControl<FavoritesSegment>({
+    value: favorite.segment,
+    defaultValue: FAVORITES_SEGMENT.Favorites,
+    onChange: favorite.onSegmentChange,
+  });
+
+  const segmentControlItems = useMemo(
+    () => [
+      { value: FAVORITES_SEGMENT.Favorites, label: t('favorite.title'), disabled: loading },
+      { value: FAVORITES_SEGMENT.Recent, label: t('recent.title'), disabled: loading },
+    ],
+    [t, loading],
+  );
+
+  const favoriteItems = useMemo(
+    () => resolveInnerLinksByIds(favorite.value, allServiceGroups),
+    [favorite.value, allServiceGroups],
+  );
+
+  const recentItems = useMemo(
+    () => resolveInnerLinksByIds(favorite.recentServices ?? [], allServiceGroups),
+    [favorite.recentServices, allServiceGroups],
+  );
+
+  const resolvedSegment = segment ?? FAVORITES_SEGMENT.Favorites;
+  const isFavoritesSegment = resolvedSegment === FAVORITES_SEGMENT.Favorites;
+  const isEmpty = (isFavoritesSegment ? favoriteItems : recentItems).length === 0;
+
+  const handleRecentServiceClick = (service: InnerLink) => (event: MouseEvent<HTMLElement>) => {
+    favorite.onRecentServiceClick?.(service.id, event);
+    service.onClick(event);
+  };
+
+  const recentCards = recentItems.map(service => (
+    <CardServiceLight
+      key={service.id}
+      as='a'
+      className={styles.card}
+      favorite={{
+        enabled: true,
+        checked: favorite.value.includes(service.id),
+        onChange: favorite.onChange(service.id),
+      }}
+      {...getCommonCardProps(service, handleRecentServiceClick(service))}
+    />
+  ));
+
+  const content = useMemo(() => {
+    if (loading) {
+      return <FavoritesItemsSkeleton />;
+    }
+
+    const handleFavoriteServiceClick = (service: InnerLink) => (event: MouseEvent<HTMLElement>) => {
+      favorite.onFavoriteServiceClick?.(service.id, event);
+      service.onClick(event);
+    };
+
+    /* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
+      <DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
+      избранного идёт через звёздочку на карточке. */
+    return isMobile ? (
+      <div className={styles.listScroll}>
+        <Scroll className={styles.listScrollInner} overflow={{ x: 'hidden' }}>
+          <div className={styles.list} data-test-id={FAVORITES_TEST_IDS.list}>
+            {isEmpty && <EmptyState isFavoritesSegment={isFavoritesSegment} isMobile />}
+
+            {!isEmpty &&
+              isFavoritesSegment &&
+              favoriteItems.map(service => (
+                <CardServiceLight
+                  key={service.id}
+                  as='a'
+                  className={styles.card}
+                  actionsVisibility='always'
+                  actionsSize='s'
+                  favorite={{
+                    enabled: true,
+                    checked: true,
+                    onChange: favorite.onChange(service.id),
+                  }}
+                  {...getCommonCardProps(service, handleFavoriteServiceClick(service))}
+                />
+              ))}
+
+            {!isEmpty && !isFavoritesSegment && recentCards}
+          </div>
+        </Scroll>
+      </div>
+    ) : (
+      <FavoritesSortable
+        favorite={favorite}
+        favoriteItems={favoriteItems}
+        segment={resolvedSegment}
+        setSegment={setSegment}
+        isEmpty={isEmpty}
+        recentCards={recentCards}
+        onFavoriteServiceClick={handleFavoriteServiceClick}
+      />
+    );
+  }, [
+    favorite,
+    favoriteItems,
+    isEmpty,
+    isFavoritesSegment,
+    isMobile,
+    loading,
+    recentCards,
+    resolvedSegment,
+    setSegment,
+  ]);
+
+  return (
+    <div className={styles.root} data-test-id={FAVORITES_TEST_IDS.root}>
+      <div className={cn(styles.header, headerClassName)} data-test-id={FAVORITES_TEST_IDS.header}>
+        <SegmentControl
+          size='m'
+          outline
+          width={WIDTH.Full}
+          value={loading ? undefined : segment}
+          onChange={setSegment}
+          className={styles.segmentControl}
+          data-test-id={FAVORITES_TEST_IDS.segmentControl}
+          items={segmentControlItems}
+        />
+
+        {favorite.actions && (
+          <Droplist size='m' {...favorite.actions} closeDroplistOnItemClick>
+            <Button
+              view='function'
+              size='m'
+              appearance='neutral'
+              icon={<KebabSVG size={24} />}
+              data-test-id={FAVORITES_TEST_IDS.settingsButton}
+              disabled={loading}
+            />
+          </Droplist>
+        )}
+      </div>
+
+      {content}
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyFavoriteSVG.tsx

@@ -0,0 +1,24 @@
+export function EmptyFavoriteSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      data-favorite='true'
+      xmlns='http://www.w3.org/2000/svg'
+      width='40'
+      height='40'
+      viewBox='0 0 40 40'
+      fill='none'
+    >
+      <path
+        opacity='0.64'
+        d='M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108'
+        fill='none'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 6L24.7699 14.4348L34.2658 16.3647L27.7178 23.5077L28.8168 33.1353L20 29.115L11.1832 33.1353L12.2822 23.5077L5.73415 16.3647L15.2301 14.4348L20 6Z'
+        stroke='none'
+      />
+    </svg>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.tsx

@@ -0,0 +1,38 @@
+export function EmptyRecentSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+      width='40'
+      height='40'
+      viewBox='0 0 40 40'
+      fill='none'
+    >
+      <path
+        opacity='0.64'
+        d='M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108'
+        stroke='#5E606E'
+        fill='none'
+        strokeWidth='1.5'
+      />
+      <path d='M6 15L34 15L34 25L6 25L6 15Z' stroke='none' fill='#C3C8D5' />
+      <path
+        opacity='0.64'
+        d='M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308'
+        fill='none'
+        stroke='#5E606E'
+        strokeWidth='1.5'
+      />
+      <circle
+        opacity='0.64'
+        cx='2'
+        cy='2'
+        r='2'
+        transform='matrix(-1 0 0 1 10 7)'
+        stroke='#5E606E'
+        fill='none'
+        strokeWidth='1.5'
+      />
+    </svg>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,36 @@
+import { Typography } from '@cloud-ru/ds-typography';
+
+import { headerLocale } from '../../../../../../locale';
+import { FAVORITES_TEST_IDS } from '../../constants';
+import { EmptyFavoriteSVG } from './EmptyFavoriteSVG';
+import { EmptyRecentSVG } from './EmptyRecentSVG';
+import styles from './styles.module.scss';
+
+type EmptyStateProps = {
+  isFavoritesSegment: boolean;
+  isMobile?: boolean;
+};
+
+export function EmptyState({ isFavoritesSegment, isMobile }: EmptyStateProps) {
+  const { t } = headerLocale.useTranslations();
+
+  return (
+    <div className={styles.emptyState} data-test-id={FAVORITES_TEST_IDS.emptyState}>
+      {isFavoritesSegment ? (
+        <>
+          <EmptyFavoriteSVG className={styles.emptyIcon} />
+          <Typography variant='body' size='s' className={styles.emptyText}>
+            {isMobile ? t('favorite.emptyMobile') : t('favorite.emptyDesktop')}
+          </Typography>
+        </>
+      ) : (
+        <>
+          <EmptyRecentSVG className={styles.emptyIcon} />
+          <Typography variant='body' size='s' className={styles.emptyText}>
+            {t('recent.empty')}
+          </Typography>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.scss

@@ -0,0 +1,27 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.emptyIcon {
+  flex-shrink: 0;
+  width: base.$sn-primitive-dimension-40;
+  height: base.$sn-primitive-dimension-40;
+
+  &[data-favorite] {
+    fill: base.$sn-theme-color-neutral-decor;
+    stroke: base.$sn-theme-color-neutral-text;
+  }
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  padding: base.$sn-primitive-dimension-8;
+}
+
+.emptyText {
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-align: center;
+  white-space: pre-line;
+}

package/src/components/MainMenu/helperComponents/Favorites/components/FavoritesItemsSkeleton.tsx

@@ -0,0 +1,15 @@
+import { Skeleton, SkeletonContext } from '@cloud-ru/ds-skeleton';
+
+import styles from '../styles.module.scss';
+
+export function FavoritesItemsSkeleton() {
+  return (
+    <SkeletonContext.Provider value={true}>
+      <div className={styles.skeleton}>
+        <Skeleton className={styles.skeletonItem} />
+        <Skeleton className={styles.skeletonItem} />
+        <Skeleton className={styles.skeletonItem} />
+      </div>
+    </SkeletonContext.Provider>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.tsx

@@ -0,0 +1,78 @@
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { DropTarget } from '@cloud-ru/ds-drag-and-drop';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { MouseEvent, ReactNode } from 'react';
+
+import { FavoriteProps, InnerLink } from '../../../types';
+import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS, FavoritesSegment } from '../constants';
+import { useFavoritesDnd } from '../hooks/useFavoritesDnd';
+import styles from '../styles.module.scss';
+import { getCommonCardProps } from '../utils';
+import { EmptyState } from './EmptyState';
+import { SortableFavoriteCard } from './SortableFavoriteCard';
+
+type FavoritesSortableProps = {
+  favorite: FavoriteProps;
+  favoriteItems: InnerLink[];
+  segment: FavoritesSegment;
+  setSegment(segment: FavoritesSegment): void;
+  isEmpty: boolean;
+  recentCards: ReactNode;
+  onFavoriteServiceClick(service: InnerLink): (event: MouseEvent<HTMLElement>) => void;
+};
+
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+export function FavoritesSortable({
+  favorite,
+  favoriteItems,
+  segment,
+  setSegment,
+  isEmpty,
+  recentCards,
+  onFavoriteServiceClick,
+}: FavoritesSortableProps) {
+  const isFavoritesSegment = segment === FAVORITES_SEGMENT.Favorites;
+
+  const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } =
+    useFavoritesDnd({ favorite, favoriteItems, segment, setSegment });
+
+  return (
+    <div className={styles.listScroll} data-insert-new={showInsertNew}>
+      <DropTarget active={Boolean(showDropOver)} className={styles.dropTarget} aria-hidden />
+
+      <Scroll className={styles.listScrollInner} overflow={{ x: 'hidden' }}>
+        <div ref={setNodeRef} className={styles.list} data-test-id={FAVORITES_TEST_IDS.list}>
+          {isEmpty && <EmptyState isFavoritesSegment={isFavoritesSegment} />}
+
+          {!isEmpty && isFavoritesSegment && (
+            <SortableContext items={favoriteSortableIds} strategy={verticalListSortingStrategy}>
+              {favoriteItems.map((service, index) => (
+                <SortableFavoriteCard
+                  key={service.id}
+                  serviceId={service.id}
+                  showInsertIndicatorBefore={insertIndex === index}
+                  showInsertIndicatorAfter={isInsertingToEnd && index === favoriteItems.length - 1}
+                  isFirst={index === 0}
+                  favorite={{
+                    enabled: true,
+                    checked: true,
+                    onChange: favorite.onChange(service.id),
+                  }}
+                  {...getCommonCardProps(service, onFavoriteServiceClick(service))}
+                />
+              ))}
+
+              <div ref={listEndRef} className={styles.listEnd} aria-hidden />
+            </SortableContext>
+          )}
+
+          {!isEmpty && !isFavoritesSegment && recentCards}
+        </div>
+      </Scroll>
+    </div>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.tsx

@@ -0,0 +1,70 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DRAG_MODE, DragGhost, DropIndicator, PLACEMENT } from '@cloud-ru/ds-drag-and-drop';
+import { CardServiceLight, CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+
+import { getServiceFavoriteDragId } from '../../../utils/dnd';
+import styles from '../styles.module.scss';
+
+export type SortableFavoriteCardProps = {
+  serviceId: string;
+  showInsertIndicatorBefore?: boolean;
+  showInsertIndicatorAfter?: boolean;
+  isFirst?: boolean;
+} & Pick<
+  CardServiceLightProps<'a'>,
+  | 'href'
+  | 'className'
+  | 'tabIndex'
+  | 'title'
+  | 'onClick'
+  | 'icon'
+  | 'promoTag'
+  | 'tooltip'
+  | 'favorite'
+  | 'expandable'
+  | 'data-test-id'
+>;
+
+export function SortableFavoriteCard({
+  serviceId,
+  className,
+  showInsertIndicatorBefore,
+  showInsertIndicatorAfter,
+  isFirst,
+  ...cardProps
+}: SortableFavoriteCardProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: getServiceFavoriteDragId(serviceId),
+  });
+
+  const transformStyle = transform ? CSS.Translate.toString(transform) : undefined;
+
+  const style = {
+    // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая карточка "растягивается"
+    // при пересечении с соседней карточкой. CSS.Translate использует только сдвиг.
+    // Во время drag transform на источнике не применяем — превью в DragOverlay.
+    transform: isDragging ? undefined : transformStyle,
+    transition,
+  };
+
+  const { tabIndex, ...restAttributes } = attributes ?? {};
+
+  return (
+    <DragGhost
+      innerRef={setNodeRef}
+      style={style}
+      className={styles.sortableCard}
+      dragging={isDragging}
+      mode={DRAG_MODE.Dynamic}
+      {...listeners}
+      {...restAttributes}
+    >
+      {showInsertIndicatorBefore && <DropIndicator placement={PLACEMENT.Before} atEdge={isFirst} />}
+
+      <CardServiceLight as='a' {...cardProps} className={className ?? styles.card} tabIndex={tabIndex} />
+
+      {showInsertIndicatorAfter && <DropIndicator placement={PLACEMENT.After} atEdge />}
+    </DragGhost>
+  );
+}

package/src/components/MainMenu/helperComponents/Favorites/components/index.ts

@@ -0,0 +1,4 @@
+export * from './SortableFavoriteCard';
+export * from './EmptyState';
+export * from './FavoritesSortable';
+export * from './FavoritesItemsSkeleton';

package/src/components/MainMenu/helperComponents/Favorites/constants.ts

@@ -0,0 +1,18 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+export const FAVORITES_SEGMENT = {
+  Favorites: 'favorites',
+  Recent: 'recent',
+} as const;
+
+export type FavoritesSegment = ValueOf<typeof FAVORITES_SEGMENT>;
+
+export const FAVORITES_TEST_IDS = {
+  root: 'header__drawer-menu__favorites',
+  header: 'header__drawer-menu__favorites-header',
+  segmentControl: 'header__drawer-menu__favorites-segment',
+  settingsButton: 'header__drawer-menu__favorites-settings',
+  list: 'header__drawer-menu__favorites-list',
+  emptyState: 'header__drawer-menu__favorites-empty',
+  dropZone: 'header__drawer-menu__favorites-drop-zone',
+} as const;

package/src/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesDnd.tsx

@@ -0,0 +1,123 @@
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useMainMenuDndOverlay } from '../../../hooks/useMainMenuDnd';
+import { FavoriteProps, InnerLink } from '../../../types';
+import {
+  FAVORITES_DROP_ID,
+  getServiceFavoriteDragId,
+  isServiceDragId,
+  isServiceFavoriteDragId,
+  parseServiceDragId,
+} from '../../../utils';
+import { ServiceCard } from '../../ServiceCard';
+import { FAVORITES_SEGMENT, FavoritesSegment } from '../constants';
+import { useFavoritesInsertIndicator } from './useFavoritesInsertIndicator';
+
+type UseFavoritesDndParams = {
+  favorite: FavoriteProps;
+  favoriteItems: InnerLink[];
+  segment: FavoritesSegment;
+  setSegment(segment: FavoritesSegment): void;
+};
+
+/**
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
+ * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
+ *
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
+ */
+export function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }: UseFavoritesDndParams) {
+  const { setGroupDragOverlay } = useMainMenuDndOverlay();
+
+  const [activeFavoriteId, setActiveFavoriteId] = useState<string | null>(null);
+  const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = useState(false);
+  const [isDraggingToFavorites, setDraggingToFavorites] = useState(false);
+
+  const listEndRef = useRef<HTMLDivElement>(null);
+  const shouldScrollToEndRef = useRef(false);
+
+  const isFavoritesSegment = segment === FAVORITES_SEGMENT.Favorites;
+
+  const favoriteSortableIds = useMemo(() => favorite.value.map(getServiceFavoriteDragId), [favorite.value]);
+
+  const insertIndex = useFavoritesInsertIndicator(favorite.value);
+  const isInsertingToEnd = favoriteItems.length > 0 && insertIndex === favoriteItems.length;
+  const isInsertingNew = isDraggingToFavorites && !favoriteItems.length;
+  const insertIndexRef = useRef(insertIndex);
+  insertIndexRef.current = insertIndex;
+
+  const activeFavorite = favoriteItems.find(service => service.id === activeFavoriteId);
+
+  const { setNodeRef, isOver } = useDroppable({
+    id: FAVORITES_DROP_ID,
+    // Only needed for an empty list; with cards, card droppables own the hit-testing.
+    disabled: !isFavoritesSegment || isFavoriteReorderDrag || favoriteItems.length > 0,
+  });
+
+  useDndMonitor({
+    onDragStart({ active }) {
+      if (isServiceDragId(active.id)) {
+        setSegment(FAVORITES_SEGMENT.Favorites);
+        setDraggingToFavorites(true);
+      }
+
+      if (isServiceFavoriteDragId(active.id)) {
+        setActiveFavoriteId(parseServiceDragId(active.id));
+        setIsFavoriteReorderDrag(true);
+      }
+    },
+    onDragEnd() {
+      shouldScrollToEndRef.current = isDraggingToFavorites && insertIndexRef.current === favorite.value.length;
+
+      setActiveFavoriteId(null);
+      setIsFavoriteReorderDrag(false);
+      setDraggingToFavorites(false);
+    },
+    onDragCancel() {
+      shouldScrollToEndRef.current = false;
+      setActiveFavoriteId(null);
+      setIsFavoriteReorderDrag(false);
+      setDraggingToFavorites(false);
+    },
+  });
+
+  useEffect(() => {
+    if (!activeFavorite) {
+      setGroupDragOverlay(null);
+      return;
+    }
+
+    setGroupDragOverlay(<ServiceCard service={activeFavorite} showDescription={false} dragPreview />);
+
+    return () => setGroupDragOverlay(null);
+  }, [activeFavorite, setGroupDragOverlay]);
+
+  useEffect(() => {
+    if (!shouldScrollToEndRef.current) {
+      return;
+    }
+
+    shouldScrollToEndRef.current = false;
+
+    const frameId = requestAnimationFrame(() => {
+      listEndRef.current?.scrollIntoView({ block: 'nearest' });
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [favorite.value]);
+
+  const showDropOver = ((isOver || isDraggingToFavorites) && !isFavoriteReorderDrag) || undefined;
+  const showInsertNew = (isInsertingNew && isOver) || undefined;
+
+  return {
+    setNodeRef,
+    listEndRef,
+    favoriteSortableIds,
+    insertIndex,
+    isInsertingToEnd,
+    showDropOver,
+    showInsertNew,
+  };
+}

package/src/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesInsertIndicator.ts

@@ -0,0 +1,41 @@
+import { Active, Over, Translate, useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+
+import { getDragReferenceY, getFavoriteInsertIndex } from '../../../utils';
+
+export function useFavoritesInsertIndicator(favoriteIds: string[]) {
+  const [insertIndex, setInsertIndex] = useState<number | null>(null);
+
+  const updateInsertIndex = (active: Active, over: Over | null, delta: Translate, activatorEvent: Event) => {
+    setInsertIndex(
+      getFavoriteInsertIndex({
+        activeId: active.id,
+        overId: over?.id,
+        favoriteIds,
+        referenceY: getDragReferenceY({
+          activatorEvent,
+          deltaY: delta.y,
+          activeRect: active.rect.current.translated,
+        }),
+        overRect: over?.rect,
+      }),
+    );
+  };
+
+  useDndMonitor({
+    onDragMove({ active, over, delta, activatorEvent }) {
+      updateInsertIndex(active, over, delta, activatorEvent);
+    },
+    onDragOver({ active, over, delta, activatorEvent }) {
+      updateInsertIndex(active, over, delta, activatorEvent);
+    },
+    onDragEnd() {
+      setInsertIndex(null);
+    },
+    onDragCancel() {
+      setInsertIndex(null);
+    },
+  });
+
+  return insertIndex;
+}

package/src/components/MainMenu/helperComponents/Favorites/index.ts

@@ -0,0 +1,2 @@
+export * from './Favorites';
+export * from './constants';