4e7dc36ecc
- Create PersonCard.vue for individual person entity display * Handles selection states and conflict detection * Includes time icon overlay for contacts * Emits person-selected events - Create ProjectCard.vue for individual project entity display * Shows project icon, name, and issuer information * Handles project selection events * Reusable for project listings - Create EntitySummaryButton.vue for selected entity display * Supports both person and project entities * Shows editable vs locked states with appropriate icons * Handles edit-requested events for step 2 functionality - Create AmountInput.vue for numeric input with controls * Increment/decrement buttons with validation * Configurable min/max values and step size * v-model compatible for form integration * Proper input validation and boundary checking - Add comprehensive GiftedDialog-Decomposition-Plan.md * Documents complete 4-phase refactoring strategy * Provides implementation progress tracking * Includes integration examples and migration strategy * Outlines benefits: maintainability, testability, reusability This Phase 1 extraction creates reusable display components that can be immediately integrated into GiftedDialog and used throughout the app. The incremental approach reduces refactoring risk while preparing for future Pinia state management integration. Next: Phase 2 - Extract layout components (EntityGrid, SpecialEntityCard)
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
