From 9d47d6790fb3c480179db494eeb9112b1f1a6139 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 26 Nov 2025 15:55:40 +0100
Subject: [PATCH] [Glitch] Fix null access error in card component

Port ee7e756e89ab116fdff09827205cfd2414d2bf23 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/api_types/statuses.ts        | 2 +-
 .../flavours/glitch/features/status/components/card.tsx     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/api_types/statuses.ts b/app/javascript/flavours/glitch/api_types/statuses.ts
index 4ecb34bfe1..36468ce3bf 100644
--- a/app/javascript/flavours/glitch/api_types/statuses.ts
+++ b/app/javascript/flavours/glitch/api_types/statuses.ts
@@ -51,7 +51,7 @@ export interface ApiPreviewCardJSON {
   html: string;
   width: number;
   height: number;
-  image: string;
+  image: string | null;
   image_description: string;
   embed_url: string;
   blurhash: string;
diff --git a/app/javascript/flavours/glitch/features/status/components/card.tsx b/app/javascript/flavours/glitch/features/status/components/card.tsx
index 42ad34fe41..ef1b05064f 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.tsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.tsx
@@ -103,9 +103,9 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
       : card.get('provider_name');
   const interactive = card.get('type') === 'video';
   const language = card.get('language') || '';
+  const hasImage = (card.get('image')?.length ?? 0) > 0;
   const largeImage =
-    (card.get('image').length > 0 && card.get('width') > card.get('height')) ||
-    interactive;
+    (hasImage && card.get('width') > card.get('height')) || interactive;
   const showAuthor = !!card.getIn(['authors', 0, 'accountId']);
 
   const description = (
@@ -171,7 +171,7 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
   const thumbnailDescription = card.get('image_description');
   const thumbnail = (
     <img
-      src={card.get('image')}
+      src={card.get('image') ?? undefined}
       alt={thumbnailDescription}
       title={thumbnailDescription}
       lang={language}