chore(attachments): create attachments component to alleviate duplicate code

[Jekrimo]

What this PR does 📖

• create attachments component to alleviate duplicate code

Which issue(s) this PR fixes 🔨

• Resolve #
• No resolve # for this issue

Special notes for reviewers 🗒️

For testing, attachments should look and function exactly how they already do.

Also, this pr is dependent on the #652 pr going in first

Additional comments 🎤

[github-actions]

Download the app installers for this pull request:

• build-macos.zip
• build-ubuntu.zip
• build-windows.zip
• build-android.zip

[github-actions]

Automated Test Results

 110 passed
 15 skipped

Details

 125 tests across 16 suites
 14 minutes, 56 seconds
 d3866b2

Skipped tests

Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Local and Remote - Updating note
Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Local - Updating username, status, banner and profile picture
Automated Tests on Chrome Desktop › 03-friends-two-instances.spec.ts › Two instances tests - Friends and Chats › B8 to B14 - Quick Profile Remote - Updating username, status, banner and profile picture
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K2 - Font dropdown should show expected font names
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K15 - Emoji Font dropdown should show expected emoji font names
Automated Tests on Chrome Desktop › 09-settings-customizations.spec.ts › Settings Customization Tests › K18 - Default Profile Picture Style dropdown should show expected default profile picture styles
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O1, 06 - Message at top of page and custom keybinds listed correctly
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O2, 04 - Clicking a key should activate the Recorded Keys - User can save keybind
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O3 - Action dropdown should display correct keybind actions
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O5 - Clicking Cancel should cancel any custom keybinding the user was trying to add
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O7 - Highlighted border should display when user clicks cancel
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O8 - Clicking Revert Keybindings should revert any custom keybindings the user has saved
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O9 - Highlighted border should be displayed when clicking Revert Keybindings
Automated Tests on Chrome Desktop › 13-settings-keybinds.spec.ts › Settings Keybinds Tests › O10 - Clicking the backwards arrow should revert specific custom keybinding
Automated Tests on Chrome Desktop › 20-settings-developer.spec.ts › Settings Developer Tests › T4 - Clicking Clear State should clear users state

[github-actions]

Playwright test execution is complete! You can find the test results report here

[phillsatellite]

So functionality is working a lot better! Theres just one issue that doesnt happen on dev, if your browser is not fullscreen and you open up the attachment half of the preview will render behind the sidebar

Screen.Recording.2024-10-08.at.6.39.15.PM.mov

[github-actions]

Build Log Differences Found:

2a3,9
> 3:29:21 PM [vite-plugin-svelte] /home/runner/work/UplinkWeb/UplinkWeb/src/lib/components/messaging/AttachmentRenderer.svelte:157:0 Unused CSS selector "#page"
> 155: }
> 156: 
> 157: #page {
>      ^
> 158:   display: flex;
> 159:   min-width: 0;

[github-actions]

Build Log Differences Found:

2a3,9
> 5:39:29 PM [vite-plugin-svelte] /home/runner/work/UplinkWeb/UplinkWeb/src/lib/components/messaging/AttachmentRenderer.svelte:157:0 Unused CSS selector "#page"
> 155: }
> 156: 
> 157: #page {
>      ^
> 158:   display: flex;
> 159:   min-width: 0;

[Jekrimo]

Hey @phillsatellite ! after a long battle with css and a boatload of merge issues I decided to have a little work around and it should be good now!

[github-actions]

Build Log Differences Found:

2a3,23
> 3:53:33 PM [vite-plugin-svelte] /home/runner/work/UplinkWeb/UplinkWeb/src/routes/chat/+page.svelte:997:0 Unused CSS selector "#page .unreads-since-container"
>  995:   }
>  996: }
>  997: #page .unreads-since-container {
>       ^
>  998:   display: flex;
>  999:   height: fit-content;
> 3:53:33 PM [vite-plugin-svelte] /home/runner/work/UplinkWeb/UplinkWeb/src/routes/chat/+page.svelte:1003:0 Unused CSS selector "#page .unreads-since-container .unreads-since-line"
> 1001:   margin-bottom: var(--padding-less);
> 1002: }
> 1003: #page .unreads-since-container .unreads-since-line {
>       ^
> 1004:   width: 100%;
> 1005:   height: 1px;
> 3:53:33 PM [vite-plugin-svelte] /home/runner/work/UplinkWeb/UplinkWeb/src/routes/chat/+page.svelte:1009:0 Unused CSS selector "#page .unreads-since-container .unreads-since"
> 1007:   background-color: var(--color-muted);
> 1008: }
> 1009: #page .unreads-since-container .unreads-since {
>       ^
> 1010:   text-align: center;
> 1011:   width: 100%;