feat(playground): add ligatures checkbox component and update translations in PlaygroundPage

messages/en-US.json

@@ -2,6 +2,16 @@
     "Page": {
         "DashboardPage": {
             "title": "Welcome to Judge4c!"
+        },
+        "PlaygroundPage": {
+            "Components": {
+                "playgroundSidebar": {
+                    "title": "Files"
+                },
+                "ligaturesCheckbox": {
+                    "label": "Font Ligatures"
+                }
+            }
         }
     },
     "Components": {

messages/zh-CN.json

@@ -2,6 +2,16 @@
     "Page": {
         "DashboardPage": {
             "title": "欢迎使用Judge4c！"
+        },
+        "PlaygroundPage": {
+            "Components": {
+                "playgroundSidebar": {
+                    "title": "文件"
+                },
+                "ligaturesCheckbox": {
+                    "label": "连字"
+                }
+            }
         }
     },
     "Components": {

package.json

@@ -13,9 +13,11 @@
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/app/playground/components/ligatures-checkbox.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useCodeEditorStore } from "@/store/codeEditorStore";
+
+export default function LigaturesCheckbox() {
+  const t = useTranslations("Page.PlaygroundPage.Components.ligaturesCheckbox");
+  const { setIsLigature } = useCodeEditorStore();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox onCheckedChange={setIsLigature} />
+      <Label>{t("label")}</Label>
+    </div>
+  );
+}

src/app/playground/components/playground-sidebar.tsx

@@ -20,6 +20,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import * as actions from "@/actions";
+import { useTranslations } from "next-intl";
 import { useSession } from "next-auth/react";
 import { COriginal, JavaOriginal } from "devicons-react";
 import { useCodeEditorStore } from "@/store/codeEditorStore";
@@ -89,6 +90,7 @@ export function PlaygroundSidebar({
   });
 
   const username = session?.user?.name ?? "";
+  const t = useTranslations("Page.PlaygroundPage.Components.playgroundSidebar");
 
   React.useEffect(() => {
     async function fetchFileTree() {
@@ -109,7 +111,7 @@ export function PlaygroundSidebar({
     <Sidebar {...props}>
       <SidebarContent>
         <SidebarGroup>
-          <SidebarGroupLabel>Files</SidebarGroupLabel>
+          <SidebarGroupLabel>{t("title")}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {fileTree.children &&

src/app/playground/layout.tsx

@@ -8,6 +8,7 @@ import { Separator } from "@/components/ui/separator";
 import ThemeSelector from "./components/theme-selector";
 import { ModeSwitcher } from "@/components/mode-switcher";
 import LanguageSwitcher from "@/components/language-switcher";
+import LigaturesCheckbox from "./components/ligatures-checkbox";
 import { PlaygroundSidebar } from "@/app/playground/components/playground-sidebar";
 
 export default function PlaygroundLayout({
@@ -24,6 +25,7 @@ export default function PlaygroundLayout({
               <ModeSwitcher />
               <Separator orientation="vertical" className="mr-2 h-4" />
               <ThemeSelector />
+              <LigaturesCheckbox />
             </div>
             <div className="ml-auto px-3">
               <LanguageSwitcher />

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }