BottomSheet: first attempt for animation

src/timelines/Home.tsx

@@ -34,16 +34,25 @@ import Tab from "../material/Tab";
 import { Create as CreateTootIcon } from "@suid/icons-material";
 import { useTimeline } from "../masto/timelines";
 import { makeEventListener } from "@solid-primitives/event-listener";
-import BottomSheet from "../material/BottomSheet";
+import BottomSheet, {
+  HERO as BOTTOM_SHEET_HERO,
+} from "../material/BottomSheet";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import { vibrate } from "../platform/hardware";
 import PullDownToRefresh from "./PullDownToRefresh";
+import { HeroSourceProvider, type HeroSource } from "../platform/anim";
+import { useNavigate } from "@solidjs/router";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public" | "trends";
   prefetch?: boolean;
+
+  openFullScreenToot: (
+    toot: mastodon.v1.Status,
+    srcElement?: HTMLElement,
+  ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
   const [
@@ -125,18 +134,22 @@ const TimelinePanel: Component<{
       >
         <For each={timeline}>
           {(item, index) => {
+            let element: HTMLElement | undefined;
             return (
               <TootThread
+                ref={element}
                 status={item}
                 onBoost={(...args) => onBoost(index(), ...args)}
                 onBookmark={(...args) => onBookmark(index(), ...args)}
                 client={props.client}
                 expanded={item.id === expandedThreadId() ? 1 : 0}
-                onExpandChange={() =>
-                  setExpandedThreadId(
-                    item.id !== expandedThreadId() ? item.id : undefined,
-                  )
-                }
+                onExpandChange={(x) => {
+                  if (item.id !== expandedThreadId()) {
+                    setExpandedThreadId(item.id);
+                  } else if (x === 2){
+                    props.openFullScreenToot(item, element);
+                  }
+                }}
               />
             );
           }}
@@ -185,7 +198,9 @@ const Home: ParentComponent = (props) => {
   const sessions = useSessions();
   const client = () => sessions()[0].client;
   const [profile] = useAcctProfile(client);
+  const navigate = useNavigate();
 
+  const [heroSrc, setHeroSrc] = createSignal<HeroSource>({});
   const [panelOffset, setPanelOffset] = createSignal(0);
   const prefetching = () => !settings$().prefetchTootsDisabled;
   const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
@@ -259,6 +274,22 @@ const Home: ParentComponent = (props) => {
     }
   };
 
+  const openFullScreenToot = (
+    toot: mastodon.v1.Status,
+    srcElement?: HTMLElement,
+  ) => {
+    const p = sessions()[0];
+    const inf = p.account.inf ?? profile();
+    if (!inf) {
+      console.warn('no account info?')
+      return;
+    }
+    const rect = srcElement?.getBoundingClientRect();
+    setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
+    const acct = `${inf.username}@${p.account.site}`;
+    navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
+  };
+
   css`
     .tab-panel {
       overflow: visible auto;
@@ -344,6 +375,7 @@ const Home: ParentComponent = (props) => {
                   client={client()}
                   name="home"
                   prefetch={prefetching()}
+                  openFullScreenToot={openFullScreenToot}
                 />
               </div>
             </div>
@@ -353,6 +385,7 @@ const Home: ParentComponent = (props) => {
                   client={client()}
                   name="trends"
                   prefetch={prefetching()}
+                  openFullScreenToot={openFullScreenToot}
                 />
               </div>
             </div>
@@ -362,13 +395,16 @@ const Home: ParentComponent = (props) => {
                   client={client()}
                   name="public"
                   prefetch={prefetching()}
+                  openFullScreenToot={openFullScreenToot}
                 />
               </div>
             </div>
             <div></div>
           </div>
         </TimeSourceProvider>
-        <BottomSheet open={!!child()}>{child()}</BottomSheet>
+        <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
+          <BottomSheet open={!!child()}>{child()}</BottomSheet>
+        </HeroSourceProvider>
       </Scaffold>
     </>
   );