package components import ( "tangled.org/arabica.social/arabica/internal/atproto" "tangled.org/arabica.social/arabica/internal/web/bff" "tangled.org/pdewey.com/atp" ) templ AuthorByline(profile *atproto.Profile, fallbackDID string) { if profile != nil { @Avatar(AvatarProps{ AvatarURL: authorAvatar(profile), DisplayName: authorDisplay(profile, fallbackDID), Size: "sm", }) { authorDisplay(profile, fallbackDID) } { "@" + atp.DisplayHandle(authorProfileID(profile, fallbackDID)) } } else if fallbackDID != "" { @Avatar(AvatarProps{DisplayName: fallbackDID, Size: "sm"}) { fallbackDID } } } func authorProfileID(profile *atproto.Profile, fallbackDID string) string { if profile != nil && profile.Handle != "" { return profile.Handle } if profile != nil && profile.DID != "" { return profile.DID } return fallbackDID } func authorDisplay(profile *atproto.Profile, fallbackDID string) string { if profile != nil && profile.DisplayName != nil && *profile.DisplayName != "" { return *profile.DisplayName } if profile != nil && profile.Handle != "" { return atp.DisplayHandle(profile.Handle) } if profile != nil && profile.DID != "" { return profile.DID } return fallbackDID } func authorAvatar(profile *atproto.Profile) string { if profile != nil && profile.Avatar != nil { return *profile.Avatar } return "" } // TypeBadge renders a colored pill with an icon and type label for record type identification. templ TypeBadge(recordType string) { switch recordType { case "brew": @IconCoffee() Brew case "bean": @IconBean() Bean case "recipe": @IconFileText() Recipe case "roaster": @IconStore() Roaster case "grinder": @IconGear() Grinder case "brewer": @IconBrewer() Brewer case "steep": @IconLeaf() Steep case "tea": @IconLeaf() Tea case "vendor": @IconStore() Vendor case "infuser": @IconDisc() Infuser case "vessel": @IconTeapot() Vessel case "cafe": @IconMapPin() Cafe case "drink": @IconCoffee() Drink } } // RecordViewHeaderProps defines properties for the shared record view header. type RecordViewHeaderProps struct { RecordType string // "brew", "bean", "roaster", "grinder", "brewer", "recipe" Title string Timestamp string // formatted date string TimestampISO string // ISO 8601 for element AuthorDID string AuthorHandle string AuthorDisplay string AuthorAvatar string } // RecordViewHeader renders the tinted header region with author attribution and type badge. templ RecordViewHeader(props RecordViewHeaderProps) {

if props.AuthorHandle != "" {

@Avatar(AvatarProps{ AvatarURL: props.AuthorAvatar, DisplayName: props.AuthorDisplay, Size: "md", })

if props.AuthorDisplay != "" { { props.AuthorDisplay } } { "@" + atp.DisplayHandle(props.AuthorHandle) }

{ props.Timestamp }

@TypeBadge(props.RecordType)

} else {

@TypeBadge(props.RecordType) { props.Timestamp }

} if props.Title != "" {

{ props.Title }

}

} // EmptyStateProps defines properties for empty state messaging type EmptyStateProps struct { Message string SubMessage string ActionURL string ActionText string } // EmptyState renders an empty state card templ EmptyState(props EmptyStateProps) { @Card(CardProps{InnerCard: true, Class: "text-center"}, emptyStateContent(props)) } templ emptyStateContent(props EmptyStateProps) {

{ props.Message }

if props.SubMessage != "" {

{ props.SubMessage }

} if props.ActionURL != "" && props.ActionText != "" { { props.ActionText } } } // DetailFieldProps defines properties for a labeled detail field type DetailFieldProps struct { Label string Value string LinkHref string // Optional: wraps value in a link Icon templ.Component // Optional: icon rendered before the label } // DetailField renders a labeled value with a "Not specified" fallback templ DetailField(props DetailFieldProps) {

