Merge branch 'main' into atlas3

common/pseudo-numeric.ts

@@ -16,8 +16,8 @@ export const getMappedValue =
     const { min, max, isLogScale } = contract
 
     if (isLogScale) {
-      const logValue = p * Math.log10(max - min)
+      const logValue = p * Math.log10(max - min + 1)
-      return 10 ** logValue + min
+      return 10 ** logValue + min - 1
     }
 
     return p * (max - min) + min
@@ -38,7 +38,7 @@ export const getPseudoProbability = (
   isLogScale = false
 ) => {
   if (isLogScale) {
-    return Math.log10(value - min) / Math.log10(max - min)
+    return Math.log10(value - min + 1) / Math.log10(max - min + 1)
   }
 
   return (value - min) / (max - min)

common/util/format.ts

@@ -33,20 +33,24 @@ export function formatPercent(zeroToOne: number) {
   return (zeroToOne * 100).toFixed(decimalPlaces) + '%'
 }
 
+const showPrecision = (x: number, sigfigs: number) =>
+  // convert back to number for weird formatting reason
+  `${Number(x.toPrecision(sigfigs))}`
+
 // Eg 1234567.89 => 1.23M; 5678 => 5.68K
 export function formatLargeNumber(num: number, sigfigs = 2): string {
   const absNum = Math.abs(num)
-  if (absNum < 1) return num.toPrecision(sigfigs)
+  if (absNum < 1) return showPrecision(num, sigfigs)
 
-  if (absNum < 100) return num.toPrecision(2)
+  if (absNum < 100) return showPrecision(num, 2)
-  if (absNum < 1000) return num.toPrecision(3)
+  if (absNum < 1000) return showPrecision(num, 3)
-  if (absNum < 10000) return num.toPrecision(4)
+  if (absNum < 10000) return showPrecision(num, 4)
 
   const suffix = ['', 'K', 'M', 'B', 'T', 'Q']
   const i = Math.floor(Math.log10(absNum) / 3)
 
-  const numStr = (num / Math.pow(10, 3 * i)).toPrecision(sigfigs)
+  const numStr = showPrecision(num / Math.pow(10, 3 * i), sigfigs)
-  return `${numStr}${suffix[i]}`
+  return `${numStr}${suffix[i] ?? ''}`
 }
 
 export function toCamelCase(words: string) {

functions/src/emails.ts

@@ -302,7 +302,7 @@ export const sendNewCommentEmail = async (
     )}`
   }
 
-  const subject = `Comment from ${commentorName} on ${question}`
+  const subject = `Comment on ${question}`
   const from = `${commentorName} on Manifold <no-reply@manifold.markets>`
 
   if (contract.outcomeType === 'FREE_RESPONSE' && answerId && answerText) {

web/components/bet-panel.tsx

@@ -50,14 +50,10 @@ export function BetPanel(props: {
   const user = useUser()
   const userBets = useUserContractBets(user?.id, contract.id)
   const unfilledBets = useUnfilledBets(contract.id) ?? []
-  const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id)
   const { sharesOutcome } = useSaveBinaryShares(contract, userBets)
 
   const [isLimitOrder, setIsLimitOrder] = useState(false)
 
-  const showLimitOrders =
-    (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
-
   return (
     <Col className={className}>
       <SellRow
@@ -85,7 +81,7 @@ export function BetPanel(props: {
 
         <SignUpPrompt />
       </Col>
-      {showLimitOrders && (
+      {unfilledBets.length > 0 && (
         <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
       )}
     </Col>
@@ -105,9 +101,6 @@ export function SimpleBetPanel(props: {
   const [isLimitOrder, setIsLimitOrder] = useState(false)
 
   const unfilledBets = useUnfilledBets(contract.id) ?? []
-  const yourUnfilledBets = unfilledBets.filter((bet) => bet.userId === user?.id)
-  const showLimitOrders =
-    (isLimitOrder && unfilledBets.length > 0) || yourUnfilledBets.length > 0
 
   return (
     <Col className={className}>
@@ -138,7 +131,7 @@ export function SimpleBetPanel(props: {
         <SignUpPrompt />
       </Col>
 
-      {showLimitOrders && (
+      {unfilledBets.length > 0 && (
         <LimitBets className="mt-4" contract={contract} bets={unfilledBets} />
       )}
     </Col>

web/components/contract/contract-prob-graph.tsx

@@ -7,7 +7,6 @@ import { Bet } from 'common/bet'
 import { getInitialProbability } from 'common/calculate'
 import { BinaryContract, PseudoNumericContract } from 'common/contract'
 import { useWindowSize } from 'web/hooks/use-window-size'
-import { getMappedValue } from 'common/pseudo-numeric'
 import { formatLargeNumber } from 'common/util/format'
 
 export const ContractProbGraph = memo(function ContractProbGraph(props: {
@@ -29,7 +28,11 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
     ...bets.map((bet) => bet.createdTime),
   ].map((time) => new Date(time))
 
-  const f = getMappedValue(contract)
+  const f: (p: number) => number = isBinary
+    ? (p) => p
+    : isLogScale
+    ? (p) => p * Math.log10(contract.max - contract.min + 1)
+    : (p) => p * (contract.max - contract.min) + contract.min
 
   const probs = [startProb, ...bets.map((bet) => bet.probAfter)].map(f)
 
@@ -69,10 +72,9 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
 
   const points: { x: Date; y: number }[] = []
   const s = isBinary ? 100 : 1
-  const c = isLogScale && contract.min === 0 ? 1 : 0
 
   for (let i = 0; i < times.length - 1; i++) {
-    points[points.length] = { x: times[i], y: s * probs[i] + c }
+    points[points.length] = { x: times[i], y: s * probs[i] }
     const numPoints: number = Math.floor(
       dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / timeStep
     )
@@ -84,7 +86,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
           x: dayjs(times[i])
             .add(thisTimeStep * n, 'ms')
             .toDate(),
-          y: s * probs[i] + c,
+          y: s * probs[i],
         }
       }
     }
@@ -99,6 +101,9 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
 
   const formatter = isBinary
     ? formatPercent
+    : isLogScale
+    ? (x: DatumValue) =>
+        formatLargeNumber(10 ** +x.valueOf() + contract.min - 1)
     : (x: DatumValue) => formatLargeNumber(+x.valueOf())
 
   return (
@@ -111,11 +116,13 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
         yScale={
           isBinary
             ? { min: 0, max: 100, type: 'linear' }
-            : {
+            : isLogScale
-                min: contract.min + c,
+            ? {
-                max: contract.max + c,
+                min: 0,
-                type: contract.isLogScale ? 'log' : 'linear',
+                max: Math.log10(contract.max - contract.min + 1),
+                type: 'linear',
               }
+            : { min: contract.min, max: contract.max, type: 'linear' }
         }
         yFormat={formatter}
         gridYValues={yTickValues}

web/components/groups/group-selector.tsx

@@ -53,9 +53,8 @@ export function GroupSelector(props: {
         nullable={true}
         className={'text-sm'}
       >
-        {({ open }) => (
+        {() => (
           <>
-            {!open && setQuery('')}
             <Combobox.Label className="label justify-start gap-2 text-base">
               Add to Group
               <InfoTooltip text="Question will be displayed alongside the other questions in the group." />

web/components/limit-bets.tsx

@@ -78,8 +78,8 @@ export function LimitOrderTable(props: {
       <thead>
         {!isYou && <th></th>}
         <th>Outcome</th>
-        <th>Amount</th>
         <th>{isPseudoNumeric ? 'Value' : 'Prob'}</th>
+        <th>Amount</th>
         {isYou && <th></th>}
       </thead>
       <tbody>
@@ -129,12 +129,12 @@ function LimitBet(props: {
           )}
         </div>
       </td>
-      <td>{formatMoney(orderAmount - amount)}</td>
       <td>
         {isPseudoNumeric
           ? getFormattedMappedValue(contract)(limitProb)
           : formatPercent(limitProb)}
       </td>
+      <td>{formatMoney(orderAmount - amount)}</td>
       {isYou && (
         <td>
           {isCancelling ? (

web/components/pagination.tsx

@@ -4,8 +4,18 @@ export function Pagination(props: {
   totalItems: number
   setPage: (page: number) => void
   scrollToTop?: boolean
+  nextTitle?: string
+  prevTitle?: string
 }) {
-  const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
+  const {
+    page,
+    itemsPerPage,
+    totalItems,
+    setPage,
+    scrollToTop,
+    nextTitle,
+    prevTitle,
+  } = props
 
   const maxPage = Math.ceil(totalItems / itemsPerPage) - 1
 
@@ -25,19 +35,21 @@ export function Pagination(props: {
         </p>
       </div>
       <div className="flex flex-1 justify-between sm:justify-end">
-        <a
+        {page > 0 && (
-          href={scrollToTop ? '#' : undefined}
+          <a
-          className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            href={scrollToTop ? '#' : undefined}
-          onClick={() => page > 0 && setPage(page - 1)}
+            className="relative inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-        >
+            onClick={() => page > 0 && setPage(page - 1)}
-          Previous
+          >
-        </a>
+            {prevTitle ?? 'Previous'}
+          </a>
+        )}
         <a
           href={scrollToTop ? '#' : undefined}
           className="relative ml-3 inline-flex cursor-pointer select-none items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
           onClick={() => page < maxPage && setPage(page + 1)}
         >
-          Next
+          {nextTitle ?? 'Next'}
         </a>
       </div>
     </nav>

web/hooks/use-notifications.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { notification_subscribe_types, PrivateUser } from 'common/user'
 import { Notification } from 'common/notification'
 import {
@@ -6,7 +6,7 @@ import {
   listenForNotifications,
 } from 'web/lib/firebase/notifications'
 import { groupBy, map } from 'lodash'
-import { useFirestoreQuery } from '@react-query-firebase/firestore'
+import { useFirestoreQueryData } from '@react-query-firebase/firestore'
 import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
 
 export type NotificationGroup = {
@@ -19,36 +19,33 @@ export type NotificationGroup = {
 
 // For some reason react-query subscriptions don't actually listen for notifications
 // Use useUnseenPreferredNotificationGroups to listen for new notifications
-export function usePreferredGroupedNotifications(privateUser: PrivateUser) {
+export function usePreferredGroupedNotifications(
-  const [notificationGroups, setNotificationGroups] = useState<
+  privateUser: PrivateUser,
-    NotificationGroup[] | undefined
+  cachedNotifications?: Notification[]
-  >(undefined)
+) {
-  const [notifications, setNotifications] = useState<Notification[]>([])
+  const result = useFirestoreQueryData(
-  const key = `notifications-${privateUser.id}-all`
+    ['notifications-all', privateUser.id],
+    getNotificationsQuery(privateUser.id)
+  )
+  const notifications = useMemo(() => {
+    if (result.isLoading) return cachedNotifications ?? []
+    if (!result.data) return cachedNotifications ?? []
+    const notifications = result.data as Notification[]
 
-  const result = useFirestoreQuery([key], getNotificationsQuery(privateUser.id))
+    return getAppropriateNotifications(
-  useEffect(() => {
-    if (result.isLoading) return
-    if (!result.data) return setNotifications([])
-    const notifications = result.data.docs.map(
-      (doc) => doc.data() as Notification
-    )
-
-    const notificationsToShow = getAppropriateNotifications(
       notifications,
       privateUser.notificationPreferences
     ).filter((n) => !n.isSeenOnHref)
-    setNotifications(notificationsToShow)
+  }, [
-  }, [privateUser.notificationPreferences, result.data, result.isLoading])
+    cachedNotifications,
+    privateUser.notificationPreferences,
+    result.data,
+    result.isLoading,
+  ])
 
-  useEffect(() => {
+  return useMemo(() => {
-    if (!notifications) return
+    if (notifications) return groupNotifications(notifications)
-
-    const groupedNotifications = groupNotifications(notifications)
-    setNotificationGroups(groupedNotifications)
   }, [notifications])
-
-  return notificationGroups
 }
 
 export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) {

web/hooks/use-sort-and-query-params.tsx

@@ -53,9 +53,12 @@ export function useInitialQueryAndSort(options?: {
         console.log('ready loading from storage ', sort ?? defaultSort)
         const localSort = getSavedSort()
         if (localSort) {
-          router.query.s = localSort
           // Use replace to not break navigating back.
-          router.replace(router, undefined, { shallow: true })
+          router.replace(
+            { query: { ...router.query, s: localSort } },
+            undefined,
+            { shallow: true }
+          )
         }
         setInitialSort(localSort ?? defaultSort)
       } else {
@@ -79,7 +82,9 @@ export function useUpdateQueryAndSort(props: {
   const setSort = (sort: Sort | undefined) => {
     if (sort !== router.query.s) {
       router.query.s = sort
-      router.push(router, undefined, { shallow: true })
+      router.replace({ query: { ...router.query, s: sort } }, undefined, {
+        shallow: true,
+      })
       if (shouldLoadFromStorage) {
         localStorage.setItem(MARKETS_SORT, sort || '')
       }
@@ -97,7 +102,9 @@ export function useUpdateQueryAndSort(props: {
         } else {
           delete router.query.q
         }
-        router.push(router, undefined, { shallow: true })
+        router.replace({ query: router.query }, undefined, {
+          shallow: true,
+        })
         track('search', { query })
       }, 500),
     [router]

web/lib/firebase/auth.ts

@@ -6,7 +6,7 @@ const TOKEN_KINDS = ['refresh', 'id'] as const
 type TokenKind = typeof TOKEN_KINDS[number]
 
 const getAuthCookieName = (kind: TokenKind) => {
-  const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replaceAll('-', '_')
+  const suffix = `${PROJECT_ID}_${kind}`.toUpperCase().replace(/-/g, '_')
   return `FIREBASE_TOKEN_${suffix}`
 }
 

web/pages/create.tsx

@@ -206,7 +206,7 @@ export function NewContract(props: {
           min,
           max,
           initialValue,
-          isLogScale: (min ?? 0) < 0 ? false : isLogScale,
+          isLogScale,
           groupId: selectedGroup?.id,
         })
       )
@@ -293,15 +293,13 @@ export function NewContract(props: {
               />
             </Row>
 
-            {!(min !== undefined && min < 0) && (
+            <Checkbox
-              <Checkbox
+              className="my-2 text-sm"
-                className="my-2 text-sm"
+              label="Log scale"
-                label="Log scale"
+              checked={isLogScale}
-                checked={isLogScale}
+              toggle={() => setIsLogScale(!isLogScale)}
-                toggle={() => setIsLogScale(!isLogScale)}
+              disabled={isSubmitting}
-                disabled={isSubmitting}
+            />
-              />
-            )}
 
             {min !== undefined && max !== undefined && min >= max && (
               <div className="mt-2 mb-2 text-sm text-red-500">

web/pages/notifications.tsx

@@ -1,6 +1,6 @@
 import { Tabs } from 'web/components/layout/tabs'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Notification, notification_source_types } from 'common/notification'
 import { Avatar, EmptyAvatar } from 'web/components/avatar'
 import { Row } from 'web/components/layout/row'
@@ -14,9 +14,14 @@ import {
   MANIFOLD_USERNAME,
   notification_subscribe_types,
   PrivateUser,
+  User,
 } from 'common/user'
 import { ChoicesToggleGroup } from 'web/components/choices-toggle-group'
-import { listenForPrivateUser, updatePrivateUser } from 'web/lib/firebase/users'
+import {
+  getUser,
+  listenForPrivateUser,
+  updatePrivateUser,
+} from 'web/lib/firebase/users'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import clsx from 'clsx'
 import { RelativeTimestamp } from 'web/components/relative-timestamp'
@@ -42,15 +47,39 @@ import Custom404 from 'web/pages/404'
 import { track } from '@amplitude/analytics-browser'
 import { Pagination } from 'web/components/pagination'
 import { useWindowSize } from 'web/hooks/use-window-size'
-import Router from 'next/router'
+import { safeLocalStorage } from 'web/lib/util/local'
+import {
+  getServerAuthenticatedUid,
+  redirectIfLoggedOut,
+} from 'web/lib/firebase/server-auth'
+import { SiteLink } from 'web/components/site-link'
 
 export const NOTIFICATIONS_PER_PAGE = 30
 const MULTIPLE_USERS_KEY = 'multipleUsers'
 const HIGHLIGHT_CLASS = 'bg-indigo-50'
 
-export default function Notifications() {
+export const getServerSideProps = redirectIfLoggedOut('/', async (ctx) => {
-  const user = useUser()
+  const uid = await getServerAuthenticatedUid(ctx)
+  if (!uid) {
+    return { props: { user: null } }
+  }
+  const user = await getUser(uid)
+  return { props: { user } }
+})
+
+export default function Notifications(props: { user: User }) {
+  const { user } = props
   const privateUser = usePrivateUser(user?.id)
+  const local = safeLocalStorage()
+  let localNotifications = [] as Notification[]
+  const localSavedNotificationGroups = local?.getItem('notification-groups')
+  let localNotificationGroups = [] as NotificationGroup[]
+  if (localSavedNotificationGroups) {
+    localNotificationGroups = JSON.parse(localSavedNotificationGroups)
+    localNotifications = localNotificationGroups
+      .map((g) => g.notifications)
+      .flat()
+  }
 
   if (!user) return <Custom404 />
   return (
@@ -67,7 +96,17 @@ export default function Notifications() {
               {
                 title: 'Notifications',
                 content: privateUser ? (
-                  <NotificationsList privateUser={privateUser} />
+                  <NotificationsList
+                    privateUser={privateUser}
+                    cachedNotifications={localNotifications}
+                  />
+                ) : localNotificationGroups &&
+                  localNotificationGroups.length > 0 ? (
+                  <div className={'min-h-[100vh]'}>
+                    <RenderNotificationGroups
+                      notificationGroups={localNotificationGroups}
+                    />
+                  </div>
                 ) : (
                   <LoadingIndicator />
                 ),
@@ -88,39 +127,13 @@ export default function Notifications() {
   )
 }
 
-function NotificationsList(props: { privateUser: PrivateUser }) {
+function RenderNotificationGroups(props: {
-  const { privateUser } = props
+  notificationGroups: NotificationGroup[]
-  const [page, setPage] = useState(0)
+}) {
-  const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
+  const { notificationGroups } = props
-  const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
-    useState<NotificationGroup[] | undefined>(undefined)
-
-  useEffect(() => {
-    if (!allGroupedNotifications) return
-    const start = page * NOTIFICATIONS_PER_PAGE
-    const end = start + NOTIFICATIONS_PER_PAGE
-    const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
-    const remainingNotification = allGroupedNotifications.slice(end)
-    for (const notification of remainingNotification) {
-      if (notification.isSeen) break
-      else setNotificationsAsSeen(notification.notifications)
-    }
-    setPaginatedGroupedNotifications(maxNotificationsToShow)
-  }, [allGroupedNotifications, page])
-
-  if (!paginatedGroupedNotifications || !allGroupedNotifications)
-    return <LoadingIndicator />
-
   return (
-    <div className={'min-h-[100vh]'}>
+    <>
-      {paginatedGroupedNotifications.length === 0 && (
+      {notificationGroups.map((notification) =>
-        <div className={'mt-2'}>
-          You don't have any notifications. Try changing your settings to see
-          more.
-        </div>
-      )}
-
-      {paginatedGroupedNotifications.map((notification) =>
         notification.type === 'income' ? (
           <IncomeNotificationGroupItem
             notificationGroup={notification}
@@ -138,6 +151,52 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
           />
         )
       )}
+    </>
+  )
+}
+
+function NotificationsList(props: {
+  privateUser: PrivateUser
+  cachedNotifications: Notification[]
+}) {
+  const { privateUser, cachedNotifications } = props
+  const [page, setPage] = useState(0)
+  const allGroupedNotifications = usePreferredGroupedNotifications(
+    privateUser,
+    cachedNotifications
+  )
+  const paginatedGroupedNotifications = useMemo(() => {
+    if (!allGroupedNotifications) return
+    const start = page * NOTIFICATIONS_PER_PAGE
+    const end = start + NOTIFICATIONS_PER_PAGE
+    const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
+    const remainingNotification = allGroupedNotifications.slice(end)
+    for (const notification of remainingNotification) {
+      if (notification.isSeen) break
+      else setNotificationsAsSeen(notification.notifications)
+    }
+    const local = safeLocalStorage()
+    local?.setItem(
+      'notification-groups',
+      JSON.stringify(allGroupedNotifications)
+    )
+    return maxNotificationsToShow
+  }, [allGroupedNotifications, page])
+
+  if (!paginatedGroupedNotifications || !allGroupedNotifications) return <div />
+
+  return (
+    <div className={'min-h-[100vh]'}>
+      {paginatedGroupedNotifications.length === 0 && (
+        <div className={'mt-2'}>
+          You don't have any notifications. Try changing your settings to see
+          more.
+        </div>
+      )}
+
+      <RenderNotificationGroups
+        notificationGroups={paginatedGroupedNotifications}
+      />
       {paginatedGroupedNotifications.length > 0 &&
         allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
           <Pagination
@@ -146,6 +205,8 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
             totalItems={allGroupedNotifications.length}
             setPage={setPage}
             scrollToTop
+            nextTitle={'Older'}
+            prevTitle={'Newer'}
           />
         )}
     </div>
@@ -382,7 +443,11 @@ function IncomeNotificationItem(props: {
         highlighted && HIGHLIGHT_CLASS
       )}
     >
-      <a href={getSourceUrl(notification)}>
+      <div className={'relative'}>
+        <SiteLink
+          href={getSourceUrl(notification) ?? ''}
+          className={'absolute left-0 right-0 top-0 bottom-0 z-0'}
+        />
         <Row className={'items-center text-gray-500 sm:justify-start'}>
           <div className={'line-clamp-2 flex max-w-xl shrink '}>
             <div className={'inline'}>
@@ -408,7 +473,7 @@ function IncomeNotificationItem(props: {
           </div>
         </Row>
         <div className={'mt-4 border-b border-gray-300'} />
-      </a>
+      </div>
     </div>
   )
 }
@@ -597,24 +662,24 @@ function NotificationItem(props: {
         highlighted && HIGHLIGHT_CLASS
       )}
     >
-      <div
+      <div className={'relative cursor-pointer'}>
-        className={'cursor-pointer'}
+        <SiteLink
-        onClick={(event) => {
+          href={getSourceUrl(notification) ?? ''}
-          event.stopPropagation()
+          className={'absolute left-0 right-0 top-0 bottom-0 z-0'}
-          Router.push(getSourceUrl(notification) ?? '')
+          onClick={() =>
-          track('Notification Clicked', {
+            track('Notification Clicked', {
-            type: 'notification item',
+              type: 'notification item',
-            sourceType,
+              sourceType,
-            sourceUserName,
+              sourceUserName,
-            sourceUserAvatarUrl,
+              sourceUserAvatarUrl,
-            sourceUpdateType,
+              sourceUpdateType,
-            reasonText,
+              reasonText,
-            reason,
+              reason,
-            sourceUserUsername,
+              sourceUserUsername,
-            sourceText,
+              sourceText,
-          })
+            })
-        }}
+          }
-      >
+        />
         <Row className={'items-center text-gray-500 sm:justify-start'}>
           <Avatar
             avatarUrl={
@@ -623,7 +688,7 @@ function NotificationItem(props: {
                 : sourceUserAvatarUrl
             }
             size={'sm'}
-            className={'mr-2'}
+            className={'z-10 mr-2'}
             username={
               questionNeedsResolution ? MANIFOLD_USERNAME : sourceUserUsername
             }
@@ -639,7 +704,7 @@ function NotificationItem(props: {
                   <UserLink
                     name={sourceUserName || ''}
                     username={sourceUserUsername || ''}
-                    className={'mr-1 flex-shrink-0'}
+                    className={'relative mr-1 flex-shrink-0'}
                     justFirstName={true}
                   />
                 )}
@@ -706,10 +771,8 @@ function QuestionOrGroupLink(props: {
       </span>
     )
   return (
-    <a
+    <SiteLink
-      className={
+      className={'relative ml-1 font-bold'}
-        'ml-1 font-bold hover:underline hover:decoration-indigo-400 hover:decoration-2 '
-      }
       href={
         sourceContractCreatorUsername
           ? `/${sourceContractCreatorUsername}/${sourceContractSlug}`
@@ -734,7 +797,7 @@ function QuestionOrGroupLink(props: {
       }
     >
       {sourceContractTitle || sourceTitle}
-    </a>
+    </SiteLink>
   )
 }