feat(list): create list buttons for list quick actions

Author: dvcol

src/components/common/list/ListButton.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { type ButtonProps, NButton } from 'naive-ui';
+
+const { buttonProps } = defineProps<{
+  buttonProps?: ButtonProps;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'onClick', event: MouseEvent): void;
+}>();
+
+const onClick = (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+  emit('onClick', e);
+};
+</script>
+
+<template>
+  <NButton
+    class="list-button"
+    quaternary
+    v-bind="buttonProps"
+    @click="onClick"
+    @keydown.enter="onClick"
+  >
+    <slot />
+  </NButton>
+</template>
+
+<style scoped lang="scss">
+.list-button {
+  --color: var(--bg-black-80);
+  --progress: 100%;
+
+  display: flex;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: min(20vw, 10rem);
+  padding-left: 20%;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--color) var(--progress)
+  ) !important;
+  /* stylelint-disable custom-property-no-missing-var-function -- custom property */
+  transition:
+    --color 0.25s var(--n-bezier),
+    --progress 0.25s var(--n-bezier);
+
+  // stylelint-disable-next-line selector-class-pattern -- framework override
+  &:not(.n-button--disabled) {
+    &:focus-visible,
+    &:hover {
+      --color: var(--bg-black-90);
+      --progress: 70%;
+    }
+
+    &:active {
+      --color: var(--bg-black);
+      --progress: 50%;
+    }
+  }
+}
+</style>

src/components/common/list/ListItem.vue

@@ -300,28 +300,33 @@ const onClick = (e: MouseEvent | KeyboardEvent) =>
         $transition: 0.3s var(--n-bezier)
       );
 
+      position: relative;
       flex: 1 1 auto;
       margin: 0.25rem 0;
       padding: 0.3rem 0.25rem 0.25rem;
       overflow: hidden;
       border-radius: 0.75rem;
 
-      &:active {
-        background-color: var(--bg-color-30);
-        box-shadow: var(--inset-box-shadow);
-      }
-
       &-buttons {
         position: absolute;
         right: 0;
         z-index: layers.$in-front;
-        transition: translate 0.25s var(--n-bezier);
-        translate: 150%;
+        box-sizing: border-box;
+        height: calc(var(--list-item-height, 100%) - 0.5rem);
+        opacity: 0;
+        transition:
+          translate 0.25s var(--n-bezier),
+          opacity 0.25s var(--n-bezier);
+        translate: 100%;
+
+        &:focus-within {
+          transition: opacity 0.25s var(--n-bezier);
+        }
 
         &:focus-within,
         &.open {
+          opacity: 1;
           translate: 0;
-          display: flex;
         }
 
         :first-child {
@@ -346,6 +351,11 @@ const onClick = (e: MouseEvent | KeyboardEvent) =>
     backdrop-filter: var(--bg-blur-hover);
   }
 
+  .content .tile:active:not(:has(button:active)) {
+    background-color: var(--bg-color-30);
+    box-shadow: var(--inset-box-shadow);
+  }
+
   .header {
     position: absolute;
     top: 0;

src/components/container/ContainerComponent.ce.vue

@@ -9,7 +9,7 @@ import {
   NNotificationProvider,
 } from 'naive-ui';
 
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
 import MessageProvider from '~/components/container/MessageProvider.vue';
@@ -19,7 +19,7 @@ import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { lazyComponent } from '~/utils/lazy.utils';
-import { addCustomProgressProperty } from '~/utils/style.utils';
+import '~/styles/properties.css';
 
 const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue'));
 
@@ -34,8 +34,6 @@ const { drawer, open, dropdown } = NavbarService;
 const { enabledRoutes, backgroundColor, brand } = useExtensionSettingsStoreRefs();
 const { root, floating, reverse } = useAppStateStoreRefs();
 const { isWatching } = useWatchingStoreRefs();
-
-onBeforeMount(() => addCustomProgressProperty());
 </script>
 
 <template>

src/styles/mixin.scss

@@ -12,6 +12,7 @@
   backdrop-filter: blur($blur);
   transition: $transition-prop $transition;
 
+  &:focus-within,
   &:active,
   &:hover {
     background: $to;
@@ -21,13 +22,13 @@
   }
 }
 
-
 @mixin hover-background-only(
   $from: var(--custom-bg-color, var(--bg-color)),
   $to: var(--custom-bg-color-hover, var(--bg-color-hover)),
 ) {
   background: $from;
 
+  &:focus-within,
   &:active,
   &:hover {
     background: $to;

src/styles/properties.css

@@ -0,0 +1,11 @@
+@property --color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+
+@property --progress {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 0%;
+}