Merge pull request #10 from Pkcarreno/some-changes

User experience tweaks

package.json

@@ -47,6 +47,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
+    "deep-equal": "^2.2.3",
     "eslint-linter-browserify": "^9.4.0",
     "js-base64": "^3.7.7",
     "only-allow": "^1.2.1",

src/decs.d.ts

@@ -0,0 +1 @@
+declare module 'deep-equal';

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/lib/linked-log.ts

@@ -0,0 +1,64 @@
+import DeepEqual from 'deep-equal';
+
+import type { log } from '../types';
+
+class LogNode {
+  public next: LogNode | null = null;
+  public value: log;
+
+  constructor(data: log) {
+    this.value = data;
+  }
+}
+
+interface ILinkedLogs {
+  append(data: log): void;
+  clearFirst(): void;
+  getAllLogsInArray(): log[];
+}
+
+class LinkedLogs implements ILinkedLogs {
+  private head: LogNode | null = null;
+
+  append(data: log) {
+    const node = new LogNode(data);
+
+    if (!this.head) {
+      this.head = node;
+    } else {
+      const getLast = (node: LogNode): LogNode => {
+        return node.next ? getLast(node.next) : node;
+      };
+
+      const lastNode = getLast(this.head);
+
+      if (
+        lastNode.value.type === data.type &&
+        DeepEqual(lastNode.value.value, data.value)
+      ) {
+        lastNode.value.repeats += 1;
+        lastNode.value.duration = data.duration;
+      } else {
+        lastNode.next = node;
+      }
+    }
+  }
+
+  clearFirst(): void {
+    this.head = null;
+  }
+
+  getAllLogsInArray(): log[] {
+    const array: log[] = [];
+    let currentNode: LogNode | null = this.head;
+
+    while (currentNode) {
+      array.push(currentNode?.value);
+      currentNode = currentNode.next;
+    }
+
+    return array;
+  }
+}
+
+export default LinkedLogs;