Feat - Separate embed settings and add multiple embeds (#667)

<!-- 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. -->

This PR proposes the moving of embed settings to their own category
under General:
<img width="810" height="694" alt="image"
src="https://github.com/user-attachments/assets/972eec7b-1517-4c76-991c-c652cea6a3ab"
/>

Additionally it adds multiple embeds in one message:
<img width="1321" height="480" alt="image"
src="https://github.com/user-attachments/assets/59a6da99-e7a1-4740-a9d8-29b37a2ef8dc"
/>

Showing them all is however just a setting that may be turned off (it is
on by default) since the embeds respect the aspect ratio of the
thumbnail so a list of embeds may be uneven which might appear
unaesthetic to some, as per this example:
<img width="1294" height="751" alt="image"
src="https://github.com/user-attachments/assets/6b0b47ad-c6e7-427f-baea-0ecd4ba84527"
/>

Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] 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. -->
My pathological avoiding anxiety has empowered me to create this instead
of doing a more important task.

Author: 7w1

.changeset/add_multiple_previews.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Reorganize Embed settings and reintroduce multiple embeds

.gitignore

@@ -23,3 +23,6 @@ build.sh
 
 # the following line was added with the "git ignore" tool by itsrye.dev, version 0.1.0
 .lh
+
+# the following line was added with nvim by Shea because its annoying to clear every so often
+.vscode/bookmarks.json

src/app/components/RenderMessageContent.tsx

@@ -84,6 +84,7 @@ function RenderMessageContentInternal({
 
   const [autoplayGifs] = useSetting(settingsAtom, 'autoplayGifs');
   const [captionPosition] = useSetting(settingsAtom, 'captionPosition');
+  const [multiplePreviews] = useSetting(settingsAtom, 'multiplePreviews');
   const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
   const captionPositionMap = {
     [CaptionPosition.Above]: 'column-reverse',
@@ -117,8 +118,7 @@ function RenderMessageContentInternal({
         type: getMediaType(url),
       }));
 
-      const mediaLinks = analyzed.filter((item) => item.type !== null);
-      const toRender = mediaLinks.length > 0 ? mediaLinks : [analyzed[0]];
+      const toRender = multiplePreviews ? analyzed : [analyzed[0]];
       return (
         <UrlPreviewHolder>
           {toRender.map(({ url, type }) => {
@@ -136,7 +136,7 @@ function RenderMessageContentInternal({
         </UrlPreviewHolder>
       );
     },
-    [ts, clientUrlPreview, settingsLinkBaseUrl, urlPreview]
+    [multiplePreviews, settingsLinkBaseUrl, clientUrlPreview, urlPreview, ts]
   );
   const renderBundledPreviews = useCallback(
     (bundles: IPreviewUrlResponse[]) => (

src/app/components/message/content/ImageContent.tsx

@@ -197,6 +197,7 @@ export const ImageContent = as<'div', ImageContentProps>(
               hasDimensions ? css.AbsoluteContainer : undefined,
               blurred && css.Blur
             )}
+            style={{ width: '100%' }}
           >
             {renderImage({
               alt: body,

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -108,6 +108,15 @@ export const UrlPreviewCard = as<
       }
     };
 
+    const ogW = ((prev['og:video'] && prev['og:video:width']) ||
+      (prev['og:image'] && prev['og:image:width']) ||
+      1) as number;
+    const ogH = ((prev['og:video'] && prev['og:video:height']) ||
+      (prev['og:image'] && prev['og:image:height']) ||
+      1) as number;
+
+    const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
+
     return (
       <Box
         grow="Yes"
@@ -153,9 +162,7 @@ export const UrlPreviewCard = as<
           <VideoContent
             style={{
               width: '100%',
-              aspectRatio:
-                ((prev['og:video:width'] as number) ?? 1) /
-                ((prev['og:video:height'] as number) ?? 1),
+              aspectRatio: aspectRatio ?? '10 / 9',
             }}
             body={prev['og:title']}
             info={{}}
@@ -167,43 +174,44 @@ export const UrlPreviewCard = as<
         )}
         {!prev['og:video'] &&
           prev['og:image'] &&
-          (() => {
-            const ogW = prev['og:image:width'];
-            const ogH = prev['og:image:height'];
-            const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
-            return (
-              <Box
+          (() => (
+            <Box
+              style={{
+                width: '100%',
+                maxHeight: '320px',
+                aspectRatio: aspectRatio ?? '16 / 9',
+                flexShrink: 1,
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <ImageContent
                 style={{
                   width: '100%',
-                  maxHeight: '400px',
-                  aspectRatio: aspectRatio ?? '16 / 9',
-                  flexShrink: 0,
-                  overflow: 'hidden',
-                  position: 'relative',
+                  height: '100%',
+                  position: 'absolute',
+                  inset: 0,
+                  minHeight: 0,
                 }}
-              >
-                <ImageContent
-                  style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
-                  autoPlay
-                  onAuxClick={handleAuxClick}
-                  body={prev['og:title']}
-                  url={prev['og:image']}
-                  renderViewer={(p) => <ImageViewer {...p} />}
-                  renderImage={(p) => (
-                    <Image
-                      {...p}
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'contain',
-                        objectPosition: 'center',
-                      }}
-                    />
-                  )}
-                />
-              </Box>
-            );
-          })()}
+                autoPlay
+                onAuxClick={handleAuxClick}
+                body={prev['og:title']}
+                url={prev['og:image']}
+                renderViewer={(p) => <ImageViewer {...p} />}
+                renderImage={(p) => (
+                  <Image
+                    {...p}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'contain',
+                      objectPosition: 'center',
+                    }}
+                  />
+                )}
+              />
+            </Box>
+          ))()}
         {!prev['og:video'] && !prev['og:image'] && prev['og:audio'] && (
           <Box className={css.UrlPreviewAudio} style={{ flexShrink: 0 }}>
             <AudioContent
@@ -262,8 +270,11 @@ export const UrlPreviewCard = as<
               minWidth: 0,
               maxWidth: '100%',
               margin: 0,
+              alignSelf: 'start',
+            }
+          : {
+              alignSelf: 'start',
             }
-          : undefined
       }
     >
       {previewContent}
@@ -345,24 +356,31 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
               </IconButton>
             </>
           )}
-          <Box ref={innerBoxRef} alignItems="Inherit" gap="200">
+          <Box
+            ref={innerBoxRef}
+            alignItems="Inherit"
+            gap="200"
+            style={{
+              alignItems: 'baseline',
+            }}
+          >
             {children}
-            {canScrollRight && (
-              <>
-                <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
-                <IconButton
-                  className={css.UrlPreviewHolderBtn({ position: 'Right' })}
-                  variant="Primary"
-                  radii="Pill"
-                  size="300"
-                  outlined
-                  onClick={handleScrollFront}
-                >
-                  <Icon size="300" src={Icons.ArrowRight} />
-                </IconButton>
-              </>
-            )}
           </Box>
+          {canScrollRight && (
+            <>
+              <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
+              <IconButton
+                className={css.UrlPreviewHolderBtn({ position: 'Right' })}
+                variant="Primary"
+                radii="Pill"
+                size="300"
+                outlined
+                onClick={handleScrollFront}
+              >
+                <Icon size="300" src={Icons.ArrowRight} />
+              </IconButton>
+            </>
+          )}
         </Box>
       </Scroll>
     </Box>