From 9e4a14e54726af7d156593128d9a682ad390a627 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Wed, 5 Feb 2025 16:37:20 +0100
Subject: [PATCH] feat(Mattermost Plugin): TipTap Editor for Task and
 Reflection (#10796)

---
 packages/client/shared/tiptap/addTagToTask.ts |   2 +-
 .../shared/tiptap/convertTipTapTaskContent.ts |   2 +-
 packages/client/shared/types/index.d.ts       |   1 +
 packages/mattermost-plugin/Atmosphere.ts      |  33 ++--
 .../CreateTaskModal/CreateTaskModal.tsx       |  52 +++---
 .../PushReflection/PushReflectionModal.tsx    | 102 +++++------
 .../components/Sidepanel/TeamRow.tsx          |   2 +-
 .../StartActivityModal/StartActivityModal.tsx |   2 +-
 .../hooks/useMassInvitationToken.tsx          |   2 +-
 .../hooks/useTipTapTaskEditor.tsx             |  36 ++++
 packages/mattermost-plugin/index.css          |  15 ++
 packages/mattermost-plugin/index.tsx          |   6 +-
 packages/mattermost-plugin/package.json       |  10 +-
 packages/mattermost-plugin/postcss.config.js  |   5 +
 .../mattermost-plugin/prod.webpack.config.js  |  26 ++-
 packages/mattermost-plugin/tsconfig.json      |   1 -
 packages/mattermost-plugin/webpack.config.js  |  20 +++
 packages/server/postgres/types/index.d.ts     |   3 +-
 pm2.dev.config.js                             |   2 +-
 yarn.lock                                     | 165 ++++++++++++++++--
 20 files changed, 361 insertions(+), 126 deletions(-)
 create mode 100644 packages/client/shared/types/index.d.ts
 create mode 100644 packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx
 create mode 100644 packages/mattermost-plugin/index.css
 create mode 100644 packages/mattermost-plugin/postcss.config.js

diff --git a/packages/client/shared/tiptap/addTagToTask.ts b/packages/client/shared/tiptap/addTagToTask.ts
index acb1feb3946..d5a09814d34 100644
--- a/packages/client/shared/tiptap/addTagToTask.ts
+++ b/packages/client/shared/tiptap/addTagToTask.ts
@@ -1,5 +1,5 @@
 import {JSONContent} from '@tiptap/core'
-import {TaskTag} from 'parabol-server/postgres/types'
+import {TaskTag} from '../types'
 
 const addTagToTask = (content: JSONContent, tag: TaskTag) => {
   content.content!.push({
diff --git a/packages/client/shared/tiptap/convertTipTapTaskContent.ts b/packages/client/shared/tiptap/convertTipTapTaskContent.ts
index b93c0f01e13..28399ecee42 100644
--- a/packages/client/shared/tiptap/convertTipTapTaskContent.ts
+++ b/packages/client/shared/tiptap/convertTipTapTaskContent.ts
@@ -1,6 +1,6 @@
 import {generateJSON} from '@tiptap/html'
-import {TaskTag} from 'parabol-server/postgres/types'
 import {serverTipTapExtensions} from '~/shared/tiptap/serverTipTapExtensions'
+import {TaskTag} from '../types'
 
 export const convertTipTapTaskContent = (text: string, tags?: TaskTag[]) => {
   let body = `<p>${text}</p>`
diff --git a/packages/client/shared/types/index.d.ts b/packages/client/shared/types/index.d.ts
new file mode 100644
index 00000000000..48e7f104fbb
--- /dev/null
+++ b/packages/client/shared/types/index.d.ts
@@ -0,0 +1 @@
+export type TaskTag = 'private' | 'archived'
diff --git a/packages/mattermost-plugin/Atmosphere.ts b/packages/mattermost-plugin/Atmosphere.ts
index 7b9eba6f68e..088e211c3e6 100644
--- a/packages/mattermost-plugin/Atmosphere.ts
+++ b/packages/mattermost-plugin/Atmosphere.ts
@@ -53,6 +53,21 @@ const fetchGraphQL = (state: State) => (params: RequestParameters, variables: Va
   )
 }
 
+const login = (state: State) => async () => {
+  const {serverUrl, store} = state
+  const response = await fetch(
+    serverUrl + '/login',
+    Client4.getOptions({
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  )
+  const body = await response.json()
+  store.dispatch(onLogin(body.authToken))
+}
+
 const relayFieldLogger: RelayFieldLogger = (event) => {
   if (event.kind === 'relay_resolver.error') {
     console.warn(`Resolver error encountered in ${event.owner}.${event.fieldPath}`)
@@ -67,6 +82,7 @@ export type ResolverContext = {
 
 export class Atmosphere extends Environment {
   state: State
+  login: () => Promise<void>
 
   constructor(serverUrl: string, reduxStore: Store<GlobalState, AnyAction>) {
     const state = {
@@ -88,21 +104,8 @@ export class Atmosphere extends Environment {
       relayFieldLogger
     })
     this.state = state
-  }
-
-  async login() {
-    const {serverUrl, store} = this.state
-    const response = await fetch(
-      serverUrl + '/login',
-      Client4.getOptions({
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      })
-    )
-    const body = await response.json()
-    store.dispatch(onLogin(body.authToken))
+    // bind it here to avoid this == undefined errors
+    this.login = login(state)
   }
 }
 
diff --git a/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx b/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx
index 82ec13ed8b9..5658c26f149 100644
--- a/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx
+++ b/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx
@@ -8,9 +8,13 @@ import {closeCreateTaskModal} from '../../reducers'
 import Select from '../Select'
 import SimpleSelect from '../SimpleSelect'
 
+import {TipTapEditor} from 'parabol-client/components/promptResponse/TipTapEditor'
+import useEventCallback from 'parabol-client/hooks/useEventCallback'
+import {convertTipTapTaskContent} from 'parabol-client/shared/tiptap/convertTipTapTaskContent'
 import type {TaskStatusEnum} from '../../__generated__/CreateTaskModalMutation.graphql'
 import {CreateTaskModalMutation} from '../../__generated__/CreateTaskModalMutation.graphql'
 import {CreateTaskModalQuery} from '../../__generated__/CreateTaskModalQuery.graphql'
+import {useTipTapTaskEditor} from '../../hooks/useTipTapTaskEditor'
 import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
 
@@ -21,6 +25,7 @@ const CreateTaskModal = () => {
     graphql`
       query CreateTaskModalQuery {
         viewer {
+          id
           teams {
             id
             name
@@ -37,7 +42,7 @@ const CreateTaskModal = () => {
   )
 
   const {viewer} = data
-  const {teams} = viewer
+  const {id: userId, teams} = viewer
 
   const [createTask, createTaskLoading] = useMutation<CreateTaskModalMutation>(graphql`
     mutation CreateTaskModalMutation($newTask: CreateTaskInput!) {
@@ -52,7 +57,6 @@ const CreateTaskModal = () => {
     }
   `)
 
-  const [description, setDescription] = useState('')
   const [selectedTeam, setSelectedTeam] = useState<NonNullable<typeof teams>[number]>()
   const [selectedStatus, setSelectedStatus] = useState<TaskStatusEnum>('active')
 
@@ -61,47 +65,40 @@ const CreateTaskModal = () => {
       setSelectedTeam(teams[0])
     }
   }, [teams, selectedTeam])
+  const teamId = selectedTeam?.id
 
   const dispatch = useDispatch()
   const handleClose = () => {
     dispatch(closeCreateTaskModal())
   }
 
-  const handleStart = async () => {
-    if (!selectedTeam || !description || !selectedStatus) {
+  const handleSubmit = useEventCallback(async () => {
+    if (!teamId || !selectedStatus || !editor || editor.isEmpty) {
       return
     }
     if (createTaskLoading) {
       return
     }
 
-    // TODO: let's cheat our way to new task content for now
-    const content = {
-      type: 'doc',
-      content: [
-        {
-          type: 'paragraph',
-          content: [
-            {
-              text: description,
-              type: 'text'
-            }
-          ]
-        }
-      ]
-    }
+    const content = editor.getJSON()
 
     createTask({
       variables: {
         newTask: {
           content: JSON.stringify(content),
           status: selectedStatus,
-          teamId: selectedTeam.id
+          userId,
+          teamId
         }
       }
     })
 
     handleClose()
+  })
+
+  const {editor} = useTipTapTaskEditor(convertTipTapTaskContent(''))
+  if (!editor) {
+    return null
   }
 
   return (
@@ -109,20 +106,19 @@ const CreateTaskModal = () => {
       title='Add a Task'
       commitButtonLabel='Add Task'
       handleClose={handleClose}
-      handleCommit={handleStart}
+      handleCommit={handleSubmit}
     >
+      <div className='absolute top-0 left-0 z-10 z-1050' />
       <div className='form-group'>
         <label className='control-label' htmlFor='description'>
           Description<span className='error-text'> *</span>
         </label>
-        <textarea
-          style={{
-            width: '100%'
-          }}
+        {/* className='channel-switch-modal' is a hack to not lose focus on key press, see 
+            https://github.com/mattermost/mattermost/blob/dc06bb21558aca05dbe330f25459528b39247c32/webapp/channels/src/components/advanced_text_editor/use_textbox_focus.tsx#L63 */}
+        <TipTapEditor
           id='description'
-          className='form-control'
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
+          className='channel-switch-modal form-control h-auto min-h-32 p-2'
+          editor={editor}
           placeholder='Description'
         />
       </div>
diff --git a/packages/mattermost-plugin/components/PushReflection/PushReflectionModal.tsx b/packages/mattermost-plugin/components/PushReflection/PushReflectionModal.tsx
index 4ab64b0904b..b7161c97c87 100644
--- a/packages/mattermost-plugin/components/PushReflection/PushReflectionModal.tsx
+++ b/packages/mattermost-plugin/components/PushReflection/PushReflectionModal.tsx
@@ -2,14 +2,15 @@ import {generateJSON, mergeAttributes} from '@tiptap/core'
 import BaseLink from '@tiptap/extension-link'
 import StarterKit from '@tiptap/starter-kit'
 import graphql from 'babel-plugin-relay/macro'
-import {marked} from 'marked'
 import {getPost} from 'mattermost-redux/selectors/entities/posts'
 import {GlobalState} from 'mattermost-redux/types/store'
+import {TipTapEditor} from 'parabol-client/components/promptResponse/TipTapEditor'
 import React, {useEffect, useMemo} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {useLazyLoadQuery, useMutation} from 'react-relay'
 import {PushReflectionModalMutation} from '../../__generated__/PushReflectionModalMutation.graphql'
 import {PushReflectionModalQuery} from '../../__generated__/PushReflectionModalQuery.graphql'
+import {useTipTapTaskEditor} from '../../hooks/useTipTapTaskEditor'
 import {closePushPostAsReflection} from '../../reducers'
 import {getPostURL, pushPostAsReflection} from '../../selectors'
 import Modal from '../Modal'
@@ -70,18 +71,40 @@ const PushReflectionModal = () => {
     description: string
   }>()
 
-  const [comment, setComment] = React.useState('')
-  const formattedPost = useMemo(() => {
+  const htmlPost = useMemo(() => {
     if (!post) {
-      return null
+      return ''
     }
-    const quotedMessage = post.message
-      .split('\n')
-      .map((line) => `> ${line}`)
-      .join('\n')
-    return `${quotedMessage}\n\n[See comment in Mattermost](${postUrl})`
+    const quote = PostUtils.formatText(post.message)
+    return `
+    <p />
+    <blockquote>
+      ${quote}
+    </blockquote>
+    <a href=${postUrl}>See comment in Mattermost</a>
+    `
   }, [post])
 
+  const tipTapJson = useMemo(() => {
+    const json = generateJSON(htmlPost, [
+      StarterKit,
+      BaseLink.extend({
+        parseHTML() {
+          return [{tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'}]
+        },
+
+        renderHTML({HTMLAttributes}) {
+          return [
+            'a',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {class: 'link'}),
+            0
+          ]
+        }
+      })
+    ])
+    return JSON.stringify(json)
+  }, [htmlPost])
+
   const [createReflection] = useMutation<PushReflectionModalMutation>(graphql`
     mutation PushReflectionModalMutation($input: CreateReflectionInput!) {
       createReflection(input: $input) {
@@ -90,10 +113,6 @@ const PushReflectionModal = () => {
     }
   `)
 
-  useEffect(() => {
-    setComment('')
-  }, [postId])
-
   useEffect(() => {
     if (!selectedMeeting && retroMeetings && retroMeetings.length > 0) {
       setSelectedMeeting(retroMeetings[0])
@@ -116,30 +135,12 @@ const PushReflectionModal = () => {
   }
 
   const handlePush = async () => {
-    if (!selectedMeeting || !selectedPrompt || (!comment && !post.message)) {
-      console.log('missing data', selectedPrompt, selectedMeeting, comment, post.message)
+    if (!selectedMeeting || !selectedPrompt || !editor || editor.isEmpty) {
+      console.log('missing data', selectedPrompt, selectedMeeting, post.message)
       return
     }
 
-    const markdown = `${comment}\n\n${formattedPost}`
-    const html = await marked.parse(markdown)
-    const rawObject = generateJSON(html, [
-      StarterKit,
-      BaseLink.extend({
-        parseHTML() {
-          return [{tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'}]
-        },
-
-        renderHTML({HTMLAttributes}) {
-          return [
-            'a',
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {class: 'link'}),
-            0
-          ]
-        }
-      })
-    ])
-    const content = JSON.stringify(rawObject)
+    const content = JSON.stringify(editor.getJSON())
 
     createReflection({
       variables: {
@@ -155,6 +156,11 @@ const PushReflectionModal = () => {
     handleClose()
   }
 
+  const {editor} = useTipTapTaskEditor(tipTapJson)
+  if (!editor) {
+    return null
+  }
+
   if (!postId) {
     return null
   }
@@ -177,28 +183,12 @@ const PushReflectionModal = () => {
           <label className='control-label' htmlFor='comment'>
             Add a Comment<span className='error-text'> *</span>
           </label>
-          <div
-            className='form-control'
-            style={{
-              resize: 'none',
-              height: 'auto'
-            }}
-          >
-            <textarea
-              style={{
-                border: 'none',
-                width: '100%'
-              }}
-              id='comment'
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder='Add your comment for the retro...'
-            />
-            <blockquote>
-              {PostUtils.messageHtmlToComponent(PostUtils.formatText(post.message))}
-            </blockquote>
-            <a>See comment in Mattermost</a>
-          </div>
+          <TipTapEditor
+            id='comment'
+            className='channel-switch-modal form-control h-auto min-h-32 p-2'
+            editor={editor}
+            placeholder='TT Add your comment for the retro...'
+          />
         </div>
       )}
       {data && (
diff --git a/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx b/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx
index 4117d0d8af2..00e1e9d2b8c 100644
--- a/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx
+++ b/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx
@@ -6,7 +6,7 @@ import {TeamRow_team$key} from '../../__generated__/TeamRow_team.graphql'
 import {useConfig} from '../../hooks/useConfig'
 import MoreMenu from '../Menu'
 
-import plural from '../../../client/utils/plural'
+import plural from 'parabol-client/utils/plural'
 import {useUnlinkTeam} from '../../hooks/useUnlinkTeam'
 
 const Card = styled.div!`
diff --git a/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx b/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx
index 8aa78290428..9d0c90c4cfc 100644
--- a/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx
+++ b/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx
@@ -115,7 +115,7 @@ const StartActivityModal = () => {
     >
       <div>
         <p>
-          To see the full details for any activity, visit
+          To see the full details for any activity, visit{' '}
           <a href={`${config?.parabolUrl}/activity-library/`} target='_blank' rel='noreferrer'>
             {"Parabol's Activity Library"}
           </a>
diff --git a/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx b/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
index fcfa45a7ad1..4cbc82e1b86 100644
--- a/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
+++ b/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
@@ -1,8 +1,8 @@
 import graphql from 'babel-plugin-relay/macro'
 import {useLazyLoadQuery, useMutation} from 'react-relay'
 
+import {Threshold} from 'parabol-client/types/constEnums'
 import {useCallback} from 'react'
-import {Threshold} from '../../client/types/constEnums'
 import {useMassInvitationTokenMutation} from '../__generated__/useMassInvitationTokenMutation.graphql'
 import {useMassInvitationTokenQuery} from '../__generated__/useMassInvitationTokenQuery.graphql'
 import {mutationResult} from '../utils/mutationResult'
diff --git a/packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx b/packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx
new file mode 100644
index 00000000000..c770c03f8b4
--- /dev/null
+++ b/packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx
@@ -0,0 +1,36 @@
+import Mention from '@tiptap/extension-mention'
+import Placeholder from '@tiptap/extension-placeholder'
+import {useEditor} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import {TiptapLinkExtension} from 'parabol-client/components/promptResponse/TiptapLinkExtension'
+import {LinkMenuState} from 'parabol-client/components/promptResponse/TipTapLinkMenu'
+import {useTipTapEditorContent} from 'parabol-client/hooks/useTipTapEditorContent'
+import {tiptapEmojiConfig} from 'parabol-client/utils/tiptapEmojiConfig'
+import {tiptapTagConfig} from 'parabol-client/utils/tiptapTagConfig'
+import {useState} from 'react'
+
+export const useTipTapTaskEditor = (content: string) => {
+  const [contentJSON, editorRef] = useTipTapEditorContent(content)
+  const [linkState, setLinkState] = useState<LinkMenuState>(null)
+  editorRef.current = useEditor({
+    content: contentJSON,
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        showOnlyWhenEditable: false,
+        placeholder: 'Describe what “Done” looks like'
+      }),
+      Mention.extend({name: 'taskTag'}).configure(tiptapTagConfig),
+      Mention.extend({name: 'emojiMention'}).configure(tiptapEmojiConfig),
+      TiptapLinkExtension.configure({
+        openOnClick: false,
+        popover: {
+          setLinkState
+        }
+      })
+    ],
+    editable: true,
+    autofocus: true
+  })
+  return {editor: editorRef.current, linkState, setLinkState}
+}
diff --git a/packages/mattermost-plugin/index.css b/packages/mattermost-plugin/index.css
new file mode 100644
index 00000000000..8735aeb2457
--- /dev/null
+++ b/packages/mattermost-plugin/index.css
@@ -0,0 +1,15 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "../client";
+
+.form-control.h-auto {
+  @apply h-auto;
+}
+
+div[data-radix-popper-content-wrapper] {
+  @apply z-1500;
+  > div {
+    @apply z-1500;
+  }
+}
diff --git a/packages/mattermost-plugin/index.tsx b/packages/mattermost-plugin/index.tsx
index 464e08a63d0..e2968985edc 100644
--- a/packages/mattermost-plugin/index.tsx
+++ b/packages/mattermost-plugin/index.tsx
@@ -1,3 +1,4 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
 import {AnyAction, Store} from '@reduxjs/toolkit'
 import {GlobalState} from 'mattermost-redux/types/store'
 import SidePanelRoot from './components/Sidepanel'
@@ -17,6 +18,7 @@ import {createEnvironment} from './Atmosphere'
 import AtmosphereProvider from './AtmosphereProvider'
 import AutoLogin from './components/AutoLogin'
 import ModalRoot from './components/ModalRoot'
+import './index.css'
 
 export const init = async (registry: PluginRegistry, store: Store<GlobalState, AnyAction>) => {
   const serverUrl = getPluginServerRoute(store.getState())
@@ -34,7 +36,9 @@ export const init = async (registry: PluginRegistry, store: Store<GlobalState, A
   ))
   registry.registerRootComponent(() => (
     <AtmosphereProvider environment={environment}>
-      <ModalRoot />
+      <Tooltip.Provider>
+        <ModalRoot />
+      </Tooltip.Provider>
     </AtmosphereProvider>
   ))
   const {toggleRHSPlugin} = registry.registerRightHandSidebarComponent(
diff --git a/packages/mattermost-plugin/package.json b/packages/mattermost-plugin/package.json
index 75d0befc40a..e6da46e4cbc 100644
--- a/packages/mattermost-plugin/package.json
+++ b/packages/mattermost-plugin/package.json
@@ -28,6 +28,7 @@
     "@babel/core": "7.18.6",
     "@babel/preset-react": "^7.25.9",
     "@mattermost/types": "6.7.0-0",
+    "@tailwindcss/postcss": "^4.0.3",
     "@types/franc": "^5.0.3",
     "@types/node": "^16.11.62",
     "@types/react": "16.9.11",
@@ -35,21 +36,26 @@
     "@types/react-dom": "17.0.11",
     "@types/relay-runtime": "^18.1.1",
     "@types/styled-components": "^5.1.34",
+    "autoprefixer": "^10.4.20",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-relay": "^18.2.0",
     "graphql": "^16.9.0",
     "jest": "^29.5.0",
     "jest-extended": "^3.2.4",
     "jest-junit": "^16.0.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "openapi-fetch": "^0.10.0",
+    "postcss-loader": "^8.1.1",
     "react": "^17.0.2",
     "relay-compiler": "^18.2.0",
+    "tailwindcss": "^4.0.3",
     "ts-jest": "^29.1.0",
     "ts-node-dev": "^1.0.0-pre.44"
   },
   "dependencies": {
-    "parabol-client": "8.23.8",
     "@mattermost/compass-icons": "0.1.47",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@reduxjs/toolkit": "1.9.7",
     "@tiptap/core": "^2.9.1",
     "@tiptap/extension-link": "^2.9.1",
@@ -57,8 +63,8 @@
     "classnames": "^2.5.1",
     "dd-trace": "^5.0.0",
     "franc-min": "^5.0.0",
-    "marked": "^15.0.4",
     "mattermost-redux": "5.33.1",
+    "parabol-client": "8.23.8",
     "react-relay": "^18.2.0",
     "react-select": "5.8.2",
     "relay-runtime": "^18.1.1",
diff --git a/packages/mattermost-plugin/postcss.config.js b/packages/mattermost-plugin/postcss.config.js
new file mode 100644
index 00000000000..9a1b2d06c44
--- /dev/null
+++ b/packages/mattermost-plugin/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    '@tailwindcss/postcss',
+  ]
+}
diff --git a/packages/mattermost-plugin/prod.webpack.config.js b/packages/mattermost-plugin/prod.webpack.config.js
index 9c2c0a94533..7ab69c03120 100644
--- a/packages/mattermost-plugin/prod.webpack.config.js
+++ b/packages/mattermost-plugin/prod.webpack.config.js
@@ -1,6 +1,7 @@
 const webpack = require('webpack')
 const TerserPlugin = require('terser-webpack-plugin')
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const getProjectRoot = require('../../scripts/webpack/utils/getProjectRoot')
 
 const PROJECT_ROOT = getProjectRoot()
@@ -73,6 +74,8 @@ module.exports = (config) => {
     resolve: {
       alias: {
         '~': path.join(CLIENT_ROOT),
+        // this is for radix-ui, we import & transform ESM packages, but they can't find react/jsx-runtime
+        'react/jsx-runtime': require.resolve('react/jsx-runtime')
       },
       extensions: [".ts", ".tsx", ".js"],
     },
@@ -87,6 +90,22 @@ module.exports = (config) => {
             presets: ["@babel/preset-react", "@babel/preset-typescript"],
           },
         },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              }
+            },
+            {
+              loader: 'postcss-loader',
+            },
+          ],
+        },
       ],
     },
     optimization: {
@@ -119,7 +138,12 @@ module.exports = (config) => {
           }
         },
         */
-      })
+      }),
+      new MiniCssExtractPlugin({
+        filename: '[name]_[contenthash].css',
+        // name refers to the chunk name, which would create 1 copy for each chunk referencing the css
+        chunkFilename: '[contenthash].css'
+      }),
     ],
     externals: {
       react: 'React',
diff --git a/packages/mattermost-plugin/tsconfig.json b/packages/mattermost-plugin/tsconfig.json
index b75106d1a8a..e81a3174753 100644
--- a/packages/mattermost-plugin/tsconfig.json
+++ b/packages/mattermost-plugin/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": "../",
     "paths": {
-      "parabol-server/*": ["server/*"],
       "parabol-client/*": ["client/*"],
       "~/*": ["client/*"]
     },
diff --git a/packages/mattermost-plugin/webpack.config.js b/packages/mattermost-plugin/webpack.config.js
index 96d7e3ac7d0..15bca759e7d 100644
--- a/packages/mattermost-plugin/webpack.config.js
+++ b/packages/mattermost-plugin/webpack.config.js
@@ -62,6 +62,8 @@ module.exports = {
   resolve: {
     alias: {
       '~': path.join(CLIENT_ROOT),
+      // this is for radix-ui, we import & transform ESM packages, but they can't find react/jsx-runtime
+      'react/jsx-runtime': require.resolve('react/jsx-runtime')
     },
     extensions: [".ts", ".tsx", ".js"],
   },
@@ -76,6 +78,24 @@ module.exports = {
           presets: ["@babel/preset-react", "@babel/preset-typescript"],
         },
       },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            }
