diff --git a/.local/aider/projects/runcats/aider.env b/.local/aider/projects/runcats/aider.env new file mode 100644 index 0000000..9f4939e --- /dev/null +++ b/.local/aider/projects/runcats/aider.env @@ -0,0 +1,8 @@ +AIDER_READ=README.md +AIDER_READ=.aider/read/CONVENTIONS.md +AIDER_READ=.aider/read/PROMPT.md +AIDER_LINT=true +AIDER_LINT_CMD="ts: go-task format-client" +AIDER_LINT_CMD="js: go-task format-client" +AIDER_LINT_CMD="vue: go-task format-client" +AIDER_LINT_CMD="php: go-task format-server" diff --git a/.local/aider/projects/runcats/read/CONVENTIONS.md b/.local/aider/projects/runcats/read/CONVENTIONS.md new file mode 100644 index 0000000..562efc7 --- /dev/null +++ b/.local/aider/projects/runcats/read/CONVENTIONS.md @@ -0,0 +1,6 @@ +# Conventions for writing code in this repository +- Indentation: Use 4 spaces for indentation. Do not use tabs. +- Minimise comments, code should be self-explanatory. +- Do not try to reinvent the wheel. Use available APIs and tools where possible. +- Follow best practices and common formatting for the programming language you are using. +- Generate tests for new features and bug fixes. diff --git a/.local/aider/projects/runcats/read/PROMPT.md b/.local/aider/projects/runcats/read/PROMPT.md new file mode 100644 index 0000000..70a1672 --- /dev/null +++ b/.local/aider/projects/runcats/read/PROMPT.md @@ -0,0 +1,52 @@ +## RunCats Application Overview + +This document summarizes the core structure and components of the RunCats application for context in future prompts. + +**Core Concept:** A "Tinder for fitness buddies" application connecting users based on location, fitness interests, and preferences. + +**Project Structure:** + +* **`/` (Root):** Contains project-level configuration and this summary file. +* **`/server`:** Laravel backend API. + * `app/Http/Controllers/Api/`: API endpoint logic (e.g., `AuthController`, `UserController`). + * `app/Http/Requests/`: Input validation rules (e.g., `LoginRequest`, `UpdateProfileRequest`). + * `app/Http/Resources/`: API response formatting (e.g., `UserResource`, `ProfileResource`). + * `app/Models/`: Eloquent models (e.g., `User`, `Profile`). + * `routes/api.php`: API route definitions. + * Uses Laravel Sail, PostgreSQL, Redis, Ably, AuthKit, Stripe. +* **`/client`:** Vue.js frontend (SPA) and Capacitor mobile app source. + * `src/views/`: Page-level components (e.g., `LoginPage.vue`, `ProfilePage.vue`). + * `src/components/`: Reusable UI components (e.g., `LoginForm.vue`, `ProfileCard.vue`). + * `src/stores/`: Pinia state management modules (e.g., `auth.ts`, `user.ts`). + * `src/services/`: API interaction logic (e.g., `authService.ts`, `userService.ts`, `api.ts` base client). + * `src/router/`: Vue Router configuration (`index.ts`). + * `src/types/`: TypeScript type definitions (e.g., `user.ts`). + * Uses Vue 3 (Composition API), TypeScript, Pinia, Vue Router, Tailwind CSS, Vite, Capacitor, Vitest, Playwright. + +**Core Features (Initial Focus):** + +1. **Authentication:** + * Email/Password Registration & Login (`AuthController`, `LoginPage`, `RegisterPage`, `auth.ts` store). + * Strava Sign-in (Planned). + * Token-based API authentication (Laravel Sanctum assumed). +2. **User Profiles:** + * View own profile (`UserController@show`, `ProfilePage`, `ProfileCard`, `user.ts` store). + * Edit own profile (`UserController@update`, `EditProfilePage`, `ProfileForm`, `user.ts` store). + * Fields: Name, Email, Bio, Fitness Goals, Fitness Level, Profile Picture (Planned). +3. **Finding Friends (Planned):** + * Matching based on criteria (distance, activity, level, etc.). + * Viewing potential matches. + * Friend requests. +4. **Real-time Features (Planned):** + * Notifications (Ably). + * Chat. + +**Key Technologies:** + +* **Backend:** PHP (Laravel), PostgreSQL, Redis +* **Frontend:** TypeScript (Vue.js), Pinia, Vue Router, Tailwind CSS +* **Mobile:** Capacitor +* **Authentication:** Laravel Sanctum (assumed for API tokens) +* **Real-time:** Ably +* **Payments:** Stripe (Planned) +* **Testing:** Vitest (Unit), Playwright (E2E) diff --git a/.local/aider/projects/runcats/read/docs/quasar-components.md b/.local/aider/projects/runcats/read/docs/quasar-components.md new file mode 100644 index 0000000..535b08d --- /dev/null +++ b/.local/aider/projects/runcats/read/docs/quasar-components.md @@ -0,0 +1,275 @@ +Below is a **cheat-sheet of the Quasar components most teams reach for first**, each with a minimal syntax example and the *props/events you’ll touch 90 % of the time*. (For exhaustive API cards, jump to the linked docs pages.) + +--- + +## 1. Layout primitives + +### `` + +```vue + + … + … + + + + + +``` + +**Key props** + +| prop | type | purpose | +| ------------- | ------- | ---------------------------------------------------------------------------------------------------- | +| `view` | String | The 3×3 **matrix** that decides if header/footer/drawers are *Hidden/Reveal/Fixed* on each platform. | +| `container` | Boolean | Constrains layout to parent width (nice for centered apps). | +| `height-hint` | Number | SSR fallback when JS can’t compute window height. | + +Events: `@scroll`, `@resize`. + +--- + +### `` / `` + +```vue +… +``` + +Common props: `elevated`, `reveal`, `bordered`, `height-hint`; events `@reveal`, `@hide`. + +### `` + +```vue + + … + +``` + +Important props: `v-model`, `side`, `overlay`, `behavior`, `width`, `mini`, `mini-to-overlay`, `bordered`. + +### `` & friends + +`` goes inside `` and auto-offsets for the header/footer/drawers. Add +`` or `` when you need floating buttons or “back-to-top”. + +--- + +## 2. Action components + +### `` + +```vue + +``` + +| frequently-used prop | effect | | +| --------------------------------------------------------- | ------------------------------------ | ----------------- | +| `label`, `icon`, `icon-right` | Button content. | | +| `color`, `text-color` | Palette control. | | +| `flat`, `outline`, `unelevated`, `push`, `round`, `dense` | Visual variants. | | +| `size` | XS → XL tokens or CSS value. | | +| `to`, `href`, `type` | Router / link / native-form support. | | +| `disable`, `loading`, `ripple` | Interactivity toggles. | | + +### `` + `` / `` + +```vue + + + + + + + … + … + +``` + +Key props: `v-model`, `align`, `breakpoint`, `vertical`, `dense`, `shrink`, `class`. `QTab` adds `name`, `icon`, `label`, `alert`, `badge`. + +--- + +## 3. Forms & inputs + +### `` + +```vue + +``` + +Essential props: `type`, `label`, `placeholder`, `outlined|filled|borderless|rounded`, `dense`, `clearable`, `prefix`, `suffix`, `hint`, `error`, `error-message`, `debounce`, `rules`, `lazy-rules`. + +### `` + +```vue + +``` + +Hot props: `options`, `option-label`, `option-value`, `emit-value`, `map-options`, `multiple`, `use-input`, `use-chips|chips`, `dense`, `clearable`, `popup-content-class`, `loading`, `virtual-scroll`. + +### `` + +```vue + + … + +``` + +`@submit`, `@reset` events; imperative methods `validate()`, `resetValidation()`, `getValidationComponents()`. + +#### Quasar Form-Input Components + +| Component | Minimal syntax example | What it’s for | +| ---------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | +| **QField** | `vue
` | Gives any custom control a Quasar-style label, hint, error/validation and dense/outlined looks. | +| **QInput** | `vue
` | Text / number / email etc. input with masks, debounced `v-model`, built-in rules & slots. | +| **QSelect** | `vue
` | Single- or multi-select dropdown / autocomplete (can be filterable, chip-style, virtual-scrolled). | +| **QCheckbox** | `vue
` | Standard checkbox with tri-state (checked / unchecked / indeterminate) support. | +| **QRadio** | `vue
` | Mutually-exclusive option picker for small sets. | +| **QToggle** | `vue
` | Mobile-style ON/OFF switch — boolean input with accessible keyboard support. | +| **QOptionGroup** | `vue
` | Renders a whole list of radios / checkboxes / toggles in one shot, keeping models in sync. | +| **QBtnToggle** | `vue
` | Segmented-control alternative to radios, but looking like grouped buttons. | +| **QSlider** | `vue
` | Single-thumb numeric slider with discrete or continuous steps. | +| **QRange** | `vue
` | Dual-thumb range selector for min/max numeric values. | +| **QKnob** | `vue
` | Rotary dial (built on `QCircularProgress`) for coarse or fine-grained numeric input. | +| **QRating** | `vue
` | Star (or custom icon) rating picker that can be readonly or interactive. | +| **QFile** | `vue
` | File-chooser that returns `FileList` or `Array` and shows previews/count. | +| **QUploader** | `vue
` | Drag-and-drop or click-to-upload component with queue, retry and progress bars. | +| **QColor** | `vue
` | Inline or pop-up color picker with HEX/RGB/HSV and palette presets. | +| **QDate** | `vue
` | Calendar date picker (Gregorian & Persian); supports ranges and shortcuts. | +| **QTime** | `vue
` | Clock-face or input-field time picker with seconds, intervals and AM/PM/24-h modes. | +| **QEditor** | `vue
` | Full WYSIWYG rich-text editor that reads/writes HTML and lets you extend its toolbar. | + +These inputs plug straight into **QForm** validation and inherit Quasar’s design-system props (`color`, `dense`, `dark`, *etc.*) + +--- + +## 4. Data display + +### `` + +```vue + + Title + + Body content… + + + + + +``` + +Useful props: `flat`, `bordered`, `square`, `dark`. Slot helpers: `q-card-section`, `q-card-actions`, `q-card-media`. + +### `` + +```vue + +``` + +Quick-hit props: `rows`, `columns`, `row-key`, `selection`, `selected`, `pagination`, `rows-per-page-options`, `filter`, `dense`, `grid`, `virtual-scroll`, `loading`, scoped slots for full customisation. + +--- + +## 5. Overlays & feedback + +### `` + +```vue + + + …content… + + +``` + +Main props: `v-model`, `persistent`, `maximized`, `full-width`, `full-height`, `position`, `transition-show`, `transition-hide`, `no-backdrop-dismiss`. Events: `@show`, `@hide`. + +### `` + +```vue +
+ + …content… +
+``` + +Props: `showing`, optional `label`, `label-class`, `size`, `color`. + +--- + +Below are **all Quasar components that were *not* covered in the previous cheat-sheet**, with a **one-line syntax sample** and a **very short “what it’s for” blurb**. + +| Component | Minimal syntax example | Purpose | +| --------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | +| **QAjaxBar** | `` | Thin loading bar that auto-shows while Ajax/fetch calls run. | +| **QAvatar** | `` | Circular/square avatar that holds an icon, text or image. | +| **QBadge** | `3` | Tiny counter / status dot to highlight numbers or states. | +| **QBanner** | `New version available!` | Prominent in-page notice with optional actions. | +| **QBar** | `…` | Ultra-slim horizontal bar—handy in headers, cards or Electron apps. | +| **QBreadcrumbs** | `` | Shows current navigation hierarchy. | +| **QBtnDropdown** | `…` | Split button that reveals a menu of extra actions. | +| **QBtnGroup** | `` | Visually groups buttons, sharing borders/radius. | +| **QCarousel** | `` | Swipeable / auto-playing image or content slider. | +| **QChatMessage** | `` | Chat bubble for messenger-style UIs. | +| **QChip** | `Label` | Small pill for tags, filters, contacts, etc. | +| **QCircularProgress** | `` | Circular spinner / progress indicator. | +| **QExpansionItem** | `Hidden stuff` | Accordion row that reveals extra content when expanded. | +| **QFab** | `` | Floating action button plus optional speed-dial actions. | +| **QIcon** | `` | Embeds Material, MDI, FontAwesome (and more) icons. | +| **QImg** | `` | Optimised image with lazy-load and blur-up placeholder. | +| **QInfiniteScroll** | `…` | Auto-loads more data when scrolled near bottom. | +| **QIntersection** | `…` | Emits events when element enters/leaves viewport. | +| **QLinearProgress** | `` | Horizontal progress bar, determinate or indeterminate. | +| **QList / QItem** | `Row` | Vertical list rows with rich slots; ideal for menus or data lists. | +| **QMarkupTable** | `` | Static HTML table—lightweight alternative to `QTable`. | +| **QMenu** | `…` | Context pop-over anchored to any element. | +| **QNoSsr** | `` | Renders slot only on client (skips SSR). | +| **QPopupEdit** | `vue
` | “Click-to-edit” helper: turns any label or cell into an inline editable pop-up. | +| **QResizeObserver** | `` | Fires event whenever the parent DOM element changes size. | +| **QScrollObserver** | `` | Emits position & direction as the page/container scrolls. | +| **QPagination** | `` | Page number / navigation control. | +| **QParallax** | `` | Hero banner with parallax scroll effect. | +| **QPopupProxy** | `Popover` | Generic anchored pop-up used by many pickers/menus. | +| **QPullToRefresh** | `` | Mobile swipe-down-to-refresh wrapper. | +| **QResponsive** | `` | Maintains aspect ratio for embedded content. | +| **QScrollArea** | `…` | Custom-styled scrollable container. | +| **QSeparator** | `` | Horizontal/vertical divider line. | +| **QSkeleton** | `` | Placeholder shimmer for loading states. | +| **QSlideItem** | `` | Mobile list-item swipe actions (e.g. mail apps). | +| **QSlideTransition** | `
Panel
` | Height/width slide animation wrapper. | +| **QSpace** | `` | Flexbox spacer that takes up remaining space. | +| **QSpinner** | `` | Dozens of SVG/CSS loaders beyond progress bars. | +| **QSplitter** | `` | Draggable resizer between two panes. | +| **QStepper** | `` | Wizard / multi-step process tracker. | +| **QTimeline** | `` | Vertical chronological milestones. | +| **QToolbar** | `Title` | App/header bar hosting nav and actions. | +| **QTooltip** | `Help text` | Hover/click tooltip—rich content supported. | +| **QTree** | `` | Expandable/collapsible hierarchical data viewer. | +| **QVideo** | `` | Responsive embedded video player (HTML5, YouTube, Vimeo). | +| **QVirtualScroll** | `{{ item }}` | Renders only visible rows for huge lists—boosts performance. | + +> **Note:** All these components share Quasar’s global props (`dark`, `dense`, `size`, `color`, etc.) and are tree-shakable—import only what you use for lean bundles. diff --git a/.local/aider/projects/runcats/read/docs/quasar-composables.md b/.local/aider/projects/runcats/read/docs/quasar-composables.md new file mode 100644 index 0000000..9de86c0 --- /dev/null +++ b/.local/aider/projects/runcats/read/docs/quasar-composables.md @@ -0,0 +1,21 @@ +### Vue composables — importable functions + +| Composable | Typical snippet | Purpose | +| ---------------------------- | ------------------------------------------------------------ | --------------------------------------------------------- | +| **useQuasar** | `const $q = useQuasar()` | Access *all* Quasar helpers/plugins inside setup. | +| **useDialogPluginComponent** | `const {dialogRef, onDialogOK} = useDialogPluginComponent()` | Boilerplate helpers for building custom dialogs. | +| **useFormChild** | `const {validate} = useFormChild()` | Tie a component into a parent `QForm`’s validation cycle. | +| **useMeta** | `useMeta(() => ({ title: 'Page' }))` | Reactive `` & SEO tags management. | +| **useHydration** | `useHydration(eventKey)` | Fine-grained SSR hydration control. | +| **useId** | `const id = useId()` | Generates DOM-safe unique IDs in setup. | +| **useInterval** | `useInterval(callback, 1000)` | Reactive `setInterval` that cleans up automatically. | +| **useTimeout** | `useTimeout(fn, 500)` | Reactive one-shot timer. | +| **useTick** | `await useTick()` | Waits one Vue render tick. | +| **useRenderCache** | `const vnode = useRenderCache(key, factory)` | Memoises expensive render output. | +| **useSplitAttrs** | `const {root, input} = useSplitAttrs(attrs)` | Splits `attrs` between wrapper & native input. | + +Import from `quasar`: + +```js +import { useQuasar, useMeta /* … */ } from 'quasar' +``` diff --git a/.local/aider/projects/runcats/read/docs/quasar-directives.md b/.local/aider/projects/runcats/read/docs/quasar-directives.md new file mode 100644 index 0000000..6c4f236 --- /dev/null +++ b/.local/aider/projects/runcats/read/docs/quasar-directives.md @@ -0,0 +1,17 @@ +### Vue directives — “v-” helpers + +| Directive | Mini usage | What it’s for | +| ------------------ | -------------------------------------- | ------------------------------------------------------ | +| **v-close-popup** | `` | Click hits the nearest `QDialog`/`QMenu` so it closes. | +| **v-intersection** | `
…` | Fires when element enters / leaves the viewport. | +| **v-ripple** | `
` | Material-style click ripple on any element. | +| **v-mutation** | `
` | Watches DOM mutations inside the element. | +| **v-morph** | `
` | Smoothly morphs element A into element B. | +| **v-scroll** | `
` | Emits scroll position while container/page scrolls. | +| **v-scroll-fire** | `
` | Triggers handler once when scrolled past threshold. | +| **v-touch-pan** | `
` | Pointer/touch pan gestures (x, y, both). | +| **v-touch-swipe** | `
` | Swipe detection with direction modifiers. | +| **v-touch-hold** | `
` | Long-press / right-click hold handler. | +| **v-touch-repeat** | `
` | Auto-repeats handler while pointer is held down. | + +These directives ship with Quasar and require **no extra imports**—just drop them in a template. diff --git a/.local/aider/projects/runcats/read/docs/quasar-plugins.md b/.local/aider/projects/runcats/read/docs/quasar-plugins.md new file mode 100644 index 0000000..220bffd --- /dev/null +++ b/.local/aider/projects/runcats/read/docs/quasar-plugins.md @@ -0,0 +1,18 @@ +### Quasar plugins — global $q services + +| Plugin | Quick call | Purpose | +|--------|-----------|---------| +| **Dialog** | `$q.dialog({ message:'Delete?' })` | Programmatic modal dialogs / prompts. | +| **Notify** | `$q.notify('Saved!')` | Toast / snackbar notifications. | +| **Loading** | `$q.loading.show()` / `.hide()` | Blocking spinner overlay. | +| **LoadingBar** | `$q.loadingBar.start()` / `.stop()` | Top-edge progress bar (XHR, route changes). | +| **BottomSheet** | `$q.bottomSheet({ message:'Pick', actions:[…] })` | Mobile-style action sheet. | +| **AddressbarColor** | `$q.addressbar.set('#027be3')` | Sets mobile browser address-bar color. | +| **AppFullscreen** | `$q.fullscreen.toggle()` | Enters/exits browser Fullscreen API. | +| **AppVisibility** | `$q.visibility.isVisible` | Reacts to browser tab visibility changes. | +| **Cookies** | `$q.cookies.set('token', val)` | Universal (SSR + client) cookie utilities. | +| **Dark** | `$q.dark.set(true)` | Runtime light/dark-mode switch. | +| **LocalStorage / SessionStorage** | `$q.localStorage.getItem('user')` | Safe wrappers around `window.localStorage` / `sessionStorage`. | +| **Meta** | `$q.meta.setMeta({ title:'App' })` | Non-composable way to manage `` tags. | + +Plugins are auto-installed; access them through **`$q`** (option API) or via `useQuasar()` in the composition API.