Refactor/deps

backend/package.json

@@ -35,7 +35,7 @@
     "@aws-sdk/cloudfront-signer": "^3.734.0",
     "@cellajs/permission-manager": "^0.1.0",
     "@electric-sql/pglite": "^0.2.16",
-    "@hono/node-server": "^1.13.7",
+    "@hono/node-server": "^1.13.8",
     "@hono/sentry": "^1.2.0",
     "@hono/zod-openapi": "0.18.3",
     "@logtail/node": "^0.5.2",
@@ -51,17 +51,17 @@
     "@oslojs/encoding": "^1.1.0",
     "@oslojs/webauthn": "^1.0.0",
     "@paddle/paddle-node-sdk": "^2.5.0",
-    "@scalar/hono-api-reference": "^0.5.169",
+    "@scalar/hono-api-reference": "^0.5.171",
     "@sendgrid/mail": "^8.1.4",
     "@sentry/cli": "^2.41.1",
     "@t3-oss/env-core": "^0.12.0",
-    "arctic": "^3.2.1",
+    "arctic": "^3.2.2",
     "config": "workspace:*",
-    "dompurify": "^3.2.3",
-    "drizzle-orm": "^0.39.0",
+    "dompurify": "^3.2.4",
+    "drizzle-orm": "^0.39.1",
     "drizzle-zod": "0.7.0",
     "enforce-unique": "^1.3.0",
-    "hono": "4.6.19",
+    "hono": "4.6.20",
     "i18next": "^24.2.2",
     "isbot": "^5.1.22",
     "jsdom": "^26.0.0",
@@ -77,15 +77,15 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.0",
     "slugify": "^1.6.6",
-    "ua-parser-js": "^2.0.0",
+    "ua-parser-js": "^2.0.1",
     "zod": "3.24.1"
   },
   "devDependencies": {
     "@commander-js/extra-typings": "^13.1.0",
     "@faker-js/faker": "^9.4.0",
     "@types/jsdom": "^21.1.7",
     "@types/jsonwebtoken": "^9.0.8",
-    "@types/node": "^22.12.0",
+    "@types/node": "^22.13.1",
     "@types/papaparse": "^5.3.15",
     "@types/pg": "^8.11.11",
     "@types/react": "^19.0.8",
@@ -94,7 +94,7 @@
     "commander": "^13.1.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.7",
-    "drizzle-kit": "^0.30.3",
+    "drizzle-kit": "^0.30.4",
     "jszip": "^3.10.1",
     "papaparse": "^5.5.2",
     "tsup": "^8.3.6",

frontend/package.json

@@ -17,7 +17,7 @@
     "preview:dev": "cross-env NODE_ENV=development vite preview --port 3000"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blocknote/core": "^0.23.1",
@@ -51,18 +51,18 @@
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.7",
     "@radix-ui/react-visually-hidden": "^1.1.1",
-    "@sentry/react": "^8.52.0",
+    "@sentry/react": "^8.54.0",
     "@t3-oss/env-core": "^0.12.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/query-sync-storage-persister": "^5.65.0",
-    "@tanstack/react-query": "^5.65.1",
-    "@tanstack/react-query-devtools": "^5.65.1",
-    "@tanstack/react-query-persist-client": "^5.65.1",
-    "@tanstack/react-router": "^1.98.0",
-    "@tanstack/router-devtools": "^1.98.0",
+    "@tanstack/query-sync-storage-persister": "^5.66.0",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-devtools": "^5.66.0",
+    "@tanstack/react-query-persist-client": "^5.66.0",
+    "@tanstack/react-router": "^1.99.6",
+    "@tanstack/router-devtools": "^1.99.6",
     "@types/lodash": "^4.17.15",
     "@uppy/audio": "^2.1.1",
-    "@uppy/core": "^4.4.1",
+    "@uppy/core": "^4.4.2",
     "@uppy/dashboard": "^4.3.1",
     "@uppy/drag-drop": "^4.1.1",
     "@uppy/file-input": "^4.1.1",
@@ -81,12 +81,12 @@
     "cmdk": "^1.0.4",
     "config": "workspace:*",
     "dayjs": "^1.11.13",
-    "dompurify": "^3.2.3",
+    "dompurify": "^3.2.4",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "emblor": "^1.4.7",
-    "gleap": "^14.2.3",
-    "hono": "4.6.19",
+    "gleap": "^14.2.5",
+    "hono": "4.6.20",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.2",
@@ -97,7 +97,7 @@
     "locales": "workspace:*",
     "lodash": "^4.17.21",
     "lucide-react": "^0.473.0",
-    "motion": "^12.0.6",
+    "motion": "^12.1.0",
     "nanoid": "^5.0.9",
     "pdfjs-dist": "4.8.69",
     "player.style": "^0.1.3",
@@ -115,12 +115,13 @@
     "react-use-downloader": "^1.2.8",
     "recharts": "^2.15.1",
     "slugify": "1.6.6",
-    "sonner": "^1.7.2",
-    "tailwind-merge": "^2.6.0",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.3",
     "tailwindcss-animate": "^1.0.7",
     "use-count-up": "^3.0.1",
     "vaul": "^1.1.2",
-    "virtua": "^0.39.3",
+    "virtua": "^0.40.0",
     "workbox-window": "^7.3.0",
     "zod": "3.24.1",
     "zustand": "^5.0.3",
@@ -131,38 +132,27 @@
     "@million/lint": "^1.0.14",
     "@redux-devtools/extension": "^3.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@sentry/vite-plugin": "^3.1.0",
-    "@tanstack/router-plugin": "^1.98.0",
+    "@sentry/vite-plugin": "^3.1.2",
+    "@tailwindcss/vite": "^4.0.3",
+    "@tanstack/router-plugin": "^1.99.6",
     "@types/canvas-confetti": "^1.9.0",
     "@types/lodash.clonedeep": "^4.5.9",
-    "@types/node": "^22.12.0",
+    "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/zxcvbn": "^4.4.5",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
+    "babel-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "cross-env": "^7.0.3",
-    "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.3",
     "postgres": "^3.4.5",
     "rollup-plugin-visualizer": "^5.14.0",
-    "tailwindcss": "^3.4.17",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "vite": "^6.0.11",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-static-copy": "^2.2.0"
   },
