acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge branch 'main' into app-2067

Browse Source
This commit is contained in:
vineyardbovines
2026-04-21 09:59:44 -04:00
parent 525a8ac330 18052f08e0
commit 7d8912a17a
27 changed files with 876 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/claude.yml
+1 -1
View File
@@ -51,4 +51,4 @@ jobs:
# NOTE(sfn): we can add a custom system prompt here
claude_args: |
--model claude-opus-4-5-20251101
--model claude-opus-4-7
patches/expo-paste-input+0.1.15.patch
+136
View File
@@ -0,0 +1,136 @@
diff --git a/node_modules/expo-paste-input/ios/ExpoPasteInputView.swift b/node_modules/expo-paste-input/ios/ExpoPasteInputView.swift
index 2164aec4ec1d..d216db6d2927 100644
--- a/node_modules/expo-paste-input/ios/ExpoPasteInputView.swift
+++ b/node_modules/expo-paste-input/ios/ExpoPasteInputView.swift
@@ -511,14 +511,17 @@ class ExpoPasteInputView: ExpoView {
var attachmentRanges: [NSRange] = []
var mediaPayloads: [MediaPayload] = []
+ // Only track ranges for attachments we successfully extract a real payload
+ // from. Attachments without a payload (e.g. iOS dictation placeholders)
+ // are left alone — sanitizing them would delete characters the system
+ // manages itself, and emitting "unsupported" would raise a spurious error.
attributedText.enumerateAttribute(.attachment, in: NSRange(location: 0, length: attributedText.length), options: []) { value, range, _ in
guard let attachment = value as? NSTextAttachment else {
return
}
- attachmentRanges.append(range)
-
if let payload = self.extractMediaPayload(from: attachment, textView: textView, range: range) {
+ attachmentRanges.append(range)
mediaPayloads.append(payload)
}
}
@@ -529,9 +532,8 @@ class ExpoPasteInputView: ExpoView {
return
}
- attachmentRanges.append(range)
-
if let payload = self.extractMediaPayload(from: adaptiveGlyph) {
+ attachmentRanges.append(range)
mediaPayloads.append(payload)
}
}
@@ -539,17 +541,12 @@ class ExpoPasteInputView: ExpoView {
attachmentRanges = uniqueRanges(attachmentRanges)
- guard !attachmentRanges.isEmpty else {
- return
- }
-
- sanitizeAttachments(in: textView, ranges: attachmentRanges)
-
guard !mediaPayloads.isEmpty else {
- handleUnsupportedPaste()
return
}
+ sanitizeAttachments(in: textView, ranges: attachmentRanges)
+
emitImagesAsync(for: mediaPayloads)
}
@@ -651,6 +648,11 @@ class ExpoPasteInputView: ExpoView {
}
private func extractMediaPayload(from attachment: NSTextAttachment, textView: UITextView, range: NSRange) -> MediaPayload? {
+ // Only accept attachments that carry real image payloads. We intentionally
+ // do not fall back to `image(forBounds:)` or rendering the text view's
+ // hierarchy, because system-inserted attachments (e.g. the iOS dictation
+ // placeholder) draw themselves via those paths and would cause us to
+ // emit a screenshot of the composer as a "pasted image".
if let fileWrapperData = attachment.fileWrapper?.regularFileContents,
let payload = extractMediaPayload(fromData: fileWrapperData) {
return payload
@@ -667,20 +669,6 @@ class ExpoPasteInputView: ExpoView {
return .image(image)
}
- let attachmentBounds = attachment.bounds.size.width > 0 && attachment.bounds.size.height > 0
- ? attachment.bounds
- : CGRect(origin: .zero, size: CGSize(width: 128, height: 128))
-
- if let image = attachment.image(forBounds: attachmentBounds, textContainer: textView.textContainer, characterIndex: range.location),
- image.size.width > 0,
- image.size.height > 0 {
- return .image(image)
- }
-
- if let renderedImage = renderTextAttachment(in: textView, range: range) {
- return .image(renderedImage)
- }
-
return nil
}
@@ -701,47 +689,6 @@ class ExpoPasteInputView: ExpoView {
return .imageData(data)
}
- private func renderTextAttachment(in textView: UITextView, range: NSRange) -> UIImage? {
- let glyphRange = textView.layoutManager.glyphRange(forCharacterRange: range, actualCharacterRange: nil)
- var rect = textView.layoutManager.boundingRect(forGlyphRange: glyphRange, in: textView.textContainer)
-
- rect.origin.x += textView.textContainerInset.left - textView.contentOffset.x
- rect.origin.y += textView.textContainerInset.top - textView.contentOffset.y
- rect = rect.integral
-
- guard rect.width > 1, rect.height > 1 else {
- return nil
- }
-
- let format = UIGraphicsImageRendererFormat.default()
- format.scale = textView.window?.screen.scale ?? UIScreen.main.scale
- format.opaque = false
-
- let image = UIGraphicsImageRenderer(size: rect.size, format: format).image { _ in
- let drawRect = CGRect(
- origin: CGPoint(x: -rect.origin.x, y: -rect.origin.y),
- size: textView.bounds.size
- )
-
- if textView.window != nil {
- textView.drawHierarchy(in: drawRect, afterScreenUpdates: false)
- } else {
- guard let context = UIGraphicsGetCurrentContext() else {
- return
- }
-
- context.translateBy(x: -rect.origin.x, y: -rect.origin.y)
- textView.layer.render(in: context)
- }
- }
-
- guard image.size.width > 0, image.size.height > 0 else {
- return nil
- }
-
- return image
- }
-
@available(iOS 18.0, *)
private func handleAdaptiveImageGlyphInsertion(_ adaptiveGlyph: NSAdaptiveImageGlyph) -> Bool {
guard let payload = extractMediaPayload(from: adaptiveGlyph) else {
patches/expo-paste-input+0.1.15.patch.md
+22
View File
@@ -0,0 +1,22 @@
# Expo Paste Input Patch
`expo-paste-input` observes `UITextView.textDidChangeNotification` and treats any
`NSTextAttachment` in the text view's `attributedText` as a pasted image. When
it can't find a real image payload on an attachment, it falls back to
`image(forBounds:)` and, failing that, to a `drawHierarchy` screenshot of the
text view at the attachment's glyph rect.
iOS Dictation inserts its own `NSTextAttachment` (the shimmer/cursor indicator)
into the text view during dictation. Those attachments don't carry real image
data, so the fallbacks would fire — emitting a zoomed-in screenshot of the
composer as if the user had pasted an image at the end of dictation.
This patch:
- Removes the `image(forBounds:)` and `renderTextAttachment` fallbacks in
`extractMediaPayload` so the library only accepts attachments carrying a real
payload (`fileWrapper`, `contents`, or `image`).
- Only sanitizes (deletes) attachment ranges that produced a payload, and
skips the "unsupported" toast when an attachment has no payload. Unknown
system attachments like the dictation placeholder are left alone rather
than being ripped out from under iOS.
src/ageAssurance/data.tsx
+31 -4
View File
@@ -4,6 +4,7 @@ import {
type AppBskyAgeassuranceGetConfig,
type AppBskyAgeassuranceGetState,
AtpAgent,
type ChatBskyActorDeclaration,
getAgeAssuranceRegionConfig,
} from '@atproto/api'
import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
@@ -19,6 +20,7 @@ import {
hasSnoozedBirthdateUpdateForDid,
snoozeBirthdateUpdateAllowedForDid,
} from '#/state/birthdate'
import {fetchActorDeclarationRecord} from '#/state/queries/messages/actor-declaration'
import {useAgent, useSession} from '#/state/session'
import * as debug from '#/ageAssurance/debug'
import {logger} from '#/ageAssurance/logger'
@@ -53,7 +55,7 @@ const [, cacheHydrationPromise] = persistQueryClient({
persister,
})
function getDidFromAgentSession(agent: AtpAgent) {
export function getDidFromAgentSession(agent: AtpAgent) {
const sessionManager = agent.sessionManager
if (!sessionManager || !sessionManager.did) return
return sessionManager.did
@@ -329,19 +331,25 @@ export function useServerStateQuery() {
export type OtherRequiredData = {
birthdate: string | undefined
actorDeclaration?: ChatBskyActorDeclaration.Main
}
export function createOtherRequiredDataQueryKey({did}: {did: string}) {
return ['otherRequiredData', did]
}
export async function getOtherRequiredData({
async function getOtherRequiredData({
agent,
}: {
agent: AtpAgent
}): Promise<OtherRequiredData> {
if (debug.enabled) return debug.resolve(debug.otherRequiredData)
const [prefs] = await Promise.all([agent.getPreferences()])
const did = getDidFromAgentSession(agent)
const [prefs, actorDeclaration] = await Promise.all([
agent.getPreferences(),
fetchActorDeclarationRecord({did, agent}),
])
const data: OtherRequiredData = {
birthdate: prefs.birthDate ? prefs.birthDate.toISOString() : undefined,
actorDeclaration,
}
/**
@@ -359,7 +367,6 @@ export async function getOtherRequiredData({
}
}
const did = getDidFromAgentSession(agent)
if (data && did && birthdateCache.has(did)) {
/*
* If birthdate was just set, use the local cache value. On subsequent
@@ -394,6 +401,26 @@ export function getOtherRequiredDataFromCache({
createOtherRequiredDataQueryKey({did}),
)
}
export function setOtherRequiredDataActorDeclarationCache({
did,
actorDeclaration,
}: {
did: string
actorDeclaration: ChatBskyActorDeclaration.Main
}) {
const prev = getOtherRequiredDataFromCache({did})
const next: OtherRequiredData = {
birthdate: prev?.birthdate,
actorDeclaration: {
...(prev?.actorDeclaration || {}),
...actorDeclaration,
},
}
qc.setQueryData<OtherRequiredData>(
createOtherRequiredDataQueryKey({did}),
next,
)
}
export async function prefetchOtherRequiredData({agent}: {agent: AtpAgent}) {
const did = getDidFromAgentSession(agent)
src/ageAssurance/index.tsx
+9 -4
View File
@@ -1,6 +1,7 @@
import {createContext, useCallback, useContext, useEffect, useMemo} from 'react'
import {useGetAndRegisterPushToken} from '#/lib/notifications/notifications'
import {useAgent} from '#/state/session'
import {Provider as RedirectOverlayProvider} from '#/ageAssurance/components/RedirectOverlay'
import {
AgeAssuranceDataProvider,
@@ -18,6 +19,7 @@ import {
} from '#/ageAssurance/types'
import {
isUnderAge,
maybeRestrictChatSettings,
MIN_ACCESS_AGE,
useAgeAssuranceRegionConfigWithFallback,
} from '#/ageAssurance/util'
@@ -78,6 +80,7 @@ export function Provider({children}: {children: React.ReactNode}) {
}
function InnerProvider({children}: {children: React.ReactNode}) {
const agent = useAgent()
const state = useAgeAssuranceState()
const {data} = useAgeAssuranceDataContext()
const config = useAgeAssuranceRegionConfigWithFallback()
@@ -85,11 +88,13 @@ function InnerProvider({children}: {children: React.ReactNode}) {
const handleAccessUpdate = useCallback(
(s: AgeAssuranceState) => {
void getAndRegisterPushToken({
isAgeRestricted: s.access !== AgeAssuranceAccess.Full,
})
const isAgeRestricted = s.access !== AgeAssuranceAccess.Full
if (isAgeRestricted) {
void getAndRegisterPushToken({isAgeRestricted})
maybeRestrictChatSettings({agent})
}
},
[getAndRegisterPushToken],
[agent, getAndRegisterPushToken],
)
useOnAgeAssuranceAccessUpdate(handleAccessUpdate)
src/ageAssurance/state.ts
+140 -71
View File
@@ -1,8 +1,15 @@
import {useEffect, useMemo, useState} from 'react'
import {computeAgeAssuranceRegionAccess} from '@atproto/api'
import {getAge} from '#/lib/strings/time'
import {useSession} from '#/state/session'
import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
import {
type AgeAssuranceData,
getConfigFromCache,
getOtherRequiredDataFromCache,
getServerStateFromCache,
useAgeAssuranceDataContext,
} from '#/ageAssurance/data'
import {logger} from '#/ageAssurance/logger'
import {
AgeAssuranceAccess,
@@ -12,82 +19,144 @@ import {
parseStatusFromString,
} from '#/ageAssurance/types'
import {getAgeAssuranceRegionConfigWithFallback} from '#/ageAssurance/util'
import {useGeolocation} from '#/geolocation'
import {type Geolocation, useGeolocation} from '#/geolocation'
import {device} from '#/storage'
/**
* Get final evaluated age assurance state. Handles fallbacks and defers to
* server state before computing access based on AA config from the server +
* geolocation and other data.
*/
export function computeAgeAssuranceState({
hasSession,
config,
geolocation,
state,
data,
}: {
hasSession: boolean
config: AgeAssuranceData['config']
geolocation: Geolocation
state: AgeAssuranceData['state']
data: AgeAssuranceData['data']
}) {
/**
* This is where we control logged-out moderation prefs. It's all
* downstream of AA now.
*/
if (!hasSession)
return {
status: AgeAssuranceStatus.Unknown,
access: AgeAssuranceAccess.Safe,
}
/**
* This can happen if the prefetch fails (such as due to network issues).
* The query handler will try it again, but if it continues to fail, of
* course we won't have config.
*
* In this case, fail open to avoid blocking users.
*/
if (!config) {
logger.warn('useAgeAssuranceState: missing config')
return {
status: AgeAssuranceStatus.Unknown,
access: AgeAssuranceAccess.Safe,
error: 'config' as const,
}
}
const region = getAgeAssuranceRegionConfigWithFallback(config, geolocation)
const isAARequired = region.countryCode !== '*'
const isTerminalState =
state?.status === 'assured' || state?.status === 'blocked'
/*
* If we are in a terminal state and AA is required for this region,
* we can trust the server state completely and avoid recomputing.
*/
if (isTerminalState && isAARequired) {
return {
lastInitiatedAt: state.lastInitiatedAt,
status: parseStatusFromString(state.status),
access: parseAccessFromString(state.access),
}
}
/*
* Otherwise, we need to compute the access based on the latest data. For
* accounts with an accurate birthdate, our default fallback rules should
* ensure correct access.
*/
const result = computeAgeAssuranceRegionAccess(region, data)
const computed = {
lastInitiatedAt: state?.lastInitiatedAt,
// prefer server state
status: state?.status
? parseStatusFromString(state?.status)
: AgeAssuranceStatus.Unknown,
// prefer server state
access: result
? parseAccessFromString(result.access)
: AgeAssuranceAccess.Full,
}
logger.debug('debug useAgeAssuranceState', {
region,
state,
data,
computed,
})
return computed
}
/**
* This is a last-ditch helper for out-of-band reads of the AA state, such as
* during account creation. Don't use it for anything else.
*/
export function getAndComputeAgeAssuranceState({did}: {did: string}) {
const config = getConfigFromCache()
const state = getServerStateFromCache({did})
const data = getOtherRequiredDataFromCache({did})
const geolocation = device.get(['mergedGeolocation'])
if (!geolocation || !config || !state || !data) {
return {
status: AgeAssuranceStatus.Unknown,
access: AgeAssuranceAccess.Safe,
}
}
return computeAgeAssuranceState({
hasSession: true,
config,
geolocation,
state: state.state,
data: {
accountCreatedAt: state.metadata?.accountCreatedAt,
declaredAge: data?.birthdate
? getAge(new Date(data.birthdate))
: undefined,
birthdate: data?.birthdate,
},
})
}
export function useAgeAssuranceState(): AgeAssuranceState {
const {hasSession} = useSession()
const geolocation = useGeolocation()
const {config, state, data} = useAgeAssuranceDataContext()
return useMemo(() => {
/**
* This is where we control logged-out moderation prefs. It's all
* downstream of AA now.
*/
if (!hasSession)
return {
status: AgeAssuranceStatus.Unknown,
access: AgeAssuranceAccess.Safe,
}
/**
* This can happen if the prefetch fails (such as due to network issues).
* The query handler will try it again, but if it continues to fail, of
* course we won't have config.
*
* In this case, fail open to avoid blocking users.
*/
if (!config) {
logger.warn('useAgeAssuranceState: missing config')
return {
status: AgeAssuranceStatus.Unknown,
access: AgeAssuranceAccess.Safe,
error: 'config',
}
}
const region = getAgeAssuranceRegionConfigWithFallback(config, geolocation)
const isAARequired = region.countryCode !== '*'
const isTerminalState =
state?.status === 'assured' || state?.status === 'blocked'
/*
* If we are in a terminal state and AA is required for this region,
* we can trust the server state completely and avoid recomputing.
*/
if (isTerminalState && isAARequired) {
return {
lastInitiatedAt: state.lastInitiatedAt,
status: parseStatusFromString(state.status),
access: parseAccessFromString(state.access),
}
}
/*
* Otherwise, we need to compute the access based on the latest data. For
* accounts with an accurate birthdate, our default fallback rules should
* ensure correct access.
*/
const result = computeAgeAssuranceRegionAccess(region, data)
const computed = {
lastInitiatedAt: state?.lastInitiatedAt,
// prefer server state
status: state?.status
? parseStatusFromString(state?.status)
: AgeAssuranceStatus.Unknown,
// prefer server state
access: result
? parseAccessFromString(result.access)
: AgeAssuranceAccess.Full,
}
logger.debug('debug useAgeAssuranceState', {
region,
state,
data,
computed,
})
return computed
}, [hasSession, geolocation, config, state, data])
return useMemo(
() =>
computeAgeAssuranceState({
hasSession,
config,
geolocation,
state,
data,
}),
[hasSession, geolocation, config, state, data],
)
}
export function useOnAgeAssuranceAccessUpdate(
src/ageAssurance/util.ts
+20 -1
View File
@@ -2,13 +2,19 @@ import {useMemo} from 'react'
import {
ageAssuranceRuleIDs as ids,
type AppBskyAgeassuranceDefs,
type AtpAgent,
getAgeAssuranceRegionConfig,
type ModerationPrefs,
} from '@atproto/api'
import {getAge} from '#/lib/strings/time'
import {restrictChatSettings} from '#/state/queries/messages/restrictChatSettings'
import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
import {
getDidFromAgentSession,
getOtherRequiredDataFromCache,
useAgeAssuranceDataContext,
} from '#/ageAssurance/data'
import {AgeAssuranceAccess} from '#/ageAssurance/types'
import {type Geolocation, useGeolocation} from '#/geolocation'
@@ -109,3 +115,16 @@ export const makeAgeRestrictedModerationPrefs = (
adultContentEnabled: false,
labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
})
/**
* Checks our cache of the actor's chat declaration record, and if it's not
* already restricted, restricts it.
*/
export function maybeRestrictChatSettings({agent}: {agent: AtpAgent}) {
const did = getDidFromAgentSession(agent)
if (!did) return
const data = getOtherRequiredDataFromCache({did})
// ...update the chat setting record if allowIncoming is not already 'none'.
if (data?.actorDeclaration?.allowIncoming === 'none') return
restrictChatSettings({agent, did})
}
src/components/dialogs/BirthDateSettings.tsx
+17 -23
View File
@@ -1,8 +1,6 @@
import {useCallback, useMemo, useState} from 'react'
import {View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useCleanError} from '#/lib/hooks/useCleanError'
import {isAppPassword} from '#/lib/jwt'
@@ -34,7 +32,7 @@ export function BirthDateSettingsDialog({
control: Dialog.DialogControlProps
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const {isLoading, error, data: preferences} = usePreferencesQuery()
const isBirthdateUpdateAllowed = useIsBirthdateUpdateAllowed()
const {currentAccount} = useSession()
@@ -45,11 +43,11 @@ export function BirthDateSettingsDialog({
<Dialog.Handle />
{isBirthdateUpdateAllowed ? (
<Dialog.ScrollableInner
label={_(msg`My Birthdate`)}
label={l`My birthdate`}
style={web({maxWidth: 400})}>
<View style={[a.gap_md]}>
<Text style={[a.text_xl, a.font_semi_bold]}>
<Trans>My Birthdate</Trans>
<Trans>My birthdate</Trans>
</Text>
<Text
style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
@@ -64,9 +62,7 @@ export function BirthDateSettingsDialog({
<ErrorMessage
message={
error?.toString() ||
_(
msg`We were unable to load your birthdate preferences. Please try again.`,
)
l`We were unable to load your birthdate preferences. Please try again.`
}
style={[a.rounded_sm]}
/>
@@ -88,7 +84,7 @@ export function BirthDateSettingsDialog({
</Dialog.ScrollableInner>
) : (
<Dialog.ScrollableInner
label={_(msg`You recently changed your birthdate`)}
label={l`You recently changed your birthdate`}
style={web({maxWidth: 400})}>
<View style={[a.gap_sm]}>
<Text
@@ -123,15 +119,16 @@ function BirthdayInner({
control: Dialog.DialogControlProps
preferences: UsePreferencesQueryResponse
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const cleanError = useCleanError()
const [date, setDate] = useState(preferences.birthDate || getDateAgo(18))
const {isPending, error, mutateAsync: setBirthDate} = useBirthdateMutation()
const hasChanged = date !== preferences.birthDate
const errorMessage = useMemo(() => {
if (error) {
const {raw, clean} = cleanError(error)
return clean || raw || error.toString()
const e = error as Error
const {raw, clean} = cleanError(e)
return clean || raw || e.toString()
}
}, [error, cleanError])
@@ -146,7 +143,8 @@ function BirthdayInner({
await setBirthDate({birthDate: date})
}
control.close()
} catch (e: any) {
} catch (error) {
const e = error as Error
logger.error(`setBirthDate failed`, {message: e.message})
}
}, [date, setBirthDate, control, hasChanged])
@@ -158,11 +156,10 @@ function BirthdayInner({
testID="birthdayInput"
value={date}
onChangeDate={newDate => setDate(new Date(newDate))}
label={_(msg`Birthdate`)}
accessibilityHint={_(msg`Enter your birthdate`)}
label={l`Birthdate`}
accessibilityHint={l`Enter your birthdate`}
/>
</View>
{isUnder18 && hasChanged && (
<Admonition type="info">
<Trans>
@@ -171,30 +168,27 @@ function BirthdayInner({
</Trans>
</Admonition>
)}
{isUnder13 && (
<Admonition type="error">
<Trans>
You must be at least 13 years old to use Bluesky. Read our{' '}
<SimpleInlineLinkText
to="https://bsky.social/about/support/tos"
label={_(msg`Terms of Service`)}>
label={l`Terms of Service`}>
Terms of Service
</SimpleInlineLinkText>{' '}
for more information.
</Trans>
</Admonition>
)}
{errorMessage ? (
<ErrorMessage message={errorMessage} style={[a.rounded_sm]} />
) : undefined}
<View style={IS_WEB && [a.flex_row, a.justify_end]}>
<Button
label={hasChanged ? _(msg`Save birthdate`) : _(msg`Done`)}
label={hasChanged ? l`Save birthdate` : l`Done`}
size="large"
onPress={onSave}
onPress={() => void onSave()}
variant="solid"
color="primary"
disabled={isUnder13}>
src/components/images/AutoSizedImage.tsx
+17 -3
View File
@@ -13,7 +13,7 @@ import {Trans} from '@lingui/react/macro'
import {type Dimensions} from '#/lib/media/types'
import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, useTheme, web} from '#/alf'
import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
import {MediaInsetBorder} from '#/components/MediaInsetBorder'
import {Text} from '#/components/Typography'
@@ -210,12 +210,17 @@ export function AutoSizedImage({
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
foreground: true,
}}
style={[
style={({pressed}) => [
a.w_full,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
{aspectRatio: max ?? 1},
web([
a.transition_transform,
{transitionDuration: '200ms'},
pressed && {transform: [{scale: 0.99}]},
]),
]}>
{contents}
</Pressable>
@@ -237,7 +242,16 @@ export function AutoSizedImage({
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
foreground: true,
}}
style={[a.h_full]}>
style={({pressed}) => [
a.h_full,
a.rounded_md,
a.overflow_hidden,
web([
a.transition_transform,
{transitionDuration: '200ms'},
pressed && {transform: [{scale: 0.99}]},
]),
]}>
{contents}
</Pressable>
</ConstrainedImage>
src/components/images/Gallery/index.tsx
+11 -6
View File
@@ -430,15 +430,20 @@ function GalleryImage({
color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
foreground: true,
}}
style={[
style={({pressed}) => [
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
web({
cursor: 'inherit',
outline: 0,
border: 0,
}),
web([
{
cursor: 'inherit',
outline: 0,
border: 0,
},
a.transition_transform,
{transitionDuration: '200ms'},
pressed && {transform: [{scale: 0.99}]},
]),
]}>
<Image
source={{uri: image.thumb}}
src/lib/ThemeContext.tsx
-2
View File
@@ -21,8 +21,6 @@ export type PaletteColor = {
textInverted: string
link: string
border: string
borderDark: string
icon: string
[k: string]: string
}
export type Palette = Record<PaletteColorName, PaletteColor>
src/lib/hooks/usePalette.ts
-8
View File
@@ -13,12 +13,10 @@ export interface UsePaletteValue {
viewLight: ViewStyle
btn: ViewStyle
border: ViewStyle
borderDark: ViewStyle
text: TextStyle
textLight: TextStyle
textInverted: TextStyle
link: TextStyle
icon: TextStyle
}
/**
@@ -42,9 +40,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
border: {
borderColor: palette.border,
},
borderDark: {
borderColor: palette.borderDark,
},
text: {
color: palette.text,
},
@@ -57,9 +52,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
link: {
color: palette.link,
},
icon: {
color: palette.icon,
},
}
}, [theme, color])
}
src/lib/styles.ts
-2
View File
@@ -54,8 +54,6 @@ export const colors = {
green3: '#20bc07',
green4: '#148203',
green5: '#082b03',
unreadNotifBg: '#ebf6ff',
}
/**
src/lib/themes.ts
-49
View File
@@ -17,19 +17,6 @@ export const defaultTheme: Theme = {
textInverted: lightPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
// non-standard
textVeryLight: lightPalette.contrast_400,
replyLine: lightPalette.contrast_100,
replyLineDot: lightPalette.contrast_200,
unreadNotifBg: lightPalette.primary_25,
unreadNotifBorder: lightPalette.primary_100,
postCtrl: lightPalette.contrast_500,
brandText: lightPalette.primary_500,
emptyStateIcon: lightPalette.contrast_300,
borderLinkHover: lightPalette.contrast_300,
},
primary: {
background: colors.blue3,
@@ -39,8 +26,6 @@ export const defaultTheme: Theme = {
textInverted: colors.blue3,
link: colors.blue0,
border: colors.blue4,
borderDark: colors.blue5,
icon: colors.blue4,
},
secondary: {
background: colors.green3,
@@ -50,8 +35,6 @@ export const defaultTheme: Theme = {
textInverted: colors.green4,
link: colors.green1,
border: colors.green4,
borderDark: colors.green5,
icon: colors.green4,
},
inverted: {
background: darkPalette.black,
@@ -61,8 +44,6 @@ export const defaultTheme: Theme = {
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
},
error: {
background: colors.red3,
@@ -72,8 +53,6 @@ export const defaultTheme: Theme = {
textInverted: colors.red3,
link: colors.red1,
border: colors.red4,
borderDark: colors.red5,
icon: colors.red4,
},
},
shapes: {
@@ -303,19 +282,6 @@ export const darkTheme: Theme = {
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
// non-standard
textVeryLight: darkPalette.contrast_400,
replyLine: darkPalette.contrast_200,
replyLineDot: darkPalette.contrast_200,
unreadNotifBg: darkPalette.primary_25,
unreadNotifBorder: darkPalette.primary_100,
postCtrl: darkPalette.contrast_500,
brandText: darkPalette.primary_500,
emptyStateIcon: darkPalette.contrast_300,
borderLinkHover: darkPalette.contrast_300,
},
primary: {
...defaultTheme.palette.primary,
@@ -333,8 +299,6 @@ export const darkTheme: Theme = {
textInverted: darkPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
},
},
}
@@ -352,19 +316,6 @@ export const dimTheme: Theme = {
textInverted: dimPalette.black,
link: dimPalette.primary_500,
border: dimPalette.contrast_100,
borderDark: dimPalette.contrast_200,
icon: dimPalette.contrast_500,
// non-standard
textVeryLight: dimPalette.contrast_400,
replyLine: dimPalette.contrast_200,
replyLineDot: dimPalette.contrast_200,
unreadNotifBg: dimPalette.primary_25,
unreadNotifBorder: dimPalette.primary_100,
postCtrl: dimPalette.contrast_500,
brandText: dimPalette.primary_500,
emptyStateIcon: dimPalette.contrast_300,
borderLinkHover: dimPalette.contrast_300,
},
},
}
src/locale/locales/en/messages.po
+203 -184
View File
File diff suppressed because it is too large Load Diff
src/screens/Messages/ChatList.tsx
+13 -9
View File
@@ -38,6 +38,7 @@ import * as Layout from '#/components/Layout'
import {Link} from '#/components/Link'
import {ListFooter} from '#/components/Lists'
import {Text} from '#/components/Typography'
import {useAgeAssurance} from '#/ageAssurance'
import {IS_NATIVE} from '#/env'
import {ChatListItem} from './components/ChatListItem'
import {InboxPreview} from './components/InboxPreview'
@@ -71,21 +72,24 @@ type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
export function MessagesScreen(props: Props) {
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
const aa = useAgeAssurance()
return (
<AgeRestrictedScreen
screenTitle={_(msg`Chats`)}
infoText={aaCopy.chatsInfoText}
rightHeaderSlot={
<Link
to="/messages/settings"
label={_(msg`Chat settings`)}
size="small"
color="secondary">
<ButtonText>
<Trans>Chat settings</Trans>
</ButtonText>
</Link>
aa.flags.chatDisabled ? null : (
<Link
to="/messages/settings"
label={_(msg`Chat settings`)}
size="small"
color="secondary">
<ButtonText>
<Trans>Chat settings</Trans>
</ButtonText>
</Link>
)
}>
<MessagesScreenInner {...props} />
</AgeRestrictedScreen>
src/screens/Messages/Settings.tsx
+12 -1
View File
@@ -11,6 +11,8 @@ import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {atoms as a} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
import * as Layout from '#/components/Layout'
@@ -24,7 +26,16 @@ type AllowIncoming = 'all' | 'none' | 'following'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'MessagesSettings'>
export function MessagesSettingsScreen(props: Props) {
return <MessagesSettingsScreenInner {...props} />
const {_} = useLingui()
const aaCopy = useAgeAssuranceCopy()
return (
<AgeRestrictedScreen
screenTitle={_(msg`Chat settings`)}
infoText={aaCopy.chatsInfoText}>
<MessagesSettingsScreenInner {...props} />
</AgeRestrictedScreen>
)
}
export function MessagesSettingsScreenInner({}: Props) {
src/state/birthdate.ts
+6
View File
@@ -4,6 +4,7 @@ import {useMutation, useQueryClient} from '@tanstack/react-query'
import {preferencesQueryKey} from '#/state/queries/preferences'
import {useAgent, useSession} from '#/state/session'
import {usePatchAgeAssuranceOtherRequiredData} from '#/ageAssurance'
import {isUnderAge, maybeRestrictChatSettings} from '#/ageAssurance/util'
import {IS_DEV} from '#/env'
import {account} from '#/storage'
@@ -63,6 +64,11 @@ export function useBirthdateMutation() {
await queryClient.invalidateQueries({
queryKey: preferencesQueryKey,
})
if (isUnderAge(birthDate.toISOString(), 18)) {
maybeRestrictChatSettings({agent})
}
/**
* Also patch the age assurance other required data with the new
* birthdate, which may change the user's age assurance access level.
src/state/queries/messages/actor-declaration.ts
+23 -1
View File
@@ -1,4 +1,8 @@
import {type AppBskyActorDefs} from '@atproto/api'
import type AtpAgent from '@atproto/api'
import {
type AppBskyActorDefs,
type ChatBskyActorDeclaration,
} from '@atproto/api'
import {useMutation, useQueryClient} from '@tanstack/react-query'
import {logger} from '#/logger'
@@ -78,3 +82,21 @@ export function useDeleteActorDeclaration() {
},
})
}
export async function fetchActorDeclarationRecord({
agent,
did,
}: {
agent: AtpAgent
did?: string
}) {
if (!did) return
const res = await agent.com.atproto.repo
.getRecord({
repo: did,
collection: 'chat.bsky.actor.declaration',
rkey: 'self',
})
.catch(_e => undefined)
return res?.data.value as ChatBskyActorDeclaration.Main
}
src/state/queries/messages/restrictChatSettings.ts
+39
View File
@@ -0,0 +1,39 @@
import type AtpAgent from '@atproto/api'
import {type ChatBskyActorDeclaration} from '@atproto/api'
import {networkRetry} from '#/lib/async/retry'
import {logger} from '#/logger'
import {setOtherRequiredDataActorDeclarationCache} from '#/ageAssurance/data'
/**
* Helper to update the chat settings record.
*/
export async function restrictChatSettings({
agent,
did,
}: {
agent: AtpAgent
did: string
}): Promise<void> {
try {
const record: ChatBskyActorDeclaration.Main = {
$type: 'chat.bsky.actor.declaration',
allowIncoming: 'none',
}
await networkRetry(3, () =>
agent.com.atproto.repo.putRecord({
repo: did,
collection: 'chat.bsky.actor.declaration',
rkey: 'self',
record,
}),
)
// important, update local cache to avoid running this again
setOtherRequiredDataActorDeclarationCache({
did,
actorDeclaration: record,
})
} catch {
logger.error(`restrictChatSettings: failed to set chat declaration`)
}
}
src/state/session/__tests__/session-test.ts
+3
View File
@@ -12,6 +12,9 @@ jest.mock('jwt-decode', () => ({
jest.mock('../../birthdate')
jest.mock('../../../ageAssurance/data')
jest.mock('../../../ageAssurance/state', () => ({
getAndComputeAgeAssuranceState: () => ({}),
}))
jest.mock('#/lib/notifications/notifications', () => ({
unregisterPushToken(_agents: BskyAgent[]) {
return Promise.resolve()
src/state/session/agent.ts
+10 -21
View File
@@ -22,15 +22,17 @@ import {
PUBLIC_BSKY_SERVICE,
TIMELINE_SAVED_FEED,
} from '#/lib/constants'
import {getAge} from '#/lib/strings/time'
import {logger} from '#/logger'
import {snoozeBirthdateUpdateAllowedForDid} from '#/state/birthdate'
import {restrictChatSettings} from '#/state/queries/messages/restrictChatSettings'
import {snoozeEmailConfirmationPrompt} from '#/state/shell/reminders'
import {
prefetchAgeAssuranceData,
setBirthdateForDid,
setCreatedAtForDid,
} from '#/ageAssurance/data'
import {getAndComputeAgeAssuranceState} from '#/ageAssurance/state'
import {AgeAssuranceAccess} from '#/ageAssurance/types'
import {features} from '#/analytics'
import {emitNetworkConfirmed, emitNetworkLost} from '../events'
import {addSessionErrorLog} from './logging'
@@ -218,26 +220,13 @@ export async function createAgentAndCreateAccount(
logger.info(`createAgentAndCreateAccount: failed to set initial feeds`)
throw e
}),
...(getAge(birthDate) < 18
? [
networkRetry(3, () => {
return agent.com.atproto.repo.putRecord({
repo: account.did,
collection: 'chat.bsky.actor.declaration',
rkey: 'self',
record: {
$type: 'chat.bsky.actor.declaration',
allowIncoming: 'none',
},
})
}).catch(e => {
logger.info(
`createAgentAndCreateAccount: failed to set chat declaration`,
)
throw e
}),
]
: []),
// wait for AA data to load first, then check state
aa.then(async () => {
const state = getAndComputeAgeAssuranceState({did: account.did})
if (state.access !== AgeAssuranceAccess.Full) {
restrictChatSettings({agent, did: account.did})
}
}),
]).then(promises => {
const rejected = promises.filter(p => p.status === 'rejected')
if (rejected.length > 0) {
src/view/com/composer/Composer.tsx
+75 -16
View File
@@ -207,6 +207,8 @@ export const ComposePost = ({
const setLangPrefs = useLanguagePrefsApi()
const textInputRef = useRef<TextInputRef>(null)
const discardPromptControl = Prompt.usePromptControl()
const emptyPostsPromptControl = Prompt.usePromptControl()
const skipEmptyConfirmedRef = useRef(false)
const {mutateAsync: saveDraft, isPending: _isSavingDraft} =
useSaveDraftMutation()
const {mutate: cleanupPublishedDraft} = useCleanupPublishedDraftMutation()
@@ -783,16 +785,47 @@ export const ComposePost = ({
const canPost =
!missingAltError &&
thread.posts.some(post => !isEmptyPost(post)) &&
thread.posts.every(
post =>
post.shortenedGraphemeLength <= MAX_GRAPHEME_LENGTH &&
!isEmptyPost(post) &&
!(
post.embed.media?.type === 'video' &&
post.embed.media.video.status === 'error'
),
isEmptyPost(post) ||
(post.shortenedGraphemeLength <= MAX_GRAPHEME_LENGTH &&
!(
post.embed.media?.type === 'video' &&
post.embed.media.video.status === 'error'
)),
)
const getFilteredThread = (): {
type: 'none' | 'trailing-only' | 'non-trailing'
filteredThread: ThreadDraft
} => {
const nonEmptyPosts = thread.posts.filter(post => !isEmptyPost(post))
if (nonEmptyPosts.length === thread.posts.length) {
return {type: 'none', filteredThread: thread}
}
let lastNonEmptyIndex = -1
for (let i = thread.posts.length - 1; i >= 0; i--) {
if (!isEmptyPost(thread.posts[i])) {
lastNonEmptyIndex = i
break
}
}
const hasNonTrailingEmpty = thread.posts.some(
(post, i) => i < lastNonEmptyIndex && isEmptyPost(post),
)
const filteredThread: ThreadDraft = {...thread, posts: nonEmptyPosts}
return {
type: hasNonTrailingEmpty ? 'non-trailing' : 'trailing-only',
filteredThread,
}
}
const onPressPublish = useCallback(async () => {
if (isPublishing) {
return
@@ -802,8 +835,15 @@ export const ComposePost = ({
return
}
const {type: emptyType, filteredThread} = getFilteredThread()
if (emptyType === 'non-trailing' && !skipEmptyConfirmedRef.current) {
emptyPostsPromptControl.open()
return
}
if (
thread.posts.some(
filteredThread.posts.some(
post =>
post.embed.media?.type === 'video' &&
post.embed.media.video.asset &&
@@ -814,6 +854,7 @@ export const ComposePost = ({
return
}
skipEmptyConfirmedRef.current = false
setError('')
setIsPublishing(true)
@@ -826,7 +867,7 @@ export const ComposePost = ({
agent,
queryClient,
{
thread,
thread: filteredThread,
replyTo: replyTo?.uri,
onStateChange: setPublishingStage,
langs: currentLanguages,
@@ -857,10 +898,10 @@ export const ComposePost = ({
const res = await agent.app.bsky.unspecced.getPostThreadV2({
anchor: postUri!,
above: false,
below: thread.posts.length - 1,
below: filteredThread.posts.length - 1,
branchingFactor: 1,
})
if (res.data.thread.length !== thread.posts.length) {
if (res.data.thread.length !== filteredThread.posts.length) {
throw new Error(`composer: app view is not ready`)
}
if (
@@ -887,7 +928,9 @@ export const ComposePost = ({
} catch (e: any) {
logger.error(e, {
message: `Composer: create post failed`,
hasImages: thread.posts.some(p => p.embed.media?.type === 'images'),
hasImages: filteredThread.posts.some(
p => p.embed.media?.type === 'images',
),
})
let err = cleanError(e.message)
@@ -902,14 +945,14 @@ export const ComposePost = ({
} finally {
if (postUri) {
let index = 0
for (let post of thread.posts) {
for (let post of filteredThread.posts) {
ax.metric('post:create', {
imageCount:
post.embed.media?.type === 'images'
? post.embed.media.images.length
: 0,
isReply: index > 0 || !!replyTo,
isPartOfThread: thread.posts.length > 1,
isPartOfThread: filteredThread.posts.length > 1,
hasLink: !!post.embed.link,
hasQuote: !!post.embed.quote,
langs: fromPostLanguages(currentLanguages),
@@ -918,9 +961,9 @@ export const ComposePost = ({
index++
}
}
if (thread.posts.length > 1) {
if (filteredThread.posts.length > 1) {
ax.metric('thread:create', {
postCount: thread.posts.length,
postCount: filteredThread.posts.length,
isReply: !!replyTo,
})
}
@@ -973,7 +1016,7 @@ export const ComposePost = ({
<Toast.Outer>
<Toast.Icon />
<Toast.Text>
{thread.posts.length > 1
{filteredThread.posts.length > 1
? l`Your posts were sent`
: replyTo
? l`Your reply was sent`
@@ -1016,8 +1059,14 @@ export const ComposePost = ({
composerState.isDirty,
cleanupPublishedDraft,
loadedDraftCreatedAt,
emptyPostsPromptControl,
])
const handleConfirmSkipEmpty = () => {
skipEmptyConfirmedRef.current = true
void onPressPublish()
}
// Preserves the referential identity passed to each post item.
// Avoids re-rendering all posts on each keystroke.
const onComposerPostPublish = useNonReactiveCallback(() => {
@@ -1029,6 +1078,7 @@ export const ComposePost = ({
let erroredVideos = 0
let uploadingVideos = 0
for (let post of thread.posts) {
if (isEmptyPost(post)) continue
if (post.embed.media?.type === 'video') {
const video = post.embed.media.video
if (video.status === 'error') {
@@ -1268,6 +1318,15 @@ export const ComposePost = ({
</Prompt.Actions>
</Prompt.Outer>
)}
<Prompt.Basic
control={emptyPostsPromptControl}
title={l`Skip empty posts?`}
description={l`Your thread has empty posts that will be skipped. The remaining posts will be published as a thread.`}
confirmButtonCta={l`Post anyway`}
cancelButtonCta={l`Keep editing`}
onConfirm={handleConfirmSkipEmpty}
/>
</KeyboardAvoidingView>
</BottomSheetPortalProvider>
)
src/view/com/notifications/NotificationFeedItem.tsx
+6 -8
View File
@@ -26,7 +26,6 @@ import {useQueryClient} from '@tanstack/react-query'
import {DM_SERVICE_HEADERS, MAX_POST_LINES} from '#/lib/constants'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {type NavigationProp} from '#/lib/routes/types'
import {forceLTR} from '#/lib/strings/bidi'
@@ -92,10 +91,9 @@ let NotificationFeedItem = ({
hideTopBorder?: boolean
}): React.ReactNode => {
const queryClient = useQueryClient()
const pal = usePalette('default')
const t = useTheme()
const {_, i18n} = useLingui()
const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false)
const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false)
const itemHref = useMemo(() => {
switch (item.type) {
case 'post-like':
@@ -145,7 +143,7 @@ let NotificationFeedItem = ({
e.preventDefault()
e.stopPropagation()
}
setAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
}
const onBeforePress = useCallback(() => {
@@ -222,8 +220,8 @@ let NotificationFeedItem = ({
post={item.subject}
style={
isHighlighted && {
backgroundColor: pal.colors.unreadNotifBg,
borderColor: pal.colors.unreadNotifBorder,
backgroundColor: t.palette.primary_25,
borderColor: t.palette.primary_100,
}
}
hideTopBorder={hideTopBorder}
@@ -577,8 +575,8 @@ let NotificationFeedItem = ({
item.notification.isRead
? undefined
: {
backgroundColor: pal.colors.unreadNotifBg,
borderColor: pal.colors.unreadNotifBorder,
backgroundColor: t.palette.primary_25,
borderColor: t.palette.primary_100,
},
!hideTopBorder && a.border_t,
a.overflow_hidden,
src/view/com/post/Post.tsx
+18 -8
View File
@@ -12,10 +12,8 @@ import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {colors} from '#/lib/styles'
import {
POST_TOMBSTONE,
type Shadow,
@@ -26,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -119,7 +117,7 @@ function PostInner({
onBeforePress?: () => void
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
const t = useTheme()
const {openComposer} = useOpenComposer()
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
@@ -164,8 +162,8 @@ function PostInner({
href={itemHref}
style={[
styles.outer,
pal.border,
!hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
t.atoms.border_contrast_low,
!hideTopBorder && a.border_t,
style,
]}
onBeforePress={onBeforePress}
@@ -176,7 +174,20 @@ function PostInner({
setHover(false)
}}>
<SubtleHover hover={hover} />
{showReplyLine && <View style={styles.replyLine} />}
{showReplyLine && (
<View
style={[
styles.replyLine,
{
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
},
]}
/>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
@@ -290,7 +301,6 @@ const styles = StyleSheet.create({
top: 70,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
contentHider: {
marginBottom: 2,
src/view/com/posts/PostFeedItem.tsx
+13 -5
View File
@@ -33,7 +33,7 @@ import {
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -167,6 +167,7 @@ let FeedItemInner = ({
const queryClient = useQueryClient()
const {openComposer} = useOpenComposer()
const pal = usePalette('default')
const t = useTheme()
const {currentAccount} = useSession()
const [hover, setHover] = useState(false)
@@ -346,8 +347,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginBottom: 4,
},
]}
@@ -381,8 +385,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginTop: live ? 8 : 4,
},
]}
@@ -536,6 +543,7 @@ const styles = StyleSheet.create({
cursor: 'pointer',
},
replyLine: {
flexGrow: 1,
width: 2,
marginLeft: 'auto',
marginRight: 'auto',
src/view/com/posts/ViewFullThread.tsx
+51 -56
View File
@@ -1,75 +1,70 @@
import {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import {View} from 'react-native'
import Svg, {Circle, Line} from 'react-native-svg'
import {AtUri} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {atoms as a, select, useTheme} from '#/alf'
import {Link} from '#/components/Link'
import {SubtleHover} from '#/components/SubtleHover'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {Text} from '#/components/Typography'
export function ViewFullThread({uri}: {uri: string}) {
const {
state: hover,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
const pal = usePalette('default')
const t = useTheme()
const itemHref = useMemo(() => {
const urip = new AtUri(uri)
return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
}, [uri])
const {_} = useLingui()
const {t: l} = useLingui()
return (
<Link
style={[styles.viewFullThread]}
href={itemHref}
asAnchor
noFeedback
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}>
<SubtleHover
hover={hover}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<View style={styles.viewFullThreadDots}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={pal.colors.replyLine}
strokeWidth="2"
style={[
a.flex_row,
{
gap: 10,
paddingLeft: 18,
},
]}
to={itemHref}
label={l`View full thread`}>
{({hovered}) => (
<>
<SubtleHover
hover={hovered}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
</Svg>
</View>
<Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{_(msg`View full thread`)}
</Text>
<View style={[a.align_center, {width: 42}]}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
})}
strokeWidth="2"
/>
<Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
</Svg>
</View>
<Text
style={[
a.text_md,
{color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{l`View full thread`}
</Text>
</>
)}
</Link>
)
}
const styles = StyleSheet.create({
viewFullThread: {
flexDirection: 'row',
gap: 10,
paddingLeft: 18,
},
viewFullThreadDots: {
width: 42,
alignItems: 'center',
},
})