update review timing

client/src/App.vue

@@ -1,28 +1,7 @@
 <template lang="pug">
   v-app.zen-app.overflow-hidden
-    .parallax-bg(
-      :style="parallaxStyle"
-      :class="{ 'zooming': viewState === 'zooming' }"
-    )
-      .bg-gradient
-      .bg-grid
-
-      .kanji-layer
-        span.bg-kanji(
-          v-for="(k, i) in backgroundKanjis"
-          :key="i"
-          :style="k.style"
-        ) {{ k.char }}
-
-      .orb.orb-1(:class="{ 'zooming': viewState === 'zooming' }")
-      .orb.orb-2(:class="{ 'zooming': viewState === 'zooming' }")
-      .orb.orb-3(:class="{ 'zooming': viewState === 'zooming' }")
-
-    .app-content-wrapper(
-      v-if="store.token || viewState === 'zooming'"
-      :class="{ 'app-entering': viewState === 'zooming', 'app-visible': viewState === 'app' }"
-    )
     v-navigation-drawer(
+      v-if="store.token || viewState === 'zooming'"
       v-model="drawer"
       temporary
       location="right"
@@ -83,6 +62,28 @@
           )
             v-icon(start icon="mdi-logout")
             | {{ $t('nav.logout') }}
+    .parallax-bg(
+      :style="parallaxStyle"
+      :class="{ 'zooming': viewState === 'zooming' }"
+    )
+      .bg-gradient
+      .bg-grid
+
+      .kanji-layer
+        span.bg-kanji(
+          v-for="(k, i) in backgroundKanjis"
+          :key="i"
+          :style="k.style"
+        ) {{ k.char }}
+
+      .orb.orb-1(:class="{ 'zooming': viewState === 'zooming' }")
+      .orb.orb-2(:class="{ 'zooming': viewState === 'zooming' }")
+      .orb.orb-3(:class="{ 'zooming': viewState === 'zooming' }")
+
+    .app-content-wrapper(
+      v-if="store.token || viewState === 'zooming'"
+      :class="{ 'app-entering': viewState === 'zooming', 'app-visible': viewState === 'app' }"
+    )
 
       v-app-bar.px-2.app-bar-blur.safe-area-header(
         flat

client/src/styles/components/_index.scss

@@ -1,3 +1,5 @@
+@use 'readings';
+@use 'radicals';
 @use 'buttons';
 @use 'cards';
 @use 'kanji/index' as kanji;

client/src/styles/components/_radicals.scss

@@ -0,0 +1,20 @@
+@use '../abstracts' as *;
+
+.radical-section {
+	width: 100%;
+	background: $color-zinc-900;
+	border-radius: $radius-md;
+	padding: $spacing-md;
+	margin-bottom: $spacing-lg;
+}
+
+.radical-chip {
+	border-radius: $radius-md;
+	border: $border-width-sm solid $color-border;
+	background-color: $color-surface-lighter;
+
+	img {
+		filter: invert(1);
+		width: 100%;
+	}
+}

client/src/styles/components/_readings.scss

@@ -0,0 +1,28 @@
+@use '../abstracts' as *;
+
+.readings-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: $spacing-lg;
+	width: 100%;
+}
+
+.reading-box {
+	background: $color-reading-box;
+	padding: $spacing-lg;
+	border-radius: $radius-lg;
+	text-align: center;
+
+	.label {
+		font-size: $font-xs;
+		color: #666;
+		letter-spacing: 0.0625rem;
+		text-transform: uppercase;
+		margin-bottom: $spacing-xs;
+	}
+
+	.val {
+		font-size: 1.1rem;
+		font-weight: $weight-bold;
+	}
+}

client/src/styles/layout/_app-shell.scss

