Skip to content

feat: interfacer gui big rework#825

Draft
phoebus-84 wants to merge 30 commits intomainfrom
dtec_new_layout
Draft

feat: interfacer gui big rework#825
phoebus-84 wants to merge 30 commits intomainfrom
dtec_new_layout

Conversation

@phoebus-84
Copy link
Copy Markdown
Collaborator

  • feat: ✨ Epic 1 - Design System Foundation
  • feat: ✨ Epic 2 - Navigation and Layout Redesign
  • feat: ✨ Epic 3 - Catalog Pages (Designs, Products, Services)
  • feat: ✨ redesign project detail page with new layout
  • feat: ✨ Epic 5 - Profile Page Redesign with new layout and tabs
  • feat: ✨ Epic 6 - Creation Forms Redesign with new design tokens
  • chore: 🔧 close epics 7-9 in bd tracker
  • feat: ✨ add creation form access from profile page (cxo.7)
  • fix: 🐛 align catalog titles, stats & placeholders with prototype (cxo.1, cxo.2, cxo.3)
  • feat: ✨ add Show All dropdown to catalog toolbar (cxo.5)
  • feat: ✨ add missing sidebar filters (cxo.4)
  • feat: ✨ rename My list to Saved Lists, add Track Record nav item (cxo.8)
  • feat: ✨ enhance project cards with requires/nearby and based-on links (cxo.6)
  • feat: ✨ enhance detail page sidebar and add product passport section (cxo.9)

- Add CSS design tokens (styles/theme.css) with 130+ --ifr-* custom properties
- Extend tailwind.config.js with ifr namespace (colors, surfaces, shadows, radii)
- Add Space Grotesk + IBM Plex Sans fonts
- Create EntityTypeIcon component with SVG paths from prototype
- Update ProjectTypeRenderProps/Chip/RoundIcon to use design tokens
- Add DPP entity type across the codebase
- Create shared UI primitives: TagBadge, StatCard, ToggleSwitch,
  ToolbarDropdown, DetailSection, FilterSection, CheckboxFilter

Epic: interfacer-gui-60u (closed)
- Create InterfacerLogo SVG component from prototype
- Redesign Topbar: hamburger, logo, entity-type nav links, pill search, avatar
- Create NavigationMenu drawer with Explore/My Account/Support sections
- Create UserDropdown with notifications, profile links, logout
- Update Layout.tsx: remove DaisyUI drawer, use flex column layout
- Update SearchLayout.tsx: remove DaisyUI drawer

Subtasks: interfacer-gui-0i2.1, .2, .3
- Add ProjectDetailNew component with hero image gallery, collapsible
  sections, and variant-aware sidebar
- Breadcrumb navigation, type badge header, star/share/save actions
- Equipment, materials, and location sections from classified tags
- Responsive layout with desktop sidebar and mobile fallback
- Reuse existing FetchProjectLayout data layer and DetailSection
- Update pages/project/[id]/index.tsx to use new component
- Add per-tab CTA section with 'Create a new [type]' button
- Add per-tab '+ Create New' button in search toolbar
- Add Sort by dropdown (Latest/Oldest)
- Add per-tab search with type-specific placeholders
- Add profile subtitle for owners
- Minor import cleanups in ProjectDetailNew, project/[id]/index
….1, cxo.2, cxo.3)

- Products title: 'Products & Manufactured Goods' → 'Open Hardware Products'
- Designs/Products/Services descriptions: align with prototype text
- Products stat: 'Based on Designs' → 'Available Now', 'Products' → 'Total Products'
- Services stats: 'Active Services' → 'Total Services', 'Locations' → 'Service Providers'
- Search placeholders: expanded to match prototype (e.g. 'Search designs, makers, machines, materials...')
- Designs: Manufacturability radio group (All/Can be manufactured/In progress)
- Products: Power Requirement range slider, Repairability toggle
- Services: Availability checkbox filter
…(cxo.9)

