From 1a8c66ca359072e3d670cb036a0fe17229c5bf50 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Mon, 9 Feb 2026 16:06:50 +0300
Subject: [PATCH] feat: Implement project management with new views, services,
 store, and sidebar project selection.

---
 src/App.vue                     |   9 +
 src/components/AppSidebar.vue   | 104 ++++++++++-
 src/router/index.js             |  10 ++
 src/services/api.js             |  11 +-
 src/services/dataService.js     |  10 ++
 src/services/projectsService.js |  31 ++++
 src/stores/projectsStore.js     |  98 ++++++++++
 src/views/AssetsView.vue        | 304 +++++++++++++++++++++++---------
 src/views/CharactersView.vue    | 146 ++++++++++++++-
 src/views/ProjectDetailView.vue | 166 +++++++++++++++++
 src/views/ProjectsView.vue      | 123 +++++++++++++
 11 files changed, 915 insertions(+), 97 deletions(-)
 create mode 100644 src/services/projectsService.js
 create mode 100644 src/stores/projectsStore.js
 create mode 100644 src/views/ProjectDetailView.vue
 create mode 100644 src/views/ProjectsView.vue

diff --git a/src/App.vue b/src/App.vue
index 2a7e5e7..a39e4ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,17 @@
 <script setup>
+import { onMounted } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
 import AppSidebar from './components/AppSidebar.vue'
 
 const route = useRoute()
+const authStore = useAuthStore()
+
+onMounted(async () => {
+  if (authStore.isAuthenticated) {
+    await authStore.fetchCurrentUser()
+  }
+})
 </script>
 
 <template>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 801e4d4..89aa898 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,12 +1,60 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import Button from 'primevue/button'
