Add stream deletion functionality and improve UI
Some checks failed
Lint and Build / build (pull_request) Failing after 24s

- Add delete button to each stream with confirmation modal
- Implement DELETE endpoint that removes sources from OBS before database deletion
- Fix dropdown positioning issue when scrolling by removing scroll offsets
- Change add stream form to use Twitch username instead of full URL
- Automatically calculate Twitch URL from username (https://twitch.tv/{username})
- Add username validation (4-25 chars, alphanumeric and underscores only)
- Improve "View Stream" link visibility with button styling
- Ensure streams list refreshes immediately after deletion

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-20 13:16:06 -04:00
parent 8459b7f701
commit 3c58ccc5af
3 changed files with 191 additions and 43 deletions

View file

@ -49,13 +49,27 @@ export default function Dropdown({
}, [controlledIsOpen, isOpen, onToggle]);
useEffect(() => {
if ((controlledIsOpen ?? isOpen) && buttonRef.current && mounted) {
const rect = buttonRef.current.getBoundingClientRect();
setDropdownPosition({
top: rect.bottom + window.scrollY + 4,
left: rect.left + window.scrollX,
width: rect.width
});
const updatePosition = () => {
if ((controlledIsOpen ?? isOpen) && buttonRef.current && mounted) {
const rect = buttonRef.current.getBoundingClientRect();
setDropdownPosition({
top: rect.bottom + 4,
left: rect.left,
width: rect.width
});
}
};
updatePosition();
if ((controlledIsOpen ?? isOpen) && mounted) {
window.addEventListener('scroll', updatePosition, true);
window.addEventListener('resize', updatePosition);
return () => {
window.removeEventListener('scroll', updatePosition, true);
window.removeEventListener('resize', updatePosition);
};
}
}, [controlledIsOpen, isOpen, mounted]);