UI improvements

components/Card.tsx

@@ -13,7 +13,7 @@ export function Card(
     <a
       href={disabled ? undefined : href}
       class={`flex relative items-start justify-between gap-2 p-3 border border-border rounded-xl w-full min-h-[120px] select-none overflow-hidden shadow-[0_10px_10px_rgba(76,76,109,.0705882353)] relative before:(absolute top-0 rounded-xl left-0 z-[-1] h-full w-[101%] bg-gradient) ${
-        disabled ? "opacity-70 cursor-not-allowed" : "cursor-pointer" 
+        disabled ? "opacity-70 cursor-not-allowed" : "cursor-pointer"
       }`}
     >
       <div class="flex flex-col gap-1">

components/ExternalLink.tsx

@@ -4,7 +4,7 @@ export function ExternalLink(props: JSX.HTMLAttributes<HTMLAnchorElement>) {
   return (
     <a
       {...props}
-      class="text-grammy"
+      class="text-grammy hover:underline"
       target="_blank"
       rel="noopener noreferrer"
     />

components/Precense.tsx

@@ -0,0 +1,18 @@
+import { cloneElement, VNode } from "preact";
+import { Signal, useSignal, useSignalEffect } from "@preact/signals";
+
+export function Precense(
+  { present, children }: {
+    present: Signal<boolean>;
+    // deno-lint-ignore no-explicit-any
+    children: VNode<any>;
+  },
+) {
+  const mounted = useSignal(present.value);
+  useSignalEffect(() => void (present.value && (mounted.value = true)));
+  if (!mounted.value) return null;
+  return cloneElement(children, {
+    onAnimationEnd: (e: Event) =>
+      e.target == e.currentTarget && !present.value && (mounted.value = false),
+  });
+}

components/Select.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "preact/hooks";
 
 import { cn } from "../lib/cn.ts";
 
+import { Check } from "./icons/Check.tsx";
+
 export function Select<T extends string>(
   { value, values, onChange, nameMap }: {
     value: T;
@@ -95,17 +97,18 @@ export function Select<T extends string>(
         />
       </div>
       <div
-        class={`bg-background z-[100] absolute top-[calc(100%+0rem)] w-full border border-border rounded-lg rounded-t-none p-1 shadow-sm ${
-          focused ? "block" : "hidden"
+        class={`bg-background z-[100] absolute duration-100 top-[calc(100%+0rem)] w-full border border-border rounded-lg rounded-t-none px-1 py-1.5 shadow-slct ${
+          focused
+            ? "opacity-100 translate-y-0 pointer-events-auto"
+            : "opacity-0 translate-y-[-5px] pointer-events-none"
         }`}
       >
         {values.map((v) => (
           <button
             type="button"
             tabIndex={-1}
             class={cn(
-              "px-3 py-1.5 w-full focus:(bg-border outline-none) rounded-lg text-left border-none cursor-default flex items-center justify-between",
-              value == v && "font-semibold",
+              "px-3 py-1.5 w-full rounded-lg focus:(bg-border outline-none) cursor-default text-left border-none flex items-center justify-between duration-75 transition-opacity",
               active == v && "bg-border",
             )}
             onMouseEnter={(e) => {
@@ -114,6 +117,7 @@ export function Select<T extends string>(
             data-value={v}
           >
             <span data-value={v}>{nameMap?.[v] ?? v}</span>
+            {value == v && <Check />}
           </button>
         ))}
       </div>

components/icons/At.tsx

@@ -10,7 +10,6 @@ export function At() {
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
-      class="feather feather-at-sign"
     >
       <circle cx="12" cy="12" r="4" />
       <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />

components/icons/Check.tsx

@@ -0,0 +1,17 @@
+export function Check() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}

components/icons/FileText.tsx

@@ -10,7 +10,6 @@ export function FileText() {
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
-      class="feather feather-file-text"
     >
       <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
       <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />

components/icons/Key.tsx

@@ -10,7 +10,6 @@ export function Key() {
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
-      class="feather feather-key"
     >
       <path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" />
     </svg>

components/icons/Repeat.tsx

@@ -10,7 +10,6 @@ export function Repeat() {
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
-      class="feather feather-repeat"
     >
       <path d="m17 1 4 4-4 4" />
       <path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4" />

islands/Alert.tsx

@@ -1,48 +1,58 @@
-import { StateUpdater, useEffect } from "preact/hooks";
+import { useEffect } from "preact/hooks";
+import { Signal } from "@preact/signals";
 
 import { Button } from "../components/Button.tsx";
+import { Precense } from "../components/Precense.tsx";
 
 export function Alert(
-  { visible, setVisible }: {
-    visible: boolean;
-    setVisible: StateUpdater<boolean>;
+  { present }: {
+    present: Signal<boolean>;
   },
 ) {
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      e.key == "Escape" && setVisible(false);
+      e.key == "Escape" && (present.value = false);
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, []);
-  if (!visible) {
-    return null;
-  }
+
   return (
-    <div
-      class="w-full h-screen fixed top-0 left-0 bg-[#0005] dark:bg-[#fff1] p-5 flex items-center justify-center"
-      onClick={(e) => e.target == e.currentTarget && setVisible(false)}
-    >
-      <div class="w-full max-w-lg p-5 bg-background rounded-xl min-h-[200px] flex flex-col gap-5 justify-between shadow-sm">
-        <div class="flex flex-col gap-4">
-          <p class="font-bold text-lg">How does this work?</p>
-          <p>
-            The statuses aren’t fetched from any server, rather determined from
-            your browser by directly attempting to communicate with Telegram.
-          </p>
-          <p>
-            This can be confirmed by monitoring the requests made while a
-            connectivity test is in progress.
-          </p>
-          <p class="font-bold text-lg">Why does it take so long?</p>
-          <p>
-            Exchanging encryption keys might take a little time. After the keys
-            are exchaged, they are stored locally in your browser, which makes
-            future tests take much less time.
-          </p>
+    <Precense present={present}>
+      <div
+        class={`w-full h-screen fixed top-0 left-0 bg-[#0005] dark:bg-[#fff1] flex p-5 items-center justify-center duration-100 ${
+          present.value
+            ? "pointer-events-auto animate-in-opacity"
+            : "pointer-events-none animate-out-opacity"
+        }`}
+        onClick={(e) => e.target == e.currentTarget && (present.value = false)}
+      >
+        <div
+          class={`w-full max-w-lg p-5 bg-background rounded-xl min-h-[200px] flex flex-col gap-5 justify-between shadow-sm duration-100 ${
+            present.value ? "animate-in-scale" : "animate-out-scale"
+          }`}
+        >
+          <div class="flex flex-col gap-4">
+            <p class="font-bold text-lg">How does this work?</p>
+            <p>
+              The statuses aren’t fetched from any server, rather determined
+              from your browser by directly attempting to communicate with
+              Telegram.
+            </p>
+            <p>
+              This can be confirmed by monitoring the requests made while a
+              connectivity test is in progress.
+            </p>
+            <p class="font-bold text-lg">Why does it take so long?</p>
+            <p>
+              Exchanging encryption keys might take a little time. After the
+              keys are exchaged, they are stored locally in your browser, which
+              makes future tests take much less time.
+            </p>
+          </div>
+          <Button onClick={() => present.value = false}>Dismiss</Button>
         </div>
-        <Button onClick={() => setVisible(false)}>Dismiss</Button>
       </div>
-    </div>
+    </Precense>
   );
 }

islands/ConnectivityTest.tsx

@@ -1,6 +1,5 @@
 import { IS_BROWSER } from "$fresh/runtime.ts";
-import { useState } from "preact/hooks";
-import { signal } from "@preact/signals";
+import { signal, useSignal } from "@preact/signals";
 
 import type { DC } from "mtkruto/mod.ts";
 
@@ -93,7 +92,7 @@ IS_BROWSER && addEventListener("keydown", (e) => {
   dcsToCheck.value = newSet;
 });
 export function ConnectivityTest() {
-  const [alertVisible, setAlertVisible] = useState(false);
+  const alertVisible = useSignal(false);
   if (testInProgress.value) {
     return <TestView />;
   }
@@ -144,13 +143,13 @@ export function ConnectivityTest() {
 
       <div class="fixed bottom-5 right-5 opacity-50 select-none text-xs cursor-pointer">
         <button
-          class="p-0 focus:outline-none"
-          onClick={() => setAlertVisible(true)}
+          class="p-0 focus:outline-none hover:underline"
+          onClick={() => alertVisible.value = true}
         >
           How does this work?
         </button>
       </div>
-      <Alert visible={alertVisible} setVisible={setAlertVisible} />
+      <Alert present={alertVisible} />
     </>
   );
 }

routes/index.tsx

@@ -143,12 +143,13 @@ export default function Home() {
           {new Date().getFullYear()} grammyjs
         </span>
         <div class="flex gap-5 text-grammy flex-wrap">
-          <a href="/disclaimer">
+          <a href="/disclaimer" class="hover:underline">
             Disclaimer
           </a>
           <a
             href="https://github.com/grammyjs/telegram.tools"
             target="_blank"
+            class="hover:underline"
           >
             Source Code
           </a>

static/main.css

@@ -8,6 +8,7 @@
   --border: #eee;
   --gradient: linear-gradient(120deg, var(--background) 45%, #f5f5f5);
   --button-background: #dbf7ff;
+  --shadow: #0001;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -21,5 +22,6 @@
     --border: #191919;
     --gradient: linear-gradient(120deg, var(--background) 45%, #191919);
     --button-background: #041920;
+    --shadow: #ffffff02;
   }
 }

twind.config.ts

@@ -27,12 +27,35 @@ export default {
         animation: {
           marquee: "marquee 2s linear infinite",
           "spin-fast": "spin .5s linear infinite",
+          "in-opacity": "inOpacity 100ms linear both",
+          "out-opacity": "out-op 100ms linear both",
+          "in-scale": "inScale 100ms linear both",
+          "out-scale": "outScale 100ms linear both",
         },
         keyframes: {
           marquee: {
             "0%": { transform: "translateX(-200%)" },
             "100%": { transform: "translateX(200%)" },
           },
+          inOpacity: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+          },
+          outOpacity: {
+            from: { opacity: 1 },
+            to: { opacity: 0 },
+          },
+          inScale: {
+            from: { scale: 0.9 },
+            to: { scale: 1 },
+          },
+          outScale: {
+            from: { scale: 1 },
+            to: { scale: 0.9 },
+          },
+        },
+        boxShadow: {
+          slct: "0px 10px 30px var(--shadow)",
         },
       },
     },