From 5ccde7995ef61cb8ae5b80018df71b30a8460a11 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 12 Jul 2024 19:15:55 +0600
Subject: [PATCH] web: convert global state classes to data attributes

also cleaned up unnecessary dupe in sidebar component
---
 web/src/components/settings/SettingsCategory.svelte |  2 +-
 web/src/components/sidebar/Sidebar.svelte           |  6 ++----
 web/src/components/sidebar/SidebarTab.svelte        |  2 +-
 web/src/routes/+layout.svelte                       | 12 ++++++------
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 31205539..df7dcb31 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -35,7 +35,7 @@
         animation: highlight 2s;
     }
 
-    :global(.reduce-motion) .settings-content.animate {
+    :global([data-reduce-motion="true"]) .settings-content.animate {
         animation: highlight-lite 2s !important;
     }
 
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index e76be484..05ba72d9 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
 
-    import { device } from "$lib/device";
-
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
@@ -22,7 +20,7 @@
 
 <svelte:window bind:innerWidth={screenWidth} />
 
-<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")} class:on-iPhone={device.is.iPhone}>
+<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")}>
     <CobaltLogo />
     <div id="sidebar-tabs">
         <div id="sidebar-actions" class="sidebar-inner-container">
@@ -114,7 +112,7 @@
 
     /* add padding for notch / dynamic island in landscape */
     @media screen and (orientation: landscape) {
-        #sidebar.on-iPhone {
+        :global([data-iphone="true"]) #sidebar {
             padding-left: env(safe-area-inset-left);
         }
     }
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 769acfa3..cfc24318 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -70,7 +70,7 @@
         width: 21px;
     }
 
-    :global(.on-iPhone .sidebar-tab svg) {
+    :global([data-iphone="true"] .sidebar-tab svg) {
         will-change: transform;
     }
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ed34f4aa..a3730d68 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -26,9 +26,9 @@
 <div style="display: contents" data-theme={$currentTheme}>
     <div
         id="cobalt"
-        class:on-iPhone={device.is.iPhone}
-        class:reduce-motion={reduceMotion}
-        class:reduce-transparency={reduceTransparency}
+        data-iphone={device.is.iPhone}
+        data-reduce-motion={reduceMotion}
+        data-reduce-transparency={reduceTransparency}
     >
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
@@ -142,13 +142,13 @@
 
     /* add padding for notch / dynamic island in landscape */
     @media screen and (orientation: landscape) {
-        #cobalt.on-iPhone {
+        #cobalt[data-iphone="true"] {
             grid-template-columns:
                 calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px)
                 1fr;
         }
 
-        #cobalt.on-iPhone #content {
+        #cobalt[data-iphone="true"] #content {
             padding-right: env(safe-area-inset-right);
         }
     }
@@ -297,7 +297,7 @@
         white-space: pre-line;
     }
 
-    .reduce-motion :global(*) {
+    [data-reduce-motion="true"] :global(*) {
         animation: none !important;
         transition: none !important;
     }