(wip) Playlist

components/buttons/filterButton.tsx

@@ -6,7 +6,7 @@ import React, { useContext } from 'react';
 import { toast } from 'react-hot-toast';
 
 interface FilterButtonProps {
-  element: JSX.Element | string;
+  element: React.ReactNode;
   first?: boolean;
   last?: boolean;
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;

components/cards/card.tsx

@@ -4,7 +4,7 @@ import StyledTooltip from '../page/styledTooltip';
 interface CardProps {
   children: React.ReactNode;
   id: string;
-  title: JSX.Element | string;
+  title: React.ReactNode;
   tooltip?: string;
 }
 

components/cards/playLaterToggleButton.tsx

@@ -0,0 +1,103 @@
+import { AppContext } from '@root/contexts/appContext';
+import isPro from '@root/helpers/isPro';
+import { EnrichedLevel } from '@root/models/db/level';
+import Link from 'next/link';
+import React, { useContext, useState } from 'react';
+import toast from 'react-hot-toast';
+import StyledTooltip from '../page/styledTooltip';
+
+interface PlayLaterToggleButtonProps {
+  className?: string;
+  level: EnrichedLevel;
+}
+
+export function PlayLaterToggleButton({ className, level }: PlayLaterToggleButtonProps) {
+  const { mutatePlayLater, playLater, user } = useContext(AppContext);
+  const isInPlayLater = !!(playLater && playLater[level._id.toString()]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (!user || !isPro(user) || !playLater) {
+    return null;
+  }
+
+  const boldedLevelName = <span className='font-bold'>{level.name}</span>;
+  const fetchFunc = async (remove: boolean) => {
+    setIsLoading(true);
+    toast.dismiss();
+    toast.loading(remove ? 'Removing...' : 'Adding...', {
+      position: 'bottom-center',
+    });
+
+    const res = await fetch('/api/play-later/', {
+      method: remove ? 'DELETE' : 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id: level._id.toString(),
+      }),
+    });
+
+    toast.dismiss();
+
+    if (res.ok) {
+      const message = (
+        <div className='flex flex-col items-center w-92 max-w-full text-center'>
+          <span>{remove ? ['Removed ', boldedLevelName, ' from'] : ['Added ', boldedLevelName, ' to']} <Link className='underline' href={`/collection/${user.name}/play-later`}>Play Later</Link></span>
+          <button className='text-sm underline' onClick={() => fetchFunc(!remove)}>Undo</button>
+        </div>
+      );
+
+      toast.success(message, {
+        duration: 5000,
+        position: 'bottom-center',
+        icon: remove ? '➖' : '➕',
+      });
+      mutatePlayLater();
+    } else {
+      let resp;
+
+      try {
+        resp = await res.json();
+      } catch (e) {
+        console.error(e);
+      }
+
+      toast.error(resp?.error || 'Could not update Play Later', {
+        duration: 5000,
+        position: 'bottom-center',
+      });
+    }
+
+    setIsLoading(false);
+  };
+
+  const id = `play-later-btn-tooltip-${level._id.toString()}`;
+
+  return <>
+    <button
+      className={className}
+      data-tooltip-content={isInPlayLater ? 'Remove from Play Later' : 'Add to Play Later'}
+      data-tooltip-id={id}
+      disabled={isLoading}
+      onClick={async (e) => {
+        e.preventDefault();
+        fetchFunc(isInPlayLater);
+      }}
+      style={{
+        color: 'var(--color)',
+      }}
+    >
+      {isInPlayLater ?
+        <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-6 h-6'>
+          <path strokeLinecap='round' strokeLinejoin='round' d='M19.5 12h-15' />
+        </svg>
+        :
+        <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-6 h-6'>
+          <path strokeLinecap='round' strokeLinejoin='round' d='M12 4.5v15m7.5-7.5h-15' />
+        </svg>
+      }
+    </button>
+    <StyledTooltip id={id} />
+  </>;
+}

components/cards/selectCard.tsx

@@ -1,9 +1,12 @@
+import { AppContext } from '@root/contexts/appContext';
 import classNames from 'classnames';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Dimensions from '../../constants/dimensions';
 import getPngDataClient from '../../helpers/getPngDataClient';
 import SelectOption from '../../models/selectOption';
+import SaveLevelToModal from '../modal/saveLevelToModal';
+import { PlayLaterToggleButton } from './playLaterToggleButton';
 import styles from './SelectCard.module.css';
 import SelectCardContent from './selectCardContent';
 
