From 02dcefdf5c84614bd1585b80223b02a108840cf5 Mon Sep 17 00:00:00 2001
From: Pedro Carreno <34664891+Pkcarreno@users.noreply.github.com>
Date: Sat, 8 Jun 2024 14:31:18 -0400
Subject: [PATCH] feat: show badge on bottom bar in mobile view

when there are new logs on the output screen, it displays a badge as an alert for the user in
mobille view
---
 .../editor/components/footer/mobile-footer.tsx         |  9 ++++++++-
 src/features/editor/components/ui/bottom-tabs.tsx      | 10 +++++++++-
 src/features/editor/stores/editor/logs-store.ts        |  7 +++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/features/editor/components/footer/mobile-footer.tsx b/src/features/editor/components/footer/mobile-footer.tsx
index dc3f066..d0d507e 100644
--- a/src/features/editor/components/footer/mobile-footer.tsx
+++ b/src/features/editor/components/footer/mobile-footer.tsx
@@ -1,6 +1,7 @@
 import { CodeIcon, ListBulletIcon } from '@radix-ui/react-icons';
 import React from 'react';
 
+import { useLogsStore } from '../../stores/editor';
 import { BottomTabsContainer, BottomTabsTab } from '../ui/bottom-tabs';
 import type { FooterProps } from './types';
 
@@ -15,6 +16,8 @@ export const MobileFooter: React.FC<Props> = ({
   isRightActive,
   className,
 }) => {
+  const { alert, clearAlert } = useLogsStore();
+
   return (
     <BottomTabsContainer className={className}>
       <BottomTabsTab
@@ -26,7 +29,11 @@ export const MobileFooter: React.FC<Props> = ({
       <BottomTabsTab
         label="Output"
         icon={ListBulletIcon}
-        onClick={onRightClick}
+        onClick={() => {
+          onRightClick();
+          clearAlert();
+        }}
+        showBadge={alert}
         isActive={isRightActive}
       />
     </BottomTabsContainer>
diff --git a/src/features/editor/components/ui/bottom-tabs.tsx b/src/features/editor/components/ui/bottom-tabs.tsx
index ef31978..0a81d71 100644
--- a/src/features/editor/components/ui/bottom-tabs.tsx
+++ b/src/features/editor/components/ui/bottom-tabs.tsx
@@ -33,12 +33,14 @@ interface BottomTabsTabProps extends ButtonProps {
   label: string;
   icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
   isActive?: boolean;
+  showBadge?: boolean;
 }
 
 export const BottomTabsTab: React.FC<BottomTabsTabProps> = ({
   label,
   icon,
   isActive = false,
+  showBadge,
   ...props
 }) => {
   const Icon = icon;
@@ -50,10 +52,16 @@ export const BottomTabsTab: React.FC<BottomTabsTabProps> = ({
     >
       <div
         className={cn(
-          'flex size-fit items-center justify-center rounded-2xl px-5 py-1 transition-colors',
+          'relative flex size-fit items-center justify-center rounded-2xl px-5 py-1 transition-colors',
           isActive && 'bg-primary text-primary-foreground',
         )}
       >
+        <div
+          className={cn(
+            'absolute right-0 top-0 size-3 rounded-full transition-colors',
+            showBadge ? 'bg-destructive' : 'transparent',
+          )}
+        />
         <div className="flex size-6 items-center justify-center">
           <Icon className="size-4" />
         </div>
diff --git a/src/features/editor/stores/editor/logs-store.ts b/src/features/editor/stores/editor/logs-store.ts
index b1c4710..7dcbb75 100644
--- a/src/features/editor/stores/editor/logs-store.ts
+++ b/src/features/editor/stores/editor/logs-store.ts
@@ -10,24 +10,31 @@ const logsList = new LinkedLogs();
 interface LogsState {
   logs: log[];
   isFirstTime: boolean;
+  alert: boolean;
   appendLogs: (logs: log) => void;
   clearLogs: () => void;
+  clearAlert: () => void;
 }
 
 const _useLogsStore = create<LogsState>((set) => ({
   logs: [],
   isFirstTime: true,
+  alert: false,
   appendLogs: (log: log) => {
     logsList.append(log);
     set({
       logs: logsList.getAllLogsInArray(),
       isFirstTime: false,
+      alert: true,
     });
   },
   clearLogs: () => {
     logsList.clearFirst();
     set({ logs: [] });
   },
+  clearAlert: () => {
+    set({ alert: false });
+  },
 }));
 
 export const useLogsStore = createSelectors(_useLogsStore);