add new lesson mode and started code refraction

client/src/App.vue

@@ -62,7 +62,7 @@
             v-icon(start icon="mdi-logout")
             | {{ $t('nav.logout') }}
 
-    v-app-bar.px-2.app-bar-blur(
+    v-app-bar.px-2.app-bar-blur.safe-area-header(
       flat
       color="rgba(30, 30, 36, 0.8)"
       border="b"
@@ -189,10 +189,10 @@
           .text-center.text-h5.font-weight-bold.text-teal-accent-3.mb-6
             | {{ tempBatchSize }} {{ $t('settings.items') }}
 
-          .text-caption.text-grey.mb-2 Drawing Tolerance
+          .text-caption.text-grey.mb-2 {{ $t('settings.drawingTolerance') }}
           v-slider(
             v-model="tempDrawingAccuracy"
-            :min="5"
+            :min="1"
             :max="20"
             :step="1"
             thumb-label
@@ -200,9 +200,9 @@
             track-color="grey-darken-3"
           )
           .d-flex.justify-space-between.text-caption.text-grey-lighten-1.mb-6.px-1
-            span Strict (5)
+            span {{ $t('settings.strict') }} (5)
             span.font-weight-bold.text-body-1(color="#00cec9") {{ tempDrawingAccuracy }}
-            span Loose (20)
+            span {{ $t('settings.loose') }} (20)
 
           .text-caption.text-grey.mb-2 {{ $t('settings.language') }}
           v-btn-toggle.d-flex.w-100.border-subtle(
@@ -255,9 +255,10 @@
 </template>
 
 <script setup>
+/* eslint-disable no-unused-vars */
 import { ref, watch, onMounted } from 'vue';
-import { useAppStore } from '@/stores/appStore';
 import { useI18n } from 'vue-i18n';
+import { useAppStore } from '@/stores/appStore';
 import logo from '@/assets/icon.svg';
 
 const drawer = ref(false);
@@ -276,73 +277,86 @@ const tempBatchSize = ref(store.batchSize);
 const tempDrawingAccuracy = ref(store.drawingAccuracy);
 
 onMounted(() => {
-	if (store.token) {
-		store.fetchStats();
-	}
+  if (store.token) {
+    store.fetchStats();
+  }
 });
 
 watch(showSettings, (isOpen) => {
-	if (isOpen) {
-		tempBatchSize.value = store.batchSize;
-		tempDrawingAccuracy.value = store.drawingAccuracy;
-	}
+  if (isOpen) {
+    tempBatchSize.value = store.batchSize;
+    tempDrawingAccuracy.value = store.drawingAccuracy;
+  }
 });
 
-async function handleLogin() {
-	if (!inputKey.value) return;
-	loggingIn.value = true;
-	errorMsg.value = '';
-
-	try {
-		const result = await store.login(inputKey.value.trim());
-		if (result.user && !result.user.lastSync) {
-			manualSync();
-		}
-	} catch (e) {
-		console.error(e);
-		errorMsg.value = e.message || t('login.failed');
-	} finally {
-		loggingIn.value = false;
-	}
+async function manualSync() {
+  syncing.value = true;
+  try {
+    const result = await store.sync();
+    snackbar.value = { show: true, text: t('alerts.syncSuccess', { count: result.count }), color: 'success' };
+    await store.fetchQueue();
+    await store.fetchStats();
+    await store.fetchCollection();
+  } catch (e) {
+    console.error(e);
+    snackbar.value = { show: true, text: t('alerts.syncFailed'), color: 'error' };
+  } finally {
+    syncing.value = false;
+  }
 }
 
-async function manualSync() {
-	syncing.value = true;
-	try {
-		const result = await store.sync();
-		snackbar.value = { show: true, text: t('alerts.syncSuccess', { count: result.count }), color: 'success' };
-		await store.fetchQueue();
-		await store.fetchStats();
-		await store.fetchCollection();
-	} catch (e) {
-		console.error(e);
-		snackbar.value = { show: true, text: t('alerts.syncFailed'), color: 'error' };
-	} finally {
-		syncing.value = false;
-	}
+async function handleLogin() {
+  if (!inputKey.value) return;
+  loggingIn.value = true;
+  errorMsg.value = '';
+
+  try {
+    const result = await store.login(inputKey.value.trim());
+    if (result.user && !result.user.lastSync) {
+      manualSync();
+    }
+  } catch (e) {
+    console.error(e);
+    errorMsg.value = e.message || t('login.failed');
+  } finally {
+    loggingIn.value = false;
+  }
 }
 
 function saveSettings() {
-	store.saveSettings({
-		batchSize: tempBatchSize.value,
-		drawingAccuracy: tempDrawingAccuracy.value
-	});
+  store.saveSettings({
+    batchSize: tempBatchSize.value,
+    drawingAccuracy: tempDrawingAccuracy.value,
+  });
 
-	localStorage.setItem('zen_locale', locale.value);
+  localStorage.setItem('zen_locale', locale.value);
 
-	showSettings.value = false;
-	store.fetchQueue();
+  showSettings.value = false;
+  store.fetchQueue();
 }
 
 function handleLogout() {
-	showLogoutDialog.value = true;
-	drawer.value = false;
+  showLogoutDialog.value = true;
+  drawer.value = false;
 }
 function confirmLogout() {
-	store.logout();
-	inputKey.value = '';
-	showLogoutDialog.value = false;
+  store.logout();
+  inputKey.value = '';
+  showLogoutDialog.value = false;
 }
 </script>
 
 <style lang="scss" src="@/styles/pages/_app.scss"></style>
+
+<style lang="scss" scoped>
+.safe-area-header {
+  padding-top: env(safe-area-inset-top);
+
+  height: auto !important;
+
+  :deep(.v-toolbar__content) {
+    min-height: 64px;
+    align-items: center;
+  }
+}
+</style>