Enhance torrent components, command palette, and global stylings

- Torrent Table gets more consistent background styling
- StorageSectionBrowser w/ different chevron icons for open/close
- Vim keyboard navigation for command palette
- Update main.scss with animations which don't stack & interfere
- Command pallet vim vertical navigation

src/App.vue

@@ -50,11 +50,12 @@
 
     .navigation-icons-gutter {
       position: fixed;
-      height: 100vh;
+      height: calc(100vh - var(--header-size));
       margin: 0;
       top: var(--header-size);
       width: var(--header-size);
       background-color: var(--background-color-secondary);
+      overflow-y: scroll;
     }
 
     .content {
@@ -62,7 +63,6 @@
       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,19 +29,20 @@
             }}</span>
             <span class="storage-section__size">{{ section.totalSize }}</span>
           </div>
-          <svg
+          <div class="chevron-container">
-            class="storage-section__chevron"
+            <transition name="fade">
-            :class="{
+              <IconExpandVertical
-              'storage-section__chevron--expanded':
+                v-if="!expandedSections[section.type]"
-                expandedSections[section.type]
+                key="expand"
-            }"
+                class="storage-section__chevron"
-            viewBox="0 0 24 24"
+              />
-            fill="none"
+              <IconShrinkVertical
-            stroke="currentColor"
+                v-else
-            stroke-width="2"
+                key="shrink"
-          >
+                class="storage-section__chevron"
-            <polyline points="6 9 12 15 18 9" />
+              />
-          </svg>
+            </transition>
+          </div>
         </button>
         <div
           v-if="expandedSections[section.type]"
@@ -80,6 +81,8 @@
 <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;
@@ -210,15 +213,14 @@
       color: var(--text-color-50);
       font-family: monospace;
     }
+
     &__chevron {
+      position: absolute;
       width: 20px;
       height: 20px;
-      stroke: var(--text-color-70);
+      fill: var(--text-color-70);
-      transition: transform 0.2s ease;
-      &--expanded {
-        transform: rotate(180deg);
-      }
     }
+
     &__content {
       border-top: 1px solid var(--background-40);
     }
@@ -362,4 +364,22 @@
       }
     }
   }
+
+  .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,6 +129,7 @@
     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-secondary, var(--highlight-color));
+      border-left: 1px solid 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-secondary, var(--highlight-color));
+      border-right: 1px solid var(--highlight-color);
       max-width: 60px;
       text-align: center;
 
@@ -328,26 +328,19 @@
       color: var(--text-color);
 
       td {
-        border-left: 1px solid
+        border-left: 1px solid var(--highlight-color);
-          var(--highlight-secondary, var(--highlight-color));
         fill: var(--text-color);
       }
     }
     tr:nth-child(odd) {
-      background-color: var(--highlight-secondary, var(--background-color));
+      background: rgba(0, 0, 0, 0.15);
-      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
+        border-bottom: 1px solid var(--highlight-color);
-          var(--highlight-secondary, var(--highlight-color));
+        border-left: 1px solid 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(--background-color) 20%,
+      var(--highlight-bg, var(--background-color)) 20%,
       var(--background-0) 100%
     );
   }

src/components/ui/CommandPalette.vue

@@ -15,6 +15,8 @@
             @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,12 +1,18 @@
 @import "scss/variables";
 
 .noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-touch-callout: none;
-  -webkit-user-select: none; /* Safari */
+  /* iOS Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
+  -webkit-user-select: none;
-  -moz-user-select: none; /* Firefox */
+  /* Safari */
-  -ms-user-select: none; /* Internet Explorer/Edge */
+  -khtml-user-select: none;
-  user-select: none; /* Non-prefixed version, currently */
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently */
 }
 
 * {
@@ -16,6 +22,7 @@
 html {
   height: unset;
 }
+
 body {
   margin: 0;
   padding: 0;
@@ -24,27 +31,61 @@ body {
   background: var(--background-color);
   color: var(--text-color);
 
-  // TODO probably explicitly define
   * {
-    transition: 0.5s ease;
+    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;
+    }
   }
 
   &.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;
@@ -55,8 +96,10 @@ img {
 }
 
 @mixin noscrollbar {
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* Internet Explorer 10+ */
 
   &::-webkit-scrollbar {
     /* WebKit */
@@ -68,15 +111,16 @@ img {
 .button--group {
   display: flex;
 
-  > div:not(:first-child) {
+  >div:not(:first-child) {
     margin-left: 1rem;
   }
 }
 
 .form {
-  > div,
+
-  > input,
+  >div,
-  > button {
+  >input,
+  >button {
     margin-bottom: 1rem;
 
     &:last-child {