Redo queue handler as hook

src/renderer/components/card/album-card.tsx

@@ -6,9 +6,9 @@ import { Link } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
 import { Text } from '/@/renderer/components/text';
-import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
+import type { LibraryItem, CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
 import { Skeleton } from '/@/renderer/components/skeleton';
-import CardControls from '/@/renderer/components/card/card-controls';
+import { CardControls } from '/@/renderer/components/card/card-controls';
 
 const CardWrapper = styled.div<{
   link?: boolean;
@@ -108,11 +108,18 @@ interface BaseGridCardProps {
     route: CardRoute;
   };
   data: any;
+  handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
   loading?: boolean;
   size: number;
 }
 
-export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps) => {
+export const AlbumCard = ({
+  loading,
+  size,
+  handlePlayQueueAdd,
+  data,
+  controls,
+}: BaseGridCardProps) => {
   const navigate = useNavigate();
   const { itemType, cardRows, route } = controls;
 
@@ -164,6 +171,7 @@ export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps)
             )}
             <ControlsContainer>
               <CardControls
+                handlePlayQueueAdd={handlePlayQueueAdd}
                 itemData={data}
                 itemType={itemType}
               />
@@ -286,7 +294,7 @@ export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps)
           <ImageSection />
         </Skeleton>
         <DetailSection style={{ width: '100%' }}>
-          {cardRows.map((row: CardRow, index: number) => (
+          {cardRows.map((_row: CardRow, index: number) => (
             <Skeleton
               visible
               height={15}

src/renderer/components/card/card-controls.tsx

@@ -6,7 +6,7 @@ import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/r
 import styled from 'styled-components';
 import { _Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
-import type { LibraryItem } from '/@/renderer/types';
+import type { LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
 import { Play } from '/@/renderer/types';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 
@@ -113,20 +113,26 @@ const PLAY_TYPES = [
   },
 ];
 
-export const CardControls = ({ itemData, itemType }: { itemData: any; itemType: LibraryItem }) => {
+export const CardControls = ({
+  itemData,
+  itemType,
+  handlePlayQueueAdd,
+}: {
+  handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
+  itemData: any;
+  itemType: LibraryItem;
+}) => {
   const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
 
   const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
     e.preventDefault();
     e.stopPropagation();
-    import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
-      fn.handlePlayQueueAdd({
-        byItemType: {
-          id: itemData.id,
-          type: itemType,
-        },
-        play: playType || playButtonBehavior,
-      });
+    handlePlayQueueAdd({
+      byItemType: {
+        id: itemData.id,
+        type: itemType,
+      },
+      play: playType || playButtonBehavior,
     });
   };
 
@@ -192,5 +198,3 @@ export const CardControls = ({ itemData, itemType }: { itemData: any; itemType:
     </GridCardControlsContainer>
   );
 };
-
-export default CardControls;