Files
devin-ai-integration[bot] eca5fddc10 feat(calcom): reorganize app structure for settings layout (#654)
* feat(calcom): reorganize app structure for multiple layouts

- Move root layout to only contain providers (no sidebar)
- Create (dashboard) route group with dashboard layout for main pages
- Move existing pages (event-types, booking, home) into (dashboard) group
- Create settings layout with dedicated SettingsSidebar component
- Add /settings/my-account/general page with draft content
- Add settings navigation data for sidebar items

This reorganization allows for different layouts between the main
dashboard (with AppSidebar) and settings pages (with SettingsSidebar).

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): restructure settings to (settings)/settings for consistency

Move settings layout from settings/(settings-layout) to (settings)/settings
to be consistent with the (dashboard) route group pattern.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): use Sidebar component for settings sidebar

Update SettingsSidebar to use the same Sidebar component primitives
as the dashboard (SidebarProvider, Sidebar, SidebarHeader, SidebarContent, etc.)
instead of a custom implementation.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): rebuild settings sidebar with all sections and avatars

- Add all settings sections: user account, security, billing, developer, organization
- Add avatar support for user and organization sections
- Add external link icon for items that open in new tab
- Use same Avatar component as dashboard for consistency

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* sidebar improvements

* fix(calcom): correct avatar URLs for Luke Tracy and Cal.com org

- Luke Tracy uses Unsplash image
- Cal.com org uses Twitter profile image

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* simplify SidebarMenuItem in settings sidebar

* refactor(calcom): use SidebarGroup and SidebarGroupLabel for settings sidebar

Properly structure the settings sidebar using SidebarGroup for each
section and SidebarGroupLabel for section headers with avatar/icon.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* various improvements

* sidebar improvements

* mc

* mc

* feat(calcom): add content to general settings page with Frame component

- Add header Frame with title and description
- Add form Frame with Language, Timezone, Time format, Start of week selects
- Add Schedule timezone change button
- Add toggle Frames for Dynamic group links, Search engine indexing,
  Monthly digest email, and Prevent impersonation settings
- Use coss UI components: Frame, Select, Switch, Button, Field

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): sort CSS classes for lint compliance

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): remove unsupported placeholder prop from SelectValue

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use FrameHeader and FrameFooter as direct children of Frame

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* list dividers improvements

* mc

* refactor: card component + new particles + dialog, alert dialog and frame improvements

* chore: rename particles to reflect the new registry order

* chore: improve registry

* improve card usage + command

* chore: improve general settings

* chore: format

* feat(calcom): add responsive sidebar behavior for settings layout

- Add SettingsSheet component with full settings navigation in a Sheet
- Add SettingsMobileHeader for mobile view with menu + back buttons
- Update SettingsSidebar to show only menu + back buttons between md-lg
- Update settings layout to include mobile header with proper padding

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix TypeScript type for SettingsSheet children prop

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: adjust sidebar padding and alignment

* mc

* mc

* mc

* mc

* mc

* simplify nav main

* mc

* mc

* mc

* mc

* refactor: reorganize components

* refactor(calcom): extract shared components and add profile page

- Extract SettingsNavSection component to reduce duplication between sheet and sidebar
- Extract SettingsToggle to reusable component in components/settings/
- Fix redirect inconsistency: both /settings and /settings/my-account now redirect to /settings/my-account/general
- Make onNavigate prop more explicit by using onClick handler with useCallback
- Add profile settings page with avatar upload, username, email management, and danger zone

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix profile page build error by using Label instead of Field

The Field component from Base UI causes SSR pre-rendering errors during build.
Using Label component directly with div wrappers avoids the issue while
maintaining the same visual appearance.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor: improve ui components + color ajustments + calcom app improvements (wip)

* refactor: replace SingleItem component with ResourceItem + mc

* chore: rename label vars

* refactor(list-item): remove DnD features and add ListItemLabel component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(list-item): extract ItemLabel to separate file and update AGENTS.md

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(item-label): update hover styles and restructure ListItem component layout

* mc

* mc

* refactor(calcom): use DragOverlay for dndkit sortable implementation

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add data-overlay attribute to ResourceItem for drag overlay

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add --translate-y CSS variable for visual reordering during drag

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(calcom): clean up imports and adjust className formatting in ResourceItem

* refactor(calcom): update drag state styles in ResourceItem for improved visual feedback

* refactor(calcom): streamline className in ResourceItem for consistency and clarity

* refactor(calcom): add dropAnimation sideEffects to prevent handle flash on drop

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): enhance transition effects and drag state handling in ItemLabel and ResourceItem components