@@ -14,6 +17,8 @@ interface SelectCardProps {
 
 export default function SelectCard({ option, prefetch }: SelectCardProps) {
   const [backgroundImage, setBackgroundImage] = useState<string>();
+  const [isSaveLevelToModalOpen, setIsSaveLevelToModalOpen] = useState(false);
+  const { user } = useContext(AppContext);
 
   useEffect(() => {
     if (option.level) {
@@ -26,10 +31,10 @@ export default function SelectCard({ option, prefetch }: SelectCardProps) {
 
   return (
     <div
-      className='p-3 overflow-hidden relative inline-block align-middle'
+      className='p-3 overflow-hidden relative inline-block align-middle select-card max-w-full'
       key={`select-card-${option.id}`}
     >
-      <div className='wrapper rounded-md overflow-hidden relative'
+      <div className='wrapper rounded-md overflow-hidden relative max-w-full'
         style={{
           height: option.height ?? Dimensions.OptionHeight,
           width: option.width ?? Dimensions.OptionWidth,
@@ -48,7 +53,7 @@ export default function SelectCard({ option, prefetch }: SelectCardProps) {
         {option.href ?
           <Link
             className={classNames(
-              'border-2 rounded-md items-center flex justify-center text-center',
+              'border-2 rounded-md items-center flex justify-center text-center max-w-full',
               !option.disabled ? styles['card-border'] : undefined,
               { 'text-xl': !option.stats },
             )}
@@ -86,6 +91,19 @@ export default function SelectCard({ option, prefetch }: SelectCardProps) {
             <SelectCardContent option={option} />
           </button>
         }
+        {option.level && user && <>
+          <PlayLaterToggleButton className='absolute bottom-2 left-2 h-6 select-card-button' level={option.level} />
+          <button className='absolute bottom-2 right-2 select-card-button' onClick={() => setIsSaveLevelToModalOpen(true)}>
+            <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-6 h-6' style={{ minWidth: 24, minHeight: 24 }}>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z' />
+            </svg>
+          </button>
+          <SaveLevelToModal
+            closeModal={() => setIsSaveLevelToModalOpen(false)}
+            isOpen={isSaveLevelToModalOpen}
+            level={option.level}
+          />
+        </>}
       </div>
     </div>
   );

components/cards/selectCardContent.tsx

@@ -12,7 +12,7 @@ interface SelectCardContentProps {
 export default function SelectCardContent({ option }: SelectCardContentProps) {
   return (<>
     <div
-      className='font-bold break-words p-2'
+      className='font-bold break-words p-2 max-w-full'
       style={{
         width: option.width ?? Dimensions.OptionWidth,
       }}
@@ -33,11 +33,11 @@ export default function SelectCardContent({ option }: SelectCardContentProps) {
             />
           </div>
         }
-        {option.stats && <div className='pt-1 italic'>{option.stats.getText()}</div>}
+        {!option.hideStats && option.stats && <div className='pt-1 italic'>{option.stats.getText()}</div>}
       </div>
     </div>
     {option.stats?.isSolved() &&
-      <div className='absolute bottom-0 right-0'>
+      <div className='absolute top-0 right-0'>
         <Solved />
       </div>
     }

components/formatted/formattedDifficulty.tsx

@@ -153,7 +153,7 @@ export default function FormattedDifficulty({ difficultyEstimate, id, uniqueUser
   return (
     <div className='flex justify-center difficultyText'>
       <div data-tooltip-id={`difficulty-${id}`} data-tooltip-content={tooltip}>
-        <span className='text-md pr-1'>{difficulty.emoji}</span>
+        <span className='pr-1'>{difficulty.emoji}</span>
         <span className='italic pr-1' style={{
           color: color,
           textShadow: '1px 1px black',

components/header/dropdown.tsx

@@ -18,7 +18,7 @@ import DismissToast from '../toasts/dismissToast';
 import MusicIcon from './musicIcon';
 
 export default function Dropdown() {
-  const { forceUpdate, mutateUser, setShouldAttemptAuth, user, userLoading } = useContext(AppContext);
+  const { forceUpdate, mutateUser, playLater, setShouldAttemptAuth, user, userLoading } = useContext(AppContext);
   const [isMusicModalOpen, setIsMusicModalOpen] = useState(false);
   const [isThemeOpen, setIsThemeOpen] = useState(false);
   const router = useRouter();
@@ -60,6 +60,10 @@ export default function Dropdown() {
 
   const isLoggedIn = !userLoading && user;
 
+  function Divider() {
+    return <div className='opacity-30 m-1 h-px bg-4' />;
+  }
+
   return (<>
     <Menu>
       <Menu.Button id='dropdownMenuBtn' aria-label='dropdown menu'>
@@ -100,15 +104,10 @@ export default function Dropdown() {
                   <span className='font-bold'>{user.score}</span>
                   <StyledTooltip id='levels-solved-dropdown' />
                 </div>
-                <div
-                  className='opacity-30 m-1 h-px'
-                  style={{
-                    backgroundColor: 'var(--bg-color-4)',
-                  }}
-                />
+                <Divider />
               </div>
             }
-            {isLoggedIn && !isPro(user) &&
+            {isLoggedIn && !isPro(user) && <>
               <Menu.Item>
                 {({ active }) => (
                   <Link href='/settings/pro' passHref>
@@ -124,7 +123,8 @@ export default function Dropdown() {
                   </Link>
                 )}
               </Menu.Item>
-            }
+              <Divider />
+            </>}
             <div className='block sm:hidden'>
               <Menu.Item>
                 {({ active }) => (
@@ -162,6 +162,51 @@ export default function Dropdown() {
                   </Link>
                 )}
               </Menu.Item>
+              {isPro(user) &&
+                <Menu.Item>
+                  {({ active }) => (
+                    <Link
+                      href={`/collection/${user.name}/play-later`}
+                      onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                        if (!playLater || Object.keys(playLater).length === 0) {
+                          toast.success('Add a level to your Play Later collection first!', { icon: '⚠️', duration: 3000 });
+                          e.preventDefault();
+                        }
+                      }}
+                    >
+                      <div
+                        className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
+                        style={{
+                          backgroundColor: active ? 'var(--bg-color-3)' : undefined,
+                        }}
+                      >
+                        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' className='w-5 h-5' viewBox='0 0 16 16'>
+                          <path d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z' />
+                          <path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z' />
+                        </svg>
+                        Play Later
+                      </div>
+                    </Link>
+                  )}
+                </Menu.Item>
+              }
+              <Menu.Item>
+                {({ active }) => (
+                  <Link href={`${getProfileSlug(user)}/collections`} passHref>
+                    <div
+                      className='flex w-full items-center rounded-md cursor-pointer px-3 py-2 gap-3'
+                      style={{
+                        backgroundColor: active ? 'var(--bg-color-3)' : undefined,
+                      }}
+                    >
+                      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='w-5 h-5'>
+                        <path strokeLinecap='round' strokeLinejoin='round' d='M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z' />
+                      </svg>
+                      Collections
+                    </div>
+                  </Link>
+                )}
+              </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
                   <Link href={getProfileSlug(user)} passHref>
@@ -179,12 +224,7 @@ export default function Dropdown() {
                   </Link>
                 )}
               </Menu.Item>
-              <div
-                className='opacity-30 m-1 h-px'
-                style={{
-                  backgroundColor: 'var(--bg-color-4)',
-                }}
-              />
+              <Divider />
             </>}
             <Menu.Item>
               {({ active }) => (
@@ -243,12 +283,7 @@ export default function Dropdown() {
                   </Link>
                 )}
               </Menu.Item>
-              <div
-                className='opacity-30 m-1 h-px'
-                style={{
-                  backgroundColor: 'var(--bg-color-4)',
-                }}
-              />
+              <Divider />
               <Menu.Item>
                 {({ active }) => (
                   <div

components/homepage/recommendedLevel.tsx

@@ -12,7 +12,7 @@ interface RecommendedLevelProps {
   id: string;
   level?: EnrichedLevel | null;
   onClick?: (option: SelectOption) => void;
-  title: JSX.Element | string;
+  title: React.ReactNode;
   tooltip?: string;
 }
 

components/homepage/tutorial.tsx

@@ -532,7 +532,7 @@ export default function Tutorial() {
               }}>
                 Now <Link href='/signup' className='font-bold text-blue-500 hover:text-blue-400'>sign up</Link> for free to explore the world of Pathology!
               </div>
-              <div className='text-md fadeIn' style={{
+              <div className='fadeIn' style={{
                 pointerEvents: 'all',
                 animationDelay: '2.5s'
               }}>