add cls filter and various cleanup

devcon-app/src/components/domain/app/dc7/dashboard/index.tsx

@@ -146,9 +146,7 @@ const LoggedIn = () => {
         <div className="text-lg font-semibold">
           {account?.username ? `Welcome, ${account?.username}!` : 'Welcome!'} 👋
         </div>
-        <p className="text-xs text-[#505050] mt-1">
-          Thank you for connecting to the Devcon Passport.
-        </p>
+        <p className="text-xs text-[#505050] mt-1">Thank you for connecting to the Devcon Passport.</p>
       </div>
 
       <LoggedInCard dashboard className="lg:min-w-[350px] lg:max-w-[50%]" />
@@ -378,10 +376,10 @@ export const Dashboard = () => {
           </div>
         </SwipeToScroll>
       </div>
-      <div className="pb-4 mx-4 border-top"></div>
+      {/* <div className="pb-4 mx-4 border-top"></div>
       <div>
         <RecommendedSpeakers speakers={speakers ?? []} standalone />
-      </div>
+      </div> */}
       <div className="pb-4 mx-4 mt-6 border-top"></div>
       <div className="">
         <PersonalizedSuggestions sessions={sessions || []} standalone />

devcon-app/src/components/domain/app/dc7/sessions/index.tsx

@@ -84,7 +84,7 @@ import { CollapsedSection, CollapsedSectionContent, CollapsedSectionHeader } fro
 
 export const tagClassTwo = (active?: boolean, className?: string) =>
   cn(
-    'shrink-0 select-none cursor-pointer mr-2 rounded-full bg-white border border-solid border-[#E1E4EA] px-3 py-1 text-xs flex items-center justify-center text-[black] hover:border-[black] font-semibold hover:text-black transition-all duration-300',
+    'shrink-0 select-none cursor-pointer mr-2 rounded-full bg-white border border-solid border-[#E1E4EA] px-3 py-0.5 text-xs flex items-center justify-center text-[black] hover:border-[black] font-semibold hover:text-black transition-all duration-300',
     active ? 'border-[#ac9fdf] !bg-[#EFEBFF]' : '',
     className
   )
@@ -107,7 +107,7 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
   const [timelineView, setTimelineView] = useRecoilState(sessionTimelineViewAtom)
   const { now } = useAppContext()
 
-  const { text, type, day, expertise, track, room, other } = sessionFilter
+  const { text, type, day, expertise, track, room, cls, other } = sessionFilter
 
   useEffect(() => {
     if (typeof window === 'undefined') return
@@ -162,9 +162,12 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
             .filter(Boolean)
         ),
       ],
-      track: [...new Set(sessions.map(session => session.track)), 'CLS']
+      track: [...new Set(sessions.map(session => session.track))]
         .filter(Boolean)
         .filter(track => !track.startsWith('[CLS]')),
+      cls: [...new Set(sessions.map(session => session.track))]
+        .filter(Boolean)
+        .filter(track => track.startsWith('[CLS]')),
       room: [...new Set(sessions.map(session => session.slot_room?.name))].filter(Boolean).sort((a: any, b: any) => {
         if (a === 'Main Stage') return -1
         if (b === 'Main Stage') return 1
@@ -202,10 +205,10 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
         Object.keys(day).length === 0 ||
         sessionFilter.day[moment.utc(session.slot_start).add(7, 'hours').format('MMM D')]
       const matchesExpertise = Object.keys(expertise).length === 0 || sessionFilter.expertise[session.expertise]
-      const matchesCLS = session.track.startsWith('[CLS]') && sessionFilter.track['CLS']
-      const matchesTrack = Object.keys(track).length === 0 || sessionFilter.track[session.track] || matchesCLS
+      const matchesCLSTrack = session.track.startsWith('[CLS]') && sessionFilter.track['CLS']
+      const matchesTrack = Object.keys(track).length === 0 || sessionFilter.track[session.track] || matchesCLSTrack
       const matchesRoom = Object.keys(room).length === 0 || sessionFilter.room[session.slot_room?.name]
-
+      const matchesCLS = Object.keys(cls).length === 0 || sessionFilter.cls[session.track]
       const matchesAttending = sessionFilter.other['Attending'] && isAttending
       const matchesInterested = sessionFilter.other['Interested In'] && isInterested
       const matchesFavorites =
@@ -219,7 +222,16 @@ const useSessionFilter = (sessions: SessionType[], event: any) => {
 
       const matchesOther = (matchesUpcoming && matchesFavorites) || Object.keys(other).length === 0
 
-      return matchesText && matchesType && matchesDay && matchesExpertise && matchesTrack && matchesRoom && matchesOther
+      return (
+        matchesText &&
+        matchesType &&
+        matchesDay &&
+        matchesExpertise &&
+        matchesTrack &&
+        matchesRoom &&
+        matchesOther &&
+        matchesCLS
+      )
     })
   }, [sessions, sessionFilter])
 
@@ -742,7 +754,10 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
                 type: {},
               })
             }}
