ui tweaks

xvvvyz · Jul 14, 2024 · 3cec2a8 · 3cec2a8
1 parent 01845a6
commit 3cec2a8
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 41 deletions.
diff --git a/app/_components/event-comment.tsx b/app/_components/event-comment.tsx
@@ -84,7 +84,7 @@ const EventComment = ({
               </DropdownMenu>
             )}
         </div>
-        <DirtyHtml className={twMerge('mt-1', clamp && 'line-clamp-5')}>
+        <DirtyHtml className={twMerge(clamp && 'line-clamp-5')}>
           {content}
         </DirtyHtml>
       </div>

diff --git a/app/_components/session-form.tsx b/app/_components/session-form.tsx
@@ -83,7 +83,7 @@ const SessionForm = ({
   const [isTransitioning, startTransition] = useTransition();
   const [ogScheduledFor, setOgScheduledFor] = useState<string | null>(null);
   const [scheduleModal, toggleScheduleModal] = useToggle(false);
-  const currentOrder = (isDuplicate ? order : session?.order ?? order) ?? 0;
+  const currentOrder = (isDuplicate ? order : (session?.order ?? order)) ?? 0;
   const modules = forceArray(session?.modules);
   const router = useRouter();
   const sensors = useSensors(useSensor(PointerSensor));
@@ -99,7 +99,7 @@ const SessionForm = ({
     cacheKey,
     {
       defaultValues: {
-        draft: isDuplicate ? true : session?.draft ?? true,
+        draft: isDuplicate ? true : (session?.draft ?? true),
         modules: modules.length
           ? modules.map((module) => ({
               content: module.content ?? '',

diff --git a/app/_components/session-page.tsx b/app/_components/session-page.tsx
@@ -80,7 +80,7 @@ const SessionPage = async ({
         ) : (
           <>
             {session.title && (
-              <p className="mx-auto max-w-xs px-4 text-center leading-snug">
+              <p className="mx-auto max-w-xs px-4 text-center">
                 {session.title}
               </p>
             )}

diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
@@ -1,10 +1,10 @@
 import Avatar from '@/_components/avatar';
-import BackIconButton from '@/_components/back-icon-button';
 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';
 import TimelineEvents from '@/_components/timeline-events';
@@ -60,7 +60,8 @@ const SubjectPage = async ({
       <div className="mt-16 flex h-8 items-center justify-between gap-6">
         <div className="flex min-w-0 items-center gap-6">
           {!isPublic && (
-            <BackIconButton
+            <IconButton
+              href="/subjects"
               icon={<ArrowLeftIcon className="relative -left-[0.16em] w-7" />}
               label="Back"
             />

diff --git a/app/_components/timeline-event-card.tsx b/app/_components/timeline-event-card.tsx
@@ -50,7 +50,7 @@ const TimelineEventCard = ({
                 formatter="time"
               />
               <ArrowUpRightIcon
-                className={twMerge('-mt-1.5 w-5', isTeamMember && 'invisible')}
+                className={twMerge('-mt-0.5 w-5', isTeamMember && 'invisible')}
               />
             </div>
           </div>

diff --git a/app/_components/timeline-session-card.tsx b/app/_components/timeline-session-card.tsx
@@ -43,15 +43,15 @@ const TimelineSessionCard = ({
         variant="link"
       >
         <div>
-          <div className="flex items-baseline justify-between gap-4">
+          <div className="flex justify-between gap-4">
             <div className="min-w-0">
               <div className="truncate">
                 {lastEventType?.session?.mission?.name}
               </div>
             </div>
-            <ArrowUpRightIcon className="-mt-1.5 w-5 shrink-0" />
+            <ArrowUpRightIcon className="w-5 shrink-0" />
           </div>
-          <div className="pb-0.5 text-fg-4 truncate">
+          <div className="truncate text-fg-4">
             Session {sessionNumber}
             {lastEventType?.session?.title
               ? `: ${lastEventType.session.title}`
@@ -84,7 +84,7 @@ const TimelineSessionCard = ({
                     />
                     <ArrowUpRightIcon
                       className={twMerge(
-                        '-mt-1.5 w-5',
+                        '-mt-0.5 w-5',
                         isTeamMember && 'invisible',
                       )}
                     />

diff --git a/app/_components/training-plans.tsx b/app/_components/training-plans.tsx
@@ -29,7 +29,7 @@ const TrainingPlans = async ({ isTeamMember, subjectId }: MissionsProps) => {
       >
         <Button
           className={twMerge(
-            'm-0 w-full items-baseline gap-4 px-4 py-3 leading-snug',
+            'm-0 w-full min-w-0 gap-4 px-4 py-3 leading-snug',
             isTeamMember && 'pr-0',
           )}
           href={
@@ -40,17 +40,20 @@ const TrainingPlans = async ({ isTeamMember, subjectId }: MissionsProps) => {
           scroll={false}
           variant="link"
         >
-          {mission.name}
-          {!isTeamMember && (
-            <div className="ml-auto flex shrink-0 items-center gap-4">
-              {activeSession && (
-                <span className="smallcaps text-fg-4">
-                  Session {activeSession.order + 1}
-                </span>
-              )}
-              {!isTeamMember && <ArrowUpRightIcon className="w-5" />}
+          <div className="w-full min-w-0">
+            <div className="flex w-full justify-between gap-4">
+              <div className="min-w-0">
+                <div className="truncate">{mission.name}</div>
+              </div>
+              {!isTeamMember && <ArrowUpRightIcon className="w-5 shrink-0" />}
             </div>
-          )}
+            {!isTeamMember && activeSession && (
+              <div className="truncate text-fg-4">
+                Session {activeSession.order + 1}
+                {activeSession.title ? `: ${activeSession.title}` : ''}
+              </div>
+            )}
+          </div>
         </Button>
         {isTeamMember && (
           <TrainingPlanMenu missionId={mission.id} subjectId={subjectId} />

diff --git a/app/_queries/list-subject-training-plans.ts b/app/_queries/list-subject-training-plans.ts
@@ -4,7 +4,7 @@ const listSubjectTrainingPlans = (subjectId: string) =>
   createServerSupabaseClient()
     .from('missions')
     .select(
-      'id, name, sessions(id, modules:event_types(event:events(id)), order)',
+      'id, name, sessions(id, modules:event_types(event:events(id)), order, title)',
     )
     .eq('subject_id', subjectId)
     .eq('archived', false)

diff --git a/app/_utilities/format-event-filters.ts b/app/_utilities/format-event-filters.ts
@@ -12,9 +12,9 @@ const formatEventFilters = ({
 }) => ({
   endDate: add24Hours(parseShortIso(to ?? from)),
   from: 0,
-  pageSize: 25,
+  pageSize: 15,
   startDate: parseShortIso(from),
-  to: limit ? Number(limit) : 24,
+  to: limit ? Number(limit) : 14,
 });
 
 export default formatEventFilters;
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -30,21 +30,21 @@
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.44.3",
     "@tailwindcss/typography": "^0.5.13",
-    "@tiptap/extension-bold": "^2.4.0",
-    "@tiptap/extension-bullet-list": "^2.4.0",
-    "@tiptap/extension-document": "^2.4.0",
-    "@tiptap/extension-history": "^2.4.0",
-    "@tiptap/extension-italic": "^2.4.0",
-    "@tiptap/extension-link": "^2.4.0",
-    "@tiptap/extension-list-item": "^2.4.0",
-    "@tiptap/extension-ordered-list": "^2.4.0",
-    "@tiptap/extension-paragraph": "^2.4.0",
-    "@tiptap/extension-placeholder": "^2.4.0",
-    "@tiptap/extension-text": "^2.4.0",
-    "@tiptap/extension-typography": "^2.4.0",
-    "@tiptap/extension-underline": "^2.4.0",
-    "@tiptap/extension-youtube": "^2.4.0",
-    "@tiptap/react": "^2.4.0",
+    "@tiptap/extension-bold": "^2.5.0",
+    "@tiptap/extension-bullet-list": "^2.5.0",
+    "@tiptap/extension-document": "^2.5.0",
+    "@tiptap/extension-history": "^2.5.0",
+    "@tiptap/extension-italic": "^2.5.0",
+    "@tiptap/extension-link": "^2.5.0",
+    "@tiptap/extension-list-item": "^2.5.0",
+    "@tiptap/extension-ordered-list": "^2.5.0",
+    "@tiptap/extension-paragraph": "^2.5.0",
+    "@tiptap/extension-placeholder": "^2.5.0",
+    "@tiptap/extension-text": "^2.5.0",
+    "@tiptap/extension-typography": "^2.5.0",
+    "@tiptap/extension-underline": "^2.5.0",
+    "@tiptap/extension-youtube": "^2.5.0",
+    "@tiptap/react": "^2.5.0",
     "@types/humanize-duration": "^3.27.4",
     "@types/lodash": "^4.17.6",
     "@types/react": "^18.3.3",

diff --git a/tailwind.css b/tailwind.css
@@ -57,7 +57,7 @@
 
   /* hack to style tip tap youtube videos */
   div[data-youtube-video] > iframe {
-    @apply aspect-video h-auto w-full rounded;
+    @apply my-1.5 aspect-video h-auto w-full rounded;
   }
 
   /* hack to style observable plot tooltip */