* refactor(calcom): add data-dragging attribute to drag overlay item

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): remove data-dragging from overlay item on drop animation start

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore d82c6b15 changes, remove data-dragging overlay modifications

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* refactor(calcom): update styles in ResourceItem and remove restrictToParentElement modifier from SortableList for improved drag-and-drop behavior

* refactor(calcom): enhance drag-and-drop styles in ItemLabel and ResourceItem components for improved visual feedback

* style: add backdrop blur effect

* remove custom announcements

* use default announcements

* refactor(calcom): update skeleton structure to match current layout

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): extract reusable BookingsListSkeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add CardFrame and CardFrameHeader to skeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): update skeleton components for improved layout and remove unnecessary separators

* refactor(calcom): adjust Skeleton component classes for consistent styling

* refactor(calcom): consolidate BookingsListSkeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: restore mock data

* remove backdrop blur

* fix empty border

* further improvements

* feat(calcom): add dark mode toggle to debug popover

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(calcom): add next-themes dependency for dark mode toggle

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix dark mode toggle hydration issue with mounted state

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use local state for dark mode toggle to fix controlled switch

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert(calcom): remove dark mode toggle from debug popover

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* refactor: event types as list items

* build registry

* refactor(resource-item): simplify className structure for improved readability and maintainability

* refactor(calcom): rename drag data attributes for consistency

- data-drag-ended -> data-drag-release
- data-overlay -> data-drag-overlay
- data-dragging -> data-drag-on
- data-dragged -> data-drag-ghost
- Remove duration and easing from dropAnimation (no longer needed)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(calcom): move Card drag classes into ResourceItem

- Move ResourceItem-affecting classes from Card into ResourceItem using in-[:has(...)] selector
- Card now only has its own visual styles (border, bg, shadow, before)
- ResourceItem is now self-contained for drag state styling

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "refactor(calcom): move Card drag classes into ResourceItem"

This reverts commit 7773cdc2ce.

* mc

* mc

* refactor(calcom): merge resource-item into list-item with sortable prop

- Unified ListItem component with optional sortable prop for drag functionality
- When sortable=true: includes drag classes, data-drag-* attributes, ItemLabel
- When sortable=false: uses simpler static classes
- Updated all data-slot references from resource-item to list-item
- Deleted resource-item.tsx (merged into list-item.tsx)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add SortableListItem wrapper component

- Created SortableListItem that wraps ListItem with sortable=true
- Cleaner API: no need to pass sortable prop explicitly
- Updated event-types-list.tsx to use SortableListItem

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): rename list-item to list and add SortableList component

- Renamed list-item.tsx to list.tsx
- Changed export pattern to export all at end of file
- Added SortableList component using useRender from Base UI
- SortableList applies drag-related classes and renders as Card via render prop
- Updated event-types-list.tsx to use new SortableList component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): export sortable classes instead of SortableList component

- Renamed list.tsx back to list-item.tsx
- Removed SortableList component and useRender/mergeProps imports
- Exported sortableListClasses constant for use on Card
- Updated event-types-list.tsx to use sortableListClasses on Card

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): clean up dnd implementation

- Remove unused _projectedIndex, overId state, and handleDragOver
- Remove unused listeners/attributes props from ListItemDragHandle
- Add restrictToVerticalAxis modifier to restrict dragging to vertical axis

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* fix(calcom): remove starting:rounded-2xl to prevent unwanted transition on page load

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): make starting:rounded-2xl conditional on hasDragged

- Add hasDragged state to sortable.tsx that becomes true on first drag
- Pass hasDragged through context and render props
- Add data-has-dragged attribute to list items
- Make starting:rounded-2xl and border-radius transition conditional on data-has-dragged
- This prevents unwanted radius transition on page load while preserving it for reorder animations

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* fix(calcom): add font-synthesis: none to fix Safari semibold rendering

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "fix(calcom): add font-synthesis: none to fix Safari semibold rendering"

This reverts commit ad92c32dc9.

* mc

* improve overlay highlights

* mc

* display the hidden badge at the end

* feat(calcom): replace bookings collapsible with single link and tab navigation

- Changed Bookings sidebar item from collapsible submenu to single link to /booking/upcoming
- Added BookingsNav component with tab-style navigation for booking pages
- Updated all booking pages to include the tab navigation
- Unified page titles to 'Bookings' with consistent description across all booking pages

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix sidebar active state for all booking pages

- Added matchPath property to NavItem interface
- Set matchPath to /booking for Bookings nav item
- Updated NavItemSimple to use matchPath for active state matching

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* bookings wip

