feat(listItem): rework list item to separate by date

Author: dvcol

src/components/common/background/GridBackground.vue

@@ -63,13 +63,13 @@ onBeforeUnmount(() => window.removeEventListener('resize', handleResize));
   .grid-item {
     width: var(--grid-size);
     height: var(--grid-size);
-    border-top: 0.1px solid var(--bg-blur-bg);
-    border-left: 0.1px solid var(--bg-blur-bg);
+    border-top: 0.1px solid var(--bg-color);
+    border-left: 0.1px solid var(--bg-color);
     transition: background-color 0.25s var(--n-bezier);
     will-change: background-color;
 
     &:hover {
-      background-color: var(--bg-blur-bg-hover);
+      background-color: var(--bg-color-hover);
       transition: none;
     }
   }

src/components/common/list/ListItem.vue

@@ -4,6 +4,7 @@ import { NFlex, NImage, NTimelineItem } from 'naive-ui';
 import { computed, type PropType, toRefs } from 'vue';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
+import { Colors } from '~/styles/colors.style';
 
 const props = defineProps({
   id: {
@@ -19,16 +20,21 @@ const props = defineProps({
     required: false,
     default: PosterPlaceholder,
   },
-  type: {
-    type: String as PropType<'default' | 'error' | 'info' | 'success' | 'warning'>,
+  color: {
+    type: String,
     required: false,
-    default: 'default',
+    default: Colors.traktRedDark,
   },
   lineType: {
     type: String as PropType<'dashed' | 'default'>,
     required: false,
     default: 'default',
   },
+  tag: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
 });
 
 const { id, index } = toRefs(props);
@@ -40,31 +46,55 @@ const isLoading = computed(() => id?.value < 0);
   <NTimelineItem
     :key="id"
     class="timeline-item"
+    :class="{ 'no-tag': !tag }"
     :data-key="id"
     :data-index="index"
-    :type="isLoading ? type : 'success'"
-    :line-type="isLoading ? lineType : 'default'"
+    :line-type="isLoading ? 'dashed' : lineType"
+    :color="isLoading ? 'grey' : color"
   >
-    <NFlex>
-      <NImage
-        alt="poster-image"
-        class="poster"
-        lazy
-        preview-disabled
-        :src="poster"
-        :preview-src="poster"
-        :fallback-src="PosterPlaceholder"
-      />
-      <slot :id="id" :index="index" :loading="isLoading" />
-    </NFlex>
+    <template #icon>
+      <slot name="tag" />
+    </template>
+    <template #header>
+      <slot name="before" />
+    </template>
+    <template #default>
+      <NFlex class="content">
+        <NImage
+          alt="poster-image"
+          class="poster"
+          lazy
+          preview-disabled
+          :src="poster"
+          :preview-src="poster"
+          :fallback-src="PosterPlaceholder"
+        />
+        <slot :id="id" :index="index" :loading="isLoading" />
+      </NFlex>
+    </template>
+    <template #footer>
+      <slot name="after" />
+    </template>
   </NTimelineItem>
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
+
 .timeline-item {
-  font-variant-numeric: tabular-nums;
   margin: 0 1rem;
 
+  .content {
+    @include mixin.hover-background(
+      $from: transparent,
+      $to: var(--bg-color-20),
+      $transition: 0.2s var(--n-bezier)
+    );
+
+    padding: 0.5rem;
+    border-top: 1px solid rgba(255 255 255 / 10%);
+  }
+
   .poster {
     justify-content: center;
     width: 5.5rem;
@@ -73,3 +103,27 @@ const isLoading = computed(() => id?.value < 0);
   }
 }
 </style>
+
+<style lang="scss">
+/* stylelint-disable selector-class-pattern -- library class name */
+
+.timeline-item.n-timeline-item .n-timeline-item-content .n-timeline-item-content__meta {
+  margin: 0;
+}
+
+.n-timeline.n-timeline--left-placement {
+  .timeline-item.n-timeline-item .n-timeline-item-timeline {
+    top: -6px;
+  }
+
+  .timeline-item.no-tag.n-timeline-item .n-timeline-item-timeline {
+    .n-timeline-item-timeline__line {
+      top: 0;
+    }
+
+    .n-timeline-item-timeline__circle {
+      display: none;
+    }
+  }
+}
+</style>

src/components/common/list/ListScroll.vue

@@ -13,6 +13,7 @@ import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 
 import ListEmpty from '~/components/common/list/ListEmpty.vue';
 import ListItem from '~/components/common/list/ListItem.vue';
+import { debounce } from '~/utils/debounce.utils';
 
 const virtualList = ref<VirtualListRef>();
 
@@ -40,7 +41,8 @@ const props = defineProps({
 });
 
 const emits = defineEmits<{
-  (e: 'onScroll', listRef: Ref<VirtualListRef | undefined>): void;
+  (e: 'onScrollBottom', listRef: Ref<VirtualListRef | undefined>): void;
+  (e: 'onScrollTop', listRef: Ref<VirtualListRef | undefined>): void;
   (e: 'onUpdated', listRef: Ref<VirtualListRef | undefined>): void;
 }>();
 
@@ -49,16 +51,19 @@ const { items, loading, pagination } = toRefs(props);
 const onScrollHandler = async (e: Event) => {
   if (loading.value) return;
   if (!e?.target) return;
-  const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement;
-  if (!scrollTop || scrollHeight !== scrollTop + clientHeight) return;
+  const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLElement;
+  if (scrollHeight === clientHeight) return;
+  if (!scrollTop) return emits('onScrollTop', virtualList);
+  if (scrollHeight !== scrollTop + clientHeight) return;
   if (pagination?.value?.page === pagination?.value?.pageCount) return;
-
-  return emits('onScroll', virtualList);
+  return emits('onScrollBottom', virtualList);
 };
 
 const onUpdatedHandler = () => {
   return emits('onUpdated', virtualList);
 };
+
+const debounceLog = debounce(e => console.info('top', e), 100);
 </script>
 
 <template>
@@ -69,11 +74,14 @@ const onUpdatedHandler = () => {
       class="list-scroll"
       :data-length="items.length"
       :data-page-size="pageSize"
-      :item-size="listOptions?.itemSize ?? 148"
+      :item-size="listOptions?.itemSize ?? 145"
       :items="items"
       :visible-items-tag="listOptions?.visibleItemsTag ?? NTimeline"
-      :visible-items-props="{ size: 'large', ...listOptions?.visibleItemsProps }"
-      :padding-top="listOptions?.paddingTop ?? 56"
+      :visible-items-props="{
+        size: 'large',
+        ...listOptions?.visibleItemsProps,
+      }"
+      :padding-top="listOptions?.paddingTop ?? 60"
       :padding-bottom="listOptions?.paddingBottom ?? 16"
       @scroll="onScrollHandler"
       @vue:updated="onUpdatedHandler"

src/components/container/ContainerComponent.ce.vue

@@ -14,13 +14,12 @@ import { computed, ref } from 'vue';
 import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
 import MessageProvider from '~/components/container/MessageProvider.vue';
 import NotificationProvider from '~/components/container/NotificationProvider.vue';
-import { watchPreferDark } from '~/utils';
 import { lazyComponent } from '~/utils/lazy.utils';
 
 const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue'));
 
-const isDark = watchPreferDark();
-const theme = computed(() => (isDark.value ? darkTheme : lightTheme));
+const isLight = ref(false); // watchPreferLight(); TODO implement light theme
+const theme = computed(() => (isLight.value ? lightTheme : darkTheme));
 
 const override: GlobalThemeOverrides = {
   // TODO red palette
@@ -92,35 +91,35 @@ const root = ref<HTMLElement>();
 .n-dropdown-menu,
 .n-date-panel,
 .n-virtual-list {
-  @include mixin.hover-background;
+  @include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
 
-  @media (prefers-color-scheme: light) {
-    @include mixin.hover-background;
+  @media (prefers-color-scheme: dark) {
+    @include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
   }
 
-  @media (prefers-color-scheme: dark) {
-    @include mixin.hover-background(var(--bg-black-80), var(--bg-black-90));
+  @media (prefers-color-scheme: light) {
+    @include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
   }
 }
 
 .n-select-menu {
-  @include mixin.hover-background(var(--bg-red-20), var(--bg-red-80));
+  @include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
 
-  @media (prefers-color-scheme: light) {
-    @include mixin.hover-background(var(--bg-red-20), var(--bg-red-80));
+  @media (prefers-color-scheme: dark) {
+    @include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
   }
 
-  @media (prefers-color-scheme: dark) {
-    @include mixin.hover-background(var(--bg-black-20), var(--bg-black-80));
+  @media (prefers-color-scheme: light) {
+    @include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
   }
 }
 
 .n-tooltip.n-tooltip {
-  background: var(--bg-blur-bg);
+  background: var(--bg-color);
   backdrop-filter: blur(var(--bg-blur));
 
   &:hover {
-    background: var(--bg-blur-bg-hover);
+    background: var(--bg-color-hover);
   }
 
   @media (prefers-color-scheme: light) {

src/components/views/history/HistoryComponent.vue

@@ -63,7 +63,8 @@ const onUpdated: OnUpdated = listRef => {
     :loading="loading"
     :pagination="pagination"
     :page-size="pageSize"
-    @on-scroll="onScroll"
+    @on-scroll-bottom="onScroll"
+    @on-scroll-top="() => console.info('Scrolled to top')"
     @on-updated="onUpdated"
   >
     <template #default="{ item, loading: itemLoading }">