-            className={tagClassTwo(false, ' !text-[black] font-semibold')}
+            className={cn(
+              tagClassTwo(false, ' !text-[black] font-semibold'),
+              Object.keys(sessionFilter.type).length === 0 && 'hidden'
+            )}
           >
             Reset
           </div>
@@ -760,6 +775,38 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
         </div>
       </div>
 
+      <div className="shrink-0">
+        <div className="flex justify-between gap-3 pb-4 font-semibold">
+          Expertise
+          <div
+            onClick={() => {
+              setSessionFilter({
+                ...sessionFilter,
+                expertise: {},
+              })
+            }}
+            className={cn(
+              tagClassTwo(false, ' !text-[black] font-semibold'),
+              Object.keys(sessionFilter.expertise).length === 0 && 'hidden'
+            )}
+          >
+            Reset
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {filterOptions.expertise.map((expertise: string) => (
+            <div
+              key={expertise}
+              //   className={tagClass(sessionFilter.expertise[expertise]) + ' !text-black font-semibold !shrink'}
+              className={cn(filterTagClass(sessionFilter.expertise[expertise]), '!shrink')}
+              onClick={() => toggleFilter('expertise', expertise)}
+            >
+              {expertise}
+            </div>
+          ))}
+        </div>
+      </div>
+
       <div className="shrink-0">
         <div className="flex justify-between gap-3 pb-4 font-semibold">
           <div>Tracks</div>
@@ -770,7 +817,10 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
                 track: {},
               })
             }}
-            className={tagClassTwo(false, ' font-semibold')}
+            className={cn(
+              tagClassTwo(false, ' !text-[black] font-semibold'),
+              Object.keys(sessionFilter.track).length === 0 && 'hidden'
+            )}
           >
             Reset
           </div>
@@ -794,28 +844,31 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
 
       <div className="shrink-0">
         <div className="flex justify-between gap-3 pb-4 font-semibold">
-          Expertise
+          Community-Led Sessions (CLS)
           <div
             onClick={() => {
               setSessionFilter({
                 ...sessionFilter,
-                expertise: {},
+                cls: {},
               })
             }}
-            className={tagClassTwo(false, ' !text-[black] font-semibold')}
+            className={cn(
+              tagClassTwo(false, ' !text-[black] font-semibold'),
+              Object.keys(sessionFilter.cls).length === 0 && 'hidden'
+            )}
           >
             Reset
           </div>
         </div>
         <div className="flex flex-wrap gap-2">
