From fc9026a8d8a0b4907617d6a44a3ceecff8e13e12 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Fri, 13 Feb 2026 17:11:00 +0000
Subject: [PATCH] refactor: Clean up component code and improve formatting
 across multiple files

---
 MobileApp/src/components/AlertCard.tsx        | 132 ++++++++--------
 MobileApp/src/components/EmptyState.tsx       |   4 +-
 MobileApp/src/components/EpisodeCard.tsx      | 125 +++++++--------
 MobileApp/src/components/IncidentCard.tsx     | 142 +++++++++---------
 MobileApp/src/components/Logo.tsx             |  12 +-
 MobileApp/src/navigation/MainTabNavigator.tsx |   6 +-
 MobileApp/src/screens/AlertDetailScreen.tsx   |   2 +-
 .../src/screens/AlertEpisodeDetailScreen.tsx  |   2 +-
 MobileApp/src/screens/BiometricLockScreen.tsx |   1 -
 .../src/screens/IncidentDetailScreen.tsx      |   7 +-
 .../screens/IncidentEpisodeDetailScreen.tsx   |   2 +-
 11 files changed, 214 insertions(+), 221 deletions(-)

diff --git a/MobileApp/src/components/AlertCard.tsx b/MobileApp/src/components/AlertCard.tsx
index b7d6cfd0e8..7fac90e065 100644
--- a/MobileApp/src/components/AlertCard.tsx
+++ b/MobileApp/src/components/AlertCard.tsx
@@ -54,80 +54,82 @@ export default function AlertCard({
             style={{ width: 3 }}
           />
           <View className="flex-1 p-4">
-          {projectName ? (
-            <View className="mb-2">
-              <ProjectBadge name={projectName} />
+            {projectName ? (
+              <View className="mb-2">
+                <ProjectBadge name={projectName} />
+              </View>
+            ) : null}
+            <View className="flex-row justify-between items-center mb-2">
+              <View
+                className="px-2.5 py-0.5 rounded-full"
+                style={{ backgroundColor: theme.colors.backgroundTertiary }}
+              >
+                <Text className="text-[12px] font-semibold text-text-tertiary">
+                  {alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
+                </Text>
+              </View>
+              <Text className="text-[12px] text-text-tertiary">
+                {timeString}
+              </Text>
             </View>
-          ) : null}
-          <View className="flex-row justify-between items-center mb-2">
-            <View
-              className="px-2.5 py-0.5 rounded-full"
-              style={{ backgroundColor: theme.colors.backgroundTertiary }}
+
+            <Text
+              className="text-body-lg text-text-primary font-semibold mt-0.5"
+              numberOfLines={2}
             >
-              <Text className="text-[12px] font-semibold text-text-tertiary">
-                {alert.alertNumberWithPrefix || `#${alert.alertNumber}`}
-              </Text>
-            </View>
-            <Text className="text-[12px] text-text-tertiary">{timeString}</Text>
-          </View>
+              {alert.title}
+            </Text>
 
-          <Text
-            className="text-body-lg text-text-primary font-semibold mt-0.5"
-            numberOfLines={2}
-          >
-            {alert.title}
-          </Text>
-
-          <View className="flex-row flex-wrap gap-2 mt-3">
-            {alert.currentAlertState ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{
-                  backgroundColor: theme.colors.backgroundTertiary,
-                }}
-              >
+            <View className="flex-row flex-wrap gap-2 mt-3">
+              {alert.currentAlertState ? (
                 <View
-                  className="w-2 h-2 rounded-full mr-1.5"
-                  style={{ backgroundColor: stateColor }}
-                />
-                <Text className="text-[12px] font-semibold text-text-primary">
-                  {alert.currentAlertState.name}
-                </Text>
-              </View>
-            ) : null}
-
-            {alert.alertSeverity ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{ backgroundColor: severityColor + "15" }}
-              >
-                <Text
-                  className="text-[12px] font-semibold"
-                  style={{ color: severityColor }}
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{
+                    backgroundColor: theme.colors.backgroundTertiary,
+                  }}
                 >
-                  {alert.alertSeverity.name}
+                  <View
+                    className="w-2 h-2 rounded-full mr-1.5"
+                    style={{ backgroundColor: stateColor }}
+                  />
+                  <Text className="text-[12px] font-semibold text-text-primary">
+                    {alert.currentAlertState.name}
+                  </Text>
+                </View>
+              ) : null}
+
+              {alert.alertSeverity ? (
+                <View
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{ backgroundColor: severityColor + "15" }}
+                >
+                  <Text
+                    className="text-[12px] font-semibold"
+                    style={{ color: severityColor }}
+                  >
+                    {alert.alertSeverity.name}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
+
+            {alert.monitor ? (
+              <View className="flex-row items-center mt-3">
+                <Ionicons
+                  name="desktop-outline"
+                  size={12}
+                  color={theme.colors.textTertiary}
+                  style={{ marginRight: 5 }}
+                />
+                <Text
+                  className="text-[12px] text-text-secondary flex-1"
+                  numberOfLines={1}
+                >
+                  {alert.monitor.name}
                 </Text>
               </View>
             ) : null}
           </View>
-
-          {alert.monitor ? (
-            <View className="flex-row items-center mt-3">
-              <Ionicons
-                name="desktop-outline"
-                size={12}
-                color={theme.colors.textTertiary}
-                style={{ marginRight: 5 }}
-              />
-              <Text
-                className="text-[12px] text-text-secondary flex-1"
-                numberOfLines={1}
-              >
-                {alert.monitor.name}
-              </Text>
-            </View>
-          ) : null}
-        </View>
         </View>
       </GlassCard>
     </TouchableOpacity>
diff --git a/MobileApp/src/components/EmptyState.tsx b/MobileApp/src/components/EmptyState.tsx
index 231f98bcf8..4243b87b82 100644
--- a/MobileApp/src/components/EmptyState.tsx
+++ b/MobileApp/src/components/EmptyState.tsx
@@ -34,9 +34,7 @@ export default function EmptyState({
   return (
     <View className="flex-1 items-center justify-center px-10 py-28">
       {/* Outer gradient glow ring */}
-      <View
-        className="w-28 h-28 rounded-full items-center justify-center overflow-hidden"
-      >
+      <View className="w-28 h-28 rounded-full items-center justify-center overflow-hidden">
         <View
           style={{
             position: "absolute",
diff --git a/MobileApp/src/components/EpisodeCard.tsx b/MobileApp/src/components/EpisodeCard.tsx
index 05384499dc..9cb6e8be69 100644
--- a/MobileApp/src/components/EpisodeCard.tsx
+++ b/MobileApp/src/components/EpisodeCard.tsx
@@ -79,76 +79,79 @@ export default function EpisodeCard(
             style={{ width: 3 }}
           />
           <View className="flex-1 p-4">
-          {projectName ? (
-            <View className="mb-2">
-              <ProjectBadge name={projectName} />
-            </View>
-          ) : null}
-          <View className="flex-row justify-between items-center mb-2">
-            <View
-              className="px-2.5 py-0.5 rounded-full"
-              style={{ backgroundColor: theme.colors.backgroundTertiary }}
-            >
-              <Text className="text-[12px] font-semibold text-text-tertiary">
-                {episode.episodeNumberWithPrefix || `#${episode.episodeNumber}`}
-              </Text>
-            </View>
-            <Text className="text-[12px] text-text-tertiary">{timeString}</Text>
-          </View>
-
-          <Text
-            className="text-body-lg text-text-primary font-semibold mt-0.5"
-            numberOfLines={2}
-          >
-            {episode.title}
-          </Text>
-
-          <View className="flex-row flex-wrap gap-2 mt-3">
-            {state ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{
-                  backgroundColor: theme.colors.backgroundTertiary,
-                }}
-              >
-                <View
-                  className="w-2 h-2 rounded-full mr-1.5"
-                  style={{ backgroundColor: stateColor }}
-                />
-                <Text className="text-[12px] font-semibold text-text-primary">
-                  {state.name}
-                </Text>
+            {projectName ? (
+              <View className="mb-2">
+                <ProjectBadge name={projectName} />
               </View>
             ) : null}
-
-            {severity ? (
+            <View className="flex-row justify-between items-center mb-2">
               <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{ backgroundColor: severityColor + "15" }}
-              >
-                <Text
-                  className="text-[12px] font-semibold"
-                  style={{ color: severityColor }}
-                >
-                  {severity.name}
-                </Text>
-              </View>
-            ) : null}
-
-            {childCount > 0 ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
+                className="px-2.5 py-0.5 rounded-full"
                 style={{ backgroundColor: theme.colors.backgroundTertiary }}
               >
-                <Text className="text-[12px] font-semibold text-text-secondary">
-                  {childCount} {type === "incident" ? "incident" : "alert"}
-                  {childCount !== 1 ? "s" : ""}
+                <Text className="text-[12px] font-semibold text-text-tertiary">
+                  {episode.episodeNumberWithPrefix ||
+                    `#${episode.episodeNumber}`}
                 </Text>
               </View>
-            ) : null}
+              <Text className="text-[12px] text-text-tertiary">
+                {timeString}
+              </Text>
+            </View>
+
+            <Text
+              className="text-body-lg text-text-primary font-semibold mt-0.5"
+              numberOfLines={2}
+            >
+              {episode.title}
+            </Text>
+
+            <View className="flex-row flex-wrap gap-2 mt-3">
+              {state ? (
+                <View
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{
+                    backgroundColor: theme.colors.backgroundTertiary,
+                  }}
+                >
+                  <View
+                    className="w-2 h-2 rounded-full mr-1.5"
+                    style={{ backgroundColor: stateColor }}
+                  />
+                  <Text className="text-[12px] font-semibold text-text-primary">
+                    {state.name}
+                  </Text>
+                </View>
+              ) : null}
+
+              {severity ? (
+                <View
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{ backgroundColor: severityColor + "15" }}
+                >
+                  <Text
+                    className="text-[12px] font-semibold"
+                    style={{ color: severityColor }}
+                  >
+                    {severity.name}
+                  </Text>
+                </View>
+              ) : null}
+
+              {childCount > 0 ? (
+                <View
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{ backgroundColor: theme.colors.backgroundTertiary }}
+                >
+                  <Text className="text-[12px] font-semibold text-text-secondary">
+                    {childCount} {type === "incident" ? "incident" : "alert"}
+                    {childCount !== 1 ? "s" : ""}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
           </View>
         </View>
-        </View>
       </GlassCard>
     </TouchableOpacity>
   );
diff --git a/MobileApp/src/components/IncidentCard.tsx b/MobileApp/src/components/IncidentCard.tsx
index d5d63025c3..1fe3dfa508 100644
--- a/MobileApp/src/components/IncidentCard.tsx
+++ b/MobileApp/src/components/IncidentCard.tsx
@@ -57,85 +57,87 @@ export default function IncidentCard({
             style={{ width: 3 }}
           />
           <View className="flex-1 p-4">
-          {projectName ? (
-            <View className="mb-2">
-              <ProjectBadge name={projectName} />
+            {projectName ? (
+              <View className="mb-2">
+                <ProjectBadge name={projectName} />
+              </View>
+            ) : null}
+            <View className="flex-row justify-between items-center mb-2">
+              <View
+                className="px-2.5 py-0.5 rounded-full"
+                style={{ backgroundColor: theme.colors.backgroundTertiary }}
+              >
+                <Text className="text-[12px] font-semibold text-text-tertiary">
+                  {incident.incidentNumberWithPrefix ||
+                    `#${incident.incidentNumber}`}
+                </Text>
+              </View>
+              <Text className="text-[12px] text-text-tertiary">
+                {timeString}
+              </Text>
             </View>
-          ) : null}
-          <View className="flex-row justify-between items-center mb-2">
-            <View
-              className="px-2.5 py-0.5 rounded-full"
-              style={{ backgroundColor: theme.colors.backgroundTertiary }}
+
+            <Text
+              className="text-body-lg text-text-primary font-semibold mt-0.5"
+              numberOfLines={2}
             >
-              <Text className="text-[12px] font-semibold text-text-tertiary">
-                {incident.incidentNumberWithPrefix ||
-                  `#${incident.incidentNumber}`}
-              </Text>
-            </View>
-            <Text className="text-[12px] text-text-tertiary">{timeString}</Text>
-          </View>
+              {incident.title}
+            </Text>
 
-          <Text
-            className="text-body-lg text-text-primary font-semibold mt-0.5"
-            numberOfLines={2}
-          >
-            {incident.title}
-          </Text>
-
-          <View className="flex-row flex-wrap gap-2 mt-3">
-            {incident.currentIncidentState ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{
-                  backgroundColor: theme.colors.backgroundTertiary,
-                }}
-              >
+            <View className="flex-row flex-wrap gap-2 mt-3">
+              {incident.currentIncidentState ? (
                 <View
-                  className="w-2 h-2 rounded-full mr-1.5"
-                  style={{ backgroundColor: stateColor }}
-                />
-                <Text className="text-[12px] font-semibold text-text-primary">
-                  {incident.currentIncidentState.name}
-                </Text>
-              </View>
-            ) : null}
-
-            {incident.incidentSeverity ? (
-              <View
-                className="flex-row items-center px-2.5 py-1 rounded-full"
-                style={{ backgroundColor: severityColor + "15" }}
-              >
-                <Text
-                  className="text-[12px] font-semibold"
-                  style={{ color: severityColor }}
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{
+                    backgroundColor: theme.colors.backgroundTertiary,
+                  }}
                 >
-                  {incident.incidentSeverity.name}
+                  <View
+                    className="w-2 h-2 rounded-full mr-1.5"
+                    style={{ backgroundColor: stateColor }}
+                  />
+                  <Text className="text-[12px] font-semibold text-text-primary">
+                    {incident.currentIncidentState.name}
+                  </Text>
+                </View>
+              ) : null}
+
+              {incident.incidentSeverity ? (
+                <View
+                  className="flex-row items-center px-2.5 py-1 rounded-full"
+                  style={{ backgroundColor: severityColor + "15" }}
+                >
+                  <Text
+                    className="text-[12px] font-semibold"
+                    style={{ color: severityColor }}
+                  >
+                    {incident.incidentSeverity.name}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
+
+            {monitorCount > 0 ? (
+              <View className="flex-row items-center mt-3">
+                <Ionicons
+                  name="desktop-outline"
+                  size={12}
+                  color={theme.colors.textTertiary}
+                  style={{ marginRight: 5 }}
+                />
+                <Text
+                  className="text-[12px] text-text-secondary flex-1"
+                  numberOfLines={1}
+                >
+                  {incident.monitors
+                    .map((m: NamedEntity) => {
+                      return m.name;
+                    })
+                    .join(", ")}
                 </Text>
               </View>
             ) : null}
           </View>
-
-          {monitorCount > 0 ? (
-            <View className="flex-row items-center mt-3">
-              <Ionicons
-                name="desktop-outline"
-                size={12}
-                color={theme.colors.textTertiary}
-                style={{ marginRight: 5 }}
-              />
-              <Text
-                className="text-[12px] text-text-secondary flex-1"
-                numberOfLines={1}
-              >
-                {incident.monitors
-                  .map((m: NamedEntity) => {
-                    return m.name;
-                  })
-                  .join(", ")}
-              </Text>
-            </View>
-          ) : null}
-        </View>
         </View>
       </GlassCard>
     </TouchableOpacity>
diff --git a/MobileApp/src/components/Logo.tsx b/MobileApp/src/components/Logo.tsx
index 838e24e5b2..46083c815f 100644
--- a/MobileApp/src/components/Logo.tsx
+++ b/MobileApp/src/components/Logo.tsx
@@ -7,14 +7,12 @@ interface LogoProps {
   style?: ViewStyle;
 }
 
-export default function Logo({ size = 32, style }: LogoProps): React.JSX.Element {
+export default function Logo({
+  size = 32,
+  style,
+}: LogoProps): React.JSX.Element {
   return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      style={style}
-    >
+    <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
       <Path
         fill="#c1c0ff"
         d="M12,14.19531c-0.17551-0.00004-0.34793-0.04618-0.5-0.13379l-9-5.19726C2.02161,8.58794,1.85779,7.97612,2.13411,7.49773C2.22187,7.34579,2.34806,7.2196,2.5,7.13184l9-5.19336c0.30964-0.17774,0.69036-0.17774,1,0l9,5.19336c0.4784,0.27632,0.64221,0.88814,0.36589,1.36653C21.77813,8.65031,21.65194,8.7765,21.5,8.86426l-9,5.19726C12.34793,14.14913,12.17551,14.19527,12,14.19531z"
diff --git a/MobileApp/src/navigation/MainTabNavigator.tsx b/MobileApp/src/navigation/MainTabNavigator.tsx
index b410de3e4c..eef449b787 100644
--- a/MobileApp/src/navigation/MainTabNavigator.tsx
+++ b/MobileApp/src/navigation/MainTabNavigator.tsx
@@ -27,11 +27,7 @@ function TabIcon({
 }): React.JSX.Element {
   return (
     <View className="items-center">
-      <Ionicons
-        name={focused ? focusedName : name}
-        size={24}
-        color={color}
-      />
+      <Ionicons name={focused ? focusedName : name} size={24} color={color} />
       {focused ? (
         <View
           className="w-1 h-1 rounded-full mt-1"
diff --git a/MobileApp/src/screens/AlertDetailScreen.tsx b/MobileApp/src/screens/AlertDetailScreen.tsx
index 7018e294cd..1713c112f5 100644
--- a/MobileApp/src/screens/AlertDetailScreen.tsx
+++ b/MobileApp/src/screens/AlertDetailScreen.tsx
@@ -25,7 +25,7 @@ import { rgbToHex } from "../utils/color";
 import { formatDateTime } from "../utils/date";
 import type { AlertsStackParamList } from "../navigation/types";
 import { QueryClient, useQueryClient } from "@tanstack/react-query";
-import type { AlertState, NoteItem } from "../api/types";
+import type { AlertState } from "../api/types";
 import AddNoteModal from "../components/AddNoteModal";
 import FeedTimeline from "../components/FeedTimeline";
 import SkeletonCard from "../components/SkeletonCard";
diff --git a/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx b/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx
index 872451348b..e85586baec 100644
--- a/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx
+++ b/MobileApp/src/screens/AlertEpisodeDetailScreen.tsx
@@ -27,7 +27,7 @@ import { rgbToHex } from "../utils/color";
 import { formatDateTime } from "../utils/date";
 import type { AlertsStackParamList } from "../navigation/types";
 import { QueryClient, useQueryClient } from "@tanstack/react-query";
-import type { AlertState, NoteItem } from "../api/types";
+import type { AlertState } from "../api/types";
 import AddNoteModal from "../components/AddNoteModal";
 import FeedTimeline from "../components/FeedTimeline";
 import SkeletonCard from "../components/SkeletonCard";
diff --git a/MobileApp/src/screens/BiometricLockScreen.tsx b/MobileApp/src/screens/BiometricLockScreen.tsx
index abcdb9dc6d..e1718a22f6 100644
--- a/MobileApp/src/screens/BiometricLockScreen.tsx
+++ b/MobileApp/src/screens/BiometricLockScreen.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { View, Text } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
 import { useTheme } from "../theme";
 import * as LocalAuthentication from "expo-local-authentication";
 import Logo from "../components/Logo";
diff --git a/MobileApp/src/screens/IncidentDetailScreen.tsx b/MobileApp/src/screens/IncidentDetailScreen.tsx
index 3964bf0ebd..a9ab878ec5 100644
--- a/MobileApp/src/screens/IncidentDetailScreen.tsx
+++ b/MobileApp/src/screens/IncidentDetailScreen.tsx
@@ -32,12 +32,7 @@ import SectionHeader from "../components/SectionHeader";
 import NotesSection from "../components/NotesSection";
 import GlassCard from "../components/GlassCard";
 import { useHaptics } from "../hooks/useHaptics";
-import type {
-  IncidentItem,
-  IncidentState,
-  NoteItem,
-  NamedEntity,
-} from "../api/types";
+import type { IncidentItem, IncidentState, NamedEntity } from "../api/types";
 
 type Props = NativeStackScreenProps<IncidentsStackParamList, "IncidentDetail">;
 
diff --git a/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx b/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx
index 04688d3ed0..a95f54c3d5 100644
--- a/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx
+++ b/MobileApp/src/screens/IncidentEpisodeDetailScreen.tsx
@@ -26,7 +26,7 @@ import {
 import { rgbToHex } from "../utils/color";
 import { formatDateTime } from "../utils/date";
 import type { IncidentsStackParamList } from "../navigation/types";
-import type { IncidentState, NoteItem } from "../api/types";
+import type { IncidentState } from "../api/types";
 import { useQueryClient } from "@tanstack/react-query";
 import AddNoteModal from "../components/AddNoteModal";
 import FeedTimeline from "../components/FeedTimeline";