From 94853f0b7b5852375fa46711ec67e373d488a583 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 23 Jul 2024 12:34:14 +0600
Subject: [PATCH] web/FilenamePreview: finish the component

---
 web/i18n/en/settings.json                     |  2 +-
 .../settings/FilenamePreview.svelte           | 83 +++++++++++++++++--
 web/src/routes/settings/download/+page.svelte | 10 ++-
 3 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 82bfb282..0127627b 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -63,7 +63,7 @@
     "metadata.filename.basic": "basic",
     "metadata.filename.pretty": "pretty",
     "metadata.filename.nerdy": "nerdy",
-    "metadata.filename.description": "filename style using which cobalt files will be downloaded. this description is temporary as there's no dynamic preview component yet.",
+    "metadata.filename.description": "filename style will only be used for files processed or proxied by cobalt. some services don't support filename styles.",
 
     "metadata.filename.preview.video": "Video Title",
     "metadata.filename.preview.audio": "Audio Title - Audio Author",
diff --git a/web/src/components/settings/FilenamePreview.svelte b/web/src/components/settings/FilenamePreview.svelte
index 64fce4f4..829e1745 100644
--- a/web/src/components/settings/FilenamePreview.svelte
+++ b/web/src/components/settings/FilenamePreview.svelte
@@ -2,6 +2,9 @@
     import settings from "$lib/state/settings";
     import { t } from "$lib/i18n/translations";
 
+    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+
     let videoFilePreview: string;
     let audioFilePreview: string;
 
@@ -66,18 +69,86 @@
 </script>
 
 <div id="filename-preview">
-    <div id="filename-preview-video">
-        {videoFilePreview}.{youtubeVideoExt}
+    <div id="filename-preview-video" class="filename-preview-item">
+        <div class="item-icon">
+            <IconMovie />
+        </div>
+        <div class="item-text">
+            <div class="preview">{`${videoFilePreview}.${youtubeVideoExt}`}</div>
+            <div class="subtext description">video file preview</div>
+        </div>
     </div>
-    <div id="filename-preview-audio">
-        {audioFilePreview}.{audioFormat}
+    <div id="filename-preview-audio" class="filename-preview-item">
+        <div class="item-icon">
+            <IconMusic />
+        </div>
+        <div class="item-text">
+            <div class="preview">{`${audioFilePreview}.${audioFormat}`}</div>
+            <div class="subtext description">audio file preview</div>
+        </div>
     </div>
 </div>
 
 <style>
     #filename-preview {
-        font-size: 14px;
         font-weight: 500;
-        padding: 0 var(--padding);
+
+        display: flex;
+        flex-direction: column;
+
+        background: var(--button);
+        box-shadow: var(--button-box-shadow);
+        border-radius: var(--border-radius);
+    }
+
+    .filename-preview-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        padding: 8px var(--padding);
+    }
+
+    .filename-preview-item:first-child {
+        border-bottom: 1.5px var(--button-stroke) solid;
+    }
+
+    .item-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        border-radius: 6px;
+        background-color: var(--gray);
+    }
+
+    .item-icon :global(svg) {
+        stroke: var(--white);
+        stroke-width: 1.5px;
+        height: 22px;
+        width: 22px;
+        will-change: transform;
+    }
+
+    .item-text {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        overflow-wrap: anywhere;
+    }
+
+    .item-text .preview {
+        line-height: 1.3;
+    }
+
+    .item-text .description {
+        padding: 0;
+    }
+
+    @media screen and (max-width: 750px) {
+        .item-text {
+            font-size: 13px;
+        }
     }
 </style>
diff --git a/web/src/routes/settings/download/+page.svelte b/web/src/routes/settings/download/+page.svelte
index 1da7010f..6e6ea6f0 100644
--- a/web/src/routes/settings/download/+page.svelte
+++ b/web/src/routes/settings/download/+page.svelte
@@ -11,10 +11,7 @@
 </script>
 
 <SettingsCategory sectionId="filename" title={$t("settings.metadata.filename")}>
-    <Switcher
-        big={true}
-        description={$t("settings.metadata.filename.description")}
-    >
+    <Switcher big={true}>
         {#each filenameStyleOptions as value}
             <SettingsButton
                 settingContext="save"
@@ -25,7 +22,12 @@
             </SettingsButton>
         {/each}
     </Switcher>
+
     <FilenamePreview />
+
+    <div class="subtext">
+        {$t("settings.metadata.filename.description")}
+    </div>
 </SettingsCategory>
 
 <SettingsCategory