Morer visual fixes (#1443)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Forgot to fix the style for tweaks aswel
Removed the linkify for replies because replies shouldnt redirect you to
another site

Tweaks:
(old)
<img width="431" height="768" alt="image"
src="https://github.com/user-attachments/assets/05a3b9ed-3bdc-4bbb-9c98-244825a2acff"
/>
(new)
<img width="433" height="771" alt="image"
src="https://github.com/user-attachments/assets/5bc64336-348d-41f5-b5f9-47db2dc637da"
/>

You can imagine the links

Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->
Written w the assistance of using my skewb as a stim toy

Author: 7w1

src/app/components/message/Reply.tsx

@@ -32,14 +32,7 @@ import { getReactionKey, getReactionShortcode, getRedactionTargetId } from '$uti
 import { getMxIdLocalPart } from '$utils/matrix';
 import { randomNumberBetween } from '$utils/common';
 import { sanitizeCustomHtml } from '$utils/sanitize';
-import {
-  getReactCustomHtmlParser,
-  scaleSystemEmoji,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  factoryRenderLinkifyWithMention,
-  renderMatrixMention,
-} from '$plugins/react-custom-html-parser';
+import { getReactCustomHtmlParser, scaleSystemEmoji } from '$plugins/react-custom-html-parser';
 import { useRoomEvent } from '$hooks/useRoomEvent';
 import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
@@ -332,24 +325,6 @@ export const Reply = as<'div', ReplyProps>(
     let image: ReactNode | undefined;
     let mentioned = sender != null && (mentions?.user_ids?.includes(sender) ?? false);
 
-    const replyLinkifyOpts = useMemo(
-      () => ({
-        ...LINKIFY_OPTS,
-        render: factoryRenderLinkifyWithMention(
-          settingsLinkBaseUrl,
-          (href) =>
-            renderMatrixMention(
-              mx,
-              room.roomId,
-              href,
-              makeMentionCustomProps(mentionClickHandler),
-              nicknames
-            ),
-          mentionClickHandler
-        ),
-      }),
-      [mx, room.roomId, mentionClickHandler, nicknames, settingsLinkBaseUrl]
-    );
     if (eventType === M_POLL_START.name) {
       const question = (
         replyEvent?.getContent()[M_POLL_START.name] as {
@@ -364,7 +339,7 @@ export const Reply = as<'div', ReplyProps>(
       if (shouldParseReplyFormattedPreview(sanitizedHtml)) {
         const parserOpts = getReactCustomHtmlParser(mx, room.roomId, {
           settingsLinkBaseUrl,
-          linkifyOpts: replyLinkifyOpts,
+          linkifyOpts: undefined,
           useAuthentication,
           nicknames,
           handleMentionClick: mentionClickHandler,

src/app/features/settings/cosmetics/ThemeCatalogSettings.tsx

@@ -152,7 +152,60 @@ function CatalogTweakCard({
     >
       <Box direction="Row" alignItems="Start" justifyContent="SpaceBetween" gap="200">
         <Box direction="Column" gap="100" grow="Yes" style={{ minWidth: 0 }}>
-          <Text size="H6">{displayName}</Text>
+          <Box direction="Row" justifyContent="SpaceBetween" alignContent="Center">
+            <Text size="H6">{displayName}</Text>
+            <Box direction="Row" gap="100" alignItems="Center" shrink="No">
+              <CssViewerButton
+                title={`${displayName} — CSS`}
+                cssText={cssText}
+                ariaLabel="View tweak CSS"
+              />
+              {copyUrl && (
+                <IconButton
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  outlined
+                  radii="300"
+                  aria-label={copied ? 'Copied tweak link' : 'Copy tweak link'}
+                  onClick={() => {
+                    handleCopy().catch(() => undefined);
+                  }}
+                >
+                  {menuIcon(copied ? Check : Link)}
+                </IconButton>
+              )}
+              {onExport && (
+                <IconButton
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  outlined
+                  radii="300"
+                  aria-label="Export tweak CSS"
+                  onClick={() => {
+                    onExport();
+                  }}
+                >
+                  {menuIcon(Download)}
+                </IconButton>
+              )}
+              <IconButton
+                size="300"
+                variant={isFavorited ? 'Primary' : 'Secondary'}
+                fill="Soft"
+                outlined
+                radii="300"
+                aria-label={isFavorited ? 'Remove tweak from saved' : 'Save tweak'}
+                onClick={() => {
+                  Promise.resolve(onToggleFavorite()).catch(() => undefined);
+                }}
+              >
+                {menuIcon(Star, { weight: isFavorited ? 'fill' : 'regular' })}
+              </IconButton>
+              <Switch variant="Primary" value={isOn} onChange={onSetApplied} />
+            </Box>
+          </Box>
           <Text size="T200" priority="300" style={{ wordBreak: 'break-word' }}>
             {description}
           </Text>
@@ -166,57 +219,6 @@ function CatalogTweakCard({
               <Text size="B300">Third-party URL</Text>
             </Chip>
           )}
-          <Box direction="Row" gap="100" alignItems="Center">
-            <CssViewerButton
-              title={`${displayName} — CSS`}
-              cssText={cssText}
-              ariaLabel="View tweak CSS"
-            />
-            {copyUrl && (
-              <IconButton
-                size="300"
-                variant="Secondary"
-                fill="Soft"
-                outlined
-                radii="300"
-                aria-label={copied ? 'Copied tweak link' : 'Copy tweak link'}
-                onClick={() => {
-                  handleCopy().catch(() => undefined);
-                }}
-              >
-                {menuIcon(copied ? Check : Link)}
-              </IconButton>
-            )}
-            {onExport && (
-              <IconButton
-                size="300"
-                variant="Secondary"
-                fill="Soft"
-                outlined
-                radii="300"
-                aria-label="Export tweak CSS"
-                onClick={() => {
-                  onExport();
-                }}
-              >
-                {menuIcon(Download)}
-              </IconButton>
-            )}
-            <IconButton
-              size="300"
-              variant={isFavorited ? 'Primary' : 'Secondary'}
-              fill="Soft"
-              outlined
-              radii="300"
-              aria-label={isFavorited ? 'Remove tweak from saved' : 'Save tweak'}
-              onClick={() => {
-                Promise.resolve(onToggleFavorite()).catch(() => undefined);
-              }}
-            >
-              {menuIcon(Star, { weight: isFavorited ? 'fill' : 'regular' })}
-            </IconButton>
-            <Switch variant="Primary" value={isOn} onChange={onSetApplied} />
-          </Box>
         </Box>
       </Box>
     </Box>

src/app/plugins/react-custom-html-parser.tsx

@@ -585,7 +585,7 @@ export const getReactCustomHtmlParser = (
   roomId: string | undefined,
   params: {
     settingsLinkBaseUrl: string;
-    linkifyOpts: LinkifyOpts;
+    linkifyOpts?: LinkifyOpts;
     highlightRegex?: RegExp;
     handleSpoilerClick?: ReactEventHandler<HTMLElement>;
     handleMentionClick?: ReactEventHandler<HTMLElement>;
@@ -828,6 +828,7 @@ export const getReactCustomHtmlParser = (
             }
           }
 
+          if (!params.linkifyOpts) return <span {...anchorProps}>{renderChildren()}</span>;
           return <a {...anchorProps}>{renderedChildren}</a>;
         }