73-post-embeds (#253)

* update api to 0.1.3

* add repost modal with reposting functionality

* add quote post UI

* allow creation and view of quote posts

* Validate the post record before rendering a quote post

* Use createdAt in quote posts for now

* add web modal support

* Tune the quote post rendering

* Make did and declarationCid optional in postmeta

* Make did and declarationCid optional in postmeta

* dont allow image or link preview if quote post

* Handle no-text quote posts

* Tune the repost modal

* Tweak composer post text

* Fix lint

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/modals/Modal.tsx

@@ -9,6 +9,7 @@ import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
+import * as RepostModal from './Repost'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -61,6 +62,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'delete-account') {
     snapPoints = DeleteAccountModal.snapPoints
     element = <DeleteAccountModal.Component />
+  } else if (activeModal?.name === 'repost') {
+    snapPoints = RepostModal.snapPoints
+    element = <RepostModal.Component {...activeModal} />
   } else {
     element = <View />
   }

src/view/com/modals/Modal.web.tsx

@@ -10,6 +10,7 @@ import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as ReportAccountModal from './ReportAccount'
+import * as RepostModal from './Repost'
 import * as CropImageModal from './crop-image/CropImage.web'
 
 export const ModalsContainer = observer(function ModalsContainer() {
@@ -59,6 +60,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <ReportAccountModal.Component {...modal} />
   } else if (modal.name === 'crop-image') {
     element = <CropImageModal.Component {...modal} />
+  } else if (modal.name === 'repost') {
+    element = <RepostModal.Component {...modal} />
   } else {
     return null
   }

src/view/com/modals/Repost.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {useStores} from 'state/index'
+import {s, colors, gradients} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RepostIcon} from 'lib/icons'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+
+export const snapPoints = [250]
+
+export function Component({
+  onRepost,
+  onQuote,
+  isReposted,
+}: {
+  onRepost: () => void
+  onQuote: () => void
+  isReposted: boolean
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const onPress = async () => {
+    store.shell.closeModal()
+  }
+
+  return (
+    <View style={[s.flex1, pal.view, styles.container]}>
+      <View style={s.pb20}>
+        <TouchableOpacity style={[styles.actionBtn]} onPress={onRepost}>
+          <RepostIcon strokeWidth={2} size={24} />
+          <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}>
+            {!isReposted ? 'Repost' : 'Undo repost'}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.actionBtn]} onPress={onQuote}>
+          <FontAwesomeIcon icon="quote-left" size={24} style={s.blue3} />
+          <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}>
+            Quote Post
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <TouchableOpacity onPress={onPress}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[styles.btn]}>
+          <Text style={[s.white, s.bold, s.f18]}>Cancel</Text>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 30,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    fontSize: 17,
+    paddingHorizontal: 22,
+    marginBottom: 10,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+  actionBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  actionBtnLabel: {
+    paddingHorizontal: 14,
+    paddingVertical: 16,
+  },
+})