From 2be41475e60fcd8d35c81ad0291a39044cfbf82e Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sun, 28 Jan 2024 16:19:46 -0800
Subject: [PATCH] Better format

---
 src-web/components/ResponseHeaders.tsx | 29 +++++++++++++++++++++-----
 src-web/main.css                       |  1 +
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src-web/components/ResponseHeaders.tsx b/src-web/components/ResponseHeaders.tsx
index 5fc78186..a69d8a2f 100644
--- a/src-web/components/ResponseHeaders.tsx
+++ b/src-web/components/ResponseHeaders.tsx
@@ -1,5 +1,8 @@
+import { invoke, shell } from '@tauri-apps/api';
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import type { HttpResponse } from '../lib/models';
+import { IconButton } from './core/IconButton';
 import { Separator } from './core/Separator';
 import { HStack } from './core/Stacks';
 
@@ -19,9 +22,25 @@ export function ResponseHeaders({ response }: Props) {
       <dl className="text-xs w-full font-mono divide-highlightSecondary">
         <Row label="Version" value={response.version} />
         <Row label="Remote Address" value={response.remoteAddr} />
-        <Row label="Status" value={response.status} />
-        <Row label="Reason" value={response.statusReason} />
-        <Row label="URL" value={response.url} />
+        <Row
+          label={
+            <div className="flex items-center">
+              URL
+              <IconButton
+                iconSize="sm"
+                className="inline-block w-auto ml-1 !h-auto opacity-50 hover:opacity-100"
+                icon="externalLink"
+                onClick={() => shell.open(response.url)}
+                title="Open in browser"
+              />
+            </div>
+          }
+          value={
+            <div className="flex">
+              <span className="select-text cursor-text">{response.url}</span>
+            </div>
+          }
+        />
       </dl>
     </div>
   );
@@ -32,8 +51,8 @@ function Row({
   value,
   labelClassName,
 }: {
-  label: string;
-  value: string | number;
+  label: ReactNode;
+  value: ReactNode;
   labelClassName?: string;
 }) {
   return (
diff --git a/src-web/main.css b/src-web/main.css
index c03f2b33..2eb0a0e2 100644
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -21,6 +21,7 @@
   }
 
   /* Disable user selection to make it more "app-like" */
+  :not(a),
   :not(input):not(textarea),
   :not(input):not(textarea)::after,
   :not(input):not(textarea)::before {