mirror of
https://github.com/ThisTine/Snip.git
synced 2026-10-18 02:51:38 +07:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2e1133e39c | ||
|
|
e2327207e5 |
No files matched your search
@@ -8,16 +8,28 @@ func notFoundHTML(shortHost, homeURL string) string {
|
||||
href := html.EscapeString(homeURL)
|
||||
return `<!doctype html><html lang="en"><head><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="theme-color" content="#fbfbfa" media="(prefers-color-scheme:light)">
|
||||
<meta name="theme-color" content="#09090b" media="(prefers-color-scheme:dark)">
|
||||
<title>Link not found</title><style>
|
||||
:root{--bg:#f4f2ea;--surface:#fffdf7;--ink:#16170f;--muted:#6b6c5e;--line:#e2decf;--accent:#c6f24e}
|
||||
@media(prefers-color-scheme:dark){:root{--bg:#0e100a;--surface:#181b11;--ink:#f1efe3;--muted:#9b9d8a;--line:#2c3020}}
|
||||
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);
|
||||
font-family:ui-sans-serif,system-ui,sans-serif;text-align:center;padding:24px}
|
||||
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:36px;max-width:360px}
|
||||
h1{font-size:54px;margin:0;letter-spacing:-.03em}
|
||||
p{color:var(--muted);margin:8px 0 20px}
|
||||
a{display:inline-block;background:var(--accent);color:#16170f;text-decoration:none;font-weight:600;
|
||||
padding:12px 20px;border-radius:14px}
|
||||
:root{--bg:#fbfbfa;--surface:#fff;--ink:#18181b;--muted:#71717a;--line:#e9e9eb;
|
||||
--grad-from:#2563eb;--grad-to:#7c3aed;--grad-ink:#fff;--glow-1:rgba(37,99,235,.16);--glow-2:rgba(124,58,237,.14)}
|
||||
@media(prefers-color-scheme:dark){:root{--bg:#09090b;--surface:#111113;--ink:#fafafa;--muted:#a1a1aa;--line:#232327;
|
||||
--grad-from:#60a5fa;--grad-to:#a78bfa;--grad-ink:#09090b;--glow-1:rgba(96,165,250,.13);--glow-2:rgba(167,139,250,.12)}}
|
||||
body{margin:0;min-height:100vh;display:grid;place-items:center;background-color:var(--bg);color:var(--ink);
|
||||
font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
|
||||
text-align:center;padding:20px;
|
||||
background-image:radial-gradient(60% 45% at 12% 0%,var(--glow-1),transparent 70%),
|
||||
radial-gradient(55% 40% at 92% 100%,var(--glow-2),transparent 70%);
|
||||
background-attachment:fixed;background-repeat:no-repeat}
|
||||
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;max-width:360px}
|
||||
h1{font-size:44px;font-weight:600;margin:0;letter-spacing:-.03em;
|
||||
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
|
||||
-webkit-background-clip:text;background-clip:text;color:transparent}
|
||||
p{color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 20px}
|
||||
a{display:block;background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:var(--grad-ink);
|
||||
text-decoration:none;font-size:15px;font-weight:500;
|
||||
padding:13px 20px;border-radius:12px;transition:opacity .15s}
|
||||
a:hover{opacity:.9}
|
||||
</style></head><body><div class="card"><h1>404</h1>
|
||||
<p>This short link doesn't exist or was removed.</p>
|
||||
<a href="` + href + `">Go to ` + h + `</a></div></body></html>`
|
||||
|
||||
@@ -14,51 +14,76 @@ type pinData struct {
|
||||
}
|
||||
|
||||
// The page is fully self-contained (no external CSS/JS/fonts) so it paints in a
|
||||
// single round trip — the redirect path must stay fast. It mirrors the snip
|
||||
// look: warm paper + ink, electric-lime accent, with a dark-mode variant.
|
||||
// single round trip — the redirect path must stay fast. Palette and radii mirror
|
||||
// src/index.css so it reads as the same product; dark mode follows the OS since
|
||||
// there is no app shell (and so no theme toggle) on this route.
|
||||
var pinTmpl = template.Must(template.New("pin").Parse(`<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#16170f">
|
||||
<meta name="theme-color" content="#fbfbfa" media="(prefers-color-scheme:light)">
|
||||
<meta name="theme-color" content="#09090b" media="(prefers-color-scheme:dark)">
|
||||
<meta name="robots" content="noindex">
|
||||
<title>Enter PIN · {{.ShortHost}}/{{.Code}}</title>
|
||||
<style>
|
||||
:root{--bg:#f4f2ea;--surface:#fffdf7;--ink:#16170f;--muted:#6b6c5e;--line:#e2decf;--accent:#c6f24e;--accent-ink:#16170f}
|
||||
@media (prefers-color-scheme:dark){:root{--bg:#0e100a;--surface:#181b11;--ink:#f1efe3;--muted:#9b9d8a;--line:#2c3020;--accent:#c6f24e}}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
|
||||
background:var(--bg);color:var(--ink);
|
||||
:root{--bg:#fbfbfa;--surface:#fff;--surface-2:#f4f4f5;--ink:#18181b;--muted:#71717a;
|
||||
--line:#e9e9eb;--accent:#2563eb;--accent-soft:rgba(37,99,235,.1);--danger:#dc2626;
|
||||
--grad-from:#2563eb;--grad-to:#7c3aed;--grad-ink:#fff;
|
||||
--glow-1:rgba(37,99,235,.16);--glow-2:rgba(124,58,237,.14)}
|
||||
@media(prefers-color-scheme:dark){:root{--bg:#09090b;--surface:#111113;--surface-2:#19191c;--ink:#fafafa;
|
||||
--muted:#a1a1aa;--line:#232327;--accent:#60a5fa;--accent-soft:rgba(96,165,250,.14);--danger:#f87171;
|
||||
--grad-from:#60a5fa;--grad-to:#a78bfa;--grad-ink:#09090b;
|
||||
--glow-1:rgba(96,165,250,.13);--glow-2:rgba(167,139,250,.12)}}
|
||||
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
||||
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;
|
||||
background-color:var(--bg);color:var(--ink);
|
||||
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
||||
background-image:radial-gradient(60% 50% at 12% 8%,rgba(198,242,78,.30),transparent 60%),radial-gradient(60% 50% at 90% 90%,rgba(198,242,78,.22),transparent 60%)}
|
||||
.card{width:100%;max-width:380px;background:var(--surface);border:1.5px solid var(--line);
|
||||
border-radius:24px;padding:28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);
|
||||
animation:pop .45s cubic-bezier(.2,.9,.25,1.2)}
|
||||
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
|
||||
.lock{width:48px;height:48px;border-radius:16px;background:var(--ink);display:grid;place-items:center;margin-bottom:18px}
|
||||
.lock svg{width:24px;height:24px}
|
||||
h1{font-size:24px;margin:0 0 6px;letter-spacing:-.02em}
|
||||
p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
|
||||
p b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|
||||
.pins{display:flex;gap:8px;margin-bottom:14px}
|
||||
.pins input{flex:1;width:100%;height:54px;text-align:center;font-size:22px;font-weight:700;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
background-image:radial-gradient(60% 45% at 12% 0%,var(--glow-1),transparent 70%),
|
||||
radial-gradient(55% 40% at 92% 100%,var(--glow-2),transparent 70%);
|
||||
background-attachment:fixed;background-repeat:no-repeat}
|
||||
.card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
|
||||
border-radius:16px;padding:24px;animation:rise .3s ease-out}
|
||||
@media(min-width:420px){.card{padding:28px}}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
.lock{width:40px;height:40px;border-radius:12px;color:var(--grad-ink);
|
||||
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
|
||||
display:grid;place-items:center;margin-bottom:16px}
|
||||
.lock svg{width:20px;height:20px}
|
||||
h1{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
|
||||
h1 span{background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
|
||||
-webkit-background-clip:text;background-clip:text;color:transparent}
|
||||
.sub{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
|
||||
.sub b{color:var(--ink);font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
|
||||
.pins{display:flex;gap:6px}
|
||||
@media(min-width:420px){.pins{gap:8px}}
|
||||
.pins input{flex:1;min-width:0;height:52px;padding:0;text-align:center;font-size:20px;font-weight:600;
|
||||
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
|
||||
background:var(--bg);border:1.5px solid var(--line);border-radius:14px;outline:none;transition:transform .12s,border-color .12s}
|
||||
.pins input:focus{transform:translateY(-2px) scale(1.05);border-color:var(--accent)}
|
||||
.err{color:#ef4444;font-size:13px;font-weight:600;margin:0 0 14px;min-height:18px}
|
||||
button{width:100%;height:52px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);
|
||||
font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px -8px rgba(198,242,78,.6);transition:transform .12s}
|
||||
button:active{transform:scale(.96)}
|
||||
.foot{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
|
||||
.foot b{color:var(--ink)}
|
||||
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;outline:none;
|
||||
transition:border-color .15s,box-shadow .15s}
|
||||
.pins input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
|
||||
.err{color:var(--danger);font-size:13px;font-weight:500;margin:10px 0 0;min-height:19px}
|
||||
form.bad .pins input{border-color:var(--danger)}
|
||||
form.bad .pins{animation:shake .4s}
|
||||
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
|
||||
button{width:100%;height:48px;margin-top:14px;border:0;border-radius:12px;
|
||||
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:var(--grad-ink);
|
||||
font-size:15px;font-weight:500;font-family:inherit;
|
||||
cursor:pointer;transition:opacity .15s,transform .1s}
|
||||
button:hover{opacity:.9}
|
||||
button:active{transform:scale(.99)}
|
||||
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
|
||||
.foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
|
||||
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="lock"><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="3" fill="#c6f24e"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#c6f24e" stroke-width="2.4" fill="none"/><circle cx="12" cy="15.5" r="1.7" fill="#16170f"/></svg></div>
|
||||
<h1>This link is protected</h1>
|
||||
<p>Enter the 6-digit PIN to continue to <b>{{.ShortHost}}/{{.Code}}</b>.</p>
|
||||
<form method="post" action="{{.ActionPath}}" id="f" autocomplete="off">
|
||||
<div class="lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div>
|
||||
<h1>This link is <span>protected</span></h1>
|
||||
<p class="sub">Enter the 6-digit PIN to continue to <b>{{.ShortHost}}/{{.Code}}</b>.</p>
|
||||
<form method="post" action="{{.ActionPath}}" id="f" autocomplete="off"{{if .HasError}} class="bad"{{end}}>
|
||||
<div class="pins" id="pins">
|
||||
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 1" required>
|
||||
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 2" required>
|
||||
@@ -67,31 +92,36 @@ button:active{transform:scale(.96)}
|
||||
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 5" required>
|
||||
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 6" required>
|
||||
</div>
|
||||
<p class="err">{{if .HasError}}That PIN didn't match. Try again.{{end}}</p>
|
||||
<p class="err" role="alert">{{if .HasError}}That PIN didn't match. Try again.{{end}}</p>
|
||||
<input type="hidden" name="pin" id="pin">
|
||||
<button type="submit">Unlock →</button>
|
||||
<button type="submit">Unlock</button>
|
||||
</form>
|
||||
<div class="foot">Secured by <b>{{.ShortHost}}</b></div>
|
||||
<div class="foot">{{.ShortHost}}</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var boxes=[].slice.call(document.querySelectorAll('#pins input')),hidden=document.getElementById('pin'),f=document.getElementById('f');
|
||||
function sync(){hidden.value=boxes.map(function(b){return b.value}).join('')}
|
||||
// Clear the error styling as soon as the visitor starts a fresh attempt.
|
||||
function fresh(){f.className=''}
|
||||
boxes.forEach(function(b,i){
|
||||
b.addEventListener('input',function(){
|
||||
fresh();
|
||||
b.value=b.value.replace(/\D/g,'').slice(0,1);
|
||||
if(b.value&&i<boxes.length-1)boxes[i+1].focus();
|
||||
sync();
|
||||
if(hidden.value.length===6)f.submit();
|
||||
});
|
||||
b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&i>0)boxes[i-1].focus()});
|
||||
b.addEventListener('focus',function(){b.select()});
|
||||
b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&i>0){boxes[i-1].focus();fresh()}});
|
||||
b.addEventListener('paste',function(e){
|
||||
var d=(e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,6);
|
||||
if(!d)return;e.preventDefault();
|
||||
if(!d)return;e.preventDefault();fresh();
|
||||
d.split('').forEach(function(c,j){if(boxes[j])boxes[j].value=c});
|
||||
boxes[Math.min(d.length,5)].focus();sync();if(d.length===6)f.submit();
|
||||
});
|
||||
});
|
||||
f.addEventListener('submit',sync);
|
||||
if(boxes[0])boxes[0].focus();
|
||||
})();
|
||||
</script>
|
||||
|
||||
+3
-3
@@ -11,9 +11,9 @@ import { Dashboard } from "./pages/Dashboard";
|
||||
function Page({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.main
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.main>
|
||||
|
||||
+11
-19
@@ -1,4 +1,3 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import type { DayCount } from "../lib/types";
|
||||
import { weekdayLabel } from "../lib/format";
|
||||
@@ -8,6 +7,8 @@ interface Props {
|
||||
height?: number;
|
||||
}
|
||||
|
||||
// ponytail: no grow-in animation — this renders on every dashboard page view,
|
||||
// and motion seen tens of times a day just reads as lag.
|
||||
export function BarChart({ data, height = 84 }: Props) {
|
||||
const [hover, setHover] = useState<number | null>(null);
|
||||
const max = Math.max(1, ...data.map((d) => d.count));
|
||||
@@ -20,28 +21,19 @@ export function BarChart({ data, height = 84 }: Props) {
|
||||
return (
|
||||
<div
|
||||
key={d.date}
|
||||
className="group relative flex h-full flex-1 flex-col items-center justify-end gap-1.5"
|
||||
className="relative flex h-full flex-1 flex-col items-center justify-end gap-1.5"
|
||||
onMouseEnter={() => setHover(i)}
|
||||
onMouseLeave={() => setHover(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ opacity: active ? 1 : 0, y: active ? 0 : 4 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded-md bg-[var(--ink)] px-2 py-1 text-[11px] font-medium text-[var(--bg)]"
|
||||
>
|
||||
{d.count} clicks
|
||||
</motion.div>
|
||||
|
||||
{active && (
|
||||
<div className="pointer-events-none absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded-md bg-[var(--ink)] px-2 py-1 text-[11px] font-medium tabular-nums text-[var(--bg)]">
|
||||
{d.count} {d.count === 1 ? "click" : "clicks"}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full flex-1 items-end">
|
||||
<motion.div
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: `${Math.max(ratio * 100, 4)}%` }}
|
||||
transition={{ duration: 0.4, ease: "easeOut", delay: i * 0.04 }}
|
||||
className={`w-full rounded-sm transition-colors ${
|
||||
active ? "bg-[var(--ink)]" : "bg-[var(--ring)]"
|
||||
}`}
|
||||
style={{ minHeight: 3 }}
|
||||
<div
|
||||
className={`w-full rounded-[3px] ${active ? "bg-[var(--ink)]" : "bg-[var(--ring)]"}`}
|
||||
style={{ height: `${Math.max(ratio * 100, 4)}%`, minHeight: 3 }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted">{weekdayLabel(d.date)}</span>
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { api } from "../lib/api";
|
||||
import type { ShortLink } from "../lib/types";
|
||||
import { compactNumber, prettyHost, shortUrl } from "../lib/format";
|
||||
import { Modal } from "./ui/Modal";
|
||||
import { Button } from "./ui/Button";
|
||||
|
||||
interface Props {
|
||||
link: ShortLink | null;
|
||||
onClose: () => void;
|
||||
onDeleted: (id: string, message: string) => void;
|
||||
}
|
||||
|
||||
export function DeleteLinkModal({ link, onClose, onDeleted }: Props) {
|
||||
const open = Boolean(link);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
if (!link) return <Modal open={false} onClose={onClose} children={null} />;
|
||||
|
||||
async function confirm() {
|
||||
if (!link) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await api.deleteLink(link.id);
|
||||
onDeleted(link.id, "Link deleted");
|
||||
} catch {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title="Delete link">
|
||||
<div className="-mt-2 mb-4 rounded-xl border border-line bg-surface-2 px-4 py-3">
|
||||
<p className="truncate font-mono text-sm font-semibold text-ink">
|
||||
{shortUrl(link.code)}
|
||||
</p>
|
||||
<p className="truncate text-[12px] text-muted">{prettyHost(link.longUrl)}</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm leading-relaxed text-muted">
|
||||
This permanently deletes the link. Anyone who opens{" "}
|
||||
<span className="font-mono text-ink">{shortUrl(link.code)}</span> hits a dead
|
||||
end, and its{" "}
|
||||
<span className="font-medium text-ink">
|
||||
{compactNumber(link.totalClicks)} clicks
|
||||
</span>{" "}
|
||||
of history go with it. This can't be undone.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
<Button
|
||||
onClick={confirm}
|
||||
disabled={busy}
|
||||
className="!bg-red-500 !text-white hover:!opacity-90"
|
||||
>
|
||||
{busy ? "Deleting…" : "Delete link"}
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={onClose} disabled={busy}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export function Logo({ onClick }: { onClick?: () => void }) {
|
||||
<span className="grid h-7 w-7 place-items-center rounded-lg bg-[var(--ink)] text-[var(--bg)]">
|
||||
<Scissors size={15} />
|
||||
</span>
|
||||
<span className="text-[17px] font-semibold tracking-tight text-ink">
|
||||
<span className="text-[16px] font-semibold tracking-[-0.02em] text-ink">
|
||||
snip
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
+12
-10
@@ -9,7 +9,7 @@ import { Grid, ChevronDown, LogOut } from "./icons";
|
||||
|
||||
// Shared pill language so every nav control reads as one family.
|
||||
const navPill =
|
||||
"focusable inline-flex h-9 items-center gap-1.5 rounded-lg border border-line bg-surface px-2.5 text-[13px] font-medium text-muted transition-colors hover:bg-surface-2 hover:text-ink";
|
||||
"press focusable inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-[13px] font-medium text-muted hover:bg-surface-2 hover:text-ink";
|
||||
|
||||
export function Navbar() {
|
||||
const { user, logout } = useAuth();
|
||||
@@ -41,7 +41,7 @@ export function Navbar() {
|
||||
useEffect(() => setMenuOpen(false), [pathname]);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 -mx-4 border-b border-line bg-[var(--bg)]/80 px-4 backdrop-blur-md sm:-mx-5 sm:px-5">
|
||||
<header className="sticky top-0 z-50 -mx-4 border-b border-transparent bg-[var(--bg)]/80 px-4 backdrop-blur-md sm:-mx-5 sm:px-5">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between gap-3">
|
||||
<Logo />
|
||||
|
||||
@@ -63,14 +63,14 @@ export function Navbar() {
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpen}
|
||||
aria-label="Account menu"
|
||||
className="focusable inline-flex h-9 items-center gap-1 rounded-lg border border-line bg-surface py-1 pl-1 pr-1.5 transition-colors hover:bg-surface-2"
|
||||
className="press focusable inline-flex h-9 items-center gap-1 rounded-lg py-1 pl-1 pr-1.5 hover:bg-surface-2"
|
||||
>
|
||||
<span className="grid h-7 w-7 place-items-center rounded-md bg-[var(--ink)] text-[11px] font-semibold text-[var(--bg)]">
|
||||
<span className="grid h-7 w-7 place-items-center rounded-full bg-surface-2 text-[12px] font-semibold text-ink ring-1 ring-[var(--line)]">
|
||||
{user.name.slice(0, 1).toUpperCase()}
|
||||
</span>
|
||||
<ChevronDown
|
||||
size={15}
|
||||
className={`text-muted transition-transform ${menuOpen ? "rotate-180" : ""}`}
|
||||
className={`text-muted transition-transform duration-200 ease-out ${menuOpen ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -78,11 +78,13 @@ export function Navbar() {
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
role="menu"
|
||||
initial={{ opacity: 0, y: -6, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -6, scale: 0.98 }}
|
||||
transition={{ duration: 0.14, ease: "easeOut" }}
|
||||
className="card absolute right-0 top-[calc(100%+8px)] w-56 overflow-hidden p-1 shadow-[0_16px_40px_-16px_rgba(0,0,0,0.4)]"
|
||||
// Scales out of the avatar button (top-right), not from its own centre.
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.97, transition: { duration: 0.1 } }}
|
||||
transition={{ duration: 0.16, ease: [0.23, 1, 0.32, 1] }}
|
||||
style={{ transformOrigin: "top right" }}
|
||||
className="card absolute right-0 top-[calc(100%+6px)] w-56 overflow-hidden p-1 shadow-[var(--shadow-lg)]"
|
||||
>
|
||||
<div className="px-3 py-2">
|
||||
<p className="truncate text-sm font-medium text-ink">
|
||||
|
||||
@@ -42,7 +42,7 @@ export function PinInput({ value, onChange, length = 6 }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1.5 sm:gap-2">
|
||||
{Array.from({ length }).map((_, i) => (
|
||||
<input
|
||||
key={i}
|
||||
@@ -51,9 +51,10 @@ export function PinInput({ value, onChange, length = 6 }: Props) {
|
||||
onChange={(e) => handleChange(i, e)}
|
||||
onKeyDown={(e) => handleKey(i, e)}
|
||||
inputMode="numeric"
|
||||
autoComplete="off"
|
||||
maxLength={1}
|
||||
aria-label={`PIN digit ${i + 1}`}
|
||||
className="focusable h-12 w-full rounded-lg border border-line bg-surface-2 text-center font-mono text-lg font-semibold text-ink outline-none focus:border-[var(--ink)]"
|
||||
className="field h-12 w-full min-w-0 text-center font-mono text-lg font-semibold"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ export function PinManager({ link, onClose, onSaved }: Props) {
|
||||
— only replaced or removed. */}
|
||||
{hasPin && (
|
||||
<div className="mb-4 flex items-center gap-3 rounded-xl border border-line bg-surface-2 px-4 py-3">
|
||||
<span className="grid h-8 w-8 place-items-center rounded-lg bg-[var(--ink)] text-[var(--bg)]">
|
||||
<span className="bg-[var(--ink)] text-[var(--bg)] grid h-8 w-8 place-items-center rounded-lg">
|
||||
<Lock size={15} />
|
||||
</span>
|
||||
<div>
|
||||
|
||||
+18
-31
@@ -1,36 +1,23 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useRef } from "react";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import type { ShortLink } from "../lib/types";
|
||||
import { fullShortUrl, prettyHost, shortUrl } from "../lib/format";
|
||||
import { Modal } from "./ui/Modal";
|
||||
import { Button } from "./ui/Button";
|
||||
import { Copy, Check, Download } from "./icons";
|
||||
import { CopyButton } from "./ui/CopyButton";
|
||||
import { Download } from "./icons";
|
||||
|
||||
interface Props {
|
||||
link: ShortLink | null;
|
||||
onClose: () => void;
|
||||
onCopied: () => void;
|
||||
}
|
||||
|
||||
export function QrModal({ link, onClose, onCopied }: Props) {
|
||||
export function QrModal({ link, onClose }: Props) {
|
||||
const open = Boolean(link);
|
||||
const wrapRef = useRef<HTMLDivElement>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!link) return <Modal open={false} onClose={onClose} children={null} />;
|
||||
|
||||
async function copy() {
|
||||
if (!link) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullShortUrl(link.code));
|
||||
} catch {
|
||||
/* clipboard may be blocked */
|
||||
}
|
||||
setCopied(true);
|
||||
onCopied();
|
||||
setTimeout(() => setCopied(false), 1800);
|
||||
}
|
||||
|
||||
function download() {
|
||||
if (!link) return;
|
||||
const svg = wrapRef.current?.querySelector("svg");
|
||||
@@ -46,32 +33,32 @@ export function QrModal({ link, onClose, onCopied }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title="QR code">
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
ref={wrapRef}
|
||||
className="rounded-xl border border-line bg-white p-4"
|
||||
>
|
||||
<div ref={wrapRef} className="rounded-xl bg-white p-4 ring-1 ring-black/5">
|
||||
<QRCodeSVG
|
||||
value={fullShortUrl(link.code)}
|
||||
size={184}
|
||||
bgColor="#ffffff"
|
||||
fgColor="#18181b"
|
||||
fgColor="#111113"
|
||||
level="M"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 font-mono text-base font-semibold text-ink">
|
||||
<p className="mt-4 max-w-full truncate font-mono text-base font-semibold text-ink">
|
||||
{shortUrl(link.code)}
|
||||
</p>
|
||||
<p className="text-[13px] text-muted">Points to {prettyHost(link.longUrl)}</p>
|
||||
<p className="max-w-full truncate text-[13px] text-muted">
|
||||
→ {prettyHost(link.longUrl)}
|
||||
</p>
|
||||
|
||||
<div className="mt-5 flex w-full items-center gap-2">
|
||||
<Button block onClick={copy}>
|
||||
{copied ? <Check size={15} /> : <Copy size={15} />}
|
||||
{copied ? "Copied" : "Copy link"}
|
||||
</Button>
|
||||
<Button block variant="outline" onClick={download}>
|
||||
<div className="mt-5 grid w-full grid-cols-2 gap-2">
|
||||
<CopyButton
|
||||
text={fullShortUrl(link.code)}
|
||||
label="Copy link"
|
||||
className="h-10 rounded-xl bg-[var(--ink)] text-sm text-[var(--bg)] hover:opacity-85"
|
||||
/>
|
||||
<Button variant="outline" onClick={download}>
|
||||
<Download size={15} />
|
||||
SVG
|
||||
</Button>
|
||||
|
||||
@@ -1,106 +1,46 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import { useState } from "react";
|
||||
import type { ShortLink } from "../lib/types";
|
||||
import { fullShortUrl, prettyHost, shortUrl } from "../lib/format";
|
||||
import { Button } from "./ui/Button";
|
||||
import { Check, Copy, Qr, Lock, Plus } from "./icons";
|
||||
import { CopyButton } from "./ui/CopyButton";
|
||||
import { Qr, Lock, Check } from "./icons";
|
||||
|
||||
interface Props {
|
||||
link: ShortLink;
|
||||
onReset: () => void;
|
||||
onCopied: () => void;
|
||||
/** True when the link was copied automatically on creation. */
|
||||
autoCopied: boolean;
|
||||
onShowQr: (link: ShortLink) => void;
|
||||
}
|
||||
|
||||
const modeBadge: Record<string, string> = {
|
||||
random: "Random code",
|
||||
memorable: "Memorable words",
|
||||
custom: "Custom alias",
|
||||
};
|
||||
|
||||
export function ResultCard({ link, onReset, onCopied }: Props) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showQr, setShowQr] = useState(false);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullShortUrl(link.code));
|
||||
} catch {
|
||||
/* clipboard may be blocked in some contexts */
|
||||
}
|
||||
setCopied(true);
|
||||
onCopied();
|
||||
setTimeout(() => setCopied(false), 1800);
|
||||
}
|
||||
|
||||
export function ResultCard({ link, autoCopied, onShowQr }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.22, ease: "easeOut" }}
|
||||
className="card p-5 sm:p-6"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="grid h-6 w-6 place-items-center rounded-full bg-[var(--ink)] text-[var(--bg)]">
|
||||
<Check size={14} />
|
||||
</span>
|
||||
<span className="text-sm font-medium text-ink">Your link is live</span>
|
||||
<span className="ml-auto rounded-full border border-line px-2.5 py-0.5 text-[11px] text-muted">
|
||||
{modeBadge[link.mode]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-xl border border-line bg-surface-2 p-4">
|
||||
<p className="truncate text-[13px] text-muted">{prettyHost(link.longUrl)}</p>
|
||||
<p className="mt-1 break-all font-mono text-xl font-semibold text-ink">
|
||||
<div className="card flex items-center gap-3 p-3 pl-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-mono text-[15px] font-semibold text-ink">
|
||||
{shortUrl(link.code)}
|
||||
{link.hasPin && <Lock size={12} className="ml-1.5 inline text-muted" />}
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<Button onClick={copy} size="sm">
|
||||
{copied ? <Check size={15} /> : <Copy size={15} />}
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setShowQr((v) => !v)}>
|
||||
<Qr size={15} />
|
||||
{showQr ? "Hide QR" : "QR code"}
|
||||
</Button>
|
||||
{link.hasPin && (
|
||||
<span className="inline-flex items-center gap-1 text-[12px] text-muted">
|
||||
<Lock size={13} /> PIN protected
|
||||
<p className="truncate text-[12px] text-muted" title={link.longUrl}>
|
||||
{autoCopied ? (
|
||||
<span className="inline-flex items-center gap-1 text-accent">
|
||||
<Check size={12} /> Copied to clipboard
|
||||
</span>
|
||||
) : (
|
||||
<>→ {prettyHost(link.longUrl)}</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{showQr && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="overflow-hidden"
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onShowQr(link)}
|
||||
aria-label="Show QR code"
|
||||
className="press focusable grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
<div className="mt-4 grid w-fit place-items-center rounded-xl border border-line bg-white p-3">
|
||||
<QRCodeSVG
|
||||
value={fullShortUrl(link.code)}
|
||||
size={132}
|
||||
bgColor="#ffffff"
|
||||
fgColor="#18181b"
|
||||
level="M"
|
||||
<Qr size={16} />
|
||||
</button>
|
||||
<CopyButton
|
||||
text={fullShortUrl(link.code)}
|
||||
label="Copy"
|
||||
className="h-9 shrink-0 rounded-lg border border-line bg-surface px-3 text-[13px] text-ink hover:bg-surface-2"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="focusable mt-4 inline-flex items-center gap-1.5 rounded-lg text-[13px] font-medium text-muted hover:text-ink"
|
||||
>
|
||||
<Plus size={15} /> Shorten another
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,8 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { Lock } from "./icons";
|
||||
|
||||
export interface Segment<T extends string> {
|
||||
value: T;
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
hint?: string;
|
||||
locked?: boolean;
|
||||
}
|
||||
|
||||
@@ -15,13 +12,28 @@ interface Props<T extends string> {
|
||||
onChange: (value: T) => void;
|
||||
}
|
||||
|
||||
// ponytail: the sliding pill is a CSS transform, not framer-motion `layoutId` —
|
||||
// layoutId inside an `AnimatePresence mode="wait"` subtree never finishes exiting.
|
||||
export function SegmentedControl<T extends string>({
|
||||
segments,
|
||||
value,
|
||||
onChange,
|
||||
}: Props<T>) {
|
||||
const index = Math.max(
|
||||
0,
|
||||
segments.findIndex((s) => s.value === value),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
<div className="relative flex rounded-xl bg-surface-2 p-1">
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-y-1 left-1 rounded-lg bg-surface shadow-[0_1px_2px_rgba(0,0,0,0.08),0_0_0_1px_var(--line)] transition-transform duration-200 ease-out"
|
||||
style={{
|
||||
width: `calc((100% - 0.5rem) / ${segments.length})`,
|
||||
transform: `translateX(${index * 100}%)`,
|
||||
}}
|
||||
/>
|
||||
{segments.map((seg) => {
|
||||
const active = seg.value === value;
|
||||
return (
|
||||
@@ -30,28 +42,12 @@ export function SegmentedControl<T extends string>({
|
||||
type="button"
|
||||
onClick={() => onChange(seg.value)}
|
||||
aria-pressed={active}
|
||||
className={`focusable flex flex-col items-start gap-1 rounded-xl border p-3 text-left transition-colors ${
|
||||
active
|
||||
? "border-[var(--ink)] bg-surface-2"
|
||||
: "border-line hover:bg-surface-2"
|
||||
className={`focusable relative z-10 flex flex-1 items-center justify-center gap-1 rounded-lg py-1.5 text-[13px] font-medium transition-colors ${
|
||||
active ? "text-ink" : "text-muted hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
<span className={active ? "text-ink" : "text-muted"}>
|
||||
{seg.icon}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span
|
||||
className={`text-[13px] font-semibold ${active ? "text-ink" : "text-muted"}`}
|
||||
>
|
||||
{seg.label}
|
||||
</span>
|
||||
{seg.locked && <Lock size={11} className="text-muted" />}
|
||||
</span>
|
||||
{seg.hint && (
|
||||
<span className="text-[11px] leading-tight text-muted">
|
||||
{seg.hint}
|
||||
</span>
|
||||
)}
|
||||
{seg.locked && <Lock size={12} />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
+168
-151
@@ -1,5 +1,5 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { api } from "../lib/api";
|
||||
@@ -8,21 +8,38 @@ import {
|
||||
normalizeUrl,
|
||||
validateCustomAlias,
|
||||
} from "../lib/shortcode";
|
||||
import { getShortDomain } from "../lib/format";
|
||||
import { fullShortUrl, getShortDomain } from "../lib/format";
|
||||
import type { ShortLink, UrlMode } from "../lib/types";
|
||||
import { Button } from "./ui/Button";
|
||||
import { useToast } from "./ui/Toast";
|
||||
import { SegmentedControl, type Segment } from "./SegmentedControl";
|
||||
import { PinInput } from "./PinInput";
|
||||
import { ResultCard } from "./ResultCard";
|
||||
import { Shuffle, Sparkle, Type, Lock } from "./icons";
|
||||
import { QrModal } from "./QrModal";
|
||||
import { Lock, ArrowRight } from "./icons";
|
||||
|
||||
const ease = { duration: 0.22, ease: "easeOut" } as const;
|
||||
const ease = { duration: 0.22, ease: [0.23, 1, 0.32, 1] } as const;
|
||||
|
||||
// Shared reveal for the optional rows (alias, PIN) so they open the same way.
|
||||
const collapse = {
|
||||
initial: { opacity: 0, height: 0 },
|
||||
animate: { opacity: 1, height: "auto" },
|
||||
exit: { opacity: 0, height: 0, transition: { duration: 0.15 } },
|
||||
transition: ease,
|
||||
className: "overflow-hidden",
|
||||
} as const;
|
||||
|
||||
const previews: Record<UrlMode, string> = {
|
||||
random: "x7Qk",
|
||||
memorable: "amber-otter-loop",
|
||||
custom: "your-name",
|
||||
};
|
||||
|
||||
export function ShortenForm() {
|
||||
const { user } = useAuth();
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [url, setUrl] = useState("");
|
||||
const [mode, setMode] = useState<UrlMode>("random");
|
||||
@@ -32,7 +49,16 @@ export function ShortenForm() {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [errorInput, setErrorInput] = useState<"url" | "alias" | null>(null);
|
||||
const [result, setResult] = useState<ShortLink | null>(null);
|
||||
// Links made this visit, newest first. ponytail: in-memory only; persist
|
||||
// to localStorage if people ask to see them after a reload.
|
||||
const [results, setResults] = useState<{ link: ShortLink; copied: boolean }[]>([]);
|
||||
const [qrTarget, setQrTarget] = useState<ShortLink | null>(null);
|
||||
|
||||
// Focus the field on devices with a keyboard; on phones that would pop the
|
||||
// keyboard over the page before the user has read it.
|
||||
useEffect(() => {
|
||||
if (window.matchMedia("(pointer: fine)").matches) inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
function showError(msg: string, input: "url" | "alias" | null = null) {
|
||||
setError(msg);
|
||||
@@ -44,20 +70,14 @@ export function ShortenForm() {
|
||||
}
|
||||
|
||||
const segments: Segment<UrlMode>[] = [
|
||||
{ value: "random", label: "Random", icon: <Shuffle size={17} />, hint: "Shortest code" },
|
||||
{ value: "memorable", label: "Memorable", icon: <Sparkle size={17} />, hint: "Three words" },
|
||||
{
|
||||
value: "custom",
|
||||
label: "Custom",
|
||||
icon: <Type size={17} />,
|
||||
hint: user ? "You choose" : "Sign in",
|
||||
locked: !user,
|
||||
},
|
||||
{ value: "random", label: "Random" },
|
||||
{ value: "memorable", label: "Words" },
|
||||
{ value: "custom", label: "Custom", locked: !user },
|
||||
];
|
||||
|
||||
function onMode(value: UrlMode) {
|
||||
if (value === "custom" && !user) {
|
||||
toast("Sign in to create custom links", "info");
|
||||
toast("Sign in to choose your own ending", "info");
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
@@ -65,16 +85,15 @@ export function ShortenForm() {
|
||||
setMode(value);
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
async function create(rawUrl: string) {
|
||||
clearError();
|
||||
|
||||
if (!url.trim()) {
|
||||
if (!rawUrl.trim()) {
|
||||
showError("Paste a link to shorten.", "url");
|
||||
return;
|
||||
}
|
||||
if (!isValidUrl(url)) {
|
||||
showError("That doesn't look like a valid URL.", "url");
|
||||
if (!isValidUrl(rawUrl)) {
|
||||
showError("That doesn't look like a link.", "url");
|
||||
return;
|
||||
}
|
||||
if (mode === "custom") {
|
||||
@@ -92,13 +111,24 @@ export function ShortenForm() {
|
||||
setBusy(true);
|
||||
try {
|
||||
const link = await api.createLink({
|
||||
longUrl: normalizeUrl(url),
|
||||
longUrl: normalizeUrl(rawUrl),
|
||||
mode,
|
||||
customAlias: mode === "custom" ? alias : undefined,
|
||||
pin: pinOn && user ? pin : undefined,
|
||||
});
|
||||
setResult(link);
|
||||
toast("Link created — ready to share", "success");
|
||||
// Copy straight away — the next thing anyone does with a short link is paste it.
|
||||
let copied = true;
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullShortUrl(link.code));
|
||||
} catch {
|
||||
copied = false;
|
||||
}
|
||||
setResults((r) => [{ link, copied }, ...r.map((x) => ({ ...x, copied: false }))]);
|
||||
setUrl("");
|
||||
setAlias("");
|
||||
setPin("");
|
||||
setPinOn(false);
|
||||
inputRef.current?.focus();
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : "Something went wrong.";
|
||||
showError(msg, mode === "custom" ? "alias" : null);
|
||||
@@ -107,84 +137,99 @@ export function ShortenForm() {
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setResult(null);
|
||||
setUrl("");
|
||||
setAlias("");
|
||||
setPin("");
|
||||
setPinOn(false);
|
||||
setMode("random");
|
||||
clearError();
|
||||
// Pasting a link into an empty field is the whole job — do it immediately,
|
||||
// unless the user still has choices to make (custom ending, PIN).
|
||||
function onPaste(e: React.ClipboardEvent<HTMLInputElement>) {
|
||||
const pasted = e.clipboardData.getData("text").trim();
|
||||
if (url || busy || mode === "custom" || pinOn || !isValidUrl(pasted)) return;
|
||||
e.preventDefault();
|
||||
setUrl(pasted);
|
||||
create(pasted);
|
||||
}
|
||||
|
||||
const preview =
|
||||
mode === "random" ? "x7Qk" : mode === "memorable" ? "amber-otter-loop" : alias || "your-name";
|
||||
const preview = mode === "custom" ? alias || previews.custom : previews[mode];
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<AnimatePresence mode="wait">
|
||||
{result ? (
|
||||
<ResultCard
|
||||
key="result"
|
||||
link={result}
|
||||
onReset={reset}
|
||||
onCopied={() => toast("Copied to clipboard", "success")}
|
||||
/>
|
||||
) : (
|
||||
<motion.form
|
||||
key="form"
|
||||
onSubmit={submit}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={ease}
|
||||
className="card p-4 sm:p-5"
|
||||
<div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
create(url);
|
||||
}}
|
||||
// Our own validation accepts "example.com" (we add https://); the
|
||||
// browser's type=url check would reject it.
|
||||
noValidate
|
||||
className="card p-2"
|
||||
>
|
||||
{/* Primary action: paste, shorten. */}
|
||||
<div
|
||||
className={`field flex flex-col gap-2 p-1.5 sm:flex-row sm:items-center ${
|
||||
errorInput === "url" ? "field-error" : ""
|
||||
}`}
|
||||
>
|
||||
{/* URL field */}
|
||||
<label className="mb-1.5 block text-[13px] font-medium text-muted">
|
||||
Long URL
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={url}
|
||||
onChange={(e) => {
|
||||
setUrl(e.target.value);
|
||||
if (errorInput === "url") clearError();
|
||||
}}
|
||||
placeholder="https://example.com/a/very/long/path"
|
||||
onPaste={onPaste}
|
||||
placeholder="Paste a long link…"
|
||||
aria-label="Long URL"
|
||||
type="url"
|
||||
inputMode="url"
|
||||
autoComplete="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
className={`h-12 w-full rounded-xl border bg-surface-2 px-3.5 font-mono text-sm text-ink outline-none transition-colors placeholder:font-sans placeholder:text-muted ${
|
||||
errorInput === "url" ? "border-red-400" : "border-line focus:border-[var(--ink)]"
|
||||
}`}
|
||||
// 16px on mobile: anything smaller makes iOS Safari zoom on focus.
|
||||
className="h-11 w-full min-w-0 bg-transparent px-2.5 font-mono text-[16px] text-ink outline-none placeholder:font-sans placeholder:text-muted sm:flex-1 sm:text-[15px]"
|
||||
/>
|
||||
<Button type="submit" disabled={busy} className="h-11 w-full sm:w-auto sm:shrink-0">
|
||||
<span className="swap">
|
||||
<span data-off={busy} className="inline-flex items-center justify-center gap-2">
|
||||
Shorten <ArrowRight size={16} />
|
||||
</span>
|
||||
<span data-off={!busy} className="grid place-items-center">
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent [animation-duration:600ms]" />
|
||||
</span>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mode selector */}
|
||||
<div className="mt-4">
|
||||
<div className="mb-1.5 flex items-center justify-between">
|
||||
<span className="text-[13px] font-medium text-muted">Link style</span>
|
||||
<span className="font-mono text-[12px] text-muted">
|
||||
{/* Options */}
|
||||
<div className="flex flex-col gap-2 px-1.5 pb-1.5 pt-3 sm:flex-row sm:items-center">
|
||||
<div className="sm:w-72">
|
||||
<SegmentedControl segments={segments} value={mode} onChange={onMode} />
|
||||
</div>
|
||||
{user && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPinOn((v) => !v)}
|
||||
aria-pressed={pinOn}
|
||||
className={`press focusable inline-flex h-9 items-center justify-center gap-1.5 rounded-lg px-3 text-[13px] font-medium ${
|
||||
pinOn ? "bg-surface-2 text-ink" : "text-muted hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
<Lock size={14} />
|
||||
{pinOn ? "PIN on" : "Add PIN"}
|
||||
</button>
|
||||
)}
|
||||
<span className="truncate px-1 font-mono text-[12px] text-muted sm:ml-auto">
|
||||
{getShortDomain()}/<span className="text-ink">{preview}</span>
|
||||
</span>
|
||||
</div>
|
||||
<SegmentedControl segments={segments} value={mode} onChange={onMode} />
|
||||
</div>
|
||||
|
||||
{/* Custom alias */}
|
||||
<AnimatePresence initial={false}>
|
||||
{mode === "custom" && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={ease}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<motion.div key="alias" {...collapse}>
|
||||
<div className="px-1.5 pb-1.5 pt-1">
|
||||
<div
|
||||
className={`mt-3 flex items-center overflow-hidden rounded-xl border bg-surface-2 transition-colors ${
|
||||
errorInput === "alias" ? "border-red-400" : "border-line focus-within:border-[var(--ink)]"
|
||||
className={`field flex items-center overflow-hidden ${
|
||||
errorInput === "alias" ? "field-error" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="select-none pl-3.5 font-mono text-sm text-muted">
|
||||
<span className="select-none pl-3 font-mono text-[15px] text-muted sm:text-sm">
|
||||
{getShortDomain()}/
|
||||
</span>
|
||||
<input
|
||||
@@ -194,102 +239,74 @@ export function ShortenForm() {
|
||||
if (errorInput === "alias") clearError();
|
||||
}}
|
||||
placeholder="spring-launch"
|
||||
className="h-11 w-full bg-transparent pr-3.5 font-mono text-sm text-ink outline-none placeholder:text-muted"
|
||||
aria-label="Custom ending"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
className="h-11 w-full min-w-0 bg-transparent pr-3 font-mono text-[16px] text-ink outline-none placeholder:text-muted sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* PIN protection */}
|
||||
<div className="mt-4 rounded-xl border border-line bg-surface-2 p-3.5">
|
||||
{user ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPinOn((v) => !v)}
|
||||
className="focusable flex w-full items-center gap-3 rounded-lg text-left"
|
||||
>
|
||||
<span
|
||||
className={`relative h-5 w-9 shrink-0 rounded-full transition-colors ${
|
||||
pinOn ? "bg-[var(--ink)]" : "bg-[var(--ring)]"
|
||||
}`}
|
||||
>
|
||||
<motion.span
|
||||
layout
|
||||
transition={{ type: "spring", stiffness: 600, damping: 32 }}
|
||||
className={`absolute top-0.5 h-4 w-4 rounded-full bg-[var(--surface)] ${
|
||||
pinOn ? "right-0.5" : "left-0.5"
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<span className="block text-[13px] font-medium text-ink">
|
||||
Protect with a 6-digit PIN
|
||||
</span>
|
||||
<span className="block text-xs text-muted">
|
||||
Visitors enter it before redirect
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<AnimatePresence initial={false}>
|
||||
{pinOn && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={ease}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-3.5">
|
||||
<motion.div key="pin" {...collapse}>
|
||||
<div className="px-1.5 pb-1.5 pt-1">
|
||||
<PinInput value={pin} onChange={setPin} />
|
||||
<p className="mt-2 px-0.5 text-[12px] text-muted">
|
||||
Visitors enter this before they're redirected.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2.5 text-muted">
|
||||
<Lock size={16} />
|
||||
<p className="text-[13px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/login")}
|
||||
className="focusable rounded font-medium text-ink underline underline-offset-2"
|
||||
>
|
||||
Sign in
|
||||
</button>{" "}
|
||||
for custom aliases and PIN protection.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
<AnimatePresence>
|
||||
<AnimatePresence initial={false}>
|
||||
{error && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="mt-3 text-[13px] font-medium text-red-500"
|
||||
>
|
||||
<motion.p key="error" role="alert" {...collapse}>
|
||||
<span className="block px-2.5 pb-2 pt-1 text-[13px] font-medium text-danger">
|
||||
{error}
|
||||
</span>
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</form>
|
||||
|
||||
{/* Submit */}
|
||||
<Button type="submit" size="lg" block disabled={busy} className="mt-4">
|
||||
{busy ? (
|
||||
<span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||||
) : (
|
||||
"Shorten link"
|
||||
)}
|
||||
</Button>
|
||||
</motion.form>
|
||||
{!user && results.length === 0 && (
|
||||
<p className="mt-4 text-center text-[13px] text-muted">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/login")}
|
||||
className="focusable rounded font-medium text-ink underline decoration-[var(--ring)] underline-offset-4 hover:decoration-current"
|
||||
>
|
||||
Sign in
|
||||
</button>{" "}
|
||||
to pick your own ending, add a PIN, and track clicks.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Results, newest on top. Height + opacity so the list below makes room smoothly. */}
|
||||
<div className="mt-3">
|
||||
<AnimatePresence initial={false}>
|
||||
{results.map(({ link, copied }) => (
|
||||
<motion.div
|
||||
key={link.id}
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
transition={ease}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pb-2">
|
||||
<ResultCard link={link} autoCopied={copied} onShowQr={setQrTarget} />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<QrModal link={qrTarget} onClose={() => setQrTarget(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { motion } from "framer-motion";
|
||||
import type { DayCount } from "../lib/types";
|
||||
|
||||
interface Props {
|
||||
@@ -7,7 +6,7 @@ interface Props {
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export function Sparkline({ data, width = 80, height = 28 }: Props) {
|
||||
export function Sparkline({ data, width = 64, height = 24 }: Props) {
|
||||
const max = Math.max(1, ...data.map((d) => d.count));
|
||||
const n = data.length;
|
||||
const stepX = n > 1 ? width / (n - 1) : width;
|
||||
@@ -25,16 +24,13 @@ export function Sparkline({ data, width = 80, height = 28 }: Props) {
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} className="overflow-visible text-muted">
|
||||
<motion.polyline
|
||||
<polyline
|
||||
points={line}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.75}
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
initial={{ pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
/>
|
||||
{last && <circle cx={last[0]} cy={last[1]} r={2.4} className="fill-[var(--ink)]" />}
|
||||
</svg>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import { Sun, Moon } from "./icons";
|
||||
|
||||
@@ -10,20 +9,12 @@ export function ThemeToggle() {
|
||||
<button
|
||||
onClick={toggle}
|
||||
aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
|
||||
className="focusable relative grid h-9 w-9 place-items-center overflow-hidden rounded-lg border border-line bg-surface text-muted hover:text-ink"
|
||||
className="press focusable grid h-9 w-9 place-items-center rounded-lg text-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.span
|
||||
key={theme}
|
||||
initial={{ y: 12, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -12, opacity: 0 }}
|
||||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||||
className="grid place-items-center"
|
||||
>
|
||||
{dark ? <Moon size={17} /> : <Sun size={17} />}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
<span className="swap">
|
||||
<Sun size={17} data-off={dark} />
|
||||
<Moon size={17} data-off={!dark} />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+43
-74
@@ -1,83 +1,59 @@
|
||||
import { motion } from "framer-motion";
|
||||
import type { ShortLink } from "../lib/types";
|
||||
import {
|
||||
compactNumber,
|
||||
fullShortUrl,
|
||||
prettyHost,
|
||||
relativeTime,
|
||||
shortUrl,
|
||||
} from "../lib/format";
|
||||
import { compactNumber, fullShortUrl, prettyHost, relativeTime, shortUrl } from "../lib/format";
|
||||
import { BarChart } from "./BarChart";
|
||||
import { Button } from "./ui/Button";
|
||||
import { CopyButton } from "./ui/CopyButton";
|
||||
import { HoldToDelete } from "./ui/HoldToDelete";
|
||||
import { Lock } from "./icons";
|
||||
import type { LinkItemProps } from "./UrlRow";
|
||||
|
||||
interface Props {
|
||||
link: ShortLink;
|
||||
onEdit: (link: ShortLink) => void;
|
||||
onDelete: (link: ShortLink) => void;
|
||||
onCopy: () => void;
|
||||
onManagePin: (link: ShortLink) => void;
|
||||
onShowQr: (link: ShortLink) => void;
|
||||
}
|
||||
const modeLabel: Record<string, string> = {
|
||||
random: "Random",
|
||||
memorable: "Words",
|
||||
custom: "Custom",
|
||||
};
|
||||
|
||||
export function UrlCard({
|
||||
link,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onCopy,
|
||||
onDeleteTap,
|
||||
onManagePin,
|
||||
onShowQr,
|
||||
}: Props) {
|
||||
}: LinkItemProps) {
|
||||
const weekTotal = link.last7Days.reduce((s, d) => s + d.count, 0);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullShortUrl(link.code));
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
onCopy();
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.15 } }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="card flex flex-col gap-4 p-5 sm:flex-row sm:items-stretch sm:gap-6"
|
||||
>
|
||||
<div className="card flex flex-col gap-5 p-5 sm:flex-row sm:items-stretch sm:gap-6">
|
||||
{/* Left: identity + actions */}
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<div className="flex items-center gap-2 text-[11px] text-muted">
|
||||
<span className="rounded-full border border-line px-2 py-0.5 font-medium uppercase tracking-wide">
|
||||
{link.mode}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 text-[12px] text-muted">
|
||||
<span>{modeLabel[link.mode] ?? link.mode}</span>
|
||||
{link.hasPin && (
|
||||
<>
|
||||
<span aria-hidden>·</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Lock size={12} /> PIN
|
||||
<Lock size={11} /> PIN
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<span className="ml-auto">{relativeTime(link.createdAt)}</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span>{relativeTime(link.createdAt)}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={fullShortUrl(link.code)}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
className="focusable mt-2 inline-block truncate rounded font-mono text-lg font-semibold text-ink hover:text-accent"
|
||||
>
|
||||
<p className="mt-1.5 truncate font-mono text-lg font-semibold text-ink">
|
||||
{shortUrl(link.code)}
|
||||
</a>
|
||||
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-[13px] text-muted" title={link.longUrl}>
|
||||
{prettyHost(link.longUrl)}
|
||||
→ {prettyHost(link.longUrl)}
|
||||
</p>
|
||||
|
||||
<div className="mt-auto flex flex-wrap items-center gap-1.5 pt-4">
|
||||
<Button size="sm" variant="outline" onClick={copy}>
|
||||
Copy
|
||||
</Button>
|
||||
<div className="mt-auto flex flex-wrap items-center gap-1 pt-4">
|
||||
<CopyButton
|
||||
text={fullShortUrl(link.code)}
|
||||
label="Copy"
|
||||
size={14}
|
||||
className="h-8 rounded-lg bg-[var(--ink)] px-3 text-[13px] text-[var(--bg)] hover:opacity-85"
|
||||
/>
|
||||
<Button size="sm" variant="ghost" onClick={() => onShowQr(link)}>
|
||||
QR
|
||||
</Button>
|
||||
@@ -87,37 +63,30 @@ export function UrlCard({
|
||||
<Button size="sm" variant="ghost" onClick={() => onManagePin(link)}>
|
||||
{link.hasPin ? "PIN" : "Add PIN"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => onDelete(link)}
|
||||
className="ml-auto hover:!text-red-500"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<HoldToDelete
|
||||
label="Delete"
|
||||
onConfirm={() => onDelete(link)}
|
||||
onTap={onDeleteTap}
|
||||
className="ml-auto h-8 rounded-lg px-3 text-[13px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: stats */}
|
||||
<div className="flex w-full flex-col rounded-xl border border-line bg-surface-2 p-4 sm:w-64">
|
||||
<div className="mb-3 flex items-end justify-between">
|
||||
<div className="flex w-full flex-col rounded-xl bg-surface-2 p-4 sm:w-64">
|
||||
<div className="mb-3 flex items-end justify-between tabular-nums">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wide text-muted">
|
||||
Total clicks
|
||||
</p>
|
||||
<p className="text-2xl font-semibold text-ink">
|
||||
<p className="text-[12px] text-muted">Clicks</p>
|
||||
<p className="text-2xl font-semibold tracking-[-0.02em] text-ink">
|
||||
{compactNumber(link.totalClicks)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-[11px] uppercase tracking-wide text-muted">7 days</p>
|
||||
<p className="text-base font-semibold text-accent">
|
||||
+{compactNumber(weekTotal)}
|
||||
<p className="text-[13px] font-medium text-accent">
|
||||
+{compactNumber(weekTotal)} <span className="text-muted">7d</span>
|
||||
</p>
|
||||
</div>
|
||||
<BarChart data={link.last7Days} height={64} />
|
||||
</div>
|
||||
<BarChart data={link.last7Days} />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
+39
-84
@@ -1,127 +1,82 @@
|
||||
import { motion } from "framer-motion";
|
||||
import type { ShortLink } from "../lib/types";
|
||||
import {
|
||||
compactNumber,
|
||||
fullShortUrl,
|
||||
prettyHost,
|
||||
shortUrl,
|
||||
} from "../lib/format";
|
||||
import { compactNumber, fullShortUrl, prettyHost, shortUrl } from "../lib/format";
|
||||
import { Sparkline } from "./Sparkline";
|
||||
import { Copy, Qr, Lock, Edit, Trash } from "./icons";
|
||||
import { CopyButton } from "./ui/CopyButton";
|
||||
import { HoldToDelete } from "./ui/HoldToDelete";
|
||||
import { Qr, Lock, Edit } from "./icons";
|
||||
|
||||
interface Props {
|
||||
export interface LinkItemProps {
|
||||
link: ShortLink;
|
||||
onEdit: (link: ShortLink) => void;
|
||||
onDelete: (link: ShortLink) => void;
|
||||
onCopy: () => void;
|
||||
onDeleteTap: () => void;
|
||||
onManagePin: (link: ShortLink) => void;
|
||||
onShowQr: (link: ShortLink) => void;
|
||||
}
|
||||
|
||||
function IconButton({
|
||||
label,
|
||||
onClick,
|
||||
danger,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
danger?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
className={`focusable grid h-8 w-8 place-items-center rounded-lg border border-line bg-surface text-muted transition-colors ${
|
||||
danger ? "hover:border-red-400 hover:text-red-500" : "hover:bg-surface-2 hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
export const iconBtn =
|
||||
"press focusable grid h-8 w-8 place-items-center rounded-lg text-muted hover:bg-surface-2 hover:text-ink";
|
||||
|
||||
export function UrlRow({
|
||||
link,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onCopy,
|
||||
onDeleteTap,
|
||||
onManagePin,
|
||||
onShowQr,
|
||||
}: Props) {
|
||||
}: LinkItemProps) {
|
||||
const weekTotal = link.last7Days.reduce((s, d) => s + d.count, 0);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullShortUrl(link.code));
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
onCopy();
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
|
||||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||||
className="card flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:gap-4"
|
||||
>
|
||||
<div className="card flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-4">
|
||||
{/* identity */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<a
|
||||
href={fullShortUrl(link.code)}
|
||||
onClick={(e) => e.preventDefault()}
|
||||
className="focusable truncate rounded font-mono text-sm font-semibold text-ink hover:text-accent"
|
||||
>
|
||||
<p className="truncate font-mono text-sm font-semibold text-ink">
|
||||
{shortUrl(link.code)}
|
||||
</a>
|
||||
</p>
|
||||
{link.hasPin && <Lock size={12} className="shrink-0 text-muted" />}
|
||||
</div>
|
||||
<p className="truncate text-[12px] text-muted" title={link.longUrl}>
|
||||
{prettyHost(link.longUrl)}
|
||||
→ {prettyHost(link.longUrl)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{/* stats */}
|
||||
<div className="flex shrink-0 items-center gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold leading-none text-ink">
|
||||
{compactNumber(link.totalClicks)}
|
||||
</p>
|
||||
<p className="text-[10px] uppercase tracking-wide text-muted">clicks</p>
|
||||
</div>
|
||||
<span className="hidden text-[12px] font-medium text-accent sm:inline">
|
||||
+{compactNumber(weekTotal)}
|
||||
</span>
|
||||
<div className="flex shrink-0 items-center gap-3 tabular-nums">
|
||||
<div className="hidden sm:block">
|
||||
<Sparkline data={link.last7Days} />
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-ink sm:w-14 sm:text-right">
|
||||
{compactNumber(link.totalClicks)}
|
||||
{weekTotal > 0 && (
|
||||
<span className="block text-[11px] font-medium text-accent">
|
||||
+{compactNumber(weekTotal)}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* actions */}
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<IconButton label="Copy link" onClick={copy}>
|
||||
<Copy size={15} />
|
||||
</IconButton>
|
||||
<IconButton label="Show QR code" onClick={() => onShowQr(link)}>
|
||||
<div className="-mr-1.5 flex shrink-0 items-center">
|
||||
<CopyButton text={fullShortUrl(link.code)} className={iconBtn} />
|
||||
<button onClick={() => onShowQr(link)} aria-label="Show QR code" className={iconBtn}>
|
||||
<Qr size={15} />
|
||||
</IconButton>
|
||||
<IconButton label="Manage PIN" onClick={() => onManagePin(link)}>
|
||||
</button>
|
||||
<button onClick={() => onManagePin(link)} aria-label="Manage PIN" className={iconBtn}>
|
||||
<Lock size={15} />
|
||||
</IconButton>
|
||||
<IconButton label="Edit destination" onClick={() => onEdit(link)}>
|
||||
</button>
|
||||
<button onClick={() => onEdit(link)} aria-label="Edit destination" className={iconBtn}>
|
||||
<Edit size={15} />
|
||||
</IconButton>
|
||||
<IconButton label="Delete link" danger onClick={() => onDelete(link)}>
|
||||
<Trash size={15} />
|
||||
</IconButton>
|
||||
</button>
|
||||
<HoldToDelete
|
||||
onConfirm={() => onDelete(link)}
|
||||
onTap={onDeleteTap}
|
||||
className="h-8 w-8 rounded-lg hover:bg-surface-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import { motion, type HTMLMotionProps } from "framer-motion";
|
||||
import { forwardRef, type ReactNode } from "react";
|
||||
import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
|
||||
|
||||
type Variant = "primary" | "ghost" | "outline" | "dark";
|
||||
type Variant = "primary" | "ghost" | "outline" | "danger";
|
||||
type Size = "sm" | "md" | "lg";
|
||||
|
||||
interface Props extends Omit<HTMLMotionProps<"button">, "children"> {
|
||||
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
children: ReactNode;
|
||||
@@ -12,36 +11,33 @@ interface Props extends Omit<HTMLMotionProps<"button">, "children"> {
|
||||
}
|
||||
|
||||
const sizes: Record<Size, string> = {
|
||||
sm: "h-9 px-3.5 text-[13px] gap-1.5",
|
||||
md: "h-10 px-4 text-sm gap-2",
|
||||
lg: "h-12 px-6 text-[15px] gap-2",
|
||||
sm: "h-8 px-3 text-[13px] gap-1.5 rounded-lg",
|
||||
md: "h-10 px-4 text-sm gap-2 rounded-xl",
|
||||
lg: "h-12 px-5 text-[15px] gap-2 rounded-xl",
|
||||
};
|
||||
|
||||
const variants: Record<Variant, string> = {
|
||||
// solid ink — the one strong action, inverts with the theme
|
||||
primary:
|
||||
"bg-[var(--ink)] text-[var(--bg)] font-medium hover:opacity-90",
|
||||
dark: "bg-[var(--ink)] text-[var(--bg)] font-medium hover:opacity-90",
|
||||
outline:
|
||||
"bg-transparent text-ink font-medium border border-line hover:bg-surface-2",
|
||||
ghost: "bg-transparent text-muted font-medium hover:bg-surface-2 hover:text-ink",
|
||||
// solid ink — the one strong action per view
|
||||
primary: "bg-[var(--ink)] text-[var(--bg)] hover:opacity-85",
|
||||
danger: "bg-[var(--danger)] text-white hover:opacity-90",
|
||||
outline: "bg-surface text-ink border border-line hover:bg-surface-2",
|
||||
ghost: "text-muted hover:bg-surface-2 hover:text-ink",
|
||||
};
|
||||
|
||||
// CSS press feedback (not framer-motion) — runs off the main thread and needs no JS.
|
||||
export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
|
||||
{ variant = "primary", size = "md", block, className = "", children, ...rest },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<motion.button
|
||||
<button
|
||||
ref={ref}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
className={`focusable inline-flex select-none items-center justify-center rounded-xl transition-colors ${
|
||||
className={`press focusable inline-flex select-none items-center justify-center font-medium disabled:opacity-40 ${
|
||||
sizes[size]
|
||||
} ${variants[variant]} ${block ? "w-full" : ""} ${className}`}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</motion.button>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Check, Copy } from "../icons";
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
/** Visible label; omit for an icon-only button. */
|
||||
label?: string;
|
||||
className?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
/** Copies on click and morphs its icon to a check. The button itself is the
|
||||
* confirmation, so no toast is needed. */
|
||||
export function CopyButton({ text, label, className = "", size = 15 }: Props) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timer = useRef<number>();
|
||||
useEffect(() => () => clearTimeout(timer.current), []);
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
return; // clipboard blocked — don't claim success
|
||||
}
|
||||
setCopied(true);
|
||||
clearTimeout(timer.current);
|
||||
timer.current = window.setTimeout(() => setCopied(false), 1500);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
aria-label={label ? undefined : copied ? "Copied" : "Copy link"}
|
||||
className={`press focusable inline-flex items-center justify-center gap-2 font-medium ${className}`}
|
||||
>
|
||||
<span className="swap" aria-hidden>
|
||||
<Copy size={size} data-off={copied} />
|
||||
<Check size={size} data-off={!copied} />
|
||||
</span>
|
||||
{label && (
|
||||
<span className="swap">
|
||||
<span data-off={copied}>{label}</span>
|
||||
<span data-off={!copied} className="text-center">
|
||||
Copied
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
<span className="sr-only" aria-live="polite">
|
||||
{copied ? "Copied to clipboard" : ""}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { Trash } from "../icons";
|
||||
|
||||
interface Props {
|
||||
onConfirm: () => void;
|
||||
/** Called on a quick tap, so the user learns they need to hold. */
|
||||
onTap?: () => void;
|
||||
label?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** Press and hold to delete. Replaces a confirm modal: deliberate (slow fill,
|
||||
* 1s linear) where the user is deciding, instant snap-back on release.
|
||||
* Works with pointer and with Space/Enter held down. */
|
||||
export function HoldToDelete({ onConfirm, onTap, label, className = "" }: Props) {
|
||||
const [holding, setHolding] = useState(false);
|
||||
// Ref mirrors state so a press + release in the same frame can't leave the
|
||||
// button "held" (state would still read false in the release handler).
|
||||
const held = useRef(false);
|
||||
const started = useRef(0);
|
||||
const done = useRef(false);
|
||||
|
||||
function set(v: boolean) {
|
||||
held.current = v;
|
||||
setHolding(v);
|
||||
}
|
||||
function start() {
|
||||
if (held.current) return; // ignore extra fingers / key repeat
|
||||
done.current = false;
|
||||
started.current = Date.now();
|
||||
set(true);
|
||||
}
|
||||
function stop() {
|
||||
if (!held.current) return;
|
||||
set(false);
|
||||
if (!done.current && Date.now() - started.current < 250) onTap?.();
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-holding={holding}
|
||||
aria-label={label ? undefined : "Hold to delete"}
|
||||
title="Hold to delete"
|
||||
onPointerDown={(e) => {
|
||||
if (e.button !== 0) return;
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
start();
|
||||
}}
|
||||
onPointerUp={stop}
|
||||
onPointerCancel={stop}
|
||||
onKeyDown={(e) => {
|
||||
if ((e.key === " " || e.key === "Enter") && !e.repeat) {
|
||||
e.preventDefault();
|
||||
start();
|
||||
}
|
||||
}}
|
||||
onKeyUp={(e) => (e.key === " " || e.key === "Enter") && stop()}
|
||||
onBlur={stop}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
onTransitionEnd={(e) => {
|
||||
// Fires when the fill reaches 100% while still held.
|
||||
if (held.current && e.propertyName === "clip-path" && !done.current) {
|
||||
done.current = true;
|
||||
set(false);
|
||||
onConfirm();
|
||||
}
|
||||
}}
|
||||
className={`press focusable relative isolate inline-flex select-none items-center justify-center gap-1.5 overflow-hidden font-medium text-muted hover:text-[var(--danger)] ${className}`}
|
||||
>
|
||||
<Trash size={15} />
|
||||
{label && <span>{label}</span>}
|
||||
{/* Overlay copy of the content in white on red, revealed left→right. */}
|
||||
<span
|
||||
aria-hidden
|
||||
className="hold-fill absolute inset-0 flex items-center justify-center gap-1.5 bg-[var(--danger)] text-white"
|
||||
>
|
||||
<Trash size={15} />
|
||||
{label && <span>{label}</span>}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+12
-13
@@ -8,6 +8,8 @@ interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const out = [0.23, 1, 0.32, 1] as const;
|
||||
|
||||
export function Modal({ open, onClose, title, children }: Props) {
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
@@ -24,26 +26,23 @@ export function Modal({ open, onClose, title, children }: Props) {
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-[150] grid place-items-center p-4"
|
||||
className="fixed inset-0 z-[150] grid place-items-end p-3 sm:place-items-center sm:p-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { duration: 0.2 } }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.15 } }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-[2px]"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40" onClick={onClose} />
|
||||
{/* Centred, so it scales from its own centre. Exit is quicker than enter. */}
|
||||
<motion.div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
initial={{ opacity: 0, y: 12, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 8, scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 30 }}
|
||||
className="card relative z-10 w-full max-w-md p-6 shadow-[0_24px_60px_-24px_rgba(0,0,0,0.45)]"
|
||||
initial={{ opacity: 0, scale: 0.96, y: 8 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0, transition: { duration: 0.24, ease: out } }}
|
||||
exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12, ease: "easeOut" } }}
|
||||
className="card relative z-10 w-full max-w-md p-6 shadow-[var(--shadow-lg)]"
|
||||
>
|
||||
{title && (
|
||||
<h2 className="mb-4 text-lg font-semibold tracking-tight text-ink">
|
||||
<h2 className="mb-4 text-[17px] font-semibold tracking-[-0.01em] text-ink">
|
||||
{title}
|
||||
</h2>
|
||||
)}
|
||||
|
||||
@@ -47,16 +47,17 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
<motion.div
|
||||
key={t.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 16, scale: 0.96 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.96, y: 8 }}
|
||||
transition={{ type: "spring", stiffness: 460, damping: 30 }}
|
||||
className="card pointer-events-auto flex items-center gap-2.5 rounded-full px-4 py-2.5 shadow-[0_12px_32px_-16px_rgba(0,0,0,0.5)]"
|
||||
// Enters and leaves through the same (bottom) edge.
|
||||
initial={{ opacity: 0, y: "100%" }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: "60%", transition: { duration: 0.15, ease: "easeOut" } }}
|
||||
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
|
||||
className="card pointer-events-auto flex items-center gap-2.5 rounded-full py-2 pl-2.5 pr-4 shadow-[var(--shadow-lg)]"
|
||||
>
|
||||
<span
|
||||
className={`grid h-5 w-5 place-items-center rounded-full ${
|
||||
t.kind === "error"
|
||||
? "bg-red-500/15 text-red-500"
|
||||
? "bg-[var(--danger)] text-white"
|
||||
: t.kind === "info"
|
||||
? "bg-[var(--surface-2)] text-muted"
|
||||
: "bg-[var(--ink)] text-[var(--bg)]"
|
||||
|
||||
@@ -30,7 +30,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
/* ignore */
|
||||
}
|
||||
const meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (meta) meta.setAttribute("content", theme === "dark" ? "#0e100a" : "#f4f2ea");
|
||||
// Must track --bg in index.css.
|
||||
if (meta) meta.setAttribute("content", theme === "dark" ? "#09090b" : "#fbfbfa");
|
||||
}, [theme]);
|
||||
|
||||
const toggle = useCallback(
|
||||
|
||||
+112
-32
@@ -3,50 +3,53 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Light — clean neutral paper */
|
||||
--bg: #fbfbfa;
|
||||
/* Light — ink on paper. One strong colour (ink) for actions, one quiet
|
||||
colour (green) reserved for growth numbers. */
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f4f4f5;
|
||||
--ink: #18181b;
|
||||
--muted: #71717a;
|
||||
--line: #e9e9eb;
|
||||
--ink: #111113;
|
||||
--muted: #6f6f78;
|
||||
--line: #e7e7ea;
|
||||
--ring: #d4d4d8;
|
||||
--accent: #2563eb;
|
||||
--accent-soft: rgba(37, 99, 235, 0.1);
|
||||
--accent-ink: #ffffff;
|
||||
--accent: #15803d;
|
||||
--accent-soft: rgba(17, 17, 19, 0.08);
|
||||
--danger: #dc2626;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark — near-black */
|
||||
--bg: #09090b;
|
||||
--surface: #111113;
|
||||
--surface-2: #19191c;
|
||||
--ink: #fafafa;
|
||||
--muted: #a1a1aa;
|
||||
--line: #232327;
|
||||
--ring: #2e2e33;
|
||||
--accent: #60a5fa;
|
||||
--accent-soft: rgba(96, 165, 250, 0.14);
|
||||
--accent-ink: #09090b;
|
||||
--bg: #0a0a0b;
|
||||
--surface: #121214;
|
||||
--surface-2: #1a1a1d;
|
||||
--ink: #f4f4f5;
|
||||
--muted: #9b9ba4;
|
||||
--line: #242428;
|
||||
--ring: #33333a;
|
||||
--accent: #4ade80;
|
||||
--accent-soft: rgba(244, 244, 245, 0.12);
|
||||
--danger: #f87171;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
/* Inter's straight-sided 1, open 4/6/9, single-storey a read cleaner in codes. */
|
||||
font-feature-settings: "cv01", "cv09", "cv11", "ss03";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
min-height: 100dvh;
|
||||
/* ponytail: no colour transition on theme switch — the body fading while
|
||||
every card snaps looks broken. Instant is correct. */
|
||||
}
|
||||
|
||||
/* Semantic token utilities (kept stable so components stay theme-driven) */
|
||||
@@ -55,19 +58,90 @@ body {
|
||||
.text-ink { color: var(--ink); }
|
||||
.text-muted { color: var(--muted); }
|
||||
.border-line { border-color: var(--line); }
|
||||
.bg-accent { background-color: var(--accent); }
|
||||
.text-accent { color: var(--accent); }
|
||||
.text-accent-ink { color: var(--accent-ink); }
|
||||
.text-danger { color: var(--danger); }
|
||||
|
||||
.card {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* One field look for every input + input wrapper. */
|
||||
.field {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.75rem;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
.field:focus,
|
||||
.field:focus-within {
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 4px var(--accent-soft);
|
||||
}
|
||||
.field-error,
|
||||
.field-error:focus,
|
||||
.field-error:focus-within {
|
||||
border-color: var(--danger);
|
||||
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
|
||||
}
|
||||
|
||||
/* Anything pressable: instant feedback on press, no hover motion. */
|
||||
.press {
|
||||
transition-property: transform, background-color, color, border-color, opacity;
|
||||
transition-duration: 160ms;
|
||||
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.press:active:not(:disabled) {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* Two stacked states that crossfade through a blur, so the swap reads as one
|
||||
object changing rather than two objects trading places. */
|
||||
.swap {
|
||||
display: grid;
|
||||
}
|
||||
.swap > * {
|
||||
grid-area: 1 / 1;
|
||||
transition: opacity 200ms ease, filter 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.swap > [data-off="true"] {
|
||||
opacity: 0;
|
||||
filter: blur(4px);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* Enter for list items — CSS keyframes, so it stays smooth while React is busy. */
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
}
|
||||
.rise {
|
||||
animation: rise 280ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
|
||||
}
|
||||
|
||||
/* Hold-to-delete: the fill sweeps slowly while held, snaps back on release. */
|
||||
.hold-fill {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
transition: clip-path 200ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
[data-holding="true"] > .hold-fill {
|
||||
clip-path: inset(0 0 0 0);
|
||||
transition: clip-path 1000ms linear;
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
background: var(--ink);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
@@ -77,10 +151,16 @@ body {
|
||||
border-radius: 99px;
|
||||
border: 3px solid var(--bg);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--ring); }
|
||||
|
||||
/* Focus ring — single subtle accent ring */
|
||||
.focusable:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
|
||||
}
|
||||
|
||||
/* Reduced motion = no movement, keep the fades that explain state. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.press:active:not(:disabled) { transform: none; }
|
||||
.swap > [data-off="true"] { transform: none; }
|
||||
.rise { animation-name: fade; }
|
||||
@keyframes fade { from { opacity: 0; } }
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { MotionConfig } from "framer-motion";
|
||||
import App from "./App";
|
||||
import { ThemeProvider } from "./context/ThemeContext";
|
||||
import { AuthProvider } from "./context/AuthContext";
|
||||
@@ -12,6 +13,8 @@ import "./index.css";
|
||||
function render() {
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
{/* Honour the OS "reduce motion" setting: framer drops transforms, keeps fades. */}
|
||||
<MotionConfig reducedMotion="user">
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<ToastProvider>
|
||||
@@ -21,6 +24,7 @@ function render() {
|
||||
</ToastProvider>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
</MotionConfig>
|
||||
</StrictMode>,
|
||||
);
|
||||
}
|
||||
|
||||
+89
-74
@@ -1,6 +1,6 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { api } from "../lib/api";
|
||||
import { compactNumber } from "../lib/format";
|
||||
@@ -10,7 +10,6 @@ import { UrlRow } from "../components/UrlRow";
|
||||
import { Pagination } from "../components/Pagination";
|
||||
import { PinManager } from "../components/PinManager";
|
||||
import { EditLinkModal } from "../components/EditLinkModal";
|
||||
import { DeleteLinkModal } from "../components/DeleteLinkModal";
|
||||
import { QrModal } from "../components/QrModal";
|
||||
import { Button } from "../components/ui/Button";
|
||||
import { useToast } from "../components/ui/Toast";
|
||||
@@ -34,15 +33,17 @@ function ViewToggle({ view, onChange }: { view: View; onChange: (v: View) => voi
|
||||
{ value: "compact", label: "Compact view", rows: 3 },
|
||||
];
|
||||
return (
|
||||
<div className="flex shrink-0 gap-1 rounded-xl border border-line bg-surface p-1">
|
||||
<div className="flex shrink-0 gap-0.5 rounded-xl bg-surface-2 p-1">
|
||||
{opts.map((o) => (
|
||||
<button
|
||||
key={o.value}
|
||||
onClick={() => onChange(o.value)}
|
||||
aria-label={o.label}
|
||||
aria-pressed={view === o.value}
|
||||
className={`focusable grid h-8 w-9 place-items-center rounded-lg transition-colors ${
|
||||
view === o.value ? "bg-[var(--ink)] text-[var(--bg)]" : "text-muted hover:text-ink"
|
||||
className={`press focusable grid h-8 w-9 place-items-center rounded-lg ${
|
||||
view === o.value
|
||||
? "bg-surface text-ink shadow-[0_1px_2px_rgba(0,0,0,0.08),0_0_0_1px_var(--line)]"
|
||||
: "text-muted hover:text-ink"
|
||||
}`}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
@@ -74,7 +75,6 @@ export function Dashboard() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [pinTarget, setPinTarget] = useState<ShortLink | null>(null);
|
||||
const [editTarget, setEditTarget] = useState<ShortLink | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<ShortLink | null>(null);
|
||||
const [qrTarget, setQrTarget] = useState<ShortLink | null>(null);
|
||||
|
||||
// Server-driven page + aggregate stats (the client never loads all links).
|
||||
@@ -159,12 +159,34 @@ export function Dashboard() {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
async function handleDeleted(_id: string, message: string) {
|
||||
setDeleteTarget(null);
|
||||
toast(message, "info");
|
||||
// Hold-to-delete already asked for intent, so remove the row immediately
|
||||
// and reconcile with the server after.
|
||||
async function deleteLink(link: ShortLink) {
|
||||
setPageData((pd) =>
|
||||
pd ? { items: pd.items.filter((l) => l.id !== link.id), total: pd.total - 1 } : pd,
|
||||
);
|
||||
try {
|
||||
await api.deleteLink(link.id);
|
||||
toast(`Deleted ${link.code}`, "info");
|
||||
} catch {
|
||||
toast("Couldn't delete that link", "error");
|
||||
}
|
||||
await Promise.all([loadPage(), loadStats()]);
|
||||
}
|
||||
|
||||
// "/" jumps to search from anywhere on the page.
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
const t = e.target as HTMLElement;
|
||||
if (e.key !== "/" || t.closest("input, textarea, [contenteditable]")) return;
|
||||
e.preventDefault();
|
||||
searchRef.current?.focus();
|
||||
}
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, []);
|
||||
|
||||
// Edit / PIN: patch the row in place (totals are unaffected).
|
||||
function applyUpdate(updated: ShortLink, message: string) {
|
||||
setPageData((pd) =>
|
||||
@@ -196,33 +218,26 @@ export function Dashboard() {
|
||||
{/* header */}
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-ink sm:text-3xl">
|
||||
Your links
|
||||
<h1 className="text-2xl font-semibold tracking-[-0.02em] text-ink sm:text-[28px]">
|
||||
Links
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted">
|
||||
Search, edit destinations, manage PINs, or retire a link.
|
||||
</p>
|
||||
</div>
|
||||
<Link to="/">
|
||||
<Button size="md">
|
||||
<Button size="md" onClick={() => navigate("/")}>
|
||||
<Plus size={16} /> New link
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* stat tiles */}
|
||||
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||
<div className="card mt-6 grid grid-cols-3 divide-x divide-[var(--line)]">
|
||||
{statTiles.map((s) => (
|
||||
<div key={s.label} className="card p-4">
|
||||
<p className="text-[11px] uppercase tracking-wide text-muted">
|
||||
{s.label}
|
||||
</p>
|
||||
<div key={s.label} className="px-4 py-3.5 sm:px-5 sm:py-4">
|
||||
<p className="text-[12px] text-muted">{s.label}</p>
|
||||
<p
|
||||
className={`mt-1 text-2xl font-semibold sm:text-3xl ${
|
||||
className={`mt-0.5 text-xl font-semibold tabular-nums tracking-[-0.02em] sm:text-2xl ${
|
||||
s.accent ? "text-accent" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
{s.value}
|
||||
{stats ? s.value : <span className="text-[var(--ring)]">—</span>}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
@@ -231,19 +246,26 @@ export function Dashboard() {
|
||||
{/* toolbar: search + view toggle */}
|
||||
{hasAnyLinks && (
|
||||
<div className="mt-6 flex items-center gap-2.5">
|
||||
<div className="flex h-10 flex-1 items-center gap-2 rounded-xl border border-line bg-surface px-3 focus-within:border-[var(--ink)]">
|
||||
<Search size={16} className="text-muted" />
|
||||
<div className="field flex h-10 flex-1 items-center gap-2 px-3">
|
||||
<Search size={16} className="shrink-0 text-muted" />
|
||||
<input
|
||||
ref={searchRef}
|
||||
value={query}
|
||||
onChange={(e) => updateSearch(e.target.value)}
|
||||
placeholder="Search by code or URL…"
|
||||
className="h-full w-full bg-transparent text-sm text-ink outline-none placeholder:text-muted"
|
||||
placeholder="Search links…"
|
||||
aria-label="Search links"
|
||||
className="h-full w-full bg-transparent text-[16px] text-ink outline-none placeholder:text-muted sm:text-sm"
|
||||
/>
|
||||
{!query && (
|
||||
<kbd className="hidden h-5 shrink-0 place-items-center rounded border border-line px-1.5 text-[11px] text-muted sm:grid">
|
||||
/
|
||||
</kbd>
|
||||
)}
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => updateSearch("")}
|
||||
aria-label="Clear search"
|
||||
className="focusable grid h-6 w-6 place-items-center rounded-md text-muted hover:bg-surface-2 hover:text-ink"
|
||||
className="press focusable grid h-6 w-6 shrink-0 place-items-center rounded-md text-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
@@ -255,7 +277,7 @@ export function Dashboard() {
|
||||
|
||||
{/* result meta */}
|
||||
{hasAnyLinks && (
|
||||
<p className="mt-3 text-xs text-muted">
|
||||
<p className="mt-3 px-0.5 text-xs tabular-nums text-muted">
|
||||
{query ? (
|
||||
<>
|
||||
<span className="font-medium text-ink">{total}</span> of {totalLinks}{" "}
|
||||
@@ -277,21 +299,20 @@ export function Dashboard() {
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="card h-24 animate-pulse opacity-60"
|
||||
style={{ animationDelay: `${i * 120}ms` }}
|
||||
className="card animate-pulse opacity-60"
|
||||
style={{ animationDelay: `${i * 120}ms`, height: view === "compact" ? 64 : 172 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : total === 0 && !debouncedQuery ? (
|
||||
<div className="card grid place-items-center gap-2 p-12 text-center">
|
||||
<p className="text-lg font-semibold text-ink">No links yet</p>
|
||||
<p className="text-base font-semibold text-ink">No links yet</p>
|
||||
<p className="max-w-xs text-sm text-muted">
|
||||
Create your first short link and it'll show up here with live click
|
||||
stats.
|
||||
Links you shorten while signed in show up here, with clicks per day.
|
||||
</p>
|
||||
<Link to="/" className="mt-2">
|
||||
<Button>Create a link</Button>
|
||||
</Link>
|
||||
<Button className="mt-2" onClick={() => navigate("/")}>
|
||||
Shorten a link
|
||||
</Button>
|
||||
</div>
|
||||
) : total === 0 ? (
|
||||
<div className="card grid place-items-center gap-1.5 p-10 text-center">
|
||||
@@ -306,33 +327,37 @@ export function Dashboard() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<motion.div layout className={view === "compact" ? "space-y-2.5" : "space-y-3"}>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{items.map((link) =>
|
||||
view === "compact" ? (
|
||||
<UrlRow
|
||||
{/* Rows rise in (staggered) when a page loads, but not while typing a
|
||||
search — animation on every keystroke reads as lag. Deleting
|
||||
collapses the row so the ones below slide up instead of jumping. */}
|
||||
<div>
|
||||
<AnimatePresence initial={false}>
|
||||
{items.map((link, i) => {
|
||||
const props = {
|
||||
link,
|
||||
onEdit: setEditTarget,
|
||||
onDelete: deleteLink,
|
||||
onDeleteTap: () => toast("Hold to delete", "info"),
|
||||
onManagePin: setPinTarget,
|
||||
onShowQr: setQrTarget,
|
||||
};
|
||||
return (
|
||||
<motion.div
|
||||
key={link.id}
|
||||
link={link}
|
||||
onEdit={setEditTarget}
|
||||
onDelete={setDeleteTarget}
|
||||
onCopy={() => toast("Copied to clipboard", "success")}
|
||||
onManagePin={setPinTarget}
|
||||
onShowQr={setQrTarget}
|
||||
/>
|
||||
) : (
|
||||
<UrlCard
|
||||
key={link.id}
|
||||
link={link}
|
||||
onEdit={setEditTarget}
|
||||
onDelete={setDeleteTarget}
|
||||
onCopy={() => toast("Copied to clipboard", "success")}
|
||||
onManagePin={setPinTarget}
|
||||
onShowQr={setQrTarget}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</AnimatePresence>
|
||||
exit={{ opacity: 0, height: 0, transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] } }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className={`${view === "compact" ? "pb-2" : "pb-3"} ${query ? "" : "rise"}`}
|
||||
style={{ animationDelay: `${i * 40}ms` }}
|
||||
>
|
||||
{view === "compact" ? <UrlRow {...props} /> : <UrlCard {...props} />}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<Pagination page={safePage} pageCount={pageCount} onPage={goToPage} />
|
||||
</>
|
||||
@@ -357,17 +382,7 @@ export function Dashboard() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<QrModal
|
||||
link={qrTarget}
|
||||
onClose={() => setQrTarget(null)}
|
||||
onCopied={() => toast("Copied to clipboard", "success")}
|
||||
/>
|
||||
|
||||
<DeleteLinkModal
|
||||
link={deleteTarget}
|
||||
onClose={() => setDeleteTarget(null)}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
<QrModal link={qrTarget} onClose={() => setQrTarget(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+12
-39
@@ -1,51 +1,24 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { ShortenForm } from "../components/ShortenForm";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
const fade = {
|
||||
hidden: { opacity: 0, y: 10 },
|
||||
show: (i: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { delay: i * 0.05, duration: 0.3, ease: "easeOut" },
|
||||
}),
|
||||
};
|
||||
|
||||
export function Home() {
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-xl px-4 pb-16 pt-7 sm:pb-24 sm:pt-20">
|
||||
{/* Compact hero on mobile so the input is reachable; full size on desktop. */}
|
||||
<motion.p
|
||||
custom={0}
|
||||
variants={fade}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="text-center text-[13px] font-medium text-muted"
|
||||
>
|
||||
{user ? `Welcome back, ${user.name.split(" ")[0]}` : "No account needed to start"}
|
||||
</motion.p>
|
||||
// Compact hero on mobile keeps the input above the fold; roomier on desktop.
|
||||
<div className="mx-auto w-full max-w-xl px-4 pb-20 pt-10 sm:pb-28 sm:pt-24">
|
||||
<h1 className="text-center text-[30px] font-semibold leading-[1.1] tracking-[-0.03em] text-ink sm:text-[44px]">
|
||||
Shorten a link.
|
||||
</h1>
|
||||
<p className="mt-2.5 text-center text-[15px] text-muted">
|
||||
{user
|
||||
? `Welcome back, ${user.name.split(" ")[0]}. Paste and it's copied.`
|
||||
: "Paste it, and the short one is on your clipboard."}
|
||||
</p>
|
||||
|
||||
<motion.h1
|
||||
custom={1}
|
||||
variants={fade}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="mt-1.5 text-center text-[26px] font-semibold leading-[1.1] tracking-tight text-ink sm:mt-3 sm:text-5xl"
|
||||
>
|
||||
Long links, made tiny.
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
custom={2}
|
||||
variants={fade}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="mt-5 sm:mt-8"
|
||||
>
|
||||
<div className="mt-8 sm:mt-10">
|
||||
<ShortenForm />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+2
-8
@@ -1,4 +1,3 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
@@ -30,12 +29,7 @@ export function Login() {
|
||||
|
||||
return (
|
||||
<div className="mx-auto grid min-h-[70vh] max-w-sm place-items-center px-4 pb-24 pt-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, ease: "easeOut" }}
|
||||
className="card w-full p-6 sm:p-7"
|
||||
>
|
||||
<div className="card w-full p-6 sm:p-7">
|
||||
<span className="grid h-10 w-10 place-items-center rounded-xl bg-[var(--ink)] text-[var(--bg)]">
|
||||
<Scissors size={18} />
|
||||
</span>
|
||||
@@ -81,7 +75,7 @@ export function Login() {
|
||||
<p className="mt-5 text-center text-xs text-muted">
|
||||
You can still create random & memorable links without an account.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,8 @@
|
||||
export default {
|
||||
darkMode: "class",
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
||||
// hover: only applies on devices that can actually hover — no sticky taps on phones.
|
||||
future: { hoverOnlyWhenSupported: true },
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
@@ -12,6 +14,9 @@ export default {
|
||||
xl: "0.75rem",
|
||||
"2xl": "1rem",
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
out: "cubic-bezier(0.23, 1, 0.32, 1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
Reference in new issue
Block a user