@@ -2,7 +2,7 @@
 
 .v-navigation-drawer {
 	background-color: $color-surface !important;
-	border-right: $border-width-sm solid $color-border;
+	padding-top: env(safe-area-inset-top) !important;
 
 	.v-list-item--active {
 		background-color: $bg-glass-strong;

client/src/styles/pages/_lesson.scss

@@ -16,52 +16,6 @@
 	height: $size-hero-wrapper;
 }
 
-.radical-section {
-	width: 100%;
-	background: $color-zinc-900;
-	border-radius: $radius-md;
-	padding: $spacing-md;
-	margin-bottom: $spacing-lg;
-}
-
-.radical-chip {
-	border-radius: $radius-md;
-	border: $border-width-sm solid $color-border;
-	background-color: $color-surface-lighter;
-
-	img {
-		filter: invert(1);
-		width: 100%;
-	}
-}
-
-.readings-grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: $spacing-lg;
-	width: 100%;
-}
-
-.reading-box {
-	background: $color-reading-box;
-	padding: $spacing-lg;
-	border-radius: $radius-lg;
-	text-align: center;
-
-	.label {
-		font-size: $font-xs;
-		color: #666;
-		letter-spacing: 0.0625rem;
-		text-transform: uppercase;
-		margin-bottom: $spacing-xs;
-	}
-
-	.val {
-		font-size: 1.1rem;
-		font-weight: $weight-bold;
-	}
-}
-
 .lesson-canvas-wrapper {
 	margin: 0 auto;
 }

client/src/styles/pages/_review.scss

@@ -45,3 +45,10 @@
 .gap-2 {
 	gap: $spacing-sm;
 }
+
+.reading-box--small {
+    padding: $spacing-sm;
+    .val {
+        font-size: 1rem;
+    }
+}

client/src/views/Collection.vue

@@ -92,6 +92,18 @@
           :svg-content="preloadedSvg"
         )
 
+        .radical-section.mb-4(v-if="selectedItem?.radicals?.length")
+          .text-caption.text-grey-darken-1.text-uppercase.mb-3.font-weight-bold
+            |{{ $t('lesson.components') }}
+          .d-flex.flex-wrap.gap-3.justify-center
+            v-sheet.radical-chip(
+              v-for="rad in selectedItem.radicals" :key="rad.meaning")
+              .d-flex.align-center.gap-2.px-3.py-1
+                v-avatar(size="24" rounded="0")
+                  img(v-if="rad.image" :src="rad.image")
+                  span.text-h6.font-weight-bold.text-white(v-else) {{ rad.char }}
+                .text-caption.text-grey-lighten-1 {{ rad.meaning }}
+
         .readings-container.mb-4
           .reading-group(v-if="hasReading(selectedItem?.onyomi)")
             .reading-label {{ $t('collection.onyomi') }}
@@ -105,6 +117,17 @@
             .reading-label {{ $t('collection.nanori') }}
             .reading-value {{ selectedItem?.nanori.join(', ') }}
 
