Improve player panel (#2060)

## Description:

Fixes #2015
Improved the Player Panel UI for better usability and appearance.

**Screenshots**

<img width="334" height="523" alt="2"
src="https://github.com/user-attachments/assets/bd0afaac-07df-4abc-a20f-208a0783e558"
/>

<img width="337" height="523" alt="3"
src="https://github.com/user-attachments/assets/f712ad77-4546-487b-9a9c-2c535b8a45f7"
/>

**Future Plan**

Add a modal for sending gold and troops to other players from the Player
Panel.

<img width="343" height="494" alt="sending troops"
src="https://github.com/user-attachments/assets/9c9c21db-e13a-426f-93e9-b477a9db442a"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

abodcraft1

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/components/ui/ActionButton.ts

@@ -0,0 +1,69 @@
+import { html, TemplateResult } from "lit";
+
+export type ButtonVariant =
+  | "normal"
+  | "red"
+  | "green"
+  | "indigo"
+  | "yellow"
+  | "sky";
+export interface ActionButtonProps {
+  onClick: (e: MouseEvent) => void;
+  type?: ButtonVariant;
+  icon: string;
+  iconAlt: string;
+  title: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const ICON_SIZE =
+  "h-5 w-5 shrink-0 transition-transform group-hover:scale-110 text-zinc-400";
+const TEXT_SIZE =
+  "text-base sm:text-[14px] leading-5 font-semibold tracking-tight";
+
+const getButtonStyles = () => {
+  const btnBase =
+    "group w-full min-w-[50px] select-none flex flex-col items-center justify-center " +
+    "gap-1 rounded-lg py-1.5 border border-white/10 bg-white/[0.04] shadow-sm " +
+    "transition-all duration-150 " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 " +
+    "active:translate-y-[1px]";
+
+  return {
+    normal: `${btnBase} text-white/90 hover:bg-white/10 hover:text-white`,
+    red: `${btnBase} text-red-400 hover:bg-red-500/10 hover:text-red-300 focus-visible:ring-red-400/30`,
+    green: `${btnBase} text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-300 focus-visible:ring-emerald-400/30`,
+    yellow: `${btnBase} text-[#f59e0b] hover:bg-[#f59e0b]/10 hover:text-[#fbbf24] focus-visible:ring-[#f59e0b]/30`,
+    indigo: `${btnBase} text-indigo-400 hover:bg-indigo-500/10 hover:text-indigo-300 focus-visible:ring-indigo-400/30`,
+    sky: `${btnBase} text-[#38bdf8] hover:bg-[#38bdf8]/10 hover:text-[#0ea5e9] focus-visible:ring-[#38bdf8]/30`,
+  };
+};
+
+export const actionButton = (props: ActionButtonProps): TemplateResult => {
+  const {
+    onClick,
+    type = "normal",
+    icon,
+    iconAlt,
+    title,
+    label,
+    disabled = false,
+  } = props;
+  const buttonStyles = getButtonStyles();
+  const buttonClass = buttonStyles[type];
+
+  return html`
+    <button
+      @click=${onClick}
+      class="${buttonClass}"
+      title="${title}"
+      type="button"
+      aria-label="${title}"
+      ?disabled=${disabled}
+    >
+      <img src=${icon} alt=${iconAlt} aria-hidden="true" class="${ICON_SIZE}" />
+      <span class="${TEXT_SIZE}">${label}</span>
+    </button>
+  `;
+};

src/client/components/ui/Divider.ts

@@ -0,0 +1,33 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type DividerSpacing = "sm" | "md" | "lg";
+@customElement("ui-divider")
+export class Divider extends LitElement {
+  @property({ type: String })
+  spacing: DividerSpacing = "md";
+
+  @property({ type: String })
+  color: string = "bg-zinc-700/80";
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const spacingClasses: Record<DividerSpacing, string> = {
+      sm: "my-0.5",
+      md: "my-1",
+      lg: "my-2",
+    } as const;
+    const spacing = spacingClasses[this.spacing] ?? spacingClasses.md;
+
+    const colorClass = this.color || "bg-zinc-700/80";
+
+    return html`<div
+      role="separator"
+      aria-hidden="true"
+      class="${spacing} h-px ${colorClass}"
+    ></div>`;
+  }
+}