-  "browserslist": [">0.2%", "not dead", "not op_mini all"],
-  "postcss": {
-    "plugins": {
-      "postcss-import": {},
-      "tailwindcss/nesting": {},
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
-  }
+  "browserslist": [">0.2%", "not dead", "not op_mini all"]
 }

frontend/src/index.css

@@ -1,10 +1,50 @@
 /* Custom gradients that are not easy to build using tailwind */
-@import "./gradients.css";
-@import "./modules/common/blocknote/styles.css";
+@import "./gradients.css" layer(base);
+@import "./modules/common/blocknote/styles.css" layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config '../tailwind.config.ts';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@utility submenu-section {
+  &:before {
+    border-left: 2px dotted hsl(var(--foreground));
+    content: "";
+    display: block;
+    position: absolute;
+    margin-top: 0.5rem;
+    margin-left: 1.7rem;
+    opacity: 0.5;
+    z-index: 0;
+    width: 1px;
+    height: calc(100% - 1.5rem);
+  }
+}
+
+/* Override tailwind here */
+@layer components {
+  .grid.rdg-wrapper > .rdg {
+    border: none;
+  }
+}
 
 @layer base {
   .bn-container.bn-shadcn,
@@ -130,21 +170,3 @@
     @apply flex flex-col min-h-full;
   }
 }
-
-@layer utilities {
-  .submenu-section:before {
-    border-left: 2px dotted hsl(var(--foreground));
-    content: "";
-    display: block;
-    position: absolute;
-    margin-top: 0.5rem;
-    margin-left: 1.7rem;
-    opacity: 0.5;
-    z-index: 0;
-    width: 1px;
-    height: calc(100% - 1.5rem);
-  }
-}
-
-/* Override tailwind here */
-/* @layer components {} */

frontend/src/lib/router.ts

