feat(history): adds basic history infinite scroll

Author: dvcol

package.json

@@ -53,7 +53,7 @@
   "dependencies": {
     "@dvcol/web-extension-utils": "^2.3.4",
     "@vue/devtools": "^7.0.15",
-    "naive-ui": "^2.37.3",
+    "naive-ui": "^2.38.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.14",
     "vue-router": "^4.2.5"

pnpm-lock.yaml

@@ -18,7 +18,9 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
     <RouterView v-slot="{ Component, route }">
       <GridBackground v-if="!Component" :size="20" />
       <Transition name="scale" mode="out-in">
-        <component :is="Component ?? PageLoading" :key="route.path" />
+        <KeepAlive>
+          <component :is="Component ?? PageLoading" :key="route.path" />
+        </KeepAlive>
       </Transition>
     </RouterView>
   </main>
@@ -33,12 +35,13 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
 $header-height: 2.75rem;
 
 header {
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: layers.$layer-ui;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  width: 100%;
   height: $header-height;
 
   > :first-child {
@@ -51,6 +54,6 @@ main {
   align-items: center;
   justify-content: center;
   min-height: calc(100% - #{$header-height});
-  padding: 0 2rem;
+  margin-top: $header-height;
 }
 </style>

src/components/AppComponent.vue

@@ -55,7 +55,7 @@ const navElement = ref<HTMLElement>();
 
 <style lang="scss" scoped>
 nav {
-  margin: 0 0.25rem;
+  padding: 0 0.25rem;
   font-size: 12px;
   text-align: center;
 

src/components/common/navbar/NavbarComponent.vue

@@ -1,9 +1,89 @@
 <script lang="ts" setup>
-// TODO
+import { NTimeline, NTimelineItem, NVirtualList } from 'naive-ui';
+import { onActivated, onMounted, ref } from 'vue';
+
+import type { VirtualListInst } from 'naive-ui';
+
+import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
+import type { TraktHistory } from '~/models/trakt/trakt-history.model';
+
+import { TraktService } from '~/services/trakt.service';
+
+const history = ref<TraktHistory[]>([]);
+const pagination = ref<TraktClientPagination>();
+const virtualList = ref<VirtualListInst>();
+
+const fetchData = async (
+  page = pagination.value?.page ? pagination.value.page + 1 : 0,
+) => {
+  const response = await TraktService.traktClient.sync.history.get.cached({
+    pagination: {
+      page,
+      limit: 30,
+    },
+  });
+
+  const data = await response.json();
+  pagination.value = response.pagination;
+  history.value = [...history.value, ...data];
+};
+
+const onScroll = async (e: Event) => {
+  if (!e?.target) return;
+  const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement;
+  if (!scrollTop || scrollHeight !== scrollTop + clientHeight) return;
+  if (pagination.value?.page === pagination.value?.pageCount) return;
+
+  const key = history.value[history.value.length - 1].id;
+  await fetchData();
+  virtualList.value?.scrollTo({ key, debounce: true });
+};
+
+onMounted(() => {
+  console.info('History mounted');
+  fetchData();
+});
+
+onActivated(() => {
+  console.info('History activated');
+});
+
+const getTitle = (media: TraktHistory) => {
+  if ('movie' in media) return media.movie.title;
+  return `${media.episode.season}x${media.episode.number.toString().padStart(2, '0')} - ${
+    media.episode.title
+  }`;
+};
 </script>
 
 <template>
-  <span>This is a history component</span>
+  <NVirtualList
+    ref="virtualList"
+    style="max-height: calc(100dvh - 8px); margin-top: -44px; margin-bottom: 8px"
+    :item-size="80"
+    :data-length="history.length"
+    :items="history"
+    :visible-items-tag="NTimeline"
+    :visible-items-tag-props="{ size: 'large' }"
+    :padding-top="56"
+    :padding-bottom="16"
+    @scroll="onScroll"
+  >
+    <template #default="{ item }">
+      <NTimelineItem
+        :key="item.id"
+        :data-key="item.id"
+        :style="{
+          fontVariantNumeric: 'tabular-nums',
+          margin: '0 1rem',
+        }"
+        type="success"
+        :title="getTitle(item)"
+        :content="item.show?.title"
+        :time="new Date(item.watched_at).toLocaleString()"
+      />
+    </template>
+  </NVirtualList>
 </template>
 
 <style lang="scss" scoped>

src/components/views/history/HistoryComponent.vue

@@ -103,7 +103,9 @@ export class TraktClientEndpoint<
   Parameter extends TraktApiParams = Record<string, never>,
   Response = unknown,
   Cache extends boolean = true,
-> extends ClientEndpoint<Parameter, Response, Cache, TraktApiTemplateOptions<keyof Parameter>> {}
+> extends ClientEndpoint<Parameter, Response, Cache, TraktApiTemplateOptions<keyof Parameter>> {
+  declare cached: Cache extends true ? Omit<this, 'cached'> & TraktClientEndpoint<Parameter, Response> : never;
+}
 
 export type TraktApiRequest = BaseRequest;
 

src/models/trakt/trakt-client.model.ts

@@ -96,8 +96,8 @@ type ClientEndpointCall<Parameter extends Record<string, never> = Record<string,
   init?: BaseInit,
 ) => Promise<ResponseOrTypedResponse<Response>>;
 
-export interface ClientEndpoint<Parameter extends RecursiveRecord = Record<string, never>> {
-  (param?: Parameter, init?: BaseInit): Promise<ResponseOrTypedResponse>;
+export interface ClientEndpoint<Parameter extends RecursiveRecord = Record<string, never>, Response = unknown> {
+  (param?: Parameter, init?: BaseInit): Promise<ResponseOrTypedResponse<Response>>;
 }
 type BaseCacheOption = { force?: boolean; retention?: number };
 

src/services/common/base-client.ts

@@ -17,7 +17,7 @@
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
   /* ui color variables */
-  --bg-blue: 2px;
+  --bg-blur: 2px;
   --bg-blur-black: rgb(0 0 0 / 30%);
   --bg-blur-black-hover: rgb(0 0 0 / 60%);