Profile page UI and functionality implemented

2026-04-25 17:57:58 -06:00
parent 7dd2562bae
commit 68517796a9
103 changed files with 4439 additions and 1476 deletions
@@ -1,8 +1,9 @@
 "use client";

-import { memo, useEffect, useRef } from "react";
+import { memo, useRef } from "react";
 import { CreateView } from "./Create.view";
 import type { CreateProps } from "./Create.types";
+import { useCreateModalA11y } from "./useCreateModalA11y";

 const CreateContainer = memo<CreateProps>(
  ({
@@ -29,85 +30,8 @@ const CreateContainer = memo<CreateProps>(
  }) => {
    const createRef = useRef<HTMLDivElement>(null);
    const overlayRef = useRef<HTMLDivElement>(null);
-    const previousActiveElementRef = useRef<HTMLElement | null>(null);

-    // Handle ESC key to close
-    useEffect(() => {
-      if (!isOpen) return;
-
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === "Escape") {
-          onClose();
-        }
-      };
-
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("keydown", handleEscape);
-      };
-    }, [isOpen, onClose]);
-
-    // Focus trap and body scroll lock
-    useEffect(() => {
-      if (!isOpen) return;
-
-      // Store previous active element
-      previousActiveElementRef.current = document.activeElement as HTMLElement;
-
-      // Lock body scroll
-      document.body.style.overflow = "hidden";
-
-      // Focus the first focusable element in the create dialog
-      if (createRef.current) {
-        const focusableElements = createRef.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        const firstElement = focusableElements[0] as HTMLElement;
-        if (firstElement) {
-          firstElement.focus();
-        } else {
-          // Fallback: make create dialog focusable and focus it
-          createRef.current.setAttribute("tabindex", "-1");
-          createRef.current.focus();
-        }
-      }
-
-      // Focus trap
-      const handleTab = (e: KeyboardEvent) => {
-        if (e.key !== "Tab" || !createRef.current) return;
-
-        const focusableElements = createRef.current.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        const firstElement = focusableElements[0] as HTMLElement;
-        const lastElement = focusableElements[
-          focusableElements.length - 1
-        ] as HTMLElement;
-
-        if (e.shiftKey) {
-          // Shift + Tab
-          if (document.activeElement === firstElement) {
-            e.preventDefault();
-            lastElement?.focus();
-          }
-        } else {
-          // Tab
-          if (document.activeElement === lastElement) {
-            e.preventDefault();
-            firstElement?.focus();
-          }
-        }
-      };
-
-      document.addEventListener("keydown", handleTab);
-
-      return () => {
-        document.body.style.overflow = "";
-        document.removeEventListener("keydown", handleTab);
-        // Restore focus to previous element
-        previousActiveElementRef.current?.focus();
-      };
-    }, [isOpen]);
+    useCreateModalA11y(isOpen, onClose, createRef);

    return (
      <CreateView
@@ -1,3 +1,6 @@
+import type { RefObject } from "react";
+import type { CreateModalBackdropVariant } from "./CreateModalFrame.view";
+
 export interface CreateProps {
  isOpen: boolean;
  onClose: () => void;
@@ -28,10 +31,10 @@ export interface CreateProps {
  upload?: boolean;
  proportion?: boolean;
  /**
-   * Backdrop behind the dialog. `loginYellow` matches the Login modal’s blurred brand overlay.
+   * Backdrop behind the dialog. `blurredYellow` matches the login-style blurred brand overlay.
   * @default "default"
   */
-  backdropVariant?: "default" | "loginYellow";
+  backdropVariant?: CreateModalBackdropVariant;
 }

 export interface CreateViewProps {
@@ -54,7 +57,7 @@ export interface CreateViewProps {
  className: string;
  ariaLabel?: string;
  ariaLabelledBy?: string;
-  createRef: React.RefObject<HTMLDivElement>;
-  overlayRef: React.RefObject<HTMLDivElement>;
-  backdropVariant: "default" | "loginYellow";
+  createRef: RefObject<HTMLDivElement | null>;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  backdropVariant: CreateModalBackdropVariant;
 }
@@ -1,20 +1,11 @@
 "use client";

-import { createPortal } from "react-dom";
 import ContentLockup from "../../type/ContentLockup";
 import ModalFooter from "../../utility/ModalFooter";
 import ModalHeader from "../../utility/ModalHeader";
+import { CreateModalFrameView } from "./CreateModalFrame.view";
 import type { CreateViewProps } from "./Create.types";

-const backdropOverlayClasses: Record<
-  CreateViewProps["backdropVariant"],
-  string
-> = {
-  default: "fixed inset-0 bg-black/50 z-[9998]",
-  loginYellow:
-    "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
-};
-
 export function CreateView({
  isOpen,
  onClose,
@@ -39,70 +30,48 @@ export function CreateView({
  overlayRef,
  backdropVariant,
 }: CreateViewProps) {
-  if (!isOpen) return null;
+  return (
+    <CreateModalFrameView
+      isOpen={isOpen}
+      onOverlayClick={onClose}
+      backdropVariant={backdropVariant}
+      className={className}
+      ariaLabel={ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      overlayRef={overlayRef}
+      dialogRef={createRef}
+    >
+      <ModalHeader onClose={onClose} onMoreOptions={onClose} />

-  const createContent = (
-    <>
-      {/* Overlay */}
-      <div
-        ref={overlayRef}
-        className={backdropOverlayClasses[backdropVariant]}
-        onClick={onClose}
-        aria-hidden="true"
-      />
-
-      {/* Create Dialog: max-h ensures modal fits viewport; content scrolls inside */}
-      <div
-        ref={createRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        className={`fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--color-surface-default-primary)] rounded-[var(--radius-500,20px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] w-[560px] max-h-[90vh] flex min-h-0 flex-col overflow-hidden z-[9999] ${className}`}
-      >
-        {/* Header with close buttons */}
-        <ModalHeader onClose={onClose} onMoreOptions={onClose} />
-
-        {/* Header: custom headerContent (when provided) or default title/description */}
-        {headerContent !== undefined ? (
-          <div className="shrink-0">{headerContent}</div>
-        ) : title || description ? (
-          <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
-            <ContentLockup
-              title={title}
-              description={description}
-              variant="modal"
-              alignment="left"
-            />
-          </div>
-        ) : null}
-
-        {/* Content Area (scrollable when content overflows) */}
-        <div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
-          {children}
+      {headerContent !== undefined ? (
+        <div className="shrink-0">{headerContent}</div>
+      ) : title || description ? (
+        <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+          <ContentLockup
+            title={title}
+            description={description}
+            variant="modal"
+            alignment="left"
+          />
        </div>
+      ) : null}

-        {/* Footer (always visible at bottom of modal) */}
-        <ModalFooter
-          showBackButton={showBackButton}
-          showNextButton={showNextButton}
-          onBack={onBack}
-          onNext={onNext}
-          backButtonText={backButtonText}
-          nextButtonText={nextButtonText}
-          nextButtonDisabled={nextButtonDisabled}
-          currentStep={currentStep}
-          totalSteps={totalSteps}
-          footerContent={footerContent}
-        />
+      <div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
+        {children}
      </div>
-    </>
+
+      <ModalFooter
+        showBackButton={showBackButton}
+        showNextButton={showNextButton}
+        onBack={onBack}
+        onNext={onNext}
+        backButtonText={backButtonText}
+        nextButtonText={nextButtonText}
+        nextButtonDisabled={nextButtonDisabled}
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        footerContent={footerContent}
+      />
+    </CreateModalFrameView>
  );
-
-  // Portal to body
-  if (typeof window !== "undefined") {
-    return createPortal(createContent, document.body);
-  }
-
-  return null;
 }
@@ -0,0 +1,69 @@
+"use client";
+
+import type { ReactNode, RefObject } from "react";
+import { createPortal } from "react-dom";
+
+/** Matches {@link CreateView} overlay options — shared with {@link DialogView}. */
+export type CreateModalBackdropVariant = "default" | "blurredYellow";
+
+const backdropOverlayClasses: Record<CreateModalBackdropVariant, string> = {
+  default: "fixed inset-0 bg-black/50 z-[9998]",
+  blurredYellow:
+    "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
+};
+
+export type CreateModalFrameViewProps = {
+  isOpen: boolean;
+  onOverlayClick: () => void;
+  backdropVariant: CreateModalBackdropVariant;
+  className: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  dialogRef: RefObject<HTMLDivElement | null>;
+  children: ReactNode;
+};
+
+/**
+ * Portal + dimmed overlay + centered dialog shell used by Create and Dialog.
+ */
+export function CreateModalFrameView({
+  isOpen,
+  onOverlayClick,
+  backdropVariant,
+  className,
+  ariaLabel,
+  ariaLabelledBy,
+  overlayRef,
+  dialogRef,
+  children,
+}: CreateModalFrameViewProps) {
+  if (!isOpen) return null;
+
+  const content = (
+    <>
+      <div
+        ref={overlayRef}
+        className={backdropOverlayClasses[backdropVariant]}
+        onClick={onOverlayClick}
+        aria-hidden="true"
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        className={`fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--color-surface-default-primary)] rounded-[var(--radius-500,20px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] w-[560px] max-h-[90vh] flex min-h-0 flex-col overflow-hidden z-[9999] ${className}`}
+      >
+        {children}
+      </div>
+    </>
+  );
+
+  if (typeof window !== "undefined") {
+    return createPortal(content, document.body);
+  }
+
+  return null;
+}
@@ -0,0 +1,82 @@
+"use client";
+
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+/**
+ * Escape-to-close, body scroll lock, focus move-in and tab trap for Create-shell modals.
+ */
+export function useCreateModalA11y(
+  isOpen: boolean,
+  onClose: () => void,
+  dialogRef: RefObject<HTMLDivElement | null>,
+): void {
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    previousActiveElementRef.current = document.activeElement as HTMLElement;
+    document.body.style.overflow = "hidden";
+
+    if (dialogRef.current) {
+      const focusableElements = dialogRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      const firstElement = focusableElements[0] as HTMLElement;
+      if (firstElement) {
+        firstElement.focus();
+      } else {
+        dialogRef.current.setAttribute("tabindex", "-1");
+        dialogRef.current.focus();
+      }
+    }
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== "Tab" || !dialogRef.current) return;
+
+      const focusableElements = dialogRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[
+        focusableElements.length - 1
+      ] as HTMLElement;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleTab);
+
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleTab);
+      previousActiveElementRef.current?.focus();
+    };
+  }, [isOpen]);
+}
@@ -0,0 +1,50 @@
+"use client";
+
+import { memo, useId, useRef } from "react";
+import { useCreateModalA11y } from "../Create/useCreateModalA11y";
+import { DialogView } from "./Dialog.view";
+import type { DialogProps } from "./Dialog.types";
+
+const DialogContainer = memo<DialogProps>(
+  ({
+    isOpen,
+    onClose,
+    title,
+    description,
+    footer,
+    children,
+    className = "",
+    ariaLabel,
+    ariaLabelledBy: ariaLabelledByProp,
+    backdropVariant = "default",
+  }) => {
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const autoTitleId = useId();
+    const titleId = ariaLabelledByProp ?? autoTitleId;
+
+    useCreateModalA11y(isOpen, onClose, dialogRef);
+
+    return (
+      <DialogView
+        isOpen={isOpen}
+        onClose={onClose}
+        title={title}
+        description={description}
+        footer={footer}
+        children={children}
+        className={className}
+        ariaLabel={ariaLabel}
+        ariaLabelledBy={titleId}
+        titleId={titleId}
+        backdropVariant={backdropVariant}
+        overlayRef={overlayRef}
+        dialogRef={dialogRef}
+      />
+    );
+  },
+);
+
+DialogContainer.displayName = "Dialog";
+
+export default DialogContainer;
@@ -0,0 +1,37 @@
+import type { ReactNode, RefObject } from "react";
+import type { CreateModalBackdropVariant } from "../Create/CreateModalFrame.view";
+
+export interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  /** Primary actions row (e.g. Cancel + Confirm) — use design-system `Button`s. */
+  footer: ReactNode;
+  /** Optional body below the title block (scrolls when tall). */
+  children?: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  /**
+   * Same backdrop options as the Create modal shell.
+   * @default "default"
+   */
+  backdropVariant?: CreateModalBackdropVariant;
+}
+
+export interface DialogViewProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  footer: ReactNode;
+  children?: ReactNode;
+  className: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  titleId: string;
+  backdropVariant: CreateModalBackdropVariant;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  dialogRef: RefObject<HTMLDivElement | null>;
+}
@@ -0,0 +1,68 @@
+"use client";
+
+import { memo } from "react";
+import ContentLockup from "../../type/ContentLockup";
+import ModalFooter from "../../utility/ModalFooter";
+import ModalHeader from "../../utility/ModalHeader";
+import { CreateModalFrameView } from "../Create/CreateModalFrame.view";
+import type { DialogViewProps } from "./Dialog.types";
+
+export const DialogView = memo(function DialogView({
+  isOpen,
+  onClose,
+  title,
+  description,
+  footer,
+  children,
+  className,
+  ariaLabel,
+  ariaLabelledBy,
+  titleId,
+  backdropVariant,
+  overlayRef,
+  dialogRef,
+}: DialogViewProps) {
+  return (
+    <CreateModalFrameView
+      isOpen={isOpen}
+      onOverlayClick={onClose}
+      backdropVariant={backdropVariant}
+      className={className}
+      ariaLabel={ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      overlayRef={overlayRef}
+      dialogRef={dialogRef}
+    >
+      <ModalHeader onClose={onClose} onMoreOptions={onClose} />
+
+      <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+        <ContentLockup
+          title={title}
+          description={description}
+          variant="modal"
+          alignment="left"
+          titleId={titleId}
+        />
+      </div>
+
+      {children ? (
+        <div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
+          {children}
+        </div>
+      ) : null}
+
+      <ModalFooter
+        showBackButton={false}
+        showNextButton={false}
+        stepper={false}
+        footerContent={
+          <div className="absolute right-[16px] top-[12px] flex max-w-[calc(100%-32px)] flex-wrap items-center justify-end gap-3">
+            {footer}
+          </div>
+        }
+      />
+    </CreateModalFrameView>
+  );
+});
+
+DialogView.displayName = "DialogView";
@@ -0,0 +1,2 @@
+export { default } from "./Dialog.container";
+export type { DialogProps } from "./Dialog.types";