* sidebar fix

* fix card

* fix cal sans issue

* restore white bg

* add options to some components

* various improvements

* test linear-style filters

* format

* booking filters improvements

* mc

* feat(calcom): integrate bookings filter with dynamic Group components

- Add icon property to FilterCategory for menu items
- Add avatar property to FilterOption for member filters
- Add ActiveFilter interface to track selected filters
- Update FilterMenu to accept activeFilters and onFilterChange props
- Add FilterGroup component to render dynamic filter groups
- Connect combobox selections to display Group components
- Add edit functionality to modify existing filters
- Add Clear button to remove all filters
- Show avatars in combobox items and filter groups for member filters

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): add null checks for selectedOptions array access

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add filtering functionality to bookings list

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): consolidate filter button and improve filter UI layout

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter UI - remove actual filtering functionality

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): prevent button flash when transitioning from menu to combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter architecture - menu stays simple, Group shows combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): update PendingFilterGroup to show dynamic selections and fix X button

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use ref for cancel flag to fix X button race condition

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* clean up

* remove icons

* refactor(calcom): replace hardcoded filter data with mock bookings data

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): implement URL-based filter state management

- Add activeFilters query param to URL for filter persistence
- Show ActiveFilter component when filter is selected from menu
- Auto-open combobox when filter is added
- Display 'Select' when no selection, name when 1 selected, 'n selected' for multiple
- Use Cal.com-compatible filter IDs (eventTypeId, userIds, etc.)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter state to use local React state

- Remove URL query string management for activeFilters
- Use useState instead of URL-based state
- Keep all filter functionality (add, update, remove, clear)
- Simpler implementation without URL encoding complexity

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): pass items prop to Combobox root for proper option rendering

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): remove ActiveFilter when combobox closes with no selection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(ui): extract ComboboxChipsInput from ComboboxInput

- Create new ComboboxChipsInput component for use inside ComboboxChips
- Remove conditional multiple/single mode logic from ComboboxInput
- Update data-slot to 'combobox-chips-input' for the new component
- Add data-slot='combobox-input' to ComboboxInput wrapper div
- Update CSS selectors to target data-slot='input' instead of 'combobox-input'
- Update particles to use ComboboxChipsInput: p-combobox-9, p-combobox-12, p-combobox-14, p-field-9
- Update combobox.mdx documentation with new component API

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(ui): sync ComboboxChipsInput to packages/ui

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(ui): restore data-slot='combobox-input' on inner input in ComboboxInput

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(ui): sync ComboboxInput data-slot fix to packages/ui

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(ui): update search-field.tsx to use ComboboxChipsInput

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* docs(ui): move ComboboxChipsInput section after ComboboxChips

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix scrollarea

* feat(calcom): display avatars for members in filter combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): add avatar URLs to members and add more bookings with different hosts

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): display grouped avatars in combobox trigger for members

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "feat(calcom): display grouped avatars in combobox trigger for members"

This reverts commit 0c31fd4a45.

* feat(calcom): show first selected item with +n badge in combobox trigger

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): maintain selection order and show selected items first on open

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* test(calcom): remove avatar from Keith to test fallback initials

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* fix(calcom): adjust AvatarFallback text size for better visibility

* feat(calcom): create MemberAvatar component for improved avatar handling in bookings filters

* feat(calcom): add saved filters combobox with My bookings option

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add search input to saved filters combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): add edit menu for selected saved filters

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add 'All bookings' option to deselect saved filter

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add separator below 'All bookings' option

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): use Group with X button for saved filter deselection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): move edit button outside Group component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): hide Rename and Delete for default preset instead of disabling

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* add tabbed nav

* mc

* feat(calcom): add consistent filtering system to all bookings pages

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): remove AppHeader from booking pages and adjust layout for Empty states

* mc

* fix(calcom): convert bookings pages to Server Components for build compatibility

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): extract BookingsEmpty client components for skeleton loading

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): add loading.tsx files to provide Suspense boundary for useSearchParams

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* mc

* mc

* mc

* feat(ui): add p-group-23 particle with filter combobox multi-select

- Group with filter label, combobox multi-select, and remove button
- Based on ActiveFilterComponent structure from bookings-filters.tsx
- Demonstrates avatar, badge, button, combobox, and group components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* mc

* mc

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-02-05 09:51:12 +00:00
..
2025-11-17 15:28:45 +01:00
2025-11-17 15:28:45 +01:00
2025-11-17 15:28:45 +01:00
2025-11-17 15:28:45 +01:00