Improve design of placeholder item

Also makes it show the error backtrace

assets/css/default.css

@@ -816,3 +816,50 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+.error-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 25px;
+  margin-bottom: 1em;
+  border-radius: 10px;
+  border: 1px solid black;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.error-card > .explanation {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  grid-template-rows: 1fr max-content;
+  column-gap: 10px;
+  row-gap: 4px;
+}
+
+.error-card > .explanation > i {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.error-card > .explanation > h4 {
+  grid-area: 1 / 2 / 2 / 3;
+  margin: 0;
+}
+
+.error-card > .explanation > p {
+  grid-area: 2 / 2 / 3 / 3;
+  margin: 0;
+}
+
+.error-card details {
+  margin-top: 10px;
+  width: 100%;
+}
+
+.error-card summary {
+  width: 100%;
+}
+
+.error-card pre {
+  height: 300px;
+}

locales/en-US.json

@@ -501,5 +501,7 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "timeline_parse_error_placeholder_heading": "Unable to parse item",
+    "timeline_parse_error_placeholder_message": "Invidious encountered an error while trying to parse this item. For more information see below:"
 }

src/invidious/helpers/errors.cr

@@ -18,16 +18,7 @@ def github_details(summary : String, content : String)
   return HTML.escape(details)
 end
 
-def error_template_helper(env : HTTP::Server::Context, status_code : Int32, exception : Exception)
-  if exception.is_a?(InfoException)
-    return error_template_helper(env, status_code, exception.message || "")
-  end
-
-  locale = env.get("preferences").as(Preferences).locale
-
-  env.response.content_type = "text/html"
-  env.response.status_code = status_code
-
+def get_issue_template(env : HTTP::Server::Context, exception : Exception) : Tuple(String, String)
   issue_title = "#{exception.message} (#{exception.class})"
 
   issue_template = <<-TEXT
@@ -40,6 +31,24 @@ def error_template_helper(env : HTTP::Server::Context, status_code : Int32, exce
 
   issue_template += github_details("Backtrace", exception.inspect_with_backtrace)
 
+  return {issue_title, issue_template}
+end
+
+def error_template_helper(env : HTTP::Server::Context, status_code : Int32, exception : Exception)
+  if exception.is_a?(InfoException)
+    return error_template_helper(env, status_code, exception.message || "")
+  end
+
+  locale = env.get("preferences").as(Preferences).locale
+
+  env.response.content_type = "text/html"
+  env.response.status_code = status_code
+
+  # Unpacking into issue_title, issue_template directly causes a compiler error
+  # I have no idea why.
+  issue_template_components = get_issue_template(env, exception)
+  issue_title, issue_template = issue_template_components
+
   # URLs for the error message below
   url_faq = "https://github.com/iv-org/documentation/blob/master/docs/faq.md"
   url_search_issues = "https://github.com/iv-org/invidious/issues"

src/invidious/views/components/item.ecr

@@ -98,8 +98,16 @@
             </div>
         <% when Category %>
         <% when ProblematicTimelineItem %>
-            <div>
-            <h4> Unable to parse this item </h4>
+            <div class="error-card">
+                <div class="explanation">
+                    <i class="icon ion-ios-alert"></i>
+                    <h4><%=translate(locale, "timeline_parse_error_placeholder_heading")%></h4>
+                    <p><%=translate(locale, "timeline_parse_error_placeholder_message")%></p>
+                </div>
+                <details>
+                    <summary class="pure-button pure-button-secondary"> Show technical details </summary>
+                    <pre style="padding: 20px; background: rgba(0, 0, 0, 0.12345);"><%=get_issue_template(env, item.parse_exception)[1]%></pre>
+                </details>
             </div>
         <% else %>
             <%-