@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/imessage/components/contacts-view.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { Avatar } from "@/components/avatar";
+import { ago } from "@/lib/format";
+import { formatHandle } from "@/lib/handles";
+import { cn } from "@/lib/utils";
+
+export interface ContactRowView {
+  id: string;
+  name: string | null;
+  handle: string;
+  status: "allowed" | "blocked" | "unknown";
+  optedOut: boolean;
+  lastMessageAt: string | null;
+  demo: boolean;
+}
+
+type Filter = "allowed" | "unknown" | "blocked";
+
+const FILTERS: { value: Filter; label: string }[] = [
+  { value: "allowed", label: "Allowed" },
+  { value: "unknown", label: "Requests" },
+  { value: "blocked", label: "Blocked" },
+];
+
+export function ContactsView({
+  contacts,
+  onAdd,
+  onStatus,
+  onOpen,
+}: {
+  contacts: ContactRowView[];
+  onAdd: (handle: string, name: string) => Promise<void>;
+  onStatus: (id: string, status: Filter) => void;
+  onOpen: (id: string) => void;
+}) {
+  const [filter, setFilter] = useState<Filter>("allowed");
+  const [handle, setHandle] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const shown = contacts.filter((c) => c.status === filter);
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-[760px] px-4 py-8 md:px-8 md:py-12">
+        <h1 className="text-[28px] font-semibold tracking-[-0.025em]">Allowlist</h1>
+        <p className="mt-1.5 max-w-[56ch] text-[14px] leading-relaxed text-muted-foreground">
+          The assistant answers only the numbers and emails on this list. Everyone else lands in Requests, where you can
+          allow or block them.
+        </p>
+
+        <form
+          className="mt-7 rounded-[1.4rem] bg-black/[0.03] p-1.5 ring-1 ring-black/[0.04] dark:bg-white/[0.04]"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            setPending(true);
+            setError(null);
+            try {
+              await onAdd(handle, name);
+              setHandle("");
+              setName("");
+              setFilter("allowed");
+            } catch (err) {
+              setError(err instanceof Error ? err.message : "Could not add");
+            } finally {
+              setPending(false);
+            }
+          }}
+        >
+          <div className="flex flex-col gap-2 rounded-[calc(1.4rem-0.375rem)] bg-background p-3 shadow-[0_1px_2px_rgba(0,0,0,0.04)] sm:flex-row sm:items-end">
+            <label className="flex-1">
+              <span className="mb-1 block text-[12px] font-medium text-muted-foreground">Phone or email</span>
+              <input
+                value={handle}
+                onChange={(e) => setHandle(e.target.value)}
+                required
+                placeholder="+1 512 555 0100"
+                className="h-9 w-full rounded-lg border bg-background px-3 text-[14px] outline-none focus:ring-2 focus:ring-ring/30"
+              />
+            </label>
+            <label className="flex-1">
+              <span className="mb-1 block text-[12px] font-medium text-muted-foreground">Name</span>
+              <input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Optional"
+                className="h-9 w-full rounded-lg border bg-background px-3 text-[14px] outline-none focus:ring-2 focus:ring-ring/30"
+              />
+            </label>
+            <button
+              type="submit"
+              disabled={pending}
+              className="h-9 rounded-full bg-foreground px-5 text-[13px] font-medium text-background transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] active:scale-[0.98] disabled:opacity-50"
+            >
+              Allow
+            </button>
+          </div>
+          {error ? <p className="px-3 pb-1.5 pt-2 text-[12px] text-destructive">{error}</p> : null}
+        </form>
+
+        <div className="mt-8 flex gap-1.5" role="tablist" aria-label="Filter contacts">
+          {FILTERS.map((f) => {
+            const count = contacts.filter((c) => c.status === f.value).length;
+            return (
+              <button
+                key={f.value}
+                type="button"
+                role="tab"
+                aria-selected={filter === f.value}
+                onClick={() => setFilter(f.value)}
+                className={cn(
+                  "rounded-full px-3.5 py-1.5 text-[13px] font-medium transition-colors duration-300",
+                  filter === f.value ? "bg-foreground text-background" : "text-muted-foreground hover:bg-accent",
+                )}
+              >
+                {f.label}
+                <span className="ml-1.5 tabular-nums opacity-60">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <ul className="mt-4 divide-y rounded-[1.2rem] bg-background ring-1 ring-border">
+          {shown.length === 0 ? (
+            <li className="px-4 py-10 text-center text-[13px] text-muted-foreground">
+              {filter === "unknown" ? "No requests. Texts from numbers you haven't allowed show up here." : "Nobody here yet."}
+            </li>
+          ) : null}
+          {shown.map((c) => (
+            <li key={c.id} className="flex items-center gap-3 px-4 py-3">
+              <Avatar name={c.name} handle={c.handle} size={36} />
+              <button type="button" onClick={() => onOpen(c.id)} className="min-w-0 flex-1 text-left">
+                <span className="block truncate text-[14px] font-medium">{c.name ?? formatHandle(c.handle)}</span>
+                <span className="block truncate text-[12px] text-muted-foreground">
+                  {c.name ? formatHandle(c.handle) : "No name"} · last text {ago(c.lastMessageAt)}
+                  {c.optedOut ? " · texted STOP" : ""}
+                  {c.demo ? " · sample" : ""}
+                </span>
+              </button>
+              {c.status !== "allowed" ? (
+                <button
+                  type="button"
+                  onClick={() => onStatus(c.id, "allowed")}
+                  className="rounded-full bg-bubble-out px-3.5 py-1.5 text-[12px] font-medium text-white"
+                >
+                  Allow
+                </button>
+              ) : null}
+              {c.status !== "blocked" ? (
+                <button
+                  type="button"
+                  onClick={() => onStatus(c.id, "blocked")}
+                  className="rounded-full px-3 py-1.5 text-[12px] font-medium text-muted-foreground ring-1 ring-border hover:text-destructive"
+                >
+                  Block
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => onStatus(c.id, "unknown")}
+                  className="rounded-full px-3 py-1.5 text-[12px] font-medium text-muted-foreground ring-1 ring-border"
+                >
+                  Unblock
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/imessage/components/conversation-list.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { Search } from "lucide-react";
+import { Avatar } from "@/components/avatar";
+import { formatHandle } from "@/lib/handles";
+import { listTime } from "@/lib/format";
+import { cn } from "@/lib/utils";
+
+export interface ConversationSummary {
+  id: string;
+  name: string | null;
+  handle: string;
+  preview: string;
+  lastMessageAt: string | null;
+  status: "allowed" | "blocked" | "unknown";
+  thinking: boolean;
+  needsAttention: boolean;
+  demo: boolean;
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  query,
+  onQuery,
+  onSelect,
+}: {
+  conversations: ConversationSummary[];
+  selectedId: string | null;
+  query: string;
+  onQuery: (q: string) => void;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="px-3 pb-2 pt-1">
+        <label className="flex h-8 items-center gap-2 rounded-lg bg-black/[0.045] px-2.5 text-[13px] text-muted-foreground transition-colors focus-within:bg-black/[0.06] dark:bg-white/[0.06]">
+          <Search className="size-3.5" strokeWidth={1.75} />
+          <input
+            value={query}
+            onChange={(e) => onQuery(e.target.value)}
+            placeholder="Search"
+            aria-label="Search conversations"
+            className="w-full bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+          />
+        </label>
+      </div>
+      <ul className="min-h-0 flex-1 overflow-y-auto px-2 pb-3" role="listbox" aria-label="Conversations">
+        {conversations.length === 0 ? (
+          <li className="px-3 py-10 text-center text-[13px] text-muted-foreground">
+            {query ? "No matches." : "No conversations yet. Texts appear here as they arrive."}
+          </li>
+        ) : null}
+        {conversations.map((c) => {
+          const selected = c.id === selectedId;
+          return (
+            <li key={c.id}>
+              <button
+                type="button"
+                role="option"
+                aria-selected={selected}
+                onClick={() => onSelect(c.id)}
+                className={cn(
+                  "group flex w-full items-center gap-3 rounded-[0.8rem] px-2.5 py-2 text-left transition-[background-color] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
+                  selected ? "bg-bubble-out text-white" : "hover:bg-black/[0.04] dark:hover:bg-white/[0.05]",
+                )}
+              >
+                <Avatar name={c.name} handle={c.handle} size={40} />
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-baseline justify-between gap-2">
+                    <span className="truncate text-[14px] font-semibold tracking-[-0.01em]">
+                      {c.name ?? formatHandle(c.handle)}
+                    </span>
+                    <span
+                      className={cn(
+                        "shrink-0 text-[12px] tabular-nums",
+                        selected ? "text-white/80" : "text-muted-foreground",
+                      )}
+                    >
+                      {listTime(c.lastMessageAt)}
+                    </span>
+                  </span>
+                  <span
+                    className={cn(
+                      "mt-0.5 line-clamp-2 text-[13px] leading-[1.3]",
+                      selected ? "text-white/85" : "text-muted-foreground",
+                    )}
+                  >
+                    {c.thinking ? <em className="not-italic">Writing a reply…</em> : c.preview}
+                  </span>
+                  <span className="mt-1 flex gap-1.5 empty:hidden">
+                    {c.status === "unknown" ? <Tag selected={selected}>Not on allowlist</Tag> : null}
+                    {c.status === "blocked" ? <Tag selected={selected}>Blocked</Tag> : null}
+                    {c.needsAttention ? <Tag selected={selected} tone="warn">Unanswered</Tag> : null}
+                    {c.demo ? <Tag selected={selected}>Sample</Tag> : null}
+                  </span>
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function Tag({
+  children,
+  selected,
+  tone = "muted",
+}: {
+  children: React.ReactNode;
+  selected: boolean;
+  tone?: "muted" | "warn";
+}) {
+  return (
+    <span
+      className={cn(
+        "rounded-full px-1.5 py-px text-[11px] font-medium",
+        selected
+          ? "bg-white/20 text-white"
+          : tone === "warn"
+            ? "bg-warn/12 text-warn"
+            : "bg-black/[0.05] text-muted-foreground dark:bg-white/[0.08]",
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/templates/imessage/components/nav-rail.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { LogOut, MessageCircle, Settings2, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type View = "messages" | "contacts" | "setup";
+
+const ITEMS: { view: View; href: string; label: string; icon: typeof MessageCircle }[] = [
+  { view: "messages", href: "/", label: "Messages", icon: MessageCircle },
+  { view: "contacts", href: "/contacts", label: "Allowlist", icon: Users },
+  { view: "setup", href: "/setup", label: "Setup", icon: Settings2 },
+];
+
+/** Left rail on desktop, bottom tab bar on phones. */
+export function NavRail({
+  view,
+  setupIssues,
+  requests,
+  onSignOut,
+}: {
+  view: View;
+  setupIssues: number;
+  requests: number;
+  onSignOut: () => void;
+}) {
+  return (
+    <nav
+      aria-label="Sections"
+      className="order-last flex shrink-0 items-center justify-around border-t bg-rail/80 px-2 py-1.5 md:order-first md:w-[68px] md:flex-col md:justify-start md:gap-1 md:border-r md:border-t-0 md:px-0 md:py-4"
+    >
+      <span className="mb-4 hidden size-9 items-center justify-center rounded-[0.7rem] bg-gradient-to-b from-[#5ac8fa] to-[#0a84ff] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_4px_12px_-4px_rgba(10,132,255,0.6)] md:flex">
+        <MessageCircle className="size-[18px] fill-white" strokeWidth={1.5} />
+      </span>
+      {ITEMS.map(({ view: v, href, label, icon: Icon }) => {
+        const badge = v === "setup" ? setupIssues : v === "contacts" ? requests : 0;
+        const active = v === view;
+        return (
+          <Link
+            key={v}
+            href={href}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "relative flex flex-col items-center gap-0.5 rounded-xl px-3 py-1.5 text-[10px] font-medium transition-colors duration-300 md:w-[58px] md:py-2",
+              active ? "text-bubble-out md:bg-bubble-out/10" : "text-muted-foreground hover:text-foreground md:hover:bg-black/[0.04]",
+            )}
+          >
+            <Icon className="size-5" strokeWidth={1.5} />
+            {label}
+            {badge > 0 ? (
+              <span className="absolute right-2 top-0.5 min-w-4 rounded-full bg-[#ff3b30] px-1 text-center text-[10px] font-semibold leading-4 text-white md:right-1 md:top-1">
+                {badge}
+              </span>
+            ) : null}
+          </Link>
+        );
+      })}
+      <button
+        type="button"
+        onClick={onSignOut}
+        className="flex flex-col items-center gap-0.5 whitespace-nowrap rounded-xl px-3 py-1.5 text-[10px] font-medium text-muted-foreground hover:text-foreground md:mt-auto md:w-[58px]"
+      >
+        <LogOut className="size-5" strokeWidth={1.5} />
+        Sign out
+      </button>
+    </nav>
+  );
+}