Refactor: Remove Supabase authentication and related code

- Removed Supabase authentication logic from xem/[slug].vue and yeu-thich.vue.
- Updated favorite and watch later messages to be device-specific.
- Removed unused user state and authentication initialization.
- Deleted supabase.ts plugin file and related configurations.
- Updated nuxt.config.ts to remove Supabase runtime configuration.
- Removed Supabase dependencies from package.json and package-lock.json.
- Adjusted Dockerfile for development environment.
- Added admin layout and pages for managing settings, movies, and users.
- Implemented admin dashboard with statistics and recent activities.
- Created movie and user management interfaces with search functionality.

app/pages/admin/cai-dat.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Save, Settings as SettingsIcon } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Cài đặt - CineK Admin',
+})
+
+const siteName = ref('CineK')
+const siteDescription = ref('Xem phim Hàn Quốc online với phụ đề Vietsub')
+const maintenanceMode = ref(false)
+const allowRegistration = ref(true)
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Cài đặt</h1>
+      <p class="mt-1 text-sm text-slate-400">Quản lý cài đặt hệ thống CineK</p>
+    </div>
+
+    <div class="space-y-6">
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-5 flex items-center gap-3">
+          <div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
+            <SettingsIcon class="size-4 text-yellow-400" />
+          </div>
+          <div>
+            <h2 class="text-lg font-black text-white">Cài đặt chung</h2>
+            <p class="text-sm text-slate-400">Thông tin cơ bản về website</p>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-white">Tên website</label>
+            <input v-model="siteName" type="text"
+              class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-yellow-400/50">
+          </div>
+
+          <div>
+            <label class="mb-2 block text-sm font-semibold text-white">Mô tả website</label>
+            <textarea v-model="siteDescription" rows="3"
+              class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white outline-none focus:border-yellow-400/50"></textarea>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <h2 class="mb-5 text-lg font-black text-white">Tùy chọn hệ thống</h2>
+
+        <div class="space-y-4">
+          <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
+            <div>
+              <p class="text-sm font-semibold text-white">Chế độ bảo trì</p>
+              <p class="mt-1 text-xs text-slate-400">Tạm thời tắt website để bảo trì</p>
+            </div>
+            <input v-model="maintenanceMode" type="checkbox"
+              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+          </label>
+
+          <label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
+            <div>
+              <p class="text-sm font-semibold text-white">Cho phép đăng ký</p>
+              <p class="mt-1 text-xs text-slate-400">Cho phép người dùng mới đăng ký tài khoản</p>
+            </div>
+            <input v-model="allowRegistration" type="checkbox"
+              class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
+          </label>
+        </div>
+      </div>
+
+      <div class="flex justify-end">
+        <button type="button"
+          class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
+          <Save class="size-4" />
+          Lưu thay đổi
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/index.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { BarChart3, Film, TrendingUp, Users } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Dashboard - CineK Admin',
+})
+
+const stats = [
+  {
+    label: 'Tổng phim',
+    value: '1,234',
+    change: '+12%',
+    icon: Film,
+    color: 'yellow',
+  },
+  {
+    label: 'Thành viên',
+    value: '5,678',
+    change: '+8%',
+    icon: Users,
+    color: 'blue',
+  },
+  {
+    label: 'Lượt xem hôm nay',
+    value: '45,678',
+    change: '+23%',
+    icon: TrendingUp,
+    color: 'green',
+  },
+  {
+    label: 'Doanh thu tháng',
+    value: '12.5M',
+    change: '+15%',
+    icon: BarChart3,
+    color: 'purple',
+  },
+]
+
+const recentMovies = [
+  { name: 'Phim Hàn Quốc 1', views: 1234, status: 'active' },
+  { name: 'Phim Hàn Quốc 2', views: 890, status: 'active' },
+  { name: 'Phim Hàn Quốc 3', views: 2345, status: 'active' },
+  { name: 'Phim Hàn Quốc 4', views: 567, status: 'draft' },
+  { name: 'Phim Hàn Quốc 5', views: 1890, status: 'active' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Dashboard</h1>
+      <p class="mt-1 text-sm text-slate-400">Tổng quan hệ thống CineK</p>
+    </div>
+
+    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div v-for="stat in stats" :key="stat.label"
+        class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
+        <div class="flex items-start justify-between">
+          <div>
+            <p class="text-sm font-semibold text-slate-400">{{ stat.label }}</p>
+            <p class="mt-2 text-3xl font-black text-white">{{ stat.value }}</p>
+            <p class="mt-2 text-sm font-semibold text-green-400">{{ stat.change }} tháng này</p>
+          </div>
+          <div class="grid size-11 place-items-center rounded-xl"
+            :class="{
+              'bg-yellow-400/10 text-yellow-400': stat.color === 'yellow',
+              'bg-blue-400/10 text-blue-400': stat.color === 'blue',
+              'bg-green-400/10 text-green-400': stat.color === 'green',
+              'bg-purple-400/10 text-purple-400': stat.color === 'purple',
+            }">
+            <component :is="stat.icon" class="size-5" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-2">
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-4 flex items-center justify-between">
+          <h2 class="text-lg font-black text-white">Phim gần đây</h2>
+          <NuxtLink to="/admin/phim" class="text-sm font-semibold text-yellow-400 hover:text-yellow-300">
+            Xem tất cả
+          </NuxtLink>
+        </div>
+
+        <div class="space-y-3">
+          <div v-for="movie in recentMovies" :key="movie.name"
+            class="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 p-3 transition hover:border-white/10">
+            <div class="flex items-center gap-3">
+              <div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
+                <Film class="size-4 text-yellow-400" />
+              </div>
+              <div>
+                <p class="text-sm font-semibold text-white">{{ movie.name }}</p>
+                <p class="text-xs text-slate-400">{{ movie.views.toLocaleString() }} lượt xem</p>
+              </div>
+            </div>
+            <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+              :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+              {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
+        <div class="mb-4 flex items-center justify-between">
+          <h2 class="text-lg font-black text-white">Hoạt động gần đây</h2>
+        </div>
+
+        <div class="space-y-4">
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-green-400/10">
+              <Film class="size-3.5 text-green-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                <span class="font-semibold">Phim mới</span> đã được thêm
+              </p>
+              <p class="mt-1 text-xs text-slate-400">2 phút trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-400/10">
+              <Users class="size-3.5 text-blue-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                <span class="font-semibold">15 thành viên</span> mới đăng ký
+              </p>
+              <p class="mt-1 text-xs text-slate-400">1 giờ trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-yellow-400/10">
+              <TrendingUp class="size-3.5 text-yellow-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                Lượt xem tăng <span class="font-semibold">23%</span> so với hôm qua
+              </p>
+              <p class="mt-1 text-xs text-slate-400">3 giờ trước</p>
+            </div>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="grid size-8 shrink-0 place-items-center rounded-full bg-purple-400/10">
+              <BarChart3 class="size-3.5 text-purple-400" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white">
+                Doanh thu tháng đạt <span class="font-semibold">12.5M</span>
+              </p>
+              <p class="mt-1 text-xs text-slate-400">5 giờ trước</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/phim.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { Edit, Eye, Film, MoreVertical, Plus, Search, Trash2 } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Quản lý phim - CineK Admin',
+})
+
+const searchQuery = ref('')
+
+const movies = [
+  { id: 1, name: 'Phim Hàn Quốc 1', originName: 'Korean Drama 1', views: 1234, status: 'active', updatedAt: '2024-01-15' },
+  { id: 2, name: 'Phim Hàn Quốc 2', originName: 'Korean Drama 2', views: 890, status: 'active', updatedAt: '2024-01-14' },
+  { id: 3, name: 'Phim Hàn Quốc 3', originName: 'Korean Movie 1', views: 2345, status: 'active', updatedAt: '2024-01-13' },
+  { id: 4, name: 'Phim Hàn Quốc 4', originName: 'Korean Drama 3', views: 567, status: 'draft', updatedAt: '2024-01-12' },
+  { id: 5, name: 'Phim Hàn Quốc 5', originName: 'Korean Movie 2', views: 1890, status: 'active', updatedAt: '2024-01-11' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-black text-white">Quản lý phim</h1>
+        <p class="mt-1 text-sm text-slate-400">Quản lý tất cả phim trên CineK</p>
+      </div>
+      <button type="button"
+        class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
+        <Plus class="size-4" />
+        Thêm phim mới
+      </button>
+    </div>
+
+    <div class="rounded-xl border border-white/10 bg-slate-900/50">
+      <div class="flex items-center gap-3 border-b border-white/10 p-4">
+        <div class="relative flex-1">
+          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm phim..."
+            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
+              <th class="px-4 py-3">Phim</th>
+              <th class="px-4 py-3">Lượt xem</th>
+              <th class="px-4 py-3">Trạng thái</th>
+              <th class="px-4 py-3">Cập nhật</th>
+              <th class="px-4 py-3 text-right">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/5">
+            <tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-10 shrink-0 place-items-center rounded-lg bg-yellow-400/10">
+                    <Film class="size-4 text-yellow-400" />
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-semibold text-white">{{ movie.name }}</p>
+                    <p class="truncate text-xs text-slate-400">{{ movie.originName }}</p>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-300">{{ movie.views.toLocaleString() }}</td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+                  {{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-400">{{ movie.updatedAt }}</td>
+              <td class="px-4 py-3">
+                <div class="flex items-center justify-end gap-1">
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Eye class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Edit class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
+                    <Trash2 class="size-4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-white/10 p-4">
+        <p class="text-sm text-slate-400">Hiển thị 1-5 / 1,234 phim</p>
+        <div class="flex items-center gap-2">
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ‹
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
+            1
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            2
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            3
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/thanh-vien.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { Edit, Mail, Search, Trash2, UserRound } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: 'admin',
+})
+
+useHead({
+  title: 'Quản lý thành viên - CineK Admin',
+})
+
+const searchQuery = ref('')
+
+const users = [
+  { id: 1, name: 'Nguyễn Văn A', email: 'nguyenvana@example.com', role: 'admin', joined: '2024-01-01', status: 'active' },
+  { id: 2, name: 'Trần Thị B', email: 'tranthib@example.com', role: 'user', joined: '2024-01-05', status: 'active' },
+  { id: 3, name: 'Lê Văn C', email: 'levanc@example.com', role: 'user', joined: '2024-01-10', status: 'active' },
+  { id: 4, name: 'Phạm Thị D', email: 'phamthid@example.com', role: 'user', joined: '2024-01-12', status: 'inactive' },
+  { id: 5, name: 'Hoàng Văn E', email: 'hoangvane@example.com', role: 'moderator', joined: '2024-01-15', status: 'active' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="mb-6">
+      <h1 class="text-2xl font-black text-white">Quản lý thành viên</h1>
+      <p class="mt-1 text-sm text-slate-400">Quản lý tài khoản thành viên CineK</p>
+    </div>
+
+    <div class="rounded-xl border border-white/10 bg-slate-900/50">
+      <div class="flex items-center gap-3 border-b border-white/10 p-4">
+        <div class="relative flex-1">
+          <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+          <input v-model="searchQuery" type="search" placeholder="Tìm kiếm thành viên..."
+            class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
+        </div>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
+              <th class="px-4 py-3">Thành viên</th>
+              <th class="px-4 py-3">Vai trò</th>
+              <th class="px-4 py-3">Trạng thái</th>
+              <th class="px-4 py-3">Tham gia</th>
+              <th class="px-4 py-3 text-right">Thao tác</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-white/5">
+            <tr v-for="user in users" :key="user.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-10 shrink-0 place-items-center rounded-full bg-yellow-400/10">
+                    <UserRound class="size-4 text-yellow-400" />
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
+                    <p class="flex items-center gap-1.5 truncate text-xs text-slate-400">
+                      <Mail class="size-3" />
+                      {{ user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="{
+                    'bg-red-400/10 text-red-400': user.role === 'admin',
+                    'bg-blue-400/10 text-blue-400': user.role === 'moderator',
+                    'bg-slate-400/10 text-slate-400': user.role === 'user',
+                  }">
+                  {{ user.role === 'admin' ? 'Admin' : user.role === 'moderator' ? 'Moderator' : 'User' }}
+                </span>
+              </td>
+              <td class="px-4 py-3">
+                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                  :class="user.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
+                  {{ user.status === 'active' ? 'Hoạt động' : 'Khóa' }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-slate-400">{{ user.joined }}</td>
+              <td class="px-4 py-3">
+                <div class="flex items-center justify-end gap-1">
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
+                    <Edit class="size-4" />
+                  </button>
+                  <button type="button"
+                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
+                    <Trash2 class="size-4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="flex items-center justify-between border-t border-white/10 p-4">
+        <p class="text-sm text-slate-400">Hiển thị 1-5 / 5,678 thành viên</p>
+        <div class="flex items-center gap-2">
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ‹
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
+            1
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            2
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
+            3
+          </button>
+          <button type="button"
+            class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
+            ›
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/index.vue

@@ -33,7 +33,6 @@ const hero = computed(() => heroSlides.value[heroIndex.value] ?? movies.value[0]
 const heroDetail = ref<any>(null)
 const sourceStatus = computed(() => data.value?.sources ?? [])
 const watchHistory = ref<WatchHistoryItem[]>([])
-const { user, initAuth } = useSupabaseAuth()
 const {
   loadWatchHistory: fetchWatchHistory,
   clearWatchHistory: removeWatchHistory,
@@ -252,12 +251,7 @@ watch(hero, async (currentHero) => {
   }
 }, { immediate: true })
 
-watch(user, () => {
-  loadWatchHistory()
-})
-
 onMounted(() => {
-  initAuth()
   heroTimer = setInterval(nextHero, 6500)
   loadWatchHistory()
   window.addEventListener('storage', loadWatchHistory)

app/pages/lich-su.vue

@@ -2,7 +2,6 @@
 import { Clock3, Trash2 } from 'lucide-vue-next'
 import type { WatchHistoryItem } from '~/composables/useWatchHistory'
 
-const { initAuth } = useSupabaseAuth()
 const { loadWatchHistory, clearWatchHistory } = useWatchHistory()
 const historyItems = ref<WatchHistoryItem[]>([])
 const loading = ref(true)
@@ -60,7 +59,6 @@ async function removeHistory() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshHistory()
 })
 

app/pages/phim/[slug].vue

@@ -10,7 +10,6 @@ const activeTab = ref<'episodes' | 'actors'>('episodes')
 const isFavoriteMovie = ref(false)
 const actionMessage = ref('')
 const actionBusy = ref(false)
-const { user, initAuth } = useSupabaseAuth()
 const {
   isFavorite,
   saveFavorite,
@@ -126,7 +125,7 @@ async function toggleFavorite() {
   } else {
     await saveFavorite(libraryItem.value)
     isFavoriteMovie.value = true
-    flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
+    flashActionMessage('Đã lưu vào yêu thích.')
   }
   actionBusy.value = false
 }
@@ -137,7 +136,7 @@ async function addToWatchLater() {
   actionBusy.value = true
   await saveWatchLater(libraryItem.value)
   actionBusy.value = false
-  flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
+  flashActionMessage('Đã thêm vào danh sách xem sau.')
 }
 
 async function shareMovie() {
@@ -164,7 +163,6 @@ async function shareMovie() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavoriteState()
 })
 
@@ -176,7 +174,7 @@ watch(requestedSources, () => {
   selectedServer.value = 0
 })
 
-watch([libraryItem, user], () => {
+watch(libraryItem, () => {
   refreshFavoriteState()
 })
 

app/pages/thanh-vien.vue

@@ -1,31 +1,12 @@
 <script setup lang="ts">
-import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
-
-const { user, loading, initAuth } = useSupabaseAuth()
-
-const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
-const memberName = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  const name = metadata.name || metadata.full_name || metadata.user_name
-  if (typeof name === 'string' && name.trim()) return name.trim()
-  return user.value?.email?.split('@')[0] || 'Thành viên'
-})
-
-const memberAvatar = computed(() => {
-  const metadata = user.value?.user_metadata || {}
-  return typeof metadata.avatar_url === 'string' && metadata.avatar_url ? metadata.avatar_url : defaultAvatar
-})
-
-onMounted(() => {
-  initAuth()
-})
+import { Clock3, Heart } from 'lucide-vue-next'
 
 useHead({
-  title: 'Trang cá nhân - CineK',
+  title: 'Thư viện - CineK',
   meta: [
     {
       name: 'description',
-      content: 'Quản lý tài khoản CineK, đồng bộ lịch sử xem, danh sách yêu thích và các phim muốn xem sau.',
+      content: 'Quản lý lịch sử xem, danh sách yêu thích và các phim muốn xem sau trên CineK.',
     },
   ],
 })
@@ -37,62 +18,31 @@ useHead({
 
     <section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
       <div class="mb-6">
-        <p class="text-sm font-black uppercase text-yellow-300">Thành viên</p>
-        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
+        <p class="text-sm font-black uppercase text-yellow-300">Thư viện</p>
+        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Của bạn</h1>
       </div>
 
-      <div v-if="loading" class="rounded-lg border border-white/10 bg-white/6 p-5">
-        <div class="h-24 animate-pulse rounded-md bg-white/10" />
-      </div>
-
-      <div v-else-if="user" class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
-        <section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
-          <div class="flex flex-col gap-5 sm:flex-row sm:items-center">
-            <img :src="memberAvatar" :alt="memberName"
-              class="size-24 shrink-0 rounded-full object-cover ring-4 ring-yellow-300/30">
-            <div class="min-w-0">
-              <h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
-              <p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
-                <Mail class="size-4 text-yellow-300" />
-                {{ user.email }}
-              </p>
-              <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
-                Tài khoản này dùng để đồng bộ lịch sử xem và các dữ liệu cá nhân của bạn trên CineK.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        <aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
-          <NuxtLink to="/lich-su"
-            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
-            <span class="grid size-10 place-items-center rounded-md bg-yellow-300 text-slate-950">
-              <Clock3 class="size-5" />
-            </span>
-            <span>
-              <span class="block font-black">Lịch sử xem</span>
-              <span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
-            </span>
-          </NuxtLink>
-          <NuxtLink to="/yeu-thich"
-            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
-            <span class="grid size-10 place-items-center rounded-md bg-white/10 text-yellow-300">
-              <Heart class="size-5 fill-current" />
-            </span>
-            <span>
-              <span class="block font-black">Yêu thích</span>
-              <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
-            </span>
-          </NuxtLink>
-        </aside>
-      </div>
-
-      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
-        <UserRound class="size-10 text-yellow-300" />
-        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
-        <p class="mt-2 text-sm leading-6 text-slate-300">
-          Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
-        </p>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+        <NuxtLink to="/lich-su"
+          class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+          <span class="grid size-10 place-items-center rounded-md bg-yellow-300 text-slate-950">
+            <Clock3 class="size-5" />
+          </span>
+          <span>
+            <span class="block font-black">Lịch sử xem</span>
+            <span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
+          </span>
+        </NuxtLink>
+        <NuxtLink to="/yeu-thich"
+          class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+          <span class="grid size-10 place-items-center rounded-md bg-white/10 text-yellow-300">
+            <Heart class="size-5 fill-current" />
+          </span>
+          <span>
+            <span class="block font-black">Yêu thích</span>
+            <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
+          </span>
+        </NuxtLink>
       </div>
     </section>
   </main>

app/pages/xem/[slug].vue

@@ -70,7 +70,6 @@ const {
   loadWatchHistory: fetchWatchHistory,
   saveWatchHistory: persistWatchHistory,
 } = useWatchHistory()
-const { user, initAuth } = useSupabaseAuth()
 const {
   isFavorite,
   saveFavorite,
@@ -886,7 +885,7 @@ async function toggleFavorite() {
   } else {
     await saveFavorite(libraryItem.value)
     isFavoriteMovie.value = true
-    flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
+    flashActionMessage('Đã lưu vào yêu thích.')
   }
   actionBusy.value = false
 }
@@ -897,7 +896,7 @@ async function addToWatchLater() {
   actionBusy.value = true
   await saveWatchLater(libraryItem.value)
   actionBusy.value = false
-  flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
+  flashActionMessage('Đã thêm vào danh sách xem sau.')
 }
 
 async function shareMovie() {
@@ -921,7 +920,6 @@ async function shareMovie() {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavoriteState()
   document.addEventListener('visibilitychange', handleVisibilityChange)
   document.addEventListener('keydown', handleKeyboardShortcut)
@@ -972,7 +970,7 @@ watch([canUseEmbed, canUseHls], () => {
   immediate: true,
 })
 
-watch([libraryItem, user], () => {
+watch(libraryItem, () => {
   refreshFavoriteState()
 })
 

app/pages/yeu-thich.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { Heart, UserRound } from 'lucide-vue-next'
+import { Heart } from 'lucide-vue-next'
 import type { LibraryMovieItem } from '~/composables/useMovieLibrary'
 
-const { user, loading: authLoading, initAuth } = useSupabaseAuth()
 const { loadFavorites } = useMovieLibrary()
 const favoriteItems = ref<LibraryMovieItem[]>([])
 const loading = ref(true)
@@ -23,14 +22,9 @@ function movieLink(item: LibraryMovieItem) {
 }
 
 onMounted(async () => {
-  await initAuth()
   await refreshFavorites()
 })
 
-watch(user, () => {
-  refreshFavorites()
-})
-
 useHead({
   title: 'Yêu thích - CineK',
   meta: [
@@ -52,7 +46,7 @@ useHead({
         <h1 class="mt-2 text-3xl font-black sm:text-4xl">Yêu thích</h1>
       </div>
 
-      <div v-if="loading || authLoading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      <div v-if="loading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
         <div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
       </div>
 
@@ -75,7 +69,7 @@ useHead({
         </NuxtLink>
       </div>
 
-      <div v-else-if="user"
+      <div v-else
         class="flex min-h-80 flex-col items-center justify-center rounded-lg border border-white/10 bg-white/6 p-6 text-center">
         <Heart class="size-12 text-yellow-300" />
         <h2 class="mt-4 text-xl font-black">Chưa có phim yêu thích</h2>
@@ -87,14 +81,6 @@ useHead({
           Duyệt phim
         </NuxtLink>
       </div>
-
-      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
-        <UserRound class="size-10 text-yellow-300" />
-        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
-        <p class="mt-2 text-sm leading-6 text-slate-300">
-          Đăng nhập để đồng bộ danh sách yêu thích, hoặc vẫn có thể lưu tạm trên thiết bị này.
-        </p>
-      </div>
     </section>
   </main>
 </template>