From 6f65e9d3cd910d80214635e45f3cc37d674b44f6 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 20:10:00 +0200
Subject: [PATCH 01/10] add min w to message log

---
 islands/Log.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 5129c41..a5316da 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -27,6 +27,7 @@ export default function Log() {
             ? "block"
             : "none",
         }}
+        class="md:min-w-[250px]"
       >
         {lastMessage}
       </pre>

From b4b97e81b02a473b154335512b80b11ed2dba1c7 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 20:22:51 +0200
Subject: [PATCH 02/10] move createSecret code to new page

---
 fresh.gen.ts      |  2 ++
 routes/create.tsx | 11 +++++++++++
 routes/index.tsx  | 16 +++++++---------
 utils/routing.ts  | 15 +++++++++++++++
 4 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 routes/create.tsx
 create mode 100644 utils/routing.ts

diff --git a/fresh.gen.ts b/fresh.gen.ts
index cfe976b..cd52b1f 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -7,6 +7,7 @@ import * as $_app from "./routes/_app.tsx";
 import * as $api_create from "./routes/api/create.ts";
 import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts";
 import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts";
+import * as $create from "./routes/create.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $secret_uuid_ from "./routes/secret/[uuid].tsx";
 import * as $CreateSecret from "./islands/CreateSecret.tsx";
@@ -21,6 +22,7 @@ const manifest = {
     "./routes/api/create.ts": $api_create,
     "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
     "./routes/api/secret/[uuid].ts": $api_secret_uuid_,
+    "./routes/create.tsx": $create,
     "./routes/index.tsx": $index,
     "./routes/secret/[uuid].tsx": $secret_uuid_,
   },
diff --git a/routes/create.tsx b/routes/create.tsx
new file mode 100644
index 0000000..ff8b3d5
--- /dev/null
+++ b/routes/create.tsx
@@ -0,0 +1,11 @@
+import CreateSecret from "../islands/CreateSecret.tsx";
+import Log from "../islands/Log.tsx";
+
+export default function CreateSecretPage() {
+  return (
+    <main class="flex flex-col items-center justify-center">
+      <CreateSecret />
+      <Log />
+    </main>
+  );
+}
diff --git a/routes/index.tsx b/routes/index.tsx
index 37c0b79..3f76c5e 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,11 +1,9 @@
-import CreateSecret from "../islands/CreateSecret.tsx";
-import Log from "../islands/Log.tsx";
+import { redirectTo } from "../utils/routing.ts";
 
