Cu 86ewevg3y improve UI of bundle pages navid shad

.agent/skills/backend/SKILL.md

@@ -0,0 +1,28 @@
+---
+name: Backend Development
+description: Guidelines for Server-side development using Modular Rest, Database schemas, and Business Logic.
+---
+
+# Backend Development Skill
+
+## 1. Core Principles
+- **Modularity**: Organize logic into distinct, independent modules. Each module should have a single responsibility.
+- **Testing**: Write unit tests for core logic and services.
+- **Documentation**: Use JSDoc for functions to document parameters and return values.
+- **Workflow**: Always reference the ClickUp task ID in commit messages (e.g., `feat: #taskid message`).
+
+## 2. Technology Stack
+- **Framework**: Modular Rest Server (@modular-rest/server)
+- **Database**: MongoDB (via `defineCollection`)
+
+## 3. Documentation Reference
+**You MUST read the following file for API details:**
+- [Modular Rest Server Docs](./modular-rest_server.md)
+
+## 4. Key Patterns
+- **Database Models**: Use `defineCollection` in `db.ts` files within modules.
+- **API Functions**: Use `defineFunction` in `functions.ts` files.
+- **Routing**: Avoid manual router creation; let the framework handle it.
+
+## 5. Directory Structure
+Code should be written in `/Users/navid-shad/Projects/CodeBridger/learn-by-subtitle/dashboard-app/server`.

.agent/skills/frontend/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: Frontend Logic
+description: Guidelines for Client-side logic, State Management (Pinia), API Integration, and App Navigation.
+---
+
+# Frontend Logic Skill
+
+## 1. Core Principles
+- **State Management**: Use Pinia for global state.
+- **API Integration**: Use `@modular-rest/client` to call server functions.
+- **Testing**: Implement integration tests for complex component interactions.
+- **Workflow**: Always reference the ClickUp task ID in commit messages (e.g., `feat: #taskid message`).
+
+## 2. Documentation Reference
+**You MUST read the following file for API Client details:**
+- [Modular Rest Client Docs](./modular-rest_client.md)
+
+## 3. Navigation & Auth Flow
+The application uses hash-based routing (`/#/`).
+
+### Common Routes
+- Home: `/#/`
+- Board: `/#/board`
+- Settings: `/#/settings`
+
+### Authentication
+- Token is stored in `localStorage` key `token`.
+- If redirected to login, verify token presence.
+
+## 4. Key Patterns
+- **Services**: Import `functionProvider` from `@modular-rest/client` to execute backend functions.
+- **Composables**: Use Vue composables for reusable logic.

.agent/skills/frontend_design/SKILL.md

@@ -0,0 +1,122 @@
+---
+name: Frontend Design System
+description: Comprehensive guide for creating premium, high-fidelity UI layouts using the project's Vue component library and Tailwind CSS.
+---
+
+# Frontend Design System
+
+This skill provides the standards and patterns for building user interfaces in the dashboard application. The goal is to create a **premium, dynamic, and highly polished** user experience that "wows" the user.
+
+## 1. Design Philosophy
+
+- **High-End Aesthetics**: We do not build "MVP-looking" apps. We build refined, polished interfaces.
+- **Glassmorphism & Depth**: Utilize layers, blurs (`backdrop-blur-xl`), and subtle transparencies (`bg-white/40`) to create depth.
+- **Vibrant Colors**: Use the project's `primary` and `secondary` palette, but often via gradients or low-opacity tints (`bg-primary/10`) rather than solid blocks of harsh color.
+- **Dynamic Motion**: Nothing should feel static. Smooth transitions (`duration-500`, `duration-700`), micro-interactions on hover, and entrance animations are required.
+
+## 2. Component Usage
+
+All standard UI elements must come from the internal component library.
+
+**Reference Documentation:**
+- [UI Component Library (lib-vue-components)](./lib-vue-components.md) - Contains full list of available components and their props.
+
+```typescript
+// Import path
+import { Card, Button, Icon } from '@codebridger/lib-vue-components/elements.ts';
+import { Modal } from '@codebridger/lib-vue-components/complex.ts';
+```
+
+### Key Components
+- **Card**: The building block for content.
+- **Button**: Use for actions.
+- **Icon**: Wrapper for Iconify icons. PREFERRED SET: `iconify solar--*-bold-duotone` or `*-bold`.
+- **PageHeader**: Standard top-of-page layout with title, subtitle, and actions.
+- **Breadcrumb**: Navigation hierarchy component.
+
+## 3. Layout Patterns
+
+### Main Page Shell
+Pages normally live within a `DashboardShell` (via `default` layout). Content should be centered with max-width.
+
+```vue
+<template>
+    <div class="relative min-h-screen">
+		<!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+
+        <!-- Standard Container -->
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+
+            <!-- Standard Header Block -->
+            <PageHeader
+                overline="Section Label"
+                title="Page Title"
+                subtitle="Descriptive text goes here."
+            >
+                <template #actions>
+                    <!-- Optional Right-side Actions/Status -->
+                </template>
+            </PageHeader>
+
+            <!-- Content Grid -->
+            <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+```
+
+### Card Styling
+Cards should rarely be just plain rectangles.
+
+**Premium Card Recipe:**
+- **Rounding**: `rounded-[2.5rem]` or `rounded-3xl` (generous curves).
+- **Background**: `bg-white dark:bg-gray-800`.
+- **Shadow**: Light idle shadow `shadow-[0_4px_20px_rgba(0,0,0,0.03)]` -> Deep hover shadow `hover:shadow-[0_40px_80px_rgba(var(--primary-rgb),0.15)]`.
+- **Interaction**: `group hover:-translate-y-3 transition-all duration-700`.
+- **Decorations**: Use absolute positioned gradients or icons in the background of cards to add texture.
+
+## 4. Typography Standards
+
+- **Titles (H1-H2)**: `font-black`, `tracking-tight`.
+- **Body**: `font-medium` (avoid thin weights for body text to maintain legibility and premium feel).
+- **Labels/Meta**: `text-[10px]` or `text-xs`, `font-bold`, `uppercase`, `tracking-widest` (typographic spacing is key for the premium look).
+- **Colors**:
+  - Primary text: `text-gray-900` / `dark:text-white`
+  - Secondary text: `text-gray-500` / `dark:text-gray-400`
+  - Accent text: `text-primary`
+
+## 5. Visual Effects & Assets
+
+### Gradients
+Use gradients to create "glows".
+- *Example*: `bg-gradient-to-br from-primary via-primary-dark to-secondary`
+
+### Glassmorphism
+- Use `backdrop-blur-md` or `backdrop-blur-xl`.
+- Combine with `bg-white/10` or `bg-white/70`.
+- Add `border border-white/20` for the "glass edge" look.
+
+### Background Elements
+Add "blobs" behind the main content to avoid empty whitespace looking boring.
+```html
+<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
+```
+
+## 6. Development Checklist
+
+When creating a new page or component:
+1. [ ] Did I use `Card` and `Button` from the library?
+2. [ ] Are the borders rounded enough (`rounded-2xl+`)?
+3. [ ] Is there an entrance animation (e.g., `animate-fade-in-up`)?
+4. [ ] Are interactable elements responsive to hover (scale, shadow, lift)?
+5. [ ] Is Dark Mode supported (`dark:` variants)?
+6. [ ] Did I use the "Solar" icon set (`iconify solar--...`)?
+7. [ ] Is the typography hierarchy clear (Big titles, tiny uppercase labels)?