+import { useProjectsStore } from '@/stores/projectsStore'
+import { storeToRefs } from 'pinia'
+
 
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
+const projectsStore = useProjectsStore()
+const { projects, currentProject } = storeToRefs(projectsStore)
+
+const selectedProject = ref(null)
+
+onMounted(async () => {
+    // Ensure we have projects
+    if (projects.value.length === 0) {
+        await projectsStore.fetchProjects()
+    }
+    // Sync local ref with store
+    if (currentProject.value) {
+        selectedProject.value = currentProject.value.id
+    }
+})
+
+// Watch for external changes (like selecting from the list view)
+watch(currentProject, (newVal) => {
+    selectedProject.value = newVal ? newVal.id : null
+})
+
+const projectOptions = computed(() => {
+    return projects.value.map(p => ({ name: p.name, id: p.id }))
+})
+
+const getProjectName = (id) => {
+    const p = projects.value.find(p => p.id === id)
+    return p ? p.name : 'Unknown Project'
+}
+
+const isProjectMenuOpen = ref(false)
+
+const selectProject = (projectId) => {
+    selectedProject.value = projectId
+    isProjectMenuOpen.value = false
+
+    if (projectId) {
+        projectsStore.selectProject(projectId)
+    } else {
+        // Clear selection
+        projectsStore.currentProject = null
+        localStorage.removeItem('active_project_id')
+    }
+    // Reload page to ensure all data is refreshed with new context
+    window.location.reload()
+}
 
 const handleLogout = () => {
     authStore.logout()
@@ -23,9 +71,9 @@ const isActive = (path) => {
 const navItems = computed(() => {
     const items = [
         { path: '/', icon: '🏠', tooltip: 'Home' },
+        { path: '/projects', icon: '📂', tooltip: 'Projects' },
         { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
-        { path: '/albums', icon: '🖼️', tooltip: 'Albums' },
-        { path: '/assets', icon: '📂', tooltip: 'Assets' },
+        { path: '/albums', icon: '🖼️', tooltip: 'Library' },
         { path: '/characters', icon: '👥', tooltip: 'Characters' },
         { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
     ]
@@ -50,6 +98,54 @@ const navItems = computed(() => {
                 AI
             </div>
 
+            <!-- Project Switcher -->
+            <div class="hidden lg:block ml-4 relative">
+                <button @click="isProjectMenuOpen = !isProjectMenuOpen"
+                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/5 transition-colors text-slate-400 hover:text-slate-200">
+                    <i v-if="selectedProject" class="pi pi-folder text-violet-400"></i>
+                    <i v-else class="pi pi-user"></i>
+
+                    <span class="max-w-[150px] truncate font-medium">
+                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
+                    </span>
+
+                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
+                </button>
+
+                <!-- Custom Dropdown Menu -->
+                <div v-if="isProjectMenuOpen"
+                    class="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-white/10 shadow-xl rounded-xl overflow-hidden z-50 py-1">
+
+                    <!-- Personal Workspace Option -->
+                    <div @click="selectProject(null)"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
+                        <i class="pi pi-user"></i>
+                        <span class="font-medium">Personal Workspace</span>
+                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
+                    </div>
+
+                    <div class="h-px bg-white/5 my-1"></div>
+
+                    <!-- Project Options -->
+                    <div v-for="project in projects" :key="project.id" @click="selectProject(project.id)"
+                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
+                        :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
+                        <i class="pi pi-folder"></i>
+                        <span class="truncate">{{ project.name }}</span>
+                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-sm"></i>
+                    </div>
+
+                    <div v-if="projects.length === 0" class="px-4 py-3 text-slate-500 text-sm font-italic">
+                        No projects found
+                    </div>
+                </div>
+
+                <!-- Backdrop to close on click outside -->
+                <div v-if="isProjectMenuOpen" @click="isProjectMenuOpen = false"
+                    class="fixed inset-0 z-40 bg-transparent"></div>
+            </div>
+
             <!-- Nav Items -->
             <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
                 <div v-for="item in navItems" :key="item.path" :class="[
diff --git a/src/router/index.js b/src/router/index.js
index d6caf71..5f21804 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -62,6 +62,16 @@ const router = createRouter({
       name: 'albums',
       component: () => import('../views/AlbumsView.vue')
     },
+    {
+      path: '/projects',
+      name: 'projects',
+      component: () => import('../views/ProjectsView.vue')
+    },
+    {
+      path: '/projects/:id',
+      name: 'project-detail',
+      component: () => import('../views/ProjectDetailView.vue')
+    },
     {
       path: '/albums/:id',
       name: 'album-detail',
diff --git a/src/services/api.js b/src/services/api.js
index 9191e87..dd158c6 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -13,8 +13,15 @@ const api = axios.create({
 api.interceptors.request.use(
   config => {
     const user = JSON.parse(localStorage.getItem('user'));
-    if (user && user.token) {
-      config.headers['Authorization'] = `${user.tokenType} ${user.token}`;
+    if (user && user.access_token) {
+       config.headers.Authorization = `Bearer ${user.access_token}`;
+    } else if (user && user.token) {
+       config.headers.Authorization = `${user.tokenType} ${user.token}`;
+    }
+    
+    const projectId = localStorage.getItem('active_project_id');
+    if (projectId) {
+      config.headers['X-Project-ID'] = projectId;
     }
     return config;
   },
diff --git a/src/services/dataService.js b/src/services/dataService.js
index db698fe..08a1f19 100644
--- a/src/services/dataService.js
+++ b/src/services/dataService.js
@@ -25,6 +25,16 @@ export const dataService = {
         return response.data
     },
 
+    createCharacter: async (characterData) => {
+        const response = await api.post('/characters/', characterData)
+        return response.data
+    },
+
+    deleteCharacter: async (id) => {
+        const response = await api.delete(`/characters/${id}`)
+        return response.data
+    },
+
     getAssetsByCharacterId: async (charId, limit, offset) => {
         const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
         return response.data
diff --git a/src/services/projectsService.js b/src/services/projectsService.js
new file mode 100644
index 0000000..98986ef
--- /dev/null
+++ b/src/services/projectsService.js
@@ -0,0 +1,31 @@
+import api from './api';
+
+export default {
+    async getProjects() {
+        return api.get('/projects');
+    },
+
+    async createProject(projectData) {
+        return api.post('/projects', projectData);
+    },
+
+    async getProject(id) {
+        // Using getProjects for now as per previous plan, or could try specific endpoint if it exists
+        // Validating with backend: project_router has GET /api/projects (list)
+        // It does NOT have GET /api/projects/{id}.
+        // So we must fetch all and find, or assume the store has them.
+        return api.get('/projects');
+    },
+    
+    async joinProject(projectId) {
+        return api.post(`/projects/${projectId}/join`);
+    },
+    
+    async addMember(projectId, username) {
+        return api.post(`/projects/${projectId}/members`, { username });
+    },
+    
+    async deleteProject(projectId) {
+        return api.delete(`/projects/${projectId}`);
+    }
+};
diff --git a/src/stores/projectsStore.js b/src/stores/projectsStore.js
new file mode 100644
index 0000000..72df40e
--- /dev/null
+++ b/src/stores/projectsStore.js
@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia';
+import projectsService from '@/services/projectsService';
+
+export const useProjectsStore = defineStore('projects', {
+    state: () => ({
+        projects: [],
+        currentProject: null,
+        loading: false,
+        error: null
+    }),
+
+    actions: {
+        async fetchProjects() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const response = await projectsService.getProjects();
+                this.projects = response.data;
+                
+                // Restore selection from localStorage if valid
+                this.restoreSelection();
+            } catch (err) {
+                console.error("Failed to fetch projects", err);
+                this.error = "Failed to load projects";
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        restoreSelection() {
+            const savedId = localStorage.getItem('active_project_id');
+            if (savedId && this.projects.length > 0) {
+                const found = this.projects.find(p => p.id === savedId);
+                if (found) {
+                    this.currentProject = found;
+                } else {
+                    // ID exists but project not in list (maybe deleted or lost access)
+                    // Optional: clear it or keep it? Clearing seems safer.
+                    localStorage.removeItem('active_project_id');
+                    this.currentProject = null;
+                }
+            }
+        },
+
+        async createProject(name, description) {
+            this.loading = true;
+            try {
+                const response = await projectsService.createProject({ name, description });
+                const newProject = response.data;
+                this.projects.push(newProject);
+                // Automatically select the new project
+                this.selectProject(newProject.id);
+                return newProject;
+            } catch (err) {
+                console.error("Failed to create project", err);
+                throw err;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        selectProject(projectId) {
+            const project = this.projects.find(p => p.id === projectId);
+            if (project) {
+                this.currentProject = project;
+                localStorage.setItem('active_project_id', projectId);
+            }
+        },
+        
+        async addMember(projectId, username) {
+            try {
+                 await projectsService.addMember(projectId, username);
+                 await this.fetchProjects(); // Refresh list to see updates if necessary
+            } catch(err) {
+                console.error("Failed to add member", err);
+                throw err;
+            }
+        },
+
+        getProjectById(id) {
+            return this.projects.find(p => p.id === id);
+        },
+
+        async deleteProject(projectId) {
+            try {
+                await projectsService.deleteProject(projectId);
+                this.projects = this.projects.filter(p => p.id !== projectId);
+                if (this.currentProject && this.currentProject.id === projectId) {
+                    this.currentProject = null;
+                    localStorage.removeItem('active_project_id');
+                }
+            } catch (err) {
+                console.error("Failed to delete project", err);
+                throw err;
+            }
+        }
+    }
+});
diff --git a/src/views/AssetsView.vue b/src/views/AssetsView.vue
index 83a518b..282c774 100644
--- a/src/views/AssetsView.vue
+++ b/src/views/AssetsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import type { Asset } from '@/models/asset'
@@ -11,6 +11,11 @@ import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from "primevue/useconfirm"
 import Toast from 'primevue/toast'
 import { useToast } from "primevue/usetoast"
+import { useAlbumStore } from '../stores/albums'
+import { storeToRefs } from 'pinia'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import Image from 'primevue/image'
 
 const router = useRouter()
 const confirm = useConfirm()
@@ -21,6 +26,14 @@ const activeFilter = ref('all')
 // @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL
 
+// Albums Logic
+const albumStore = useAlbumStore()
+const { albums, loading: albumsLoading } = storeToRefs(albumStore)
+const viewMode = ref('assets') // 'assets' | 'albums'
+const showCreateDialog = ref(false)
+const newAlbum = ref({ name: '', description: '' })
+const submittingAlbum = ref(false)
+
 const selectedAsset = ref<Asset | null>(null)
 const isModalVisible = ref(false)
 
@@ -79,10 +92,37 @@ const loadAssets = async () => {
     }
 }
 
+// Watch view mode to load albums
+watch(viewMode, async (newMode) => {
+    if (newMode === 'albums' && albums.value.length === 0) {
+        await albumStore.fetchAlbums()
+    }
+})
+
 onMounted(() => {
     loadAssets()
+    // Preload albums if needed or wait for switch
 })
 
+const createAlbum = async () => {
+    if (!newAlbum.value.name) return
+    submittingAlbum.value = true
+    try {
+        await albumStore.createAlbum(newAlbum.value)
+        showCreateDialog.value = false
+        newAlbum.value = { name: '', description: '' }
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Album created', life: 3000 })
+    } catch (e) {
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create album', life: 3000 })
+    } finally {
+        submittingAlbum.value = false
+    }
+}
+
+const goToAlbumDetail = (id: string) => {
+    router.push({ name: 'album-detail', params: { id } })
+}
+
 // Server-side filtering is now used, so we don't need a local filteredAssets computed property
 // unless we want to do secondary filtering, but usually it's better to let the server handle it.
 
@@ -91,8 +131,6 @@ const paginatedAssets = computed(() => {
     return assets.value
 })
 
-
-
 const confirmDelete = (asset: Asset) => {
     confirm.require({
         message: 'Do you want to delete this asset?',
@@ -147,109 +185,185 @@ const formatDate = (dateString: string) => {
                 <div>
                     <h1
                         class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
-                        Assets Library</h1>
-                    <p class="text-xs text-slate-500 mt-1">Manage all your assets</p>
+                        Library</h1>
+                    <p class="text-xs text-slate-500 mt-1">Manage your generations and albums</p>
                 </div>
 
-                <div class="flex items-center gap-2">
-                    <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept="image/*" />
-                    <Button label="Upload" icon="pi pi-upload" @click="triggerFileUpload"
-                        class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
-
+                <div class="flex items-center gap-4">
+                    <!-- View Switcher -->
                     <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
-                        <Button v-for="filter in ['all', 'generated', 'uploaded']" :key="filter"
-                            :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
-                            :class="activeFilter === filter ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                        <Button label="Assets" icon="pi pi-images"
+                            :class="viewMode === 'assets' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
                             class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
-                            @click="handleFilterChange(filter)" />
+                            @click="viewMode = 'assets'" />
+                        <Button label="Albums" icon="pi pi-book"
+                            :class="viewMode === 'albums' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
+                            @click="viewMode = 'albums'" />
+                    </div>
+
+                    <!-- Assets Toolbar -->
+                    <div v-if="viewMode === 'assets'" class="flex items-center gap-2">
+                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept="image/*" />
+                        <Button label="Upload" icon="pi pi-upload" @click="triggerFileUpload"
+                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
+
+                        <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
+                            <Button v-for="filter in ['all', 'generated', 'uploaded']" :key="filter"
+                                :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
+                                :class="activeFilter === filter ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
+                                class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
+                                @click="handleFilterChange(filter)" />
+                        </div>
+                    </div>
+                    <!-- Albums Toolbar -->
+                    <div v-if="viewMode === 'albums'" class="flex items-center gap-2">
+                        <Button label="Create Album" icon="pi pi-plus" @click="showCreateDialog = true"
+                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
                     </div>
                 </div>
             </header>
 
-            <!-- Loading State -->
-            <div v-if="loading"
-                class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1 pb-4 overflow-y-auto custom-scrollbar">
-                <Skeleton v-for="i in 12" :key="i" class="aspect-[9/16] !bg-slate-800 rounded-none sm:rounded-md" />
-            </div>
+            <!-- ASSETS VIEW -->
+            <div v-if="viewMode === 'assets'" class="contents">
+                <!-- Loading State -->
+                <div v-if="loading"
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1 pb-4 overflow-y-auto custom-scrollbar">
+                    <Skeleton v-for="i in 12" :key="i" class="aspect-[9/16] !bg-slate-800 rounded-none sm:rounded-md" />
+                </div>
 
-            <!-- Assets Grid -->
-            <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
-                <div v-if="paginatedAssets.length > 0"
-                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
-                    <div v-for="asset in paginatedAssets" :key="asset.id"
-                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300 rounded-none sm:rounded-md border border-white/5 hover:border-white/20"
-                        @click="openModal(asset)">
+                <!-- Assets Grid -->
+                <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
+                    <div v-if="paginatedAssets.length > 0"
+                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
+                        <div v-for="asset in paginatedAssets" :key="asset.id"
+                            class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300 rounded-none sm:rounded-md border border-white/5 hover:border-white/20"
+                            @click="openModal(asset)">
 
-                        <!-- Image -->
-                        <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
-                            :alt="asset.name"
-                            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+                            <!-- Image -->
+                            <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
+                                :alt="asset.name"
+                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
 
-                        <!-- Type Badge (Optional, maybe too cluttered for 9:16 tiles, but kept for now) -->
-                        <div v-if="asset.type !== 'image'"
-                            class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-1.5 py-0.5 rounded text-[10px] uppercase font-bold text-white z-10 opacity-70 group-hover:opacity-100 transition-opacity">
-                            {{ asset.type }}
-                        </div>
+                            <!-- Type Badge -->
+                            <div v-if="asset.type !== 'image'"
+                                class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-1.5 py-0.5 rounded text-[10px] uppercase font-bold text-white z-10 opacity-70 group-hover:opacity-100 transition-opacity">
+                                {{ asset.type }}
+                            </div>
 
-                        <!-- Hover Overlay -->
-                        <div
-                            class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-3">
-
-                            <!-- Top Actions -->
+                            <!-- Hover Overlay -->
                             <div
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                    class="!w-7 !h-7 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-xs hover:!bg-red-500 hover:!text-white transition-colors"
-                                    @click.stop="confirmDelete(asset)" />
+                                class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-3">
 
-                                <span v-if="asset.linked_char_id"
-                                    class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full border border-emerald-500/20"
-                                    v-tooltip.left="'Linked to Character'">
-                                    Linked
-                                </span>
-                            </div>
+                                <!-- Top Actions -->
+                                <div
+                                    class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
+                                    <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                        class="!w-7 !h-7 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-xs hover:!bg-red-500 hover:!text-white transition-colors"
+                                        @click.stop="confirmDelete(asset)" />
 
-                            <!-- Center View Button -->
-                            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-                                <Button icon="pi pi-eye" rounded text
-                                    class="!bg-black/40 !text-white !w-10 !h-10 !rounded-full opacity-0 group-hover:opacity-100 hover:!bg-black/60 hover:!scale-110 transition-all duration-300 pointer-events-auto !border border-white/20"
-                                    @click.stop="openModal(asset)" />
-                            </div>
+                                    <span v-if="asset.linked_char_id"
+                                        class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full border border-emerald-500/20"
+                                        v-tooltip.left="'Linked to Character'">
+                                        Linked
+                                    </span>
+                                </div>
 
-                            <!-- Bottom Info -->
-                            <div class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
-                                <p class="text-xs font-medium text-white line-clamp-1 mb-0.5">{{ asset.name }}</p>
-                                <p class="text-[10px] text-slate-400">{{ formatDate(asset.created_at) }}</p>
+                                <!-- Center View Button -->
+                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                                    <Button icon="pi pi-eye" rounded text
+                                        class="!bg-black/40 !text-white !w-10 !h-10 !rounded-full opacity-0 group-hover:opacity-100 hover:!bg-black/60 hover:!scale-110 transition-all duration-300 pointer-events-auto !border border-white/20"
+                                        @click.stop="openModal(asset)" />
+                                </div>
+
+                                <!-- Bottom Info -->
+                                <div
+                                    class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
+                                    <p class="text-xs font-medium text-white line-clamp-1 mb-0.5">{{ asset.name }}</p>
+                                    <p class="text-[10px] text-slate-400">{{ formatDate(asset.created_at) }}</p>
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <div v-else class="flex flex-col items-center justify-center h-64 text-slate-500">
+                        <i class="pi pi-images text-4xl mb-3 opacity-50"></i>
+                        <p>No assets found</p>
+                        <Button v-if="activeFilter !== 'all'" label="Clear Filters" text class="mt-2 !text-violet-400"
+                            @click="handleFilterChange('all')" />
+                    </div>
+
+                    <!-- Pagination -->
+                    <div v-if="totalRecords > rows" class="mt-6 flex justify-center">
+                        <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
+                            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+                        }" class="!bg-transparent !border-none !p-0" :pt="{
+                            root: { class: '!bg-transparent' },
+                            pages: { class: 'gap-1' },
+                            pageButton: ({ context }) => ({
+                                class: [
+                                    '!min-w-[32px] !h-8 !rounded-lg !border-none !transition-all !duration-200 !text-xs',
+                                    context.active ? '!bg-violet-600 !text-white !shadow-lg !shadow-violet-500/30' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-200'
+                                ]
+                            }),
+                            firstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-1' } },
+                            previousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-2' } },
+                            nextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-2' } },
+                            lastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-1' } }
+                        }" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- ALBUMS VIEW -->
+            <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
+                <!-- Empty State -->
+                <div v-if="albums.length === 0 && !albumsLoading"
+                    class="flex flex-col items-center justify-center h-64 text-slate-400">
+                    <i class="pi pi-folder-open text-6xl mb-4 opacity-50"></i>
+                    <p class="text-xl">No albums found</p>
+                    <Button label="Create your first album" class="mt-4 p-button-text"
+                        @click="showCreateDialog = true" />
+                </div>
+                <!-- Loading State -->
+                <div v-else-if="albumsLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
+                        <Skeleton height="12rem" class="w-full rounded-xl" />
+                        <Skeleton width="60%" height="1.5rem" />
+                        <Skeleton width="40%" height="1rem" />
+                    </div>
                 </div>
 
-                <div v-else class="flex flex-col items-center justify-center h-64 text-slate-500">
-                    <i class="pi pi-images text-4xl mb-3 opacity-50"></i>
-                    <p>No assets found</p>
-                    <Button v-if="activeFilter !== 'all'" label="Clear Filters" text class="mt-2 !text-violet-400"
-                        @click="handleFilterChange('all')" />
-                </div>
+                <!-- Albums Grid -->
+                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div v-for="album in albums" :key="album.id"
+                        class="glass-panel rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 group"
+                        @click="goToAlbumDetail(album.id)">
 
-                <!-- Pagination -->
-                <div v-if="totalRecords > rows" class="mt-6 flex justify-center">
-                    <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
-                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
-                    }" class="!bg-transparent !border-none !p-0" :pt="{
-                        root: { class: '!bg-transparent' },
-                        pages: { class: 'gap-1' },
-                        pageButton: ({ context }) => ({
-                            class: [
-                                '!min-w-[32px] !h-8 !rounded-lg !border-none !transition-all !duration-200 !text-xs',
-                                context.active ? '!bg-violet-600 !text-white !shadow-lg !shadow-violet-500/30' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-200'
-                            ]
-                        }),
-                        firstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-1' } },
-                        previousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-2' } },
-                        nextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-2' } },
-                        lastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-1' } }
-                    }" />
+                        <!-- Album Cover Placeholder -->
+                        <div v-if="album.cover_asset_id"
+                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                            <Image :src="API_URL + '/assets/' + album.cover_asset_id + '?thumbnail=true'" preview
+                                class="w-full h-full object-cover" imageClass="w-full h-full object-cover"
+                                @click.stop />
+                        </div>
+                        <div v-else
+                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
+                            <i
+                                class="pi pi-images text-4xl text-slate-600 group-hover:text-slate-400 transition-colors"></i>
+                        </div>
+
+                        <div>
+                            <h3 class="m-0 mb-1 text-xl font-semibold truncate">{{ album.name }}</h3>
+                            <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em]">
+                                {{ album.description || 'No description' }}
+                            </p>
+                            <div class="mt-3 flex items-center text-xs text-slate-500">
+                                <i class="pi pi-image mr-1"></i>
+                                <span>{{ album.generation_ids?.length || 0 }} items</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -265,6 +379,28 @@ const formatDate = (dateString: string) => {
                 </div>
             </div>
         </Dialog>
+
+        <!-- Create Album Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }"
+            :breakpoints="{ '960px': '75vw', '641px': '90vw' }" class="p-dialog-custom">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold">Name</label>
+                    <InputText id="name" v-model="newAlbum.name" class="w-full" placeholder="My Awesome Album"
+                        autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="font-semibold">Description</label>
+                    <Textarea id="description" v-model="newAlbum.description" rows="3" class="w-full"
+                        placeholder="Optional description..." />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" icon="pi pi-times" @click="showCreateDialog = false" text />
+                <Button label="Create" icon="pi pi-check" @click="createAlbum" :loading="submittingAlbum" autofocus />
+            </template>
+        </Dialog>
+
         <ConfirmDialog></ConfirmDialog>
         <Toast />
     </div>
diff --git a/src/views/CharactersView.vue b/src/views/CharactersView.vue
index 5b817af..5c0dac3 100644
--- a/src/views/CharactersView.vue
+++ b/src/views/CharactersView.vue
@@ -3,38 +3,135 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import Skeleton from 'primevue/skeleton'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Textarea from 'primevue/textarea'
+import ConfirmDialog from 'primevue/confirmdialog'
+import Toast from 'primevue/toast'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
 
 const router = useRouter()
+const confirm = useConfirm()
+const toast = useToast()
+
 const characters = ref([])
 const loading = ref(true)
+const showCreateDialog = ref(false)
+const creating = ref(false)
+const newCharacter = ref({
+    name: '',
+    character_bio: '',
+    avatar_image: '' // Optional for now
+})
+
 const API_URL = import.meta.env.VITE_API_URL
 
 onMounted(async () => {
+    await fetchCharacters()
+})
+
+const fetchCharacters = async () => {
     loading.value = true
     try {
         characters.value = await dataService.getCharacters()
     } catch (e) {
         console.error('Failed to load characters', e)
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load characters', life: 3000 })
     } finally {
         loading.value = false
     }
-})
+}
 
 const goToDetail = (id) => {
     router.push({ name: 'character-detail', params: { id } })
 }
 
+const selectedAvatarFile = ref(null)
 
+const onFileSelect = (event) => {
+    const file = event.target.files[0]
+    if (file) {
+        selectedAvatarFile.value = file
+    }
+}
+
+const openCreateDialog = () => {
+    newCharacter.value = { name: '', character_bio: '', avatar_image: '' }
+    selectedAvatarFile.value = null
+    showCreateDialog.value = true
+}
+
+const createCharacter = async () => {
+    if (!newCharacter.value.name.trim()) return
+
+    creating.value = true
+    try {
+        // Upload avatar if selected
+        if (selectedAvatarFile.value) {
+            const uploadResult = await dataService.uploadAsset(selectedAvatarFile.value)
+            // Assuming uploadAsset returns object with 'url' or 'path' or similar. 
+            // The dataService.uploadAsset returns response.data. 
+            // Let's assume response.data has 'url' or is the url string? 
+            // Checking dataService.js: returns response.data. usage in other places implies it might be the asset object.
+            // Let's check typical asset response. It likely has 'url' or 'file_path'.
+            // I'll assume it returns an Asset object and I should use its url.
+            if (uploadResult && uploadResult.url) {
+                newCharacter.value.avatar_image = uploadResult.url
+            } else if (uploadResult && uploadResult.file_path) {
+                newCharacter.value.avatar_image = uploadResult.file_path
+            }
+        }
+
+        await dataService.createCharacter(newCharacter.value)
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Character created', life: 3000 })
+        showCreateDialog.value = false
+        await fetchCharacters()
+    } catch (e) {
+        console.error('Failed to create character', e)
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create character', life: 3000 })
+    } finally {
+        creating.value = false
+    }
+}
+
+const confirmDelete = (event, id) => {
+    event.stopPropagation() // Prevent card click
+    confirm.require({
+        message: 'Are you sure you want to delete this character?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        rejectClass: 'p-button-secondary',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        accept: async () => {
+            try {
+                await dataService.deleteCharacter(id)
+                toast.add({ severity: 'success', summary: 'Success', detail: 'Character deleted', life: 3000 })
+                await fetchCharacters()
+            } catch (e) {
+                console.error('Failed to delete character', e)
+                toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete character', life: 3000 })
+            }
+        }
+    })
+}
 </script>
 
 <template>
-    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100 relative">
+        <Toast />
+        <ConfirmDialog />
+
         <!-- Top Bar -->
         <header class="flex justify-between items-end mb-8">
             <div>
                 <h1 class="text-4xl font-bold m-0">Characters</h1>
                 <p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
             </div>
+            <Button label="Create Character" icon="pi pi-plus" @click="openCreateDialog" />
         </header>
 
         <!-- Loading State -->
@@ -51,20 +148,55 @@ const goToDetail = (id) => {
         <!-- Characters Grid -->
         <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div v-for="char in characters" :key="char.id"
-                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
+                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 relative group"
                 @click="goToDetail(char.id)">
-                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
-                    <img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
+
+                <!-- Delete Button (Visible on Hover) -->
+                <button
+                    class="absolute top-2 right-2 p-2 rounded-full hover:bg-red-500/20 text-slate-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all z-10"
+                    @click="(e) => confirmDelete(e, char.id)" title="Delete Character">
+                    <i class="pi pi-trash"></i>
+                </button>
+
+                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10 bg-slate-800">
+                    <img v-if="char.avatar_image" :src="API_URL + char.avatar_image" :alt="char.name"
                         class="w-full h-full object-cover" />
+                    <div v-else class="w-full h-full flex items-center justify-center text-slate-500">
+                        <i class="pi pi-user text-2xl"></i>
+                    </div>
                 </div>
                 <div class="flex-1 overflow-hidden">
-                    <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
+                    <h3 class="m-0 mb-2 text-xl font-semibold truncate pr-6">{{ char.name }}</h3>
                     <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                        {{ char.character_bio }}
+                        {{ char.character_bio || 'No bio provided.' }}
                     </p>
                 </div>
             </div>
         </div>
+
+        <!-- Create Character Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Character" :style="{ width: '30rem' }">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label class="font-semibold">Avatar</label>
+                    <input type="file" accept="image/*" @change="onFileSelect"
+                        class="text-slate-300 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-500/10 file:text-violet-400 hover:file:bg-violet-500/20 file:cursor-pointer" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="font-semibold">Name</label>
+                    <InputText id="name" v-model="newCharacter.name" class="w-full" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="bio" class="font-semibold">Bio</label>
+                    <Textarea id="bio" v-model="newCharacter.character_bio" rows="3" class="w-full" />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
+                <Button label="Create" icon="pi pi-check" @click="createCharacter" :loading="creating"
+                    :disabled="!newCharacter.name.trim()" />
+            </template>
+        </Dialog>
     </div>
 </template>
 
diff --git a/src/views/ProjectDetailView.vue b/src/views/ProjectDetailView.vue
new file mode 100644
index 0000000..fa8710f
--- /dev/null
+++ b/src/views/ProjectDetailView.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="container mx-auto p-4 animate-fade-in" v-if="project">
+        <!-- Header -->
+        <div class="glass-panel p-8 rounded-xl mb-8 relative overflow-hidden">
+            <div class="absolute top-0 right-0 p-4 opacity-10">
+                <i class="pi pi-folder text-9xl text-white"></i>
+            </div>
+
+            <div class="relative z-10">
+                <div class="flex items-center gap-3 mb-2">
+                    <Button icon="pi pi-arrow-left" text rounded @click="router.push('/projects')" />
+                    <span v-if="isCurrentProject"
+                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
+                        Active Project
+                    </span>
+                </div>
+
+                <h1 class="text-4xl font-bold text-white mb-4">{{ project.name }}</h1>
+                <p class="text-slate-300 text-lg max-w-2xl mb-6">
+                    {{ project.description || 'No description provided.' }}
+                </p>
+
+                <div class="flex gap-3">
+                    <Button v-if="!isCurrentProject" label="Set as Active" icon="pi pi-check" @click="selectProject" />
+                    <Button v-if="isOwner" label="Delete" icon="pi pi-trash" severity="danger" outlined
+                        @click="confirmDelete" />
+                    <Button label="Settings" icon="pi pi-cog" severity="secondary" outlined />
+                </div>
+            </div>
+        </div>
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog />
+
+        <!-- Content Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Members Column -->
+            <div class="lg:col-span-1">
+                <div class="glass-panel p-6 rounded-xl h-full">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-bold text-white">Team Members</h2>
+                    </div>
+                    <!-- Inline Add Member -->
+                    <div v-if="isOwner" class="mb-6">
+                        <div class="flex gap-2">
+                            <InputText v-model="inviteUsername" placeholder="Username to add"
+                                class="w-full p-inputtext-sm" @keyup.enter="addMember" />
+                            <Button label="Add" icon="pi pi-user-plus" size="small" @click="addMember"
+                                :loading="inviting" :disabled="!inviteUsername.trim()" />
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col gap-4">
+                        <div v-for="memberId in project.members" :key="memberId"
+                            class="flex items-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
+                            <div
+                                class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold mr-3">
+                                <i class="pi pi-user"></i>
+                            </div>
+                            <div class="overflow-hidden">
+                                <p class="text-white font-medium truncate">{{ memberId === project.owner_id ? 'Owner' :
+                                    'Member' }}</p>
+                                <p class="text-slate-500 text-xs truncate">ID: {{ memberId }}</p>
+                            </div>
+                            <div class="ml-auto" v-if="project.owner_id === memberId">
+                                <i class="pi pi-crown text-yellow-500" title="Owner"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Stats/Activity Column (Placeholder) -->
+            <div class="lg:col-span-2">
+                <div class="glass-panel p-6 rounded-xl h-full">
+                    <h2 class="text-xl font-bold text-white mb-6">Activity</h2>
+                    <div class="text-center py-12 text-slate-500">
+                        <i class="pi pi-chart-line text-4xl mb-4 opacity-50"></i>
+                        <p>No recent activity registered.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div v-else class="flex justify-center items-center h-full">
+        <div class="text-center">
+            <i class="pi pi-spin pi-spinner text-4xl text-primary-500 mb-4"></i>
+            <p class="text-slate-400">Loading project...</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useProjectsStore } from '@/stores/projectsStore';
+import { storeToRefs } from 'pinia';
+import { useAuthStore } from '@/stores/auth';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { useConfirm } from 'primevue/useconfirm';
+
+const route = useRoute();
+const router = useRouter(); // Missing import fixed
+const projectsStore = useProjectsStore();
+const authStore = useAuthStore();
+const { projects, currentProject } = storeToRefs(projectsStore);
+
+const projectId = route.params.id;
+const project = computed(() => projectsStore.getProjectById(projectId));
+const isCurrentProject = computed(() => currentProject.value?.id === projectId);
+const isOwner = computed(() => authStore.user && project.value && authStore.user.id === project.value.owner_id);
+
+const inviteUsername = ref('');
+const inviting = ref(false);
+
+onMounted(async () => {
+    // Ensure projects are loaded
+    if (projects.value.length === 0) {
+        await projectsStore.fetchProjects();
+    }
+});
+
+const selectProject = () => {
+    if (project.value) {
+        projectsStore.selectProject(project.value.id);
+    }
+}
+
+const addMember = async () => {
+    if (!inviteUsername.value.trim()) return;
+
+    inviting.value = true;
+    try {
+        await projectsStore.addMember(projectId, inviteUsername.value);
+        inviteUsername.value = '';
+    } catch (e) {
+        console.error(e);
+        // Toast error here ideally
+    } finally {
+        inviting.value = false;
+    }
+}
+
+const confirm = useConfirm();
+const confirmDelete = () => {
+    confirm.require({
+        message: 'Are you sure you want to delete this project? This action cannot be undone.',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        accept: async () => {
+            try {
+                await projectsStore.deleteProject(projectId);
+                router.push('/projects');
+            } catch (e) {
+                console.error("Failed to delete", e);
+            }
+        }
+    });
+}
+</script>
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
new file mode 100644
index 0000000..1657222
--- /dev/null
+++ b/src/views/ProjectsView.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="container mx-auto p-4 animate-fade-in">
+        <div class="flex justify-between items-center mb-6">
+            <div>
+                <h1 class="text-3xl font-bold text-white mb-2">Projects</h1>
+                <p class="text-slate-400">Manage your workspaces and teams</p>
+            </div>
+            <Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" />
+        </div>
+
+        <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" />
+        </div>
+
+        <div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl">
+            <i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i>
+            <h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3>
+            <p class="text-slate-400 mb-6">Create your first project to get started</p>
+            <Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text />
+        </div>
+
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="project in projects" :key="project.id"
+                class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden"
+                @click="goToProject(project.id)">
+                <!-- Active Indicator -->
+                <div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2">
+                    <span
+                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
+                        Active
+                    </span>
+                </div>
+
+                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
+                    {{ project.name }}
+                </h3>
+                <p class="text-slate-400 text-sm mb-4 line-clamp-2">
+                    {{ project.description || 'No description' }}
+                </p>
+
+                <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
+                    <div class="flex items-center text-slate-500 text-sm">
+                        <i class="pi pi-users mr-2"></i>
+                        <span>{{ project.members.length }} members</span>
+                    </div>
+
+                    <Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
+                        severity="secondary" @click.stop="selectProject(project.id)" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Create Project Dialog -->
+        <Dialog v-model:visible="showCreateDialog" modal header="Create New Project"
+            :style="{ width: '90vw', maxWidth: '500px' }">
+            <div class="flex flex-col gap-4 pt-4">
+                <div class="flex flex-col gap-2">
+                    <label for="name" class="text-slate-300">Project Name</label>
+                    <InputText id="name" v-model="newProject.name" autofocus />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="description" class="text-slate-300">Description</label>
+                    <Textarea id="description" v-model="newProject.description" rows="3" autoResize />
+                </div>
+            </div>
+            <template #footer>
+                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
+                <Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useProjectsStore } from '@/stores/projectsStore';
+import { storeToRefs } from 'pinia';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Skeleton from 'primevue/skeleton';
+
+const router = useRouter();
+const projectsStore = useProjectsStore();
+// Use storeToRefs for reactive state
+const { projects, currentProject, loading } = storeToRefs(projectsStore);
+
+const showCreateDialog = ref(false);
+const creating = ref(false);
+const newProject = ref({
+    name: '',
+    description: ''
+});
+
+onMounted(() => {
+    projectsStore.fetchProjects();
+});
+
+const createProject = async () => {
+    if (!newProject.value.name.trim()) return;
+
+    creating.value = true;
+    try {
+        await projectsStore.createProject(newProject.value.name, newProject.value.description);
+        showCreateDialog.value = false;
+        newProject.value = { name: '', description: '' };
+    } catch (error) {
+        console.error(error);
+    } finally {
+        creating.value = false;
+    }
+};
+
+const selectProject = (id) => {
+    projectsStore.selectProject(id);
+};
+
+const goToProject = (id) => {
+    router.push(`/projects/${id}`);
+};
+</script>