if props.Icon != nil { @props.Icon { props.Label } } else { { props.Label } }

if props.Value != "" && props.LinkHref != "" { { props.Value } } else if props.Value != "" {

{ props.Value }

} else { Not specified }

} // DetailStackedProps defines properties for the typography-driven detail components. type DetailStackedProps struct { Label string Value string LinkHref string // Optional: wraps value in a link Icon templ.Component // Optional: icon rendered before the label Large bool // Uses detail-value-lg for primary details } // DetailStacked renders a label above a value with no container box. templ DetailStacked(props DetailStackedProps) { if props.Value != "" || props.LinkHref == "" {

if props.Icon != nil { @props.Icon { props.Label } } else { { props.Label } } if props.Value != "" && props.LinkHref != "" { { props.Value } } else if props.Value != "" { { props.Value } } else { — }

} } // DetailInline renders a label and value side by side on one line. templ DetailInline(props DetailStackedProps) { if props.Value != "" {

if props.Icon != nil { @props.Icon { props.Label } } else { { props.Label } } if props.LinkHref != "" { { props.Value } } else { { props.Value } }

} } // JournalField renders a ledger-style row: label left, value right, with a faint separator. templ JournalField(props DetailStackedProps) { if props.Value != "" {

if props.Icon != nil { @props.Icon { props.Label } } else { { props.Label } } if props.LinkHref != "" { { props.Value } } else { { props.Value } }

} } type PageHeaderProps struct { Title string BackURL string ActionURL string ActionText string ActionClass string // Optional custom class for action button } templ PageHeader(props PageHeaderProps) {

if props.BackURL != "" { @BackButton() }

{ props.Title }

if props.ActionURL != "" && props.ActionText != "" { { props.ActionText } }

} type WelcomeCardProps struct { IsAuthenticated bool UserDID string AppName string // "arabica" or "oolong" — toggles per-app copy + buttons Ready bool } // WelcomeCard renders the authenticated welcome with action buttons (used on home page) templ WelcomeCard(props WelcomeCardProps) { if props.IsAuthenticated { if props.AppName == "oolong" { @welcomeAuthenticatedOolong(props) } else { @welcomeAuthenticatedArabica(props) } } } // WelcomeAuthenticated is the legacy two-arg entry point retained for // any caller still using it. New callers should pass WelcomeCardProps // (with AppName) so the per-app variants render. templ WelcomeAuthenticated(userDID string) { @welcomeAuthenticatedArabica(WelcomeCardProps{UserDID: userDID, Ready: true}) } templ welcomeAuthenticatedArabica(props WelcomeCardProps) {

Your coffee journey, documented.

if !props.Ready {

Welcome! A brewer, a roaster, and a bean — then you're ready to log brews.

Get Started →

}

if props.Ready { Log Brew } else { Log Brew — finish setup } Explore My Coffee Profile

} templ welcomeAuthenticatedOolong(props WelcomeCardProps) {

Your tea journey, documented.

if !props.Ready {

Welcome! A vendor, a vessel, and a tea — then you're ready to log steeps.

Get Started →

}

if props.Ready { Log Steep } else { Log Steep — finish setup } My Tea Profile

} // WelcomeHero renders the landing hero for unauthenticated users. // Currently a single coffee-flavored variant. Per-app messaging on // the hero (and the per-app /about / /terms pages) lands in Phase 4e. templ WelcomeHero() {

Your coffee journey, documented.

Log every brew, track your beans and equipment, and share your coffee story with the community.

Built on AT Protocol — you own your data.

} // WelcomeHeroFor returns the hero matching the running app. Unauth'd // homepage callers pass the app name so the tea variant lands in // oolong without an extra page-per-app. templ WelcomeHeroFor(appName string) { if appName == "oolong" {

Your tea journey, documented.

Log every steep, track your teaware and vendors, and share your tea story with the community.

