Updated the error pages

app/controllers/errors_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class ErrorsController < ApplicationController
+  layout -> { ErrorsLayout }
+
+  def not_found
+    render Errors::NotFoundView.new, status: :not_found
+  end
+
+  def internal_server_error
+    render Errors::InternalServerErrorView.new, status: :internal_server_error
+  end
+end

app/views/errors/internal_server_error_view.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class Errors::InternalServerErrorView < ApplicationView
+  def template
+    render PhlexUI::Card.new(class: "p-8 space-y-6 flex flex-col items-center") do
+      div(class: 'space-y-2') do
+        render PhlexUI::Badge.new(variant: :destructive, class: 'font-mono') { "STATUS: 500" }
+        render PhlexUI::Typography::H1.new(class: '!leading-tight') { "Oops! Something went wrong" }
+        render PhlexUI::Typography::P.new(class: 'text-muted-foreground') { "Something unexpected happened. We're looking into it." }
+      end
+
+      render PhlexUI::Link.new(href: helpers.root_path, variant: :primary, class: 'w-full') do
+        house_icon
+        plain "Go to home"
+      end
+    end
+  end
+
+  private
+
+  def back_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d: "M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+      )
+    end
+  end
+
+  def house_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d:
+          "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      )
+    end
+  end
+end

app/views/errors/not_found_view.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class Errors::NotFoundView < ApplicationView
+  def template
+    render PhlexUI::Card.new(class: "p-8 space-y-6 flex flex-col items-center") do
+      div(class: 'space-y-2') do
+        render PhlexUI::Badge.new(variant: :purple, class: 'font-mono') { "STATUS: 404" }
+        render PhlexUI::Typography::H1.new(class: '!leading-tight') { "Oops! Page not found" }
+        render PhlexUI::Typography::P.new(class: 'text-muted-foreground') { "The page you were looking for doesn't exist." }
+      end
+
+      render PhlexUI::Link.new(href: helpers.root_path, variant: :primary, class: 'w-full') do
+        house_icon
+        plain "Go to home"
+      end
+    end
+  end
+
+  private
+
+  def back_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d: "M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+      )
+    end
+  end
+
+  def house_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d:
+          "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      )
+    end
+  end
+end

app/views/layouts/errors_layout.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class ErrorsLayout < ApplicationView
+	include Phlex::Rails::Layout
+
+	def template(&block)
+		doctype
+
+		html do
+			render Shared::Head.new
+
+			body do
+				main(class: 'relative flex flex-col items-center justify-center gap-y-6 h-screen w-screen overflow-y-scroll') do
+                    render Shared::GridPattern.new
+					render PhlexUI::ThemeToggle.new(class: 'hidden') # In order for dark mode to work, we need to render the theme toggle somewhere in the DOM
+                    render Shared::Logo.new
+                    div(class: "container w-full max-w-md", &block)
+                end
+				render Shared::Flashes.new(notice: helpers.flash[:notice], alert: helpers.flash[:alert])
+			end
+		end
+	end
+end

config/application.rb

@@ -25,5 +25,7 @@ class Application < Rails::Application
     # config.eager_load_paths << Rails.root.join("extras")
 
     config.middleware.use Rack::WWW, :www => false # redirects all requests to naked domain
+
+    config.exceptions_app = self.routes # redirects all exceptions to custom error pages (See routes)
   end
 end

config/routes.rb

@@ -1,4 +1,5 @@
 Rails.application.routes.draw do
+  resources :errors, only: [:not_found, :internal_server_error]
   get 'license', to: 'pages#license', as: :license
   get 'support', to: 'pages#support', as: :support
 
@@ -54,5 +55,9 @@
     get 'tooltip', to: 'docs#tooltip', as: :docs_tooltip
     get 'typography', to: 'docs#typography', as: :docs_typography
   end
+
+  match "/404", to: "errors#not_found", via: :all
+  match "/500", to: "errors#internal_server_error", via: :all
+
   root "pages#home"
 end

test/controllers/errors_controller_test.rb

@@ -0,0 +1,13 @@
+require "test_helper"
+
+class ErrorsControllerTest < ActionDispatch::IntegrationTest
+  test "should get not_found" do
+    get errors_not_found_url
+    assert_response :success
+  end
+
+  test "should get internal_server_error" do
+    get errors_internal_server_error_url
+    assert_response :success
+  end
+end