From 6c92206acef2f6093a3bbf981832ccd52a056202 Mon Sep 17 00:00:00 2001 From: Christian Fehmer Date: Wed, 14 Jan 2026 16:19:51 +0100 Subject: [PATCH 1/5] refactor: convert footer to a component (@fehmer, @miodec) (#7346) Co-authored-by: Miodec --- .../components/AnimatedModal.spec.tsx | 24 +-- frontend/__tests__/components/Button.spec.tsx | 167 ++++++++++++++++++ frontend/src/html/footer.html | 86 --------- frontend/src/html/popups.html | 144 +-------------- frontend/src/index.html | 3 +- frontend/src/styles/buttons.scss | 4 +- frontend/src/styles/index.scss | 6 +- frontend/src/styles/media-queries-green.scss | 19 -- frontend/src/styles/media-queries-purple.scss | 47 ----- frontend/src/styles/popups.scss | 99 ----------- frontend/src/ts/commandline/commandline.ts | 113 +++++++++--- frontend/src/ts/commandline/lists.ts | 5 +- frontend/src/ts/components/AnimatedModal.tsx | 89 +++------- frontend/src/ts/components/Button.tsx | 73 ++++++++ frontend/src/ts/components/Conditional.tsx | 13 ++ frontend/src/ts/components/ContactModal.scss | 36 ++++ frontend/src/ts/components/ContactModal.tsx | 66 +++++++ .../footer.scss => ts/components/Footer.scss} | 91 +++++----- frontend/src/ts/components/Footer.tsx | 95 ++++++++++ .../src/ts/components/ModalChainContext.tsx | 72 -------- frontend/src/ts/components/Modals.tsx | 14 ++ frontend/src/ts/components/SupportModal.scss | 42 +++++ frontend/src/ts/components/SupportModal.tsx | 52 ++++++ .../src/ts/components/ThemeIndicator.scss | 14 ++ frontend/src/ts/components/ThemeIndicator.tsx | 51 ++++++ frontend/src/ts/components/VersionButton.scss | 17 ++ frontend/src/ts/components/VersionButton.tsx | 1 + .../src/ts/components/VersionHistoryModal.tsx | 8 +- frontend/src/ts/components/mount.tsx | 11 +- .../src/ts/controllers/theme-controller.ts | 30 +--- frontend/src/ts/event-handlers/about.ts | 7 +- frontend/src/ts/event-handlers/footer.ts | 46 ----- frontend/src/ts/index.ts | 1 - frontend/src/ts/modals/contact.ts | 9 - frontend/src/ts/modals/support.ts | 20 --- frontend/src/ts/signals/core.ts | 12 ++ frontend/src/ts/stores/modals.ts | 119 ++++++++++++- frontend/src/ts/utils/animated-modal.ts | 51 +++++- frontend/static/themes/9009.css | 2 +- frontend/static/themes/solarized_osaka.css | 2 +- 40 files changed, 1007 insertions(+), 754 deletions(-) create mode 100644 frontend/__tests__/components/Button.spec.tsx delete mode 100644 frontend/src/html/footer.html create mode 100644 frontend/src/ts/components/Button.tsx create mode 100644 frontend/src/ts/components/Conditional.tsx create mode 100644 frontend/src/ts/components/ContactModal.scss create mode 100644 frontend/src/ts/components/ContactModal.tsx rename frontend/src/{styles/footer.scss => ts/components/Footer.scss} (58%) create mode 100644 frontend/src/ts/components/Footer.tsx delete mode 100644 frontend/src/ts/components/ModalChainContext.tsx create mode 100644 frontend/src/ts/components/Modals.tsx create mode 100644 frontend/src/ts/components/SupportModal.scss create mode 100644 frontend/src/ts/components/SupportModal.tsx create mode 100644 frontend/src/ts/components/ThemeIndicator.scss create mode 100644 frontend/src/ts/components/ThemeIndicator.tsx create mode 100644 frontend/src/ts/components/VersionButton.scss delete mode 100644 frontend/src/ts/event-handlers/footer.ts delete mode 100644 frontend/src/ts/modals/contact.ts delete mode 100644 frontend/src/ts/modals/support.ts diff --git a/frontend/__tests__/components/AnimatedModal.spec.tsx b/frontend/__tests__/components/AnimatedModal.spec.tsx index 1c10d9f573fe..4ca8e8870eea 100644 --- a/frontend/__tests__/components/AnimatedModal.spec.tsx +++ b/frontend/__tests__/components/AnimatedModal.spec.tsx @@ -13,8 +13,6 @@ describe("AnimatedModal", () => { }); function renderModal(props: { - isOpen: boolean; - onClose: () => void; onEscape?: (e: KeyboardEvent) => void; onBackdropClick?: (e: MouseEvent) => void; class?: string; @@ -29,7 +27,7 @@ describe("AnimatedModal", () => { modalDiv: HTMLDivElement; } { const { container } = render(() => ( - +
Test Content
 )); @@ -45,14 +43,14 @@ describe("AnimatedModal", () => { } it("renders dialog with correct id and class", () => { - const { dialog } = renderModal({ isOpen: false, onClose: vi.fn() }); + const { dialog } = renderModal({}); - expect(dialog).toHaveAttribute("id", "TestModal"); + expect(dialog).toHaveAttribute("id", "SupportModal"); expect(dialog).toHaveClass("modalWrapper", "hidden"); }); it("renders children inside modal div", () => { - const { modalDiv } = renderModal({ isOpen: false, onClose: vi.fn() }); + const { modalDiv } = renderModal({}); expect( modalDiv.querySelector("[data-testid='modal-content']"), @@ -60,25 +58,19 @@ describe("AnimatedModal", () => { }); it("has escape handler attached", () => { - const onClose = vi.fn(); - - const { dialog } = renderModal({ isOpen: true, onClose }); + const { dialog } = renderModal({}); expect(dialog.onkeydown).toBeDefined(); }); it("has backdrop click handler attached", () => { - const onClose = vi.fn(); - - const { dialog } = renderModal({ isOpen: true, onClose }); + const { dialog } = renderModal({}); expect(dialog.onmousedown).toBeDefined(); }); it("applies custom class to dialog", () => { const { dialog } = renderModal({ - isOpen: false, - onClose: vi.fn(), class: "customClass", }); @@ -87,11 +79,9 @@ describe("AnimatedModal", () => { it("renders with animationMode none", () => { const { dialog } = renderModal({ - isOpen: false, - onClose: vi.fn(), animationMode: "none", }); - expect(dialog).toHaveAttribute("id", "TestModal"); + expect(dialog).toHaveAttribute("id", "SupportModal"); }); }); diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx new file mode 100644 index 000000000000..5f68eb9145d2 --- /dev/null +++ b/frontend/__tests__/components/Button.spec.tsx @@ -0,0 +1,167 @@ +import { describe, it, expect, vi, afterEach } from "vitest"; +import { render, cleanup } from "@solidjs/testing-library"; +import { Button } from "../../src/ts/components/Button"; + +describe("Button component", () => { + afterEach(() => { + cleanup(); + }); + + it("renders a button element when onClick is provided", () => { + const onClick = vi.fn(); + + const { container } = render(() => ( + + )); + + const child = container.querySelector('[data-testid="child"]'); + expect(child).toBeTruthy(); + expect(child?.textContent).toBe("Child"); + }); +}); diff --git a/frontend/src/html/footer.html b/frontend/src/html/footer.html deleted file mode 100644 index 4d2f7db9d711..000000000000 --- a/frontend/src/html/footer.html +++ /dev/null @@ -1,86 +0,0 @@ - diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html index 29378eb83de2..f67aa61a004f 100644 --- a/frontend/src/html/popups.html +++ b/frontend/src/html/popups.html @@ -1,4 +1,4 @@ - + - - -