add translation engine choice into tweaks, add kagi as option #51

+16 -4

src/lib/hooks/useTranslate.ts

··· 1 1 import {useCallback} from 'react' 2 2 import * as IntentLauncher from 'expo-intent-launcher' 3 3 4 4 - import {getTranslatorLink} from '#/locale/helpers' 4 4 + import {getTranslatorLink, getTranslatorLinkKagi} from '#/locale/helpers' 5 5 + import {useTranslationServicePreference} from '#/state/preferences/translation-service-preference' 5 6 import {IS_ANDROID} from '#/env' 6 7 import {useOpenLink} from './useOpenLink' 7 8 8 9 export function useTranslate() { 9 10 const openLink = useOpenLink() 10 11 12 12 + const translationServicePreference = useTranslationServicePreference() 13 13 + 11 14 return useCallback( 12 15 async (text: string, language: string) => { 13 13 - const translateUrl = getTranslatorLink(text, language) 14 14 - if (IS_ANDROID) { 16 16 + let translateUrl 17 17 + 18 18 + // if ur curious why this isnt a switch case, good question, for some reason making this a switch case breaks the functionality 19 19 + // it is a mystery https://www.youtube.com/watch?v=fq3abPnEEGE 20 20 + if (translationServicePreference == 'kagi') { 21 21 + translateUrl = getTranslatorLinkKagi(text, language) 22 22 + } else { 23 23 + translateUrl = getTranslatorLink(text, language) 24 24 + } 25 25 + 26 26 + if (IS_ANDROID && translationServicePreference == 'google') { 15 27 try { 16 28 // use getApplicationIconAsync to determine if the translate app is installed 17 29 if ( ··· 49 61 await openLink(translateUrl) 50 62 } 51 63 }, 52 52 - [openLink], 64 64 + [openLink, translationServicePreference], 53 65 ) 54 66 }

+7

src/locale/helpers.ts

··· 127 127 return bcp47Match.basicFilter(lang, targetLangs).length > 0 128 128 } 129 129 130 130 + // we cant hook into functions like this, so we will make other translator functions n swap between em 130 131 export function getTranslatorLink(text: string, lang: string): string { 131 132 return `https://translate.google.com/?sl=auto&tl=${lang}&text=${encodeURIComponent( 132 133 text, 133 134 )}` 134 135 } 135 136 137 137 + export function getTranslatorLinkKagi(text: string, lang: string): string { 138 138 + return `https://translate.kagi.com/?from=auto&to=${lang}&text=${encodeURIComponent( 139 139 + text, 140 140 + )}` 141 141 + } 142 142 + 136 143 /** 137 144 * Returns a valid `appLanguage` value from an arbitrary string. 138 145 *

+24 -5

src/screens/PostThread/components/ThreadItemAnchor.tsx

··· 17 17 import {sanitizeDisplayName} from '#/lib/strings/display-names' 18 18 import {sanitizeHandle} from '#/lib/strings/handles' 19 19 import {niceDate} from '#/lib/strings/time' 20 20 - import {getTranslatorLink, isPostInLanguage} from '#/locale/helpers' 20 20 + import { 21 21 + getTranslatorLink, 22 22 + getTranslatorLinkKagi, 23 23 + isPostInLanguage, 24 24 + } from '#/locale/helpers' 21 25 import { 22 26 POST_TOMBSTONE, 23 27 type Shadow, ··· 31 35 import {useDisableRepostsMetrics} from '#/state/preferences/disable-reposts-metrics' 32 36 import {useDisableSavesMetrics} from '#/state/preferences/disable-saves-metrics' 33 37 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' 38 38 + import {useTranslationServicePreference} from '#/state/preferences/translation-service-preference' 34 39 import {type ThreadItem} from '#/state/queries/usePostThread/types' 35 40 import {useSession} from '#/state/session' 36 41 import {type OnPostSuccessData} from '#/state/shell/composer' ··· 566 571 const isRootPost = !('reply' in post.record) 567 572 const langPrefs = useLanguagePrefs() 568 573 574 574 + const translationServicePreference = useTranslationServicePreference() 575 575 + 569 576 const needsTranslation = useMemo( 570 577 () => 571 578 Boolean( ··· 617 624 <InlineLinkText 618 625 // overridden to open an intent on android, but keep 619 626 // as anchor tag for accessibility 620 620 - to={getTranslatorLink( 621 621 - post.record.text, 622 622 - langPrefs.primaryLanguage, 623 623 - )} 627 627 + to={ 628 628 + // in case u want to expand this to allow other services to be u would do this after the kagi one 629 629 + // : translationServicePreference === "insert service name" 630 630 + // ? getTranslatorLink(post.record.text, langPrefs.primaryLanguage, "insert service name") 631 631 + // atm i cant really think of another service that lets u easily do this so its only kagi for now 632 632 + // the default itll use if its not any of the checks is google!! 633 633 + translationServicePreference === 'kagi' 634 634 + ? getTranslatorLinkKagi( 635 635 + post.record.text, 636 636 + langPrefs.primaryLanguage, 637 637 + ) 638 638 + : getTranslatorLink( 639 639 + post.record.text, 640 640 + langPrefs.primaryLanguage, 641 641 + ) 642 642 + } 624 643 label={_(msg`Translate`)} 625 644 style={[a.text_sm]} 626 645 onPress={onTranslatePress}>

+43

src/screens/Settings/DeerSettings.tsx

··· 103 103 useSetShowLinkInHandle, 104 104 useShowLinkInHandle, 105 105 } from '#/state/preferences/show-link-in-handle.tsx' 106 106 + import { 107 107 + useSetTranslationServicePreference, 108 108 + useTranslationServicePreference, 109 109 + } from '#/state/preferences/translation-service-preference' 106 110 import {useProfilesQuery} from '#/state/queries/profile' 107 111 import * as SettingsList from '#/screens/Settings/components/SettingsList' 108 112 import {atoms as a, useBreakpoints} from '#/alf' ··· 113 117 import {Atom_Stroke2_Corner0_Rounded as DeerIcon} from '#/components/icons/Atom' 114 118 import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink' 115 119 import {Eye_Stroke2_Corner0_Rounded as VisibilityIcon} from '#/components/icons/Eye' 120 120 + import {Earth_Stroke2_Corner2_Rounded as EarthIcon} from '#/components/icons/Globe' 116 121 import {Lab_Stroke2_Corner0_Rounded as _BeakerIcon} from '#/components/icons/Lab' 117 122 import {PaintRoller_Stroke2_Corner2_Rounded as PaintRollerIcon} from '#/components/icons/PaintRoller' 118 123 import {RaisingHand4Finger_Stroke2_Corner0_Rounded as RaisingHandIcon} from '#/components/icons/RaisingHand' ··· 327 332 const showLinkInHandle = useShowLinkInHandle() 328 333 const setShowLinkInHandle = useSetShowLinkInHandle() 329 334 335 335 + const translationServicePreference = useTranslationServicePreference() 336 336 + const setTranslationServicePreference = useSetTranslationServicePreference() 337 337 + 330 338 return ( 331 339 <Layout.Screen> 332 340 <Layout.Header.Outer> ··· 616 624 </Admonition> 617 625 </SettingsList.Group> 618 626 627 627 + <SettingsList.Group contentContainerStyle={[a.gap_sm]}> 628 628 + <SettingsList.ItemIcon icon={EarthIcon} /> 629 629 + <SettingsList.ItemText> 630 630 + <Trans>Translation Engine</Trans> 631 631 + </SettingsList.ItemText> 632 632 + 633 633 + <Admonition type="info" style={[a.flex_1]}> 634 634 + <Trans>Choose the engine to use when translating posts.</Trans> 635 635 + </Admonition> 636 636 + 637 637 + <Toggle.Item 638 638 + name="service_google" 639 639 + label={_(msg`Use Google Translate`)} 640 640 + value={translationServicePreference === 'google'} 641 641 + onChange={() => setTranslationServicePreference('google')} 642 642 + style={[a.w_full]}> 643 643 + <Toggle.LabelText style={[a.flex_1]}> 644 644 + <Trans>Use Google Translate</Trans> 645 645 + </Toggle.LabelText> 646 646 + <Toggle.Radio /> 647 647 + </Toggle.Item> 648 648 + 649 649 + <Toggle.Item 650 650 + name="service_kagi" 651 651 + label={_(msg`Use Kagi Translate`)} 652 652 + value={translationServicePreference === 'kagi'} 653 653 + onChange={() => setTranslationServicePreference('kagi')} 654 654 + style={[a.w_full]}> 655 655 + <Toggle.LabelText style={[a.flex_1]}> 656 656 + <Trans>Use Kagi Translate</Trans> 657 657 + </Toggle.LabelText> 658 658 + <Toggle.Radio /> 659 659 + </Toggle.Item> 660 660 + </SettingsList.Group> 661 661 + 619 662 <SettingsList.Group contentContainerStyle={[a.gap_sm]}> 620 663 <SettingsList.ItemIcon icon={VisibilityIcon} /> 621 664 <SettingsList.ItemText>

+3

src/state/persisted/schema.ts

··· 171 171 172 172 showExternalShareButtons: z.boolean().optional(), 173 173 174 174 + translationServicePreference: z.enum(['google', 'kagi']), 175 175 + 174 176 /** @deprecated */ 175 177 mutedThreads: z.array(z.string()), 176 178 trendingDisabled: z.boolean().optional(), ··· 279 281 highQualityImages: false, 280 282 hideUnreplyablePosts: false, 281 283 showExternalShareButtons: false, 284 284 + translationServicePreference: 'google', 282 285 } 283 286 284 287 export function tryParse(rawData: string): Schema | undefined {

+57 -48

src/state/preferences/index.tsx

··· 37 37 import {Provider as RepostCarouselProvider} from './repost-carousel-enabled' 38 38 import {Provider as ShowLinkInHandleProvider} from './show-link-in-handle' 39 39 import {Provider as SubtitlesProvider} from './subtitles' 40 40 + import {Provider as TranslationServicePreferenceProvider} from './translation-service-preference' 40 41 import {Provider as TrendingSettingsProvider} from './trending' 41 42 import {Provider as UsedStarterPacksProvider} from './used-starter-packs' 42 43 ··· 59 60 export {useLabelDefinitions} from './label-defs' 60 61 export {useLanguagePrefs, useLanguagePrefsApi} from './languages' 61 62 export {useSetSubtitlesEnabled, useSubtitlesEnabled} from './subtitles' 63 63 + export { 64 64 + useSetTranslationServicePreference, 65 65 + useTranslationServicePreference, 66 66 + } from './translation-service-preference' 62 67 63 68 export function Provider({children}: React.PropsWithChildren<{}>) { 64 69 return ( ··· 66 71 <AltTextRequiredProvider> 67 72 <ExternalShareButtonsProvider> 68 73 <GoLinksProvider> 69 69 - <NoAppLabelersProvider> 74 74 + <NoAppLabelersProvider> 70 75 <DirectFetchRecordsProvider> 71 76 <ConstellationProvider> 72 72 - <ConstellationInstanceProvider> 73 73 - <DeerVerificationProvider> 74 74 - <NoDiscoverProvider> 75 75 - <ShowLinkInHandleProvider> 77 77 + <ConstellationInstanceProvider> 78 78 + <DeerVerificationProvider> 79 79 + <NoDiscoverProvider> 80 80 + <ShowLinkInHandleProvider> 76 81 <LargeAltBadgeProvider> 77 82 <ExternalEmbedsProvider> 78 83 <HiddenPostsProvider> 79 79 - <HighQualityImagesProvider> 84 84 + <HighQualityImagesProvider> 80 85 <InAppBrowserProvider> 81 86 <DisableHapticsProvider> 82 87 <AutoplayProvider> ··· 84 89 <SubtitlesProvider> 85 90 <TrendingSettingsProvider> 86 91 <RepostCarouselProvider> 87 87 - <KawaiiProvider> 88 88 - <HideFeedsPromoTabProvider> 89 89 - <DisableViaRepostNotificationProvider> 90 90 - <DisableLikesMetricsProvider> 91 91 - <DisableRepostsMetricsProvider> 92 92 - <DisableQuotesMetricsProvider> 93 93 - <DisableSavesMetricsProvider> 94 94 - <DisableReplyMetricsProvider> 95 95 - <DisableFollowersMetricsProvider> 96 96 - <DisableFollowingMetricsProvider> 97 97 - <DisableFollowedByMetricsProvider> 98 98 - <DisablePostsMetricsProvider> 99 99 - <HideSimilarAccountsRecommProvider> 100 100 - <HideUnreplyablePostsProvider> 101 101 - <EnableSquareAvatarsProvider> 102 102 - <EnableSquareButtonsProvider> 103 103 - <DisableVerifyEmailReminderProvider> 104 104 - {children} 105 105 - </DisableVerifyEmailReminderProvider> 106 106 - </EnableSquareButtonsProvider> 107 107 - </EnableSquareAvatarsProvider> 108 108 - </HideUnreplyablePostsProvider> 109 109 - </HideSimilarAccountsRecommProvider> 110 110 - </DisablePostsMetricsProvider> 111 111 - </DisableFollowedByMetricsProvider> 112 112 - </DisableFollowingMetricsProvider> 113 113 - </DisableFollowersMetricsProvider> 114 114 - </DisableReplyMetricsProvider> 115 115 - </DisableSavesMetricsProvider> 116 116 - </DisableQuotesMetricsProvider> 117 117 - </DisableRepostsMetricsProvider> 118 118 - </DisableLikesMetricsProvider> 119 119 - </DisableViaRepostNotificationProvider> 120 120 - </HideFeedsPromoTabProvider> 121 121 - </KawaiiProvider> 122 122 - </RepostCarouselProvider> 92 92 + <KawaiiProvider> 93 93 + <HideFeedsPromoTabProvider> 94 94 + <DisableViaRepostNotificationProvider> 95 95 + <DisableLikesMetricsProvider> 96 96 + <DisableRepostsMetricsProvider> 97 97 + <DisableQuotesMetricsProvider> 98 98 + <DisableSavesMetricsProvider> 99 99 + <DisableReplyMetricsProvider> 100 100 + <DisableFollowersMetricsProvider> 101 101 + <DisableFollowingMetricsProvider> 102 102 + <DisableFollowedByMetricsProvider> 103 103 + <DisablePostsMetricsProvider> 104 104 + <HideSimilarAccountsRecommProvider> 105 105 + <HideUnreplyablePostsProvider> 106 106 + <EnableSquareAvatarsProvider> 107 107 + <EnableSquareButtonsProvider> 108 108 + <DisableVerifyEmailReminderProvider> 109 109 + <TranslationServicePreferenceProvider> 110 110 + { 111 111 + children 112 112 + } 113 113 + </TranslationServicePreferenceProvider> 114 114 + </DisableVerifyEmailReminderProvider> 115 115 + </EnableSquareButtonsProvider> 116 116 + </EnableSquareAvatarsProvider> 117 117 + </HideUnreplyablePostsProvider> 118 118 + </HideSimilarAccountsRecommProvider> 119 119 + </DisablePostsMetricsProvider> 120 120 + </DisableFollowedByMetricsProvider> 121 121 + </DisableFollowingMetricsProvider> 122 122 + </DisableFollowersMetricsProvider> 123 123 + </DisableReplyMetricsProvider> 124 124 + </DisableSavesMetricsProvider> 125 125 + </DisableQuotesMetricsProvider> 126 126 + </DisableRepostsMetricsProvider> 127 127 + </DisableLikesMetricsProvider> 128 128 + </DisableViaRepostNotificationProvider> 129 129 + </HideFeedsPromoTabProvider> 130 130 + </KawaiiProvider> 131 131 + </RepostCarouselProvider> 123 132 </TrendingSettingsProvider> 124 133 </SubtitlesProvider> 125 134 </UsedStarterPacksProvider> 126 135 </AutoplayProvider> 127 136 </DisableHapticsProvider> 128 137 </InAppBrowserProvider> 129 129 - </HighQualityImagesProvider> 138 138 + </HighQualityImagesProvider> 130 139 </HiddenPostsProvider> 131 140 </ExternalEmbedsProvider> 132 141 </LargeAltBadgeProvider> 133 133 - </ShowLinkInHandleProvider> 134 134 - </NoDiscoverProvider> 135 135 - </DeerVerificationProvider> 136 136 - </ConstellationInstanceProvider> 142 142 + </ShowLinkInHandleProvider> 143 143 + </NoDiscoverProvider> 144 144 + </DeerVerificationProvider> 145 145 + </ConstellationInstanceProvider> 137 146 </ConstellationProvider> 138 147 </DirectFetchRecordsProvider> 139 139 - </NoAppLabelersProvider> 148 148 + </NoAppLabelersProvider> 140 149 </GoLinksProvider> 141 150 </ExternalShareButtonsProvider> 142 151 </AltTextRequiredProvider>

+57

src/state/preferences/translation-service-preference.tsx

··· 1 1 + import React from 'react' 2 2 + 3 3 + import * as persisted from '#/state/persisted' 4 4 + 5 5 + type StateContext = persisted.Schema['translationServicePreference'] 6 6 + type SetContext = (v: persisted.Schema['translationServicePreference']) => void 7 7 + 8 8 + const stateContext = React.createContext<StateContext>( 9 9 + persisted.defaults.translationServicePreference, 10 10 + ) 11 11 + const setContext = React.createContext<SetContext>( 12 12 + (_: persisted.Schema['translationServicePreference']) => {}, 13 13 + ) 14 14 + 15 15 + export function Provider({children}: React.PropsWithChildren<{}>) { 16 16 + const [state, setState] = React.useState( 17 17 + persisted.get('translationServicePreference'), 18 18 + ) 19 19 + 20 20 + const setStateWrapped = React.useCallback( 21 21 + ( 22 22 + translationServicePreference: persisted.Schema['translationServicePreference'], 23 23 + ) => { 24 24 + setState(translationServicePreference) 25 25 + persisted.write( 26 26 + 'translationServicePreference', 27 27 + translationServicePreference, 28 28 + ) 29 29 + }, 30 30 + [setState], 31 31 + ) 32 32 + 33 33 + React.useEffect(() => { 34 34 + return persisted.onUpdate( 35 35 + 'translationServicePreference', 36 36 + nextTranslationServicePreference => { 37 37 + setState(nextTranslationServicePreference) 38 38 + }, 39 39 + ) 40 40 + }, [setStateWrapped]) 41 41 + 42 42 + return ( 43 43 + <stateContext.Provider value={state}> 44 44 + <setContext.Provider value={setStateWrapped}> 45 45 + {children} 46 46 + </setContext.Provider> 47 47 + </stateContext.Provider> 48 48 + ) 49 49 + } 50 50 + 51 51 + export function useTranslationServicePreference() { 52 52 + return React.useContext(stateContext) 53 53 + } 54 54 + 55 55 + export function useSetTranslationServicePreference() { 56 56 + return React.useContext(setContext) 57 57 + }