[Clipclops] Add screen to view and send clip clops (#3754)

* add new routes with placeholder screens

* add clops list

* add a clop input

* add some better padding to the clops

* some more adjustments

* add rnkc

* implement rnkc

* implement rnkc

* be a little less weird about it

* rename clop stuff

* rename more clop

* one more

* [Clipclops] Temp codegenerated lexicon (#3749)

* add codegenerated lexicon

* replace hailey's types

* use codegen'd types in components

* fix error + throw if fetch failed

* remove bad imports

* update messageslist and messageitem

* import useState

* add clop service URL hook

* add dm service url storage

* use context

* use context for service url (temp)

* remove log

* nits

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

2 files changed, 34 insertions, 0 deletions

diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index 6b5390c29..470bace87 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -51,6 +51,7 @@ import {HandIcon, HashtagIcon} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {NavigationProp} from 'lib/routes/types'
+import {useGate} from 'lib/statsig/statsig'
 import {colors, s} from 'lib/styles'
 import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
 import {SelectableBtn} from 'view/com/util/forms/SelectableBtn'
@@ -61,8 +62,10 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
+import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import * as TextField from '#/components/forms/TextField'
 import {navigate, resetToTab} from '#/Navigation'
 import {Email2FAToggle} from './Email2FAToggle'
 import {ExportCarDialog} from './ExportCarDialog'
@@ -169,6 +172,11 @@ export function SettingsScreen({}: Props) {
   const exportCarControl = useDialogControl()
   const birthdayControl = useDialogControl()
 
+  // TODO: TEMP REMOVE WHEN CLOPS ARE RELEASED
+  const gate = useGate()
+  const {serviceUrl: dmServiceUrl, setServiceUrl: setDmServiceUrl} =
+    useDmServiceUrlStorage()
+
   // const primaryBg = useCustomPalette<ViewStyle>({
   //   light: {backgroundColor: colors.blue0},
   //   dark: {backgroundColor: colors.blue6},
@@ -778,6 +786,22 @@ export function SettingsScreen({}: Props) {
             <Trans>System log</Trans>
           </Text>
         </TouchableOpacity>
+        {gate('dms') && (
+          <TextField.Root>
+            <TextField.Input
+              value={dmServiceUrl}
+              onChangeText={(text: string) => {
+                if (text.endsWith('/')) {
+                  text = text.slice(0, -1)
+                }
+                setDmServiceUrl(text)
+              }}
+              autoCapitalize="none"
+              keyboardType="url"
+              label="🐴"
+            />
+          </TextField.Root>
+        )}
         {__DEV__ ? (
           <>
             <TouchableOpacity
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 8b316faa5..d8deaf696 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -122,6 +122,16 @@ export function BottomBarWeb() {
                   )
                 }}
               </NavItem>
+              <NavItem routeName="Messages" href="/messages">
+                {() => {
+                  return (
+                    <Envelope
+                      size="lg"
+                      style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
+                    />
+                  )
+                }}
+              </NavItem>
               {gate('dms') && (
                 <NavItem routeName="Messages" href="/messages">
                   {({isActive}) => {