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

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>

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>

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);