chris/dotfiles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add aider prompts for runcats project

Browse Source
This commit is contained in:
Chris
2025-06-20 23:11:38 +01:00
parent 27440c772b
commit 719eea32ce
7 changed files with 397 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.local/aider/projects/runcats/aider.env Normal file
View File

@@ -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"

6
.local/aider/projects/runcats/read/CONVENTIONS.md Normal file
View File

@@ -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.

52
.local/aider/projects/runcats/read/PROMPT.md Normal file
View File

@@ -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)

275
.local/aider/projects/runcats/read/docs/quasar-components.md Normal file
View File

@@ -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
### `<q-layout>`
```vue
<q-layout view="hHh lpR fFf" container>
<q-header elevated>…</q-header>
<q-drawer v-model="left" show-if-above>…</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
```
**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`.
---
### `<q-header>` / `<q-footer>`
```vue
<q-header elevated reveal height-hint="56">…</q-header>
```
Common props: `elevated`, `reveal`, `bordered`, `height-hint`; events `@reveal`, `@hide`.
### `<q-drawer>`
```vue
<q-drawer v-model="left" side="left" overlay behavior="desktop" width="260">
…
</q-drawer>
```
Important props: `v-model`, `side`, `overlay`, `behavior`, `width`, `mini`, `mini-to-overlay`, `bordered`.
### `<q-page>` & friends
`<q-page>` goes inside `<q-page-container>` and auto-offsets for the header/footer/drawers. Add
`<q-page-sticky>` or `<q-page-scroller>` when you need floating buttons or “back-to-top”.
---
## 2. Action components
### `<q-btn>`
```vue
<q-btn color="primary"
icon="save"
label="Save"
outline
:loading="saving"
@click="save" />
```
| 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. | |
### `<q-tabs>` + `<q-tab>` / `<q-route-tab>`
```vue
<q-tabs v-model="tab" align="justify" dense>
<q-tab name="info" icon="info" label="Info"/>
<q-tab name="posts" icon="article" label="Posts"/>
</q-tabs>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="info"> … </q-tab-panel>
<q-tab-panel name="posts"> … </q-tab-panel>
</q-tab-panels>
```
Key props: `v-model`, `align`, `breakpoint`, `vertical`, `dense`, `shrink`, `class`. `QTab` adds `name`, `icon`, `label`, `alert`, `badge`.
---
## 3. Forms & inputs
### `<q-input>`
```vue
<q-input v-model="email"
type="email"
label="E-mail"
outlined
clearable
:rules="[val => !!val || 'Required']"/>
```
Essential props: `type`, `label`, `placeholder`, `outlined|filled|borderless|rounded`, `dense`, `clearable`, `prefix`, `suffix`, `hint`, `error`, `error-message`, `debounce`, `rules`, `lazy-rules`.
### `<q-select>`
```vue
<q-select v-model="country"
:options="countries"
option-label="name"
option-value="code"
emit-value map-options
filled clearable />
```
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`.
### `<q-form>`
```vue
<q-form @submit.prevent="submit" ref="f">
…
</q-form>
```
`@submit`, `@reset` events; imperative methods `validate()`, `resetValidation()`, `getValidationComponents()`.
#### Quasar Form-Input Components
| Component | Minimal syntax example | What it’s for |
| ---------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| **QField** | `vue<br><q-field label="Label"><template #control>…</template></q-field>` | Gives any custom control a Quasar-style label, hint, error/validation and dense/outlined looks. |
| **QInput** | `vue<br><q-input v-model="text" outlined label="Name" />` | Text / number / email etc. input with masks, debounced `v-model`, built-in rules & slots. |
| **QSelect** | `vue<br><q-select v-model="val" :options="opts" clearable />` | Single- or multi-select dropdown / autocomplete (can be filterable, chip-style, virtual-scrolled). |
| **QCheckbox** | `vue<br><q-checkbox v-model="agree" label="I agree" />` | Standard checkbox with tri-state (checked / unchecked / indeterminate) support. |
| **QRadio** | `vue<br><q-radio v-model="gender" val="M" label="Male" />` | Mutually-exclusive option picker for small sets. |
| **QToggle** | `vue<br><q-toggle v-model="on" label="Enabled" />` | Mobile-style ON/OFF switch — boolean input with accessible keyboard support. |
| **QOptionGroup** | `vue<br><q-option-group v-model="picked" :options="opts" type="checkbox" />` | Renders a whole list of radios / checkboxes / toggles in one shot, keeping models in sync. |
| **QBtnToggle** | `vue<br><q-btn-toggle v-model="view" :options="opt" toggle-color="primary" />` | Segmented-control alternative to radios, but looking like grouped buttons. |
| **QSlider** | `vue<br><q-slider v-model="age" :min="0" :max="100" />` | Single-thumb numeric slider with discrete or continuous steps. |
| **QRange** | `vue<br><q-range v-model="range" :min="0" :max="100" />` | Dual-thumb range selector for min/max numeric values. |
| **QKnob** | `vue<br><q-knob v-model="vol" :max="100" />` | Rotary dial (built on `QCircularProgress`) for coarse or fine-grained numeric input. |
| **QRating** | `vue<br><q-rating v-model="stars" :max="5" />` | Star (or custom icon) rating picker that can be readonly or interactive. |
| **QFile** | `vue<br><q-file v-model="files" multiple label="Choose files" />` | File-chooser that returns `FileList` or `Array<File>` and shows previews/count. |
| **QUploader** | `vue<br><q-uploader url="/api/upload" label="Upload" />` | Drag-and-drop or click-to-upload component with queue, retry and progress bars. |
| **QColor** | `vue<br><q-color v-model="hex" format="hex" />` | Inline or pop-up color picker with HEX/RGB/HSV and palette presets. |
| **QDate** | `vue<br><q-date v-model="day" mask="YYYY-MM-DD" />` | Calendar date picker (Gregorian & Persian); supports ranges and shortcuts. |
| **QTime** | `vue<br><q-time v-model="time" format24h />` | Clock-face or input-field time picker with seconds, intervals and AM/PM/24-h modes. |
| **QEditor** | `vue<br><q-editor v-model="html" min-height="10rem" />` | 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
### `<q-card>`
```vue
<q-card flat bordered class="my-card">
<q-card-section class="text-h6">Title</q-card-section>
<q-card-section>Body content…</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Close" v-close-popup/>
</q-card-actions>
</q-card>
```
Useful props: `flat`, `bordered`, `square`, `dark`. Slot helpers: `q-card-section`, `q-card-actions`, `q-card-media`.
### `<q-table>`
```vue
<q-table
:rows="rows"
:columns="columns"
row-key="id"
selection="multiple"
:pagination.sync="paged"
:filter="filter"
:loading="busy" />
```
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
### `<q-dialog>`
```vue
<q-dialog v-model="show" persistent transition-show="scale">
<q-card style="min-width: 350px">
…content…
</q-card>
</q-dialog>
```
Main props: `v-model`, `persistent`, `maximized`, `full-width`, `full-height`, `position`, `transition-show`, `transition-hide`, `no-backdrop-dismiss`. Events: `@show`, `@hide`.
### `<q-inner-loading>`
```vue
<div class="relative-position">
<q-inner-loading :showing="busy" />
…content…
</div>
```
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** | `<q-ajax-bar position="top" indeterminate />` | Thin loading bar that auto-shows while Ajax/fetch calls run. |
| **QAvatar** | `<q-avatar size="40px" icon="person" />` | Circular/square avatar that holds an icon, text or image. |
| **QBadge** | `<q-badge color="red" floating>3</q-badge>` | Tiny counter / status dot to highlight numbers or states. |
| **QBanner** | `<q-banner class="bg-warning">New version available!</q-banner>` | Prominent in-page notice with optional actions. |
| **QBar** | `<q-bar class="bg-grey-2">…</q-bar>` | Ultra-slim horizontal bar—handy in headers, cards or Electron apps. |
| **QBreadcrumbs** | `<q-breadcrumbs><q-breadcrumbs-el label="Home"/></q-breadcrumbs>` | Shows current navigation hierarchy. |
| **QBtnDropdown** | `<q-btn-dropdown label="More"><q-list>…</q-list></q-btn-dropdown>` | Split button that reveals a menu of extra actions. |
| **QBtnGroup** | `<q-btn-group><q-btn flat label="A"/><q-btn label="B"/></q-btn-group>` | Visually groups buttons, sharing borders/radius. |
| **QCarousel** | `<q-carousel v-model="slide"><q-carousel-slide name="1" :img-src="url"/></q-carousel>` | Swipeable / auto-playing image or content slider. |
| **QChatMessage** | `<q-chat-message sent text="Hi!" />` | Chat bubble for messenger-style UIs. |
| **QChip** | `<q-chip icon="tag" removable>Label</q-chip>` | Small pill for tags, filters, contacts, etc. |
| **QCircularProgress** | `<q-circular-progress indeterminate size="40px" />` | Circular spinner / progress indicator. |
| **QExpansionItem** | `<q-expansion-item label="Details">Hidden stuff</q-expansion-item>` | Accordion row that reveals extra content when expanded. |
| **QFab** | `<q-fab icon="add"><q-fab-action icon="edit"/></q-fab>` | Floating action button plus optional speed-dial actions. |
| **QIcon** | `<q-icon name="mdi-home" />` | Embeds Material, MDI, FontAwesome (and more) icons. |
| **QImg** | `<q-img src="banner.jpg" ratio="16/9" />` | Optimised image with lazy-load and blur-up placeholder. |
| **QInfiniteScroll** | `<q-infinite-scroll @load="fetchMore">…</q-infinite-scroll>` | Auto-loads more data when scrolled near bottom. |
| **QIntersection** | `<q-intersection transition="scale">…</q-intersection>` | Emits events when element enters/leaves viewport. |
| **QLinearProgress** | `<q-linear-progress value="0.6" color="primary" />` | Horizontal progress bar, determinate or indeterminate. |
| **QList / QItem** | `<q-list bordered><q-item><q-item-section>Row</q-item-section></q-item></q-list>` | Vertical list rows with rich slots; ideal for menus or data lists. |
| **QMarkupTable** | `<q-markup-table flat :rows="rows" :columns="cols" />` | Static HTML table—lightweight alternative to `QTable`. |
| **QMenu** | `<q-menu anchor="bottom right"><q-list>…</q-list></q-menu>` | Context pop-over anchored to any element. |
| **QNoSsr** | `<q-no-ssr><client-only-widget/></q-no-ssr>` | Renders slot only on client (skips SSR). |
| **QPopupEdit** | `vue<br><q-popup-edit v-model="qty"><q-input type="number" /></q-popup-edit>` | “Click-to-edit” helper: turns any label or cell into an inline editable pop-up. |
| **QResizeObserver** | `<q-resize-observer @resize="onSize" />` | Fires event whenever the parent DOM element changes size. |
| **QScrollObserver** | `<q-scroll-observer @scroll="onScroll" />` | Emits position & direction as the page/container scrolls. |
| **QPagination** | `<q-pagination v-model="page" :max="10" />` | Page number / navigation control. |
| **QParallax** | `<q-parallax src="mountain.jpg" height="300" />` | Hero banner with parallax scroll effect. |
| **QPopupProxy** | `<q-popup-proxy anchor="bottom middle">Popover</q-popup-proxy>` | Generic anchored pop-up used by many pickers/menus. |
| **QPullToRefresh** | `<q-pull-to-refresh @refresh="reload" />` | Mobile swipe-down-to-refresh wrapper. |
| **QResponsive** | `<q-responsive :ratio="4/3"><img … /></q-responsive>` | Maintains aspect ratio for embedded content. |
| **QScrollArea** | `<q-scroll-area style="height:200px">…</q-scroll-area>` | Custom-styled scrollable container. |
| **QSeparator** | `<q-separator inset />` | Horizontal/vertical divider line. |
| **QSkeleton** | `<q-skeleton type="text" width="70%" />` | Placeholder shimmer for loading states. |
| **QSlideItem** | `<q-slide-item @right="del"><template #right>Delete</template></q-slide-item>` | Mobile list-item swipe actions (e.g. mail apps). |
| **QSlideTransition** | `<q-slide-transition><div v-show="open">Panel</div></q-slide-transition>` | Height/width slide animation wrapper. |
| **QSpace** | `<q-space />` | Flexbox spacer that takes up remaining space. |
| **QSpinner** | `<q-spinner-hourglass size="40px" />` | Dozens of SVG/CSS loaders beyond progress bars. |
| **QSplitter** | `<q-splitter v-model="split"><template #before>…</template><template #after>…</template></q-splitter>` | Draggable resizer between two panes. |
| **QStepper** | `<q-stepper v-model="step"><q-step name="1" title="A"/></q-stepper>` | Wizard / multi-step process tracker. |
| **QTimeline** | `<q-timeline><q-timeline-entry title="Start" /></q-timeline>` | Vertical chronological milestones. |
| **QToolbar** | `<q-toolbar><q-toolbar-title>Title</q-toolbar-title></q-toolbar>` | App/header bar hosting nav and actions. |
| **QTooltip** | `<q-tooltip anchor="bottom middle">Help text</q-tooltip>` | Hover/click tooltip—rich content supported. |
| **QTree** | `<q-tree :nodes="data" node-key="id" />` | Expandable/collapsible hierarchical data viewer. |
| **QVideo** | `<q-video src="https://youtu.be/abc" ratio="16/9" />` | Responsive embedded video player (HTML5, YouTube, Vimeo). |
| **QVirtualScroll** | `<q-virtual-scroll :items="bigList" :item-size="48" v-slot="item">{{ item }}</q-virtual-scroll>` | 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.