-export default function Home() {
-  return (
-    <main class="flex flex-col items-center justify-center">
-      <CreateSecret />
-      <Log />
-    </main>
-  );
+/**
+ * @bjesuiter: "async" is required here, otherwise the redirectTo will not work for some reason
+ * (async pages are handled slightly differently in fresh than sync pages)
+ */
+export default async function Home() {
+  return redirectTo("/create");
 }
diff --git a/utils/routing.ts b/utils/routing.ts
new file mode 100644
index 0000000..20c4339
--- /dev/null
+++ b/utils/routing.ts
@@ -0,0 +1,15 @@
+/**
+ * Usage from a route handler:
+ *
+ * ```ts
+ * return redirectTo("/login");
+ * ```
+ */
+export function redirectTo(relativePath: string) {
+  const headers = new Headers();
+  headers.set("location", relativePath);
+  return new Response(null, {
+    status: 303,
+    headers,
+  });
+}

From 15addd216c6b79560c1d08e67d22e1371f0ab6e6 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 21:13:41 +0200
Subject: [PATCH 03/10] wip

---
 fresh.gen.ts                   |  2 ++
 islands/CreateSecret.tsx       |  9 +++---
 islands/Log.tsx                | 53 +++++++++++++---------------------
 islands/messages/StringMsg.tsx | 30 +++++++++++++++++++
 src/formHandler/create.ts      |  5 +++-
 src/formHandler/fetch.ts       | 34 ++++++++++++++++------
 src/utils/crypt.ts             | 20 ++++++++++---
 src/utils/log.ts               | 20 ++++++++++++-
 8 files changed, 120 insertions(+), 53 deletions(-)
 create mode 100644 islands/messages/StringMsg.tsx

diff --git a/fresh.gen.ts b/fresh.gen.ts
index cd52b1f..99ec502 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -13,6 +13,7 @@ import * as $secret_uuid_ from "./routes/secret/[uuid].tsx";
 import * as $CreateSecret from "./islands/CreateSecret.tsx";
 import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
+import * as $messages_StringMsg from "./islands/messages/StringMsg.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -30,6 +31,7 @@ const manifest = {
     "./islands/CreateSecret.tsx": $CreateSecret,
     "./islands/FetchSecret.tsx": $FetchSecret,
     "./islands/Log.tsx": $Log,
+    "./islands/messages/StringMsg.tsx": $messages_StringMsg,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index c33919e..edf40af 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -20,8 +20,7 @@ export default function CreateSecret() {
           name="hidden"
           type="text"
           style="display:none;"
-        >
-        </input>
+        />
         <textarea
           rows={10}
           cols={60}
@@ -29,9 +28,9 @@ export default function CreateSecret() {
           class="w-full p-2 border-2 border-gray-500 rounded"
           placeholder="Passwort, Token oder andere Information..."
         />
-        
-        <ExpireForm/>
-        <PassphraseInput/>
+
+        <ExpireForm />
+        <PassphraseInput />
 
         <button type="submit">Anlegen</button>
       </form>
diff --git a/islands/Log.tsx b/islands/Log.tsx
index a5316da..63b3793 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -1,36 +1,23 @@
-import { lastMessage } from "../src/utils/log.ts";
+import { lastMessage, RichMessage } from "../src/utils/log.ts";
+import StringMsg from "./messages/StringMsg.tsx";
+
+function renderMessage(message: RichMessage | undefined) {
+  if (!message) {
+    return undefined;
+  }
+
+  switch (message.type) {
+    case "string":
+      return <StringMsg text={message.text} />;
+    case "error":
+      return <StringMsg text={message.text} />;
+    case "secretFetch":
+      return <StringMsg text={message.secret} />;
+    case "secretCreate":
+      return <StringMsg text={message.secretLink} />;
+  }
+}
 
 export default function Log() {
-  return (
-    // TODO: enable when tailwind integration is working
-    // <section class="max-w-full w-full overflow-x-auto md:max-w-[80%] md:w-[80%] border-solid border-2 border-gray-300 bg-gray-100 p-2">
-    //   <pre class="wrap-break-word whitespace-pre-wrap">{lastMessage}</pre>
-    // </section>
-    <section>
-      <pre
-        style={{
-          // correct line breaks for really long messages (like base64 encoded certificate secrets)
-          whiteSpace: "pre-wrap",
-          overflowWrap: "anywhere",
-          // styles to mark this as some kind of log output
-          border: "solid 2px gray",
-          padding: "1rem",
-          backgroundColor: "lightgray",
-          // correct sizing
-          maxWidth: "90%",
-          width: "90%",
-          overflow: "auto",
-          maxHeight: "50vh",
-          margin: "0 auto",
-          // hide the log box if there is no message
-          display: lastMessage.value && lastMessage.value.length > 0
-            ? "block"
-            : "none",
-        }}
-        class="md:min-w-[250px]"
-      >
-        {lastMessage}
-      </pre>
-    </section>
-  );
+  return <div>{renderMessage(lastMessage.value)}</div>;
 }
diff --git a/islands/messages/StringMsg.tsx b/islands/messages/StringMsg.tsx
new file mode 100644
index 0000000..80eee27
--- /dev/null
+++ b/islands/messages/StringMsg.tsx
@@ -0,0 +1,30 @@
+export default function StringMsg(props: { text: string }) {
+  return (
+    // TODO: enable when tailwind integration is working
+    // <section class="max-w-full w-full overflow-x-auto md:max-w-[80%] md:w-[80%] border-solid border-2 border-gray-300 bg-gray-100 p-2">
+    //   <pre class="wrap-break-word whitespace-pre-wrap">{lastMessage}</pre>
+    // </section>
+    <section>
+      <pre
+        style={{
+          // correct line breaks for really long messages (like base64 encoded certificate secrets)
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere",
+          // styles to mark this as some kind of log output
+          border: "solid 2px gray",
+          padding: "1rem",
+          backgroundColor: "lightgray",
+          // correct sizing
+          maxWidth: "90%",
+          width: "90%",
+          overflow: "auto",
+          maxHeight: "50vh",
+          margin: "0 auto",
+        }}
+        class="md:min-w-[250px]"
+      >
+        {props.text}
+      </pre>
+    </section>
+  );
+}
diff --git a/src/formHandler/create.ts b/src/formHandler/create.ts
index 610a930..9098700 100644
--- a/src/formHandler/create.ts
+++ b/src/formHandler/create.ts
@@ -10,7 +10,10 @@ export default async function onSubmit(
   const secret = formData.get("secret") as string;
 
   if (!secret || secret.length < 1) {
-    lastMessage.value = "Bitte geben Sie ein Secret ein!";
+    lastMessage.value = {
+      type: "string",
+      text: "Bitte geben Sie ein Secret ein!",
+    };
     return;
   }
 
diff --git a/src/formHandler/fetch.ts b/src/formHandler/fetch.ts
index 6550857..7206104 100644
--- a/src/formHandler/fetch.ts
+++ b/src/formHandler/fetch.ts
@@ -16,20 +16,29 @@ export default async function onSubmit(
   });
 
   if (response.status >= 400) {
-    lastMessage.value =
-      "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig.";
+    lastMessage.value = {
+      type: "error",
+      text:
+        "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig.",
+    };
     return;
   }
 
   const data = await response.json().catch(() =>
-    lastMessage.value =
-      "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig."
+    lastMessage.value = {
+      type: "error",
+      text:
+        "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig.",
+    }
   );
   // turn json object iv into Uint8Array
   data.iv = new Uint8Array(Object.values(data.iv));
   if (data == undefined || data.secret == undefined) {
-    lastMessage.value =
-      "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig.";
+    lastMessage.value = {
+      type: "error",
+      text:
+        "Fehler beim Abrufen des Secrets! Entweder ist der Link abgelaufen oder ungültig.",
+    };
     return;
   }
 
@@ -56,9 +65,16 @@ export default async function onSubmit(
 
   if (hash !== data.hash) {
     console.log(`${hash} !== ${data.hash}`);
-    lastMessage.value =
-      `Verifikation des Secrets fehlgeschlagen. Falsche Passphrase. Verbleibende versuche: ${data.viewsLeft}`;
+    lastMessage.value = {
+      type: "error",
+      text:
+        `Verifikation des Secrets fehlgeschlagen. Falsche Passphrase. Verbleibende versuche: ${data.viewsLeft}`,
+    };
     return;
   }
-  lastMessage.value = `Secret Data: \n${data.secret}`;
+
+  lastMessage.value = {
+    type: "secretFetch",
+    secret: data.secret,
+  };
 }
diff --git a/src/utils/crypt.ts b/src/utils/crypt.ts
index 4e84864..aef030c 100644
--- a/src/utils/crypt.ts
+++ b/src/utils/crypt.ts
@@ -7,7 +7,10 @@ export async function encrypt(key: string, secret: string) {
     ),
   );
   if (!key || key.length < 1) {
-    lastMessage.value = "Bitte geben Sie ein Passphrase ein!";
+    lastMessage.value = {
+      type: "string",
+      text: "Bitte geben Sie eine Passphrase ein!",
+    };
     return;
   }
   const iv = crypto.getRandomValues(new Uint8Array(12));
@@ -38,7 +41,10 @@ export async function decrypt(
   key: string,
 ) {
   if (!key || key.length < 1) {
-    lastMessage.value = "Bitte geben Sie ein Passphrase ein!";
+    lastMessage.value = {
+      type: "string",
+      text: "Bitte geben Sie eine Passphrase ein!",
+    };
     return;
   }
 
@@ -58,7 +64,10 @@ export async function decrypt(
     ["decrypt"],
   ).catch((e) => {
     console.error(e);
-    lastMessage.value = "Fehler beim Entschlüsseln des Secrets!";
+    lastMessage.value = {
+      type: "string",
+      text: "Fehler beim Entschlüsseln des Secrets!",
+    };
     return;
   });
 
@@ -82,7 +91,10 @@ export async function decrypt(
     secret,
   ).catch((e: Error) => {
     console.error(e);
-    lastMessage.value = "Fehler beim Entschlüsseln des Secrets!";
+    lastMessage.value = {
+      type: "string",
+      text: "Fehler beim Entschlüsseln des Secrets!",
+    };
     return;
   });
 
diff --git a/src/utils/log.ts b/src/utils/log.ts
index e4e31f2..17e1d86 100644
--- a/src/utils/log.ts
+++ b/src/utils/log.ts
@@ -1,3 +1,21 @@
 import { signal } from "@preact/signals";
 
-export const lastMessage = signal("");
+export type RichMessage =
+  | {
+    type: "string";
+    text: string;
+  }
+  | {
+    type: "error";
+    text: string;
+  }
+  | {
+    type: "secretFetch";
+    secret: string;
+  }
+  | {
+    type: "secretCreate";
+    secretLink: string;
+  };
+
+export const lastMessage = signal<RichMessage | undefined>(undefined);

From 126490adf700eb12c12b4a87b5a5a84c24fb0689 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 21:22:18 +0200
Subject: [PATCH 04/10] fix create messages

---
 islands/Log.tsx           |  8 +++++++-
 src/formHandler/create.ts | 23 ++++++++++++++++++-----
 src/utils/log.ts          |  2 ++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 63b3793..61ed1e5 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -14,7 +14,13 @@ function renderMessage(message: RichMessage | undefined) {
     case "secretFetch":
       return <StringMsg text={message.secret} />;
     case "secretCreate":
-      return <StringMsg text={message.secretLink} />;
+      return (
+        <div class="flex flex-col items-center justify-center gap-4">
+          <h3>{message.header}</h3>
+          <a href={message.secretLink} target="_blank">{message.secretLink}</a>
+          <p>{message.extraInfo}</p>
+        </div>
+      );
   }
 }
 
diff --git a/src/formHandler/create.ts b/src/formHandler/create.ts
index 9098700..da1b388 100644
--- a/src/formHandler/create.ts
+++ b/src/formHandler/create.ts
@@ -35,7 +35,10 @@ export default async function onSubmit(
 
   if (formData.get("usePassphrase") == "on") {
     if (!encryptionKey) {
-      lastMessage.value = "Bitte geben Sie ein Passphrase ein!";
+      lastMessage.value = {
+        type: "string",
+        text: "Bitte geben Sie ein Passphrase ein!",
+      };
       return;
     }
   } else {
@@ -53,7 +56,10 @@ export default async function onSubmit(
     secret,
   );
   if (encryptedData == undefined) {
-    lastMessage.value = "Fehler beim Verschlüsseln des Secrets!";
+    lastMessage.value = {
+      type: "string",
+      text: "Fehler beim Verschlüsseln des Secrets!",
+    };
     return;
   }
   encryptedSecret = encryptedData.encryptedSecret;
@@ -75,7 +81,10 @@ export default async function onSubmit(
     body: JSON.stringify({ encryptedSecret, expireIn, hash, allowedViews, iv }),
   });
   const data = await response.json().catch(() =>
-    lastMessage.value = "Fehler beim Erstellen des Secrets!"
+    lastMessage.value = {
+      type: "string",
+      text: "Fehler beim Erstellen des Secrets!",
+    }
   );
   if (data && data.link) {
     const secretUrl = `${location.origin}/secret/${data.link}${
@@ -83,7 +92,11 @@ export default async function onSubmit(
     }`;
     // copy url to clipboard
     navigator.clipboard.writeText(secretUrl);
-    lastMessage.value =
-      `Link erstellt: \n${secretUrl} \nLink wurde in die Zwischenablage kopiert!`;
+    lastMessage.value = {
+      type: "secretCreate",
+      secretLink: secretUrl,
+      header: `Link erstellt`,
+      extraInfo: `Link wurde in die Zwischenablage kopiert!`,
+    };
   }
 }
diff --git a/src/utils/log.ts b/src/utils/log.ts
index 17e1d86..c5b210f 100644
--- a/src/utils/log.ts
+++ b/src/utils/log.ts
@@ -16,6 +16,8 @@ export type RichMessage =
   | {
     type: "secretCreate";
     secretLink: string;
+    header?: string;
+    extraInfo?: string;
   };
 
 export const lastMessage = signal<RichMessage | undefined>(undefined);

From 3a04cd35256df5a9b1c6d40c866a5a0913537489 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 21:40:40 +0200
Subject: [PATCH 05/10] improve createSecret message

---
 islands/Log.tsx       | 14 ++++++++++----
 src/utils/cssCache.ts |  4 +++-
 static/styles.css     |  6 ------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 61ed1e5..8c50d4a 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -15,10 +15,16 @@ function renderMessage(message: RichMessage | undefined) {
       return <StringMsg text={message.secret} />;
     case "secretCreate":
       return (
-        <div class="flex flex-col items-center justify-center gap-4">
-          <h3>{message.header}</h3>
-          <a href={message.secretLink} target="_blank">{message.secretLink}</a>
-          <p>{message.extraInfo}</p>
+        <div class="flex flex-col items-center justify-center gap-2">
+          <h3 class="text-lg font-bold">{message.header}</h3>
+          <a
+            class="text-primary-dark border-2 border-primary-dark rounded-md p-2"
+            href={message.secretLink}
+            target="_blank"
+          >
+            {message.secretLink}
+          </a>
+          <p class="text-sm">{message.extraInfo}</p>
         </div>
       );
   }
diff --git a/src/utils/cssCache.ts b/src/utils/cssCache.ts
index 8e222f3..afc87e5 100644
--- a/src/utils/cssCache.ts
+++ b/src/utils/cssCache.ts
@@ -19,7 +19,9 @@ export async function computeTailwindStyles() {
   @import "tailwindcss";
 
   @theme {
-    --color-primary: #60c0ff;
+    --color-primary: oklch(0.7751 0.127965 240.0314);
+    --color-primary-dark: oklch(0.5327 0.1152 242.02);
+
   }
   
   `;
diff --git a/static/styles.css b/static/styles.css
index 548c254..c6a4ad6 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -46,12 +46,6 @@ video {
   height: auto;
 }
 
-a, a:visited {
-  color: black;
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;

From 0c5d9dfb2d37d3c8b2fba2bfb667a891e238107d Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 21:55:22 +0200
Subject: [PATCH 06/10] improve createSecret output

---
 islands/Log.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/islands/Log.tsx b/islands/Log.tsx
index 8c50d4a..2568e0a 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -15,16 +15,16 @@ function renderMessage(message: RichMessage | undefined) {
       return <StringMsg text={message.secret} />;
     case "secretCreate":
       return (
-        <div class="flex flex-col items-center justify-center gap-2">
+        <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-gray-200">
           <h3 class="text-lg font-bold">{message.header}</h3>
           <a
-            class="text-primary-dark border-2 border-primary-dark rounded-md p-2"
+            class="text-primary-dark text-lg"
             href={message.secretLink}
             target="_blank"
           >
             {message.secretLink}
           </a>
-          <p class="text-sm">{message.extraInfo}</p>
+          <p class="">{message.extraInfo}</p>
         </div>
       );
   }

From 352bafa678acc56a37257f82d8ac2ab04853d732 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 22:02:15 +0200
Subject: [PATCH 07/10] extract CardMsg component

---
 fresh.gen.ts                 |  2 ++
 islands/Log.tsx              |  7 +++----
 islands/messages/CardMsg.tsx | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 islands/messages/CardMsg.tsx

diff --git a/fresh.gen.ts b/fresh.gen.ts
index 99ec502..966d3b4 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -13,6 +13,7 @@ import * as $secret_uuid_ from "./routes/secret/[uuid].tsx";
 import * as $CreateSecret from "./islands/CreateSecret.tsx";
 import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
+import * as $messages_CardMsg from "./islands/messages/CardMsg.tsx";
 import * as $messages_StringMsg from "./islands/messages/StringMsg.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
@@ -31,6 +32,7 @@ const manifest = {
     "./islands/CreateSecret.tsx": $CreateSecret,
     "./islands/FetchSecret.tsx": $FetchSecret,
     "./islands/Log.tsx": $Log,
+    "./islands/messages/CardMsg.tsx": $messages_CardMsg,
     "./islands/messages/StringMsg.tsx": $messages_StringMsg,
   },
   baseUrl: import.meta.url,
diff --git a/islands/Log.tsx b/islands/Log.tsx
index 2568e0a..1c7c4aa 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -1,4 +1,5 @@
 import { lastMessage, RichMessage } from "../src/utils/log.ts";
+import CardMsg from "./messages/CardMsg.tsx";
 import StringMsg from "./messages/StringMsg.tsx";
 
 function renderMessage(message: RichMessage | undefined) {
@@ -15,8 +16,7 @@ function renderMessage(message: RichMessage | undefined) {
       return <StringMsg text={message.secret} />;
     case "secretCreate":
       return (
-        <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-gray-200">
-          <h3 class="text-lg font-bold">{message.header}</h3>
+        <CardMsg header={message.header} extraInfo={message.extraInfo}>
           <a
             class="text-primary-dark text-lg"
             href={message.secretLink}
@@ -24,8 +24,7 @@ function renderMessage(message: RichMessage | undefined) {
           >
             {message.secretLink}
           </a>
-          <p class="">{message.extraInfo}</p>
-        </div>
+        </CardMsg>
       );
   }
 }
diff --git a/islands/messages/CardMsg.tsx b/islands/messages/CardMsg.tsx
new file mode 100644
index 0000000..538b3fb
--- /dev/null
+++ b/islands/messages/CardMsg.tsx
@@ -0,0 +1,17 @@
+import { JSX } from "preact/jsx-runtime";
+
+export default function CardMsg(
+  props: {
+    header?: string;
+    extraInfo?: string;
+    children: JSX.Element | undefined;
+  },
+) {
+  return (
+    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-gray-200">
+      {props.header && <h3 class="text-lg font-bold">{props.header}</h3>}
+      {props.children}
+      {props.extraInfo && <p>{props.extraInfo}</p>}
+    </div>
+  );
+}

From 35880f24fb30cf30ec005768c1e65e0b8bf98fd2 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 22:21:53 +0200
Subject: [PATCH 08/10] imporve style of fetchSecret

---
 fresh.gen.ts                   |  2 --
 islands/Log.tsx                |  8 +++++++-
 islands/messages/StringMsg.tsx | 30 ------------------------------
 3 files changed, 7 insertions(+), 33 deletions(-)
 delete mode 100644 islands/messages/StringMsg.tsx

diff --git a/fresh.gen.ts b/fresh.gen.ts
index 966d3b4..6c175c6 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -14,7 +14,6 @@ import * as $CreateSecret from "./islands/CreateSecret.tsx";
 import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
 import * as $messages_CardMsg from "./islands/messages/CardMsg.tsx";
-import * as $messages_StringMsg from "./islands/messages/StringMsg.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -33,7 +32,6 @@ const manifest = {
     "./islands/FetchSecret.tsx": $FetchSecret,
     "./islands/Log.tsx": $Log,
     "./islands/messages/CardMsg.tsx": $messages_CardMsg,
-    "./islands/messages/StringMsg.tsx": $messages_StringMsg,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;
diff --git a/islands/Log.tsx b/islands/Log.tsx
index 1c7c4aa..78f7386 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -13,7 +13,13 @@ function renderMessage(message: RichMessage | undefined) {
     case "error":
       return <StringMsg text={message.text} />;
     case "secretFetch":
-      return <StringMsg text={message.secret} />;
+      return (
+        <CardMsg header="Secret Data">
+          <pre class="monospace whitespace-pre-wrap wrap-anywhere bg-gray-100 p-2 rounded-md overflow-auto max-w-[90dvw] min-w-md">
+            {message.secret}
+          </pre>
+        </CardMsg>
+      );
     case "secretCreate":
       return (
         <CardMsg header={message.header} extraInfo={message.extraInfo}>
diff --git a/islands/messages/StringMsg.tsx b/islands/messages/StringMsg.tsx
deleted file mode 100644
index 80eee27..0000000
--- a/islands/messages/StringMsg.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-export default function StringMsg(props: { text: string }) {
-  return (
-    // TODO: enable when tailwind integration is working
-    // <section class="max-w-full w-full overflow-x-auto md:max-w-[80%] md:w-[80%] border-solid border-2 border-gray-300 bg-gray-100 p-2">
-    //   <pre class="wrap-break-word whitespace-pre-wrap">{lastMessage}</pre>
-    // </section>
-    <section>
-      <pre
-        style={{
-          // correct line breaks for really long messages (like base64 encoded certificate secrets)
-          whiteSpace: "pre-wrap",
-          overflowWrap: "anywhere",
-          // styles to mark this as some kind of log output
-          border: "solid 2px gray",
-          padding: "1rem",
-          backgroundColor: "lightgray",
-          // correct sizing
-          maxWidth: "90%",
-          width: "90%",
-          overflow: "auto",
-          maxHeight: "50vh",
-          margin: "0 auto",
-        }}
-        class="md:min-w-[250px]"
-      >
-        {props.text}
-      </pre>
-    </section>
-  );
-}

From c0887e17264a62919e44888c0c8a5aba35d93e27 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 22:28:34 +0200
Subject: [PATCH 09/10] add error msg card

---
 fresh.gen.ts                      |  2 ++
 islands/Log.tsx                   | 14 +++++++++++---
 islands/messages/ErrorCardMsg.tsx | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 islands/messages/ErrorCardMsg.tsx

diff --git a/fresh.gen.ts b/fresh.gen.ts
index 6c175c6..e628f9e 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -14,6 +14,7 @@ import * as $CreateSecret from "./islands/CreateSecret.tsx";
 import * as $FetchSecret from "./islands/FetchSecret.tsx";
 import * as $Log from "./islands/Log.tsx";
 import * as $messages_CardMsg from "./islands/messages/CardMsg.tsx";
+import * as $messages_ErrorCardMsg from "./islands/messages/ErrorCardMsg.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -32,6 +33,7 @@ const manifest = {
     "./islands/FetchSecret.tsx": $FetchSecret,
     "./islands/Log.tsx": $Log,
     "./islands/messages/CardMsg.tsx": $messages_CardMsg,
+    "./islands/messages/ErrorCardMsg.tsx": $messages_ErrorCardMsg,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;
diff --git a/islands/Log.tsx b/islands/Log.tsx
index 78f7386..4603ecb 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -1,6 +1,6 @@
 import { lastMessage, RichMessage } from "../src/utils/log.ts";
 import CardMsg from "./messages/CardMsg.tsx";
-import StringMsg from "./messages/StringMsg.tsx";
+import ErrorCardMsg from "./messages/ErrorCardMsg.tsx";
 
 function renderMessage(message: RichMessage | undefined) {
   if (!message) {
@@ -9,9 +9,17 @@ function renderMessage(message: RichMessage | undefined) {
 
   switch (message.type) {
     case "string":
-      return <StringMsg text={message.text} />;
+      return (
+        <CardMsg header="Error">
+          <span>{message.text}</span>
+        </CardMsg>
+      );
     case "error":
-      return <StringMsg text={message.text} />;
+      return (
+        <ErrorCardMsg header="Error">
+          <span>{message.text}</span>
+        </ErrorCardMsg>
+      );
     case "secretFetch":
       return (
         <CardMsg header="Secret Data">
diff --git a/islands/messages/ErrorCardMsg.tsx b/islands/messages/ErrorCardMsg.tsx
new file mode 100644
index 0000000..429bce6
--- /dev/null
+++ b/islands/messages/ErrorCardMsg.tsx
@@ -0,0 +1,19 @@
+import { JSX } from "preact/jsx-runtime";
+
+export default function CardMsg(
+  props: {
+    header?: string;
+    extraInfo?: string;
+    children: JSX.Element | undefined;
+  },
+) {
+  return (
+    <div class="flex flex-col items-start justify-center gap-2 shadow-lg rounded-lg p-4 max-w-2xl border-[1px] border-red-200 shadow-red-500/50">
+      {props.header && (
+        <h3 class="text-lg font-bold text-red-600">{props.header}</h3>
+      )}
+      {props.children}
+      {props.extraInfo && <p>{props.extraInfo}</p>}
+    </div>
+  );
+}

From 5668cf5612926991f6bcf5d6d5c9d78cf8f8c5c4 Mon Sep 17 00:00:00 2001
From: Benjamin Jesuiter <bjesuiter@gmail.com>
Date: Sat, 12 Jul 2025 22:30:45 +0200
Subject: [PATCH 10/10] fix button padding

---
 islands/CreateSecret.tsx | 2 +-
 islands/FetchSecret.tsx  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index edf40af..3dc602c 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -32,7 +32,7 @@ export default function CreateSecret() {
         <ExpireForm />
         <PassphraseInput />
 
-        <button type="submit">Anlegen</button>
+        <button class="p-2" type="submit">Anlegen</button>
       </form>
     </main>
   );
diff --git a/islands/FetchSecret.tsx b/islands/FetchSecret.tsx
index b4845c8..8a40ab1 100644
--- a/islands/FetchSecret.tsx
+++ b/islands/FetchSecret.tsx
@@ -38,6 +38,7 @@ export default function FetchSecret(
         name="fetchSecretButton"
         type="submit"
         disabled={fetched.value}
+        class="p-2"
       >
         Abrufen
       </button>