add some styles

apps/web/biome.json

@@ -15,7 +15,6 @@
       "!**/build",
       "!**/coverage",
       "!**/.next",
-      "!**/*.css"
     ]
   },
   "linter": {
@@ -103,5 +102,13 @@
       "semicolons": "always",
       "arrowParentheses": "always"
     }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2,
+      "lineWidth": 100
+    }
   }
 }

apps/web/src/components/ui/inputs/BusterInput/BusterMentions.module.css

@@ -0,0 +1,53 @@
+.mentions {
+  margin: 1em 0;
+}
+
+/* .mentions--singleLine .mentions__control {
+  
+} */
+.mentions--singleLine .mentions__highlighter {
+  @apply border rounded;
+}
+/*
+.mentions--singleLine .mentions__input {
+  padding: 1px;
+  @apply border rounded
+}
+
+.mentions--multiLine .mentions__control {
+
+}
+.mentions--multiLine .mentions__highlighter {
+
+  padding: 9px;
+  min-height: 63px;
+  @apply border rounded
+}
+.mentions--multiLine .mentions__input {
+  padding: 9px;
+  outline: 0;
+  @apply border rounded
+}
+
+.mentions__suggestions__list {
+  @apply bg-background border
+}
+
+.mentions__suggestions__item {
+  padding: 5px 15px;
+  @apply border-b last:border-b-0
+}
+
+.mentions__suggestions__item--focused {
+  @apply bg-item-hover
+}
+
+.mentions__mention {
+  position: relative;
+  z-index: 1;
+  color: blue;
+  text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
+    -1px -1px 1px white;
+  text-decoration: underline;
+  pointer-events: none;
+} */

apps/web/src/components/ui/inputs/BusterInput/BusterMentionsInput.tsx

@@ -6,6 +6,7 @@ import { Mention, type MentionProps, MentionsInput, type MentionsInputProps } fr
 import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/classMerge';
 import type { BusterInputProps } from './BusterInput.types';
+import styles from './BusterMentions.module.css';
 import { DEFAULT_MENTION_MARKUP } from './parse-input';
 
 export type BusterMentionsInputProps = Pick<
@@ -52,7 +53,8 @@ export const BusterMentionsInput = ({
             //   '&singleLine': {},
           }
         }
-        className={cn(className)}
+        className={cn('mentions')}
+        classNames={styles}
         autoFocus
       >
         {mentionsComponents}
@@ -84,14 +86,11 @@ const useFormattedMentions = (mentions: BusterInputProps['mentions']) => {
             trigger={mention.trigger}
             markup={DEFAULT_MENTION_MARKUP}
             data={formattedItems}
-            displayTransform={
-              mention.displayTransform ??
-              (() => {
-                return <div></div>;
-              })
-            }
+            displayTransform={mention.displayTransform ?? ((_value, label) => `${label}`)}
             appendSpaceOnAdd={mention.appendSpaceOnAdd ?? true}
-            renderSuggestion={(d) => d.display}
+            renderSuggestion={(suggestion, _search, highlightedDisplay, _index, focused) => {
+              return highlightedDisplay;
+            }}
           />
         );
       }) ?? <Mention trigger="" markup={DEFAULT_MENTION_MARKUP} data={[]} appendSpaceOnAdd />,

biome.json

@@ -62,6 +62,14 @@
       "enabled": true
     }
   },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2,
+      "lineWidth": 100
+    }
+  },
   "files": {
     "include": [
       "packages/**/*.ts",
@@ -69,6 +77,7 @@
       "packages/**/*.js",
       "packages/**/*.jsx",
       "packages/**/*.json",
+      "packages/**/*.css",
       "packages/**/*.mjs",
       "packages/**/*.cjs",
       "packages/**/*.mts",