feat(tl): add comment badge adding fun fact in admin(somewhere),fix(admin): text change,

app/(ui)/admin/@modal/tl/ver/[type]/edit/page.tsx

@@ -107,7 +107,7 @@ export default async function TlTypeEditPage({
           <Input placeholder="1" />
         </FormInput>
         <FormInput name="mode" label="Mode">
-          <Input placeholder="Maybe pls let me sleep my mom gonaa kill me soon :sob:" />
+          <Input placeholder="ชั้น 12" />
         </FormInput>
 
         <FormInput name="image" label="Image" subLabel="optional">

app/(ui)/admin/@modal/tl/ver/create/page.tsx

@@ -84,7 +84,7 @@ export default async function TlTypeCreatePage() {
           <Input placeholder="1" defaultValue={maxOrder + 10} />
         </FormInput>
         <FormInput name="mode" label="Mode">
-          <Input placeholder="Maybe pls let me sleep my mom gonaa kill me soon :sob:" />
+          <Input placeholder="ชั้น 12" />
         </FormInput>
         <FormInput name="image" label="Image" subLabel="optional">
           <CdnChooser />

app/(ui)/admin/tl/ver/page.tsx

@@ -25,14 +25,17 @@ export default async function TierlistManagerPage() {
       <Button className="w-fit" asChild>
         <Link href={`/admin/tl/ver/create`}>
           <PlusIcon />
-          <span>Create</span>
+          <span>Create type</span>
         </Link>
       </Button>
       {vers.map((t) => (
         <div className="flex flex-col gap-1 group/type" key={t.id}>
           <div className="font-semibold text-4xl flex items-center gap-2 w-fit text-nowrap">
-            <div className="px-2 py-1 border w-min rounded-md bg-[#2228] flex">
+            <div className="px-2 py-1 border w-min rounded-md bg-[#2228] flex-auto">
               {t.name} <Kbd>{t.id}</Kbd>
+              <Kbd className="text-sm text-muted-foreground ml-2">
+                {t.mode}
+              </Kbd>
             </div>
             <div className="md:opacity-0 group-hover/type:opacity-100 transition-opacity flex gap-1">
               <SimpleTooltip text="Create version">

app/(ui)/tl/[type]/[ver]/character.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Trash } from "lucide-react";
+import { MessageSquareText, Trash } from "lucide-react";
 import Link from "next/link";
 import { useContext, useEffect, useState } from "react";
 import AmberIcon from "#/amber.png";
@@ -123,7 +123,7 @@ export function Draggable({
                 }}
               >
                 <div className="relative">
-                  <SimpleTooltip text={char.name} delayDuration={1000}>
+                  <SimpleTooltip text={char.name} delayDuration={500}>
                     <Image
                       src={`/cdn/${char.image}`}
                       style={{
@@ -147,9 +147,21 @@ export function Draggable({
                     "top-0.5 right-0.5",
                     "top-0.5 left-0.5",
                   ].map((p, i) => {
-                    if (!assignedBadges[i]) return "";
+                    const items = [...assignedBadges, ...(comment ? ["__comment__"] : [])];
+                    if (!items[i]) return "";
+                    if (items[i] === "__comment__") {
+                      return (
+                        <div
+                          key={p}
+                          style={{ width: badgeSize, height: badgeSize }}
+                          className={`bg-[#2228] ${p} absolute rounded border flex items-center justify-center`}
+                        >
+                          <MessageSquareText style={{ width: badgeSize * 0.7, height: badgeSize * 0.7 }} />
+                        </div>
+                      );
+                    }
                     const badge = badges.find(
-                      (e) => e.id === assignedBadges[i],
+                      (e) => e.id === items[i],
                     );
                     if (!badge) return "";
                     return badge.image ? (

components/user.tsx

@@ -76,6 +76,9 @@ export function NavUser() {
             sideOffset={4}
           >
             <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <span className="text-xs">Fun fact: nothing in this is working btw</span>
+              </div>
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
                   {/* <AvatarImage src={user.avatar} alt={user.name} /> */}