Bump flatted from 3.3.3 to 3.4.2

Bumps [flatted](https://github.com/WebReflection/flatted) from 3.3.3 to 3.4.2.
- [Commits](https://github.com/WebReflection/flatted/compare/v3.3.3...v3.4.2)

---
updated-dependencies:
- dependency-name: flatted
  dependency-version: 3.4.2
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

src/App.vue

@@ -50,12 +50,11 @@
 
     .navigation-icons-gutter {
       position: fixed;
-      height: calc(100vh - var(--header-size));
+      height: 100vh;
       margin: 0;
       top: var(--header-size);
       width: var(--header-size);
       background-color: var(--background-color-secondary);
-      overflow-y: scroll;
     }
 
     .content {
@@ -63,6 +62,7 @@
       grid-column: 2 / 3;
       width: calc(100% - var(--header-size));
       grid-row: 2;
+      z-index: 5;
 
       @include mobile {
         grid-column: 1 / 3;

src/components/settings/StorageSectionBrowser.vue

@@ -29,20 +29,19 @@
             }}</span>
             <span class="storage-section__size">{{ section.totalSize }}</span>
           </div>
-          <div class="chevron-container">
-            <transition name="fade">
-              <IconExpandVertical
-                v-if="!expandedSections[section.type]"
-                key="expand"
-                class="storage-section__chevron"
-              />
-              <IconShrinkVertical
-                v-else
-                key="shrink"
-                class="storage-section__chevron"
-              />
-            </transition>
-          </div>
+          <svg
+            class="storage-section__chevron"
+            :class="{
+              'storage-section__chevron--expanded':
+                expandedSections[section.type]
+            }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
         </button>
         <div
           v-if="expandedSections[section.type]"
@@ -81,8 +80,6 @@
 <script setup lang="ts">
   import { ref } from "vue";
   import IconClose from "@/icons/IconClose.vue";
-  import IconExpandVertical from "@/icons/IconExpandVertical.vue";
-  import IconShrinkVertical from "@/icons/IconShrinkVertical.vue";
 
   interface StorageItem {
     key: string;
@@ -213,14 +210,15 @@
       color: var(--text-color-50);
       font-family: monospace;
     }
-
     &__chevron {
-      position: absolute;
       width: 20px;
       height: 20px;
-      fill: var(--text-color-70);
+      stroke: var(--text-color-70);
+      transition: transform 0.2s ease;
+      &--expanded {
+        transform: rotate(180deg);
+      }
     }
-
     &__content {
       border-top: 1px solid var(--background-40);
     }
@@ -364,22 +362,4 @@
       }
     }
   }
-
-  .chevron-container {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // Simple crossfade transition
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.3s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
 </style>

src/components/torrent/TorrentSearchResults.vue

@@ -129,7 +129,6 @@
     font-size: 20px;
     color: var(--text-color);
     text-align: center;
-    padding-bottom: 1rem;
     margin: 0;
 
     .query {

src/components/torrent/TorrentTable.vue

@@ -259,7 +259,7 @@
       padding: 0.5rem 0.6rem;
       cursor: default;
       word-break: break-word;
-      border-left: 1px solid var(--highlight-color);
+      border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
 
       @include mobile {
         width: 100%;
@@ -301,7 +301,7 @@
     tr td:last-of-type {
       vertical-align: middle;
       cursor: pointer;
-      border-right: 1px solid var(--highlight-color);
+      border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
       max-width: 60px;
       text-align: center;
 
@@ -328,19 +328,26 @@
       color: var(--text-color);
 
       td {
-        border-left: 1px solid var(--highlight-color);
+        border-left: 1px solid
+          var(--highlight-secondary, var(--highlight-color));
         fill: var(--text-color);
       }
     }
     tr:nth-child(odd) {
-      background: rgba(0, 0, 0, 0.15);
+      background-color: var(--highlight-secondary, var(--background-color));
+      color: var(--highlight-bg, var(--text-color));
+
+      td {
+        fill: var(--highlight-bg, var(--text-color)) !important;
+      }
     }
 
     // last element rounded corner border
     tr:last-of-type {
       td {
-        border-bottom: 1px solid var(--highlight-color);
-        border-left: 1px solid var(--highlight-color);
+        border-bottom: 1px solid
+          var(--highlight-secondary, var(--highlight-color));
+        border-left: 1px solid var(--highlight-bg, var(--text-color));
       }
 
       td:first-of-type {

src/components/torrent/TruncatedTorrentResults.vue

@@ -69,7 +69,7 @@
     cursor: pointer;
     background: linear-gradient(
       to top,
-      var(--highlight-bg, var(--background-color)) 20%,
+      var(--background-color) 20%,
       var(--background-0) 100%
     );
   }

src/components/ui/CommandPalette.vue

@@ -15,8 +15,6 @@
             @keydown.enter.prevent="navigateToSelected"
             @keydown.esc.prevent="close"
             @keydown="handleInputKeydown"
-            @keydown.ctrl.j.prevent="selectNext"
-            @keydown.ctrl.k.prevent="selectPrevious"
           />
           <input
             v-else

src/scss/main.scss

@@ -1,18 +1,12 @@
 @import "scss/variables";
 
 .noselect {
-  -webkit-touch-callout: none;
-  /* iOS Safari */
-  -webkit-user-select: none;
-  /* Safari */
-  -khtml-user-select: none;
-  /* Konqueror HTML */
-  -moz-user-select: none;
-  /* Firefox */
-  -ms-user-select: none;
-  /* Internet Explorer/Edge */
-  user-select: none;
-  /* Non-prefixed version, currently */
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently */
 }
 
 * {
@@ -22,7 +16,6 @@
 html {
   height: unset;
 }
-
 body {
   margin: 0;
   padding: 0;
@@ -31,61 +24,27 @@ body {
   background: var(--background-color);
   color: var(--text-color);
 
+  // TODO probably explicitly define
   * {
-    transition:
-      transform 500ms ease,
-      background-color 500ms ease,
-      background-image 500ms ease,
-      opacity 500ms ease,
-      box-shadow 500ms ease,
-      border-color 500ms ease,
-      filter 500ms ease,
-      clip-path 500ms ease,
-      outline-color 500ms ease;
-  }
-
-  a,
-  button,
-  label,
-  span,
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    transition-property: color;
-    transition-duration: 500ms;
-    transition-timing-function: ease;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      transition-duration: 1ms !important;
-    }
+    transition: 0.5s ease;
   }
 
   &.hidden {
     overflow: hidden;
   }
 }
-
 a:any-link {
   color: inherit;
 }
-
 input,
 textarea,
 button {
   font-family: "Roboto", sans-serif;
 }
-
 figure {
   padding: 0;
   margin: 0;
 }
-
 img {
   display: block;
   height: auto;
@@ -96,10 +55,8 @@ img {
 }
 
 @mixin noscrollbar {
-  scrollbar-width: none;
-  /* Firefox */
-  -ms-overflow-style: none;
-  /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
 
   &::-webkit-scrollbar {
     /* WebKit */
@@ -111,16 +68,15 @@ img {
 .button--group {
   display: flex;
 
-  >div:not(:first-child) {
+  > div:not(:first-child) {
     margin-left: 1rem;
   }
 }
 
 .form {
-
-  >div,
-  >input,
-  >button {
+  > div,
+  > input,
+  > button {
     margin-bottom: 1rem;
 
     &:last-child {

yarn.lock

@@ -1940,9 +1940,9 @@ flat-cache@^4.0.0:
     keyv "^4.5.4"
 
 flatted@^3.2.9:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
-  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
+  integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
 
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"