21
.local/aider/projects/runcats/read/docs/quasar-composables.md Normal file
View File

@@ -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 `<head>` & 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'
```

17
.local/aider/projects/runcats/read/docs/quasar-directives.md Normal file
View File

@@ -0,0 +1,17 @@
### Vue directives — “v-” helpers
| Directive | Mini usage | What it’s for |
| ------------------ | -------------------------------------- | ------------------------------------------------------ |
| **v-close-popup** | `<q-btn v-close-popup …>` | Click hits the nearest `QDialog`/`QMenu` so it closes. |
| **v-intersection** | `<div v-intersection="onEnter">…` | Fires when element enters / leaves the viewport. |
| **v-ripple** | `<div v-ripple>` | Material-style click ripple on any element. |
| **v-mutation** | `<div v-mutation="onMut">` | Watches DOM mutations inside the element. |
| **v-morph** | `<div v-morph="target">` | Smoothly morphs element A into element B. |
| **v-scroll** | `<div v-scroll="onScroll">` | Emits scroll position while container/page scrolls. |
| **v-scroll-fire** | `<div v-scroll-fire="cfg">` | Triggers handler once when scrolled past threshold. |
| **v-touch-pan** | `<div v-touch-pan.horizontal="onPan">` | Pointer/touch pan gestures (x, y, both). |
| **v-touch-swipe** | `<div v-touch-swipe.left="onSwipe">` | Swipe detection with direction modifiers. |
| **v-touch-hold** | `<div v-touch-hold:500="onHold">` | Long-press / right-click hold handler. |
| **v-touch-repeat** | `<div v-touch-repeat="onRepeat">` | Auto-repeats handler while pointer is held down. |
These directives ship with Quasar and require **no extra imports**—just drop them in a template.

18
.local/aider/projects/runcats/read/docs/quasar-plugins.md Normal file
View File

@@ -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 `<head>` tags. |
Plugins are auto-installed; access them through **`$q`** (option API) or via `useQuasar()` in the composition API.