+        .px-2.mb-4(v-if="selectedItem?.stats?.total > 0")
+          .d-flex.justify-space-between.align-center.mb-1
+            .text-caption.text-grey {{ $t('stats.accuracy') }}
+            .text-caption.font-weight-bold {{ accuracyStats.text }}
+          v-progress-linear(
+            :model-value="accuracyStats.percent"
+            color="light-blue"
+            height="6"
+            rounded
+          )
+
         v-row.px-2.pb-2
           v-col.pr-2(cols="6")
              v-btn.text-white(
@@ -142,6 +165,16 @@ const searchQuery = ref('');
 const preparingId = ref(null);
 const preloadedSvg = ref('');
 
+const accuracyStats = computed(() => {
+  if (!selectedItem.value?.stats || selectedItem.value.stats.total === 0) {
+    return { percent: 100, text: 'No history' };
+  }
+  const { correct, total } = selectedItem.value.stats;
+  const percent = Math.round((correct / total) * 100);
+  const text = `${correct} / ${total}`;
+  return { percent, text };
+});
+
 onMounted(async () => {
   await store.fetchCollection();
   loading.value = false;

client/src/views/Lesson.vue

@@ -38,13 +38,13 @@
                       img(v-if="rad.image" :src="rad.image")
                       span.text-h6.font-weight-bold.text-white(v-else) {{ rad.char }}
                     .text-caption.text-grey-lighten-1 {{ rad.meaning }}
-            .readings-grid
+            .readings-grid(v-if="(currentItem.onyomi && currentItem.onyomi.length > 0) || (currentItem.kunyomi && currentItem.kunyomi.length > 0)")
-              .reading-box
+              .reading-box(v-if="currentItem.onyomi && currentItem.onyomi.length > 0")
                 .label {{ $t('collection.onyomi') }}
-                .val.text-cyan-lighten-3 {{ currentItem.onyomi[0] || '-' }}
+                .val.text-cyan-lighten-3 {{ currentItem.onyomi.join(', ') }}
-              .reading-box
+              .reading-box(v-if="currentItem.kunyomi && currentItem.kunyomi.length > 0")
                 .label {{ $t('collection.kunyomi') }}
-                .val.text-pink-lighten-3 {{ currentItem.kunyomi[0] || '-' }}
+                .val.text-pink-lighten-3 {{ currentItem.kunyomi.join(', ') }}
 
         v-window-item(value="demo")
           .d-flex.flex-column.align-center.justify-center.h-100.pa-6
@@ -111,12 +111,14 @@ import {
   ref, computed, onMounted, nextTick, watch,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useAppStore } from '@/stores/appStore';
 import KanjiCanvas from '@/components/kanji/KanjiCanvas.vue';
 import KanjiSvgViewer from '@/components/kanji/KanjiSvgViewer.vue';
 
 const { t } = useI18n();
 const store = useAppStore();
+const route = useRoute();
 const currentItem = ref(null);
 const phase = ref('primer');
 const subPhase = ref('guided');
@@ -179,7 +181,12 @@ async function handleDrawComplete() {
       canvas.value?.reset();
       canvasOpacity.value = 1;
     } else {
+      const isRedo = !!route.query.subjectId;
+
+      if (!isRedo) {
         await store.submitLesson(currentItem.value.wkSubjectId);
+      }
+
       sessionDone.value += 1;
       store.lessonQueue.shift();
       loadNext();
@@ -200,7 +207,15 @@ function useHint() {
 
 onMounted(async () => {
   loading.value = true;
+  const { subjectId } = route.query;
+  const historyState = window.history.state;
+
+  if (subjectId && historyState && historyState.item) {
+    store.lessonQueue = [historyState.item];
+  } else {
     await store.fetchLessonQueue();
+  }
+
   sessionTotal.value = store.lessonQueue.length;
   loadNext();
   loading.value = false;

client/src/views/Review.vue

@@ -28,8 +28,15 @@
         .text-center.mb-6
           .text-caption.text-grey.text-uppercase.tracking-wide.mb-1
             | {{ $t('review.meaning') }}
-          .text-h3.font-weight-bold.text-white.text-shadow
+          .text-h3.font-weight-bold.text-white.text-shadow.mb-4
             | {{ currentItem.meaning }}
+          .readings-grid(v-if="(currentItem.onyomi && currentItem.onyomi.length > 0) || (currentItem.kunyomi && currentItem.kunyomi.length > 0)")
+            .reading-box.reading-box--small(v-if="currentItem.onyomi && currentItem.onyomi.length > 0")
+              .label {{ $t('collection.onyomi') }}
+              .val.text-cyan-lighten-3 {{ currentItem.onyomi.join(', ') }}
+            .reading-box.reading-box--small(v-if="currentItem.kunyomi && currentItem.kunyomi.length > 0")
+              .label {{ $t('collection.kunyomi') }}
+              .val.text-pink-lighten-3 {{ currentItem.kunyomi.join(', ') }}
 
         .review-canvas-area
           KanjiCanvas(

server/src/services/review.service.js

@@ -57,7 +57,7 @@ export const processReview = async (user, subjectId, success) => {
 		item.nextReview = getSRSDate(nextLevel);
 	} else {
 		item.srsLevel = Math.max(1, item.srsLevel - 1);
-		item.nextReview = Date.now();
+		item.nextReview = getSRSDate(item.srsLevel);
 	}
 
 	await item.save();

server/src/utils/dateUtils.js

@@ -17,9 +17,9 @@ export const getSRSDate = (level) => {
 		case 5: hoursToAdd = 7 * 24; break;
 		case 6: hoursToAdd = 14 * 24; break;
 
-		case 7: hoursToAdd = 7 * 24; break;
+		case 7: hoursToAdd = 30 * 24; break;
-		case 8: hoursToAdd = 30 * 24; break;
+		case 8: hoursToAdd = 90 * 24; break;
-		case 9: hoursToAdd = 90 * 24; break;
+		case 9: hoursToAdd = 180 * 24; break;
 
 		case 10: break;
 		default: hoursToAdd = 4;