From db8d57fea0076c95d5b2ab5912435c9d8dab4b2e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 7 Jul 2024 21:51:46 +0600
Subject: [PATCH] web/settings: highlight the setting when linked to

- remade the way padding in settings is done to accommodate space for a highlight
- renamed nav components to indicate better what they are
---
 .../settings/SettingsCategory.svelte          | 43 ++++++++++++++++++-
 ...ction.svelte => SettingsNavSection.svelte} |  0
 ...ttingsTab.svelte => SettingsNavTab.svelte} |  0
 web/src/routes/settings/+layout.svelte        | 42 ++++++++++--------
 4 files changed, 65 insertions(+), 20 deletions(-)
 rename web/src/components/settings/{SettingsSection.svelte => SettingsNavSection.svelte} (100%)
 rename web/src/components/settings/{SettingsTab.svelte => SettingsNavTab.svelte} (100%)

diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 3ec3c895..3b77b582 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,10 +1,24 @@
 <script lang="ts">
+    import { page } from "$app/stores";
+
     export let sectionId: string;
     export let title: string;
     export let description: string = "";
+
+    let animate = false;
+
+    $: hash = $page.url.hash.replace("#", "");
+
+    $: if (hash === sectionId) {
+        animate = true;
+    }
 </script>
 
-<section id={sectionId} class="settings-content">
+<section
+    id={sectionId}
+    class="settings-content"
+    class:animate
+>
     <h3 class="settings-content-title">{title}</h3>
     <slot></slot>
 
@@ -18,5 +32,32 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
+        padding: calc(var(--settings-padding) / 2);
+        border-radius: 18px;
+    }
+
+    .settings-content.animate {
+        animation: highlight 2s;
+    }
+
+    @keyframes highlight {
+        0% {
+            box-shadow: none;
+        }
+        10% {
+            box-shadow: 0 0 0 3.5px var(--blue) inset;
+        }
+        20%, 50% {
+            box-shadow: 0 0 0 3px var(--blue) inset;
+        }
+        100% {
+            box-shadow: none;
+        }
+    }
+
+    @media screen and (max-width: 750px) {
+        .settings-content {
+            padding: var(--padding);
+        }
     }
 </style>
diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsNavSection.svelte
similarity index 100%
rename from web/src/components/settings/SettingsSection.svelte
rename to web/src/components/settings/SettingsNavSection.svelte
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsNavTab.svelte
similarity index 100%
rename from web/src/components/settings/SettingsTab.svelte
rename to web/src/components/settings/SettingsNavTab.svelte
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 65c1fb4e..5ad31ef9 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -3,8 +3,8 @@
 
     import { t } from "$lib/i18n/translations";
 
-    import SettingsTab from "$components/settings/SettingsTab.svelte";
-    import SettingsSection from "$components/settings/SettingsSection.svelte";
+    import SettingsNavTab from "$components/settings/SettingsNavTab.svelte";
+    import SettingsNavSection from "$components/settings/SettingsNavSection.svelte";
 
     import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
 
@@ -68,38 +68,38 @@
             {/if}
         </div>
         <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
-            <SettingsSection sectionTitle="general">
-                <SettingsTab
+            <SettingsNavSection sectionTitle="general">
+                <SettingsNavTab
                     tabName="appearance"
                     tabLink="general/appearance"
                     iconColor="blue"
                 >
                     <IconSunHigh />
-                </SettingsTab>
-            </SettingsSection>
-            <SettingsSection sectionTitle="save">
-                <SettingsTab
+                </SettingsNavTab>
+            </SettingsNavSection>
+            <SettingsNavSection sectionTitle="save">
+                <SettingsNavTab
                     tabName="video"
                     tabLink="save/video"
                     iconColor="green"
                 >
                     <IconMovie />
-                </SettingsTab>
-                <SettingsTab
+                </SettingsNavTab>
+                <SettingsNavTab
                     tabName="audio"
                     tabLink="save/audio"
                     iconColor="green"
                 >
                     <IconMusic />
-                </SettingsTab>
-                <SettingsTab
+                </SettingsNavTab>
+                <SettingsNavTab
                     tabName="metadata"
                     tabLink="save/metadata"
                     iconColor="green"
                 >
                     <IconFileSettings />
-                </SettingsTab>
-            </SettingsSection>
+                </SettingsNavTab>
+            </SettingsNavSection>
         </nav>
     </div>
 
@@ -120,15 +120,13 @@
         grid-template-columns: var(--settings-nav-width) 1fr;
         overflow: hidden;
         padding-left: var(--settings-padding);
-        padding-top: var(--settings-padding);
     }
 
     #settings-page-content {
         display: flex;
         flex-direction: column;
-        gap: var(--settings-padding);
         max-width: 600px;
-        padding: 0 var(--settings-padding);
+        padding: calc(var(--settings-padding) / 2);
         overflow-y: scroll;
     }
 
@@ -140,6 +138,7 @@
 
     #settings-sidebar {
         width: var(--settings-nav-width);
+        padding-top: var(--settings-padding);
     }
 
     #settings-sidebar {
@@ -189,14 +188,18 @@
             padding: 0;
         }
 
-        #settings-page-content,
         #settings-navigation {
             padding: var(--padding);
+            padding-bottom: calc(var(--padding) * 2);
+        }
+
+        #settings-page-content {
+            padding: var(--padding) 0;
+            padding-top: 0;
         }
 
         #settings-page-content {
             max-width: unset;
-            gap: calc(var(--padding) * 2);
         }
 
         #settings-header {
@@ -210,6 +213,7 @@
 
         #settings-sidebar {
             gap: 0px;
+            padding: 0;
         }
 
         #settings-page-title {