Created ModalHeader and moved/unified all modal headers (#2882)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #(issue number)

## Description:

Moved the Modal Headers into its own class

## 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:

w.o.n

src/client/components/ui/ModalHeader.ts

@@ -0,0 +1,80 @@
+import { html, TemplateResult } from "lit";
+
+export interface ModalHeaderProps {
+  title?: string | TemplateResult;
+  titleContent?: TemplateResult;
+  onBack: (event: MouseEvent) => void;
+  ariaLabel?: string;
+  rightContent?: TemplateResult;
+  leftClassName?: string;
+  buttonClassName?: string;
+  titleClassName?: string;
+  padded?: boolean;
+  showDivider?: boolean;
+}
+
+const DEFAULT_WRAPPER_CLASS = "flex flex-wrap items-center gap-2 shrink-0";
+const DEFAULT_DIVIDER_CLASS = "border-b border-white/10";
+const DEFAULT_PADDING_CLASS = "p-6";
+const DEFAULT_LEFT_CLASS = "flex items-center gap-4 flex-1";
+const DEFAULT_BUTTON_CLASS =
+  "group flex items-center justify-center w-10 h-10 rounded-full shrink-0 " +
+  "bg-white/5 hover:bg-white/10 transition-all border border-white/10";
+const DEFAULT_TITLE_CLASS =
+  "text-white text-xl sm:text-2xl md:text-3xl font-bold uppercase " +
+  "tracking-widest break-words hyphens-auto";
+
+const withClasses = (...classes: Array<string | undefined>) =>
+  classes.filter(Boolean).join(" ");
+
+export const modalHeader = ({
+  title,
+  titleContent,
+  onBack,
+  ariaLabel = "Back",
+  rightContent,
+  leftClassName,
+  buttonClassName,
+  titleClassName,
+  padded = true,
+  showDivider = true,
+}: ModalHeaderProps): TemplateResult => {
+  const wrapperClass = withClasses(
+    DEFAULT_WRAPPER_CLASS,
+    showDivider ? DEFAULT_DIVIDER_CLASS : undefined,
+    padded ? DEFAULT_PADDING_CLASS : undefined,
+  );
+  const leftClass = withClasses(DEFAULT_LEFT_CLASS, leftClassName);
+  const buttonClass = withClasses(DEFAULT_BUTTON_CLASS, buttonClassName);
+  const resolvedTitleClass = withClasses(DEFAULT_TITLE_CLASS, titleClassName);
+
+  return html`
+    <div class="${wrapperClass}">
+      <div class="${leftClass}">
+        <button
+          @click=${onBack}
+          class="${buttonClass}"
+          aria-label="${ariaLabel}"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 19l-7-7m0 0l7-7m-7 7h18"
+            />
+          </svg>
+        </button>
+        ${titleContent ??
+        html`<span class="${resolvedTitleClass}">${title}</span>`}
+      </div>
+      ${rightContent ?? ""}
+    </div>
+  `;
+};