frontend/components/common/Breadcrumb.vue

@@ -0,0 +1,39 @@
+<template>
+	<nav class="flex" aria-label="Breadcrumb">
+		<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+			<template v-for="(item, index) in items" :key="index">
+				<li class="inline-flex items-center">
+					<component :is="isLast(index) ? 'span' : 'RouterLink'" :to="!isLast(index) ? item.to : undefined"
+						:class="[
+							'inline-flex items-center text-sm font-medium transition-colors duration-200',
+							isLast(index)
+								? 'text-gray-500 cursor-default dark:text-gray-400'
+								: 'text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white',
+						]">
+						{{ item.label }}
+					</component>
+				</li>
+				<li v-if="!isLast(index)" aria-hidden="true">
+					<div class="flex items-center">
+						<Icon name="icon-park-outline:right" class="mx-1 h-4 w-4 text-gray-400" />
+					</div>
+				</li>
+			</template>
+		</ol>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
+type BreadcrumbItem = {
+	label: string;
+	to?: string;
+};
+
+const props = defineProps<{
+	items: BreadcrumbItem[];
+}>();
+
+const isLast = (index: number) => index === props.items.length - 1;
+</script>

frontend/components/common/PageHeader.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="mb-14 flex flex-col justify-between gap-6 md:flex-row">
+		<div class="flex flex-col gap-3">
+			<!-- Breadcrumbs -->
+			<div v-if="breadcrumbs && breadcrumbs.length" class="mb-2">
+				<Breadcrumb :items="breadcrumbs" />
+			</div>
+
+			<!-- Overline Label -->
+			<div v-if="overline" class="flex items-center gap-2">
+				<div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
+				<span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
+					{{ overline }}
+				</span>
+			</div>
+
+			<!-- Main Title -->
+			<h1
+				class="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-5xl font-black leading-none tracking-tight text-transparent dark:from-white dark:to-gray-400">
+				{{ title }}
+			</h1>
+
+			<!-- Subtitle -->
+			<p v-if="subtitle" class="max-w-md text-lg font-medium text-gray-500 dark:text-gray-400">
+				{{ subtitle }}
+			</p>
+		</div>
+
+		<!-- Right-side Actions -->
+		<div v-if="$slots.actions" class="flex flex-col items-end gap-4 md:flex-row md:items-end">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Breadcrumb from './Breadcrumb.vue';
+
+// Define types for cleaner props
+type BreadcrumbItem = {
+	label: string;
+	to?: string;
+};
+
+defineProps<{
+	title: string;
+	subtitle?: string;
+	overline?: string;
+	breadcrumbs?: BreadcrumbItem[];
+}>();
+</script>