- Product sidebar: price & availability, Visit Store button, Based On design link
- Replace Save/Share with Save to My Projects + Watch Project links
- Use 'Manufactured by' label for products instead of 'Created by'
- Add DPP (Product Passport) collapsible section for products with metadata
- Remove unused ShareIcon import
@phoebus-84 phoebus-84 marked this pull request as draft March 17, 2026 09:44
- Fix projects not loading: skip=true caused premature empty state,
  added isFilterReady guard so loading skeleton shows until specs load
- Fix filters: CatalogLayout now reads ?tags= URL param and merges
  into classifiedAs for GraphQL query
- Hero sections: gradient backgrounds (green/blue/purple at 83deg),
  white text, horizontal layout (title left, stats right)
- HeroStatCard: compact 140x56px prototype style, no icon badges
- Service card footer: service type badge + location + Available status
- Design card nearby: MapPin + nearby text + ExternalLink icon
- Simplified catalog page imports (removed unused icon imports)
- Add SERVICE_TYPE, AVAILABILITY, LICENSE to TAG_PREFIX constants
- Create ServiceFiltersStep for service creation form
- Wire service/availability/license tags into useProjectCRUD
- Align CatalogFilterSidebar with tagging.ts shared options
- Remove bin from FETCH_RESOURCES query (fix 26MB JSON truncation)
- Add /api/image/[hash] proxy to decode base64 from zenflows API
- Update findProjectImages to use proxy for hash-based image URLs
- New DualRangeSlider component (reusable dual-handle range slider)
- CatalogFilterSidebar: yellow Apply Filters button, CO2/Energy/Power sliders
- ProjectCardNew: type badge collapse/expand on hover, action links on hover

Closes: interfacer-gui-vrl.8, .12, .14, .16
…, filter sections

- ProjectDetailNew: DPP display split into collapsible subsections with colored icons
- EnvironmentalSection: Energy and CO2 fields now use RangeSliderField
- RangeSliderField: new form component (single-handle slider with react-hook-form)
- MachinesStep: selected machines displayed as yellow pills instead of Polaris Tag
- CatalogFilterSidebar: products variant adds Machines Needed and Manufacturability

Closes: interfacer-gui-vrl.13, .18, .17, .9
- .23: Make based-on-design card clickable with Link, improve sizing and shadow
- .7: Add Search Radius pill buttons (10/25/50/100/250km) to services Location filter
- lib/dpp-types.ts: TypeScript types matching interfacer-dpp Go model
  (TransformedValue, DppDocument, all section types, API response types)
- lib/dpp.ts: useDppApi hook with CRUD operations, file upload,
  DID-signed requests (did-sign/did-pk headers via zenroom)
- Add updateDppStatus, addAttachment, deleteAttachment methods
- Update listDpps to use { dpps, total } response format
- Add DppStatus import for status transitions
- Create /dpps/new page with multi-step DPP creation form
- CreateDppForm: batch type/ID identification, 12 collapsible DPP sections
- Reuses existing DPPStep section components and field components
- Sticky sidebar nav with scroll-spy, cancel/create submit footer
- Add DPPs tab to ProfilePageNew with REST API data fetching
- DppsTabContent: table view with product name, batch/serial, type, status badges
- Search/sort toolbar matching existing tab patterns

ie5.4, ie5.5
…redirect

- Remove DPP step, schema, and submission logic from CreateProjectForm
- Remove DPP section from projectSections navigation
- Gut unused DPPStep.tsx component (sub-modules still used by standalone CreateDppForm)
- Replace /create/project hub page with redirect to user profile
- Change back button in CreateProjectLayout to navigate to profile

Closes: interfacer-gui-4i9, interfacer-gui-eqb
- Add 'Select product' section with searchable dropdown to DPP creation form
- Send productId in DPP creation payload
- Send x-user-id header (ULID) so backend can filter DPPs by user
- Submit button disabled until a product is selected
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