a559fd3318
- Create EntityGrid.vue for unified entity grid layout * Responsive grid layout for people and projects * Integrates special entities (You, Unnamed) seamlessly * Conflict detection integration with prop-based checker * Empty state messaging based on entity type * Show All navigation with query parameter support * Event delegation for all entity selection types * Configurable display limits and grid columns - Create SpecialEntityCard.vue for special entity handling * Handles 'You' and 'Unnamed' entity types * FontAwesome icon integration with configurable styling * Conflict state handling with visual feedback * Entity-type-specific color schemes (blue for You, gray for Unnamed) * Emits structured events with entity data - Create ShowAllCard.vue for navigation functionality * Router-link integration with query parameter passing * Consistent visual styling with other entity cards * Hover effects and animations * Maintains context through configurable route params - Update GiftedDialog-Decomposition-Plan.md * Mark Phase 2 as completed * Add comprehensive integration examples * Update component specifications with actual props/emits * Add EntityGrid, SpecialEntityCard, and ShowAllCard usage patterns * Update project status and next steps Phase 2 creates reusable layout components that can replace the complex grid logic in GiftedDialog. The EntityGrid component provides a clean API for entity selection while maintaining all existing functionality. Components: 7 total (4 Phase 1 + 3 Phase 2) Next: Integration phase - Update GiftedDialog to use new components
TimeSafari.app - Crowd-Funder for Time - PWA
Time Safari allows people to ease into collaboration: start with expressions of gratitude and expand to crowd-fund with time & money, then record and see the impact of contributions.
Roadmap
See project.task.yaml for current priorities. (Numbers at the beginning of lines are estimated hours. See taskyaml.org for details.)
Setup & Building
Quick start:
- For setup, we recommend pkgx, which installs what you need (either automatically or with the
devcommand). Core dependencies are typescript & npm; when building for other platforms, you'll need other things such as those in the pkgx.yaml & BUILDING.md files.
npm install
npm run dev
See BUILDING.md for more details.
Tests
See TESTING.md for detailed test instructions.
Icons
Application icons are in the assets directory, processed by the capacitor-assets command.
To add a Font Awesome icon, add to main.ts and reference with font-awesome element and icon attribute with the hyphenated name.
Other
Reference Material
-
Notifications can be type of
toast(self-dismiss),info,success,warning, anddanger. They are done via notiwind and set up in App.vue. -
If you are deploying in a subdirectory, add it to
publicPathin vue.config.js, eg:publicPath: "/app/time-tracker/",
Code Organization
The project uses a centralized approach to type definitions and interfaces:
src/interfaces/- Contains all TypeScript interfaces and type definitionsdeepLinks.ts- Deep linking type system and Zod validation schemasgive.ts- Give-related interfaces and type definitionsclaims.ts- Claim-related interfaces and verifiable credentialscommon.ts- Shared interfaces and utility types- Other domain-specific interface files
Key principles:
- All interfaces and types are defined in the interfaces folder
- Zod schemas are used for runtime validation and type generation
- Domain-specific interfaces are separated into their own files
- Common interfaces are shared through
common.ts - Type definitions are generated from Zod schemas where possible
Kudos
Gifts make the world go 'round!
- WebStorm by JetBrains for the free open-source license
- Máximo Fernández for the 3D code and explanatory post
- Many tools & libraries such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
- Bush 3D model
- Forest floor image
- Time Safari logo assisted by DALL-E in ChatGPT
- DiceBear and Avataaars for human-looking identicons
- Some gratitude prompts thanks to Develop Good Habits
