More Collab improvements

apps/next/src/components/navbar/left-nav.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import { Link } from "@quenti/components";
 import { outfit } from "@quenti/lib/chakra-theme";
 import { WEBSITE_URL } from "@quenti/lib/constants/url";
+import { EnabledFeature } from "@quenti/lib/feature";
 
 import {
   Button,
@@ -29,6 +30,7 @@ import {
 } from "@tabler/icons-react";
 
 import { Logo } from "../../../../../packages/components/logo";
+import { useFeature } from "../../hooks/use-feature";
 import { useMe } from "../../hooks/use-me";
 import { MenuOption } from "../menu-option";
 import { TeacherOnly } from "../teacher-only";
@@ -50,6 +52,7 @@ export const LeftNav: React.FC<LeftNavProps> = ({
 
   const [menuOpen, setMenuOpen] = React.useState(false);
 
+  const earlyClassAccess = useFeature(EnabledFeature.EarlyClassAccess);
   const menuBg = useColorModeValue("white", "gray.800");
 
   return (
@@ -95,7 +98,7 @@ export const LeftNav: React.FC<LeftNavProps> = ({
             Home
           </Button>
           <TeacherOnly>
-            {session.user?.isOrgEligible && (
+            {session.user?.isOrgEligible && !earlyClassAccess && (
               <UnboundOnly strict>
                 <Button
                   as={Link}

apps/next/src/hooks/use-assignment.tsx

@@ -13,7 +13,6 @@ export const useAssignment = () => {
     { classId: id, id: assignmentId },
     {
       enabled: !!id && !!assignmentId && !!session.data?.user,
-      refetchOnMount: false,
     },
   );
 };

apps/next/src/lib/og-images.tsx

@@ -46,6 +46,7 @@ export const EntityImage: React.FC<EntityImageProps> = ({
   description,
   numItems,
   user,
+  collaborators,
 }) => {
   const entityLabel = type == "Folder" ? "set" : "term";
 
@@ -56,7 +57,7 @@ export const EntityImage: React.FC<EntityImageProps> = ({
           <div
             style={{
               display: "flex",
-              width: "90%",
+              width: collaborators ? "100%" : "90%",
               overflow: "hidden",
               flexDirection: "column",
               minWidth: 0,
@@ -66,7 +67,11 @@ export const EntityImage: React.FC<EntityImageProps> = ({
               tw="text-gray-500 text-xl font-bold"
               style={{ fontFamily: "Open Sans" }}
             >
-              {type == "Folder" ? "Folder" : "Study set"}
+              {type == "Folder"
+                ? "Folder"
+                : collaborators
+                  ? "Collab"
+                  : "Study set"}
             </div>
             <h2
               tw="font-bold text-white text-7xl overflow-hidden pb-4"
@@ -79,34 +84,48 @@ export const EntityImage: React.FC<EntityImageProps> = ({
               {title}
             </h2>
           </div>
-          <img width="80" height="80" src={user.image} tw="rounded-full" />
+          {!collaborators && (
+            <img width="80" height="80" src={user.image} tw="rounded-full" />
+          )}
         </div>
-        <p
-          tw="text-gray-300 text-2xl h-46 overflow-hidden -mt-2"
-          style={{
-            whiteSpace: "pre-wrap",
-          }}
-        >
-          {description.length ? description : `Created by ${user.username}`}
-        </p>
-      </div>
-      <div tw="flex w-full justify-between items-end">
-        <div tw="flex items-end mt-6">
-          <h3
+        {!collaborators ? (
+          <p
+            tw="text-gray-300 text-2xl h-46 overflow-hidden -mt-2"
             style={{
-              fontFamily: "Outfit",
-              lineHeight: "14px",
+              whiteSpace: "pre-wrap",
             }}
-            tw="text-white text-5xl"
           >
-            {numItems}
-          </h3>
-          <div
-            tw="text-xl text-gray-100 ml-2"
-            style={{ fontFamily: "Open Sans" }}
-          >
-            {numItems != 1 ? `${entityLabel}s` : entityLabel}
+            {description.length ? description : `Created by ${user.username}`}
+          </p>
+        ) : (
+          <div tw="flex items-center">
+            {collaborators.avatars.map((avatar, i) => (
+              <img
+                key={i}
+                width="64"
+                height="64"
+                src={avatar}
+                tw="rounded-full mr-4"
+              />
+            ))}
+            <p
+              style={{
+                fontFamily: "Outfit",
+                color: "white",
+              }}
+              tw="text-4xl ml-2"
+            >
+              +{collaborators.total - 5}
+            </p>
           </div>
+        )}
+      </div>
+      <div tw="flex w-full justify-between items-end">
+        <div tw="flex">
+          <FooterLabel value={numItems} label={entityLabel} />
+          {collaborators && (
+            <FooterLabel value={collaborators.total} label="collaborator" />
+          )}
         </div>
         <div tw="flex items-center">
           <img
@@ -129,6 +148,30 @@ export const EntityImage: React.FC<EntityImageProps> = ({
   );
 };
 
+interface FooterLabelProps {
+  value: number;
+  label: string;
+}
+
+const FooterLabel = ({ value, label }: FooterLabelProps) => {
+  return (
+    <div tw="flex items-end mt-6 mr-10">
+      <h3
+        style={{
+          fontFamily: "Outfit",
+          lineHeight: "14px",
+        }}
+        tw="text-white text-5xl"
+      >
+        {value}
+      </h3>
+      <div tw="text-xl text-gray-100 ml-2" style={{ fontFamily: "Open Sans" }}>
+        {value != 1 ? `${label}s` : label}
+      </div>
+    </div>
+  );
+};
+
 // TODO: Add the inline verified badge https://github.com/vercel/satori/issues/532
 export const ProfileImage: React.FC<ProfileImageProps> = ({
   username,

apps/next/src/modules/classes/assignments/assignment-card.tsx

@@ -82,11 +82,41 @@ export const AssignmentCard = (props: AssignmentCardProps) => {
       transition="all ease-in-out 150ms"
       role="group"
     >
+      <HStack
+        display={{
+          base: "flex",
+          md: "none",
+        }}
+        mb="3"
+        ml="-6px"
+      >
+        <CollabIcon size={24} />
+        <Heading fontSize="lg">
+          <LinkOverlay
+            href={`/a/${props.classId}/${props.id}`}
+            as={Link}
+            _focus={{
+              outline: "none",
+            }}
+          >
+            {props.name}
+          </LinkOverlay>
+        </Heading>
+      </HStack>
       <HStack justifyContent="space-between">
         <HStack spacing="4">
-          <CollabIcon />
+          <Box display={{ base: "none", md: "flex" }}>
+            <CollabIcon />
+          </Box>
           <Stack spacing="1">
-            <Flex minH="24px" alignItems="center">
+            <Flex
+              minH="24px"
+              alignItems="center"
+              display={{
+                base: "none",
+                md: "flex",
+              }}
+            >
               <Heading fontSize="lg">
                 <LinkOverlay
                   href={`/a/${props.classId}/${props.id}`}
@@ -99,7 +129,14 @@ export const AssignmentCard = (props: AssignmentCardProps) => {
                 </LinkOverlay>
               </Heading>
             </Flex>
-            <HStack spacing="3">
+            <HStack
+              spacing={{ base: 1, md: 3 }}
+              alignItems={{ base: "flex-start", md: "center" }}
+              flexDir={{
+                base: "column",
+                md: "row",
+              }}
+            >
               {props.for == "Teacher" && (
                 <HStack
                   color={props.published ? "green.500" : "gray.500"}

apps/next/src/modules/classes/pages/class-assignments.tsx

@@ -56,6 +56,7 @@ export const ClassAssignments = () => {
           spacing="4"
           w={{ base: "full", md: "auto" }}
           justifyContent={{ base: "space-between", md: "auto" }}
+          flexDir={{ base: "column", md: "row" }}
         >
           <LoadingSearch
             value={search}
@@ -64,8 +65,12 @@ export const ClassAssignments = () => {
             debounceInequality={search.trim() != debouncedSearch.trim()}
           />
           {isTeacher && (
-            <>
-              <Box minW="250px" w="250px">
+            <HStack
+              spacing="4"
+              w={{ base: "full", md: "auto" }}
+              justifyContent={{ base: "space-between", md: "auto" }}
+            >
+              <Box w="250px">
                 <SectionSelect
                   sections={Array.from([
                     {
@@ -92,7 +97,7 @@ export const ClassAssignments = () => {
               >
                 New
               </Button>
-            </>
+            </HStack>
           )}
         </HStack>
       </Skeleton>

apps/next/src/modules/classes/pages/edit-assignment.tsx

@@ -142,9 +142,12 @@ export const EditAssignment = () => {
 
   const { collabMinTerms: _minTerms, collabMaxTerms: _maxTerms } =
     editMethods.watch("collab");
+
+  const collab = assignment?.studySet?.collab;
   const collabDirty =
-    _minTerms !== assignment?.studySet?.collab?.minTermsPerUser ||
-    _maxTerms !== assignment?.studySet?.collab?.maxTermsPerUser;
+    collab &&
+    (_minTerms !== collab.minTermsPerUser ||
+      _maxTerms !== collab.maxTermsPerUser);
 
   const editor = useEditor({
     extensions,
@@ -280,19 +283,21 @@ export const EditAssignment = () => {
               <DescriptionEditor editor={editor} />
             </Skeleton>
           </Stack>
-          <Controller
-            control={editMethods.control}
-            name="collab"
-            render={({ field: { value, onChange } }) => (
-              <CollabTermsSlider
-                minTerms={value.collabMinTerms}
-                maxTerms={value.collabMaxTerms}
-                onChange={(min, max) => {
-                  onChange({ collabMinTerms: min, collabMaxTerms: max });
-                }}
-              />
-            )}
-          />
+          {(!assignment || assignment.studySet?.collab) && (
+            <Controller
+              control={editMethods.control}
+              name="collab"
+              render={({ field: { value, onChange } }) => (
+                <CollabTermsSlider
+                  minTerms={value.collabMinTerms}
+                  maxTerms={value.collabMaxTerms}
+                  onChange={(min, max) => {
+                    onChange({ collabMinTerms: min, collabMaxTerms: max });
+                  }}
+                />
+              )}
+            />
+          )}
         </Stack>
       </form>
     </FormProvider>

apps/next/src/modules/main/collab-details.tsx

@@ -58,7 +58,7 @@ export const CollabDetails = () => {
     });
 
     c.push(
-      ...collaborators.map(
+      ...collaborators.slice(0, 27).map(
         (s) =>
           ({
             type: "collaborator",
@@ -143,9 +143,8 @@ export const CollabDetails = () => {
             )}
           </Stack>
         </Box>
-        <Box w="full">
+        <Box display="flex" w="full">
           <Flex
-            w="max"
             maxH="128px"
             overflow="hidden"
             justifyContent={{ base: "start", md: "center" }}

apps/next/src/modules/onboarding/onboarding-username.tsx

@@ -86,7 +86,7 @@ export const OnboardingUsername = () => {
               onActionStateChange={(disabled) => setDisabled(disabled)}
               onLoadingChange={(loading) => setLoading(loading)}
             />
-            <HStack spacing="5" w="full">
+            <HStack spacing="6" w="full" mt="3">
               <Avatar
                 src={image || ""}
                 bg="gray.200"