diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index 25deba3..3f04436 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -302,28 +302,16 @@ const Button = styled.button<{danger?: boolean}>` } ` -const Dots = styled.span` - display: flex; - gap: 4px; -` - -const NotificationsDot = styled.div<{type: NotificationType}>` - width: 8px; - height: 8px; - border-radius: 999999px; - background-color: ${({type}) => COLORS[type]}; -` - const NotifierContainer = styled.div` - z-index: 9999; + z-index: 10; display: flex; - flex-direction: column-reverse; + flex-direction: column; gap: 8px; position: fixed; right: 8px; - bottom: 8px; + top: 50px; width: 500px; - height: 50vh; + height: 85vh; min-height: 400px; ` @@ -371,42 +359,10 @@ export const Notifier = () => { const {startPause, endPause} = handlers const pinNotifications = - useVal(getStudio().atomP.ahistoric.pinNotifications) ?? true - const togglePinNotifications = () => - getStudio().transaction(({stateEditors, drafts}) => { - stateEditors.studio.ahistoric.setPinNotifications( - !(drafts.ahistoric.pinNotifications ?? true), - ) - }) + useVal(getStudio().atomP.ahistoric.pinNotifications) ?? false return ( - - <> - {pinNotifications && toasts.length > 0 && ( - - )} - - - {!pinNotifications ? null : toasts.length > 0 ? (
@@ -427,6 +383,28 @@ export const Notifier = () => { Notifications will appear here when you get them. )} + + {pinNotifications && toasts.length > 0 && ( + + )} + ) } + +export const useNotifications = () => { + const {toasts} = useToaster() + + return { + hasNotifications: toasts.length > 0, + } +} diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index 4efe57b..85b5df0 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -9,12 +9,18 @@ import BasicTooltip from '@theatre/studio/uiComponents/Popover/BasicTooltip' import {val} from '@theatre/dataverse' import ExtensionToolbar from './ExtensionToolbar/ExtensionToolbar' import PinButton from './PinButton' -import {Details, Ellipsis, Outline} from '@theatre/studio/uiComponents/icons' +import { + Details, + Ellipsis, + Outline, + Bell, +} from '@theatre/studio/uiComponents/icons' import DoubleChevronLeft from '@theatre/studio/uiComponents/icons/DoubleChevronLeft' import DoubleChevronRight from '@theatre/studio/uiComponents/icons/DoubleChevronRight' import ToolbarIconButton from '@theatre/studio/uiComponents/toolbar/ToolbarIconButton' import usePopover from '@theatre/studio/uiComponents/Popover/usePopover' import MoreMenu from './MoreMenu/MoreMenu' +import {useNotifications} from '@theatre/studio/notify' const Container = styled.div` height: 36px; @@ -47,9 +53,9 @@ const SubContainer = styled.div` gap: 8px; ` -const HasUpdatesBadge = styled.div` +const HasUpdatesBadge = styled.div<{type: 'info' | 'warning'}>` position: absolute; - background: #40aaa4; + background: ${({type}) => (type === 'info' ? '#40aaa4' : '#f59e0b')}; width: 6px; height: 6px; border-radius: 50%; @@ -139,6 +145,8 @@ const GlobalToolbar: React.FC = () => { return hasUpdates }, [hasUpdates]) + const {hasNotifications} = useNotifications() + return ( @@ -166,6 +174,18 @@ const GlobalToolbar: React.FC = () => { + { + getStudio().transaction(({stateEditors, drafts}) => { + stateEditors.studio.ahistoric.setPinNotifications( + !(drafts.ahistoric.pinNotifications ?? false), + ) + }) + }} + > + + {hasNotifications && } + {moreMenu.node} { }} > - {showUpdatesBadge && } + {showUpdatesBadge && } ) { + return ( + + + + ) +} + +export default Bell diff --git a/theatre/studio/src/uiComponents/icons/index.ts b/theatre/studio/src/uiComponents/icons/index.ts index 8f61bb1..0af97b5 100644 --- a/theatre/studio/src/uiComponents/icons/index.ts +++ b/theatre/studio/src/uiComponents/icons/index.ts @@ -14,3 +14,4 @@ export {default as Ellipsis} from './Ellipsis' export {default as GlobeSimple} from './GlobeSimple' export {default as Resize} from './Resize' export {default as Package} from './Package' +export {default as Bell} from './Bell'