feat(webapp): add routed explore categories and polish explore layout

packages/shared/src/components/cards/brief/BriefCard/BriefCard.tsx

@@ -29,6 +29,8 @@ export type BriefCardProps = {
     container: string;
     card: string;
   }>;
+  showCloseButton?: boolean;
+  showBorder?: boolean;
   animationSrc?: string;
   progressPercentage?: number;
   headnote?: ReactNode;
@@ -248,6 +250,7 @@ export const BriefCardInternal = (
       <Typography
         type={TypographyType.Callout}
         color={TypographyColor.Tertiary}
+        center
       >
         We sent an AI agent to read the entire internet. Every release, every
         hot take, and every unreadable blog post from the past week. It&apos;s

packages/shared/src/components/cards/brief/BriefCard/BriefCardDefault.tsx

@@ -9,12 +9,8 @@ import {
 } from '../../../typography/Typography';
 import {
   briefButtonBg,
-  briefCardBg,
-  briefCardBorder,
 } from '../../../../styles/custom';
 import type { BriefCardProps } from './BriefCard';
-import { BriefGradientIcon } from '../../../icons';
-import { IconSize } from '../../../Icon';
 import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button';
 import {
   BriefingType,
@@ -32,15 +28,12 @@ import { LogEvent, TargetType } from '../../../../lib/log';
 
 export type BriefCardDefaultProps = BriefCardProps;
 
-const rootStyle = {
-  border: briefCardBorder,
-  background: briefCardBg,
-};
-
 export const BriefCardDefault = ({
   className,
   title,
   children,
+  showCloseButton = true,
+  showBorder = true,
 }: BriefCardDefaultProps): ReactElement => {
   const briefContext = useBriefContext();
   const { displayToast } = useToastNotification();
@@ -98,23 +91,32 @@ export const BriefCardDefault = ({
 
   return (
     <div
-      style={rootStyle}
       className={classNames(
-        'relative flex flex-1 flex-col gap-4 rounded-16 px-6 py-4',
+        'relative flex flex-1 flex-col gap-4 rounded-16 bg-surface-float px-6 py-4',
         'backdrop-blur-3xl',
+        {
+          'border border-border-subtlest-tertiary': showBorder,
+        },
         className?.card,
       )}
     >
-      <CloseButton
-        className="absolute right-2 top-2"
-        size={ButtonSize.XSmall}
-        onClick={handleDismiss}
+      {showCloseButton && (
+        <CloseButton
+          className="absolute right-2 top-2"
+          size={ButtonSize.XSmall}
+          onClick={handleDismiss}
+        />
+      )}
+      <img
+        src="/assets/brief-card-magic.png"
+        alt=""
+        className="brief-card-magic-float h-fit w-full object-contain"
       />
-      <BriefGradientIcon secondary size={IconSize.Size48} />
       <Typography
-        type={TypographyType.Title2}
+        type={TypographyType.Title3}
         color={TypographyColor.Primary}
         bold
+        center
       >
         {title}
       </Typography>
@@ -123,7 +125,7 @@ export const BriefCardDefault = ({
         style={{
           background: briefButtonBg,
         }}
-        className="mt-auto w-full text-black"
+        className="brief-card-cta-gradient mt-auto w-full text-black"
         tag="a"
         type="button"
         variant={ButtonVariant.Primary}

packages/shared/src/components/cards/brief/BriefCard/BriefCardFeed.tsx

@@ -4,7 +4,10 @@ import type { BriefCardProps } from './BriefCard';
 import { BriefCard } from './BriefCard';
 
 export const BriefCardFeed = (
-  props: Pick<BriefCardProps, 'targetId' | 'className'>,
+  props: Pick<
+    BriefCardProps,
+    'targetId' | 'className' | 'showCloseButton' | 'showBorder'
+  >,
 ): ReactElement => {
   return <BriefCard {...props} />;
 };

packages/shared/src/components/cards/brief/BriefContext.tsx

@@ -15,9 +15,10 @@ type BriefContext = {
 const [BriefContextProvider, useBriefContext] = createContextProvider(
   (): BriefContext => {
     const { user } = useAuthContext();
+    const persistentBriefKey = `brief_card_${user?.id ?? 'anonymous'}_v3`;
 
     const [brief, setBrief] = usePersistentState<BriefContext['brief']>(
-      `brief_card_${user.id}_v3`,
+      persistentBriefKey,
       undefined,
     );
 

packages/shared/src/components/sources/SourceActions/SourceActionsNotify.tsx

@@ -9,26 +9,31 @@ interface SourceActionsNotifyProps {
   haveNotificationsOn: boolean;
   onClick: (e: React.MouseEvent) => void;
   disabled?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  className?: string;
 }
 
 const SourceActionsNotify = (props: SourceActionsNotifyProps): ReactElement => {
-  const { haveNotificationsOn, onClick, disabled } = props;
+  const { haveNotificationsOn, onClick, disabled, size, variant, className } =
+    props;
 
   const icon = haveNotificationsOn ? <BellSubscribedIcon /> : <BellAddIcon />;
   const label = `${haveNotificationsOn ? 'Disable' : 'Enable'} notifications`;
-  const variant = haveNotificationsOn
-    ? ButtonVariant.Subtle
-    : ButtonVariant.Secondary;
+  const buttonVariant =
+    variant ??
+    (haveNotificationsOn ? ButtonVariant.Subtle : ButtonVariant.Secondary);
 
   return (
     <Tooltip content={label}>
       <Button
         aria-label={label}
+        className={className}
         icon={icon}
         onClick={onClick}
-        size={ButtonSize.Small}
+        size={size ?? ButtonSize.Small}
         title={label}
-        variant={variant}
+        variant={buttonVariant}
         disabled={disabled}
       />
     </Tooltip>

packages/shared/src/components/widgets/BestDiscussions.tsx

@@ -54,7 +54,10 @@ const ListItem = ({ post, onLinkClick }: PostProps): ReactElement => (
       {post.title}
     </h5>
     <div className="flex items-center text-text-tertiary typo-footnote">
-      <div>{post.numComments} Comments</div>
+      <div>
+        <span className="text-accent-avocado-default">{post.numComments}</span>{' '}
+        Comments
+      </div>
     </div>
   </article>
 );

packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx

@@ -128,7 +128,7 @@ const HighlightCard = ({
 
   return (
     <div
-      className="flex cursor-pointer gap-3 px-4 py-3 transition-colors hover:bg-surface-hover"
+      className="flex cursor-pointer gap-3 px-4 py-3 transition-colors"
       onClick={handleCardClick}
       role="link"
       tabIndex={0}
@@ -276,7 +276,7 @@ export const ArenaHighlightsFeed = ({
   }
 
   return (
-    <div className="relative flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
+    <div className="relative flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary">
       <div className="flex items-center border-b border-border-subtlest-tertiary px-4 py-2.5">
         <span className="font-bold text-text-primary typo-callout">
           Live Highlights
@@ -327,7 +327,7 @@ export const ArenaHighlightsFeed = ({
         <button
           type="button"
           onClick={() => setMobileExpanded(true)}
-          className="active:opacity-80 border-t border-border-subtlest-tertiary px-4 py-3 text-center font-bold text-text-link typo-callout laptopL:hidden"
+          className="active:opacity-80 border-t border-border-subtlest-tertiary px-4 py-3 text-center font-bold text-text-secondary typo-callout laptopL:hidden"
         >
           Show all {visibleItems.length} highlights
         </button>

packages/shared/src/features/agents/arena/ArenaRankings.tsx

@@ -470,7 +470,7 @@ export const ArenaRankings = ({
         'overflow-hidden',
         compact
           ? 'bg-background-default'
-          : 'rounded-16 border border-border-subtlest-tertiary bg-background-subtle',
+          : 'min-w-[42rem] rounded-16 border border-border-subtlest-tertiary',
       )}
     >
       {/* Header */}

packages/shared/src/lib/constants.ts

@@ -33,6 +33,10 @@ export const slackIntegration = 'https://r.daily.dev/slack';
 export const statusPage = 'https://r.daily.dev/status';
 export const businessWebsiteUrl = 'https://r.daily.dev/business';
 export const appsUrl = 'https://daily.dev/apps';
+export const androidAppStoreUrl =
+  'https://play.google.com/store/apps/details?id=dev.daily';
+export const iosAppStoreUrl =
+  'https://apps.apple.com/app/daily-dev/id6740634400';
 export const timezoneSettingsUrl = 'https://r.daily.dev/timezone';
 export const isDevelopment = process.env.NODE_ENV === 'development';
 export const isProductionAPI =
@@ -43,6 +47,9 @@ export const isTesting =
 export const isGBDevMode = process.env.NEXT_PUBLIC_GB_DEV_MODE === 'true';
 
 export const isBrave = (): boolean => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
   if (!window.Promise) {
     return false;
   }

packages/shared/src/lib/log.ts

@@ -82,6 +82,7 @@ export enum Origin {
   HotTakeList = 'hot take list',
   HotAndCold = 'hot and cold',
   Leaderboard = 'leaderboard',
+  ExplorePage = 'explore page',
 }
 
 export enum LogEvent {
@@ -551,6 +552,7 @@ export enum NotificationCtaPlacement {
   SquadCard = 'squad-card',
   PostActions = 'post-actions',
   SquadShareToast = 'squad-share-toast',
+  ExploreQuickActions = 'explore-quick-actions',
 }
 
 export enum NotificationCtaKind {
@@ -572,6 +574,7 @@ export enum NotificationPromptSource {
   SquadChecklist = 'squad checklist',
   SourceSubscribe = 'source subscribe',
   ReadingReminder = 'reading reminder',
+  ExplorePage = 'explore page',
 }
 
 export enum ShortcutsSourceType {