show plugin label descrption on hover

MCDReforged · Nov 4, 2024 · 17bd374 · 17bd374
1 parent 52ec4d1
commit 17bd374
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 27 deletions.
diff --git a/src/app/[locale]/plugins/plugin-card.tsx b/src/app/[locale]/plugins/plugin-card.tsx
@@ -137,7 +137,7 @@ export function PluginCard({plugin}: {plugin: SimplePlugin}) {
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="flex flex-wrap gap-1.5 items-center self-end">
               {plugin.labels.map((label, index) =>
-                <PluginLabel key={index} label={label}/>
+                <PluginLabel key={index} label={label} descPos="bottom"/>
               )}
             </div>
             <div className="flex flex-wrap gap-x-5 gap-y-2">

diff --git a/src/app/[locale]/plugins/sidebar-control.tsx b/src/app/[locale]/plugins/sidebar-control.tsx
@@ -77,7 +77,7 @@ export function ControlCard({everything}: { everything: SimpleEverything }) {
                 defaultChecked={ds.selectedLabels.includes(label)}
                 value={label}
                 radius="sm"
-                label={<PluginLabel label={label}/>}
+                label={<PluginLabel label={label} descPos="right"/>}
                 onChange={event => onLabelFilterCheckboxChanged(label, event.currentTarget.checked)}
               />
               <p>{amount}x</p>

diff --git a/src/components/plugin/plugin-label.tsx b/src/components/plugin/plugin-label.tsx
@@ -1,7 +1,8 @@
-import { Badge } from "@mantine/core";
+import { Badge, FloatingPosition } from "@mantine/core";
 import { Icon, IconAffiliate, IconInfoCircle, IconPlugConnected, IconQuestionMark, IconTools, IconUserCog } from "@tabler/icons-react";
 import { useTranslations } from "next-intl";
 import React from "react";
+import { ClickableTooltip } from "../clickable-tooltip";
 
 interface LabelConfig {
   id: string
@@ -51,18 +52,35 @@ const labelConfigMapping: LabelConfigMapping = labelConfigs.reduce((obj: LabelCo
   return obj
 }, {})
 
-export function PluginLabel({label}: {label: string}) {
-  const t = useTranslations('component.plugin_label')
+interface PluginLabelProps {
+  label: string
+  descPos?: FloatingPosition
+}
+
+export function PluginLabel({label, descPos}: PluginLabelProps) {
+  const tName = useTranslations('component.plugin_label.name')
+  const tDesc = useTranslations('component.plugin_label.description')
 
   const cfg = labelConfigMapping[label] ?? unknownConfig
-  return <Badge
-    classNames={{root: "px-2 border-1 border-solid font-medium text-[12px]"}}
-    variant="light-bordered"
-    color={cfg.color}
-    radius="md"
-    size="22"
-    leftSection={<cfg.icon size={16}/>}
-  >
-    {cfg === unknownConfig ? `(${t(cfg.id)}) ${label}` : t(cfg.id)}
-  </Badge >
+  let badge = (
+    <Badge
+      classNames={{root: "px-2 border-1 border-solid font-medium text-[12px]"}}
+      variant="light-bordered"
+      color={cfg.color}
+      radius="md"
+      size="22"
+      leftSection={<cfg.icon size={16}/>}
+    >
+      {cfg === unknownConfig ? `(${tName(cfg.id)}) ${label}` : tName(cfg.id)}
+    </Badge >
+  )
+
+  if (cfg !== unknownConfig) {
+    badge = (
+      <ClickableTooltip label={tDesc(cfg.id)} position={descPos} openDelay={500}>
+        {badge}
+      </ClickableTooltip>
+    )
+  }
+  return badge
 }
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -25,12 +25,21 @@
       "copied": "Copied"
     },
     "plugin_label": {
-      "information": "information",
-      "tool": "tool",
-      "management": "management",
-      "api": "API",
-      "handler": "handler",
-      "__unknown": "unknown"
+      "name": {
+        "information": "information",
+        "tool": "tool",
+        "management": "management",
+        "api": "API",
+        "handler": "handler",
+        "__unknown": "unknown"
+      },
+      "description": {
+        "information": "Collects and displays information for users",
+        "tool": "A useful tool, or a game helper",
+        "management": "Manages files or other stuffs on the server",
+        "api": "Functions as an API or library that provides common functionalities to other plugins",
+        "handler": "Provides a custom server handler"
+      }
     },
     "plugin_dependencies": {
       "title_plugin": "MCDR Plugin Dependencies",

diff --git a/src/messages/zh-CN.json b/src/messages/zh-CN.json
@@ -25,12 +25,21 @@
       "copied": "已复制"
     },
     "plugin_label": {
-      "information": "信息",
-      "tool": "工具",
-      "management": "管理",
-      "api": "API",
-      "handler": "服务端处理器",
-      "__unknown": "未知"
+      "name": {
+        "information": "信息",
+        "tool": "工具",
+        "management": "管理",
+        "api": "API",
+        "handler": "服务端处理器",
+        "__unknown": "未知"
+      },
+      "description": {
+        "information": "获取并显示各类信息的插件",
+        "tool": "实用工具 / 游戏助手型插件",
+        "management": "管理服务端的文件等各种事务",
+        "api": "作为一个 API 或一个依赖库，为其他插件提供功能支持",
+        "handler": "提供一个自定义服务端处理器"
+      }
     },
     "plugin_dependencies": {
       "title_plugin": "MCDR 插件依赖",