+
diff --git a/eslint/index.js b/eslint/index.js
index cf5d41225d..6f75f1bc34 100644
--- a/eslint/index.js
+++ b/eslint/index.js
@@ -5,5 +5,6 @@ module.exports = {
'avoid-unwrapped-text': require('./avoid-unwrapped-text'),
'use-exact-imports': require('./use-exact-imports'),
'use-typed-gates': require('./use-typed-gates'),
+ 'use-prefixed-imports': require('./use-prefixed-imports'),
},
}
diff --git a/eslint/use-exact-imports.js b/eslint/use-exact-imports.js
index 06723043fe..26e688563e 100644
--- a/eslint/use-exact-imports.js
+++ b/eslint/use-exact-imports.js
@@ -1,4 +1,3 @@
-/* eslint-disable bsky-internal/use-exact-imports */
const BANNED_IMPORTS = [
'@fortawesome/free-regular-svg-icons',
'@fortawesome/free-solid-svg-icons',
@@ -6,11 +5,12 @@ const BANNED_IMPORTS = [
exports.create = function create(context) {
return {
- Literal(node) {
- if (typeof node.value !== 'string') {
+ ImportDeclaration(node) {
+ const source = node.source
+ if (typeof source.value !== 'string') {
return
}
- if (BANNED_IMPORTS.includes(node.value)) {
+ if (BANNED_IMPORTS.includes(source.value)) {
context.report({
node,
message:
diff --git a/eslint/use-prefixed-imports.js b/eslint/use-prefixed-imports.js
new file mode 100644
index 0000000000..141d536484
--- /dev/null
+++ b/eslint/use-prefixed-imports.js
@@ -0,0 +1,39 @@
+const BANNED_IMPORT_PREFIXES = [
+ 'alf/',
+ 'components/',
+ 'lib/',
+ 'locale/',
+ 'logger/',
+ 'platform/',
+ 'state/',
+ 'storage/',
+ 'view/',
+]
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ fixable: 'code',
+ },
+ create(context) {
+ return {
+ ImportDeclaration(node) {
+ const source = node.source
+ if (typeof source.value !== 'string') {
+ return
+ }
+ if (
+ BANNED_IMPORT_PREFIXES.some(banned => source.value.startsWith(banned))
+ ) {
+ context.report({
+ node: source,
+ message: `Use '#/${source.value}'`,
+ fix(fixer) {
+ return fixer.replaceText(source, `'#/${source.value}'`)
+ },
+ })
+ }
+ },
+ }
+ },
+}
diff --git a/jest/jestSetup.js b/jest/jestSetup.js
index a68c1dc4bf..50a33589ea 100644
--- a/jest/jestSetup.js
+++ b/jest/jestSetup.js
@@ -42,8 +42,16 @@ jest.mock('rn-fetch-blob', () => ({
fetch: jest.fn(),
}))
-jest.mock('@bam.tech/react-native-image-resizer', () => ({
- createResizedImage: jest.fn(),
+jest.mock('expo-file-system', () => ({
+ getInfoAsync: jest.fn().mockResolvedValue({exists: true, size: 100}),
+ deleteAsync: jest.fn(),
+}))
+
+jest.mock('expo-image-manipulator', () => ({
+ manipulateAsync: jest.fn().mockResolvedValue({
+ uri: 'file://resized-image',
+ }),
+ SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
}))
jest.mock('@segment/analytics-react-native', () => ({
diff --git a/modules/BlueskyNSE/NotificationService.swift b/modules/BlueskyNSE/NotificationService.swift
index f863eaf223..481402890f 100644
--- a/modules/BlueskyNSE/NotificationService.swift
+++ b/modules/BlueskyNSE/NotificationService.swift
@@ -2,46 +2,80 @@ import UserNotifications
import UIKit
let APP_GROUP = "group.app.bsky"
+typealias ContentHandler = (UNNotificationContent) -> Void
+
+// This extension allows us to do some processing of the received notification
+// data before displaying the notification to the user. In our use case, there
+// are a few particular things that we want to do:
+//
+// - Determine whether we should play a sound for the notification
+// - Download and display any images for the notification
+// - Update the badge count accordingly
+//
+// The extension may or may not create a new process to handle a notification.
+// It is also possible that multiple notifications will be processed by the
+// same instance of `NotificationService`, though these will happen in
+// parallel.
+//
+// Because multiple instances of `NotificationService` may exist, we should
+// be careful in accessing preferences that will be mutated _by the
+// extension itself_. For example, we should not worry about `playChatSound`
+// changing, since we never mutate that value within the extension itself.
+// However, since we mutate `badgeCount` frequently, we should ensure that
+// these updates always run sync with each other and that the have access
+// to the most recent values.
class NotificationService: UNNotificationServiceExtension {
- var prefs = UserDefaults(suiteName: APP_GROUP)
+ private var contentHandler: ContentHandler?
+ private var bestAttempt: UNMutableNotificationContent?
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
- guard let bestAttempt = createCopy(request.content),
+ self.contentHandler = contentHandler
+
+ guard let bestAttempt = NSEUtil.createCopy(request.content),
let reason = request.content.userInfo["reason"] as? String
else {
contentHandler(request.content)
return
}
+ self.bestAttempt = bestAttempt
if reason == "chat-message" {
mutateWithChatMessage(bestAttempt)
} else {
mutateWithBadge(bestAttempt)
}
+ // Any image downloading (or other network tasks) should be handled at the end
+ // of this block. Otherwise, if there is a timeout and serviceExtensionTimeWillExpire
+ // gets called, we might not have all the needed mutations completed in time.
+
contentHandler(bestAttempt)
}
override func serviceExtensionTimeWillExpire() {
- // If for some reason the alloted time expires, we don't actually want to display a notification
+ guard let contentHandler = self.contentHandler,
+ let bestAttempt = self.bestAttempt else {
+ return
+ }
+ contentHandler(bestAttempt)
}
- func createCopy(_ content: UNNotificationContent) -> UNMutableNotificationContent? {
- return content.mutableCopy() as? UNMutableNotificationContent
- }
+ // MARK: Mutations
func mutateWithBadge(_ content: UNMutableNotificationContent) {
- var count = prefs?.integer(forKey: "badgeCount") ?? 0
- count += 1
+ NSEUtil.shared.prefsQueue.sync {
+ var count = NSEUtil.shared.prefs?.integer(forKey: "badgeCount") ?? 0
+ count += 1
- // Set the new badge number for the notification, then store that value for using later
- content.badge = NSNumber(value: count)
- prefs?.setValue(count, forKey: "badgeCount")
+ // Set the new badge number for the notification, then store that value for using later
+ content.badge = NSNumber(value: count)
+ NSEUtil.shared.prefs?.setValue(count, forKey: "badgeCount")
+ }
}
func mutateWithChatMessage(_ content: UNMutableNotificationContent) {
- if self.prefs?.bool(forKey: "playSoundChat") == true {
+ if NSEUtil.shared.prefs?.bool(forKey: "playSoundChat") == true {
mutateWithDmSound(content)
}
}
@@ -54,3 +88,18 @@ class NotificationService: UNNotificationServiceExtension {
content.sound = UNNotificationSound(named: UNNotificationSoundName(rawValue: "dm.aiff"))
}
}
+
+// NSEUtil's purpose is to create a shared instance of `UserDefaults` across
+// `NotificationService` instances. It also includes a queue so that we can process
+// updates to `UserDefaults` in parallel.
+
+private class NSEUtil {
+ static let shared = NSEUtil()
+
+ var prefs = UserDefaults(suiteName: APP_GROUP)
+ var prefsQueue = DispatchQueue(label: "NSEPrefsQueue")
+
+ static func createCopy(_ content: UNNotificationContent) -> UNMutableNotificationContent? {
+ return content.mutableCopy() as? UNMutableNotificationContent
+ }
+}
diff --git a/modules/Share-with-Bluesky/Info.plist b/modules/Share-with-Bluesky/Info.plist
index 421abb3c41..43f46a5e56 100644
--- a/modules/Share-with-Bluesky/Info.plist
+++ b/modules/Share-with-Bluesky/Info.plist
@@ -16,6 +16,8 @@
1
NSExtensionActivationSupportsImageWithMaxCount
10
+
NSExtensionActivationSupportsMovieWithMaxCount
+
1
NSExtensionPointIdentifier
@@ -38,4 +40,4 @@
CFBundleShortVersionString
$(MARKETING_VERSION)
-
\ No newline at end of file
+
diff --git a/modules/Share-with-Bluesky/ShareViewController.swift b/modules/Share-with-Bluesky/ShareViewController.swift
index c045d578fe..63143277a5 100644
--- a/modules/Share-with-Bluesky/ShareViewController.swift
+++ b/modules/Share-with-Bluesky/ShareViewController.swift
@@ -5,7 +5,6 @@ class ShareViewController: UIViewController {
// scheme.
let appScheme = Bundle.main.object(forInfoDictionaryKey: "MainAppScheme") as? String ?? "bluesky"
- //
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
@@ -24,6 +23,8 @@ class ShareViewController: UIViewController {
await self.handleUrl(item: firstAttachment)
} else if firstAttachment.hasItemConformingToTypeIdentifier("public.image") {
await self.handleImages(items: attachments)
+ } else if firstAttachment.hasItemConformingToTypeIdentifier("public.video") {
+ await self.handleVideos(items: attachments)
} else {
self.completeRequest()
}
@@ -31,31 +32,23 @@ class ShareViewController: UIViewController {
}
private func handleText(item: NSItemProvider) async {
- do {
- if let data = try await item.loadItem(forTypeIdentifier: "public.text") as? String {
- if let encoded = data.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
- let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
- _ = self.openURL(url)
- }
+ if let data = try? await item.loadItem(forTypeIdentifier: "public.text") as? String {
+ if let encoded = data.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+ let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
+ _ = self.openURL(url)
}
- self.completeRequest()
- } catch {
- self.completeRequest()
}
+ self.completeRequest()
}
private func handleUrl(item: NSItemProvider) async {
- do {
- if let data = try await item.loadItem(forTypeIdentifier: "public.url") as? URL {
- if let encoded = data.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
- let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
- _ = self.openURL(url)
- }
+ if let data = try? await item.loadItem(forTypeIdentifier: "public.url") as? URL {
+ if let encoded = data.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+ let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
+ _ = self.openURL(url)
}
- self.completeRequest()
- } catch {
- self.completeRequest()
}
+ self.completeRequest()
}
private func handleImages(items: [NSItemProvider]) async {
@@ -105,6 +98,25 @@ class ShareViewController: UIViewController {
self.completeRequest()
}
+ private func handleVideos(items: [NSItemProvider]) async {
+ let firstItem = items.first
+
+ if let dataUri = try? await firstItem?.loadItem(forTypeIdentifier: "public.video") as? URL {
+ let ext = String(dataUri.lastPathComponent.split(separator: ".").last ?? "mp4")
+ if let tempUrl = getTempUrl(ext: ext) {
+ let data = try? Data(contentsOf: dataUri)
+ try? data?.write(to: tempUrl)
+
+ if let encoded = dataUri.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+ let url = URL(string: "\(self.appScheme)://intent/compose?videoUri=\(encoded)") {
+ _ = self.openURL(url)
+ }
+ }
+ }
+
+ self.completeRequest()
+ }
+
private func saveImageWithInfo(_ image: UIImage?) -> String? {
guard let image = image else {
return nil
@@ -114,27 +126,26 @@ class ShareViewController: UIViewController {
// Saving this file to the bundle group's directory lets us access it from
// inside of the app. Otherwise, we wouldn't have access even though the
// extension does.
- if let dir = FileManager()
- .containerURL(
- forSecurityApplicationGroupIdentifier: "group.app.bsky") {
- let filePath = "\(dir.absoluteString)\(ProcessInfo.processInfo.globallyUniqueString).jpeg"
-
- if let newUri = URL(string: filePath),
- let jpegData = image.jpegData(compressionQuality: 1) {
- try jpegData.write(to: newUri)
- return "\(newUri.absoluteString)|\(image.size.width)|\(image.size.height)"
- }
+ if let tempUrl = getTempUrl(ext: "jpeg"),
+ let jpegData = image.jpegData(compressionQuality: 1) {
+ try jpegData.write(to: tempUrl)
+ return "\(tempUrl.absoluteString)|\(image.size.width)|\(image.size.height)"
}
- return nil
- } catch {
- return nil
- }
+ } catch {}
+ return nil
}
private func completeRequest() {
self.extensionContext?.completeRequest(returningItems: nil)
}
+ private func getTempUrl(ext: String) -> URL? {
+ if let dir = FileManager().containerURL(forSecurityApplicationGroupIdentifier: "group.app.bsky") {
+ return URL(string: "\(dir.absoluteString)\(ProcessInfo.processInfo.globallyUniqueString).\(ext)")!
+ }
+ return nil
+ }
+
@objc func openURL(_ url: URL) -> Bool {
var responder: UIResponder? = self
while responder != nil {
diff --git a/package.json b/package.json
index ba7882902c..4b3486545e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"web": "expo start --web",
"use-build-number": "./scripts/useBuildNumberEnv.sh",
"use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
- "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
+ "build-web": "expo export:web && node ./scripts/post-web-build.js",
"build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
"build-ios": "yarn use-build-number-with-bump eas build -p ios",
"build-android": "yarn use-build-number-with-bump eas build -p android",
@@ -49,11 +49,11 @@
"export": "npx expo export",
"make-deploy-bundle": "bash scripts/bundleUpdate.sh",
"generate-webpack-stats-file": "EXPO_PUBLIC_GENERATE_STATS=1 yarn build-web",
- "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
+ "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web",
+ "icons:optimize": "svgo -f ./assets/icons"
},
"dependencies": {
"@atproto/api": "^0.13.7",
- "@bam.tech/react-native-image-resizer": "^3.0.4",
"@braintree/sanitize-url": "^6.0.2",
"@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
"@emoji-mart/react": "^1.1.1",
@@ -110,11 +110,13 @@
"await-lock": "^2.2.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"base64-js": "^1.5.1",
+ "bcp-47": "^2.1.0",
"bcp-47-match": "^2.0.3",
"date-fns": "^2.30.0",
"deprecated-react-native-prop-types": "^5.0.0",
"email-validator": "^2.0.4",
"emoji-mart": "^5.5.2",
+ "emoji-regex": "^10.4.0",
"eventemitter3": "^5.0.1",
"expo": "^51.0.8",
"expo-application": "^5.9.1",
@@ -158,24 +160,20 @@
"lodash.set": "^4.3.2",
"lodash.shuffle": "^4.2.0",
"lodash.throttle": "^4.1.1",
- "mobx": "^6.6.1",
- "mobx-react-lite": "^3.4.0",
- "mobx-utils": "^6.0.6",
"nanoid": "^5.0.5",
"normalize-url": "^8.0.0",
"patch-package": "^6.5.1",
"postinstall-postinstall": "^2.1.0",
"psl": "^1.9.0",
"react": "18.2.0",
- "react-avatar-editor": "^13.0.0",
"react-compiler-runtime": "file:./lib/react-compiler-runtime",
"react-dom": "^18.2.0",
+ "react-image-crop": "^11.0.7",
"react-keyed-flatten-children": "^3.0.0",
"react-native": "0.74.1",
"react-native-compressor": "^1.8.24",
"react-native-date-picker": "^4.4.2",
"react-native-drawer-layout": "^4.0.0-alpha.3",
- "react-native-fs": "^2.20.0",
"react-native-gesture-handler": "~2.16.2",
"react-native-get-random-values": "~1.11.0",
"react-native-image-crop-picker": "0.41.2",
@@ -204,6 +202,7 @@
"statsig-react-native-expo": "^4.6.1",
"tippy.js": "^6.3.7",
"tlds": "^1.234.0",
+ "tldts": "^6.1.46",
"zeego": "^1.6.2",
"zod": "^3.20.2"
},
@@ -235,7 +234,6 @@
"@types/lodash.set": "^4.3.7",
"@types/lodash.shuffle": "^4.2.7",
"@types/psl": "^1.1.1",
- "@types/react-avatar-editor": "^13.0.0",
"@types/react-dom": "^18.2.18",
"@types/react-responsive": "^8.0.5",
"@types/react-test-renderer": "^17.0.1",
@@ -269,6 +267,7 @@
"react-refresh": "^0.14.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "18.2.0",
+ "svgo": "^3.3.2",
"ts-node": "^10.9.1",
"typescript": "^5.5.4",
"url-loader": "^4.1.1",
@@ -336,8 +335,13 @@
},
"lint-staged": {
"*{.js,.jsx,.ts,.tsx}": [
- "eslint --cache --fix",
+ "eslint --cache --fix"
+ ],
+ "*{.js,.jsx,.ts,.tsx,.css}": [
"prettier --cache --write --ignore-unknown"
+ ],
+ "assets/icons/*.svg": [
+ "svgo"
]
}
}
diff --git a/patches/expo-modules-core+1.12.11.patch b/patches/expo-modules-core+1.12.11.patch
index 4878bb9f7e..ea26b821da 100644
--- a/patches/expo-modules-core+1.12.11.patch
+++ b/patches/expo-modules-core+1.12.11.patch
@@ -4,11 +4,23 @@ index bb74e80..0aa0202 100644
+++ b/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
@@ -90,8 +90,8 @@ public class NativeModulesProxy extends ReactContextBaseJavaModule {
mModuleRegistry.ensureIsInitialized();
-
+
KotlinInteropModuleRegistry kotlinModuleRegistry = getKotlinInteropModuleRegistry();
- kotlinModuleRegistry.emitOnCreate();
kotlinModuleRegistry.installJSIInterop();
+ kotlinModuleRegistry.emitOnCreate();
-
+
Map
constants = new HashMap<>(3);
constants.put(MODULES_CONSTANTS_KEY, new HashMap<>());
+diff --git a/node_modules/expo-modules-core/build/uuid/uuid.js b/node_modules/expo-modules-core/build/uuid/uuid.js
+index 109d3fe..c7fce9e 100644
+--- a/node_modules/expo-modules-core/build/uuid/uuid.js
++++ b/node_modules/expo-modules-core/build/uuid/uuid.js
+@@ -1,5 +1,7 @@
+ import bytesToUuid from './lib/bytesToUuid';
+ import { Uuidv5Namespace } from './uuid.types';
++import { ensureNativeModulesAreInstalled } from '../ensureNativeModulesAreInstalled';
++ensureNativeModulesAreInstalled();
+ const nativeUuidv4 = globalThis?.expo?.uuidv4;
+ const nativeUuidv5 = globalThis?.expo?.uuidv5;
+ function uuidv4() {
diff --git a/patches/react-native+0.74.1.patch b/patches/react-native+0.74.1.patch
index 789ba84ace..aee3da1ecc 100644
--- a/patches/react-native+0.74.1.patch
+++ b/patches/react-native+0.74.1.patch
@@ -1,5 +1,18 @@
+diff --git a/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm b/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
+index caa5540..c5d4e67 100644
+--- a/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
++++ b/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
+@@ -73,7 +73,7 @@ @implementation RCTFileReaderModule
+ } else {
+ NSString *type = [RCTConvert NSString:blob[@"type"]];
+ NSString *text = [NSString stringWithFormat:@"data:%@;base64,%@",
+- type != nil && [type length] > 0 ? type : @"application/octet-stream",
++ ![type isEqual:[NSNull null]] && [type length] > 0 ? type : @"application/octet-stream",
+ [data base64EncodedStringWithOptions:0]];
+
+ resolve(text);
diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
-index b0d71dc..9974932 100644
+index b0d71dc..41b9a0e 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
@@ -377,10 +377,6 @@ - (void)textInputDidBeginEditing
@@ -36,7 +49,7 @@ index e9b330f..1ecdf0a 100644
+
@end
diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-index b09e653..4c32b31 100644
+index b09e653..f93cb46 100644
--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
@@ -198,9 +198,53 @@ - (void)refreshControlValueChanged
diff --git a/scripts/post-web-build.js b/scripts/post-web-build.js
index baaa7cb8b7..7bbee38554 100644
--- a/scripts/post-web-build.js
+++ b/scripts/post-web-build.js
@@ -20,7 +20,30 @@ console.log(`Writing ${templateFile}`)
const outputFile = entrypoints
.map(name => {
const file = path.basename(name)
- return ``
+ const ext = path.extname(file)
+
+ if (ext === '.js') {
+ return ``
+ }
+ if (ext === '.css') {
+ return ``
+ }
+
+ return ''
})
.join('\n')
fs.writeFileSync(templateFile, outputFile)
+
+function copyFiles(sourceDir, targetDir) {
+ const files = fs.readdirSync(path.join(projectRoot, sourceDir))
+ files.forEach(file => {
+ const sourcePath = path.join(projectRoot, sourceDir, file)
+ const targetPath = path.join(projectRoot, targetDir, file)
+ fs.copyFileSync(sourcePath, targetPath)
+ console.log(`Copied ${sourcePath} to ${targetPath}`)
+ })
+}
+
+copyFiles('web-build/static/js', 'bskyweb/static/js')
+copyFiles('web-build/static/css', 'bskyweb/static/css')
+copyFiles('web-build/static/media', 'bskyweb/static/media')
diff --git a/src/App.native.tsx b/src/App.native.tsx
index 9214253aca..c6334379f7 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -1,6 +1,6 @@
import 'react-native-url-polyfill/auto'
-import 'lib/sentry' // must be near top
-import 'view/icons'
+import '#/lib/sentry' // must be near top
+import '#/view/icons'
import React, {useEffect, useState} from 'react'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
@@ -29,6 +29,11 @@ import {Provider as A11yProvider} from '#/state/a11y'
import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
import {Provider as DialogStateProvider} from '#/state/dialogs'
import {listenSessionDropped} from '#/state/events'
+import {
+ beginResolveGeolocation,
+ ensureGeolocationResolved,
+ Provider as GeolocationProvider,
+} from '#/state/geolocation'
import {Provider as InvitesStateProvider} from '#/state/invites'
import {Provider as LightboxStateProvider} from '#/state/lightbox'
import {MessagesProvider} from '#/state/messages'
@@ -55,7 +60,7 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
import {Shell} from '#/view/shell'
-import {ThemeProvider as Alf, useFonts} from '#/alf'
+import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
@@ -66,6 +71,11 @@ import {BackgroundNotificationPreferencesProvider} from '../modules/expo-backgro
SplashScreen.preventAutoHideAsync()
+/**
+ * Begin geolocation ASAP
+ */
+beginResolveGeolocation()
+
function InnerApp() {
const [isReady, setIsReady] = React.useState(false)
const {currentAccount} = useSession()
@@ -106,60 +116,64 @@ function InnerApp() {
}, [_])
return (
-
-
-
-
-
-
+
+
+
+
+
+
-
- {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
)
}
function App() {
const [isReady, setReady] = useState(false)
- const [loaded] = useFonts()
React.useEffect(() => {
- initPersistedState().then(() => setReady(true))
+ Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
+ setReady(true),
+ )
}, [])
- if (!isReady || !loaded) {
+ if (!isReady) {
return null
}
@@ -168,36 +182,38 @@ function App() {
* that is set up in the InnerApp component above.
*/
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 1c66507336..1664812d08 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -1,5 +1,6 @@
-import 'lib/sentry' // must be near top
-import 'view/icons'
+import '#/lib/sentry' // must be near top
+import '#/view/icons'
+import './style.css'
import React, {useEffect, useState} from 'react'
import {KeyboardProvider} from 'react-native-keyboard-controller'
@@ -18,6 +19,11 @@ import {Provider as A11yProvider} from '#/state/a11y'
import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
import {Provider as DialogStateProvider} from '#/state/dialogs'
import {listenSessionDropped} from '#/state/events'
+import {
+ beginResolveGeolocation,
+ ensureGeolocationResolved,
+ Provider as GeolocationProvider,
+} from '#/state/geolocation'
import {Provider as InvitesStateProvider} from '#/state/invites'
import {Provider as LightboxStateProvider} from '#/state/lightbox'
import {MessagesProvider} from '#/state/messages'
@@ -46,7 +52,7 @@ import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/Video
import * as Toast from '#/view/com/util/Toast'
import {ToastContainer} from '#/view/com/util/Toast.web'
import {Shell} from '#/view/shell/index'
-import {ThemeProvider as Alf, useFonts} from '#/alf'
+import {ThemeProvider as Alf} from '#/alf'
import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
import {NuxDialogs} from '#/components/dialogs/nuxs'
import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
@@ -54,6 +60,11 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo
import {Provider as PortalProvider} from '#/components/Portal'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+/**
+ * Begin geolocation ASAP
+ */
+beginResolveGeolocation()
+
function InnerApp() {
const [isReady, setIsReady] = React.useState(false)
const {currentAccount} = useSession()
@@ -96,61 +107,64 @@ function InnerApp() {
return (
-
-
-
-
-
-
+
+
+
+
+
+
-
- {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
)
}
function App() {
const [isReady, setReady] = useState(false)
- const [loaded] = useFonts()
React.useEffect(() => {
- initPersistedState().then(() => setReady(true))
+ Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
+ setReady(true),
+ )
}, [])
- if (!isReady || !loaded) {
+ if (!isReady) {
return null
}
@@ -159,31 +173,33 @@ function App() {
* that is set up in the InnerApp component above.
*/
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 9f75d305ae..0c8eb330d7 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -276,16 +276,13 @@ export const atoms = {
letterSpacing: tokens.TRACKING,
},
font_normal: {
- fontWeight: tokens.fontWeight.normal,
- },
- font_semibold: {
- fontWeight: tokens.fontWeight.semibold,
+ fontWeight: tokens.fontWeight.regular,
},
font_bold: {
- fontWeight: tokens.fontWeight.bold,
+ fontWeight: tokens.fontWeight.semibold,
},
font_heavy: {
- fontWeight: tokens.fontWeight.heavy,
+ fontWeight: tokens.fontWeight.extrabold,
},
italic: {
fontStyle: 'italic',
diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
index ce658fa05b..b11ce939f8 100644
--- a/src/alf/fonts.ts
+++ b/src/alf/fonts.ts
@@ -1,6 +1,4 @@
-import {useFonts as defaultUseFonts} from 'expo-font'
-
-import {isNative, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
import {Device, device} from '#/storage'
const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
@@ -34,38 +32,6 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
device.set(['fontFamily'], fontFamily)
}
-/*
- * Unused fonts are commented out, but the files are there if we need them.
- */
-export function useFonts() {
- /**
- * For native, the `expo-font` config plugin embeds the fonts in the
- * application binary. But `expo-font` isn't supported on web, so we fall
- * back to async loading here.
- */
- if (isNative) return [true, null]
- return defaultUseFonts({
- // 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
- // 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),
- // 'Inter-ExtraLight': require('../../assets/fonts/inter/Inter-ExtraLight.otf'),
- // 'Inter-ExtraLightItalic': require('../../assets/fonts/inter/Inter-ExtraLightItalic.otf'),
- // 'Inter-Light': require('../../assets/fonts/inter/Inter-Light.otf'),
- // 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'),
- 'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'),
- 'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'),
- 'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'),
- 'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'),
- 'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'),
- 'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
- 'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'),
- 'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'),
- 'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'),
- 'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
- 'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'),
- 'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'),
- })
-}
-
/*
* Unused fonts are commented out, but the files are there if we need them.
*/
@@ -108,4 +74,10 @@ export function applyFonts(
style.fontFamily = style.fontFamily || FAMILIES
}
}
+
+ /**
+ * Disable contextual ligatures
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant}
+ */
+ style.fontVariant = ['no-contextual']
}
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index f5d2247f9f..9f7ec5c673 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -183,7 +183,7 @@ export function createThemes({
} as const
const darkPalette: Palette = {
- white: color.gray_0,
+ white: color.gray_25,
black: color.trueBlack,
contrast_25: color.gray_975,
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index d43d2b67dd..3f30702e85 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -47,11 +47,16 @@ export const borderRadius = {
full: 999,
} as const
+/**
+ * These correspond to Inter font files we actually load.
+ */
export const fontWeight = {
- normal: '400',
- semibold: '500',
- bold: '600',
- heavy: '700',
+ regular: '400',
+ // medium: '500',
+ semibold: '600',
+ // bold: '700',
+ extrabold: '800',
+ // black: '900',
} as const
export const gradients = {
diff --git a/src/components/AppLanguageDropdown.tsx b/src/components/AppLanguageDropdown.tsx
index 02cd0ce2d4..6170ab2e20 100644
--- a/src/components/AppLanguageDropdown.tsx
+++ b/src/components/AppLanguageDropdown.tsx
@@ -24,8 +24,6 @@ export function AppLanguageDropdown() {
if (sanitizedLang !== value) {
setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
}
- setLangPrefs.setPrimaryLanguage(value)
- setLangPrefs.setContentLanguage(value)
// reset feeds to refetch content
resetPostsFeedQueries(queryClient)
diff --git a/src/components/AppLanguageDropdown.web.tsx b/src/components/AppLanguageDropdown.web.tsx
index a106d99663..00a7b53011 100644
--- a/src/components/AppLanguageDropdown.web.tsx
+++ b/src/components/AppLanguageDropdown.web.tsx
@@ -27,8 +27,6 @@ export function AppLanguageDropdown() {
if (sanitizedLang !== value) {
setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
}
- setLangPrefs.setPrimaryLanguage(value)
- setLangPrefs.setContentLanguage(value)
// reset feeds to refetch content
resetPostsFeedQueries(queryClient)
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 704aa9d987..8728b88c2c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -14,7 +14,7 @@ import {
} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
-import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf'
+import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
import {Props as SVGIconProps} from '#/components/icons/common'
import {Text} from '#/components/Typography'
@@ -30,7 +30,7 @@ export type ButtonColor =
| 'gradient_sunset'
| 'gradient_nordic'
| 'gradient_bonfire'
-export type ButtonSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large'
+export type ButtonSize = 'tiny' | 'small' | 'large'
export type ButtonShape = 'round' | 'square' | 'default'
export type VariantProps = {
/**
@@ -343,39 +343,46 @@ export const Button = React.forwardRef(
if (shape === 'default') {
if (size === 'large') {
- baseStyles.push(
- {paddingVertical: 15},
- a.px_2xl,
- a.rounded_sm,
- a.gap_md,
- )
- } else if (size === 'medium') {
- baseStyles.push(
- {paddingVertical: 12},
- a.px_2xl,
- a.rounded_sm,
- a.gap_md,
- )
+ baseStyles.push({
+ paddingVertical: 13,
+ paddingHorizontal: 20,
+ borderRadius: 8,
+ gap: 8,
+ })
} else if (size === 'small') {
- baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
- } else if (size === 'xsmall') {
- baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm)
+ baseStyles.push({
+ paddingVertical: 8,
+ paddingHorizontal: 12,
+ borderRadius: 6,
+ gap: 6,
+ })
} else if (size === 'tiny') {
- baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
+ baseStyles.push({
+ paddingVertical: 4,
+ paddingHorizontal: 8,
+ borderRadius: 4,
+ gap: 4,
+ })
}
} else if (shape === 'round' || shape === 'square') {
if (size === 'large') {
if (shape === 'round') {
- baseStyles.push({height: 54, width: 54})
+ baseStyles.push({height: 46, width: 46})
} else {
- baseStyles.push({height: 50, width: 50})
+ baseStyles.push({height: 44, width: 44})
}
} else if (size === 'small') {
- baseStyles.push({height: 34, width: 34})
- } else if (size === 'xsmall') {
- baseStyles.push({height: 28, width: 28})
+ if (shape === 'round') {
+ baseStyles.push({height: 36, width: 36})
+ } else {
+ baseStyles.push({height: 34, width: 34})
+ }
} else if (size === 'tiny') {
- baseStyles.push({height: 20, width: 20})
+ if (shape === 'round') {
+ baseStyles.push({height: 22, width: 22})
+ } else {
+ baseStyles.push({height: 21, width: 21})
+ }
}
if (shape === 'round') {
@@ -619,11 +626,11 @@ export function useSharedButtonTextStyles() {
}
if (size === 'large') {
- baseStyles.push(a.text_md, android({paddingBottom: 1}))
+ baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1}))
+ } else if (size === 'small') {
+ baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1}))
} else if (size === 'tiny') {
- baseStyles.push(a.text_xs, android({paddingBottom: 1}))
- } else {
- baseStyles.push(a.text_sm, android({paddingBottom: 1}))
+ baseStyles.push(a.text_xs, a.leading_tight)
}
return StyleSheet.flatten(baseStyles)
@@ -643,31 +650,98 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
export function ButtonIcon({
icon: Comp,
position,
- size: iconSize,
+ size,
}: {
icon: React.ComponentType
position?: 'left' | 'right'
size?: SVGIconProps['size']
}) {
- const {size, disabled} = useButtonContext()
+ const {size: buttonSize, disabled} = useButtonContext()
const textStyles = useSharedButtonTextStyles()
+ const {iconSize, iconContainerSize} = React.useMemo(() => {
+ /**
+ * Pre-set icon sizes for different button sizes
+ */
+ const iconSizeShorthand =
+ size ??
+ (({
+ large: 'sm',
+ small: 'xs',
+ tiny: 'xs',
+ }[buttonSize || 'small'] || 'sm') as Exclude<
+ SVGIconProps['size'],
+ undefined
+ >)
+
+ /*
+ * Copied here from icons/common.tsx so we can tweak if we need to, but
+ * also so that we can calculate transforms.
+ */
+ const iconSize = {
+ xs: 12,
+ sm: 16,
+ md: 20,
+ lg: 24,
+ xl: 28,
+ '2xl': 32,
+ }[iconSizeShorthand]
+
+ /*
+ * Goal here is to match rendered text size so that different size icons
+ * don't increase button size
+ */
+ const iconContainerSize = {
+ large: 18,
+ small: 16,
+ tiny: 13,
+ }[buttonSize || 'small']
+
+ return {
+ iconSize,
+ iconContainerSize,
+ }
+ }, [buttonSize, size])
return (
-
+
+
+
)
}
diff --git a/src/components/FeedCard.tsx b/src/components/FeedCard.tsx
index e6d664cfda..b28f66f839 100644
--- a/src/components/FeedCard.tsx
+++ b/src/components/FeedCard.tsx
@@ -11,17 +11,17 @@ import {msg, plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
+import {sanitizeHandle} from '#/lib/strings/handles'
import {logger} from '#/logger'
+import {precacheFeedFromGeneratorView} from '#/state/queries/feed'
import {
useAddSavedFeedsMutation,
usePreferencesQuery,
useRemoveFeedMutation,
} from '#/state/queries/preferences'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {precacheFeedFromGeneratorView} from 'state/queries/feed'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
+import * as Toast from '#/view/com/util/Toast'
import {UserAvatar} from '#/view/com/util/UserAvatar'
-import * as Toast from 'view/com/util/Toast'
import {useTheme} from '#/alf'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
@@ -121,7 +121,10 @@ export function TitleAndByline({
return (
-
+
{title}
{creator && (
diff --git a/src/components/KnownFollowers.tsx b/src/components/KnownFollowers.tsx
index 4017a7b0be..35a346c3a5 100644
--- a/src/components/KnownFollowers.tsx
+++ b/src/components/KnownFollowers.tsx
@@ -5,7 +5,7 @@ import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {makeProfileLink} from '#/lib/routes/links'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import {Link, LinkProps} from '#/components/Link'
@@ -185,11 +185,11 @@ function KnownFollowersInner({
serverCount > 2 ? (
Followed by{' '}
-
+
{slice[0].profile.displayName}
,{' '}
-
+
{slice[1].profile.displayName}
, and{' '}
@@ -203,11 +203,11 @@ function KnownFollowersInner({
// only 2
Followed by{' '}
-
+
{slice[0].profile.displayName}
{' '}
and{' '}
-
+
{slice[1].profile.displayName}
@@ -216,7 +216,7 @@ function KnownFollowersInner({
// 1-n followers, including blocks
Followed by{' '}
-
+
{slice[0].profile.displayName}
{' '}
and{' '}
@@ -230,7 +230,7 @@ function KnownFollowersInner({
// only 1
Followed by{' '}
-
+
{slice[0].profile.displayName}
diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx
index 542f2d2993..03b8ece6b1 100644
--- a/src/components/LabelingServiceCard/index.tsx
+++ b/src/components/LabelingServiceCard/index.tsx
@@ -9,6 +9,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
import {useLabelerInfoQuery} from '#/state/queries/labeler'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
import {Link as InternalLink, LinkProps} from '#/components/Link'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
@@ -43,21 +44,45 @@ export function Avatar({avatar}: {avatar?: string}) {
}
export function Title({value}: {value: string}) {
- return {value}
+ return (
+
+ {value}
+
+ )
}
export function Description({value, handle}: {value?: string; handle: string}) {
+ const {_} = useLingui()
return value ? (
-
+
) : (
-
- By {sanitizeHandle(handle, '@')}
+
+ {_(msg`By ${sanitizeHandle(handle, '@')}`)}
)
}
+export function RegionalNotice() {
+ const t = useTheme()
+ return (
+
+
+
+ Required in your region
+
+
+ )
+}
+
export function LikeCount({count}: {count: number}) {
const t = useTheme()
return (
@@ -66,7 +91,7 @@ export function LikeCount({count}: {count: number}) {
a.mt_sm,
a.text_sm,
t.atoms.text_contrast_medium,
- {fontWeight: '500'},
+ {fontWeight: '600'},
]}>
@@ -85,7 +110,7 @@ export function Content({children}: React.PropsWithChildren<{}>) {
a.align_center,
a.justify_between,
]}>
- {children}
+ {children}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 6c25faffb8..c80b9f3707 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -9,6 +9,7 @@ import {sanitizeUrl} from '@braintree/sanitize-url'
import {StackActions, useLinkProps} from '@react-navigation/native'
import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
+import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
import {AllNavigatorParams} from '#/lib/routes/types'
import {shareUrl} from '#/lib/sharing'
import {
@@ -17,11 +18,10 @@ import {
isExternalUrl,
linkRequiresWarning,
} from '#/lib/strings/url-helpers'
-import {isNative} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
import {shouldClickOpenNewTab} from '#/platform/urls'
import {useModalControls} from '#/state/modals'
import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
import {Button, ButtonProps} from '#/components/Button'
import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -244,7 +244,10 @@ export function Link({
export type InlineLinkProps = React.PropsWithChildren<
BaseLinkProps & TextStyleProp & Pick
> &
- Pick
+ Pick & {
+ disableUnderline?: boolean
+ title?: TextProps['title']
+ }
export function InlineLinkText({
children,
@@ -257,6 +260,7 @@ export function InlineLinkText({
selectable,
label,
shareOnLongPress,
+ disableUnderline,
...rest
}: InlineLinkProps) {
const t = useTheme()
@@ -290,11 +294,12 @@ export function InlineLinkText({
{...rest}
style={[
{color: t.palette.primary_500},
- (hovered || focused || pressed) && {
- ...web({outline: 0}),
- textDecorationLine: 'underline',
- textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
- },
+ (hovered || focused || pressed) &&
+ !disableUnderline && {
+ ...web({outline: 0}),
+ textDecorationLine: 'underline',
+ textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
+ },
flattenedStyle,
]}
role="link"
@@ -365,3 +370,18 @@ export function BaseLink({
)
}
+
+export function WebOnlyInlineLinkText({
+ children,
+ to,
+ onPress,
+ ...props
+}: InlineLinkProps) {
+ return isWeb ? (
+
+ {children}
+
+ ) : (
+ {children}
+ )
+}
diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx
index 829f36d471..ed5838fb04 100644
--- a/src/components/ListCard.tsx
+++ b/src/components/ListCard.tsx
@@ -7,13 +7,14 @@ import {
moderateUserList,
ModerationUI,
} from '@atproto/api'
-import {Trans} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {useModerationOpts} from 'state/preferences/moderation-opts'
-import {precacheList} from 'state/queries/feed'
-import {useSession} from 'state/session'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {precacheList} from '#/state/queries/feed'
+import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {
Avatar,
@@ -111,6 +112,7 @@ export function TitleAndByline({
modUi?: ModerationUI
}) {
const t = useTheme()
+ const {_} = useLingui()
const {currentAccount} = useSession()
return (
@@ -130,6 +132,7 @@ export function TitleAndByline({
{title}
@@ -139,15 +142,12 @@ export function TitleAndByline({
{creator && (
- {purpose === MODLIST ? (
-
- Moderation list by {sanitizeHandle(creator.handle, '@')}
-
- ) : (
- List by {sanitizeHandle(creator.handle, '@')}
- )}
+ {purpose === MODLIST
+ ? _(msg`Moderation list by ${sanitizeHandle(creator.handle, '@')}`)
+ : _(msg`List by ${sanitizeHandle(creator.handle, '@')}`)}
)}
diff --git a/src/components/MediaInsetBorder.tsx b/src/components/MediaInsetBorder.tsx
index ef8b00e2e0..ed89880f40 100644
--- a/src/components/MediaInsetBorder.tsx
+++ b/src/components/MediaInsetBorder.tsx
@@ -24,7 +24,7 @@ export function MediaInsetBorder({
return (
{children}
diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx
index 742a11667c..974d83593f 100644
--- a/src/components/Pills.tsx
+++ b/src/components/Pills.tsx
@@ -130,9 +130,10 @@ export function Label({
)}
{name}
{handle}
diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
index 3890790dbe..4cda42fdbe 100644
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@@ -5,15 +5,15 @@ import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom'
import {msg, plural} from '@lingui/macro'
import {useLingui} from '@lingui/react'
+import {isTouchDevice} from '#/lib/browser'
import {getModerationCauseKey} from '#/lib/moderation'
import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
-import {isTouchDevice} from 'lib/browser'
-import {useProfileShadow} from 'state/cache/profile-shadow'
import {formatCount} from '#/view/com/util/numeric/format'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {ProfileHeaderHandle} from '#/screens/Profile/Header/Handle'
@@ -411,6 +411,7 @@ function Inner({
() => currentAccount?.did === profile.did,
[currentAccount, profile],
)
+ const isLabeler = profile.associated?.labeler
return (
@@ -419,11 +420,13 @@ function Inner({
{!isMe &&
+ !isLabeler &&
(isBlockedUser ? (
}) {
diff --git a/src/components/ProgressGuide/Task.tsx b/src/components/ProgressGuide/Task.tsx
index a83715a425..f2ceba52ac 100644
--- a/src/components/ProgressGuide/Task.tsx
+++ b/src/components/ProgressGuide/Task.tsx
@@ -35,9 +35,7 @@ export function ProgressGuideTask({
)}
-
- {title}
-
+ {title}
{subtitle && (
diff --git a/src/components/ProgressGuide/Toast.tsx b/src/components/ProgressGuide/Toast.tsx
index 346312af51..69e0082606 100644
--- a/src/components/ProgressGuide/Toast.tsx
+++ b/src/components/ProgressGuide/Toast.tsx
@@ -154,7 +154,7 @@ export const ProgressGuideToast = React.forwardRef<
ref={animatedCheckRef}
/>
- {title}
+ {title}
{subtitle && (
{subtitle}
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 7836bbef95..8765cdee31 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -120,7 +120,7 @@ export function Cancel({
{!noDescription && record.description ? (
-
+
{record.description}
) : null}
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index 870cbbb9fd..a848cd5b92 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -7,9 +7,9 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a, native, useTheme, web} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
@@ -125,7 +125,7 @@ export function WizardEditListDialog({
label={_(msg`Close`)}
variant="ghost"
color="primary"
- size="xsmall"
+ size="small"
onPress={() => control.close()}>
Close
diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index bd308fc73a..44f01a1545 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -12,11 +12,11 @@ import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {DISCOVER_FEED_URI, STARTER_PACK_MAX_SIZE} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {useSession} from 'state/session'
-import {UserAvatar} from 'view/com/util/UserAvatar'
+import {DISCOVER_FEED_URI, STARTER_PACK_MAX_SIZE} from '#/lib/constants'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {useSession} from '#/state/session'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
@@ -78,6 +78,7 @@ function WizardListCard({
/>
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
index 15f88468a7..501e23872f 100644
--- a/src/components/Typography.tsx
+++ b/src/components/Typography.tsx
@@ -1,15 +1,85 @@
import React from 'react'
import {StyleProp, TextProps as RNTextProps, TextStyle} from 'react-native'
import {UITextView} from 'react-native-uitextview'
+import createEmojiRegex from 'emoji-regex'
-import {isNative} from '#/platform/detection'
+import {logger} from '#/logger'
+import {isIOS, isNative} from '#/platform/detection'
import {Alf, applyFonts, atoms, flatten, useAlf, useTheme, web} from '#/alf'
+import {IS_DEV} from '#/env'
-export type TextProps = RNTextProps & {
+export type StringChild = string | (string | null)[]
+
+export type TextProps = Omit & {
/**
* Lets the user select text, to use the native copy and paste functionality.
*/
selectable?: boolean
+ /**
+ * Provides `data-*` attributes to the underlying `UITextView` component on
+ * web only.
+ */
+ dataSet?: Record
+ /**
+ * Appears as a small tooltip on web hover.
+ */
+ title?: string
+} & (
+ | {
+ emoji: true
+ children: StringChild
+ }
+ | {
+ emoji?: false
+ children: RNTextProps['children']
+ }
+ )
+
+const EMOJI = createEmojiRegex()
+
+export function childHasEmoji(children: React.ReactNode) {
+ return (Array.isArray(children) ? children : [children]).some(
+ child => typeof child === 'string' && createEmojiRegex().test(child),
+ )
+}
+
+export function childIsString(
+ children: React.ReactNode,
+): children is StringChild {
+ return (
+ typeof children === 'string' ||
+ (Array.isArray(children) &&
+ children.every(child => typeof child === 'string' || child === null))
+ )
+}
+
+export function renderChildrenWithEmoji(children: StringChild) {
+ const normalized = Array.isArray(children) ? children : [children]
+
+ return (
+
+ {normalized.map(child => {
+ if (typeof child !== 'string') return child
+
+ const emojis = child.match(EMOJI)
+
+ if (emojis === null) {
+ return child
+ }
+
+ return child.split(EMOJI).map((stringPart, index) => (
+
+ {stringPart}
+ {emojis[index] ? (
+
+ {emojis[index]}
+
+ ) : null}
+
+ ))
+ })}
+
+ )
}
/**
@@ -64,7 +134,15 @@ export function normalizeTextStyles(
/**
* Our main text component. Use this most of the time.
*/
-export function Text({style, selectable, ...rest}: TextProps) {
+export function Text({
+ children,
+ emoji,
+ style,
+ selectable,
+ title,
+ dataSet,
+ ...rest
+}: TextProps) {
const {fonts, flags} = useAlf()
const t = useTheme()
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], {
@@ -73,7 +151,29 @@ export function Text({style, selectable, ...rest}: TextProps) {
flags,
})
- return
+ if (IS_DEV) {
+ if (!emoji && childHasEmoji(children)) {
+ logger.warn(
+ `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add '`,
+ )
+ }
+
+ if (emoji && !childIsString(children)) {
+ logger.error('Text: when , children can only be strings.')
+ }
+ }
+
+ return (
+
+ {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
+
+ )
}
export function createHeadingElement({level}: {level: number}) {
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index d831c6002a..08608f9d88 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -117,7 +117,7 @@ function BirthdayInner({
-
-
-
-
+
+
+
+
+
+