[12.x] Update local exception page (#57036)

* Configure Vite with Tailwind CSS

* Register new renderer template

* Base layout with static content

* Use dashed border

* Add separator

* Replace hard-coded values

* Replace hard-coded query

* Add empty state

* Clean up section container

* Clean up

* Add section-container

* Use section-container in topbar

* Clean up

* Extract query component

* Add request-header component

* Add request-body component

* Add routing component

* Add routing-parameter component

* Add overview component

* Add request-url component

* Add header component

* Add topbar component

* Add trace component skeleton

* Group exception frames

* Add formatted-source and file-with-line components

* Add frames

* Add previous frame

* Show code snippet without syntax highlight

* Use exceptionAsMarkdown

* Remove unused props

* Assign snippet to a variable

* Syntax highlight code snippet

* Update phiki

* Syntax highlight query, body, and route parameters

* Update phiki

* Use LineDecoration to highlight code snippet

* Unescape highlighted text

* Add syntax-highlight component

* Handle files with less than 5 lines

* Install Alpine.js

* Add layout component

* Add laravel-ascii component

* Update method badge

* Mark frame as main

* Expand/collapse frames

* Use current color in SVGs

* Don't show callable when the frame doesn't have a class

* Copy request URL to clipboard

* Truncate long source

* Add tooltip

* wip: tooltip

* Add side prop to tooltip

* Add tooltip on request url

* Prevent non-vendor frame from overflowing

* Allow horizontal scroll on request body

* Add tooltip on request headers

* Add tooltip on database query

* Hide JS-dependent elements until Alpine is loaded

* Paginate queries

* Add database icon

* Add folder icons

* Add copy icon

* Add globe icon

* Add alert icon

* Copy exception as markdown

* Add badge component

* Add http-method component

* Expand frames on clicking parent div

* Open file in editor

* Use pointer cursor on pagination buttons

* Replace custom tooltip component with tippy.js

* Upgrade phiki/phiki

* Use dark-plus theme

* Use dvh instead of screen

* wip: light mode

* Style gutter text

* Only show the first 100 queries

* light mode styling

* Add light theme for syntax highlighter

* Uppercase keys

* Style copy as markdown button

* Clean up

* Add hover effect on laravel ascii logo

* Add shadow

* Fix tooltip position for queries

* Tweak padding for mobile

* Allow HTML in tooltip

* Show frame arguments

* Syntax highlight frame source

* Add markdown template

* Replace renderer directory

* Simplify CSS rendering

* Remove unused method

* Revert unintended changes

* Rename array key

* Rename type to operator

* Set max width for tooltip

* Display vendor frames in two lines

* Apply fixes from StyleCI

* Add empty state for routing context

* Only round top corners when frame is expanded

* Update dot color for non-vendor frame

* Update topbar height

* Adjust padding around header section

* Move up request url and have it overlap the separator line

* Adjust spacing

* Adjust spacing for mobile

* Replace shadow-sm with shadow-xs

* Apply bg-white without opacity in light mode

* Adjust spacing

---------

Co-authored-by: StyleCI Bot <bot@styleci.io>

Author: 2 people

composer.json

@@ -40,6 +40,7 @@
         "monolog/monolog": "^3.0",
         "nesbot/carbon": "^3.8.4",
         "nunomaduro/termwind": "^2.0",
+        "phiki/phiki": "v2.0.0",
         "psr/container": "^1.1.1|^2.0.1",
         "psr/log": "^1.0|^2.0|^3.0",
         "psr/simple-cache": "^1.0|^2.0|^3.0",

src/Illuminate/Foundation/resources/exceptions/renderer/components/overview.blade.php

@@ -0,0 +1,30 @@
+@props(['request'])
+
+<div class="flex flex-col gap-3">
+    <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Overview</h2>
+    <div class="flex flex-col">
+        <!-- Date Row -->
+        <div class="flex items-center gap-2 h-10">
+            <div class="text-sm font-mono text-neutral-500 dark:text-neutral-400 uppercase">DATE</div>
+            <div class="flex-1 h-3 border-b-2 border-dotted border-neutral-300 dark:border-white/20"></div>
+            <div class="text-sm font-mono text-neutral-900 dark:text-white">
+                {{ now()->format('Y/m/d H:i:s.v') }} <span class="text-neutral-500">UTC</span>
+            </div>
+        </div>
+        <!-- Status Code Row -->
+        <div class="flex items-center gap-2 h-10">
+            <div class="text-sm font-mono text-neutral-500 dark:text-neutral-400 uppercase">STATUS CODE</div>
+            <div class="flex-1 h-3 border-b-2 border-dotted border-neutral-300 dark:border-white/20"></div>
+            <x-laravel-exceptions-renderer::badge type="error" variant="solid">
+                <x-laravel-exceptions-renderer::icons.alert class="w-2.5 h-2.5" />
+                500
+            </x-laravel-exceptions-renderer::badge>
+        </div>
+        <!-- Method Row -->
+        <div class="flex items-center gap-2 h-10">
+            <div class="text-sm font-mono text-neutral-500 dark:text-neutral-400 uppercase">METHOD</div>
+            <div class="flex-1 h-3 border-b-2 border-dotted border-neutral-300 dark:border-white/20"></div>
+            <x-laravel-exceptions-renderer::http-method method="{{ $request->method() }}" />
+        </div>
+    </div>
+</div>