Skip to content

Conversation

@rebelchris
Copy link
Contributor

@rebelchris rebelchris commented Jan 23, 2026

Summary

Implements ENG-392 - UI components for the Gear feature in Profile Customization.

Changes

New Files

  • packages/shared/src/graphql/user/gear.ts - GraphQL types, queries, mutations
  • packages/shared/src/features/profile/hooks/useGear.ts - React-query hook
  • packages/shared/src/features/profile/hooks/useGearSearch.ts - Autocomplete hook
  • packages/shared/src/features/profile/components/gear/GearItem.tsx - Item display with sortable wrapper
  • packages/shared/src/features/profile/components/gear/GearModal.tsx - Add modal with autocomplete
  • packages/shared/src/features/profile/components/gear/ProfileUserGear.tsx - Main profile section
  • packages/shared/src/features/profile/components/gear/index.ts - Barrel exports

Modified Files

  • packages/shared/src/lib/query.ts - Added RequestKey.Gear and RequestKey.GearSearch

Features

  • Display gear items on user profile
  • Add new gear with autocomplete suggestions
  • Delete gear with confirmation prompt
  • Drag-and-drop reordering using @dnd-kit
  • Empty state for profile owners

Testing

  1. Navigate to a user profile
  2. Add the <ProfileUserGear user={user} /> component
  3. Test add/delete/reorder functionality

Depends on: dailydotdev/daily-api#3492

Closes ENG-392

Preview domain

https://eng-392-gear-ui.preview.app.daily.dev

Chris added 2 commits January 23, 2026 17:51
Uses existing useEventListener hook to handle keyboard events.
Only triggers when lightbox is open (selectedPhoto is set).
- Add GraphQL types and functions for gear (gear.ts)
  - DatasetGear, Gear, AddGearInput, ReorderGearInput types
  - getGear, searchGear queries
  - addGear, deleteGear, reorderGear mutations
  - GearFragment for shared fields

- Add useGear hook with react-query integration
  - Fetches user gear items
  - Provides add, remove, reorder mutations
  - Returns isOwner flag for authorization

- Add useGearSearch hook for autocomplete functionality

- Add Gear UI components
  - GearItem: Display single gear with delete on hover
  - SortableGearItem: Wrapper for drag-and-drop support
  - GearModal: Add new gear with autocomplete
  - ProfileUserGear: Main component with empty state and DnD reordering

- Add RequestKey.Gear and RequestKey.GearSearch to query.ts
@rebelchris rebelchris requested a review from a team as a code owner January 23, 2026 18:33
@vercel
Copy link

vercel bot commented Jan 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
daily-webapp Ready Ready Preview Jan 23, 2026 6:37pm
1 Skipped Deployment
Project Deployment Review Updated (UTC)
storybook Ignored Ignored Jan 23, 2026 6:37pm

Request Review

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


Chris seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

Comment on lines +1 to +3
export { GearItem, SortableGearItem } from './GearItem';
export { GearModal } from './GearModal';
export { ProfileUserGear } from './ProfileUserGear';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

barrel?

import { searchGear } from '../../../graphql/user/gear';
import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';

export function useGearSearch(query: string) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's mixing functions and arrow functions 🙈

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.

4 participants