Improve design

components/CreateSecret/CustomExpireInForm.tsx

@@ -0,0 +1,65 @@
+import { signal } from "@preact/signals";
+import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
+const isCustomExpireIn = signal(false);
+
+export default function CustomExpireInForm() {
+  return (
+    <>
+      <input
+        type="checkbox"
+        name="customExpireIn"
+        id="customExpireIn"
+        checked={isCustomExpireIn.value}
+        onChange={() => {
+          isCustomExpireIn.value = !isCustomExpireIn.value;
+        }}
+      />
+      <label
+        for="customExpireIn"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Eigene Ablaufzeit</span>
+        <span>(default: 1 Tag)</span>
+      </label>
+      {isCustomExpireIn.value && (
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <form
+            id="duration"
+            class="flex flex-row gap-4 justify-center-safe"
+          >
+            <label for="h">
+              <input
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
+                id="h"
+                name="h"
+                type="number"
+                min="0"
+                max="999"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;h
+            </label>
+
+            <label for="m">
+              <input
+                class="p-2 border-2 border-gray-500 rounded w-[6ch]"
+                id="m"
+                name="m"
+                type="number"
+                min="0"
+                max="59"
+                value={0}
+                onWheel={scrollNumberInputValue}
+              />
+              &nbsp;m
+            </label>
+          </form>
+        </>
+      )}
+    </>
+  );
+}

components/CreateSecret/PassphraseInput.tsx

@@ -5,30 +5,35 @@ const usePassphrase = signal(false);
 export default function PassphraseInput() {
   return (
     <>
-      <label>
-        <input
-          type="checkbox"
-          name="usePassphrase"
-          checked={usePassphrase.value}
-          onChange={() => {
-            usePassphrase.value = !usePassphrase.value;
-          }}
-        />
-        &nbsp;Eigene Passphrase verwenden um das Secret zu verschlüsseln
-        (optional)
+      <input
+        type="checkbox"
+        name="usePassphrase"
+        id="usePassphrase"
+        checked={usePassphrase.value}
+        onChange={() => {
+          usePassphrase.value = !usePassphrase.value;
+        }}
+      />
+      <label for="usePassphrase">
+        <span>Eigene Passphrase für Verschlüsselung verwenden (optional)</span>
       </label>
       {usePassphrase.value && (
-        <label>
-          Passphrase:&nbsp;
-          <input
-            type="password"
-            name="passphrase"
-            class="p-2 border-2 border-gray-500 rounded"
-            placeholder="Optional"
-            required
-            autocomplete="off"
-          />
-        </label>
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Passphrase:&nbsp;
+            <input
+              type="password"
+              name="passphrase"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="Optional"
+              required
+              autocomplete="off"
+            />
+          </label>
+        </>
       )}
     </>
   );

components/CreateSecret/ViewCountLimitInput.tsx

@@ -0,0 +1,47 @@
+import { signal } from "@preact/signals";
+import { scrollNumberInputValue } from "@/src/utils/wheelEventHandler.ts";
+
+const useViewCount = signal(false);
+
+export default function ViewCountLimitInput() {
+  return (
+    <>
+      <input
+        type="checkbox"
+        name="useViewCount"
+        id="useViewCount"
+        checked={useViewCount.value}
+        onChange={() => {
+          useViewCount.value = !useViewCount.value;
+        }}
+      />
+      <label
+        for="useViewCount"
+        class="flex flex-col min-[360px]:flex-row min-[360px]:gap-1"
+      >
+        <span>Anzeigelimit ändern</span>
+        <span>(default: 1)</span>
+      </label>
+      {useViewCount.value && (
+        <>
+          <div>
+            {/* placeholder div to keep the first grid column empty */}
+          </div>
+          <label class="flex flex-col gap-2">
+            Anzeigelimit:&nbsp;
+            <input
+              type="number"
+              name="viewCount"
+              class="p-2 border-2 border-gray-500 rounded"
+              placeholder="1"
+              min={1}
+              value={1}
+              autocomplete="off"
+              onWheel={scrollNumberInputValue}
+            />
+          </label>
+        </>
+      )}
+    </>
+  );
+}

components/Header.tsx

@@ -3,8 +3,8 @@ export default function Header() {
     <div class="px-2 py-4 mx-auto bg-primary ">
       <a href="/">
         <header class="md:max-w-screen mx-auto flex flex-col items-center justify-center">
-          <h1 class="text-4xl font-bold">SecretShare</h1>
-          <p class="text-3xl">
+          <h1 class="text-4xl font-bold mb-4">SecretShare</h1>
+          <p class="text-2xl text-balance text-center">
             Teile Passwörter und Tokens sicher über Einmal-View URL
           </p>
         </header>

deno.json

@@ -32,7 +32,8 @@
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]"
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwind-merge": "npm:tailwind-merge@^3.3.1"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

fresh.gen.ts

@@ -4,6 +4,7 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.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";
@@ -15,12 +16,14 @@ 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 * as $ui_Card from "./islands/ui/Card.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/api/create.ts": $api_create,
     "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
     "./routes/api/secret/[uuid].ts": $api_secret_uuid_,
@@ -34,6 +37,7 @@ const manifest = {
     "./islands/Log.tsx": $Log,
     "./islands/messages/CardMsg.tsx": $messages_CardMsg,
     "./islands/messages/ErrorCardMsg.tsx": $messages_ErrorCardMsg,
+    "./islands/ui/Card.tsx": $ui_Card,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

islands/CreateSecret.tsx

@@ -1,18 +1,18 @@
 import onSubmit from "@/src/formHandler/create.ts";
-import ExpireForm from "@/components/CreateSecret/ExpireForm.tsx";
+import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
 import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
-import ViewCount from "@/components/CreateSecret/ViewCount.tsx";
+import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx";
 
 export default function CreateSecret() {
   return (
-    <section>
-      <h2 class="my-8 text-2xl font-bold items-center flex flex-col">
+    <section class="w-full max-w-[90%] md:max-w-2xl">
+      <h2 class="my-4 text-2xl font-bold items-center flex flex-col">
         Erstelle ein neues Secret
       </h2>
       <form
         name="createSecret"
         method="post"
-        class="flex flex-col items-center"
+        class="flex flex-col items-stretch gap-4"
         onSubmit={onSubmit}
         autocomplete="off"
       >
@@ -23,18 +23,20 @@ export default function CreateSecret() {
           style="display:none;"
         />
         <textarea
-          rows={10}
-          cols={60}
           name="secret"
-          class="w-full p-2 border-2 border-gray-500 rounded"
+          class="min-h-40 md:min-h-60 p-2 border-2 border-gray-500 rounded"
           placeholder="Passwort, Token oder andere Information..."
         />
 
-        <ExpireForm />
-        <PassphraseInput />
-        <ViewCount />
+        <div class="grid grid-cols-[min-content_1fr] gap-4 items-center">
+          <CustomExpireInForm />
+          <PassphraseInput />
+          <ViewCountLimitInput />
+        </div>
 
-        <button class="p-2" type="submit">Anlegen</button>
+        <button class="p-2" type="submit">
+          Anlegen
+        </button>
       </form>
     </section>
   );