Skip to content

feat: new catalog page#802

Merged
phoebus-84 merged 40 commits intomainfrom
new_catlog_page
Jan 8, 2026
Merged

feat: new catalog page#802
phoebus-84 merged 40 commits intomainfrom
new_catlog_page

Conversation

@phoebus-84
Copy link
Collaborator

@phoebus-84 phoebus-84 commented Dec 10, 2025

No description provided.

- Created /pages/products.tsx with full layout structure
- Built ProductsHeader component with Figma design tokens
- Added GraphQL query for fetching product statistics
- Integrated stats cards showing Total Projects, Projects Available, and Manufacturers
- Applied IBM Plex Sans and Space Grotesk typography from design system
- Used Primary (#036A53), Highlight (#F1BD4D), and Surface (#FFFFFF) colors
- Added responsive layout with sidebar and main content areas
- Created productsProps.json translation file

Issues completed: interfacer-gui-yig.1, interfacer-gui-yig.2
- Created ProductsFilters component with collapsible sections
- Added filters for: Manufacturability, Machines, Materials, Location, Tags, Power, Replicability
- Implemented URL query param sync for all filter states
- Added active filter count badge
- Integrated SearchLocation and SelectTags components
- Added Apply/Reset buttons with proper styling
- Used Figma design tokens (colors, fonts, borders)
- All filter sections are collapsible with smooth transitions
- Added comprehensive translations for all filter options

Issue completed: interfacer-gui-yig.3
- Imported ProductsSearchBar in products.tsx
- Replaced placeholder search input with ProductsSearchBar
- Search now syncs with URL query params
- Added clear button functionality
- Applied Figma design tokens

Closes interfacer-gui-yig.5
- Extended useFilters hook to support search (q) and location params
- Search uses orName filter for project name matching
- Location uses orNote as temporary workaround
- Tags, conformsTo, primaryAccountable already supported
- Created comprehensive documentation in docs/PRODUCTS_FILTERING.md
- Documented limitations for metadata-based filters
- Metadata filters (machines, materials, power, etc.) await backend support

Closes interfacer-gui-yig.7
- Added functional Show dropdown filtering by project type (Designs/Products/Services)
- Show filter maps to conformsTo GraphQL parameter through useFilters hook
- Added Sort dropdown with URL param sync (Latest/Oldest/Most Liked)
- Sort functionality awaits backend GraphQL sorting support
- Extended useFilters hook to handle show filter
- Added translation strings for new dropdown options
- Styled with Figma design tokens

Closes interfacer-gui-yig.6
… resources

- Created comprehensive documentation of current vs new architecture
- DPP changes from metadata ULID to cited economic resource
- Machines introduced as cited economic resources
- Detailed GraphQL changes, UI updates from Figma design
- Implementation plan broken into 11 tasks across 3 phases
- Epic interfacer-gui-9lv with P0 priority

Closes interfacer-gui-9lv.1
See history/ARCHITECTURE_REFACTOR.md for full details
- Created lib/resourceSpecs.ts with placeholder ResourceSpec IDs
- Added CREATE_DPP_RESOURCE GraphQL mutation
- Refactored useProjectCRUD to:
  - Create DPP as EconomicResource (not metadata)
  - Cite DPP resource from project via economic event
  - Remove dpp field from metadata JSON
- Added .env.resourcespecs.example for backend spec IDs
- Uses placeholders until backend provides actual ULIDs

Breaking change: DPP no longer in metadata, now cited resource
Closes interfacer-gui-9lv.2
- Changed from multiple ResourceSpecs (one per machine type)
  to single RESOURCE_SPEC_MACHINE for all machines
- Individual machines (Laser Cutter, 3D Printer, etc.) are now
  EconomicResource instances conforming to RESOURCE_SPEC_MACHINE
- Machines differentiated by name field, not separate specs
- Updated MACHINE_TYPES to just display names + icons
- Updated .env.resourcespecs.example accordingly

This aligns with ValueFlows model: one spec, many instances
- Closed interfacer-gui-9lv.3 (machine spec definition)
- Created 4 subtasks:
  - interfacer-gui-9lv.3.1: Query/create machine instances (P0)
  - interfacer-gui-9lv.3.2: Add citation mutation (P0)
  - interfacer-gui-9lv.3.3: Add machines to form types (P1)
  - interfacer-gui-9lv.3.4: Implement citation in handleProjectCreation (P1)

Epic progress: 3/11 tasks completed (27%)
- Add QUERY_MACHINES GraphQL query to QueryAndMutation.ts
- Create MachinesStep.tsx with types, schema, and toggle UI
- Extend CreateProjectValues interface with machines field
- Add machinesStepDefaultValues and machinesStepSchema to form
- Machines UI placeholder for task interfacer-gui-9lv.4

Refs: interfacer-gui-9lv.3.3
- Loop through formData.machines.machines array in handleProjectCreation
- Create cite event for each machine using CITE_PROJECT mutation
- Add devLog statements for success/error tracking
- Machines cited after DPP but before points assignment

Refs: interfacer-gui-9lv.3.4
- Create SearchMachines.tsx with autocomplete search functionality
- Query machines via QUERY_MACHINES filtered by RESOURCE_SPEC_MACHINE
- Display machine options with emoji icons based on machine type
- Update MachinesStep.tsx with SearchMachines integration
- Display selected machines as removable chips using Polaris Tag
- Track selected machines with IDs and names for display
- Exclude already selected machines from search results

Refs: interfacer-gui-9lv.4
- Import MachinesStep in projectSections.tsx
- Add machines section to projectSections array
- Section appears in all project types with edit page route
- Now visible in CreateProjectForm UI

Refs: interfacer-gui-9lv.4
- Add newInventoriedResource parameter with name and note fields
- Move name from event.note to newInventoriedResource.name
- Add note parameter to mutation and pass description
- Fixes 'name can't be blank' error from backend
- Follows same pattern as CREATE_PROJECT mutation

Refs: interfacer-gui-9lv.12
- Add ProjectType.MACHINE to components/types enum
- Add specProjectMachine to QUERY_PROJECT_TYPES GraphQL query
- Add MACHINE mapping in useProjectCRUD projectTypes
- Update InstanceSpecs and GetProjectTypesQuery types
- Backend needs to provide specProjectMachine ResourceSpec

Refs: interfacer-gui-9lv.13
- Query economic events where action='cite' and inputOf=processId
- Returns resourceInventoriedAs with metadata, conformsTo for filtering
- Will be used to extract DPP ULID and display cited machines
- Enables proper retrieval of DPP from cited resource metadata

Refs: interfacer-gui-9lv.14
…tings

- Add MACHINE project type enum and UI routes
- Create handleMachineCreation to create machine EconomicResources
- Add CREATE_MACHINE_RESOURCE GraphQL mutation
- Implement useProjectSpecs hook to get project type IDs
- Filter ProjectsCards/ProjectsTable/ProjectsMaps to show only projects
- Exclude DPP and machine resources from listings using conformsTo filter
- Update form sections to support MACHINE type
- Make specProjectMachine optional until backend supports it

Closes: interfacer-gui-9lv.13, interfacer-gui-9lv.14, interfacer-gui-9lv.15
- Add QUERY_TRACE_DPP GraphQL query to ProjectTabs
- Implement extractFromTraceDpp recursive function to find dppServiceUlid
- GC1DPP now receives correct ULID from traced DPP resource metadata
- Remove dependency on useCitedResources hook (kept for future use)
- Maintains backward compatibility with legacy metadata.dpp fallback

Closes interfacer-gui-9lv.11 (partially - machines display pending)
- Add QUERY_MACHINES to ProductsFilters component
- Query machine EconomicResources that conform to RESOURCE_SPEC_MACHINE
- Display machines with icons (emoji) from MACHINE_TYPES mapping
- Show loading state while fetching machines
- Fallback to static options when no machines in database
- Store machine IDs (not names) in filter state for future filtering

Part of interfacer-gui-f61.2
- Fixed results count display (was hardcoded to 8)
  - Added onDataLoaded callback to ProjectsCards
  - Dynamic count updates with filters

- Fixed show filter logic in useFilters
  - Changed from appending to replacing conformsTo

- Fixed ProductsHeader stats
  - Removed fake hardcoded values
  - Changed to 2-column layout
  - Shows Total Projects and Filtered Results

Closes: interfacer-gui-f61.1, interfacer-gui-f61.3, interfacer-gui-f61.4, interfacer-gui-f61.6
- Created ProductCardSkeleton component for loading states
- Added error UI with retry button in ProjectsCards
- Implemented custom filtered empty state with clear filters button
- Added skeleton loaders during initial data fetch
- All states styled to match design system

Closes: interfacer-gui-yig.12
- Added mobile filter drawer with backdrop and close button
- Floating filter button for mobile (fixed bottom-right)
- Responsive grid: 1 column (mobile), 2 columns (tablet), 3 columns (desktop)
- Made search and sort controls stack on mobile
- Responsive header text sizes and spacing
- All breakpoints use Tailwind responsive classes

Closes: interfacer-gui-yig.9
- Create complete translation files for German, French, and Italian (45 keys each)
- Add 'Error loading projects' translation key to all languages
- Update ProjectsCards to use t() for error message
- All user-facing strings now properly use translation function
- Translations include filters, stats, buttons, messages, and empty states
- StarCount now clickable button using useSocial hook
- Shows filled/outline star based on isLiked state
- Displays real follower count with formatting (1.2k, 3.9k, etc.)
- Awards IdeaPoints to project owner on star
- Handles authenticated/non-authenticated users
- LicenseFooter uses real license from project data
- Hides license section if no license available

Closes: interfacer-gui-yqb.1, interfacer-gui-yqb.2
- Add fallback empty array to licensesIDs export
- Fixes runtime error in AddLicense component validation
- Ensures yup.string().oneOf() always receives valid array
- Add empty array fallback to prevent undefined licenses
- Ensures .map() is always called on valid array
- Fixes runtime error when loading license autocomplete
- Fix SearchLicense: Parse JSON string import from Next.js
- Fix utils.ts: Handle stringified JSON default export
- Update TechnicalInfoCard (resource): Check project.license first
- Update ProjectLicenses: Display both single and array licenses
- Update TechnicalInfoCard (project): Show license if either type exists
- Close interfacer-gui-yqb.1 and yqb.2 (star and license fixes)
Machines should be linked using 'use' action (contributeToProject) rather than 'cite' action (citeProject) when associating them with a project.
@phoebus-84 phoebus-84 marked this pull request as ready for review January 8, 2026 12:53
@phoebus-84 phoebus-84 merged commit 172c38c into main Jan 8, 2026
1 check passed
@phoebus-84 phoebus-84 deleted the new_catlog_page branch January 8, 2026 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant