add training plan templates

app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/create/page.tsx

@@ -2,7 +2,9 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import TrainingPlanForm from '@/_components/training-plan-form';
 import TrainingPlanUseTemplateModal from '@/_components/training-plan-use-template-modal';
+import TemplateType from '@/_constants/enum-template-type';
 import getSubject from '@/_queries/get-subject';
+import listTemplates from '@/_queries/list-templates';
 
 interface PageProps {
   params: {
@@ -11,13 +13,23 @@ interface PageProps {
 }
 
 const Page = async ({ params: { subjectId } }: PageProps) => {
-  const { data: subject } = await getSubject(subjectId);
-  if (!subject) return null;
+  const [{ data: availableTrainingPlanTemplates }, { data: subject }] =
+    await Promise.all([
+      listTemplates({ type: TemplateType.TrainingPlan }),
+      getSubject(subjectId),
+    ]);
+
+  if (!availableTrainingPlanTemplates || !subject) return null;
 
   return (
     <Modal.Content>
       <PageModalHeader
-        right={<TrainingPlanUseTemplateModal />}
+        right={
+          <TrainingPlanUseTemplateModal
+            availableTrainingPlanTemplates={availableTrainingPlanTemplates}
+            subjectId={subjectId}
+          />
+        }
         title="New training plan"
       />
       <TrainingPlanForm subjectId={subjectId} />

app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx

@@ -35,7 +35,7 @@ const Page = async ({ params: { templateId } }: PageProps) => {
       <PageModalHeader title="Edit session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         subjects={subjects}
         template={template}
       />

app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx

@@ -35,7 +35,7 @@ const Page = async ({ params: { sessionId } }: PageProps) => {
       <PageModalHeader title="New session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         disableCache
         isDuplicate
         subjects={subjects}

app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx

@@ -24,7 +24,7 @@ const Page = async () => {
       <PageModalHeader title="New session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         subjects={subjects}
       />
     </Modal.Content>

app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/loading.tsx

@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;

app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/page.tsx

@@ -0,0 +1,55 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import getTemplate from '@/_queries/get-template';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+interface PageProps {
+  params: {
+    templateId: string;
+  };
+}
+
+const Page = async ({ params: { templateId } }: PageProps) => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+    { data: template },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+    getTemplate(templateId),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects ||
+    !template
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="Edit training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        subjects={subjects}
+        template={template}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;

app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/loading.tsx

@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;

app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/page.tsx

@@ -0,0 +1,69 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import getTrainingPlanForTemplate from '@/_queries/get-training-plan-for-template';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+interface PageProps {
+  params: {
+    trainingPlanId: string;
+  };
+}
+
+const Page = async ({ params: { trainingPlanId } }: PageProps) => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+    { data: trainingPlan },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+    getTrainingPlanForTemplate(trainingPlanId),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects ||
+    !trainingPlan
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        disableCache
+        isDuplicate
+        subjects={subjects}
+        template={{
+          data: {
+            sessions: trainingPlan.sessions.map((session) => ({
+              modules: session.modules.map((module) => ({
+                content: module.content,
+                inputIds: module.inputs.map((input) => input.id),
+                name: module.name,
+              })),
+              title: session.title,
+            })),
+          },
+          name: trainingPlan.name ?? '',
+        }}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;

app/(pages)/@modal/(layout)/templates/training-plans/create/loading.tsx

@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;

app/(pages)/@modal/(layout)/templates/training-plans/create/page.tsx

@@ -0,0 +1,44 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+const Page = async () => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        subjects={subjects}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;

app/_components/event-menu.tsx

@@ -29,7 +29,7 @@ const EventMenu = ({ className, eventId, isModal }: EventMenuProps) => {
               className,
             )}
           >
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>

app/_components/event-type-menu.tsx

@@ -28,8 +28,8 @@ const EventTypeMenu = ({
         {isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
-          <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+          <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>

app/_components/event-types.tsx

@@ -16,7 +16,10 @@ const EventTypes = async ({ isTeamMember, subjectId }: EventTypesProps) => {
   return (
     <ul className="overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1">
       {eventTypes.map((eventType) => (
-        <li className="flex items-stretch hover:bg-alpha-1" key={eventType.id}>
+        <li
+          className="flex items-stretch transition-colors hover:bg-alpha-1"
+          key={eventType.id}
+        >
           <Button
             className={twMerge(
               'm-0 flex w-full gap-4 px-4 py-3 leading-snug',

app/_components/filterable-inputs.tsx

@@ -72,7 +72,10 @@ const FilterableInputs = ({ inputs }: FilterableInputsProps) => {
       </div>
       <ul className="mx-4 overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1 empty:hidden">
         {filteredInputs.map((input) => (
-          <li className="flex items-stretch hover:bg-alpha-1" key={input.id}>
+          <li
+            className="flex items-stretch transition-colors hover:bg-alpha-1"
+            key={input.id}
+          >
             <Button
               className="m-0 w-full min-w-0 gap-6 px-4 py-3 pr-0 leading-snug"
               href={`/inputs/${input.id}`}

app/_components/filterable-templates.tsx

@@ -65,7 +65,10 @@ const FilterableInputs = ({ templates }: FilterableTemplatesProps) => {
       </div>
       <ul className="mx-4 overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1 empty:hidden">
         {filteredTemplates.map((template) => (
-          <li className="flex items-stretch hover:bg-alpha-1" key={template.id}>
+          <li
+            className="flex items-stretch transition-colors hover:bg-alpha-1"
+            key={template.id}
+          >
             <Button
               className="m-0 w-full min-w-0 gap-6 px-4 py-3 pr-0 leading-snug"
               href={`/templates/${TEMPLATE_TYPE_SLUGS[template.type]}/${template.id}`}

app/_components/input-menu.tsx

@@ -13,8 +13,8 @@ interface InputMenuProps {
 const InputMenu = ({ inputId }: InputMenuProps) => (
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
-      <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1">
+      <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+        <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>

app/_components/insight-menu.tsx

@@ -14,8 +14,8 @@ interface InsightMenuProps {
 const InsightMenu = ({ insightId, subjectId }: InsightMenuProps) => (
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
-      <div className="group flex items-center justify-center px-1.5 text-fg-3 hover:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1">
+      <div className="group flex items-center justify-center px-1.5 text-fg-3 transition-colors hover:text-fg-2">
+        <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>