@@ -66,6 +66,8 @@ export const persister = createIDBPersister();
  * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createRouterFunction
  */
 const router = createRouter({
+  scrollRestoration: true,
+  scrollRestorationBehavior: 'instant',
   routeTree,
   // notFoundRoute,
   defaultPreload: false,

frontend/src/modules/attachments/carousel.tsx

@@ -83,7 +83,7 @@ const AttachmentsCarousel = ({ slides = [], isDialog = false, slide = 0, saveInS
       }}
     >
       {slides[current] && isDialog && (
-        <div className="fixed z-10 top-0 left-0 w-full flex gap-2 p-3 text-center sm:text-left bg-background/60 backdrop-blur-sm">
+        <div className="fixed z-10 top-0 left-0 w-full flex gap-2 p-3 text-center sm:text-left bg-background/60 backdrop-blur-xs">
           {slides[current].name && (
             <h2 className="text-base tracking-tight flex ml-1 items-center gap-2 leading-6 h-6">
               {slides[current].fileType && <FilePlaceholder fileType={slides[current].fileType} iconSize={16} strokeWidth={2} />}

frontend/src/modules/attachments/helpers.tsx

@@ -16,14 +16,14 @@ export const openAttachmentDialog = (
 
   const { removeCallback } = dialogOptions || {};
   dialog(
-    <div className="flex flex-wrap relative -z-[1] h-screen justify-center p-2 grow">
+    <div className="flex flex-wrap relative -z-1 h-screen justify-center p-2 grow">
       <AttachmentsCarousel slides={attachments} isDialog slide={attachment} saveInSearchParams={saveInSearchParams} />
     </div>,
     {
       id: 'attachment-file-preview',
       drawerOnMobile: false,
       className: 'min-w-full h-screen border-0 p-0 rounded-none flex flex-col mt-0',
-      headerClassName: 'absolute p-4 w-full backdrop-blur-sm bg-background/50',
+      headerClassName: 'absolute p-4 w-full backdrop-blur-xs bg-background/50',
       hideClose: true,
       autoFocus: true,
       removeCallback,

frontend/src/modules/attachments/render-image/index.tsx

@@ -95,7 +95,7 @@ const RenderImage = forwardRef<HTMLImageElement, RenderImageProps>(
     return (
       <>
         {showButtons && (
-          <div className="absolute z-20 flex items-center justify-center left-[calc(50vw-6.5rem)] bottom-3 gap-0 rounded-md text-sm shadow-sm bg-transparent ring-offset-background">
+          <div className="absolute z-20 flex items-center justify-center left-[calc(50vw-6.5rem)] bottom-3 gap-0 rounded-md text-sm shadow-xs bg-transparent ring-offset-background">
             <ControlButton tooltipContent="Zoom in" onClick={zoomIn} icon={<Plus size={14} />} className="rounded-l-md border-r-0 " />
             <ControlButton tooltipContent="Zoom out" onClick={zoomOut} icon={<Minus size={14} />} className="border-r-0 " />
             <ControlButton tooltipContent="Rotate right" onClick={rotateRight} icon={<RotateCwSquare size={14} />} className="border-r-0 " />

frontend/src/modules/auth/oauth-options.tsx

@@ -81,7 +81,7 @@ const OauthOptions = ({ email, actionType = 'signIn', showPasskey = false }: Oau
                 data-provider={provider}
                 src={`/static/images/${provider.toLowerCase()}-icon.svg`}
                 alt={provider}
-                className="w-4 h-4 mr-1 group-data-[mode=dark]:data-[provider=github]:invert"
+                className="w-4 h-4 mr-1 data-[provider=github]:group-data-[mode=dark]:invert"
                 loading="lazy"
               />
               <span>{actionType === 'signIn' ? t('common:sign_in') : t('common:sign_up')}</span>

frontend/src/modules/auth/sign-in-form.tsx

@@ -85,7 +85,7 @@ export const SignInForm = ({ email, resetSteps, emailEnabled }: Props) => {
         </Button>
       </h1>
       {emailEnabled && (
-        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 !mt-0">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 mt-0!">
           <FormField
             control={form.control}
             name="email"

frontend/src/modules/auth/waitlist-form.tsx

@@ -84,7 +84,7 @@ export const WaitlistForm = ({ email, buttonContent, emailField, dialog: isDialo
               <FormControl>
                 <Input
                   {...field}
-                  className="block xs:min-w-80 w-full py-6 h-14 px-8 rounded-full border border-gray-400/40 bg-background/50 text-base/6 ring-4 ring-primary/10 transition focus:border-gray-400 focus:outline-none focus-visible:ring-primary/20"
+                  className="block xs:min-w-80 w-full py-6 h-14 px-8 rounded-full border border-gray-400/40 bg-background/50 text-base/6 ring-4 ring-primary/10 transition focus:border-gray-400 focus:outline-hidden focus-visible:ring-primary/20"
                   type="email"
                   disabled={!emailField}
                   readOnly={!emailField}

frontend/src/modules/common/app-content.tsx

@@ -10,7 +10,7 @@ export const AppContent = () => {
       fallbackRender={({ error, resetErrorBoundary }) => <ErrorNotice level="app" error={error} resetErrorBoundary={resetErrorBoundary} />}
     >
       <div id="app-content" className="transition-spacing duration-500 ease-in-out">
-        <div className="sm:min-h-[100vh] max-sm:min-h-[calc(100vh-4rem)] sm:ml-16 group-[.focus-view]/body:ml-0 group-[.nav-sheet-open.keep-menu-open]/body:xl:pl-80 transition-all duration-300 ease-in-out">
+        <div className="sm:min-h-[100vh] max-sm:min-h-[calc(100vh-4rem)] sm:ml-16 group-[.focus-view]/body:ml-0 xl:group-[.nav-sheet-open.keep-menu-open]/body:pl-80 transition-all duration-300 ease-in-out">
           <main id="app-content-inner" className="flex-1 flex flex-col" aria-label="Main Content">
             <Alerter mode="app" />
             <Outlet />

frontend/src/modules/common/country-flag.tsx

@@ -18,7 +18,7 @@ export const CountryFlag = ({ countryCode, className, imgType = 'svg', width = 1
   if (!isOnline) return null;
   return (
     <img
-      className={cn('inline overflow-hidden shadow-sm', className)}
+      className={cn('inline overflow-hidden shadow-xs', className)}
       {...props}
       src={flagUrl}
       alt={`Flag of ${countryCode.toUpperCase()}`}

frontend/src/modules/common/data-table/columns-view.tsx

@@ -35,7 +35,7 @@ const ColumnsView = <TData,>({ columns, setColumns, className = '' }: Props<TDat
         <DropdownMenuTrigger asChild>
           <Button variant="outline" className="relative flex">
             {filteredColumns.some((column) => !column.visible) && (
-              <Badge className="absolute -right-1 -top-1 flex h-2 w-2 justify-center p-0 z-[100]" />
+              <Badge className="absolute -right-1 -top-1 flex h-2 w-2 justify-center p-0 z-100" />
             )}
             <SlidersHorizontal className="h-4 w-4" />
             <span className="ml-1 max-xl:hidden">{t('common:view')}</span>

frontend/src/modules/common/data-table/index.tsx

@@ -166,7 +166,7 @@ export const DataTable = <TData,>({
               <div
                 key={rows.length}
                 ref={measureRef}
-                className="h-4 w-0 bg-red-700 absolute bottom-0 z-[200]"
+                className="h-4 w-0 bg-red-700 absolute bottom-0 z-200"
                 style={{
                   height: `${Math.min(rows.length, 200) * 0.25 * rowHeight}px`,
                   maxHeight: `${rowHeight * limit}px`,

frontend/src/modules/common/data-table/select-column.tsx

@@ -32,7 +32,7 @@ export const renderSelect = <TRow extends User | Member | Organization>({
       <SelectTrigger className="h-8 border-none p-2 text-xs tracking-wider">
         <SelectValue placeholder={role} />
       </SelectTrigger>
-      <SelectContent sideOffset={-41} alignOffset={-5} className="!duration-0">
+      <SelectContent sideOffset={-41} alignOffset={-5} className="duration-0!">
         {options.map((option) => (
           <SelectItem key={option} value={option}>
             {t(option)}

frontend/src/modules/common/data-table/style.css

@@ -15,6 +15,7 @@
   --rdg-font-size: 0.888rem;
   --rdg-selection-color: hsl(var(--ring));
 
+  border: none;
   grid-template-rows: none !important;
 }
 
@@ -28,6 +29,8 @@
   display: flex;
   align-items: center;
   min-height: var(--rdg-header-row-height);
+  border-inline-end: none;
+  border-block-end: none;
 }
 
 .rdg-cell:not([role="columnheader"]) {