feat: new course form slow

frontend/src/components/Controls/MultiSelect.vue

@@ -19,12 +19,14 @@
 									showOptions = true
 								}
 							"
-							@click="(e) => {
-								showOptions = true
-								nextTick(() => {
-									setFocus()
-								})
-							}"
+							@click="
+								(e) => {
+									showOptions = true
+									nextTick(() => {
+										setFocus()
+									})
+								}
+							"
 							@focus="
 								() => {
 									if (!filterOptions.data || filterOptions.data.length === 0) {
@@ -60,7 +62,11 @@
 										>
 											<div class="flex flex-col gap-1 p-1">
 												<div class="text-base font-medium text-ink-gray-8">
-													{{ option.description }}
+													{{
+														option.value == option.label
+															? option.description
+															: option.label
+													}}
 												</div>
 												<div class="text-sm text-ink-gray-5">
 													{{ option.value }}
@@ -159,6 +165,7 @@ const error = ref(null)
 const query = ref('')
 const text = ref('')
 const showOptions = ref(false)
+const emit = defineEmits(['update:modelValue'])
 
 const selectedValue = computed({
 	get: () => query.value || '',
@@ -166,6 +173,7 @@ const selectedValue = computed({
 		query.value = ''
 		val?.value && addValue(val.value)
 		showOptions.value = false
+		emit('update:modelValue', values.value)
 	},
 })
 
@@ -237,6 +245,7 @@ const addValue = (value) => {
 
 const removeValue = (value) => {
 	values.value = values.value.filter((v) => v !== value)
+	emit('update:modelValue', values.value)
 }
 
 function setFocus() {

frontend/src/components/CourseCardOverlay.vue

@@ -37,7 +37,7 @@
 					<CertificationLinks :courseName="course.data.name" class="w-full" />
 				</div>
 				<router-link
-					v-else-if="course.data.paid_course"
+					v-else-if="course.data.paid_course && !isAdmin"
 					:to="{
 						name: 'Billing',
 						params: {

frontend/src/components/CourseOutline.vue

@@ -15,7 +15,10 @@
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
-				{{ __('Add Chapter') }}
+				<template #prefix>
+					<Plus class="size-4 stroke-1.5" />
+				</template>
+				{{ __('Add') }}
 			</Button>
 		</div>
 		<div
@@ -174,6 +177,7 @@ import {
 	FilePenLine,
 	HelpCircle,
 	MonitorPlay,
+	Plus,
 	Trash2,
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'

frontend/src/components/Modals/BatchCourseModal.vue

@@ -23,10 +23,8 @@
 					(value, close) => {
 						close()
 						router.push({
-							name: 'CourseForm',
-							params: {
-								courseName: 'new',
-							},
+							name: 'Courses',
+							query: { newCourse: '1' },
 						})
 					}
 				"

frontend/src/components/NumberChartGraph.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="border rounded-md p-3 space-y-2">
+	<div class="border rounded-lg p-3 space-y-2">
 		<div class="text-ink-gray-5">
 			{{ __(title) }}
 		</div>

frontend/src/components/Settings/Settings.vue

@@ -8,22 +8,24 @@
 					<h1 class="mb-3 px-2 pt-2 text-lg font-semibold text-ink-gray-9">
 						{{ __('Settings') }}
 					</h1>
-					<div v-for="tab in tabs" :key="tab.label">
-						<div
-							v-if="!tab.hideLabel"
-							class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
-						>
-							<span>{{ __(tab.label) }}</span>
-						</div>
-						<nav class="space-y-1">
-							<div v-for="item in tab.items" @click="activeTab = item">
-								<SidebarLink
-									:link="item"
-									:key="item.label"
-									:activeTab="activeTab?.label"
-								/>
+					<div class="space-y-6">
+						<div v-for="tab in tabs" :key="tab.label">
+							<div
+								v-if="!tab.hideLabel"
+								class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
+							>
+								<span>{{ __(tab.label) }}</span>
 							</div>
-						</nav>
+							<nav class="space-y-1">
+								<div v-for="item in tab.items" @click="activeTab = item">
+									<SidebarLink
+										:link="item"
+										:key="item.label"
+										:activeTab="activeTab?.label"
+									/>
+								</div>
+							</nav>
+						</div>
 					</div>
 				</div>
 				<div

frontend/src/components/Sidebar/AppSidebar.vue

@@ -405,9 +405,13 @@ const steps = reactive([
 			minimize.value = true
 			let course = await getFirstCourse()
 			if (course) {
-				router.push({ name: 'CourseForm', params: { courseName: course } })
+				router.push({
+					name: 'CourseDetail',
+					params: { courseName: course },
+					hash: '#settings',
+				})
 			} else {
-				router.push({ name: 'CourseForm' })
+				router.push({ name: 'Courses', query: { newCourse: '1' } })
 			}
 		},
 	},
@@ -422,11 +426,12 @@ const steps = reactive([
 			let course = await getFirstCourse()
 			if (course) {
 				router.push({
-					name: 'CourseForm',
+					name: 'CourseDetail',
 					params: { courseName: course },
+					hash: '#settings',
 				})
 			} else {
-				router.push({ name: 'Courses' })
+				router.push({ name: 'Courses', query: { newCourse: '1' } })
 			}
 		},
 	},