From 4b767eb23856cd7bbc1ae061ddbf011ceb0ddc51 Mon Sep 17 00:00:00 2001 From: Hakan Shehu Date: Thu, 14 Nov 2024 11:06:00 +0100 Subject: [PATCH] Reuse read state indicator component --- .../channels/channel-sidebar-item.tsx | 13 ++++---- .../components/chats/chat-sidebar-item.tsx | 7 ++-- .../layouts/layout-sidebar-footer.tsx | 33 +++++-------------- .../layouts/layout-sidebar-header.tsx | 32 +++--------------- .../layouts/read-state-indicator.tsx | 23 +++++++++++++ 5 files changed, 44 insertions(+), 64 deletions(-) create mode 100644 apps/desktop/src/renderer/components/layouts/read-state-indicator.tsx diff --git a/apps/desktop/src/renderer/components/channels/channel-sidebar-item.tsx b/apps/desktop/src/renderer/components/channels/channel-sidebar-item.tsx index cbbddce1..1ad58456 100644 --- a/apps/desktop/src/renderer/components/channels/channel-sidebar-item.tsx +++ b/apps/desktop/src/renderer/components/channels/channel-sidebar-item.tsx @@ -3,6 +3,7 @@ import { ChannelNode } from '@colanode/core'; import { Avatar } from '@/renderer/components/avatars/avatar'; import { useWorkspace } from '@/renderer/contexts/workspace'; import { useRadar } from '@/renderer/contexts/radar'; +import { ReadStateIndicator } from '@/renderer/components/layouts/read-state-indicator'; interface ChannelSidebarItemProps { node: ChannelNode; @@ -39,13 +40,11 @@ export const ChannelSidebarItem = ({ node }: ChannelSidebarItemProps) => { > {node.attributes.name ?? 'Unnamed'} - {!isActive && mentionsCount > 0 && ( - - {mentionsCount} - - )} - {!isActive && mentionsCount === 0 && unreadCount > 0 && ( - + {!isActive && ( + 0} + /> )} ); diff --git a/apps/desktop/src/renderer/components/chats/chat-sidebar-item.tsx b/apps/desktop/src/renderer/components/chats/chat-sidebar-item.tsx index 618e146e..4979002b 100644 --- a/apps/desktop/src/renderer/components/chats/chat-sidebar-item.tsx +++ b/apps/desktop/src/renderer/components/chats/chat-sidebar-item.tsx @@ -4,6 +4,7 @@ import { Avatar } from '@/renderer/components/avatars/avatar'; import { useWorkspace } from '@/renderer/contexts/workspace'; import { useQuery } from '@/renderer/hooks/use-query'; import { useRadar } from '@/renderer/contexts/radar'; +import { ReadStateIndicator } from '@/renderer/components/layouts/read-state-indicator'; interface ChatSidebarItemProps { node: ChatNode; @@ -55,11 +56,7 @@ export const ChatSidebarItem = ({ node }: ChatSidebarItemProps) => { > {data.attributes.name ?? 'Unnamed'} - {!isActive && unreadCount > 0 && ( - - {unreadCount} - - )} + 0} /> ); }; diff --git a/apps/desktop/src/renderer/components/layouts/layout-sidebar-footer.tsx b/apps/desktop/src/renderer/components/layouts/layout-sidebar-footer.tsx index 94c3f40f..90174a82 100644 --- a/apps/desktop/src/renderer/components/layouts/layout-sidebar-footer.tsx +++ b/apps/desktop/src/renderer/components/layouts/layout-sidebar-footer.tsx @@ -19,30 +19,13 @@ import { ChevronsUpDown, LogOut, Plus, Settings } from 'lucide-react'; import { useApp } from '@/renderer/contexts/app'; import { useNavigate } from 'react-router-dom'; import { useRadar } from '@/renderer/contexts/radar'; +import { ReadStateIndicator } from '@/renderer/components/layouts/read-state-indicator'; -interface ReadStateIndicatorProps { +interface AccountReadState { importantCount: number; hasUnseenChanges: boolean; } -const ReadStateIndicator = ({ - importantCount, - hasUnseenChanges, -}: ReadStateIndicatorProps) => { - return ( - - {importantCount > 0 && ( - - {importantCount} - - )} - {importantCount === 0 && hasUnseenChanges && ( - - )} - - ); -}; - export function LayoutSidebarFooter() { const app = useApp(); const account = useAccount(); @@ -53,13 +36,13 @@ export function LayoutSidebarFooter() { const [open, setOpen] = React.useState(false); const otherAccounts = app.accounts.filter((a) => a.id !== account.id); - const accountStates: Record = {}; + const accountStates: Record = {}; for (const otherAccount of otherAccounts) { const accountWorkspaces = app.workspaces.filter( (w) => w.accountId === otherAccount.id ); - const state: ReadStateIndicatorProps = { + const state: AccountReadState = { importantCount: 0, hasUnseenChanges: false, }; @@ -103,8 +86,8 @@ export function LayoutSidebarFooter() { @@ -179,8 +162,8 @@ export function LayoutSidebarFooter() { diff --git a/apps/desktop/src/renderer/components/layouts/layout-sidebar-header.tsx b/apps/desktop/src/renderer/components/layouts/layout-sidebar-header.tsx index 0ff75ded..54aaa535 100644 --- a/apps/desktop/src/renderer/components/layouts/layout-sidebar-header.tsx +++ b/apps/desktop/src/renderer/components/layouts/layout-sidebar-header.tsx @@ -19,29 +19,7 @@ import { } from '@/renderer/components/ui/sidebar'; import { ChevronsUpDown, Settings, Plus, Bell } from 'lucide-react'; import { useRadar } from '@/renderer/contexts/radar'; - -interface ReadStateIndicatorProps { - importantCount: number; - hasUnseenChanges: boolean; -} - -const ReadStateIndicator = ({ - importantCount, - hasUnseenChanges, -}: ReadStateIndicatorProps) => { - return ( - - {importantCount > 0 && ( - - {importantCount} - - )} - {importantCount === 0 && hasUnseenChanges && ( - - )} - - ); -}; +import { ReadStateIndicator } from '@/renderer/components/layouts/read-state-indicator'; export const LayoutSidebarHeader = () => { const workspace = useWorkspace(); @@ -86,8 +64,8 @@ export const LayoutSidebarHeader = () => { @@ -153,8 +131,8 @@ export const LayoutSidebarHeader = () => { {otherWorkspace.name}

diff --git a/apps/desktop/src/renderer/components/layouts/read-state-indicator.tsx b/apps/desktop/src/renderer/components/layouts/read-state-indicator.tsx new file mode 100644 index 00000000..805910d8 --- /dev/null +++ b/apps/desktop/src/renderer/components/layouts/read-state-indicator.tsx @@ -0,0 +1,23 @@ +interface ReadStateIndicatorProps { + count: number; + hasChanges: boolean; +} + +export const ReadStateIndicator = ({ + count, + hasChanges, +}: ReadStateIndicatorProps) => { + if (count === 0 && !hasChanges) { + return null; + } + + if (count > 0) { + return ( + + {count} + + ); + } + + return ; +};