From fe7dc293c452a117e9000f7b85ea840bdbf16da0 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 2 Mar 2026 17:19:13 +0100
Subject: [PATCH] [Glitch] Collection share modal cleanup

Port 03b2f77ad243b3b0d419f5e292669e5c40483061 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/modal_shell/index.tsx   | 19 +++++++------------
 .../account_timeline/modals/field_modal.tsx   | 14 +++++++++-----
 .../collections/detail/share_modal.tsx        | 14 +++++++++-----
 .../confirmation_modal.tsx                    | 14 +++++++++-----
 .../features/ui/components/modal_root.jsx     |  3 +--
 .../features/ui/util/async-components.js      |  6 ------
 .../glitch/styles/mastodon/components.scss    |  4 ++++
 7 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/modal_shell/index.tsx b/app/javascript/flavours/glitch/components/modal_shell/index.tsx
index 8b6fdcc6ad..8b06087532 100644
--- a/app/javascript/flavours/glitch/components/modal_shell/index.tsx
+++ b/app/javascript/flavours/glitch/components/modal_shell/index.tsx
@@ -1,16 +1,14 @@
 import classNames from 'classnames';
 
-interface SimpleComponentProps {
+interface ModalShellProps {
   className?: string;
   children?: React.ReactNode;
 }
 
-interface ModalShellComponent extends React.FC<SimpleComponentProps> {
-  Body: React.FC<SimpleComponentProps>;
-  Actions: React.FC<SimpleComponentProps>;
-}
-
-export const ModalShell: ModalShellComponent = ({ children, className }) => {
+export const ModalShell: React.FC<ModalShellProps> = ({
+  children,
+  className,
+}) => {
   return (
     <div
       className={classNames(
@@ -24,7 +22,7 @@ export const ModalShell: ModalShellComponent = ({ children, className }) => {
   );
 };
 
-const ModalShellBody: ModalShellComponent['Body'] = ({
+export const ModalShellBody: React.FC<ModalShellProps> = ({
   children,
   className,
 }) => {
@@ -39,7 +37,7 @@ const ModalShellBody: ModalShellComponent['Body'] = ({
   );
 };
 
-const ModalShellActions: ModalShellComponent['Actions'] = ({
+export const ModalShellActions: React.FC<ModalShellProps> = ({
   children,
   className,
 }) => {
@@ -51,6 +49,3 @@ const ModalShellActions: ModalShellComponent['Actions'] = ({
     </div>
   );
 };
-
-ModalShell.Body = ModalShellBody;
-ModalShell.Actions = ModalShellActions;
diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
index 4f2e502d7e..d724abd1d9 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
@@ -4,7 +4,11 @@ import { FormattedMessage } from 'react-intl';
 
 import { Button } from '@/flavours/glitch/components/button';
 import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
-import { ModalShell } from '@/flavours/glitch/components/modal_shell';
+import {
+  ModalShell,
+  ModalShellActions,
+  ModalShellBody,
+} from '@/flavours/glitch/components/modal_shell';
 
 import type { AccountField } from '../common';
 import { useFieldHtml } from '../hooks/useFieldHtml';
@@ -19,7 +23,7 @@ export const AccountFieldModal: FC<{
   const handleValueElement = useFieldHtml(field.valueHasEmojis);
   return (
     <ModalShell>
-      <ModalShell.Body>
+      <ModalShellBody>
         <EmojiHTML
           as='h2'
           htmlString={field.name_emojified}
@@ -31,12 +35,12 @@ export const AccountFieldModal: FC<{
           onElement={handleValueElement}
           className={classes.fieldValue}
         />
-      </ModalShell.Body>
-      <ModalShell.Actions>
+      </ModalShellBody>
+      <ModalShellActions>
         <Button onClick={onClose} plain>
           <FormattedMessage id='lightbox.close' defaultMessage='Close' />
         </Button>
-      </ModalShell.Actions>
+      </ModalShellActions>
     </ModalShell>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx b/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx
index 0b3ab2adbc..f77ecc30d6 100644
--- a/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx
+++ b/app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx
@@ -13,7 +13,11 @@ import { AvatarGroup } from 'flavours/glitch/components/avatar_group';
 import { Button } from 'flavours/glitch/components/button';
 import { CopyLinkField } from 'flavours/glitch/components/form_fields';
 import { IconButton } from 'flavours/glitch/components/icon_button';
-import { ModalShell } from 'flavours/glitch/components/modal_shell';
+import {
+  ModalShell,
+  ModalShellActions,
+  ModalShellBody,
+} from 'flavours/glitch/components/modal_shell';
 import { useAppDispatch } from 'flavours/glitch/store';
 
 import { AuthorNote } from '.';
@@ -64,7 +68,7 @@ export const CollectionShareModal: React.FC<{
 
   return (
     <ModalShell>
-      <ModalShell.Body>
+      <ModalShellBody>
         <h1 className={classes.heading}>
           {isNew ? (
             <FormattedMessage
@@ -112,9 +116,9 @@ export const CollectionShareModal: React.FC<{
           })}
           value={collectionLink}
         />
-      </ModalShell.Body>
+      </ModalShellBody>
 
-      <ModalShell.Actions className={classes.actions}>
+      <ModalShellActions className={classes.actions}>
         <div className={classes.shareButtonWrapper}>
           <Button secondary onClick={handleShareViaPost}>
             <FormattedMessage
@@ -135,7 +139,7 @@ export const CollectionShareModal: React.FC<{
         <Button plain onClick={onClose} className={classes.closeButtonMobile}>
           <FormattedMessage id='lightbox.close' defaultMessage='Close' />
         </Button>
-      </ModalShell.Actions>
+      </ModalShellActions>
     </ModalShell>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
index c139b7772a..815f6fd09b 100644
--- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
@@ -3,7 +3,11 @@ import { useCallback } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { Button } from 'flavours/glitch/components/button';
-import { ModalShell } from 'flavours/glitch/components/modal_shell';
+import {
+  ModalShell,
+  ModalShellActions,
+  ModalShellBody,
+} from 'flavours/glitch/components/modal_shell';
 
 export interface BaseConfirmationModalProps {
   onClose: () => void;
@@ -66,14 +70,14 @@ export const ConfirmationModal: React.FC<
 
   return (
     <ModalShell>
-      <ModalShell.Body>
+      <ModalShellBody>
         <h1 id={titleId}>{title}</h1>
         {message && <p>{message}</p>}
 
         {extraContent ?? children}
-      </ModalShell.Body>
+      </ModalShellBody>
 
-      <ModalShell.Actions>
+      <ModalShellActions>
         <button onClick={onClose} className='link-button' type='button'>
           {cancel ?? (
             <FormattedMessage
@@ -107,7 +111,7 @@ export const ConfirmationModal: React.FC<
           {confirm}
         </Button>
         {/* eslint-enable */}
-      </ModalShell.Actions>
+      </ModalShellActions>
     </ModalShell>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
index b5f58b98c7..d2f94749f9 100644
--- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
@@ -11,7 +11,6 @@ import {
   DomainBlockModal,
   ReportModal,
   ReportCollectionModal,
-  ShareCollectionModal,
   SettingsModal,
   EmbedModal,
   ListAdder,
@@ -86,7 +85,7 @@ export const MODAL_COMPONENTS = {
   'DOMAIN_BLOCK': DomainBlockModal,
   'REPORT': ReportModal,
   'REPORT_COLLECTION': ReportCollectionModal,
-  'SHARE_COLLECTION': ShareCollectionModal,
+  'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/detail/share_modal').then(module => ({ default: module.CollectionShareModal })),
   'SETTINGS': SettingsModal,
   'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }),
   'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js
index 194a507bf9..ad386a8da7 100644
--- a/app/javascript/flavours/glitch/features/ui/util/async-components.js
+++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js
@@ -62,12 +62,6 @@ export function CollectionsEditor() {
   );
 }
 
-export function ShareCollectionModal() {
-  return import('../../collections/detail/share_modal').then(
-    module => ({default: module.CollectionShareModal})
-  );
-}
-
 export function Status () {
   return import('../../status');
 }
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index 0f679c55ee..6791740ad1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -6656,6 +6656,10 @@ a.status-card {
     line-height: 20px;
     color: var(--color-text-secondary);
 
+    /*
+     * Using the :where selector to lower specificity and allow for
+     * easy customisation of modal heading styles
+     */
     :where(h1) {
       font-size: 16px;
       line-height: 24px;