8 files changed, 70 insertions, 62 deletions
diff --git a/src/lib/hooks/usePermissions.ts b/src/lib/hooks/usePermissions.ts
index 36a92ac32..19a420d9e 100644
--- a/src/lib/hooks/usePermissions.ts
+++ b/src/lib/hooks/usePermissions.ts
@@ -2,6 +2,7 @@ import {Alert} from 'react-native'
 import {Camera} from 'expo-camera'
 import * as MediaLibrary from 'expo-media-library'
 import {Linking} from 'react-native'
+import {isWeb} from 'platform/detection'
 
 const openSettings = () => {
   Linking.openURL('app-settings:')
@@ -24,6 +25,12 @@ const openPermissionAlert = (perm: string) => {
 export function usePhotoLibraryPermission() {
   const [mediaLibraryPermissions] = MediaLibrary.usePermissions()
   const requestPhotoAccessIfNeeded = async () => {
+    // On the, we use <input type="file"> to produce a filepicker
+    // This does not need any permission granting.
+    if (isWeb) {
+      return true
+    }
+
     if (mediaLibraryPermissions?.status === 'granted') {
       return true
     } else {
diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx
index fd233f99c..300c13b0d 100644
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@@ -420,7 +420,7 @@ export function RepostIcon({
   size = 24,
   strokeWidth = 1.5,
 }: {
-  style?: StyleProp<ViewStyle>
+  style?: StyleProp<TextStyle>
   size?: string | number
   strokeWidth: number
 }) {
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 43675074e..158c37971 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -111,6 +111,18 @@ export async function cropAndCompressFlow(
 // helpers
 // =
 
+/**
+ * Opens the select file dialog in the browser.
+ * NOTE:
+ * If in the future someone updates this method to use:
+ * https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ * Check that the `showOpenFilePicker` API does not require any permissions
+ * granted to use. As of this writing, it does not, but that could change
+ * in the future. If the user does need to go through a permissions granting
+ * flow, then checkout the usePhotoLibraryPermission() hook in
+ *   src/lib/hooks/usePermissions.ts
+ * so that it gets appropriately updated.
+ */
 function selectFile(opts: PickerOpts): Promise<PickedFile> {
   return new Promise((resolve, reject) => {
     var input = document.createElement('input')
diff --git a/src/view/com/composer/char-progress/CharProgress.web.tsx b/src/view/com/composer/char-progress/CharProgress.web.tsx
deleted file mode 100644
index d32d7a72c..000000000
--- a/src/view/com/composer/char-progress/CharProgress.web.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {Text} from '../../util/text/Text'
-import {s} from 'lib/styles'
-
-const MAX_TEXT_LENGTH = 256
-const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
-
-export function CharProgress({count}: {count: number}) {
-  const progressColor = count > DANGER_TEXT_LENGTH ? '#e60000' : undefined
-  return (
-    <>
-      <Text style={[s.mr10, {color: progressColor}]}>
-        {MAX_TEXT_LENGTH - count}
-      </Text>
-      <View>
-        {
-          null /* TODO count > DANGER_TEXT_LENGTH ? (
-          <ProgressPie
-            size={30}
-            borderWidth={4}
-            borderColor={progressColor}
-            color={progressColor}
-            progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)}
-          />
-        ) : (
-          <ProgressCircle
-            size={30}
-            borderWidth={1}
-            borderColor={colors.gray2}
-            color={progressColor}
-            progress={count / MAX_TEXT_LENGTH}
-          />
-        )*/
-        }
-      </View>
-    </>
-  )
-}
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index a79d2ba06..f12839fba 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -11,6 +11,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useStores} from 'state/index'
 import * as models from 'state/models/ui/shell'
 import {colors} from 'lib/styles'
+import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
 
 interface Img {
   uri: string
@@ -59,25 +60,38 @@ function LightboxInner({imgs, onClose}: {imgs: Img[]; onClose: () => void}) {
   }
 
   return (
-    <TouchableWithoutFeedback onPress={onClose}>
-      <View style={styles.mask}>
-        <Image source={imgs[index]} style={styles.image} />
-        {canGoLeft && (
-          <TouchableOpacity
-            onPress={onPressLeft}
-            style={[styles.btn, styles.leftBtn]}>
-            <FontAwesomeIcon icon="angle-left" style={styles.icon} size={40} />
-          </TouchableOpacity>
-        )}
-        {canGoRight && (
-          <TouchableOpacity
-            onPress={onPressRight}
-            style={[styles.btn, styles.rightBtn]}>
-            <FontAwesomeIcon icon="angle-right" style={styles.icon} size={40} />
-          </TouchableOpacity>
-        )}
+    <View style={styles.mask}>
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.imageCenterer}>
+          <Image source={imgs[index]} style={styles.image} />
+          {canGoLeft && (
+            <TouchableOpacity
+              onPress={onPressLeft}
+              style={[styles.btn, styles.leftBtn]}>
+              <FontAwesomeIcon
+                icon="angle-left"
+                style={styles.icon}
+                size={40}
+              />
+            </TouchableOpacity>
+          )}
+          {canGoRight && (
+            <TouchableOpacity
+              onPress={onPressRight}
+              style={[styles.btn, styles.rightBtn]}>
+              <FontAwesomeIcon
+                icon="angle-right"
+                style={styles.icon}
+                size={40}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+      </TouchableWithoutFeedback>
+      <View style={styles.closeBtn}>
+        <ImageDefaultHeader onRequestClose={onClose} />
       </View>
-    </TouchableWithoutFeedback>
+    </View>
   )
 }
 
@@ -89,6 +103,9 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     backgroundColor: '#000c',
+  },
+  imageCenterer: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -100,6 +117,11 @@ const styles = StyleSheet.create({
   icon: {
     color: colors.white,
   },
+  closeBtn: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+  },
   btn: {
     position: 'absolute',
     backgroundColor: '#000',
diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx
index 6ab15317b..b4669a046 100644
--- a/src/view/com/modals/Repost.tsx
+++ b/src/view/com/modals/Repost.tsx
@@ -29,7 +29,7 @@ export function Component({
     <View style={[s.flex1, pal.view, styles.container]}>
       <View style={s.pb20}>
         <TouchableOpacity style={[styles.actionBtn]} onPress={onRepost}>
-          <RepostIcon strokeWidth={2} size={24} />
+          <RepostIcon strokeWidth={2} size={24} style={s.blue3} />
           <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}>
             {!isReposted ? 'Repost' : 'Undo repost'}
           </Text>
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index c165c2a15..e3994bb23 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -9,12 +9,14 @@ export const Composer = observer(
   ({
     active,
     replyTo,
+    quote,
     onPost,
     onClose,
   }: {
     active: boolean
     winHeight: number
     replyTo?: ComposerOpts['replyTo']
+    quote: ComposerOpts['quote']
     onPost?: ComposerOpts['onPost']
     onClose: () => void
   }) => {
@@ -30,7 +32,12 @@ export const Composer = observer(
     return (
       <View style={styles.mask}>
         <View style={[styles.container, pal.view]}>
-          <ComposePost replyTo={replyTo} onPost={onPost} onClose={onClose} />
+          <ComposePost
+            replyTo={replyTo}
+            quote={quote}
+            onPost={onPost}
+            onClose={onClose}
+          />
         </View>
       </View>
     )
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 54aba48f0..96a120642 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -7,9 +7,7 @@ import {DesktopRightNav} from './desktop/RightNav'
 import {ErrorBoundary} from '../com/util/ErrorBoundary'
 import {Lightbox} from '../com/lightbox/Lightbox'
 import {ModalsContainer} from '../com/modals/Modal'
-import {Text} from 'view/com/util/text/Text'
 import {Composer} from './Composer.web'
-import {usePalette} from 'lib/hooks/usePalette'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {s, colors} from 'lib/styles'
 import {RoutesContainer, FlatNavigator} from '../../Navigation'
@@ -33,6 +31,7 @@ const ShellInner = observer(() => {
         onClose={() => store.shell.closeComposer()}
         winHeight={0}
         replyTo={store.shell.composerOpts?.replyTo}
+        quote={store.shell.composerOpts?.quote}
         onPost={store.shell.composerOpts?.onPost}
       />
       <ModalsContainer />