add basic subject archive functionality

app/(pages)/(private)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx

@@ -28,6 +28,7 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
       <PageModalHeader title={eventType.name as string} />
       <EventCard
         eventType={eventType}
+        isArchived={subject.archived}
         isTeamMember={!!user && subject.team_id === user.id}
         subjectId={subjectId}
         user={user}

app/(pages)/(private)/subjects/(group)/@archived/loading.tsx

@@ -0,0 +1,3 @@
+const Loading = () => null;
+
+export default Loading;

app/(pages)/(private)/subjects/(group)/@archived/page.tsx

@@ -0,0 +1,15 @@
+import SubjectList from '@/_components/subject-list';
+import CollapsibleArchive from '@/_queries/collapsible-archive';
+import countArchivedSubjects from '@/_queries/count-archived-subjects';
+
+const Page = async () => {
+  const { count } = await countArchivedSubjects();
+  if (!count) return null;
+
+  return (
+    <CollapsibleArchive label="subjects">
+      <SubjectList archived />
+    </CollapsibleArchive>
+  );
+};
+export default Page;

app/(pages)/(private)/subjects/(group)/layout.tsx

@@ -2,18 +2,22 @@ import Button from '@/_components/button';
 import { ReactNode } from 'react';
 
 interface LayoutProps {
+  archived: ReactNode;
   children: ReactNode;
 }
 
