From 12ca201a5865e0715c900f3ed0bea96ee912afd2 Mon Sep 17 00:00:00 2001 From: Aly Raffauf Date: Thu, 23 Jul 2026 02:19:53 -0400 Subject: [PATCH] unique sigils --- src/components/actor-app.tsx | 60 ++++++++------------ src/components/bluesky-profile.tsx | 41 ++++---------- src/components/haunt-sigil.tsx | 91 ++++++++++++++++++++++++++++++ src/styles/globals.css | 28 ++++++--- 4 files changed, 145 insertions(+), 75 deletions(-) create mode 100644 src/components/haunt-sigil.tsx diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx index b4b7670..28e9aa3 100644 --- a/src/components/actor-app.tsx +++ b/src/components/actor-app.tsx @@ -2,11 +2,11 @@ import type { CSSProperties, FormEvent, ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { BlueskyProfile } from "~/components/bluesky-profile"; +import { HauntSigil } from "~/components/haunt-sigil"; import { IdentityCard } from "~/components/identity-card"; import { MasonryGrid } from "~/components/masonry-grid"; import { ProfileSections } from "~/components/profile-sections"; import { resolveMiniDoc } from "~/lib/atproto/mini-doc"; -import { hashString } from "~/lib/did-random"; import { getBlueskyProfile } from "~/lib/providers/bluesky"; import { searchBlueskyActors } from "~/lib/providers/bluesky-search"; import { getDidAtmosphere } from "~/lib/theme/did-atmosphere"; @@ -171,6 +171,11 @@ function Home() { const [query, setQuery] = useState(""); const { actors, isSearching } = useActorSearch(query); const { isOpen, openPanel, searchAreaRef } = useSearchPanel(); + const matchingActor = findMatchingActor(query, actors); + const sigilSeed = matchingActor?.did ?? (query.trim() || "haunt.at"); + const sigilColor = matchingActor + ? getDidTheme(matchingActor.did).css.accent + : undefined; function visitPresence(event: FormEvent) { event.preventDefault(); @@ -190,7 +195,11 @@ function Home() {
- +
setIsOpen(true), searchAreaRef }; } -type HauntSigilProps = { - seed: string; -}; - -function HauntSigil({ seed }: HauntSigilProps) { - const pattern = getHauntSigilPattern(seed); - - return ( - +function findMatchingActor( + query: string, + actors: BlueskyActorSearchResult[], +): BlueskyActorSearchResult | undefined { + const identifier = query.trim().replace(/^@/, "").toLowerCase(); + if (!identifier) return undefined; + + return actors.find( + (actor) => + actor.handle.toLowerCase() === identifier || + actor.did.toLowerCase() === identifier, ); } -function getHauntSigilPattern(seed: string) { - const hash = hashString(seed); - const hue = 190 + (hash % 35); - - return { - color: `hsl(${hue} 38% 76%)`, - dashArray: `${4 + (hash % 8)} ${3 + ((hash >>> 3) % 8)}`, - rotation: (hash >>> 6) % 60, - }; -} - type SearchResultsProps = { actors: BlueskyActorSearchResult[]; isOpen: boolean; diff --git a/src/components/bluesky-profile.tsx b/src/components/bluesky-profile.tsx index 6f9bc1b..01b9b8e 100644 --- a/src/components/bluesky-profile.tsx +++ b/src/components/bluesky-profile.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; +import { HauntSigil } from "~/components/haunt-sigil"; import type { BlueskyProfile } from "~/lib/providers/bluesky"; type BlueskyProfileProps = { @@ -43,29 +44,20 @@ export function BlueskyProfile({ did, handle, profile }: BlueskyProfileProps) {

)}
- - -
- {profile.description && ( -

- {profile.description} -

- )} - {/* {profile.website && ( -

- - {formatWebsiteLabel(profile.website)} - -

- )} */} +
+ {profile.description && ( +

+ {profile.description} +

+ )} +