+          },
+          {
+            loader: 'postcss-loader',
+         }
+        ]
+      }
     ],
   },
   plugins: [
diff --git a/packages/server/postgres/types/index.d.ts b/packages/server/postgres/types/index.d.ts
index 4b2953f312d..b0b0f00134a 100644
--- a/packages/server/postgres/types/index.d.ts
+++ b/packages/server/postgres/types/index.d.ts
@@ -28,6 +28,7 @@ import {
   TaskEstimate as TaskEstimatePG,
   TeamMember as TeamMemberPG
 } from './pg'
+export type {TaskTag} from 'parabol-client/shared/types'
 
 type ExtractTypeFromQueryBuilderSelect<T extends (...args: any[]) => any> =
   ReturnType<T> extends SelectQueryBuilder<_, _, infer X> ? X : never
@@ -56,8 +57,6 @@ export type AutogroupReflectionGroupType = {
   reflectionIds: string[]
 }
 
-export type TaskTag = 'private' | 'archived'
-
 export interface Organization
   extends ExtractTypeFromQueryBuilderSelect<typeof selectOrganizations> {}
 export type OrganizationUser = Selectable<OrganizationUserPG>
diff --git a/pm2.dev.config.js b/pm2.dev.config.js
index f6f37093fb5..93c95ee7df7 100644
--- a/pm2.dev.config.js
+++ b/pm2.dev.config.js
@@ -91,7 +91,7 @@ module.exports = {
       name: 'Mattermost Relay Compiler',
       script: 'yarn workspace parabol-mattermost-plugin relay-compiler',
       watch: [
-        'packages/mattermost-plugin/**/*.ts*'
+        'packages/mattermost-plugin/**/*.[ts*,js*,css]'
       ],
       autorestart: false,
       instances: 1
diff --git a/yarn.lock b/yarn.lock
index bf83ce7bdf4..83e220acebf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7475,61 +7475,125 @@
     jiti "^2.4.2"
     tailwindcss "4.0.1"
 
+"@tailwindcss/node@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.0.3.tgz#2ea18bdc679be00f623e3a7240ab291255dc59b4"
+  integrity sha512-QsVJokOl0pJ4AbJV33D2npvLcHGPWi5MOSZtrtE0GT3tSx+3D0JE2lokLA8yHS1x3oCY/3IyRyy7XX6tmzid7A==
+  dependencies:
+    enhanced-resolve "^5.18.0"
+    jiti "^2.4.2"
+    tailwindcss "4.0.3"
+
 "@tailwindcss/oxide-android-arm64@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.1.tgz#d7f5c1e9e0b5680ab987c3ba71c44cd9f881cedf"
   integrity sha512-eP/rI9WaAElpeiiHDqGtDqga9iDsOClXxIqdHayHsw93F24F03b60CwgGhrGF9Io/EuWIpz3TMRhPVOLhoXivw==
 
+"@tailwindcss/oxide-android-arm64@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.3.tgz#d96756e6a28f563f4c958e7f71cffed687bf7dbc"
+  integrity sha512-S8XOTQuMnpijZRlPm5HBzPJjZ28quB+40LSRHjRnQF6rRYKsvpr1qkY7dfwsetNdd+kMLOMDsvmuT8WnqqETvg==
+
 "@tailwindcss/oxide-darwin-arm64@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.1.tgz#152eb573be423eedaad92f92d5e0eede60c5e22d"
   integrity sha512-jZVUo0kNd1IjxdCYwg4dwegDNsq7PoUx4LM814RmgY3gfJ63Y6GlpJXHOpd5FLv1igpeZox5LzRk2oz8MQoJwQ==
 
+"@tailwindcss/oxide-darwin-arm64@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.3.tgz#0a62c47674ae8dbea3b8888c54595c63e5a22fdf"
+  integrity sha512-smrY2DpzhXvgDhZtQlYAl8+vxJ04lv2/64C1eiRxvsRT2nkw/q+zA1/eAYKvUHat6cIuwqDku3QucmrUT6pCeg==
+
 "@tailwindcss/oxide-darwin-x64@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.1.tgz#4ab26899f746495ff0688dab3a15548f85f6f1ea"
   integrity sha512-E31wHiIf4LB0aKRohrS4U6XfFSACCL9ifUFfPQ16FhcBIL4wU5rcBidvWvT9TQFGPkpE69n5dyXUcqiMrnF/Ig==
 
+"@tailwindcss/oxide-darwin-x64@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.3.tgz#8d682f563d791b99e3a6292000785d12bd7fb1bf"
+  integrity sha512-NTz8x/LcGUjpZAWUxz0ZuzHao90Wj9spoQgomwB+/hgceh5gcJDfvaBYqxLFpKzVglpnbDSq1Fg0p0zI4oa5Pg==
+
 "@tailwindcss/oxide-freebsd-x64@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.1.tgz#1a528886c833d1497c845cba590213beec2edb2e"
   integrity sha512-8/3ZKLMYqgAsBzTeczOKWtT4geF02g9S7cntY5gvqQZ4E0ImX724cHcZJi9k6fkE6aLbvwxxHxaShFvRxblwKQ==
 
+"@tailwindcss/oxide-freebsd-x64@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.3.tgz#1c7dfd69c84f4f5df021a698be8f982f0d5a99c9"
+  integrity sha512-yQc9Q0JCOp3kkAV8gKgDctXO60IkQhHpqGB+KgOccDtD5UmN6Q5+gd+lcsDyQ7N8dRuK1fAud51xQpZJgKfm7g==
+
 "@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.1.tgz#462730729223fe388c7791830c4da05c10c21806"
   integrity sha512-EYjbh225klQfWzy6LeIAfdjHCK+p71yLV/GjdPNW47Bfkkq05fTzIhHhCgshUvNp78EIA33iQU+ktWpW06NgHw==
 
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.3.tgz#7b3ef6f0a44d1a1a099bfced53c3e84a267fdc3d"
+  integrity sha512-e1ivVMLSnxTOU1O3npnxN16FEyWM/g3SuH2pP6udxXwa0/SnSAijRwcAYRpqIlhVKujr158S8UeHxQjC4fGl4w==
+
 "@tailwindcss/oxide-linux-arm64-gnu@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.1.tgz#8bf4c011182cc0c519e51016373b4714348cd619"
   integrity sha512-PrX2SwIqWNP5cYeSyQfrhbk4ffOM338T6CrEwIAGvLPoUZiklt19yknlsBme6bReSw7TSAMy+8KFdLLi5fcWNQ==
 
+"@tailwindcss/oxide-linux-arm64-gnu@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.3.tgz#6a7b8ad88332e8dc5d12c13294f86272f64f7b8a"
+  integrity sha512-PLrToqQqX6sdJ9DmMi8IxZWWrfjc9pdi9AEEPTrtMts3Jm9HBi1WqEeF1VwZZ2aW9TXloE5OwA35zuuq1Bhb/Q==
+
 "@tailwindcss/oxide-linux-arm64-musl@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.1.tgz#90d3ace98b53577b6bf4e20ba9982fd6edb7cebb"
   integrity sha512-iuoFGhKDojtfloi5uj6MIk4kxEOGcsAk/kPbZItF9Dp7TnzVhxo2U/718tXhxGrg6jSL3ST3cQHIjA6yw3OeXw==
 
+"@tailwindcss/oxide-linux-arm64-musl@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.3.tgz#6545c4f5d21e2d1a1d68ff61c07a14ff9abaf05e"
+  integrity sha512-YlzRxx7N1ampfgSKzEDw0iwDkJXUInR4cgNEqmR4TzHkU2Vhg59CGPJrTI7dxOBofD8+O35R13Nk9Ytyv0JUFg==
+
 "@tailwindcss/oxide-linux-x64-gnu@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.1.tgz#a1e7cf6b9c0f8bd5bf2df2bde870d5659b3ed3ac"
   integrity sha512-pNUrGQYyE8RK+N9yvkPmHnlKDfFbni9A3lsi37u4RoA/6Yn+zWVoegvAQMZu3w+jqnpb2A/bYJ+LumcclUZ3yg==
 
+"@tailwindcss/oxide-linux-x64-gnu@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.3.tgz#7f87edc0930c451465fa16e1f995a567ea015f88"
+  integrity sha512-Xfc3z/li6XkuD7Hs+Uk6pjyCXnfnd9zuQTKOyDTZJ544xc2yoMKUkuDw6Et9wb31MzU2/c0CIUpTDa71lL9KHw==
+
 "@tailwindcss/oxide-linux-x64-musl@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.1.tgz#06a071925c1ff156878473926e02ca767bcd42c2"
   integrity sha512-xSGWaDcT6SJ75su9zWXj8GYb2jM/przXwZGH96RTS7HGDIoI1tvgpls88YajG5Sx7hXaqAWCufjw5L/dlu+lzg==
 
+"@tailwindcss/oxide-linux-x64-musl@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.3.tgz#709ba734457fa24e2a9f061e3adb94b3683568af"
+  integrity sha512-ugKVqKzwa/cjmqSQG17aS9DYrEcQ/a5NITcgmOr3JLW4Iz64C37eoDlkC8tIepD3S/Td/ywKAolTQ8fKbjEL4g==
+
 "@tailwindcss/oxide-win32-arm64-msvc@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.1.tgz#c52f624c5e339e8b2e4923a3ffb5e0d0872520e6"
   integrity sha512-BUNL2isUZ2yWnbplPddggJpZxsqGHPZ1RJAYpu63W4znUnKCzI4m/jiy0WpyYqqOKL9jDM5q0QdsQ9mc3aw5YQ==
 
+"@tailwindcss/oxide-win32-arm64-msvc@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.3.tgz#6acd7aa99103427d7c55be4ba7ec4274cdcaa108"
+  integrity sha512-qHPDMl+UUwsk1RMJMgAXvhraWqUUT+LR/tkXix5RA39UGxtTrHwsLIN1AhNxI5i2RFXAXfmFXDqZCdyQ4dWmAQ==
+
 "@tailwindcss/oxide-win32-x64-msvc@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.1.tgz#df27b80c2b990e38b341d9b0f7f1a5e73d3ba367"
   integrity sha512-ZtcVu+XXOddGsPlvO5nh2fnbKmwly2C07ZB1lcYCf/b8qIWF04QY9o6vy6/+6ioLRfbp3E7H/ipFio38DZX4oQ==
 
+"@tailwindcss/oxide-win32-x64-msvc@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.3.tgz#be9aadfaadd4522352af3bb054387b6870840350"
+  integrity sha512-+ujwN4phBGyOsPyLgGgeCyUm4Mul+gqWVCIGuSXWgrx9xVUnf6LVXrw0BDBc9Aq1S2qMyOTX4OkCGbZeoIo8Qw==
+
 "@tailwindcss/oxide@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.0.1.tgz#463be24d47dbf72169085d50b2036df0d2b0f83a"
@@ -7547,6 +7611,23 @@
     "@tailwindcss/oxide-win32-arm64-msvc" "4.0.1"
     "@tailwindcss/oxide-win32-x64-msvc" "4.0.1"
 
+"@tailwindcss/oxide@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.0.3.tgz#488ea050dddf521493e998542e8c60a6e9997348"
+  integrity sha512-FFcp3VNvRjjmFA39ORM27g2mbflMQljhvM7gxBAujHxUy4LXlKa6yMF9wbHdTbPqTONiCyyOYxccvJyVyI/XBg==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.0.3"
+    "@tailwindcss/oxide-darwin-arm64" "4.0.3"
+    "@tailwindcss/oxide-darwin-x64" "4.0.3"
+    "@tailwindcss/oxide-freebsd-x64" "4.0.3"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.0.3"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.0.3"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.0.3"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.0.3"
+    "@tailwindcss/oxide-linux-x64-musl" "4.0.3"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.0.3"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.0.3"
+
 "@tailwindcss/postcss@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.0.1.tgz#b79b0908d0c1e285aeea4514e1a14df68c177417"
@@ -7559,6 +7640,18 @@
     postcss "^8.4.41"
     tailwindcss "4.0.1"
 
+"@tailwindcss/postcss@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.0.3.tgz#2adac55fc0659020b76b8f2963a30aa2a06b2e38"
+  integrity sha512-qUyxuhuI2eTgRJ+qfCQRAr69Cw7BdSz+PoNFUNoRuhPjikNC8+sxK+Mi/chaXAXewjv/zbf6if6z6ItVLh+e9Q==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    "@tailwindcss/node" "^4.0.3"
+    "@tailwindcss/oxide" "^4.0.3"
+    lightningcss "^1.29.1"
+    postcss "^8.4.41"
+    tailwindcss "4.0.3"
+
 "@tanstack/react-virtual@^3.0.0-beta.60":
   version "3.10.9"
   resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz#40606b6dd8aba8e977f576d8f7df07f69ca63eea"
@@ -9616,7 +9709,7 @@ auto-bind@~4.0.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
-autoprefixer@^10.4.13:
+autoprefixer@^10.4.13, autoprefixer@^10.4.20:
   version "10.4.20"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
   integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
@@ -10321,9 +10414,9 @@ camelize@^1.0.0:
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
 caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001669, caniuse-lite@~1.0.0:
-  version "1.0.30001692"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz#4585729d95e6b95be5b439da6ab55250cd125bf9"
-  integrity sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==
+  version "1.0.30001697"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001697.tgz#040bbbb54463c4b4b3377c716b34a322d16e6fc7"
+  integrity sha512-GwNPlWJin8E+d7Gxq96jxM6w0w+VFeyyXRsjU58emtkYqnbwHqXm5uT2uCmO0RQE9htWknOP4xtBlLmM/gWxvQ==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -11220,6 +11313,16 @@ cosmiconfig@^8.1.0, cosmiconfig@^8.1.3, cosmiconfig@^8.3.5:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
 cpu-features@~0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/cpu-features/-/cpu-features-0.0.10.tgz#9aae536db2710c7254d7ed67cb3cbc7d29ad79c5"
@@ -12214,7 +12317,7 @@ entities@^5.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-5.0.0.tgz#b2ab51fe40d995817979ec79dd621154c3c0f62b"
   integrity sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==
 
-env-paths@^2.2.0:
+env-paths@^2.2.0, env-paths@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
@@ -17137,11 +17240,6 @@ marked@^13.0.3:
   resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
   integrity sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==
 
-marked@^15.0.4:
-  version "15.0.4"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-15.0.4.tgz#864dbf50227b6507646c771c2ef5f0de2924833e"
-  integrity sha512-TCHvDqmb3ZJ4PWG7VEGVgtefA5/euFmsIhxtD0XsBxI39gUSKL81mIRFdt0AiNQozUahd4ke98ZdirExd/vSEw==
-
 marked@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
@@ -17325,7 +17423,7 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.12.1"
     tiny-warning "^1.0.3"
 
-mini-css-extract-plugin@^2.7.2:
+mini-css-extract-plugin@^2.7.2, mini-css-extract-plugin@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b"
   integrity sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==
@@ -19367,6 +19465,15 @@ postcss-loader@^7.0.2:
     jiti "^1.20.0"
     semver "^7.5.4"
 
+postcss-loader@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-8.1.1.tgz#2822589e7522927344954acb55bbf26e8b195dfe"
+  integrity sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==
+  dependencies:
+    cosmiconfig "^9.0.0"
+    jiti "^1.20.0"
+    semver "^7.5.4"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
@@ -22051,7 +22158,7 @@ string-similarity@^3.0.0:
   resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-3.0.0.tgz#07b0bc69fae200ad88ceef4983878d03793847c7"
   integrity sha512-7kS7LyTp56OqOI2BDWQNVnLX/rCxIQn+/5M0op1WV6P8Xx6TZNdajpuqQdiJ7Xx+p1C5CsWMvdiBp9ApMhxzEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -22069,6 +22176,15 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -22155,7 +22271,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -22169,6 +22285,13 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -22396,6 +22519,11 @@ tailwindcss@4.0.1, tailwindcss@^4.0.1:
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.0.1.tgz#ae722697352001233a8f491aeb755e83139c453b"
   integrity sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==
 
+tailwindcss@4.0.3, tailwindcss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.0.3.tgz#8f34c24cd23e021662113bd4e13df1e700cb52f8"
+  integrity sha512-ImmZF0Lon5RrQpsEAKGxRvHwCvMgSC4XVlFRqmbzTEDb/3wvin9zfEZrMwgsa3yqBbPqahYcVI6lulM2S7IZAA==
+
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -24178,7 +24306,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -24196,6 +24324,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"