session menu refactor and various cleanup

xvvvyz · Aug 22, 2024 · 1b9ad4a · 1b9ad4a
1 parent 3f294cb
commit 1b9ad4a
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 122 deletions.
diff --git a/app/_components/dropdown-menu.tsx b/app/_components/dropdown-menu.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import ButtonPrimitive from '@/_components/button';
-import ForwardSearchParamsButtonPrimitive from '@/_components/forward-search-params-button';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';
@@ -36,17 +35,6 @@ const Content = React.forwardRef<
 
 Content.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const ForwardSearchParamsButton = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ForwardSearchParamsButtonPrimitive>
->((props, ref) => (
-  <Item asChild ref={ref}>
-    <ForwardSearchParamsButtonPrimitive colorScheme="transparent" {...props} />
-  </Item>
-));
-
-ForwardSearchParamsButton.displayName = 'ForwardSearchParamsButton';
-
 const Item = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
@@ -110,14 +98,4 @@ const Trigger = React.forwardRef<
 
 Trigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
 
-export {
-  Button,
-  Content,
-  ForwardSearchParamsButton,
-  Item,
-  Label,
-  Portal,
-  Root,
-  Separator,
-  Trigger,
-};
+export { Button, Content, Item, Label, Portal, Root, Separator, Trigger };
diff --git a/app/_components/forward-search-params-button.tsx b/app/_components/forward-search-params-button.tsx
diff --git a/app/_components/forward-search-params-icon-button.tsx b/app/_components/forward-search-params-icon-button.tsx
diff --git a/app/_components/module-card.tsx b/app/_components/module-card.tsx
@@ -1,6 +1,5 @@
 import Avatar from '@/_components/avatar';
 import CollapsibleSection from '@/_components/collapsible-section';
-import DateTime from '@/_components/date-time';
 import DirtyHtml from '@/_components/dirty-html';
 import EventCommentForm from '@/_components/event-comment-form';
 import EventForm from '@/_components/event-form';
