Commit Graph

11 Commits

Author SHA1 Message Date
Josh Hawkins
2782931c72
Update frontend to React 19 (#22275)
* remove unused RecoilRoot and fix implicit ref callback

Remove the vestigial recoil dependency (zero consumers) and convert
the implicit-return ref callback in SearchView to block form to
prevent React 19 interpreting it as a cleanup function.

* replace react-transition-group with framer-motion in Chip

Replace CSSTransition with framer-motion AnimatePresence + motion.div
for React 19 compatibility (react-transition-group uses findDOMNode).
framer-motion is already a project dependency.

* migrate react-grid-layout v1 to v2

- Replace WidthProvider(Responsive) HOC with useContainerWidth hook
- Update types: Layout (single item) → LayoutItem, Layout[] → Layout
- Replace isDraggable/isResizable/resizeHandles with dragConfig/resizeConfig
- Update EventCallback signature for v2 API
- Remove @types/react-grid-layout (v2 includes its own types)

* upgrade vaul, next-themes, framer-motion, react-zoom-pan-pinch

- vaul: ^0.9.1 → ^1.1.2
- next-themes: ^0.3.0 → ^0.4.6
- framer-motion: ^11.5.4 → ^12.35.0 (React 19 native support)
- react-zoom-pan-pinch: 3.4.4 → latest

* upgrade to React 19, react-konva v19, eslint-plugin-react-hooks v5

Core React 19 upgrade with all necessary type fixes:
- Update RefObject types to accept T | null (React 19 refs always nullable)
- Add JSX namespace imports (no longer global in React 19)
- Add initial values to useRef calls (required in React 19)
- Fix ReactElement.props unknown type in config-form components
- Fix IconWrapper interface to use HTMLAttributes instead of index signature
- Add monaco-editor as dev dependency for type declarations
- Upgrade react-konva to v19, eslint-plugin-react-hooks to v5

* upgrade typescript to 5.9.3

* modernize Context.Provider to React 19 shorthand

Replace <Context.Provider value={...}> with <Context value={...}>
across all project-owned context providers. External library contexts
(react-icons IconContext, radix TooltipPrimitive) left unchanged.

* add runtime patches for React 19 compatibility

- Patch @radix-ui/react-compose-refs@1.1.2: stabilize useComposedRefs
  to prevent infinite render loops from unstable ref callbacks
  https://github.com/radix-ui/primitives/issues/3799
- Patch @radix-ui/react-slot@1.2.4: use useComposedRefs hook in
  SlotClone instead of inline composeRefs to prevent re-render cycles
  https://github.com/radix-ui/primitives/pull/3804
- Patch react-use-websocket@4.8.1: remove flushSync wrappers that
  cause "Maximum update depth exceeded" with React 19 auto-batching
  https://github.com/facebook/react/issues/27613
- Add npm overrides to ensure single hoisted copies of compose-refs
  and react-slot across all Radix packages
- Add postinstall script for patch-package
- Remove leftover react-transition-group dependency

* formatting

* use availableWidth instead of useContainerWidth for grid layout

The useContainerWidth hook from react-grid-layout v2 returns raw
container width without accounting for scrollbar width, causing the
grid to not fill the full available space. Use the existing
availableWidth value from useResizeObserver which already compensates
for scrollbar width, matching the working implementation.

* remove unused carousel component and fix React 19 peer deps

Remove embla-carousel-react and its unused Carousel UI component.
Upgrade sonner v1 → v2 for native React 19 support. Remove
@types/react-icons stub (react-icons bundles its own types).
These changes eliminate all peer dependency conflicts, so
npm install works without --legacy-peer-deps.

* fix React 19 infinite re-render loop on live dashboard

The "Maximum update depth exceeded" error was caused by two issues:

1. useDeferredStreamMetadata returned a new `{}` default on every render
   when SWR data was undefined, creating an unstable reference that
   triggered the useEffect in useCameraLiveMode on every render cycle.
   Fixed by using a stable module-level EMPTY_METADATA constant.

2. useResizeObserver's rest parameter `...refs` created a new array on
   every render, causing its useEffect to re-run and re-observe elements
   continuously. Fixed by stabilizing refs with useRef and only
   reconnecting the observer when actual DOM elements change.
2026-03-05 07:42:38 -07:00
Nicolas Mowen
f9b2db4405
Implement smart capitalization based on locale (#17860) 2025-04-22 16:21:09 -06:00
Josh Hawkins
2a28964e63
Improve UI logs (#16434)
* use react-logviewer and backend streaming

* layout adjustments

* readd copy handler

* reorder and fix key

* add loading state

* handle frigate log consolidation

* handle newlines in sheet

* update react-logviewer

* fix scrolling and use chunked log download

* don't combine frigate log lines with timestamp

* basic deduplication

* use react-logviewer and backend streaming

* layout adjustments

* readd copy handler

* reorder and fix key

* add loading state

* handle frigate log consolidation

* handle newlines in sheet

* update react-logviewer

* fix scrolling and use chunked log download

* don't combine frigate log lines with timestamp

* basic deduplication

* move process logs function to services util

* improve layout and scrolling behavior

* clean up
2025-02-10 08:38:56 -07:00
Nicolas Mowen
9d7e499adb Semantic Search Frontend (#12112)
* Add basic search page

* Abstract filters to separate components

* Make searching functional

* Add loading and no results indicators

* Implement searching

* Combine account and settings menus on mobile

* Support using thumbnail for in progress detections

* Fetch previews

* Move recordings view and open recordings when search is selected

* Implement detail pane

* Implement saving of description

* Implement similarity search

* Fix clicking

* Add date range picker

* Fix

* Fix iOS zoom bug

* Mobile fixes

* Use text area

* Fix spacing for drawer

* Fix fetching previews incorrectly
2024-08-29 20:19:50 -06:00
Nicolas Mowen
a4eb435f1a
Improve safari image scrolling performance (#12429)
* Don't set z-height on iOS

* More z-index cleanup
2024-07-13 11:54:24 -05:00
Josh Hawkins
1757f4cb04
Use prettier-plugin-tailwindcss (#11373)
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
2024-05-14 09:06:44 -06:00
Josh Hawkins
08e5c791c8
Use cn() for class names throughout (#11278)
* add scrollbar on ptz presets dropdown

* use cn function for class names throughout

* Revert "add scrollbar on ptz presets dropdown"

This reverts commit 2cee93dc3e.
2024-05-07 08:00:25 -06:00
Josh Hawkins
ef52a1d6f0
Fix colors for default light mode theme (#10909)
* fix colors for default light mode theme

* remove redundancy

* fix export dialog

* don't use primary-foreground

* change secondary button variant to be default button

* change filters button to bg-selected when filtering

* slightly lighten secondary-foreground in light mode

* fix mobile motion only button
2024-04-09 17:49:14 -05:00
Nicolas Mowen
cf2dfd9a54
Redesign logs page (#10853)
* Adjust outline and structure to match designs

* More color changes to fit design

* Properly parse go2rtc severity

* Add ability to filter by clicking item

* Implement sheet / drawer for viewing full log

* Add toast and filtering

* Add links to docs when specific log items are selected

* Cleanup log seeking

* Use header in layout

* Fix mobile menus

* Fix safari theme

* Hide rings

* Theme adjustment
2024-04-07 15:36:08 -05:00
Nicolas Mowen
ee239744d8
Redesign exports page (#10359)
* Redesign exports page

* Cleanup

* fix overhange
2024-03-10 07:25:16 -06:00
Josh Hawkins
c74eb75554
Update camera activity indicator (#10208)
* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite
2024-03-03 09:32:47 -07:00