add switzerland flag

app/(home)/status/api.ts

···
     nodes: ApiNode[];
 }
 
-export async function getStatus(): Promise<ApiV1StatusGetResponse | ApiError | undefined> {
+export async function getStatus(): Promise<ApiV1StatusGetResponse | ApiError | null> {
     const res = await fetch(
         `${process.env.NEXT_PUBLIC_API}/status`,
         {
···
         }
     );
 
+    if (!res.ok) return null;
     return res.json();
 }

app/(home)/status/page.tsx

···
+import Notice from "@/components/notice";
 import { Section } from "@/components/section";
 
 import { getStatus } from "./api";
···
 
 export default async function Home() {
     const status = await getStatus();
-
-    if (!status || "message" in status) return;
+    const error = !status || "message" in status;
 
     return (<>
         <div className="md:flex gap-4 mb-12">
-            <div className="space-y-2 w-full md:w-3/4">
-                {status.clusters.map((cluster) => (
-                    <Cluster
-                        key={"cluster-" + cluster.id}
-                        {...cluster}
-                    />
-                ))}
-            </div>
+            {error
+                ? <Notice message="Failed to fetch cluster status" />
+                :
+                <div className="space-y-2 w-full md:w-3/4">
+                    {status.clusters.map((cluster) => (
+                        <Cluster
+                            key={"cluster-" + cluster.id}
+                            {...cluster}
+                        />
+                    ))}
+                </div>
+            }
 
-            <div className="lg:w-1/4 md:w-1/3 mt-8 md:mt-0">
-                <Side
-                    status={status}
-                />
-            </div>
+            {!error && (
+                <div className="lg:w-1/4 md:w-1/3 mt-8 md:mt-0">
+                    <Side status={status} />
+                </div>
+            )}
         </div>
 
         <Section title="TTS & VC Nodes">
             The streaming servers used for in Voice-Chat Text to Speech!
         </Section>
 
-        <div className="grid gap-2 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full">
-            {status.nodes.map((node, i) => (
-                <Node
-                    key={"node-" + node.id}
-                    node={node}
-                    index={i + 1}
-                />
-            ))}
-        </div>
+        {error
+            ? <Notice message="Failed to fetch node status" />
+            : <div className="grid gap-2 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full">
+                {status.nodes.map((node, i) => (
+                    <Node
+                        key={"node-" + node.id}
+                        node={node}
+                        index={i + 1}
+                    />
+                ))}
+            </div>
+        }
     </>);
 }

app/(home)/status/side.component.tsx

···
     const [guildId, setGuildId] = useState<string>("");
 
     const clusterId = useMemo(
-        () => /^\d{15,20}$/.test(guildId) ?
-            getClusterId(guildId || "", status.clusters.length)
+        () => /^\d{15,20}$/.test(guildId)
+            ? getClusterId(guildId || "", status.clusters.length)
             : null,
         [guildId]
     );