@@ -49,16 +48,18 @@ const ModuleCard = ({
             {eventType.name ? `: ${eventType.name}` : ''}
           </div>
           {event && (
-            <div className="smallcaps flex items-center gap-2 pb-0.5 pt-1.5 text-fg-4">
-              <DateTime date={event.created_at} formatter="date-time" /> &mdash;
+            <div className="smallcaps flex items-center gap-2 whitespace-nowrap pb-0.5 pt-1.5 text-fg-4">
+              <div>Completed by</div>
               <Avatar
                 className="-my-[0.15rem] size-5"
                 file={event.profile?.image_uri}
                 id={event.profile?.id}
               />
-              <span className="truncate">
-                {event.profile?.first_name} {event.profile?.last_name}
-              </span>
+              <div className="min-w-0">
+                <div className="truncate">
+                  {event.profile?.first_name} {event.profile?.last_name}
+                </div>
+              </div>
             </div>
           )}
         </div>

diff --git a/app/_components/session-form.tsx b/app/_components/session-form.tsx
@@ -152,7 +152,7 @@ const SessionForm = ({
         menu={
           <SessionMenu
             highestPublishedOrder={highestPublishedOrder}
-            isDraft={session ? session.draft : true}
+            isDraft={session && !isDuplicate ? session.draft : true}
             isDuplicate={isDuplicate}
             isEdit
             missionId={mission.id}

diff --git a/app/_components/session-layout.tsx b/app/_components/session-layout.tsx
@@ -1,4 +1,4 @@
-import ForwardSearchParamsIconButton from '@/_components/forward-search-params-icon-button';
+import IconButton from '@/_components/icon-button';
 import { GetTrainingPlanWithSessionsData } from '@/_queries/get-training-plan-with-sessions';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
@@ -62,7 +62,7 @@ const SessionLayout = ({
   return (
     <>
       <nav className="flex w-full items-center justify-between px-4 sm:px-8">
-        <ForwardSearchParamsIconButton
+        <IconButton
           disabled={!previousSessionId}
           href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${previousSessionId}${editSuffix}`}
           icon={<ChevronLeftIcon className="relative left-1 w-7" />}
@@ -80,7 +80,7 @@ const SessionLayout = ({
           )}
         </div>
         {isEditOrCreate && !nextSessionId ? (
-          <ForwardSearchParamsIconButton
+          <IconButton
             disabled={isCreate}
             href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/create/${nextSessionOrder}`}
             icon={<PlusIcon className="relative right-1 w-7" />}
@@ -89,7 +89,7 @@ const SessionLayout = ({
             scroll={false}
           />
         ) : (
-          <ForwardSearchParamsIconButton
+          <IconButton
             disabled={!nextSessionId}
             href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${nextSessionId}${editSuffix}`}
             icon={<ChevronRightIcon className="relative right-1 w-7" />}

diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
@@ -65,30 +65,27 @@ const SessionMenu = ({
           className={isView || isEdit ? '-mr-[3.7rem]' : 'mr-2'}
         >
           {isEdit && !isDraft && (
-            <DropdownMenu.ForwardSearchParamsButton
+            <DropdownMenu.Button
               href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}`}
-              replace
               scroll={false}
             >
               <EyeIcon className="w-5 text-fg-4" />
               View
-            </DropdownMenu.ForwardSearchParamsButton>
+            </DropdownMenu.Button>
           )}
           {(isList || isView) && (
-            <DropdownMenu.ForwardSearchParamsButton
-              href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}/edit${isList ? '?fromSessions=1' : ''}`}
-              replace={isView}
+            <DropdownMenu.Button
+              href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}/edit`}
               scroll={false}
             >
               <PencilIcon className="w-5 text-fg-4" />
               Edit
-            </DropdownMenu.ForwardSearchParamsButton>
+            </DropdownMenu.Button>
           )}
           {sessionId && !isDuplicate ? (
             <>
               <DropdownMenu.Button
                 href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${nextSessionOrder}/from-session/${sessionId}`}
-                replace={isView}
                 scroll={false}
               >
                 <DocumentDuplicateIcon className="w-5 text-fg-4" />
@@ -159,29 +156,33 @@ const SessionMenu = ({
                     sessionId,
                   });
 
-                  if (isView || isEdit) router.back();
+                  if (!isList) {
+                    router.replace(
+                      `/subjects/${subjectId}/training-plans/${missionId}/sessions`,
+                    );
+                  }
                 }}
               />
             </>
           ) : (
             <>
-              <DropdownMenu.ForwardSearchParamsButton
+              <DropdownMenu.Button
                 disabled={order < 1}
                 href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${order - 1}${isDuplicate ? `/from-session/${sessionId}` : ''}`}
                 replace
                 scroll={false}
               >
                 <ArrowLeftIcon className="w-5 text-fg-4" />
                 Move left
-              </DropdownMenu.ForwardSearchParamsButton>
-              <DropdownMenu.ForwardSearchParamsButton
+              </DropdownMenu.Button>
+              <DropdownMenu.Button
                 href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${order + 1}${isDuplicate ? `/from-session/${sessionId}` : ''}`}
                 replace
                 scroll={false}
               >
                 <ArrowRightIcon className="w-5 text-fg-4" />
                 Move right
-              </DropdownMenu.ForwardSearchParamsButton>
+              </DropdownMenu.Button>
             </>
           )}
         </DropdownMenu.Content>

diff --git a/app/_components/session-page.tsx b/app/_components/session-page.tsx
@@ -1,3 +1,4 @@
+import Button from '@/_components/button';
 import DateTime from '@/_components/date-time';
 import Empty from '@/_components/empty';
 import * as Modal from '@/_components/modal';
@@ -6,7 +7,6 @@ import PageModalBackButton from '@/_components/page-modal-back-button';
 import PageModalHeader from '@/_components/page-modal-header';
 import SessionLayout from '@/_components/session-layout';
 import SessionMenu from '@/_components/session-menu';
-import ViewAllSessionsButton from '@/_components/view-all-sessions-button';
 import getCurrentUser from '@/_queries/get-current-user';
 import getPublicSessionWithDetails from '@/_queries/get-public-session-with-details';
 import getPublicSubject from '@/_queries/get-public-subject';
@@ -16,6 +16,7 @@ import getSubject from '@/_queries/get-subject';
 import getTrainingPlanWithSessions from '@/_queries/get-training-plan-with-sessions';
 import firstIfArray from '@/_utilities/first-if-array';
 import parseSessions from '@/_utilities/parse-sessions';
+import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
 import CalendarDaysIcon from '@heroicons/react/24/outline/CalendarDaysIcon';
 
 interface SessionPageProps {
@@ -45,6 +46,7 @@ const SessionPage = async ({
 
   if (!subject || !trainingPlan || !session) return null;
   const isTeamMember = !!user && subject.team_id === user.id;
+  const shareOrSubjects = isPublic ? 'share' : 'subjects';
 
   const {
     highestOrder,
@@ -75,11 +77,15 @@ const SessionPage = async ({
           )
         }
         subtitle={
-          <ViewAllSessionsButton
-            isPublic={isPublic}
-            missionId={missionId}
-            subjectId={subjectId}
-          />
+          <Button
+            className="pt-4"
+            href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions`}
+            scroll={false}
+            variant="link"
+          >
+            View all sessions
+            <ArrowUpRightIcon className="w-5" />
+          </Button>
         }
         title={trainingPlan.name}
       />

diff --git a/app/_components/sessions-page.tsx b/app/_components/sessions-page.tsx
@@ -109,7 +109,7 @@ const SessionsPage = async ({
               >
                 <Button
                   className="m-0 w-full min-w-0 justify-between gap-6 py-3 pl-4 pr-0 sm:pl-8"
-                  href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${session.id}/${session.draft ? 'edit' : ''}?fromSessions=1`}
+                  href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${session.id}/${session.draft ? 'edit' : ''}`}
                   scroll={false}
                   variant="link"
                 >
@@ -118,25 +118,29 @@ const SessionsPage = async ({
                       Session {session.order + 1}
                       {session.title && `: ${session.title}`}
                     </div>
-                    <div className="smallcaps pb-0.5 pt-1.5 text-fg-4">
+                    <div className="smallcaps flex gap-2 pb-0.5 pt-1.5 text-fg-4">
                       {session.draft ? (
                         'Draft'
                       ) : new Date(session.scheduled_for ?? '') > new Date() ? (
                         <>
                           <DateTime
                             date={session.scheduled_for ?? ''}
                             formatter="date-time"
-                          />{' '}
-                          &mdash; Scheduled
+                          />
+                          &middot;
+                          <div>Scheduled</div>
                         </>
                       ) : completedModules.length ? (
                         <>
                           <DateTime
                             date={latestCompletedEvent.created_at}
                             formatter="date-time"
-                          />{' '}
-                          &mdash; {completedModules.length} of{' '}
-                          {session.modules.length} completed
+                          />
+                          &middot;
+                          <div>
+                            {completedModules.length} of{' '}
+                            {session.modules.length} completed
+                          </div>
                         </>
                       ) : (
                         'Not started'

diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
@@ -3,7 +3,6 @@ import Button from '@/_components/button';
 import DirtyHtml from '@/_components/dirty-html';
 import Empty from '@/_components/empty';
 import EventTypes from '@/_components/event-types';
-import ForwardSearchParamsButton from '@/_components/forward-search-params-button';
 import IconButton from '@/_components/icon-button';
 import SubjectEventsDateFilter from '@/_components/subject-events-date-filter';
 import SubjectMenu from '@/_components/subject-menu';
@@ -172,15 +171,15 @@ const SubjectPage = async ({
       )}
       <div className="mt-16 flex gap-4">
         <SubjectEventsDateFilter />
-        <ForwardSearchParamsButton
+        <Button
           colorScheme="transparent"
           href={`/${shareOrSubjects}/${subjectId}/insights`}
           scroll={false}
           size="sm"
         >
           Insights
           <ArrowUpRightIcon className="-mr-0.5 w-5" />
-        </ForwardSearchParamsButton>
+        </Button>
       </div>
       {!!events?.length ? (
         <TimelineEvents

diff --git a/app/_components/timeline-event-card.tsx b/app/_components/timeline-event-card.tsx
@@ -55,8 +55,8 @@ const TimelineEventCard = ({
             </div>
           </div>
           <div className="smallcaps flex w-full items-center justify-between gap-4 pb-0.5 pt-1 text-fg-4">
-            <div className="flex min-w-0 items-center gap-2">
-              <div className="whitespace-nowrap">Recorded by</div>
+            <div className="flex min-w-0 items-center gap-2 whitespace-nowrap">
+              <div>Recorded by</div>
               <Avatar
                 className="-my-[0.15rem] size-5"
                 file={event.profile?.image_uri}

diff --git a/app/_components/timeline-session-card.tsx b/app/_components/timeline-session-card.tsx
@@ -96,8 +96,8 @@ const TimelineSessionCard = ({
                     </div>
                   </div>
                   <div className="smallcaps flex w-full items-center justify-between gap-4 pb-0.5 pt-1 text-fg-4">
-                    <div className="flex min-w-0 items-center gap-2">
-                      <div className="whitespace-nowrap">Completed by</div>
+                    <div className="flex min-w-0 items-center gap-2 whitespace-nowrap">
+                      <div>Completed by</div>
                       <Avatar
                         className="-my-[0.15rem] size-5"
                         file={event.profile?.image_uri}

diff --git a/app/_components/view-all-sessions-button.tsx b/app/_components/view-all-sessions-button.tsx