v1 release

.github/workflows/buildCheck.yml

@@ -17,18 +17,23 @@ jobs:
     steps:
     - uses: actions/checkout@v6
 
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v6
+      with:
+        version: 10
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v6
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+        cache: 'pnpm'
 
-    - name: Install Dependencies from Package-Lock
-      run: npm ci
+    - name: Install Dependencies
+      run: pnpm install --frozen-lockfile
 
     - name: Generate Prisma Client
-      run: npx prisma generate
+      run: pnpm prisma generate
 
     - name: Build Project
-      run: npm run build
+      run: pnpm build
 

.gitignore

@@ -31,3 +31,10 @@ prisma/generated
 
 prisma/dev.db
 prisma/dev.db-journal
+
+# Dev seed file
+prisma/seed.ts
+
+# non-pnpm lock files
+yarn.lock
+package-lock.json

app/components/ClassContextSelect.css

@@ -0,0 +1,43 @@
+.class-context-select {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+label {
+  color: #64748b;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+select {
+  min-width: 15rem;
+  padding: 0.7rem 0.9rem;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.65rem;
+  color: #1e293b;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+select:focus {
+  border-color: #4f46e5;
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(79 70 229 / 12%);
+}
+
+@media (max-width: 800px) {
+  .class-context-select {
+    width: 100%;
+  }
+
+  select {
+    min-width: 0;
+    flex: 1;
+  }
+}

app/components/ClassContextSelect.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { authClient } from '../utils/auth-client'
+
+type ClassOption = {
+  joinToken: string
+  name: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const selectedClassToken = useCookie<string | null>('selected-class-token', {
+  sameSite: 'lax',
+})
+const { data: session } = await authClient.useSession(useFetch)
+
+const { data: classes, status: classesStatus } = await useFetch<ClassOption[]>(
+  '/api/admin/classes',
+  {
+    key: `admin-classes-${session.value?.user?.id ?? 'anonymous'}`,
+    default: () => [],
+  }
+)
+
+function getRouteClassToken() {
+  const classQuery = route.query.class
+  return Array.isArray(classQuery) ? classQuery[0] : classQuery
+}
+
+function getCurrentContext() {
+  if (route.path === '/coach/create-class') {
+    return 'create-class'
+  }
+
+  if (route.path.startsWith('/coach')) {
+    const classToken = getRouteClassToken() || selectedClassToken.value
+    return classToken ? `class:${classToken}` : 'admin'
+  }
+
+  return 'admin'
+}
+
+const selectedContext = ref(getCurrentContext())
+const isRedirecting = ref(false)
+const canAccessUniversalAdmin = computed(() => session.value?.user?.role === 'admin')
+const canManageClasses = computed(
+  () => session.value?.user?.role === 'admin' || session.value?.user?.role === 'coach'
+)
+
+watch(
+  () => [route.path, route.query.class, selectedClassToken.value],
+  () => {
+    selectedContext.value = getCurrentContext()
+  }
+)
+
+watch(
+  [
+    classesStatus,
+    () => classes.value.length,
+    () => route.path,
+    () => route.query.class,
+    () => selectedClassToken.value,
+    canAccessUniversalAdmin,
+    canManageClasses,
+  ],
+  async () => {
+    if (!canManageClasses.value || isRedirecting.value) {
+      return
+    }
+
+    isRedirecting.value = true
+
+    try {
+      if (classesStatus.value !== 'success') {
+        return
+      }
+
+      if (
+        !canAccessUniversalAdmin.value &&
+        classes.value.length === 0 &&
+        route.path !== '/coach/create-class'
+      ) {
+        selectedClassToken.value = null
+        await router.replace('/coach/create-class')
+        return
+      }
+
+      if (route.path.startsWith('/coach') && route.path !== '/coach/create-class') {
+        const classToken = getRouteClassToken() || selectedClassToken.value
+        const classExists = classes.value.some((classroom) => classroom.joinToken === classToken)
+
+        if (!classToken || !classExists) {
+          selectedClassToken.value = null
+
+          if (canAccessUniversalAdmin.value) {
+            await router.replace('/admin')
+            return
+          }
+
+          const firstClass = classes.value[0]
+
+          if (firstClass) {
+            selectedClassToken.value = firstClass.joinToken
+            await router.replace({
+              path: '/coach',
+              query: { class: firstClass.joinToken },
+            })
+          }
+        }
+      }
+    } finally {
+      isRedirecting.value = false
+    }
+  },
+  { immediate: true }
+)
+
+async function changeContext() {
+  if (selectedContext.value === 'admin') {
+    if (!canAccessUniversalAdmin.value) {
+      selectedContext.value = getCurrentContext()
+      return
+    }
+
+    selectedClassToken.value = null
+    await router.push('/admin')
+    return
+  }
+
+  if (selectedContext.value === 'create-class') {
+    await router.push('/coach/create-class')
+    return
+  }
+
+  const classToken = selectedContext.value.replace(/^class:/, '')
+  selectedClassToken.value = classToken
+  await router.push({
+    path: '/coach',
+    query: { class: classToken },
+  })
+}
+</script>
+
+<template>
+  <div class="class-context-select">
+    <label for="class-context">Managing</label>
+
+    <select id="class-context" v-model="selectedContext" @change="changeContext">
+      <option v-if="canAccessUniversalAdmin" value="admin">Admin</option>
+
+      <option v-if="classesStatus === 'pending'" disabled>Loading classes…</option>
+
+      <option v-for="classroom in classes" :key="classroom.joinToken" :value="`class:${classroom.joinToken}`">
+        {{ classroom.name }}
+      </option>
+
+      <option value="create-class">+ Create New Class</option>
+    </select>
+  </div>
+</template>
+
+<style scoped src="./ClassContextSelect.css"></style>

app/components/LogoutButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { authClient } from '~/utils/auth-client'
+
+const isLoggingOut = ref(false)
+
+async function logout() {
+  const confirmed = confirm('Are you sure you want to log out?')
+  if (!confirmed || isLoggingOut.value) return
+
+  isLoggingOut.value = true
+
+  try {
+    await authClient.signOut()
+    window.location.href = '/'
+  } catch (error) {
+    isLoggingOut.value = false
+    console.error('Logout failed:', error)
+  }
+}
+</script>
+
+<template>
+  <button type="button" :disabled="isLoggingOut" @click="logout">
+    <slot>⎋ Logout</slot>
+  </button>
+</template>