Add testnet warning (#880)

* Add testnet warning

* Add watermarks to posts

* Call the test environment the Sandbox

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -62,7 +62,9 @@ export const FeedsTabBar = observer(
               />
             </TouchableOpacity>
           </View>
-          <Text style={[brandBlue, s.bold, styles.title]}>Bluesky</Text>
+          <Text style={[brandBlue, s.bold, styles.title]}>
+            {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
+          </Text>
           <View style={[pal.view]}>
             <Link
               href="/settings/saved-feeds"

src/view/com/post-thread/PostThreadItem.tsx

@@ -25,6 +25,7 @@ import {PostCtrls} from '../util/post-ctrls/PostCtrls'
 import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {ImageHider} from '../util/moderation/ImageHider'
+import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
@@ -193,6 +194,7 @@ export const PostThreadItem = observer(function PostThreadItem({
         moderation={item.moderation.thread}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}>
+        <PostSandboxWarning />
         <View style={styles.layout}>
           <View style={styles.layoutAvi}>
             <Link
@@ -381,6 +383,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               ]}
             />
           )}
+          <PostSandboxWarning />
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle} asAnchor>

src/view/com/posts/FeedItem.tsx

@@ -19,6 +19,7 @@ import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {ImageHider} from '../util/moderation/ImageHider'
 import {RichText} from '../util/text/RichText'
+import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
@@ -245,6 +246,7 @@ export const FeedItem = observer(function ({
           </Text>
         </Link>
       )}
+      <PostSandboxWarning />
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
           <Link href={authorHref} title={item.post.author.handle} asAnchor>

src/view/com/util/PostSandboxWarning.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from './text/Text'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+
+export function PostSandboxWarning() {
+  const store = useStores()
+  const pal = usePalette('default')
+  if (store.session.isSandbox) {
+    return (
+      <View style={styles.container}>
+        <Text type="title-2xl" style={[pal.text, styles.text]}>
+          SANDBOX
+        </Text>
+      </View>
+    )
+  }
+  return null
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 6,
+    right: 10,
+  },
+  text: {
+    fontWeight: 'bold',
+    opacity: 0.07,
+  },
+})

src/view/shell/desktop/RightNav.tsx

@@ -15,15 +15,24 @@ import {formatCount} from 'view/com/util/numeric/format'
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
+  const palError = usePalette('error')
 
   return (
     <View style={[styles.rightNav, pal.view]}>
       {store.session.hasSession && <DesktopSearch />}
       <View style={styles.message}>
-        <Text type="md" style={[pal.textLight, styles.messageLine]}>
-          Welcome to Bluesky! This is a beta application that's still in
-          development.
-        </Text>
+        {store.session.isSandbox ? (
+          <View style={[palError.view, styles.messageLine, s.p10]}>
+            <Text type="md" style={[palError.text, s.bold]}>
+              SANDBOX. Posts and accounts are not permanent.
+            </Text>
+          </View>
+        ) : (
+          <Text type="md" style={[pal.textLight, styles.messageLine]}>
+            Welcome to Bluesky! This is a beta application that's still in
+            development.
+          </Text>
+        )}
         <View style={[s.flexRow]}>
           <TextLink
             type="md"