3d80ac2993
* mobile: add invitations, network creation, and settings (parity phase 1) Surface backend capabilities that already existed in the mobile API client but had no UI: - NetworkListScreen now lists pending invitations with an Accept action and a header "+" to create a network; empty state offers creation instead of pointing users to desktop. - New CreateNetworkSheet and use-invitations hooks (accept invite, create network) following the existing react-query patterns. - SettingsScreen replaces its placeholder with an email-notifications toggle (optimistic, mirrors desktop), app version, and sign out. - Wire the previously-unreachable Settings row into the Drawer. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * mobile: network member management and avatars (parity phase 2) - New NetworkSettingsScreen (reachable from the stream-list header) lists members with admin remove, an invite-by-email sheet, and pending invitations with revoke — backed by new use-member-management hooks. - Avatars: add avatar_object_id to HumanSchema, uploadAvatar/deleteAvatar/ getAvatarDownloadUrl client methods (raw PUT via expo-file-system), a use-avatar-url hook, and image rendering in the shared Avatar component. AccountScreen gains a tap-to-change profile picture via expo-image-picker. - auth-store gains refreshUser to pick up avatar changes. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * mobile: task particles — view, edit, and compose (parity phase 3) Bring the task particle to parity with desktop's richer model: - Replace the thin `quest` schema with desktop's `task` model (ChecklistItem, TaskProperties: title/notes/checklist/assigned_to/done) in the discriminated union, the Firestore converter, and consumers (StreamCard, FallbackParticleView). - New TaskParticleView renders an editable card (round done checkbox, title, notes, checklist with add/toggle/edit/remove, assignee chips) persisting each edit to Firestore; an 8s dwell auto-advances and field focus suspends playback. Wired into StreamView's render switch. - Compose: a task button in the ComposeDock opens a TaskComposeSheet (createTaskParticle helper). Gated off in the new-stream flow, where a stream's first particle must be text or media. Note: particles are written client-side to Firestore, matching desktop; Orion's REST validator still only accepts `quest`, which is a pre-existing inconsistency to reconcile backend-side separately. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * mobile: paper and file particle views (parity phase 4) - Extract the shared markdown renderer/theme out of TextParticleView into a reusable MarkdownBody component (DRY). - PaperParticleView renders desktop-authored documents (title + markdown) with a length-based dwell. - FileParticleView shows name/size and a Download action that opens a signed URL via the OS. - Both wired into StreamView's render switch; FallbackParticleView is now a true catch-all for unknown/folder types only. Deferred (documented for a follow-up phase): composing papers/files from mobile, particle attachments + lightbox, and link previews in text. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * mobile: billing & usage in network settings (parity phase 5) Surface the network plan, daily usage, and Stripe management — all backed by client methods that already existed. New use-billing hooks and a BillingSection (mirroring desktop): every member sees the plan + usage summary; admins get cadence selection + "Upgrade to Pro" (checkout) and "Manage subscription" (portal), opening Stripe in the system browser. Added to NetworkSettingsScreen. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * mobile: let users dismiss the keyboard from a task card Focusing a task field opened the keyboard with no way out — it covered the card and the stream's tap-to-advance zones. Now: - A "Done" pill appears at the card's top-right while editing (reusing the existing `editing` flag) and calls Keyboard.dismiss(); the title row reserves space so the pill never overlaps a long title. - The card ScrollView gains keyboardDismissMode (interactive on iOS, on-drag on Android) so dragging the card also dismisses the keyboard. Dismissing blurs the active field, which flips `editing` off and resumes the dwell timer and tap navigation automatically. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01LqGPzXQ1AA9CqYHgCgmbtV * decrease clutter in stream-view * format * format * consolidate avatar --------- Co-authored-by: Claude <[email protected]>
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { Image, Text, View } from 'react-native';
|
|
import type { Human } from '@/api/types';
|
|
import { useAvatarUrl } from '@/hooks/use-avatar-url';
|
|
import { resolveHumanDisplay } from '@/lib/humans';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
|
interface AvatarProps {
|
|
humanId: string | null | undefined;
|
|
humans: Human[] | undefined;
|
|
size?: Size;
|
|
/** True for online presence — adds a green ring (matches desktop). */
|
|
online?: boolean;
|
|
/** Background ring used to separate stacked avatars from the chrome. */
|
|
stackBg?: string;
|
|
/** Initials shown when the human can't be resolved (e.g. a group stream). */
|
|
fallbackInitials?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const sizeMap: Record<Size, { box: string; text: string; ring: number }> = {
|
|
xs: { box: 'h-6 w-6', text: 'text-[9px]', ring: 1.5 },
|
|
sm: { box: 'h-9 w-9', text: 'text-xs', ring: 2 },
|
|
md: { box: 'h-10 w-10', text: 'text-sm', ring: 2 },
|
|
lg: { box: 'h-16 w-16', text: 'text-xl', ring: 2.5 },
|
|
xl: { box: 'h-24 w-24', text: 'text-3xl', ring: 3 },
|
|
};
|
|
|
|
/**
|
|
* Human avatar: renders the profile picture when one is set (resolved to a
|
|
* signed URL via React Query), otherwise initials. Supports an optional online
|
|
* ring (green) and an outer stack separator ring used to keep overlapping
|
|
* avatars distinct on busy chrome. Matches desktop's avatar + presence pattern.
|
|
*/
|
|
export function Avatar({
|
|
humanId,
|
|
humans,
|
|
size = 'sm',
|
|
online = false,
|
|
stackBg,
|
|
fallbackInitials,
|
|
className,
|
|
}: AvatarProps) {
|
|
const display = resolveHumanDisplay(humanId, humans);
|
|
const human = humanId ? humans?.find((h) => h.id === humanId) : undefined;
|
|
const avatarUrl = useAvatarUrl(human?.avatar_object_id);
|
|
const dims = sizeMap[size];
|
|
const initials =
|
|
display.exists || fallbackInitials === undefined
|
|
? display.initials
|
|
: fallbackInitials;
|
|
|
|
return (
|
|
<View
|
|
className={cn(
|
|
'bg-black/15 items-center justify-center overflow-hidden rounded-full',
|
|
dims.box,
|
|
className,
|
|
)}
|
|
style={{
|
|
// Online ring is the priority; if not online, show the stack
|
|
// separator ring (if requested) so adjacent avatars stay distinct.
|
|
borderWidth: online ? dims.ring : stackBg ? dims.ring : 0,
|
|
borderColor: online ? '#22c55e' : (stackBg ?? 'transparent'),
|
|
}}
|
|
>
|
|
{avatarUrl ? (
|
|
<Image source={{ uri: avatarUrl }} className="h-full w-full" />
|
|
) : (
|
|
<Text className={cn('text-white font-semibold', dims.text)}>
|
|
{initials}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|