Updated displayname and added keymap

src/app/(stats)/player/[ign]/page.tsx

@@ -89,6 +89,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
                 specialRank={player.rank}
                 lastLogin={player.lastLogin}
                 lastLogout={player.lastLogout}
+                prefix={player.prefix}
             />
             <h1>
                 {player.uuid}

src/components/player/displayname.tsx

@@ -9,7 +9,7 @@ type MonthlyPackageRank = Player["player"]["monthlyPackageRank"]
 type RankColor = Player["player"]["monthlyRankColor"]
 
 export default function DisplayName(
-    { ign, rank, monthly, rankColor, plusColor, guildTag, tagColor, specialRank, lastLogin, lastLogout }: {
+    { ign, rank, monthly, rankColor, plusColor, guildTag, tagColor, specialRank, lastLogin, lastLogout, prefix }: {
         ign: string
         rank: NewPackageRank
         monthly: MonthlyPackageRank
@@ -20,6 +20,7 @@ export default function DisplayName(
         specialRank: string | undefined
         lastLogin: number | undefined
         lastLogout: number | undefined
+        prefix: string | undefined
     }
 ) {
     return (
@@ -35,8 +36,9 @@ export default function DisplayName(
                 />
             </Link>
             <h1 className="text-3xl font-bold text-stroke text-stroke-foreground dark:text-stroke-transparent">
-                <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} />{" "}
-                <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} />{" "}
+                <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} prefix={prefix} />
+                {" "}
+                <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} prefix={prefix} />{" "}
                 <GuildTag tag={guildTag} tagColor={tagColor} ign={ign} />
             </h1>
             <OnlineStatus lastLogin={lastLogin} lastLogout={lastLogout} />
@@ -45,14 +47,19 @@ export default function DisplayName(
 }
 
 function PlayerIGN(
-    { ign, rank, monthly, rankColor, specialRank }: {
+    { ign, rank, monthly, rankColor, specialRank, prefix }: {
         ign: string
         rank: NewPackageRank
         monthly: MonthlyPackageRank
         rankColor: RankColor
         specialRank: string | undefined
+        prefix: string | undefined
     }
 ) {
+    if (prefix === "[PIG+++]") {
+        return <span className="text-mc-light-purple">{ign}</span>
+    }
+
     if (specialRank) {
         if (specialRank === "YOUTUBER") {
             return <span className="text-mc-red">{ign}</span>
@@ -86,14 +93,25 @@ function PlayerIGN(
 }
 
 function PlayerRank(
-    { rank, monthly, plusColor, rankColor, specialRank }: {
+    { rank, monthly, plusColor, rankColor, specialRank, prefix }: {
         rank: NewPackageRank
         monthly: MonthlyPackageRank
         plusColor?: string
         rankColor: RankColor
         specialRank: string | undefined
+        prefix: string | undefined
     }
 ) {
+    if (prefix === "[PIG+++]") {
+        return (
+            <>
+                <span className="text-mc-light-purple">[PIG</span>
+                <span className="text-mc-aqua">+++</span>
+                <span className="text-mc-light-purple">]</span>
+            </>
+        )
+    }
+
     if (specialRank) {
         if (specialRank === "YOUTUBER") {
             return (

src/components/search-bar.tsx

@@ -4,13 +4,31 @@ import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import { Search } from "lucide-react"
 import { useRouter } from "next/navigation"
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Button } from "./ui/button"
 
 export function SearchBar({ navbar }: { navbar?: boolean }) {
     const [input, setInput] = useState("")
+    const ref = useRef<HTMLInputElement>(null)
     const router = useRouter()
 
+    useEffect(() => {
+        const controller = new AbortController()
+
+        window.addEventListener("keydown", (ev) => {
+            if (!ref.current) return
+
+            if (ev.ctrlKey && ev.key === "k") {
+                ev.preventDefault()
+                ref.current.focus()
+            }
+        }, { signal: controller.signal })
+
+        return () => {
+            controller.abort()
+        }
+    })
+
     async function handleSearch(e: React.FormEvent) {
         e.preventDefault()
 
@@ -30,6 +48,7 @@ export function SearchBar({ navbar }: { navbar?: boolean }) {
                         type="text"
                         placeholder={!navbar ? "Search for a player..." : ""}
                         className="px-5"
+                        ref={ref}
                         value={input}
                         onChange={(e) => setInput(e.target.value)}
                         onKeyDown={(e) => {

src/lib/schema/player.ts

@@ -66,7 +66,8 @@ export const playerSchema = z.looseObject({
             }).optional()
         }).optional(),
         rank: z.string().optional(),
-        eulaCoins: z.boolean().optional()
+        eulaCoins: z.boolean().optional(),
+        prefix: z.string().transform(v => v.replaceAll(/§[a-z]/g, "")).optional()
     })
 })