Remove duplicate node logic, UI Update, flatten build output (#586)

* refactor nodes to getNodes fn. ui updates

* fixed several styling issues

* fix: message specific styling/overflow

* added footer, fixed tests. styling

* fix: added theme support back to app component

* fix: hide emojis/reactions

* fix: added more padding to content element

* fix: fixed padding in content element

* updated color scheme

* fix: more dark mode styling improvements

* fix: padding and alignment fixes

* fix: prevent left sidebar collapse, added battery component

* fix: change scrollbars to "tiny" style, improved message scrolling, fixed bug with message input

* message store fixes, ui fixes

* fix: disabled message persistance until after release

src/components/generic/Mono.tsx

@@ -1,11 +1,17 @@
+import { cn } from "@core/utils/cn.ts";
+
+interface MonoProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  className?: string;
+}
 export const Mono = ({
   children,
   className,
   ...rest
-}: JSX.IntrinsicElements["span"]) => {
+}: MonoProps) => {
   return (
     <span
-      className={`font-mono text-sm text-text-secondary ${className ?? ""}`}
+      className={cn("font-mono text-sm text-text-secondary", className)}
       {...rest}
     >
       {children}

src/components/generic/Table/index.tsx

@@ -17,11 +17,11 @@ export interface Heading {
  * @returns number of hopsAway or `0` if hopsAway is 'Direct'
  */
 function numericHops(hopsAway: string): number {
-  if(hopsAway.match(/direct/i)){
+  if (hopsAway.match(/direct/i)) {
     return 0;
   }
-  if ( hopsAway.match(/\d+\s+hop/gi) ) {
-    return Number( hopsAway.match(/(\d+)\s+hop/i)?.[1] );
+  if (hopsAway.match(/\d+\s+hop/gi)) {
+    return Number(hopsAway.match(/(\d+)\s+hop/i)?.[1]);
   }
   return Number.MAX_SAFE_INTEGER;
 }
@@ -46,7 +46,6 @@ export const Table = ({ headings, rows }: TableProps) => {
     const aValue = a[columnIndex].props.children;
     const bValue = b[columnIndex].props.children;
 
-    // Custom comparison for 'Last Heard' column
     if (sortColumn === "Last Heard") {
       const aTimestamp = aValue.props.timestamp ?? 0;
       const bTimestamp = bValue.props.timestamp ?? 0;
@@ -60,11 +59,10 @@ export const Table = ({ headings, rows }: TableProps) => {
       return 0;
     }
 
-    // Custom comparison for 'Connection' column
     if (sortColumn === "Connection") {
       const aNumHops = numericHops(aValue instanceof Array ? aValue[0] : aValue);
       const bNumHops = numericHops(bValue instanceof Array ? bValue[0] : bValue);
-      
+
       if (aNumHops < bNumHops) {
         return sortOrder === "asc" ? -1 : 1;
       }
@@ -74,7 +72,6 @@ export const Table = ({ headings, rows }: TableProps) => {
       return 0;
     }
 
-    // Default comparison for other columns
     if (aValue < bValue) {
       return sortOrder === "asc" ? -1 : 1;
     }
@@ -86,17 +83,16 @@ export const Table = ({ headings, rows }: TableProps) => {
 
   return (
     <table className="min-w-full">
-      <thead className="bg-backgound-primary text-sm font-semibold text-text-primary">
+      <thead className="text-xs font-semibold">
         <tr>
           {headings.map((heading) => (
             <th
               key={heading.title}
               scope="col"
-              className={`py-2 pr-3 text-left ${
-                heading.sortable
-                  ? "cursor-pointer hover:brightness-hover active:brightness-press"
-                  : ""
-              }`}
+              className={`py-2 pr-3 text-left ${heading.sortable
+                ? "cursor-pointer hover:brightness-hover active:brightness-press"
+                : ""
+                }`}
               onClick={() => heading.sortable && headingSort(heading.title)}
               onKeyUp={() => heading.sortable && headingSort(heading.title)}
             >
@@ -111,28 +107,29 @@ export const Table = ({ headings, rows }: TableProps) => {
           ))}
         </tr>
       </thead>
-      <tbody>
-        {sortedRows.map((row, index) => (
+      <tbody className="max-w-fit">
+        {sortedRows.map((row, index) => {
           // biome-ignore lint/suspicious/noArrayIndexKey: TODO: Once this table is sortable, this should get fixed.
-          <tr key={index} className={`${index % 2 ? 'bg-white dark:bg-white/2' : 'bg-slate-50/50 dark:bg-slate-50/5'} border-b-1 border-slate-200 dark:border-slate-900`}>
-            {row.map((item, index) => (
-               index === 0 ?
-               <th 
-                 key={item.key ?? index}
-                 className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
-                 scope="row"
-               >
-                 {item}
-               </th> :
-              <td
-                key={item.key ?? index}
-                className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
-              >
-                {item}
-              </td>
-            ))}
+          return (<tr key={index} className={`${index % 2 ? 'bg-white dark:bg-white/2' : 'bg-slate-50/50 dark:bg-slate-50/5'} border-b-1 border-slate-200 dark:border-slate-900`}>
+            {row.map((item, index) => {
+              return (index === 0 ?
+                <th
+                  key={item.key ?? index}
+                  className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
+                  scope="row"
+                >
+                  {item}
+                </th> :
+                <td
+                  key={item.key ?? index}
+                  className="whitespace-nowrap py-2 text-sm text-text-secondary first:pl-2"
+                >
+                  {item}
+                </td>)
+            })}
           </tr>
-        ))}
+          );
+        })}
       </tbody>
     </table>
   );