STAPLE-verse · doomlab · Apr 9, 2025 · Apr 2, 2025 · Apr 3, 2025 · Apr 3, 2025
diff --git a/db/schema.prisma b/db/schema.prisma
@@ -34,6 +34,7 @@ model User {
   email            String             @unique
   language         String             @default("en-US")
   gravatar         String?
+  tooltips         Boolean            @default(true)
   // relational information
   projects         ProjectMember[]
   forms            Form[]

diff --git a/src/auth/components/TosForm.tsx b/src/auth/components/TosForm.tsx
@@ -54,7 +54,7 @@ export const TosForm = (props: TosFormProps) => {
           label="I have read and agree to these terms."
           className="checkbox checkbox-primary border-2"
           labelProps={{ className: "text-lg" }}
-        ></LabeledCheckboxField>
+        />
       </Form>
       <div className="divider pt-4 pb-4"></div>
       <div className="flex flex-row justify-center">

diff --git a/src/auth/mutations/login.ts b/src/auth/mutations/login.ts
@@ -26,7 +26,7 @@ export default resolver.pipe(resolver.zod(Login), async ({ email, password }, ct
   // This throws an error if credentials are invalid
   const user = await authenticateUser(email, password)
 
-  await ctx.session.$create({ userId: user.id, role: user.role as Role })
+  await ctx.session.$create({ userId: user.id, role: user.role as Role, tooltips: user.tooltips })
 
   return user
 })
diff --git a/src/auth/mutations/signup.ts b/src/auth/mutations/signup.ts
@@ -51,7 +51,11 @@ export default resolver.pipe(resolver.zod(Signup), async ({ email, password, use
     size: WidgetSize.SMALL,
   }))
 
-  await ctx.session.$create({ userId: user.id, role: user.role as Role })
+  await ctx.session.$create({
+    userId: user.id,
+    role: user.role as Role,
+    tooltips: true,
+  })
 
   await db.widget.createMany({
     data: [...widgets, ...smallWidgets],

diff --git a/src/contributors/components/ContributorForm.tsx b/src/contributors/components/ContributorForm.tsx
@@ -5,9 +5,9 @@ import { LabelSelectField } from "src/core/components/fields/LabelSelectField"
 import { useQuery } from "@blitzjs/rpc"
 import { MemberPrivileges } from "@prisma/client"
 import LabeledTextField from "src/core/components/fields/LabeledTextField"
-import { Tooltip } from "react-tooltip"
 import AddRoleInput from "src/roles/components/AddRoleInput"
 import getProjectManagerUserIds from "src/projectmembers/queries/getProjectManagerUserIds"
+import TooltipWrapper from "src/core/components/TooltipWrapper"
 
 interface ContributorFormProps<S extends z.ZodType<any, any>> extends FormProps<S> {
   projectId: number
@@ -33,7 +33,7 @@ export function ContributorForm<S extends z.ZodType<any, any>>(props: Contributo
 
   return (
     <Form<S> {...formProps}>
-      <Tooltip
+      <TooltipWrapper
         id="priv-tooltip"
         content={
           isLastProjectManager

diff --git a/src/core/components/Card.tsx b/src/core/components/Card.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
-import { Tooltip } from "react-tooltip"
 import clsx from "clsx"
 import { v4 as uuidv4 } from "uuid"
+import TooltipWrapper from "./TooltipWrapper"
 
 interface CardProps {
   title: string
@@ -22,7 +22,11 @@ const Card = ({ title, children, tooltipContent, actions, className }: CardProps
           {title}
         </div>
         {tooltipContent && (
-          <Tooltip id={tooltipId} content={tooltipContent} className="z-[1099] ourtooltips" />
+          <TooltipWrapper
+            id={tooltipId}
+            content={tooltipContent}
+            className="z-[1099] ourtooltips"
+          />
         )}
         {children}
         {actions && <div className="card-actions justify-end">{actions}</div>}

diff --git a/src/core/components/CollapseCard.tsx b/src/core/components/CollapseCard.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react"
-import { Tooltip } from "react-tooltip"
 import clsx from "clsx"
 import { v4 as uuidv4 } from "uuid"
+import TooltipWrapper from "./TooltipWrapper"
 
 interface CollapseCardProps {
   title: string
@@ -27,7 +27,11 @@ const CollapseCard = ({
       <div className="collapse-title text-xl font-medium">
         <div className="card-title">{title}</div>
         {tooltipContent && (
-          <Tooltip id={tooltipId} content={tooltipContent} className="z-[1099] ourtooltips" />
+          <TooltipWrapper
+            id={tooltipId}
+            content={tooltipContent}
+            className="z-[1099] ourtooltips"
+          />
         )}
       </div>
 

diff --git a/src/core/components/Stat.tsx b/src/core/components/Stat.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react"
-import { Tooltip } from "react-tooltip"
 import clsx from "clsx"
 import { v4 as uuidv4 } from "uuid"
+import TooltipWrapper from "./TooltipWrapper"
 
 interface StatProps {
   title: string
@@ -20,7 +20,7 @@ const Stat = ({ title, children, tooltipContent, className, description }: StatP
         {title}
       </div>
       {tooltipContent && (
-        <Tooltip id={tooltipId!} content={tooltipContent} className="z-[1099] ourtooltips" />
+        <TooltipWrapper id={tooltipId!} content={tooltipContent} className="z-[1099] ourtooltips" />
       )}
       <div>{children}</div>
       {description && <div className="stat-desc text-lg text-inherit">{description}</div>}

diff --git a/src/core/components/TooltipContext.tsx b/src/core/components/TooltipContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react"
+
+const TooltipContext = createContext<{ enabled: boolean }>({ enabled: true })
+
+export const useTooltipSetting = () => useContext(TooltipContext)
+
+export const TooltipProvider = ({
+  children,
+  enabled,
+}: {
+  children: React.ReactNode
+  enabled: boolean | undefined
+}) => {
+  return (
+    <TooltipContext.Provider value={{ enabled: enabled ?? true }}>
+      {children}
+    </TooltipContext.Provider>
+  )
+}
+
+export const useTooltip = () => {
+  const { enabled } = useTooltipSetting()
+  return { enabled }
+}
diff --git a/src/core/components/TooltipWrapper.tsx b/src/core/components/TooltipWrapper.tsx
@@ -0,0 +1,15 @@
+import { Tooltip } from "react-tooltip"
+import { useTooltip } from "./TooltipContext"
+import type { ComponentProps } from "react"
+
+type TooltipWrapperProps = ComponentProps<typeof Tooltip>
+
+const TooltipWrapper = (props: TooltipWrapperProps) => {
+  const { enabled } = useTooltip()
+
+  if (!enabled) return null
+
+  return <Tooltip {...props} />
+}
+
+export default TooltipWrapper
diff --git a/src/core/components/fields/LabeledCheckboxField.tsx b/src/core/components/fields/LabeledCheckboxField.tsx
@@ -5,8 +5,8 @@ import { useId } from "@reach/auto-id"
 export interface LabeledCheckboxFieldProps extends ComponentPropsWithoutRef<"input"> {
   /** Field name. */
   name: string
-  /** Field label. */
-  label: ReactNode
+  /** Field label. Handle dynamic labels through functions. */
+  label: ReactNode | ((value: boolean) => ReactNode)
   outerProps?: ComponentPropsWithoutRef<"div">
   fieldProps?: UseFieldConfig<string>
   labelProps?: ComponentPropsWithoutRef<"label">
@@ -41,7 +41,7 @@ export const LabeledCheckboxField = React.forwardRef<HTMLInputElement, LabeledCh
             />
           </div>
           <label htmlFor={id} className={labelProps.className} {...labelProps}>
-            {label}
+            {typeof label === "function" ? label(input.checked ?? input.value) : label}
             <div role="alert" className="text-red-700 text-sm mt-1 font-bold">
               {showError && normalizedError}
             </div>

diff --git a/src/core/components/navbar/MainNavbar.tsx b/src/core/components/navbar/MainNavbar.tsx
@@ -8,10 +8,10 @@ import { useCurrentUser } from "src/users/hooks/useCurrentUser"
 import { HomeIcon } from "@heroicons/react/24/outline"
 import NotificationsMenu from "src/notifications/components/NotificationMenu"
 import Image from "next/image"
-import { Tooltip } from "react-tooltip"
 import ThemeSelect from "../ThemeSelect"
 import { Breadcrumbs } from "../BreadCrumbs"
 import Gravatar from "react-gravatar"
+import TooltipWrapper from "../TooltipWrapper"
 
 type LogoProps = {
   theme: string
@@ -92,7 +92,7 @@ const Navbar = () => {
               className="w-10 rounded-full"
               data-tooltip-id="profile-tooltip"
             >
-              <Tooltip
+              <TooltipWrapper
                 id="profile-tooltip"
                 content="Update your profile"
                 className="z-[1099] ourtooltips"

diff --git a/src/core/components/sidebar/Sidebar.tsx b/src/core/components/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router"
 import { SidebarItemProps } from "./SidebarItems"
 import { SidebarState } from "src/core/hooks/useSidebar"
 import SidebarTooltips from "./SidebarTooltips"
-import { Tooltip } from "react-tooltip"
+import TooltipWrapper from "../TooltipWrapper"
 
 export default function Sidebar({
   sidebarState,
@@ -39,13 +39,13 @@ export default function Sidebar({
             <ChevronRightIcon className="w-6 h-6" data-tooltip-id="chevron-right-tooltip" />
           )}
         </button>
-        <Tooltip
+        <TooltipWrapper
           id="chevron-left-tooltip"
           content="Collapse Menu"
           className="z-[1099] ourtooltips"
           place="right"
         />
-        <Tooltip
+        <TooltipWrapper
           id="chevron-right-tooltip"
           content="Expand Menu"
           className="z-[1099] ourtooltips"

diff --git a/src/core/components/sidebar/SidebarTooltips.tsx b/src/core/components/sidebar/SidebarTooltips.tsx
@@ -1,8 +1,7 @@
 import React from "react"
-import { Tooltip } from "react-tooltip"
+import TooltipWrapper from "../TooltipWrapper"
 
 const tooltipContents = [
-
   { id: "project-dashboard-tooltip", content: "Project dashboard" },
   { id: "project-tasks-tooltip", content: "Project tasks" },
   { id: "project-elements-tooltip", content: "Group and track tasks" },
@@ -36,7 +35,7 @@ const SidebarTooltips = () => {
   return (
     <>
       {tooltipContents.map((tooltip) => (
-        <Tooltip
+        <TooltipWrapper
           key={tooltip.id}
           id={tooltip.id}
           content={tooltip.content}

diff --git a/src/core/types.ts b/src/core/types.ts
@@ -37,6 +37,21 @@ export type ProjectMemberWithUsers = ProjectMember & {
   users: User[]
 }
 
+export type TeamUserWithContributor = {
+  id: number
+  username: string
+  firstName: string | null
+  lastName: string | null
+  contributorId: number
+}
+
+export type TeamWithUsers = {
+  id: number
+  projectId: number
+  name: string
+  users: TeamUserWithContributor[]
+}
+
 export type ProjectMemberWithUsername = ProjectMember & {
   users: {
     username: string

diff --git a/src/elements/components/ElementInformation.tsx b/src/elements/components/ElementInformation.tsx
@@ -1,7 +1,6 @@
 import { Routes } from "@blitzjs/next"
 import { useQuery } from "@blitzjs/rpc"
 import Link from "next/link"
-import { Tooltip } from "react-tooltip"
 import Table from "src/core/components/Table"
 import getTasks from "src/tasks/queries/getTasks"
 import { Element } from "@prisma/client"
@@ -10,6 +9,7 @@ import { useState } from "react"
 import UpdateTasks from "./UpdateTasks"
 import { ElementTasksColumns } from "../tables/columns/ElementTasksColumns"
 import { processElementTasks } from "../tables/processing/processElementTasks"
+import TooltipWrapper from "src/core/components/TooltipWrapper"
 
 interface ElementInformationProps {
   element: Element
@@ -47,7 +47,7 @@ export const ElementInformation: React.FC<ElementInformationProps> = ({
           <div className="card-title" data-tooltip-id="element-tool">
             {element.name}
           </div>
-          <Tooltip
+          <TooltipWrapper
             id="element-tool"
             content="Overall element information"
             className="z-[1099] ourtooltips"
@@ -87,7 +87,7 @@ export const ElementInformation: React.FC<ElementInformationProps> = ({
           <div className="card-title" data-tooltip-id="tasks-tool">
             Tasks
           </div>
-          <Tooltip
+          <TooltipWrapper
             id="tasks-tool"
             content="Tasks assigned to this element"
             className="z-[1099] ourtooltips"

diff --git a/src/notifications/components/NotificationMenu.tsx b/src/notifications/components/NotificationMenu.tsx
@@ -1,9 +1,9 @@
 import { BellIcon } from "@heroicons/react/24/outline"
 import Link from "next/link"
-import { Tooltip } from "react-tooltip"
 import { Routes } from "@blitzjs/next"
 import { useNotificationMenuData } from "../hooks/useNotificationMenuData"
 import NotificationItem from "./NotificationItem"
+import TooltipWrapper from "src/core/components/TooltipWrapper"
 
 const NotificationsMenu = () => {
   const { unreadCount, latestUnreadNotifications } = useNotificationMenuData()
@@ -13,7 +13,7 @@ const NotificationsMenu = () => {
       <label tabIndex={0} className="btn btn-ghost btn-circle">
         <div className="indicator">
           <BellIcon className="w-5 h-5" data-tooltip-id="notifications-top-tooltip" />
-          <Tooltip
+          <TooltipWrapper
             id="notifications-top-tooltip"
             content="View all notifications"
             className="z-[1099] ourtooltips"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,6 +5,8 @@ import { withBlitz } from "src/blitz-client"
 import "src/styles/globals.css"
 import "src/core/styles/index.css"
 import { MemberPrivilegesProvider } from "src/projectprivileges/components/MemberPrivilegesContext"
+import { TooltipProvider } from "src/core/components/TooltipContext"
+import { useSession } from "@blitzjs/auth"
 
 function RootErrorFallback({ error }: ErrorFallbackProps) {
   if (error instanceof AuthenticationError) {
@@ -28,13 +30,16 @@ function RootErrorFallback({ error }: ErrorFallbackProps) {
 
 function MyApp({ Component, pageProps }: AppProps) {
   const getLayout = Component.getLayout || ((page) => page)
+  const session = useSession({ suspense: false })
+
   return (
     <ErrorBoundary FallbackComponent={RootErrorFallback}>
-      {/* TODO: Is it a good solution to add a big general suspnese? */}
       <Suspense fallback="Loading...">
-        <MemberPrivilegesProvider>
-          {getLayout(<Component {...pageProps} />)}
-        </MemberPrivilegesProvider>
+        <TooltipProvider enabled={session.tooltips}>
+          <MemberPrivilegesProvider>
+            {getLayout(<Component {...pageProps} />)}
+          </MemberPrivilegesProvider>
+        </TooltipProvider>
       </Suspense>
     </ErrorBoundary>
   )

diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
@@ -7,7 +7,6 @@ import { useEffect, useState } from "react"
 import { useMutation } from "@blitzjs/rpc"
 import signup from "src/auth/mutations/signup"
 import toast from "react-hot-toast"
-import { password_confirm } from "src/auth/schemas"
 
 type TosResponses = {
   tos: boolean

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
@@ -45,6 +45,12 @@ const ProfilePage = () => {
               <br />
               <span className="font-semibold">Signup Date:</span>{" "}
               <DateFormat date={currentUser.createdAt}></DateFormat>
+              <span className="font-semibold">Tooltips:</span>
+              {currentUser.tooltips ? (
+                <span className="text-success">On</span>
+              ) : (
+                <span className="text-error">Off</span>
+              )}
               <div className="card-actions justify-end">
                 <Link className="btn btn-primary" href={Routes.EditProfilePage()}>
                   Edit Profile

diff --git a/src/pages/projects/[projectId]/teams/[teamId].tsx b/src/pages/projects/[projectId]/teams/[teamId].tsx
@@ -1,5 +1,4 @@
 import { Suspense } from "react"
-import Head from "next/head"
 import { useQuery } from "@blitzjs/rpc"
 import { useParam } from "@blitzjs/next"
 import Layout from "src/core/layouts/Layout"
@@ -17,8 +16,7 @@ export const TeamPage = () => {
   const teamId = useParam("teamId", "number")
 
   const [team] = useQuery(getTeam, {
-    teamId: teamId!,
-    projectId: projectId!,
+    id: teamId!,
   })
 
   const userIds = team.users.map((user) => user.id)

diff --git a/src/pages/projects/[projectId]/teams/index.tsx b/src/pages/projects/[projectId]/teams/index.tsx
@@ -1,6 +1,5 @@
 import { Suspense } from "react"
 import { Routes } from "@blitzjs/next"
-import Head from "next/head"
 import Link from "next/link"
 import { useQuery } from "@blitzjs/rpc"
 import { useParam } from "@blitzjs/next"