Built on AT Protocol — you own your data.

} else { @WelcomeHero() } } // WelcomeLoginCard renders a compact login card for unauthenticated users templ WelcomeLoginCard() { @WelcomeLoginCardWithScript("/static/js/handle-autocomplete.js") } templ WelcomeLoginCardWithScript(handleAutocompleteScriptHref string) {

Log in to get started

Create an account · Learn more

What's an Atmosphere account?

One account { "for" } the entire AT Protocol ecosystem. Sign up once and use it across Arabica, Bluesky, Leaflet, and more. Your data is portable — you own it.

} templ AboutInfoCard() {

About Arabica

Add tasting notes and ratings to each brew
Track brewing variables like temperature, time, and grind size
Organize beans by origin and roaster
Portable: Own your coffee brewing history
Decentralized: Your data lives in your Personal Data Server (PDS)

Learn more

} // UserBadgeProps defines properties for user badge (avatar + name + handle) type UserBadgeProps struct { ProfileURL string // URL to link to (e.g., "/profile/handle") AvatarURL string DisplayName string Handle string TimeAgo string // Optional timestamp to display Size string // "sm" or "md" - defaults to "md" } // UserBadge renders a user avatar with display name and handle, properly aligned templ UserBadge(props UserBadgeProps) {

@Avatar(AvatarProps{ AvatarURL: props.AvatarURL, DisplayName: props.DisplayName, Size: props.Size, })

if props.DisplayName != "" { { props.DisplayName } } { "@" + atp.DisplayHandle(props.Handle) } if props.Size == "sm" && props.TimeAgo != "" { { props.TimeAgo } }

if (props.Size == "md" || props.Size == "") && props.TimeAgo != "" { { props.TimeAgo } }

} // AvatarProps defines properties for avatar rendering type AvatarProps struct { AvatarURL string DisplayName string Size string // "sm", "md", "lg" - defaults to "md" if empty } // Avatar renders a user avatar with safety checks and fallback // Supports three sizes: sm (w-8 h-8), md (w-12 h-12), lg (w-20 h-20) templ Avatar(props AvatarProps) { if props.AvatarURL != "" && bff.SafeAvatarURL(props.AvatarURL) != "" {

} else {

if props.DisplayName != "" && len(props.DisplayName) > 0 { { props.DisplayName[:1] } } else { ? }

} } // avatarClass returns the CSS class for avatar images based on size func avatarClass(size string) string { switch size { case "sm": return "avatar-sm" case "lg": return "avatar-lg" default: return "avatar-md" } } // avatarDimension returns the pixel dimension string for avatar images based on size func avatarDimension(size string) string { switch size { case "sm": return "32" case "lg": return "80" default: return "48" } } // avatarPlaceholderClass returns the CSS class for avatar placeholders based on size func avatarPlaceholderClass(size string) string { switch size { case "sm": return "avatar-placeholder-sm" case "lg": return "avatar-placeholder-lg" default: return "avatar-placeholder-md" } } // avatarTextClass returns the CSS class for avatar text based on size func avatarTextClass(size string) string { switch size { case "sm": return "avatar-text-sm" case "lg": return "avatar-text-lg" default: return "avatar-text-md" } } // RecipeAlphaWarning displays a warning banner about recipes being in early alpha. // TODO: remove this later once recipes are stable templ RecipeAlphaWarning() {

⚠️

Recipes are in early alpha

The recipe format may change significantly as we figure out what works best (e.g. it may be completely redesigned from the ground up with a more powerful recipe creator system). If that happens, your brews won't break – brew fields are filled in from the recipe at creation time, so they stand on their own. Only the recipe record itself would need to be recreated.

Feedback is very welcome! Arabica has had a pourover bias so far (due to its developer's preferences), so input from espresso folks is especially appreciated.

If you have feedback or suggestions (or comments) reach out on Bluesky or open an issue on Tangled or GitHub.

}