Integrate native share sheets

src/camera/CameraShareModal.tsx

@@ -2,7 +2,7 @@ import { absolutePathForCamera } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import CameraOGTile from './CameraOGTile';
-import { Camera } from '.';
+import { Camera, formatCameraText } from '.';
 import { shareTextForCamera } from './meta';
 
 export default function CameraShareModal({
@@ -16,6 +16,7 @@ export default function CameraShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForCamera(camera)}
+      navigatorTitle={formatCameraText(camera)}
       socialText={shareTextForCamera(camera, photos)}
     >
       <CameraOGTile {...{ camera, photos, count, dateRange }} />

src/film/FilmShareModal.tsx

@@ -2,7 +2,7 @@ import { absolutePathForFilm } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import FilmOGTile from './FilmOGTile';
-import { shareTextForFilm } from '.';
+import { labelForFilm, shareTextForFilm } from '.';
 
 export default function FilmShareModal({
   film,
@@ -15,6 +15,7 @@ export default function FilmShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForFilm(film)}
+      navigatorTitle={labelForFilm(film).large}
       socialText={shareTextForFilm(film)}
     >
       <FilmOGTile {...{ film, photos, count, dateRange }} />

src/focal/FocalLengthShareModal.tsx

@@ -2,7 +2,7 @@ import { absolutePathForFocalLength } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import FocalLengthOGTile from './FocalLengthOGTile';
-import { shareTextFocalLength } from '.';
+import { formatFocalLengthSafe, shareTextFocalLength } from '.';
 
 export default function FocalLengthShareModal({
   focal,
@@ -15,6 +15,7 @@ export default function FocalLengthShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForFocalLength(focal)}
+      navigatorTitle={formatFocalLengthSafe(focal)}
       socialText={shareTextFocalLength(focal)}
     >
       <FocalLengthOGTile {...{ focal, photos, count, dateRange }} />

src/focal/index.ts

@@ -19,10 +19,13 @@ export const getFocalLengthFromString = (focalString?: string) => {
   return focal ? parseInt(focal, 10) : 0;
 };
 
-export const formatFocalLength = (focal?: number) => focal ?
-  `${focal}mm`
+export const formatFocalLength = (focal?: number) => focal
+  ? formatFocalLengthSafe(focal)
   : undefined;
 
+export const formatFocalLengthSafe = (focal = 0) =>
+  `${focal}mm`;
+
 export const titleForFocalLength = (
   focal: number,
   photos: Photo[],

src/lens/LensShareModal.tsx

@@ -1,7 +1,7 @@
 import { absolutePathForLens } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
-import { Lens } from '.';
+import { formatLensText, Lens } from '.';
 import { shareTextForLens } from './meta';
 import LensOGTile from './LensOGTile';
 
@@ -16,6 +16,7 @@ export default function LensShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForLens(lens)}
+      navigatorTitle={formatLensText(lens)}
       socialText={shareTextForLens(lens, photos)}
     >
       <LensOGTile {...{ lens, photos, count, dateRange }} />

src/photo/PhotoShareModal.tsx

@@ -1,6 +1,6 @@
 import PhotoOGTile from '@/photo/PhotoOGTile';
 import { absolutePathForPhoto } from '@/app/paths';
-import { Photo } from '.';
+import { Photo, titleForPhoto } from '.';
 import { PhotoSetCategory } from '../category';
 import ShareModal from '@/share/ShareModal';
 
@@ -10,6 +10,7 @@ export default function PhotoShareModal(
   return (
     <ShareModal
       pathShare={absolutePathForPhoto(props)}
+      navigatorTitle={titleForPhoto(props.photo)}
       socialText="Check out this photo"
     >
       <PhotoOGTile {...props} />

src/recipe/PhotoRecipeOverlayButton.tsx

@@ -30,7 +30,7 @@ export default function PhotoRecipeOverlayButton({
           'rounded-md shadow-none',
           'border-[1.5px] border-medium',
           'p-0 inline-flex items-center justify-center',
-          'size-[17px] md:size-5',
+          'size-[17px] sm:size-5',
           'hover:bg-extra-dim active:bg-dim',
           className,
         )}>

src/recipe/RecipeShareModal.tsx

@@ -1,7 +1,7 @@
 import { absolutePathForRecipe } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
-import { shareTextForRecipe } from '.';
+import { formatRecipe, shareTextForRecipe } from '.';
 import RecipeOGTile from './RecipeOGTile';
 
 export default function RecipeShareModal({
@@ -15,6 +15,7 @@ export default function RecipeShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForRecipe(recipe)}
+      navigatorTitle={formatRecipe(recipe)}
       socialText={shareTextForRecipe(recipe)}
     >
       <RecipeOGTile {...{ recipe, photos, count, dateRange }} />

src/share/ShareModal.tsx

@@ -12,16 +12,19 @@ import { SHOW_SOCIAL } from '@/app/config';
 import { generateXPostText } from '@/utility/social';
 import { useAppState } from '@/state/AppState';
 import useOnPathChange from '@/utility/useOnPathChange';
+import { IoArrowUp } from 'react-icons/io5';
 
 export default function ShareModal({
   title,
   pathShare,
   socialText,
+  navigatorTitle,
   children,
 }: {
   title?: string
   pathShare: string
   socialText: string
+  navigatorTitle: string
   children: ReactNode
 }) {
   const {
@@ -41,7 +44,7 @@ export default function ShareModal({
   ) =>
     <div
       className={clsx(
-        'py-3 px-3.5',
+        'py-3 px-3',
         embedded ? 'border-l' : 'border rounded-md',
         'border-gray-200 bg-gray-50 active:bg-gray-100',
         // eslint-disable-next-line max-len
@@ -76,7 +79,7 @@ export default function ShareModal({
             'flex items-center justify-stretch',
             'border border-gray-200 dark:border-gray-800',
           )}>
-            <div className="truncate p-2 w-full">
+            <div className="truncate p-2 w-full [direction:rtl] text-left">
               {shortenUrl(pathShare)}
             </div>
             {renderIcon(
@@ -88,6 +91,15 @@ export default function ShareModal({
               true,
             )}
           </div>
+          {typeof navigator !== 'undefined' && navigator.share &&
+            renderIcon(
+              <IoArrowUp size={18} />,
+              () => navigator.share({
+                title: navigatorTitle,
+                url: pathShare,
+              })
+                .catch(() => console.log('Share canceled')),
+            )}
           {SHOW_SOCIAL &&
             renderIcon(
               <PiXLogo size={18} />,

src/tag/TagShareModal.tsx

@@ -2,7 +2,7 @@ import { absolutePathForTag } from '@/app/paths';
 import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import TagOGTile from './TagOGTile';
-import { shareTextForTag } from '.';
+import { formatTag, shareTextForTag } from '.';
 
 export default function TagShareModal({
   tag,
@@ -15,6 +15,7 @@ export default function TagShareModal({
   return (
     <ShareModal
       pathShare={absolutePathForTag(tag)}
+      navigatorTitle={formatTag(tag)}
       socialText={shareTextForTag(tag)}
     >
       <TagOGTile {...{ tag, photos, count, dateRange }} />