From 9646e67ff7c022920ee41c8dc3f2fdb18217ed41 Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Thu, 17 Nov 2022 12:05:25 -0500
Subject: [PATCH] Improve the rendering of errors on thumbnails & rendered
 images

---
 dist/www/index.html | 27 ++++++++++++++++++++++++-
 src/UI.purs         | 49 ++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/dist/www/index.html b/dist/www/index.html
index 62882e8..96d82a4 100644
--- a/dist/www/index.html
+++ b/dist/www/index.html
@@ -42,7 +42,7 @@ p {
 	align-items: center;
 	justify-content: center;
 }
-.thumbnail-card span {
+.thumbnail-card .error-msg {
 	max-width: 300px;
 	max-height: 300px;
 	text-align: center;
@@ -56,6 +56,12 @@ p {
 	height: 400px;
 	width: 400px;
 }
+.thumb-icon {
+	font-size: 40px;
+	color: rgba(0,0,0,50%);
+	line-height: 0.5;
+	margin-bottom: 20px;
+}
 #focused-panel {
 	position: fixed;
 	top: 0;
@@ -105,6 +111,25 @@ p {
 	right: 0;
 	padding: 5px 40px;
 }
+#focused-panel .error-msg .full-icon {
+	font-size: 150px;
+	color: #f33;
+}
+#focused-panel .error-msg span {
+	line-height: 1.3;
+}
+#focused-panel .error-msg {
+	max-width: 400px;
+	text-align: center;
+	background-color: rgba(50, 20, 30, 80%);
+	border: 3px solid #f33;
+	border-radius: 6px;
+	padding: 40px;
+	padding-bottom: 60px;
+}
+#focused-panel .error-frame {
+	border-radius: 6px;
+}
 #focused-panel.unzoomed > div.blurhash-frame {
 	max-height: 80vh;
 	max-width: 60vw;
diff --git a/src/UI.purs b/src/UI.purs
index 1543018..9486262 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -50,17 +50,31 @@ renderThumbnail pos image =
                     ]
                 ]
             Retrying _ e ->
-                [ HH.span
+                [ HH.div
                     [ HP.class_ $ ClassName "error-msg"
                     ]
-                    [ HH.text $ "Error!  " <> (show e)
+                    [ HH.p
+                        [ HP.class_ $ ClassName "thumb-icon"
+                        ]
+                        [ HH.text "⚠"
+                        ]
+                    , HH.span_
+                        [ HH.text $ show e
+                        ]
                     ]
                 ]
             IError e ->
-                [ HH.span
+                [ HH.div
                     [ HP.class_ $ ClassName "error-msg"
                     ]
-                    [ HH.text $ "Error!  " <> (show e)
+                    [ HH.p
+                        [ HP.class_ $ ClassName "thumb-icon"
+                        ]
+                        [ HH.text "⚠"
+                        ]
+                    , HH.span_
+                        [ HH.text $ show e
+                        ]
                     ]
                 ]
             ILoaded url ->
@@ -102,11 +116,18 @@ renderFocused zoom image =
             [ HP.style
                  case image.full of
                     ILoaded _ -> ""
+                    IError _ ->
+                         maybe "" backgroundUrl (image.blurhashUrl)
+                    Retrying _ _ ->
+                         maybe "" backgroundUrl (image.blurhashUrl)
                     _ ->
                         (  maybe "" backgroundUrl (image.blurhashUrl)
                         <> widthHeight image.width image.height
                         )
-            , HP.class_ $ ClassName "blurhash-frame"
+            , HP.classes $ ClassName <$> case image.full of
+                IError _ -> ["blurhash-frame", "error-frame"]
+                Retrying _ _ -> ["blurhash-frame", "error-frame"]
+                _ -> ["blurhash-frame"]
             ]
             case image.full of
                 Unloaded _ -> []
@@ -121,14 +142,28 @@ renderFocused zoom image =
                     [ HH.span
                         [ HP.class_ $ ClassName "error-msg"
                         ]
-                        [ HH.text $ "Error!  " <> (show e)
+                        [ HH.p
+                            [ HP.class_ $ ClassName "full-icon"
+                            ]
+                            [ HH.text "⚠"
+                            ]
+                        , HH.span_
+                            [ HH.text $ show e
+                            ]
                         ]
                     ]
                 Retrying _ e ->
                     [ HH.span
                         [ HP.class_ $ ClassName "error-msg"
                         ]
-                        [ HH.text $ "Error!  " <> (show e)
+                        [ HH.p
+                            [ HP.class_ $ ClassName "full-icon"
+                            ]
+                            [ HH.text "⚠"
+                            ]
+                        , HH.span_
+                            [ HH.text $ show e
+                            ]
                         ]
                     ]
                 ILoaded url ->