style: format codebase and update dashboard ui

Author: awesomestvi

src/app/App.tsx

@@ -36,12 +36,12 @@ import { DashboardLayout } from './features/dashboard/dashboard-layout';
 import { DeviceGrid } from './features/dashboard/device-grid';
 import { SettingsSection } from './features/settings/components/settings-section';
 import {
-	useCardOrdering,
-	useCardState,
-	useDeviceMap,
-	useEditMode,
-	useRoomNavigation,
-	useRoomOrdering,
+  useCardOrdering,
+  useCardState,
+  useDeviceMap,
+  useEditMode,
+  useRoomNavigation,
+  useRoomOrdering,
 } from './hooks';
 import { useCustomCards } from './hooks/use-custom-cards';
 import { useDevices, useRooms } from './hooks/use-devices';
@@ -230,11 +230,7 @@ function Dashboard() {
       <DashboardLayout>
         {lightDeviceMap.size > 0 ? (
           <EditModeProvider value={editModeContextValue}>
-            <AllViewGrid
-              deviceMap={lightDeviceMap}
-              rooms={lightRooms}
-              cardOrders={cardOrders}
-            />
+            <AllViewGrid deviceMap={lightDeviceMap} rooms={lightRooms} cardOrders={cardOrders} />
           </EditModeProvider>
         ) : (
           <EmptyState

src/app/components/figma/ImageWithFallback.tsx

@@ -2,29 +2,29 @@ import type React from 'react';
 import { memo, useState } from 'react';
 
 const ERROR_IMG_SRC =
-	'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==';
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==';
 
 export const ImageWithFallback = memo(function ImageWithFallback(
-	props: React.ImgHTMLAttributes<HTMLImageElement>
+  props: React.ImgHTMLAttributes<HTMLImageElement>
 ) {
-	const [didError, setDidError] = useState(false);
+  const [didError, setDidError] = useState(false);
 
-	const handleError = () => {
-		setDidError(true);
-	};
+  const handleError = () => {
+    setDidError(true);
+  };
 
-	const { src, alt, style, className, ...rest } = props;
+  const { src, alt, style, className, ...rest } = props;
 
-	return didError ? (
-		<div
-			className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
-			style={style}
-		>
-			<div className="flex items-center justify-center w-full h-full">
-				<img src={ERROR_IMG_SRC} alt="Failed to load" {...rest} data-original-url={src} />
-			</div>
-		</div>
-	) : (
-		<img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
-	);
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Failed to load" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  );
 });