-          {filterOptions.expertise.map((expertise: string) => (
+          {filterOptions.cls.map((cls: string) => (
             <div
-              key={expertise}
-              //   className={tagClass(sessionFilter.expertise[expertise]) + ' !text-black font-semibold !shrink'}
-              className={cn(filterTagClass(sessionFilter.expertise[expertise]), '!shrink')}
-              onClick={() => toggleFilter('expertise', expertise)}
+              key={cls}
+              //   className={tagClass(sessionFilter.cls[cls]) + ' !text-black font-semibold !shrink'}
+              className={cn(filterTagClass(sessionFilter.cls[cls]), '!shrink')}
+              onClick={() => toggleFilter('cls', cls)}
             >
-              {expertise}
+              {cls.split('[CLS]')[1]}
             </div>
           ))}
         </div>
@@ -831,7 +884,10 @@ export const SessionFilterAdvanced = ({ filterOptions }: { filterOptions: any })
                 room: {},
               })
             }}
-            className={tagClassTwo(false, ' !text-[black] font-semibold')}
+            className={cn(
+              tagClassTwo(false, ' !text-[black] font-semibold'),
+              Object.keys(sessionFilter.room).length === 0 && 'hidden'
+            )}
           >
             Reset
           </div>
@@ -1000,6 +1056,7 @@ export const SessionFilter = ({ filterOptions }: { filterOptions: any }) => {
                     computeFilterShorthand(sessionFilter.type, 'Session Type'),
                     computeFilterShorthand(sessionFilter.expertise, 'Expertise'),
                     computeFilterShorthand(sessionFilter.room, 'Rooms'),
+                    computeFilterShorthand(sessionFilter.cls, 'CLS'),
                   ]
                     .filter(val => !!val)
                     .join(', ') || ''

devcon-app/src/components/domain/app/dc7/speakers/index.tsx

@@ -445,7 +445,7 @@ export const SpeakerList = ({ speakers }: { speakers: SpeakerType[] | null }) =>
   return (
     <div data-type="speaker-list" className={cn(cardClass)}>
       <SpeakerFilter filterOptions={filterOptions} />
-
+      {/* 
       <RecommendedSpeakers
         speakers={speakers ?? []}
         selectedSpeaker={selectedSpeaker}
@@ -460,9 +460,9 @@ export const SpeakerList = ({ speakers }: { speakers: SpeakerType[] | null }) =>
             }
           }
         }}
-      />
+      /> */}
 
-      <div data-type="speaker-prompts" className="flex gap-3 my-4 border-bottom mx-4 pb-4">
+      <div data-type="speaker-prompts" className="flex gap-3 mb-4 border-bottom mx-4 pb-4">
         <StandalonePrompt className="w-full" onClick={() => setDevaBotVisible('Recommend speakers who know about ')}>
           <div className="truncate">Recommend speakers who know about...</div>
         </StandalonePrompt>
@@ -782,7 +782,7 @@ export const SpeakerLayout = ({ speakers }: { speakers: SpeakerType[] | null })
             className={cn(
               'basis-[100%] lg:basis-[40%] lg:min-w-[393px] max-w-[100%] lg:sticky lg:top-[72px] lg:self-start'
             )}
-          >
+          >   
             <SpeakerView speaker={selectedSpeaker} />
           </div>
         </Popup>

devcon-app/src/pages/_app.tsx

@@ -77,6 +77,7 @@ export const initialFilterState = {
   expertise: {},
   day: {},
   room: {},
+  cls: {},
   other: {},
 }
 

lib/components/ui/toast.tsx

@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Cross2Icon } from "@radix-ui/react-icons"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/shadcn/lib/utils"
+import { cn } from "@/shadcn/lib/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -14,20 +14,21 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 top-16 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-neutral-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-neutral-800",
   {
     variants: {
       variant: {
-        default: "border bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+        default:
+          "border bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
         destructive:
           "destructive group border-red-500 bg-red-500 text-neutral-50 dark:border-red-900 dark:bg-red-900 dark:text-neutral-50",
       },
@@ -36,7 +37,7 @@ const toastVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -49,9 +50,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -65,8 +66,8 @@ const ToastAction = React.forwardRef<
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -83,8 +84,8 @@ const ToastClose = React.forwardRef<
   >
     <Cross2Icon className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -95,8 +96,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -107,12 +108,12 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -124,4 +125,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};