feat(checkin): add checkin button in panels

Author: dvcol

src/components/AppComponent.vue

@@ -56,7 +56,7 @@ const onBack = () => {
 </script>
 
 <template>
-  <div ref="appRef">
+  <div ref="appRef" class="container">
     <NDialogProvider :to="appRef">
       <header :class="{ open: panel }">
         <RouterView v-slot="{ Component }" name="navbar">
@@ -173,6 +173,10 @@ footer {
   width: 100%;
 }
 
+.container {
+  height: 100%;
+}
+
 .panel {
   position: relative;
   max-height: calc(100% - #{layout.$header-navbar-height});

src/components/common/list/ListEmpty.vue

@@ -53,7 +53,7 @@ const emit = defineEmits<{
   transition: color 0.3s var(--n-bezier);
 
   .page {
-    color: var(--primary-color-disabled);
+    color: var(--color-primary-disabled);
     font-weight: bold;
   }
 }

src/components/common/list/ListLoadMore.vue

@@ -62,7 +62,7 @@ const emit = defineEmits<{
   transition: color 0.3s var(--n-bezier);
 
   .page {
-    color: var(--primary-color-disabled);
+    color: var(--color-primary-disabled);
     font-weight: bold;
   }
 }

src/components/common/typography/TextField.vue

@@ -93,11 +93,13 @@ const { openTab } = useLinksStore();
 
 .value {
   flex: 1 1 auto;
+  min-width: max-content;
 }
 
 .detail {
   flex: var(--text-flex);
   align-items: baseline;
+  min-width: max-content;
 
   &:hover .prefix {
     color: var(--white-70);

src/components/icons/IconConfirmCircle.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path
+        stroke-dasharray="60"
+        stroke-dashoffset="60"
+        d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.5s"
+          values="60;0"
+        />
+      </path>
+      <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.6s"
+          dur="0.2s"
+          values="14;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/views/panel/MoviePanelButtons.vue

@@ -9,6 +9,7 @@ import IconListEmpty from '~/components/icons/IconListEmpty.vue';
 import IconPlay from '~/components/icons/IconPlay.vue';
 import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
 import PanelButtonProgress from '~/components/views/panel/PanelButtonProgress.vue';
+import PanelSelectProgress from '~/components/views/panel/PanelSelectProgress.vue';
 import {
   PanelButtonsOption,
   type PanelButtonsOptions,
@@ -51,15 +52,29 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  watching: {
+    type: Boolean,
+    required: false,
+  },
+  watchProgress: {
+    type: Number,
+    required: false,
+  },
+  checkinLoading: {
+    type: Boolean,
+    required: false,
+  },
 });
 
 const emit = defineEmits<{
   (e: 'onListUpdate', value: ListEntity['id'], remove: boolean): void;
   (e: 'onCollectionUpdate', value: PanelButtonsOptions, date?: number): void;
   (e: 'onWatchedUpdate', value: PanelButtonsOptions, date?: number): void;
+  (e: 'onCheckin', cancel: boolean): void;
 }>();
 
-const { watched, collected, activeLoading, activeLists, hasRelease } = toRefs(props);
+const { watched, collected, activeLoading, activeLists, hasRelease, watching } =
+  toRefs(props);
 
 const onListUpdate = (value: ListEntity['id'] | ListEntity['id'][]) => {
   const newList = Array.isArray(value) ? value : [value];
@@ -123,16 +138,16 @@ const listOptions = computed(
       })),
 );
 
-onMounted(() => {
-  fetchLists();
-});
+const onCheckin = () => emit('onCheckin', watching.value);
+
+onMounted(() => fetchLists());
 </script>
 
 <template>
   <div ref="root" class="panel-buttons">
     <!--  List  -->
     <NFlex class="button-container list" justify="center" align="center">
-      <PanelButtonProgress
+      <PanelSelectProgress
         :options="listOptions"
         :value="activeLists"
         :select="{
@@ -157,12 +172,12 @@ onMounted(() => {
           </NFlex>
         </template>
         {{ i18n(`label__list__${ activeLists?.length ? 'update' : 'add' }`) }}
-      </PanelButtonProgress>
+      </PanelSelectProgress>
     </NFlex>
 
     <!--  Collection  -->
     <NFlex class="button-container collection" justify="center" align="center">
-      <PanelButtonProgress
+      <PanelSelectProgress
         :select="{
           options: collectionOptions,
         }"
@@ -173,12 +188,12 @@ onMounted(() => {
         @on-select="onCollectionUpdate"
       >
         {{ i18n(`label__collection__${ collected ? 'remove' : 'add' }`) }}
-      </PanelButtonProgress>
+      </PanelSelectProgress>
     </NFlex>
 
     <!--  History  -->
     <NFlex class="button-container history" justify="center" align="center">
-      <PanelButtonProgress
+      <PanelSelectProgress
         :select="{
           options: watchedOptions,
         }"
@@ -188,6 +203,18 @@ onMounted(() => {
         @on-select="onWatchedUpdate"
       >
         {{ i18n(`label__history__${ watched ? 'remove' : 'add' }`) }}
+      </PanelSelectProgress>
+    </NFlex>
+
+    <!--  Check-in  -->
+    <NFlex class="button-container checkin" justify="center" align="center">
+      <PanelButtonProgress
+        :filled="watching"
+        :percentage="watchProgress"
+        :loading="checkinLoading"
+        @click="onCheckin"
+      >
+        {{ i18n('checkin', 'common', 'button') }}
       </PanelButtonProgress>
     </NFlex>
   </div>
@@ -207,18 +234,6 @@ onMounted(() => {
     i {
       margin-left: calc(0% - var(--n-icon-margin));
     }
-
-    &.history {
-      min-width: 10.125rem;
-    }
-
-    &.collection {
-      min-width: 11.375rem;
-    }
-
-    &.list {
-      min-width: 8.875rem;
-    }
   }
 }
 
@@ -227,4 +242,10 @@ onMounted(() => {
     gap: 1.25rem 3rem;
   }
 }
+
+@media (width < 660px) {
+  .button-container {
+    min-width: 45%;
+  }
+}
 </style>