-const Layout = ({ children }: LayoutProps) => (
+const Layout = async ({ archived, children }: LayoutProps) => (
   <>
     <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
       <h1 className="text-2xl">Subjects</h1>
       <Button href="/subjects/create" scroll={false} size="sm">
         Create subject
       </Button>
     </div>
-    {children}
+    <div className="space-y-4">
+      {children}
+      {archived}
+    </div>
   </>
 );
 

app/(pages)/(private)/subjects/(group)/page.tsx

@@ -1,110 +1,7 @@
-import Avatar from '@/_components/avatar';
-import Button from '@/_components/button';
-import Empty from '@/_components/empty';
-import SubjectMenu from '@/_components/subject-menu';
-import getCurrentUser from '@/_queries/get-current-user';
-import listSubjects, { ListSubjectsData } from '@/_queries/list-subjects';
-import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
-import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
-import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
+import SubjectList from '@/_components/subject-list';
 
 export const metadata = { title: 'Subjects' };
 
-const Page = async () => {
-  const [{ data: subjects }, user] = await Promise.all([
-    listSubjects(),
-    getCurrentUser(),
-  ]);
-
-  if (!subjects?.length) {
-    return (
-      <Empty className="mx-4">
-        <InformationCircleIcon className="w-7" />
-        Subjects can be dogs, cats, humans or
-        <br />
-        anything else you want to track.
-      </Empty>
-    );
-  }
-
-  const {
-    clientSubjects,
-    teamSubjects,
-  }: {
-    clientSubjects: NonNullable<ListSubjectsData>;
-    teamSubjects: NonNullable<ListSubjectsData>;
-  } = subjects.reduce(
-    (acc, subject) => {
-      if (!!user && subject.team_id === user.id) acc.teamSubjects.push(subject);
-      else acc.clientSubjects.push(subject);
-      return acc;
-    },
-    {
-      clientSubjects: [] as NonNullable<ListSubjectsData>,
-      teamSubjects: [] as NonNullable<ListSubjectsData>,
-    },
-  );
-
-  return (
-    <div className="space-y-4">
-      {!!teamSubjects.length && (
-        <ul className="mx-4 rounded border border-alpha-1 bg-bg-2 py-1">
-          {teamSubjects.map((subject) => (
-            <li
-              className="flex items-stretch hover:bg-alpha-1"
-              key={subject.id}
-            >
-              <Button
-                className="m-0 w-full gap-4 px-4 py-3 pr-0 leading-snug"
-                href={`/subjects/${subject.id}/events`}
-                variant="link"
-              >
-                <Avatar
-                  className="-my-0.5"
-                  file={subject.image_uri}
-                  key={subject.id}
-                  id={subject.id}
-                  size="sm"
-                />
-                {subject.name}
-              </Button>
-              <SubjectMenu
-                className="group flex h-full items-center justify-center px-2 text-fg-3 hover:text-fg-2"
-                itemsClassName="mr-2 mt-2"
-                subject={subject}
-              >
-                <div className="rounded-full p-2 group-hover:bg-alpha-1">
-                  <EllipsisVerticalIcon className="w-5" />
-                </div>
-              </SubjectMenu>
-            </li>
-          ))}
-        </ul>
-      )}
-      {!!clientSubjects.length && (
-        <ul className="mx-4 rounded border border-alpha-1 bg-bg-2 py-1">
-          {clientSubjects.map((subject) => (
-            <li key={subject.id}>
-              <Button
-                className="m-0 w-full gap-6 px-4 py-3 leading-snug hover:bg-alpha-1"
-                href={`/subjects/${subject.id}/events`}
-                variant="link"
-              >
-                <Avatar
-                  className="-my-0.5 -mr-2"
-                  file={subject.image_uri}
-                  id={subject.id}
-                  size="sm"
-                />
-                {subject.name}
-                <ArrowRightIcon className="ml-auto w-5 shrink-0" />
-              </Button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
+const Page = () => <SubjectList />;
 
 export default Page;

app/_components/event-card.tsx

@@ -20,6 +20,7 @@ interface EventCardProps {
     | NonNullable<GetEventTypeWithInputsAndOptionsData>
     | NonNullable<GetSessionWithDetailsData>['modules'][0];
   hideContent?: boolean;
+  isArchived?: boolean;
   isPublic?: boolean;
   isTeamMember?: boolean;
   mission?: NonNullable<GetMissionWithSessionsData>;
@@ -32,14 +33,14 @@ const EventCard = ({
   event,
   eventType,
   hideContent,
+  isArchived,
   isPublic,
   isTeamMember,
   mission,
   subjectId,
   user,
 }: EventCardProps) => {
   const comments = forceArray(event?.comments);
-  const showComments = event && (!isPublic || !!comments.length);
   const showDescription = !hideContent && !!eventType.content;
   const showModule = mission && typeof eventType.order === 'number';
 
@@ -73,25 +74,27 @@ const EventCard = ({
           )}
         </div>
       )}
-      {(!isPublic || event) && (
+      {(event || (!isPublic && !isArchived)) && (
         <EventForm
           disabled={disabled}
           event={event}
           eventType={eventType}
+          isArchived={isArchived}
           isMission={!!mission}
           isPublic={isPublic}
           subjectId={subjectId}
         />
       )}
-      {showComments && (
+      {event && (!!comments.length || (!isPublic && !isArchived)) && (
         <div className="flex flex-col gap-8 border-t border-alpha-1 px-4 py-8 sm:px-8">
           <EventComments
             comments={comments as EventCommentsProps['comments']}
+            isArchived={isArchived}
             isPublic={isPublic}
             isTeamMember={isTeamMember}
             userId={user?.id}
           />
-          {!isPublic && <EventCommentForm eventId={event.id} />}
+          {!isPublic && !isArchived && <EventCommentForm eventId={event.id} />}
         </div>
       )}
     </>

app/_components/event-comment.tsx

@@ -16,6 +16,7 @@ interface EventCommentProps {
   createdAt: string;
   id: string;
   profile: Database['public']['Tables']['profiles']['Row'];
+  isArchived?: boolean;
   isPublic?: boolean;
   isTeamMember?: boolean;
   userId?: string;
@@ -26,6 +27,7 @@ const EventComment = ({
   createdAt,
   id,
   profile,
+  isArchived,
   isPublic,
   isTeamMember,
   userId,
@@ -54,19 +56,21 @@ const EventComment = ({
               formatter="date-time"
             />
           </div>
-          {!isPublic && (userId === profile.id || isTeamMember) && (
-            <Menu className="-mr-2 -mt-2.5">
-              <Menu.Button className="rounded-full p-2 hover:bg-alpha-1">
-                <EllipsisVerticalIcon className="w-5" />
-              </Menu.Button>
-              <Menu.Items>
-                <Menu.Item onClick={() => toggleDeleteAlert(true)}>
-                  <TrashIcon className="w-5 text-fg-4" />
-                  Delete comment
-                </Menu.Item>
-              </Menu.Items>
-            </Menu>
-          )}
+          {!isPublic &&
+            !isArchived &&
+            (userId === profile.id || isTeamMember) && (
+              <Menu className="-mr-2 -mt-2.5">
+                <Menu.Button className="rounded-full p-2 hover:bg-alpha-1">
+                  <EllipsisVerticalIcon className="w-5" />
+                </Menu.Button>
+                <Menu.Items>
+                  <Menu.Item onClick={() => toggleDeleteAlert(true)}>
+                    <TrashIcon className="w-5 text-fg-4" />
+                    Delete comment
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            )}
         </div>
         <DirtyHtml className="mt-1">{content}</DirtyHtml>
       </div>

app/_components/event-comments.tsx

@@ -12,6 +12,7 @@ interface EventCommentsProps {
     id: string;
     profile: Database['public']['Tables']['profiles']['Row'];
   }>;
+  isArchived?: boolean;
   isPublic?: boolean;
   isTeamMember?: boolean;
   userId?: string;
@@ -20,6 +21,7 @@ interface EventCommentsProps {
 const EventComments = ({
   className,
   comments,
+  isArchived,
   isPublic,
   isTeamMember,
   userId,
@@ -33,6 +35,7 @@ const EventComments = ({
           content={content}
           createdAt={created_at}
           id={id}
+          isArchived={isArchived}
           isPublic={isPublic}
           isTeamMember={isTeamMember}
           key={id}

app/_components/event-form.tsx

@@ -34,6 +34,7 @@ interface EventFormProps {
     | NonNullable<NonNullable<GetEventData>['type']>
     | NonNullable<GetEventTypeWithInputsAndOptionsData>
     | NonNullable<GetSessionWithDetailsData>['modules'][0];
+  isArchived?: boolean;
   isMission?: boolean;
   isPublic?: boolean;
   subjectId: string;
@@ -55,6 +56,7 @@ const EventForm = ({
   disabled,
   event,
   eventType,
+  isArchived,
   isMission,
   isPublic,
   subjectId,
@@ -305,7 +307,7 @@ const EventForm = ({
           {form.formState.errors.root.message}
         </div>
       )}
-      {!isPublic && (
+      {!isPublic && !isArchived && (
         <div className="flex gap-4 border-t border-alpha-1 px-4 py-8 sm:px-8">
           {!event && !isMission && (
             <BackButton className="w-full" colorScheme="transparent">

app/_components/event-page.tsx

@@ -44,6 +44,7 @@ const EventPage = async ({ eventId, isPublic, subjectId }: EventPageProps) => {
       <EventCard
         event={event}
         eventType={event.type}
+        isArchived={subject.archived}
         isPublic={isPublic}
         isTeamMember={!!user && subject.team_id === user.id}
         subjectId={subjectId}

app/_components/event-type-form.tsx

@@ -121,7 +121,7 @@ const EventTypeForm = ({
                 onCreateOption={(value) =>
                   setCreateInputModal({
                     label: value,
-                    subjects_for: [{ subject_id: subjectId }],
+                    subjects: [{ id: subjectId }],
                   })
                 }
                 options={availableInputs as IOption[]}

app/_components/input-form.tsx

@@ -70,7 +70,7 @@ const InputForm = ({
         options: input?.options ?? [],
         settings: input?.settings as InputSettingsJson,
         subjects: forceArray(subjects).filter(({ id }) =>
-          input?.subjects_for?.some(({ subject_id }) => subject_id === id),
+          input?.subjects?.some((sf) => sf.id === id),
         ),
         type: INPUT_TYPE_OPTIONS.find(({ id }) => id === input?.type),
       },

app/_components/insights.tsx

@@ -13,6 +13,7 @@ import { twMerge } from 'tailwind-merge';
 interface InsightsProps {
   events: NonNullable<ListEventsData>;
   insights: NonNullable<ListInsightsData>;
+  isArchived?: boolean;
   isPublic?: boolean;
   isTeamMember: boolean;
   searchString: string;
@@ -23,6 +24,7 @@ interface InsightsProps {
 const Insights = ({
   events,
   insights,
+  isArchived,
   isPublic,
   isTeamMember,
   searchString,
@@ -34,6 +36,7 @@ const Insights = ({
 
   return insights.map((insight) => {
     const config = insight.config as InsightConfigJson;
+    const isReadOnly = !isTeamMember || isArchived;
 
     return (
       <article
@@ -45,18 +48,18 @@ const Insights = ({
             <Button
               className={twMerge(
                 'm-0 flex w-full gap-4 px-4 py-3 leading-snug',
-                isTeamMember && 'pr-0',
+                !isReadOnly && 'pr-0',
               )}
               href={`/${shareOrSubjects}/${subjectId}/insights/${insight.id}${searchString}`}
               scroll={false}
               variant="link"
             >
               {insight.name}
-              {!isTeamMember && (
+              {isReadOnly && (
                 <ArrowUpRightIcon className="ml-auto w-5 shrink-0" />
               )}
             </Button>
-            {isTeamMember && (
+            {!isReadOnly && (
               <InsightCardMenu insightId={insight.id} subjectId={subjectId} />
             )}
           </div>