Add post appearance type toggle from feed, add share home/all/local feeds

src/features/community/MoreActions.tsx

@@ -1,4 +1,4 @@
-import { IonActionSheet, IonButton } from "@ionic/react";
+import { IonButton, useIonActionSheet } from "@ionic/react";
 import {
   createOutline,
   heartDislikeOutline,
@@ -10,49 +10,30 @@ import {
   eyeOffOutline,
   shareOutline,
 } from "ionicons/icons";
-import { useState } from "react";
 import useHidePosts from "../feed/useHidePosts";
 import useCommunityActions from "./useCommunityActions";
 import { Community, CommunityView } from "lemmy-js-client";
 import { useAppSelector } from "../../store";
 import { compact } from "lodash";
 import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
+import { buildTogglePostAppearanceButton } from "../feed/SpecialFeedMoreActions";
 
 interface MoreActionsProps {
   community: CommunityView | undefined;
 }
 
 export default function MoreActions({ community }: MoreActionsProps) {
-  const [open, setOpen] = useState(false);
+  if (!community) return buildButtonJsx();
 
-  return (
-    <>
-      <IonButton disabled={!community} onClick={() => setOpen(true)}>
-        <HeaderEllipsisIcon slot="icon-only" />
-      </IonButton>
-
-      {community && (
-        <MoreActionsActionSheet
-          community={community?.community}
-          open={open}
-          setOpen={setOpen}
-        />
-      )}
-    </>
-  );
+  return <MoreActionsWithCommunity community={community.community} />;
 }
 
 interface MoreActionsActionSheetProps {
   community: Community;
-  open: boolean;
-  setOpen: (open: boolean) => void;
 }
 
-function MoreActionsActionSheet({
-  community,
-  open,
-  setOpen,
-}: MoreActionsActionSheetProps) {
+function MoreActionsWithCommunity({ community }: MoreActionsActionSheetProps) {
+  const [presentActionSheet] = useIonActionSheet();
   const {
     isSubscribed,
     isBlocked,
@@ -70,11 +51,10 @@ function MoreActionsActionSheet({
     (state) => state.settings.general.posts.showHiddenInCommunities,
   );
 
-  return (
-    <IonActionSheet
-      cssClass="left-align-buttons"
-      isOpen={open}
-      buttons={compact([
+  function present() {
+    presentActionSheet({
+      cssClass: "left-align-buttons",
+      buttons: compact([
         {
           text: "Submit Post",
           cssClass: "detail",
@@ -111,6 +91,7 @@ function MoreActionsActionSheet({
             sidebar();
           },
         },
+        buildTogglePostAppearanceButton(),
         {
           text: "Share",
           icon: shareOutline,
@@ -130,8 +111,17 @@ function MoreActionsActionSheet({
           text: "Cancel",
           role: "cancel",
         },
-      ])}
-      onDidDismiss={() => setOpen(false)}
-    />
+      ]),
+    });
+  }
+
+  return buildButtonJsx(present);
+}
+
+function buildButtonJsx(onClick?: () => void) {
+  return (
+    <IonButton disabled={!onClick} onClick={onClick}>
+      <HeaderEllipsisIcon slot="icon-only" />
+    </IonButton>
   );
 }

src/features/feed/SpecialFeedMoreActions.tsx

@@ -1,27 +1,60 @@
 import { IonButton, useIonActionSheet } from "@ionic/react";
-import { eyeOffOutline } from "ionicons/icons";
+import {
+  eyeOffOutline,
+  imageOutline,
+  listOutline,
+  shareOutline,
+} from "ionicons/icons";
 import useHidePosts from "./useHidePosts";
 import HeaderEllipsisIcon from "../shared/HeaderEllipsisIcon";
+import { Share } from "@capacitor/share";
+import { ListingType } from "lemmy-js-client";
+import store from "../../store";
+import { urlSelector } from "../auth/authSelectors";
+import {
+  OPostAppearanceType,
+  setPostAppearance,
+} from "../settings/settingsSlice";
 
-export default function SpecialFeedMoreActions() {
-  const [presentActionSheet] = useIonActionSheet();
+interface SpecialFeedMoreActionsProps {
+  type: ListingType;
+}
 
+export default function SpecialFeedMoreActions({
+  type,
+}: SpecialFeedMoreActionsProps) {
+  const [presentActionSheet] = useIonActionSheet();
   const hidePosts = useHidePosts();
 
   function present() {
-    presentActionSheet([
-      {
-        text: "Hide Read Posts",
-        icon: eyeOffOutline,
-        handler: () => {
-          hidePosts();
+    presentActionSheet({
+      cssClass: "left-align-buttons",
+      buttons: [
+        {
+          text: "Hide Read Posts",
+          icon: eyeOffOutline,
+          handler: () => {
+            hidePosts();
+          },
         },
-      },
-      {
-        text: "Cancel",
-        role: "cancel",
-      },
-    ]);
+        buildTogglePostAppearanceButton(),
+        {
+          text: "Share",
+          icon: shareOutline,
+          handler: () => {
+            const url = urlSelector(store.getState());
+
+            Share.share({
+              url: `https://${url}?dataType=Post&listingType=${type}`,
+            });
+          },
+        },
+        {
+          text: "Cancel",
+          role: "cancel",
+        },
+      ],
+    });
   }
 
   return (
@@ -30,3 +63,26 @@ export default function SpecialFeedMoreActions() {
     </IonButton>
   );
 }
+
+export function buildTogglePostAppearanceButton() {
+  const postAppearanceType = store.getState().settings.appearance.posts.type;
+
+  switch (postAppearanceType) {
+    case OPostAppearanceType.Compact:
+      return {
+        text: "Large Posts",
+        icon: imageOutline,
+        handler: () => {
+          store.dispatch(setPostAppearance(OPostAppearanceType.Large));
+        },
+      };
+    case OPostAppearanceType.Large:
+      return {
+        text: "Compact Posts",
+        icon: listOutline,
+        handler: () => {
+          store.dispatch(setPostAppearance(OPostAppearanceType.Compact));
+        },
+      };
+  }
+}

src/features/settings/appearance/posts/PostSize.tsx

@@ -1,6 +1,7 @@
 import { OPostAppearanceType, setPostAppearance } from "../../settingsSlice";
 import { useAppSelector } from "../../../../store";
 import SettingSelector from "../../shared/SettingSelector";
+import { imageOutline, listOutline } from "ionicons/icons";
 
 export default function PostSize() {
   const postsAppearanceType = useAppSelector(
@@ -13,6 +14,10 @@ export default function PostSize() {
       selected={postsAppearanceType}
       setSelected={setPostAppearance}
       options={OPostAppearanceType}
+      optionIcons={{
+        [OPostAppearanceType.Compact]: listOutline,
+        [OPostAppearanceType.Large]: imageOutline,
+      }}
     />
   );
 }

src/routes/pages/shared/SpecialFeedPage.tsx

@@ -109,7 +109,7 @@ export default function SpecialFeedPage({ type }: SpecialFeedProps) {
                 <IonButtons slot="end">
                   {type === "ModeratorView" && <ModActions type={type} />}
                   <PostSort sort={sort} setSort={setSort} />
-                  <SpecialFeedMoreActions />
+                  <SpecialFeedMoreActions type={type} />
                 </IonButtons>
               </TitleSearch>
             </IonToolbar>