Apply Review Suggestions

- also remove pointless transition all for ratings

src/components/Collection/Filter/Criteria.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { mdiCircleEditOutline, mdiMinusCircleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 
@@ -44,8 +43,6 @@ const ParameterList = ({ expression, value }: { expression: string, value: strin
 
 const Criteria = ({ criteria, parameterExists, transformedParameter, type }: Props) => {
   const dispatch = useDispatch();
-  const location = useLocation();
-  const navigate = useNavigate();
   const [showModal, setShowModal] = useState(false);
 
   const openModal = useEventCallback(() => {
@@ -61,14 +58,8 @@ const Criteria = ({ criteria, parameterExists, transformedParameter, type }: Pro
   });
 
   useEffect(() => {
-    if (parameterExists) {
-      navigate('/webui/collection', { replace: true, state: { isFilterLink: false } });
-      return;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    if (!location.state?.isFilterLink) setShowModal(true);
-    // locate/navigate are only used to check/clear the tag link state, adding it to the deps would cause them to loop
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (parameterExists) return;
+    setShowModal(true);
   }, [parameterExists]);
 
   const Modal = useMemo(() => getModalComponent(type), [type]);

src/components/Collection/ListViewItem.tsx

@@ -20,7 +20,7 @@ import { listItemSize } from '@/components/Collection/constants';
 import Button from '@/components/Input/Button';
 import { useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
-import { setFilterTag } from '@/core/slices/collection';
+import { resetFilter, setFilterTag } from '@/core/slices/collection';
 import { setGroupId } from '@/core/slices/modals/editGroup';
 import { setSeriesId } from '@/core/slices/modals/editSeries';
 import { dayjs, formatThousand } from '@/core/util';
@@ -52,10 +52,10 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const handleClick = useEventCallback(() => {
-    navigate('/webui/collection', { state: { isFilterLink: true } });
-    addFilterCriteriaToStore('HasTag').then(() => {
-      dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
-    }).catch(console.error);
+    dispatch(resetFilter());
+    dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
+    addFilterCriteriaToStore('HasTag').catch(console.error);
+    navigate('/webui/collection');
   });
 
   return (
@@ -65,10 +65,9 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
         type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary',
       )}
       onClick={handleClick}
-      tooltip="Filter Tag"
     >
       <Icon path={mdiTagTextOutline} size="1rem" />
-      <span className="text-panel-text">{text}</span>
+      <span className="text-panel-text transition-colors hover:text-panel-text-primary">{text}</span>
     </Button>
   );
 });

src/components/Collection/Series/SeriesRating.tsx

@@ -26,7 +26,7 @@ const StarIcon = React.memo(({ handleHover, handleVote, hovered, index }: StarIc
     onMouseEnter={handleHover}
     onClick={handleVote}
   >
-    <Icon path={hovered ? mdiStar : mdiStarOutline} size={1} className="transition-all" />
+    <Icon path={hovered ? mdiStar : mdiStarOutline} size={1} />
   </div>
 ));
 

src/components/Collection/SeriesTopPanel.tsx

@@ -15,7 +15,7 @@ import Button from '@/components/Input/Button';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useSeriesImagesQuery, useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
-import { setFilterTag } from '@/core/slices/collection';
+import { resetFilter, setFilterTag } from '@/core/slices/collection';
 import { addFilterCriteriaToStore } from '@/core/utilities/filter';
 import useEventCallback from '@/hooks/useEventCallback';
 
@@ -26,9 +26,10 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const handleClick = useEventCallback(() => {
+    dispatch(resetFilter());
     addFilterCriteriaToStore('HasTag').then(() => {
       dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
-      navigate('/webui/collection', { state: { isFilterLink: true } });
+      navigate('/webui/collection');
     }).catch(console.error);
   });
 
@@ -39,10 +40,9 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
         type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action',
       )}
       onClick={handleClick}
-      tooltip="Filter Tag"
     >
       <Icon path={mdiTagTextOutline} size="1.25rem" />
-      <span className="text-panel-text">{text}</span>
+      <span className="text-panel-text transition-colors hover:text-panel-text-primary">{text}</span>
     </Button>
   );
 });

src/components/Collection/TimelineSidebar.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { mdiLoading } from '@mdi/js';
-import { Icon } from '@mdi/react';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
@@ -43,19 +41,10 @@ const TimelineSidebar = ({ isFetching, series }: { isFetching: boolean, series:
   <ShokoPanel
     title="Timeline"
     className="sticky top-24 ml-6 !h-[calc(100vh-18rem)] w-[26.5rem]"
-    contentClassName="gap-y-6"
+    contentClassName="gap-y-3"
+    isFetching={isFetching}
   >
-    {isFetching
-      ? (
-        <div className="flex grow items-center justify-center text-panel-text-primary">
-          <Icon path={mdiLoading} size={3} spin />
-        </div>
-      )
-      : (
-        <div className="flex flex-col gap-y-3">
-          {series.map(item => <TimelineItem series={item} key={item.IDs.ID} />)}
-        </div>
-      )}
+    {series.map(item => <TimelineItem series={item} key={item.IDs.ID} />)}
   </ShokoPanel>
 );
 

src/pages/collection/Collection.tsx

@@ -232,7 +232,7 @@ function Collection() {
           className={cx(
             'flex items-start transition-all',
             (!isSeries && showFilterSidebar)
-              ? 'w-[28rem] opacity-100 '
+              ? 'w-[28rem] opacity-100'
               : 'w-0 opacity-0 overflow-hidden ',
           )}
         >

src/pages/dashboard/panels/CollectionStats.tsx

@@ -24,11 +24,11 @@ const Item = (
   });
 
   return (
-    /* eslint-disable no-nested-ternary */
     <div className="flex">
       <div className="grow">
         {title}
       </div>
+      {/* eslint-disable-next-line no-nested-ternary */}
       {link
         ? <Link to={link} className="font-semibold text-panel-text-primary">{value}</Link>
         : filter
@@ -42,7 +42,6 @@ const Item = (
         )
         : <div>{value}</div>}
     </div>
-    /* eslint-enable no-nested-ternary */
   );
 };