From d1105cbd4889f5309d448fde28749b897fdc0104 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 15:11:57 -0500
Subject: [PATCH 01/20] extend dialog to support closing on overlay click when
 controlled

---
 src/ui/Dialog.tsx | 78 +++++++++++++++++++++++++----------------------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/ui/Dialog.tsx b/src/ui/Dialog.tsx
index 3176ff7..e312ef8 100644
--- a/src/ui/Dialog.tsx
+++ b/src/ui/Dialog.tsx
@@ -15,6 +15,7 @@ export type Presets = 'slide-up' | 'scale' | 'subtle';
 
 type DialogContextValue = {
   isOpen: boolean;
+  onOpenChange: (updates: boolean) => void;
   preset: Presets;
 };
 
@@ -24,8 +25,7 @@ const DialogContext = createContext<DialogContextValue>(
 
 const InnerOverlay = styled(animated.div, {
   base: {
-    background: 'rgba(255, 255, 255, 0.68)',
-    backdropFilter: 'blur(0.125rem)',
+    background: 'transparent',
     position: 'fixed',
     inset: 0,
     zIndex: 2,
@@ -37,7 +37,7 @@ export type OverlayProps = HTMLStyledProps<'div'>;
 export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
   function Overlay(props, ref) {
     const { children, ...overlayProps } = props;
-    const { isOpen } = useContext(DialogContext);
+    const { isOpen, onOpenChange } = useContext(DialogContext);
     const transitions = useTransition(isOpen, {
       from: { opacity: 0 },
       enter: { opacity: 1 },
@@ -48,7 +48,11 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
     return transitions((styles, shouldRender) => {
       if (shouldRender) {
         return (
-          <RxDialog.Overlay forceMount asChild>
+          <RxDialog.Overlay
+            asChild
+            forceMount
+            onClick={() => onOpenChange(false)}
+          >
             <InnerOverlay {...overlayProps} ref={ref} style={styles}>
               {children}
             </InnerOverlay>
@@ -88,17 +92,17 @@ const contentStyle = cva({
   },
 });
 
+const presetConfig: SpringConfig = {
+  ...config.default,
+  clamp: true,
+  mass: 1,
+};
+
 const getPresetTransitionConfig = (
   preset: Presets,
 ): Required<
   Pick<UseTransitionProps<boolean>, 'from' | 'enter' | 'leave' | 'config'>
 > => {
-  const presetConfig: SpringConfig = {
-    ...config.default,
-    clamp: true,
-    mass: 1,
-  };
-
   switch (preset) {
     case 'slide-up': {
       return {
@@ -118,7 +122,10 @@ const getPresetTransitionConfig = (
           opacity: 0.84,
           transform: 'translate3d(-50%, -49%, 0) scale(0.88)',
         },
-        enter: { opacity: 1, transform: 'translate3d(-50%, -50%, 0) scale(1)' },
+        enter: {
+          opacity: 1,
+          transform: 'translate3d(-50%, -50%, 0) scale(1)',
+        },
         leave: {
           opacity: 0,
           transform: 'translate3d(-50%, -47%, 0) scale(0.92)',
@@ -162,33 +169,31 @@ export const Content = forwardRef<HTMLDivElement, DialogContentProps>(
       expires: true,
     });
 
-    return (
-      <RxDialog.Portal forceMount>
-        {transitions((styles, shouldRender) => {
-          if (shouldRender) {
-            return (
-              <RxDialog.Content
-                ref={ref}
-                aria-describedby={undefined}
-                asChild
-                forceMount
-                onOpenAutoFocus={onOpenAutoFocus}
-              >
-                <InnerContent {...contentProps} style={styles}>
-                  {children}
-                </InnerContent>
-              </RxDialog.Content>
-            );
-          }
-
-          return null;
-        })}
-      </RxDialog.Portal>
-    );
+    return transitions((styles, shouldRender) => {
+      if (shouldRender) {
+        return (
+          <RxDialog.Content
+            ref={ref}
+            aria-describedby={undefined}
+            asChild
+            forceMount
+            onOpenAutoFocus={onOpenAutoFocus}
+          >
+            <InnerContent {...contentProps} style={styles}>
+              {children}
+            </InnerContent>
+          </RxDialog.Content>
+        );
+      }
+
+      return null;
+    });
   },
 );
 
 export const Title = styled(RxDialog.Title);
+export const Trigger = styled(RxDialog.Trigger);
+export const Portal = styled(RxDialog.Portal);
 
 export type DialogRootProps = Pick<
   RxDialog.DialogProps,
@@ -206,7 +211,6 @@ export const Root = (props: DialogRootProps) => {
       if (!changes) {
         onClose();
       }
-
       if (onOpenChange) {
         onOpenChange(changes);
       }
@@ -215,7 +219,9 @@ export const Root = (props: DialogRootProps) => {
   );
 
   return (
-    <DialogContext.Provider value={{ isOpen, preset }}>
+    <DialogContext.Provider
+      value={{ isOpen, preset, onOpenChange: handleOpenChange }}
+    >
       <RxDialog.Root modal open={isOpen} onOpenChange={handleOpenChange}>
         {children}
       </RxDialog.Root>

From 49813445fdec8d57f743e227fcc19cfd23b58f7b Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 15:22:07 -0500
Subject: [PATCH 02/20] scale content container and expand item when entering
 forground state

---
 src/App.tsx                                  | 70 +++++++++++++------
 src/feat/Projects/components/ProjectItem.tsx | 73 +++++++++++---------
 2 files changed, 89 insertions(+), 54 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8045d68..6b5e48c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import { animated, useSpring } from '@react-spring/web';
 import { usePaginatedQuery } from 'convex/react';
 import { type PropsWithChildren } from 'react';
 import { Box, Stack } from 'styled-system/jsx';
@@ -40,11 +41,29 @@ const LoadMore = (props: PropsWithChildren & { onClick: () => void }) => (
   </Button>
 );
 
+const ContentContainer = (
+  props: PropsWithChildren & { state: 'foreground' | 'background' },
+) => {
+  const { children, state } = props;
+  const styles = useSpring({
+    from: { opacity: 1, scale: 1 },
+    to:
+      state === 'background'
+        ? { opacity: 0.5, scale: 0.99 }
+        : { opacity: 1, scale: 1 },
+  });
+  return (
+    <animated.div style={{ ...styles, width: '100%', height: '100%' }}>
+      {children}
+    </animated.div>
+  );
+};
+
 const LOAD_ITEMS_COUNT = 7;
 
 const App = () => {
   const { features } = useFeatureFlags();
-  const { openProjectViewer } = useProjectViewer();
+  const { isOpen, openProjectViewer, projectId } = useProjectViewer();
   const {
     results: projects,
     status,
@@ -64,29 +83,34 @@ const App = () => {
       </VizContainer>
       {projects && !isLoading && (
         <ContentOverlay animation="fade-in 340ms linear">
-          <Stack direction="column" gap={4} px={[3, 4]} pt={8} pb={12}>
-            <Bio />
-            <Stack gap={2}>
-              {projects.map((project) => {
-                return (
-                  <ProjectItem
-                    key={project._id}
-                    isPreviewEnabled={features.get(
-                      FeatureFlags.PROJECT_PREVIEWS,
-                    )}
-                    isViewerEnabled={features.get(FeatureFlags.PROJECT_VIEWER)}
-                    item={project}
-                    onSelect={(projectId) => openProjectViewer(projectId)}
-                  />
-                );
-              })}
-              {canLoadMore && (
-                <LoadMore onClick={() => loadMore(LOAD_ITEMS_COUNT)}>
-                  More...
-                </LoadMore>
-              )}
+          <ContentContainer state={isOpen ? 'background' : 'foreground'}>
+            <Stack direction="column" gap={4} px={[3, 4]} pt={8} pb={12}>
+              <Bio />
+              <Stack gap={2}>
+                {projects.map((project) => {
+                  return (
+                    <ProjectItem
+                      key={project._id}
+                      isSelected={isOpen && projectId === project._id}
+                      isPreviewEnabled={features.get(
+                        FeatureFlags.PROJECT_PREVIEWS,
+                      )}
+                      isViewerEnabled={features.get(
+                        FeatureFlags.PROJECT_VIEWER,
+                      )}
+                      item={project}
+                      onSelect={(projectId) => openProjectViewer(projectId)}
+                    />
+                  );
+                })}
+                {canLoadMore && (
+                  <LoadMore onClick={() => loadMore(LOAD_ITEMS_COUNT)}>
+                    More...
+                  </LoadMore>
+                )}
+              </Stack>
             </Stack>
-          </Stack>
+          </ContentContainer>
         </ContentOverlay>
       )}
     </Root>
diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/components/ProjectItem.tsx
index 9df1dea..37595c5 100644
--- a/src/feat/Projects/components/ProjectItem.tsx
+++ b/src/feat/Projects/components/ProjectItem.tsx
@@ -1,3 +1,4 @@
+import { animated, useSpring } from '@react-spring/web';
 import { useQuery } from 'convex/react';
 import { memo, useMemo, useRef, useState } from 'react';
 import { type PropsWithChildren } from 'react';
@@ -75,7 +76,6 @@ const InnerPreview = (props: { projectId: ProjectId }) => {
 export const Preview = (props: PropsWithChildren<{ projectId: ProjectId }>) => {
   const { children, projectId } = props;
   const { hasHover } = useInteractions();
-
   if (!hasHover) {
     return children;
   }
@@ -95,6 +95,7 @@ export const formatTimestamp = (ts: number) =>
 
 export interface ProjectItemProps {
   isPreviewEnabled: boolean;
+  isSelected: boolean;
   isViewerEnabled: boolean;
   item: ProjectEntity;
   onSelect: (projectId: ProjectId) => void;
@@ -102,42 +103,52 @@ export interface ProjectItemProps {
 
 export const ProjectItem = memo<ProjectItemProps>(
   function ProjectItem(props) {
-    const { item, isPreviewEnabled, isViewerEnabled, onSelect } = props;
+    const { isPreviewEnabled, isSelected, isViewerEnabled, item, onSelect } =
+      props;
     const { _id, title, url, category, publishedAt } = item;
+    const styles = useSpring({
+      from: { opacity: 1, marginBlock: '0rem' },
+      to: isSelected
+        ? { opacity: 0, marginBlock: '0.68rem' }
+        : { opacity: 1, marginBlock: '0rem' },
+    });
 
     return (
-      <Stack key={_id} direction="column" gap={1}>
-        {isPreviewEnabled ? (
-          <Preview projectId={_id}>
-            <Link
-              href={url}
-              color="text"
-              fontWeight={500}
-              {...(isViewerEnabled
-                ? {
-                    onClick: (e) => {
-                      e.preventDefault();
-                      onSelect(_id);
-                    },
-                  }
-                : {})}
-            >
+      <animated.div style={styles}>
+        <Stack direction="column" gap={1}>
+          {isPreviewEnabled ? (
+            <Preview projectId={_id}>
+              <Link
+                href={url}
+                color="text"
+                fontWeight={500}
+                {...(isViewerEnabled
+                  ? {
+                      onClick: (e) => {
+                        e.preventDefault();
+                        onSelect(_id);
+                      },
+                    }
+                  : {})}
+              >
+                {title}
+              </Link>
+            </Preview>
+          ) : (
+            <Link href={url} color="text" fontWeight={500}>
               {title}
             </Link>
-          </Preview>
-        ) : (
-          <Link href={url} color="text" fontWeight={500}>
-            {title}
-          </Link>
-        )}
-        <Stack direction="row" gap={2}>
-          <Badge>{category}</Badge>
-          <Text fontSize="xs" color="zinc.700">
-            {formatTimestamp(publishedAt)}
-          </Text>
+          )}
+          <Stack direction="row" gap={2}>
+            <Badge>{category}</Badge>
+            <Text fontSize="xs" color="zinc.700">
+              {formatTimestamp(publishedAt)}
+            </Text>
+          </Stack>
         </Stack>
-      </Stack>
+      </animated.div>
     );
   },
-  (prev, next) => prev.item._id === next.item._id,
+  (prev, next) =>
+    prev.item._id === next.item._id && prev.isSelected === next.isSelected,
 );

From c6962e34c9c9f57f256e5c1a58e2be5916b7dab4 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 16:06:52 -0500
Subject: [PATCH 03/20] toggle viewer and preview based on viewport and touch
 detection

---
 src/App.tsx                                  | 13 +++----
 src/feat/Projects/components/ProjectItem.tsx | 40 ++++++++++----------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6b5e48c..e73a14b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,8 +5,8 @@ import { Box, Stack } from 'styled-system/jsx';
 import { api } from '~/convex/api';
 import { ProjectItem, useProjectViewer } from '~/feat/Projects';
 import { Visualization } from '~/feat/Visualization';
-import { FeatureFlags, useFeatureFlags } from '~/lib/features';
 import { VizContainer, ContentOverlay, Root } from '~/lib/layout';
+import { useBreakpoints, useInteractions } from '~/lib/viewport';
 import { Button } from '~/ui/Button';
 import { Link } from '~/ui/Link';
 import { Text } from '~/ui/Text';
@@ -62,7 +62,8 @@ const ContentContainer = (
 const LOAD_ITEMS_COUNT = 7;
 
 const App = () => {
-  const { features } = useFeatureFlags();
+  const { isMobile } = useBreakpoints();
+  const { hasHover, hasTouch } = useInteractions();
   const { isOpen, openProjectViewer, projectId } = useProjectViewer();
   const {
     results: projects,
@@ -91,13 +92,9 @@ const App = () => {
                   return (
                     <ProjectItem
                       key={project._id}
+                      isPreviewEnabled={hasHover}
                       isSelected={isOpen && projectId === project._id}
-                      isPreviewEnabled={features.get(
-                        FeatureFlags.PROJECT_PREVIEWS,
-                      )}
-                      isViewerEnabled={features.get(
-                        FeatureFlags.PROJECT_VIEWER,
-                      )}
+                      isViewerEnabled={isMobile || hasTouch}
                       item={project}
                       onSelect={(projectId) => openProjectViewer(projectId)}
                     />
diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/components/ProjectItem.tsx
index 37595c5..fcd6a26 100644
--- a/src/feat/Projects/components/ProjectItem.tsx
+++ b/src/feat/Projects/components/ProjectItem.tsx
@@ -112,32 +112,32 @@ export const ProjectItem = memo<ProjectItemProps>(
         ? { opacity: 0, marginBlock: '0.68rem' }
         : { opacity: 1, marginBlock: '0rem' },
     });
+    const innerContent = (
+      <Link
+        color="text"
+        fontWeight={500}
+        href={url}
+        target="_blank"
+        {...(isViewerEnabled
+          ? {
+              onClick: (e) => {
+                e.preventDefault();
+                onSelect(_id);
+              },
+            }
+          : {})}
+      >
+        {title}
+      </Link>
+    );
 
     return (
       <animated.div style={styles}>
         <Stack direction="column" gap={1}>
           {isPreviewEnabled ? (
-            <Preview projectId={_id}>
-              <Link
-                href={url}
-                color="text"
-                fontWeight={500}
-                {...(isViewerEnabled
-                  ? {
-                      onClick: (e) => {
-                        e.preventDefault();
-                        onSelect(_id);
-                      },
-                    }
-                  : {})}
-              >
-                {title}
-              </Link>
-            </Preview>
+            <Preview projectId={_id}>{innerContent}</Preview>
           ) : (
-            <Link href={url} color="text" fontWeight={500}>
-              {title}
-            </Link>
+            innerContent
           )}
           <Stack direction="row" gap={2}>
             <Badge>{category}</Badge>

From 01e19424a76f0b15e92f1562564dac14b22751a3 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 19:27:52 -0500
Subject: [PATCH 04/20] extract project preview for clarity

---
 src/feat/Projects/components/Preview.tsx     | 87 +++++++++++++++++++
 src/feat/Projects/components/ProjectItem.tsx | 89 +-------------------
 2 files changed, 90 insertions(+), 86 deletions(-)
 create mode 100644 src/feat/Projects/components/Preview.tsx

diff --git a/src/feat/Projects/components/Preview.tsx b/src/feat/Projects/components/Preview.tsx
new file mode 100644
index 0000000..1ba15fa
--- /dev/null
+++ b/src/feat/Projects/components/Preview.tsx
@@ -0,0 +1,87 @@
+import { useQuery } from 'convex/react';
+import { useMemo, useRef, useState } from 'react';
+import { type PropsWithChildren } from 'react';
+import { Box } from 'styled-system/jsx';
+import { api } from '~/convex/api';
+import { debounce } from '~/lib/debounce';
+import { useInteractions } from '~/lib/viewport';
+import * as HoverCard from '~/ui/HoverCard';
+import { Image } from '~/ui/Image';
+import { Loader } from '~/ui/Loader';
+import type { ProjectId } from '../types';
+
+const InnerPreview = (props: { projectId: ProjectId }) => {
+  const { projectId } = props;
+  const [isLoading, setLoading] = useState(false);
+  const previewImage = useQuery(api.projects.loadProjectPreview, { projectId });
+  const calculatedHeight = Math.max(
+    180,
+    Math.round(256 * previewImage?.aspectRatio || 0),
+  );
+  const hasInitialized = useRef(false);
+  const toggleLoader = useMemo(
+    () =>
+      debounce<(loading: boolean) => void>(
+        (loading = false) => setLoading(loading),
+        50,
+      ),
+    [],
+  );
+
+  if (!hasInitialized.current) {
+    hasInitialized.current = true;
+    toggleLoader(true);
+  }
+
+  return (
+    <Box
+      height={`${calculatedHeight}px`}
+      overflow="hidden"
+      position="relative"
+      width="256px"
+    >
+      <Image
+        alt={previewImage?.alt}
+        height={`${calculatedHeight}px`}
+        onLoad={() => {
+          toggleLoader.cancel();
+          setLoading(false);
+        }}
+        options={{ width: 256 }}
+        src={previewImage?.publicUrl}
+        useHighRes
+        useAnimation
+        width="256px"
+      />
+      {isLoading && (
+        <Box bg="zinc.100/25" borderRadius={12} inset={0} position="absolute">
+          <Loader
+            color="zinc.300/50"
+            left="50%"
+            position="absolute"
+            size="md"
+            top="50%"
+            transform="translate(-50%, -50%)"
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export const Preview = (props: PropsWithChildren<{ projectId: ProjectId }>) => {
+  const { children, projectId } = props;
+  const { hasHover } = useInteractions();
+  if (!hasHover) {
+    return children;
+  }
+
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger>{children}</HoverCard.Trigger>
+      <HoverCard.Content>
+        <InnerPreview projectId={projectId} />
+      </HoverCard.Content>
+    </HoverCard.Root>
+  );
+};
diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/components/ProjectItem.tsx
index fcd6a26..3b7306c 100644
--- a/src/feat/Projects/components/ProjectItem.tsx
+++ b/src/feat/Projects/components/ProjectItem.tsx
@@ -1,94 +1,11 @@
 import { animated, useSpring } from '@react-spring/web';
-import { useQuery } from 'convex/react';
-import { memo, useMemo, useRef, useState } from 'react';
-import { type PropsWithChildren } from 'react';
-import { Box, Stack } from 'styled-system/jsx';
-import { api } from '~/convex/api';
-import { debounce } from '~/lib/debounce';
-import { useInteractions } from '~/lib/viewport';
+import { memo } from 'react';
+import { Stack } from 'styled-system/jsx';
 import { Badge } from '~/ui/Badge';
-import * as HoverCard from '~/ui/HoverCard';
-import { Image } from '~/ui/Image';
 import { Link } from '~/ui/Link';
-import { Loader } from '~/ui/Loader';
 import { Text } from '~/ui/Text';
 import type { ProjectEntity, ProjectId } from '../types';
-
-const InnerPreview = (props: { projectId: ProjectId }) => {
-  const { projectId } = props;
-  const [isLoading, setLoading] = useState(false);
-  const previewImage = useQuery(api.projects.loadProjectPreview, { projectId });
-  const calculatedHeight = Math.max(
-    180,
-    Math.round(256 * previewImage?.aspectRatio || 0),
-  );
-  const hasInitialized = useRef(false);
-  const toggleLoader = useMemo(
-    () =>
-      debounce<(loading: boolean) => void>(
-        (loading = false) => setLoading(loading),
-        50,
-      ),
-    [],
-  );
-
-  if (!hasInitialized.current) {
-    hasInitialized.current = true;
-    toggleLoader(true);
-  }
-
-  return (
-    <Box
-      height={`${calculatedHeight}px`}
-      overflow="hidden"
-      position="relative"
-      width="256px"
-    >
-      <Image
-        alt={previewImage?.alt}
-        height={`${calculatedHeight}px`}
-        onLoad={() => {
-          toggleLoader.cancel();
-          setLoading(false);
-        }}
-        options={{ width: 256 }}
-        src={previewImage?.publicUrl}
-        useHighRes
-        useAnimation
-        width="256px"
-      />
-      {isLoading && (
-        <Box bg="zinc.100/25" borderRadius={12} inset={0} position="absolute">
-          <Loader
-            color="zinc.300/50"
-            left="50%"
-            position="absolute"
-            size="md"
-            top="50%"
-            transform="translate(-50%, -50%)"
-          />
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export const Preview = (props: PropsWithChildren<{ projectId: ProjectId }>) => {
-  const { children, projectId } = props;
-  const { hasHover } = useInteractions();
-  if (!hasHover) {
-    return children;
-  }
-
-  return (
-    <HoverCard.Root>
-      <HoverCard.Trigger>{children}</HoverCard.Trigger>
-      <HoverCard.Content>
-        <InnerPreview projectId={projectId} />
-      </HoverCard.Content>
-    </HoverCard.Root>
-  );
-};
+import { Preview } from './Preview';
 
 export const formatTimestamp = (ts: number) =>
   new Date(ts).toLocaleDateString('en-US');

From 97d69a8bdde40329f74a1c999d70a5e27a24ef07 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 21:38:16 -0500
Subject: [PATCH 05/20] clean up media embed and add cool nondeterministic
 loading spinner

---
 src/ui/MediaEmbed.tsx | 89 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 71 insertions(+), 18 deletions(-)

diff --git a/src/ui/MediaEmbed.tsx b/src/ui/MediaEmbed.tsx
index 5901b8c..2c0128e 100644
--- a/src/ui/MediaEmbed.tsx
+++ b/src/ui/MediaEmbed.tsx
@@ -1,4 +1,8 @@
-import { Flex, styled, type HTMLStyledProps } from 'styled-system/jsx';
+import { useState, type PropsWithChildren } from 'react';
+import { Rand } from '@prtcl/plonk';
+import { useMetro } from '@prtcl/plonk-hooks';
+import { Box, Flex, styled, type HTMLStyledProps } from 'styled-system/jsx';
+import { Loader } from './Loader';
 
 export enum Service {
   YOUTUBE = 'youtube',
@@ -14,12 +18,14 @@ export type ServiceProps = HTMLStyledProps<'iframe'> & {
   frameborder?: string;
 };
 
-const getServiceProps = (service: Services): ServiceProps => {
+const getServiceProps = (service: Services, embedUrl: string): ServiceProps => {
   switch (service) {
     case Service.BANDCAMP: {
       return {
         allowtransparency: 'true',
-        style: { minHeight: '435px' },
+        style: {
+          minHeight: embedUrl.includes('VideoEmbed') ? '380px' : '120px',
+        },
       };
     }
     case Service.YOUTUBE: {
@@ -28,7 +34,7 @@ const getServiceProps = (service: Services): ServiceProps => {
         allow:
           'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
         referrerPolicy: 'strict-origin-when-cross-origin',
-        style: { minHeight: '315px' },
+        style: { minHeight: '300px' },
       };
     }
     case Service.SOUNDCLOUD: {
@@ -45,6 +51,48 @@ const getServiceProps = (service: Services): ServiceProps => {
   }
 };
 
+const Container = (props: PropsWithChildren) => (
+  <Flex
+    bg="#0c0c0c"
+    fontSize={0}
+    height="100%"
+    lineHeight={0}
+    overflow="hidden"
+    position="relative"
+    width="100%"
+  >
+    {props.children}
+  </Flex>
+);
+
+export const Iframe = styled('iframe', {
+  base: {
+    background: 'black',
+    border: 0,
+    borderRadius: 0,
+    borderStyle: 'none',
+    display: 'block',
+    margin: 0,
+    outline: 'none',
+    padding: 0,
+    width: '100%',
+  },
+});
+
+// Because iframe's and CORS and inner content loading flicker
+const useFakeLoader = () => {
+  const [isLoading, toggleLoading] = useState(true);
+  const [delay] = useState(() => new Rand({ min: 300, max: 500 }));
+  useMetro((timer) => {
+    if (timer.state.totalElapsed >= delay.value()) {
+      timer.stop();
+      toggleLoading(false);
+    }
+  });
+
+  return { isLoading };
+};
+
 export interface MediaEmbedProps {
   src: string;
   service: Services;
@@ -53,27 +101,32 @@ export interface MediaEmbedProps {
 
 export const MediaEmbed = (props: MediaEmbedProps) => {
   const { src, service, title = 'Video' } = props;
-  const serviceProps = getServiceProps(service);
+  const { isLoading } = useFakeLoader();
+  const serviceProps = getServiceProps(service, src);
 
   return (
-    <Flex fontSize={0} height="100%" lineHeight={0} width="100%">
-      <styled.iframe
+    <Container>
+      <Iframe
         allowFullScreen
-        background="transparent"
-        border={0}
-        borderRadius={0}
-        borderStyle="none"
-        display="block"
-        frameBorder={0}
-        margin={0}
-        outline="none"
-        padding={0}
         seamless={true}
         src={src}
         title={title}
-        width="100%"
+        transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
+        opacity={isLoading ? 0 : 1}
         {...serviceProps}
       />
-    </Flex>
+      {isLoading && (
+        <Box position="absolute" inset={0}>
+          <Loader
+            color="zinc.300/50"
+            left="50%"
+            position="absolute"
+            size="md"
+            top="50%"
+            transform="translate(-50%, -50%)"
+          />
+        </Box>
+      )}
+    </Container>
   );
 };

From daa98496018c4764ea8e54e26ac1869497f7cf2d Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 23:08:47 -0500
Subject: [PATCH 06/20] extend project viewer to support media type, toggle
 viewer or window open on embed presence

---
 src/App.tsx                                  | 12 ++-
 src/feat/Projects/components/ProjectItem.tsx | 42 ++++-----
 src/feat/Projects/hooks/useProjectViewer.ts  | 90 +++++++++-----------
 3 files changed, 64 insertions(+), 80 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e73a14b..bd2c8ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -63,7 +63,7 @@ const LOAD_ITEMS_COUNT = 7;
 
 const App = () => {
   const { isMobile } = useBreakpoints();
-  const { hasHover, hasTouch } = useInteractions();
+  const { hasTouch } = useInteractions();
   const { isOpen, openProjectViewer, projectId } = useProjectViewer();
   const {
     results: projects,
@@ -92,11 +92,15 @@ const App = () => {
                   return (
                     <ProjectItem
                       key={project._id}
-                      isPreviewEnabled={hasHover}
                       isSelected={isOpen && projectId === project._id}
-                      isViewerEnabled={isMobile || hasTouch}
                       item={project}
-                      onSelect={(projectId) => openProjectViewer(projectId)}
+                      onSelect={() => {
+                        if ((isMobile || hasTouch) && !!project.embedId) {
+                          openProjectViewer(project);
+                        } else {
+                          window.open(project.url, '_blank');
+                        }
+                      }}
                     />
                   );
                 })}
diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/components/ProjectItem.tsx
index 3b7306c..68366d8 100644
--- a/src/feat/Projects/components/ProjectItem.tsx
+++ b/src/feat/Projects/components/ProjectItem.tsx
@@ -11,17 +11,14 @@ export const formatTimestamp = (ts: number) =>
   new Date(ts).toLocaleDateString('en-US');
 
 export interface ProjectItemProps {
-  isPreviewEnabled: boolean;
   isSelected: boolean;
-  isViewerEnabled: boolean;
   item: ProjectEntity;
   onSelect: (projectId: ProjectId) => void;
 }
 
 export const ProjectItem = memo<ProjectItemProps>(
   function ProjectItem(props) {
-    const { isPreviewEnabled, isSelected, isViewerEnabled, item, onSelect } =
-      props;
+    const { isSelected, item, onSelect } = props;
     const { _id, title, url, category, publishedAt } = item;
     const styles = useSpring({
       from: { opacity: 1, marginBlock: '0rem' },
@@ -29,33 +26,24 @@ export const ProjectItem = memo<ProjectItemProps>(
         ? { opacity: 0, marginBlock: '0.68rem' }
         : { opacity: 1, marginBlock: '0rem' },
     });
-    const innerContent = (
-      <Link
-        color="text"
-        fontWeight={500}
-        href={url}
-        target="_blank"
-        {...(isViewerEnabled
-          ? {
-              onClick: (e) => {
-                e.preventDefault();
-                onSelect(_id);
-              },
-            }
-          : {})}
-      >
-        {title}
-      </Link>
-    );
 
     return (
       <animated.div style={styles}>
         <Stack direction="column" gap={1}>
-          {isPreviewEnabled ? (
-            <Preview projectId={_id}>{innerContent}</Preview>
-          ) : (
-            innerContent
-          )}
+          <Preview projectId={_id}>
+            <Link
+              color="text"
+              fontWeight={500}
+              href={url}
+              target="_blank"
+              onClick={(e) => {
+                e.preventDefault();
+                onSelect(_id);
+              }}
+            >
+              {title}
+            </Link>
+          </Preview>
           <Stack direction="row" gap={2}>
             <Badge>{category}</Badge>
             <Text fontSize="xs" color="zinc.700">
diff --git a/src/feat/Projects/hooks/useProjectViewer.ts b/src/feat/Projects/hooks/useProjectViewer.ts
index aecee48..b1cf34b 100644
--- a/src/feat/Projects/hooks/useProjectViewer.ts
+++ b/src/feat/Projects/hooks/useProjectViewer.ts
@@ -5,17 +5,23 @@ import {
   useMemo,
   useReducer,
 } from 'react';
-import type { ProjectId } from '../types';
+import type { ProjectEntity, ProjectId } from '../types';
+
+export enum ViewerType {
+  SOUND = 'sound',
+  VIDEO = 'video',
+  TEXT = 'text',
+}
 
 export type ProjectViewerState = {
   isOpen: boolean;
-  projectId: ProjectId;
+  projectId: ProjectId | null;
+  viewerType: ViewerType | null;
 };
 
 export type ProjectViewerContextValue = ProjectViewerState & {
+  openProjectViewer: (project: ProjectEntity) => void;
   closeViewer: () => void;
-  openProjectViewer: (projectId: ProjectId) => void;
-  updateProjectId: (projectId: ProjectId) => void;
 };
 
 export const ProjectViewerContext = createContext<ProjectViewerContextValue>(
@@ -23,45 +29,28 @@ export const ProjectViewerContext = createContext<ProjectViewerContextValue>(
 );
 
 export enum Actions {
-  SHOW_PROJECT_DETAILS = 'SHOW_PROJECT_DETAILS',
-  CLOSE = 'CLOSE',
-  UPDATE_PROJECT_ID = 'UPDATE_PROJECT_ID',
+  OPEN_PROJECT_VIEWER = 'OPEN_PROJECT_VIEWER',
+  CLOSE_VIEWER = 'CLOSE_VIEWER',
 }
 
 type ProjectViewerActions =
-  | { type: Actions.CLOSE }
   | {
-      type: Actions.SHOW_PROJECT_DETAILS;
-      payload: { projectId: ProjectId };
+      type: Actions.OPEN_PROJECT_VIEWER;
+      payload: { projectId: ProjectId; viewerType: ViewerType };
     }
-  | {
-      type: Actions.UPDATE_PROJECT_ID;
-      payload: { projectId: ProjectId };
-    };
+  | { type: Actions.CLOSE_VIEWER };
 
 const reducer = (
   state: ProjectViewerState,
   action: ProjectViewerActions,
 ): ProjectViewerState => {
   switch (action.type) {
-    case Actions.SHOW_PROJECT_DETAILS: {
-      return {
-        ...state,
-        isOpen: true,
-        projectId: action.payload.projectId,
-      };
+    case Actions.OPEN_PROJECT_VIEWER: {
+      const { projectId, viewerType } = action.payload;
+      return { ...state, isOpen: true, projectId, viewerType };
     }
-    case Actions.UPDATE_PROJECT_ID: {
-      return {
-        ...state,
-        projectId: action.payload.projectId,
-      };
-    }
-    case Actions.CLOSE: {
-      return {
-        ...state,
-        isOpen: false,
-      };
+    case Actions.CLOSE_VIEWER: {
+      return { ...state, isOpen: false };
     }
     default: {
       return state;
@@ -69,34 +58,38 @@ const reducer = (
   }
 };
 
+const getViewerType = (project: ProjectEntity): ViewerType => {
+  if (project.embedId) {
+    if (project.category === 'sound') {
+      return ViewerType.SOUND;
+    }
+    if (project.category === 'video') {
+      return ViewerType.VIDEO;
+    }
+  }
+  return ViewerType.TEXT;
+};
+
 export const useProjectViewerState = (): ProjectViewerContextValue => {
   const [state, dispatch] = useReducer(reducer, {}, () => ({
     isOpen: false,
     projectId: null,
+    viewerType: null,
   }));
-
   const openProjectViewer = useCallback(
-    (projectId: ProjectId) => {
-      dispatch({
-        type: Actions.SHOW_PROJECT_DETAILS,
-        payload: { projectId },
-      });
-    },
-    [dispatch],
-  );
-
-  const updateProjectId = useCallback(
-    (projectId: ProjectId) => {
+    (projectId: ProjectEntity) => {
       dispatch({
-        type: Actions.UPDATE_PROJECT_ID,
-        payload: { projectId },
+        type: Actions.OPEN_PROJECT_VIEWER,
+        payload: {
+          projectId: projectId._id,
+          viewerType: getViewerType(projectId),
+        },
       });
     },
     [dispatch],
   );
-
   const closeViewer = useCallback(() => {
-    dispatch({ type: Actions.CLOSE });
+    dispatch({ type: Actions.CLOSE_VIEWER });
   }, [dispatch]);
 
   return useMemo(
@@ -104,9 +97,8 @@ export const useProjectViewerState = (): ProjectViewerContextValue => {
       ...state,
       closeViewer,
       openProjectViewer,
-      updateProjectId,
     }),
-    [state, openProjectViewer, updateProjectId, closeViewer],
+    [state, openProjectViewer, closeViewer],
   );
 };
 

From 867042b61dcada9c44dd353eab83cdc91d6beb7c Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Thu, 2 Jan 2025 23:32:31 -0500
Subject: [PATCH 07/20] refactor project viewer to render new streamlined embed
 viewer

---
 src/feat/Projects/ProjectViewer.tsx          | 149 +++++++------------
 src/feat/Projects/components/EmbedViewer.tsx |  39 +++++
 2 files changed, 95 insertions(+), 93 deletions(-)
 create mode 100644 src/feat/Projects/components/EmbedViewer.tsx

diff --git a/src/feat/Projects/ProjectViewer.tsx b/src/feat/Projects/ProjectViewer.tsx
index ea7879d..aded2bc 100644
--- a/src/feat/Projects/ProjectViewer.tsx
+++ b/src/feat/Projects/ProjectViewer.tsx
@@ -1,69 +1,13 @@
 import { useQuery } from 'convex/react';
-import { useState } from 'react';
-import useKey from 'react-use/lib/useKey';
-import { Flex, Stack, VisuallyHidden } from 'styled-system/jsx';
+import { forwardRef, useRef } from 'react';
+import { Flex, VisuallyHidden } from 'styled-system/jsx';
 import { api } from '~/convex/api';
 import { ErrorBoundary } from '~/lib/errors';
 import * as Dialog from '~/ui/Dialog';
-import { IconButton } from '~/ui/IconButton';
 import { Text } from '~/ui/Text';
-import { BackIcon, ChevronLeftIcon } from '~/ui/icons';
-import {
-  PanelContainer,
-  PanelFooter,
-  PanelHeader,
-} from './components/PanelContainer';
-import { ProjectDetails } from './components/ProjectDetails';
-import { ProjectUrl } from './components/ProjectUrl';
-import { useNextPrev, type Directions } from './hooks/useNextPrev';
-import { useProjectViewer } from './hooks/useProjectViewer';
-
-const DetailsPanel = () => {
-  const { projectId, updateProjectId } = useProjectViewer();
-  const project = useQuery(api.projects.loadProject, { projectId });
-  const { next, prev } = useNextPrev(projectId);
-  const [direction, setDirection] = useState<Directions>(0);
-
-  const handleLeft = () => {
-    if (prev) {
-      updateProjectId(prev);
-      setDirection(-1);
-    }
-  };
-  const handleRight = () => {
-    if (next) {
-      updateProjectId(next);
-      setDirection(1);
-    }
-  };
-  useKey('ArrowLeft', handleLeft, {}, [prev]);
-  useKey('ArrowRight', handleRight, {}, [next]);
-
-  return (
-    <>
-      <Flex direction="column" flex={1}>
-        <ProjectDetails direction={direction} projectId={projectId} />
-        <PanelFooter>
-          <ProjectUrl url={project?.url} direction={direction} />
-          <Stack direction="row" gap={[0, 1]}>
-            <IconButton onPress={() => handleLeft()} isDisabled={prev === null}>
-              <ChevronLeftIcon />
-            </IconButton>
-            <IconButton
-              onPress={() => handleRight()}
-              isDisabled={next === null}
-            >
-              <ChevronLeftIcon transform="rotate(180deg)" />
-            </IconButton>
-          </Stack>
-        </PanelFooter>
-      </Flex>
-      <VisuallyHidden>
-        <Dialog.Title>{project?.title}</Dialog.Title>
-      </VisuallyHidden>
-    </>
-  );
-};
+import { EmbedViewer } from './components/EmbedViewer';
+import { useProjectViewer, ViewerType } from './hooks/useProjectViewer';
+import type { ProjectId } from './types';
 
 const NotFound = () => (
   <Flex alignItems="center" justifyContent="center" flex={1} width="100%">
@@ -71,43 +15,62 @@ const NotFound = () => (
   </Flex>
 );
 
+const ProjectTitle = (props: { projectId: ProjectId }) => {
+  const { projectId } = props;
+  const project = useQuery(api.projects.loadProject, { projectId });
+  return (
+    <VisuallyHidden>
+      <Dialog.Title>{project?.title}</Dialog.Title>
+    </VisuallyHidden>
+  );
+};
+
+const Overlay = forwardRef<HTMLDivElement>(function Overlay(_, ref) {
+  const { closeViewer } = useProjectViewer();
+  const touchStartY = useRef(0);
+
+  return (
+    <Dialog.Overlay
+      ref={ref}
+      onClick={() => closeViewer()}
+      onTouchStart={(e) => {
+        touchStartY.current = e.touches[0].clientY;
+      }}
+      onTouchMove={(e) => {
+        const deltaY = Math.abs(e.touches[0].clientY - touchStartY.current);
+        if (deltaY > 75) {
+          e.preventDefault();
+          closeViewer();
+        }
+      }}
+    />
+  );
+});
+
 export const ProjectViewer = () => {
-  const { isOpen, closeViewer } = useProjectViewer();
+  const { isOpen, closeViewer, projectId, viewerType } = useProjectViewer();
 
   return (
-    <Dialog.Root isOpen={isOpen} onClose={closeViewer}>
-      <Dialog.Overlay />
-      <Dialog.Content
-        borderRadius={[16, 16, 16, 12]}
-        height="100%"
-        mt="calc(env(safe-area-inset-bottom, 0px) / 2 * -1)"
-        maxHeight={[
-          'calc(97% - (env(safe-area-inset-bottom, 0px) * 2))',
-          'calc(97% - (env(safe-area-inset-bottom, 0px) * 2))',
-          'calc(96% - (env(safe-area-inset-bottom, 0px) * 2))',
-          '92vh',
-          '84vh',
-        ]}
-        maxWidth={['97%', '95%', '95vw', '92vw', '82vw', '74vw', '80rem']}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        overflow="hidden"
-        shadow="2xl"
-        width="100%"
-      >
-        <PanelContainer>
-          <PanelHeader>
-            <IconButton ml={-1} mt={-1} onPress={() => closeViewer()} size="md">
-              <BackIcon
-                color={['zinc.500', 'zinc.500', 'zinc.400', 'zinc.300']}
-                size="md"
-              />
-            </IconButton>
-          </PanelHeader>
+    <Dialog.Root isOpen={isOpen} onClose={closeViewer} preset="scale">
+      <Dialog.Portal>
+        <Overlay />
+        <Dialog.Content
+          borderRadius={12}
+          height="fit-content"
+          maxWidth={['97%', '95%']}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          overflow="hidden"
+          shadow="2xl"
+          width="100%"
+        >
           <ErrorBoundary fallback={() => <NotFound />}>
-            <DetailsPanel />
+            {[ViewerType.SOUND, ViewerType.VIDEO].includes(viewerType) && (
+              <EmbedViewer projectId={projectId} />
+            )}
+            <ProjectTitle projectId={projectId} />
           </ErrorBoundary>
-        </PanelContainer>
-      </Dialog.Content>
+        </Dialog.Content>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };
diff --git a/src/feat/Projects/components/EmbedViewer.tsx b/src/feat/Projects/components/EmbedViewer.tsx
new file mode 100644
index 0000000..0937e93
--- /dev/null
+++ b/src/feat/Projects/components/EmbedViewer.tsx
@@ -0,0 +1,39 @@
+import { useQuery } from 'convex/react';
+import { Flex, type FlexProps } from 'styled-system/jsx';
+import { api } from '~/convex/api';
+import { MediaEmbed } from '~/ui/MediaEmbed';
+import type { ProjectId } from '../types';
+
+const Container = (props: FlexProps) => {
+  const { children, ...flexProps } = props;
+  return (
+    <Flex
+      flex={1}
+      minHeight="fit-content"
+      opacity={0}
+      overflow="hidden"
+      transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
+      width="100%"
+      {...flexProps}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export const EmbedViewer = (props: { projectId: ProjectId }) => {
+  const { projectId } = props;
+  const embedCode = useQuery(api.projects.loadProjectEmbed, { projectId });
+
+  return (
+    <Container opacity={embedCode === undefined ? 0 : 1}>
+      {embedCode && (
+        <MediaEmbed
+          service={embedCode.service}
+          src={embedCode.src}
+          title={embedCode.title}
+        />
+      )}
+    </Container>
+  );
+};

From 9f626ad98df4224370ae93b15d143a94601cf5cc Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 11:26:12 -0500
Subject: [PATCH 08/20] render cute wave and link icons in project item
 (platform detection to come later)

---
 src/feat/Projects/components/ProjectItem.tsx | 10 +++++++++-
 src/ui/icons.tsx                             |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/components/ProjectItem.tsx
index 68366d8..442d137 100644
--- a/src/feat/Projects/components/ProjectItem.tsx
+++ b/src/feat/Projects/components/ProjectItem.tsx
@@ -1,9 +1,10 @@
 import { animated, useSpring } from '@react-spring/web';
 import { memo } from 'react';
-import { Stack } from 'styled-system/jsx';
+import { Flex, Stack } from 'styled-system/jsx';
 import { Badge } from '~/ui/Badge';
 import { Link } from '~/ui/Link';
 import { Text } from '~/ui/Text';
+import { LinkIcon, WaveIcon } from '~/ui/icons';
 import type { ProjectEntity, ProjectId } from '../types';
 import { Preview } from './Preview';
 
@@ -49,6 +50,13 @@ export const ProjectItem = memo<ProjectItemProps>(
             <Text fontSize="xs" color="zinc.700">
               {formatTimestamp(publishedAt)}
             </Text>
+            <Flex alignItems="center" justifyContent="center">
+              {['sound', 'video'].includes(item.category) && item.embedId ? (
+                <WaveIcon color="primary" size="sm" mt="-1px" />
+              ) : (
+                <LinkIcon color="primary" size="sm" />
+              )}
+            </Flex>
           </Stack>
         </Stack>
       </animated.div>
diff --git a/src/ui/icons.tsx b/src/ui/icons.tsx
index e040850..47ca407 100644
--- a/src/ui/icons.tsx
+++ b/src/ui/icons.tsx
@@ -1,6 +1,7 @@
 import type { IconType } from 'react-icons';
 import { FiChevronsLeft } from 'react-icons/fi';
-import { RxChevronLeft, RxCross2 } from 'react-icons/rx';
+import { PiWaves } from 'react-icons/pi';
+import { RxChevronLeft, RxCross2, RxLink1 } from 'react-icons/rx';
 import { cva, type RecipeVariantProps } from 'styled-system/css';
 import { styled, type HTMLStyledProps } from 'styled-system/jsx';
 
@@ -50,3 +51,5 @@ export type IconProps = HTMLStyledProps<'svg'> & IconVariantProps;
 export const BackIcon = makeIcon(FiChevronsLeft);
 export const ChevronLeftIcon = makeIcon(RxChevronLeft);
 export const CloseIcon = makeIcon(RxCross2);
+export const LinkIcon = makeIcon(RxLink1);
+export const WaveIcon = makeIcon(PiWaves);

From 0587280369f73fa4c9c87eeec20c9baabc3ea9e4 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 12:05:21 -0500
Subject: [PATCH 09/20] ditch radix dialog and render our own portals and
 overlay

---
 src/feat/Projects/ProjectViewer.tsx          | 114 +++++++++----------
 src/feat/Projects/components/EmbedViewer.tsx |  12 +-
 2 files changed, 61 insertions(+), 65 deletions(-)

diff --git a/src/feat/Projects/ProjectViewer.tsx b/src/feat/Projects/ProjectViewer.tsx
index aded2bc..81f8e2f 100644
--- a/src/feat/Projects/ProjectViewer.tsx
+++ b/src/feat/Projects/ProjectViewer.tsx
@@ -1,76 +1,66 @@
-import { useQuery } from 'convex/react';
 import { forwardRef, useRef } from 'react';
-import { Flex, VisuallyHidden } from 'styled-system/jsx';
-import { api } from '~/convex/api';
+import { createPortal } from 'react-dom';
+import { Flex, type FlexProps } from 'styled-system/jsx';
 import { ErrorBoundary } from '~/lib/errors';
-import * as Dialog from '~/ui/Dialog';
 import { Text } from '~/ui/Text';
 import { EmbedViewer } from './components/EmbedViewer';
 import { useProjectViewer, ViewerType } from './hooks/useProjectViewer';
-import type { ProjectId } from './types';
 
-const NotFound = () => (
-  <Flex alignItems="center" justifyContent="center" flex={1} width="100%">
-    <Text>Not Found</Text>
-  </Flex>
-);
-
-const ProjectTitle = (props: { projectId: ProjectId }) => {
-  const { projectId } = props;
-  const project = useQuery(api.projects.loadProject, { projectId });
-  return (
-    <VisuallyHidden>
-      <Dialog.Title>{project?.title}</Dialog.Title>
-    </VisuallyHidden>
-  );
-};
+const Overlay = forwardRef<HTMLDivElement, FlexProps>(
+  function Overlay(props, ref) {
+    const { children, ...flexProps } = props;
+    const { closeViewer, isOpen } = useProjectViewer();
+    const touchStartY = useRef(0);
+    if (!isOpen) {
+      return null;
+    }
 
-const Overlay = forwardRef<HTMLDivElement>(function Overlay(_, ref) {
-  const { closeViewer } = useProjectViewer();
-  const touchStartY = useRef(0);
+    return (
+      <Flex
+        ref={ref}
+        position="fixed"
+        inset={0}
+        bg="purple/25"
+        onClick={() => closeViewer()}
+        onTouchStart={(e) => {
+          touchStartY.current = e.touches[0].clientY;
+        }}
+        onTouchMove={(e) => {
+          const deltaY = Math.abs(e.touches[0].clientY - touchStartY.current);
+          if (deltaY > 75) {
+            e.preventDefault();
+            closeViewer();
+          }
+        }}
+        {...flexProps}
+      >
+        {children}
+      </Flex>
+    );
+  },
+);
 
-  return (
-    <Dialog.Overlay
-      ref={ref}
-      onClick={() => closeViewer()}
-      onTouchStart={(e) => {
-        touchStartY.current = e.touches[0].clientY;
-      }}
-      onTouchMove={(e) => {
-        const deltaY = Math.abs(e.touches[0].clientY - touchStartY.current);
-        if (deltaY > 75) {
-          e.preventDefault();
-          closeViewer();
-        }
-      }}
-    />
+const NotFound = () =>
+  createPortal(
+    <Overlay alignItems="center" bg="zinc.100/68" justifyContent="center">
+      <Text>Not Found</Text>
+    </Overlay>,
+    document.body,
   );
-});
 
 export const ProjectViewer = () => {
-  const { isOpen, closeViewer, projectId, viewerType } = useProjectViewer();
-
+  const { isOpen, projectId, viewerType } = useProjectViewer();
   return (
-    <Dialog.Root isOpen={isOpen} onClose={closeViewer} preset="scale">
-      <Dialog.Portal>
-        <Overlay />
-        <Dialog.Content
-          borderRadius={12}
-          height="fit-content"
-          maxWidth={['97%', '95%']}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          overflow="hidden"
-          shadow="2xl"
-          width="100%"
-        >
-          <ErrorBoundary fallback={() => <NotFound />}>
-            {[ViewerType.SOUND, ViewerType.VIDEO].includes(viewerType) && (
-              <EmbedViewer projectId={projectId} />
-            )}
-            <ProjectTitle projectId={projectId} />
-          </ErrorBoundary>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+    <ErrorBoundary fallback={() => <NotFound />}>
+      {createPortal(
+        <>
+          <Overlay />
+          {[ViewerType.SOUND, ViewerType.VIDEO].includes(viewerType) && (
+            <EmbedViewer projectId={projectId} isOpen={isOpen} />
+          )}
+        </>,
+        document.body,
+      )}
+    </ErrorBoundary>
   );
 };
diff --git a/src/feat/Projects/components/EmbedViewer.tsx b/src/feat/Projects/components/EmbedViewer.tsx
index 0937e93..a973ef1 100644
--- a/src/feat/Projects/components/EmbedViewer.tsx
+++ b/src/feat/Projects/components/EmbedViewer.tsx
@@ -8,10 +8,13 @@ const Container = (props: FlexProps) => {
   const { children, ...flexProps } = props;
   return (
     <Flex
+      borderRadius={12}
       flex={1}
+      height="fit-content"
       minHeight="fit-content"
       opacity={0}
       overflow="hidden"
+      shadow="2xl"
       transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
       width="100%"
       {...flexProps}
@@ -21,13 +24,16 @@ const Container = (props: FlexProps) => {
   );
 };
 
-export const EmbedViewer = (props: { projectId: ProjectId }) => {
-  const { projectId } = props;
+export const EmbedViewer = (props: {
+  projectId: ProjectId;
+  isOpen: boolean;
+}) => {
+  const { projectId, isOpen } = props;
   const embedCode = useQuery(api.projects.loadProjectEmbed, { projectId });
 
   return (
     <Container opacity={embedCode === undefined ? 0 : 1}>
-      {embedCode && (
+      {embedCode && isOpen && (
         <MediaEmbed
           service={embedCode.service}
           src={embedCode.src}

From 3f1e40479f006ebae0041bab663dac6227e28c38 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 12:23:54 -0500
Subject: [PATCH 10/20] render embed viewer in fixed container with scale
 transition

---
 src/feat/Projects/components/EmbedViewer.tsx | 73 +++++++++++++-------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/feat/Projects/components/EmbedViewer.tsx b/src/feat/Projects/components/EmbedViewer.tsx
index a973ef1..28c1572 100644
--- a/src/feat/Projects/components/EmbedViewer.tsx
+++ b/src/feat/Projects/components/EmbedViewer.tsx
@@ -1,5 +1,6 @@
+import { animated, useTransition } from '@react-spring/web';
 import { useQuery } from 'convex/react';
-import { Flex, type FlexProps } from 'styled-system/jsx';
+import { Flex, styled, type FlexProps } from 'styled-system/jsx';
 import { api } from '~/convex/api';
 import { MediaEmbed } from '~/ui/MediaEmbed';
 import type { ProjectId } from '../types';
@@ -7,39 +8,61 @@ import type { ProjectId } from '../types';
 const Container = (props: FlexProps) => {
   const { children, ...flexProps } = props;
   return (
-    <Flex
-      borderRadius={12}
-      flex={1}
-      height="fit-content"
-      minHeight="fit-content"
-      opacity={0}
-      overflow="hidden"
-      shadow="2xl"
-      transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
-      width="100%"
-      {...flexProps}
-    >
-      {children}
+    <Flex px={0.5}>
+      <Flex
+        borderRadius={12}
+        flex={1}
+        height="fit-content"
+        minHeight="fit-content"
+        overflow="hidden"
+        shadow="2xl"
+        transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
+        width="100%"
+        {...flexProps}
+      >
+        {children}
+      </Flex>
     </Flex>
   );
 };
 
+const ViewerPosition = styled(animated.div, {
+  base: {
+    height: 'fit-content',
+    left: 0,
+    position: 'fixed',
+    top: 0,
+    width: '100%',
+  },
+});
+
 export const EmbedViewer = (props: {
   projectId: ProjectId;
   isOpen: boolean;
 }) => {
   const { projectId, isOpen } = props;
   const embedCode = useQuery(api.projects.loadProjectEmbed, { projectId });
+  const transitions = useTransition(isOpen && embedCode, {
+    from: { opacity: 0, scale: 0.88 },
+    enter: { opacity: 1, scale: 1 },
+    leave: { opacity: 0, scale: 0.88 },
+  });
 
-  return (
-    <Container opacity={embedCode === undefined ? 0 : 1}>
-      {embedCode && isOpen && (
-        <MediaEmbed
-          service={embedCode.service}
-          src={embedCode.src}
-          title={embedCode.title}
-        />
-      )}
-    </Container>
-  );
+  return transitions((styles, shouldRender) => {
+    if (shouldRender) {
+      return (
+        <ViewerPosition style={styles}>
+          <Container>
+            <MediaEmbed
+              service={embedCode.service}
+              src={embedCode.src}
+              title={embedCode.title}
+            />
+          </Container>
+        </ViewerPosition>
+      );
+    }
+
+    return null;
+  });
 };

From bf20e7e0092ad567a5b5d6b6ecc5cc442d12439b Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 12:25:42 -0500
Subject: [PATCH 11/20] rename components dir to ui for consistency

---
 src/feat/Projects/ProjectViewer.tsx                     | 2 +-
 src/feat/Projects/index.ts                              | 2 +-
 src/feat/Projects/{components => ui}/EmbedViewer.tsx    | 0
 src/feat/Projects/{components => ui}/PanelContainer.tsx | 0
 src/feat/Projects/{components => ui}/Preview.tsx        | 0
 src/feat/Projects/{components => ui}/ProjectDetails.tsx | 0
 src/feat/Projects/{components => ui}/ProjectItem.tsx    | 0
 src/feat/Projects/{components => ui}/ProjectUrl.tsx     | 0
 8 files changed, 2 insertions(+), 2 deletions(-)
 rename src/feat/Projects/{components => ui}/EmbedViewer.tsx (100%)
 rename src/feat/Projects/{components => ui}/PanelContainer.tsx (100%)
 rename src/feat/Projects/{components => ui}/Preview.tsx (100%)
 rename src/feat/Projects/{components => ui}/ProjectDetails.tsx (100%)
 rename src/feat/Projects/{components => ui}/ProjectItem.tsx (100%)
 rename src/feat/Projects/{components => ui}/ProjectUrl.tsx (100%)

diff --git a/src/feat/Projects/ProjectViewer.tsx b/src/feat/Projects/ProjectViewer.tsx
index 81f8e2f..3db8d27 100644
--- a/src/feat/Projects/ProjectViewer.tsx
+++ b/src/feat/Projects/ProjectViewer.tsx
@@ -3,8 +3,8 @@ import { createPortal } from 'react-dom';
 import { Flex, type FlexProps } from 'styled-system/jsx';
 import { ErrorBoundary } from '~/lib/errors';
 import { Text } from '~/ui/Text';
-import { EmbedViewer } from './components/EmbedViewer';
 import { useProjectViewer, ViewerType } from './hooks/useProjectViewer';
+import { EmbedViewer } from './ui/EmbedViewer';
 
 const Overlay = forwardRef<HTMLDivElement, FlexProps>(
   function Overlay(props, ref) {
diff --git a/src/feat/Projects/index.ts b/src/feat/Projects/index.ts
index 7be08b5..db6b76e 100644
--- a/src/feat/Projects/index.ts
+++ b/src/feat/Projects/index.ts
@@ -1,5 +1,5 @@
 export * from './ProjectViewer';
 export * from './ProjectProvider';
 export * from './hooks/useProjectViewer';
-export * from './components/ProjectItem';
+export * from './ui/ProjectItem';
 export * from './types';
diff --git a/src/feat/Projects/components/EmbedViewer.tsx b/src/feat/Projects/ui/EmbedViewer.tsx
similarity index 100%
rename from src/feat/Projects/components/EmbedViewer.tsx
rename to src/feat/Projects/ui/EmbedViewer.tsx
diff --git a/src/feat/Projects/components/PanelContainer.tsx b/src/feat/Projects/ui/PanelContainer.tsx
similarity index 100%
rename from src/feat/Projects/components/PanelContainer.tsx
rename to src/feat/Projects/ui/PanelContainer.tsx
diff --git a/src/feat/Projects/components/Preview.tsx b/src/feat/Projects/ui/Preview.tsx
similarity index 100%
rename from src/feat/Projects/components/Preview.tsx
rename to src/feat/Projects/ui/Preview.tsx
diff --git a/src/feat/Projects/components/ProjectDetails.tsx b/src/feat/Projects/ui/ProjectDetails.tsx
similarity index 100%
rename from src/feat/Projects/components/ProjectDetails.tsx
rename to src/feat/Projects/ui/ProjectDetails.tsx
diff --git a/src/feat/Projects/components/ProjectItem.tsx b/src/feat/Projects/ui/ProjectItem.tsx
similarity index 100%
rename from src/feat/Projects/components/ProjectItem.tsx
rename to src/feat/Projects/ui/ProjectItem.tsx
diff --git a/src/feat/Projects/components/ProjectUrl.tsx b/src/feat/Projects/ui/ProjectUrl.tsx
similarity index 100%
rename from src/feat/Projects/components/ProjectUrl.tsx
rename to src/feat/Projects/ui/ProjectUrl.tsx

From 6e814b4ce5756f6c9cbbf7c3113fecbe25ad2dc0 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 12:39:36 -0500
Subject: [PATCH 12/20] track origin for viewer open calls

---
 src/App.tsx                                 |  7 ++++--
 src/feat/Projects/hooks/useProjectViewer.ts | 28 +++++++++++++--------
 src/feat/Projects/ui/ProjectItem.tsx        |  9 ++++---
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bd2c8ed..dcd69e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -94,9 +94,12 @@ const App = () => {
                       key={project._id}
                       isSelected={isOpen && projectId === project._id}
                       item={project}
-                      onSelect={() => {
+                      onSelect={(_, target) => {
                         if ((isMobile || hasTouch) && !!project.embedId) {
-                          openProjectViewer(project);
+                          openProjectViewer(
+                            project,
+                            target.getBoundingClientRect(),
+                          );
                         } else {
                           window.open(project.url, '_blank');
                         }
diff --git a/src/feat/Projects/hooks/useProjectViewer.ts b/src/feat/Projects/hooks/useProjectViewer.ts
index b1cf34b..828a7d6 100644
--- a/src/feat/Projects/hooks/useProjectViewer.ts
+++ b/src/feat/Projects/hooks/useProjectViewer.ts
@@ -17,10 +17,11 @@ export type ProjectViewerState = {
   isOpen: boolean;
   projectId: ProjectId | null;
   viewerType: ViewerType | null;
+  origin: DOMRect | null;
 };
 
 export type ProjectViewerContextValue = ProjectViewerState & {
-  openProjectViewer: (project: ProjectEntity) => void;
+  openProjectViewer: (project: ProjectEntity, origin: DOMRect) => void;
   closeViewer: () => void;
 };
 
@@ -36,7 +37,11 @@ export enum Actions {
 type ProjectViewerActions =
   | {
       type: Actions.OPEN_PROJECT_VIEWER;
-      payload: { projectId: ProjectId; viewerType: ViewerType };
+      payload: {
+        projectId: ProjectId;
+        viewerType: ViewerType;
+        origin: DOMRect;
+      };
     }
   | { type: Actions.CLOSE_VIEWER };
 
@@ -46,8 +51,7 @@ const reducer = (
 ): ProjectViewerState => {
   switch (action.type) {
     case Actions.OPEN_PROJECT_VIEWER: {
-      const { projectId, viewerType } = action.payload;
-      return { ...state, isOpen: true, projectId, viewerType };
+      return { ...state, ...action.payload, isOpen: true };
     }
     case Actions.CLOSE_VIEWER: {
       return { ...state, isOpen: false };
@@ -70,19 +74,23 @@ const getViewerType = (project: ProjectEntity): ViewerType => {
   return ViewerType.TEXT;
 };
 
+const getInitialState = (): ProjectViewerState => ({
+  isOpen: false,
+  origin: null,
+  projectId: null,
+  viewerType: null,
+});
+
 export const useProjectViewerState = (): ProjectViewerContextValue => {
-  const [state, dispatch] = useReducer(reducer, {}, () => ({
-    isOpen: false,
-    projectId: null,
-    viewerType: null,
-  }));
+  const [state, dispatch] = useReducer(reducer, {}, () => getInitialState());
   const openProjectViewer = useCallback(
-    (projectId: ProjectEntity) => {
+    (projectId: ProjectEntity, origin: DOMRect) => {
       dispatch({
         type: Actions.OPEN_PROJECT_VIEWER,
         payload: {
           projectId: projectId._id,
           viewerType: getViewerType(projectId),
+          origin,
         },
       });
     },
diff --git a/src/feat/Projects/ui/ProjectItem.tsx b/src/feat/Projects/ui/ProjectItem.tsx
index 442d137..7d24875 100644
--- a/src/feat/Projects/ui/ProjectItem.tsx
+++ b/src/feat/Projects/ui/ProjectItem.tsx
@@ -1,5 +1,5 @@
 import { animated, useSpring } from '@react-spring/web';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { Flex, Stack } from 'styled-system/jsx';
 import { Badge } from '~/ui/Badge';
 import { Link } from '~/ui/Link';
@@ -14,13 +14,14 @@ export const formatTimestamp = (ts: number) =>
 export interface ProjectItemProps {
   isSelected: boolean;
   item: ProjectEntity;
-  onSelect: (projectId: ProjectId) => void;
+  onSelect: (projectId: ProjectId, container: HTMLDivElement) => void;
 }
 
 export const ProjectItem = memo<ProjectItemProps>(
   function ProjectItem(props) {
     const { isSelected, item, onSelect } = props;
     const { _id, title, url, category, publishedAt } = item;
+    const containerRef = useRef<HTMLDivElement>(null);
     const styles = useSpring({
       from: { opacity: 1, marginBlock: '0rem' },
       to: isSelected
@@ -29,7 +30,7 @@ export const ProjectItem = memo<ProjectItemProps>(
     });
 
     return (
-      <animated.div style={styles}>
+      <animated.div ref={containerRef} style={styles}>
         <Stack direction="column" gap={1}>
           <Preview projectId={_id}>
             <Link
@@ -39,7 +40,7 @@ export const ProjectItem = memo<ProjectItemProps>(
               target="_blank"
               onClick={(e) => {
                 e.preventDefault();
-                onSelect(_id);
+                onSelect(_id, containerRef.current);
               }}
             >
               {title}

From 97c2f8ac38e95c1f7d593e484d49106d63b3f715 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 13:37:27 -0500
Subject: [PATCH 13/20] anchor viewer against origin node

---
 src/feat/Projects/ProjectViewer.tsx  | 23 +++++--------
 src/feat/Projects/ui/EmbedViewer.tsx | 48 +++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/feat/Projects/ProjectViewer.tsx b/src/feat/Projects/ProjectViewer.tsx
index 3db8d27..6682bd3 100644
--- a/src/feat/Projects/ProjectViewer.tsx
+++ b/src/feat/Projects/ProjectViewer.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Flex, type FlexProps } from 'styled-system/jsx';
 import { ErrorBoundary } from '~/lib/errors';
@@ -10,7 +10,6 @@ const Overlay = forwardRef<HTMLDivElement, FlexProps>(
   function Overlay(props, ref) {
     const { children, ...flexProps } = props;
     const { closeViewer, isOpen } = useProjectViewer();
-    const touchStartY = useRef(0);
     if (!isOpen) {
       return null;
     }
@@ -20,18 +19,8 @@ const Overlay = forwardRef<HTMLDivElement, FlexProps>(
         ref={ref}
         position="fixed"
         inset={0}
-        bg="purple/25"
         onClick={() => closeViewer()}
-        onTouchStart={(e) => {
-          touchStartY.current = e.touches[0].clientY;
-        }}
-        onTouchMove={(e) => {
-          const deltaY = Math.abs(e.touches[0].clientY - touchStartY.current);
-          if (deltaY > 75) {
-            e.preventDefault();
-            closeViewer();
-          }
-        }}
+        onTouchMove={() => closeViewer()}
         {...flexProps}
       >
         {children}
@@ -49,14 +38,18 @@ const NotFound = () =>
   );
 
 export const ProjectViewer = () => {
-  const { isOpen, projectId, viewerType } = useProjectViewer();
+  const { isOpen, projectId, viewerType, origin } = useProjectViewer();
   return (
     <ErrorBoundary fallback={() => <NotFound />}>
       {createPortal(
         <>
           <Overlay />
           {[ViewerType.SOUND, ViewerType.VIDEO].includes(viewerType) && (
-            <EmbedViewer projectId={projectId} isOpen={isOpen} />
+            <EmbedViewer
+              projectId={projectId}
+              isOpen={isOpen}
+              origin={origin}
+            />
           )}
         </>,
         document.body,
diff --git a/src/feat/Projects/ui/EmbedViewer.tsx b/src/feat/Projects/ui/EmbedViewer.tsx
index 28c1572..e6ec2c0 100644
--- a/src/feat/Projects/ui/EmbedViewer.tsx
+++ b/src/feat/Projects/ui/EmbedViewer.tsx
@@ -1,14 +1,15 @@
 import { animated, useTransition } from '@react-spring/web';
 import { useQuery } from 'convex/react';
+import { type CSSProperties } from 'react';
 import { Flex, styled, type FlexProps } from 'styled-system/jsx';
 import { api } from '~/convex/api';
-import { MediaEmbed } from '~/ui/MediaEmbed';
-import type { ProjectId } from '../types';
+import { MediaEmbed, Service } from '~/ui/MediaEmbed';
+import type { EmbedCodeEntity, ProjectId } from '../types';
 
 const Container = (props: FlexProps) => {
   const { children, ...flexProps } = props;
   return (
-    <Flex px={0.5}>
+    <Flex px={1}>
       <Flex
         borderRadius={12}
         flex={1}
@@ -30,20 +31,49 @@ const ViewerPosition = styled(animated.div, {
   base: {
     height: 'fit-content',
     left: 0,
-    position: 'fixed',
+    position: 'absolute',
     top: 0,
     width: '100%',
   },
 });
 
+const getEstimatedViewerHeight = (embedCode: EmbedCodeEntity): number => {
+  switch (embedCode.service) {
+    case Service.BANDCAMP: {
+      return embedCode.src.includes('VideoEmbed') ? 380 : 120;
+    }
+    case Service.YOUTUBE:
+    case Service.SOUNDCLOUD: {
+      return 300;
+    }
+    default: {
+      return 0;
+    }
+  }
+};
+
+const calculateOffsetStyles = (
+  embedCode: EmbedCodeEntity,
+  origin: DOMRect,
+): CSSProperties => {
+  if (origin.top <= window.innerHeight / 2) {
+    return { top: origin.top + window.scrollY };
+  }
+  return {
+    top:
+      origin.bottom + window.scrollY + 8 - getEstimatedViewerHeight(embedCode),
+  };
+};
+
 export const EmbedViewer = (props: {
-  projectId: ProjectId;
   isOpen: boolean;
+  origin: DOMRect | null;
+  projectId: ProjectId;
 }) => {
-  const { projectId, isOpen } = props;
+  const { projectId, isOpen, origin } = props;
   const embedCode = useQuery(api.projects.loadProjectEmbed, { projectId });
   const transitions = useTransition(isOpen && embedCode, {
-    from: { opacity: 0, scale: 0.88 },
+    from: { opacity: 1, scale: 0.88 },
     enter: { opacity: 1, scale: 1 },
     leave: { opacity: 0, scale: 0.88 },
   });
@@ -51,7 +81,9 @@ export const EmbedViewer = (props: {
   return transitions((styles, shouldRender) => {
     if (shouldRender) {
       return (
-        <ViewerPosition style={styles}>
+        <ViewerPosition
+          style={{ ...styles, ...calculateOffsetStyles(embedCode, origin) }}
+        >
           <Container>
             <MediaEmbed
               service={embedCode.service}

From d7f15567a4b37585bf047557b641f6899f6d19d1 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 14:13:39 -0500
Subject: [PATCH 14/20] switch back to native transitions for the root
 container

---
 src/App.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dcd69e5..b0682cf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import { animated, useSpring } from '@react-spring/web';
 import { usePaginatedQuery } from 'convex/react';
 import { type PropsWithChildren } from 'react';
 import { Box, Stack } from 'styled-system/jsx';
@@ -45,17 +44,20 @@ const ContentContainer = (
   props: PropsWithChildren & { state: 'foreground' | 'background' },
 ) => {
   const { children, state } = props;
-  const styles = useSpring({
-    from: { opacity: 1, scale: 1 },
-    to:
-      state === 'background'
-        ? { opacity: 0.5, scale: 0.99 }
-        : { opacity: 1, scale: 1 },
-  });
   return (
-    <animated.div style={{ ...styles, width: '100%', height: '100%' }}>
+    <Box
+      transition={`
+        opacity 168ms cubic-bezier(.79,.31,.59,.83),
+        scale 336ms cubic-bezier(.79,.31,.59,.83)
+      `}
+      width="100%"
+      height="100%"
+      {...(state === 'background'
+        ? { opacity: 0.5, scale: 0.99 }
+        : { opacity: 1, scale: 1 })}
+    >
       {children}
-    </animated.div>
+    </Box>
   );
 };
 

From 038ef89196513fda575519cc0030805dbdd8b30c Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 14:14:08 -0500
Subject: [PATCH 15/20] tweak embed viewer px

---
 src/feat/Projects/ui/EmbedViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/feat/Projects/ui/EmbedViewer.tsx b/src/feat/Projects/ui/EmbedViewer.tsx
index e6ec2c0..6513af2 100644
--- a/src/feat/Projects/ui/EmbedViewer.tsx
+++ b/src/feat/Projects/ui/EmbedViewer.tsx
@@ -9,7 +9,7 @@ import type { EmbedCodeEntity, ProjectId } from '../types';
 const Container = (props: FlexProps) => {
   const { children, ...flexProps } = props;
   return (
-    <Flex px={1}>
+    <Flex px={1.5}>
       <Flex
         borderRadius={12}
         flex={1}

From 3117997ca0f1bf578198e198d4ad253dcc43b38b Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 14:47:22 -0500
Subject: [PATCH 16/20] spread props for consistency

---
 src/ui/MediaEmbed.tsx | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/ui/MediaEmbed.tsx b/src/ui/MediaEmbed.tsx
index 2c0128e..f97a5b5 100644
--- a/src/ui/MediaEmbed.tsx
+++ b/src/ui/MediaEmbed.tsx
@@ -1,7 +1,13 @@
-import { useState, type PropsWithChildren } from 'react';
+import { useState } from 'react';
 import { Rand } from '@prtcl/plonk';
 import { useMetro } from '@prtcl/plonk-hooks';
-import { Box, Flex, styled, type HTMLStyledProps } from 'styled-system/jsx';
+import {
+  Box,
+  Flex,
+  styled,
+  type FlexProps,
+  type HTMLStyledProps,
+} from 'styled-system/jsx';
 import { Loader } from './Loader';
 
 export enum Service {
@@ -51,19 +57,23 @@ const getServiceProps = (service: Services, embedUrl: string): ServiceProps => {
   }
 };
 
-const Container = (props: PropsWithChildren) => (
-  <Flex
-    bg="#0c0c0c"
-    fontSize={0}
-    height="100%"
-    lineHeight={0}
-    overflow="hidden"
-    position="relative"
-    width="100%"
-  >
-    {props.children}
-  </Flex>
-);
+const Container = (props: FlexProps) => {
+  const { children, ...flexProps } = props;
+  return (
+    <Flex
+      bg="#0c0c0c"
+      fontSize={0}
+      height="100%"
+      lineHeight={0}
+      overflow="hidden"
+      position="relative"
+      width="100%"
+      {...flexProps}
+    >
+      {children}
+    </Flex>
+  );
+};
 
 export const Iframe = styled('iframe', {
   base: {

From 45306be6b5ecb73e7d587b6d3a10474d1435ba8f Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 15:40:47 -0500
Subject: [PATCH 17/20] delete old panel viewer components

---
 src/feat/Projects/ProjectProvider.tsx   |  19 +-
 src/feat/Projects/hooks/useNextPrev.ts  |  59 ------
 src/feat/Projects/ui/PanelContainer.tsx |  67 -------
 src/feat/Projects/ui/ProjectDetails.tsx | 248 ------------------------
 src/feat/Projects/ui/ProjectUrl.tsx     | 111 -----------
 5 files changed, 2 insertions(+), 502 deletions(-)
 delete mode 100644 src/feat/Projects/hooks/useNextPrev.ts
 delete mode 100644 src/feat/Projects/ui/PanelContainer.tsx
 delete mode 100644 src/feat/Projects/ui/ProjectDetails.tsx
 delete mode 100644 src/feat/Projects/ui/ProjectUrl.tsx

diff --git a/src/feat/Projects/ProjectProvider.tsx b/src/feat/Projects/ProjectProvider.tsx
index 0ece96d..c76daa6 100644
--- a/src/feat/Projects/ProjectProvider.tsx
+++ b/src/feat/Projects/ProjectProvider.tsx
@@ -1,28 +1,13 @@
 import { type PropsWithChildren } from 'react';
 import { ProjectViewer } from './ProjectViewer';
-import { NextPrevContext, useNextPrevApi } from './hooks/useNextPrev';
 import {
   ProjectViewerContext,
   useProjectViewerState,
 } from './hooks/useProjectViewer';
 
-const ProjectViewerProvider = (props: PropsWithChildren) => (
+export const ProjectProvider = (props: PropsWithChildren) => (
   <ProjectViewerContext.Provider value={useProjectViewerState()}>
     {props.children}
+    <ProjectViewer />
   </ProjectViewerContext.Provider>
 );
-
-const NextPrevProvider = (props: PropsWithChildren) => (
-  <NextPrevContext.Provider value={useNextPrevApi()}>
-    {props.children}
-  </NextPrevContext.Provider>
-);
-
-export const ProjectProvider = (props: PropsWithChildren) => (
-  <ProjectViewerProvider>
-    <NextPrevProvider>
-      {props.children}
-      <ProjectViewer />
-    </NextPrevProvider>
-  </ProjectViewerProvider>
-);
diff --git a/src/feat/Projects/hooks/useNextPrev.ts b/src/feat/Projects/hooks/useNextPrev.ts
deleted file mode 100644
index 23e3361..0000000
--- a/src/feat/Projects/hooks/useNextPrev.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useQuery } from 'convex/react';
-import { createContext, useContext, useMemo } from 'react';
-import { api } from '~/convex/api';
-import type { ProjectId } from '../types';
-
-export type NextPrev = {
-  next: ProjectId | null;
-  prev: ProjectId | null;
-};
-
-export type NextPrevContextValue = {
-  nextPrev: Map<ProjectId, NextPrev>;
-  projectIds: ProjectId[];
-};
-
-export type Directions = -1 | 1 | 0;
-
-export const NextPrevContext = createContext<NextPrevContextValue>(
-  {} as NextPrevContextValue,
-);
-
-export const useNextPrevApi = (): NextPrevContextValue => {
-  const projectIds = useQuery(api.projects.loadProjectIds);
-  const { nextPrev } = useMemo(() => {
-    return (projectIds || []).reduce<{
-      nextPrev: Map<ProjectId, NextPrev>;
-      prev: ProjectId | null;
-    }>(
-      (res, projectId, index) => {
-        res.nextPrev.set(projectId, {
-          next: projectIds[index + 1] || null,
-          prev: res.prev || null,
-        });
-        res.prev = projectId;
-
-        return res;
-      },
-      {
-        nextPrev: new Map(),
-        prev: null,
-      },
-    );
-  }, [projectIds]);
-
-  return useMemo(
-    () => ({
-      nextPrev,
-      projectIds,
-    }),
-    [nextPrev, projectIds],
-  );
-};
-
-export const useNextPrev = (projectId: ProjectId): NextPrev => {
-  const { nextPrev } = useContext(NextPrevContext);
-  return {
-    ...nextPrev.get(projectId),
-  };
-};
diff --git a/src/feat/Projects/ui/PanelContainer.tsx b/src/feat/Projects/ui/PanelContainer.tsx
deleted file mode 100644
index 9178cd8..0000000
--- a/src/feat/Projects/ui/PanelContainer.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { Flex, Stack } from 'styled-system/jsx';
-
-export const PanelContainer = (props: PropsWithChildren) => {
-  const { children } = props;
-
-  return (
-    <Flex
-      bg="zinc.100"
-      direction="column"
-      flex={1}
-      height="100%"
-      overflow="hidden"
-      position="relative"
-      width="100%"
-      zIndex={0}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-export const PanelHeader = (props: PropsWithChildren) => {
-  const { children } = props;
-
-  return (
-    <Flex
-      alignItems="center"
-      height={10}
-      bg="zinc.900"
-      px={[0, 1]}
-      py={[0.25, 0.5]}
-      width="100%"
-      zIndex={1}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-export const PanelFooter = (props: PropsWithChildren) => {
-  const { children } = props;
-
-  return (
-    <Stack
-      alignItems="center"
-      bg="white"
-      direction="row"
-      flexBasis="fit-content"
-      flexGrow={0}
-      flexShrink={0}
-      gap={1.5}
-      justifyContent="center"
-      maxHeight="fit-content"
-      overflow="hidden"
-      pl={4}
-      pr={[1, 2]}
-      py={[0.5, 1]}
-      shadow="lg"
-      userSelect="none"
-      width="100%"
-      zIndex={1}
-    >
-      {children}
-    </Stack>
-  );
-};
diff --git a/src/feat/Projects/ui/ProjectDetails.tsx b/src/feat/Projects/ui/ProjectDetails.tsx
deleted file mode 100644
index b709432..0000000
--- a/src/feat/Projects/ui/ProjectDetails.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import {
-  animated,
-  useTransition,
-  type TransitionFrom,
-  type TransitionTo,
-} from '@react-spring/web';
-import { useQuery } from 'convex/react';
-import { useState } from 'react';
-import useMeasure from 'react-use/lib/useMeasure';
-import { Flex, type FlexProps } from 'styled-system/jsx';
-import { api } from '~/convex/api';
-import { Image } from '~/ui/Image';
-import { Loader } from '~/ui/Loader';
-import { Markdown } from '~/ui/Markdown';
-import { MediaEmbed } from '~/ui/MediaEmbed';
-import type { Directions } from '../hooks/useNextPrev';
-import type {
-  ProjectId,
-  ContentEntity,
-  CoverImageEntity,
-  EmbedCodeEntity,
-} from '../types';
-
-const fromTransition = (direction: Directions): TransitionFrom<ProjectId> => {
-  const distance = 25;
-  if (direction !== 0) {
-    return {
-      transform: `translate3d(${direction === 1 ? distance : -distance}%, 0, 0)`,
-      opacity: 0.68,
-    };
-  }
-
-  return {
-    transform: 'translate3d(0%, 0, 0)',
-    opacity: 0,
-  };
-};
-
-const toTransition = (direction: Directions): TransitionTo<ProjectId> => {
-  const distance = 25;
-  if (direction !== 0) {
-    return {
-      transform: `translate3d(${direction === 1 ? -distance : distance}%, 0, 0)`,
-      opacity: 0,
-    };
-  }
-
-  return {
-    transform: 'translate3d(0%, 0, 0)',
-    opacity: 0,
-  };
-};
-
-const ScrollContainer = (props: FlexProps) => {
-  const { children, ...flexProps } = props;
-
-  return (
-    <Flex
-      direction="column"
-      flex={1}
-      width="100%"
-      height="100%"
-      overflowX="hidden"
-      transition="opacity 168ms cubic-bezier(.79,.31,.59,.83)"
-      overflowY="auto"
-      opacity={0}
-      {...flexProps}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-const CoverImage = (props: {
-  coverImage: CoverImageEntity;
-  useAnimation: boolean;
-  onLoad: () => void;
-}) => {
-  const { coverImage, onLoad, useAnimation = false } = props;
-  const [containerRef, containerRect] = useMeasure();
-  const [isLoading, setLoading] = useState(true);
-  const { aspectRatio } = coverImage;
-  const calculatedHeight = containerRect.width
-    ? Math.min(
-        Math.round(containerRect.width * aspectRatio),
-        containerRect.height,
-      )
-    : 0;
-
-  return (
-    <Flex
-      alignItems="start"
-      flexBasis="fit-content"
-      flexGrow={1}
-      flexShrink={[0, 1]}
-      height="100%"
-      justifyContent="start"
-      objectFit="cover"
-      overflow="hidden"
-      position="relative"
-      py={[4, 0]}
-      ref={containerRef}
-      width="100%"
-      _selection={{ bg: 'transparent' }}
-    >
-      <Image
-        alt={coverImage.alt}
-        flexShrink={0}
-        height="100%"
-        objectFit="contain"
-        objectPosition="center"
-        onLoad={() => {
-          setLoading(false);
-          onLoad();
-        }}
-        options={{ width: 1280, quality: 75, fit: 'cover' }}
-        src={coverImage.publicUrl}
-        style={{ minHeight: `${calculatedHeight}px` }}
-        useAnimation={useAnimation}
-        width="100%"
-        _selection={{ bg: 'transparent' }}
-      />
-      {isLoading && (
-        <Loader
-          color="zinc.300/50"
-          left="50%"
-          position="absolute"
-          size="md"
-          top="50%"
-          transform="translate(-50%, -50%)"
-        />
-      )}
-    </Flex>
-  );
-};
-
-const EmbedCode = (props: { embedCode: EmbedCodeEntity }) => {
-  const { embedCode } = props;
-
-  return (
-    <Flex flex={1} minHeight="fit-content" width="100%">
-      <MediaEmbed
-        service={embedCode.service}
-        src={embedCode.src}
-        title={embedCode.title}
-      />
-    </Flex>
-  );
-};
-
-const Content = (props: { content: ContentEntity }) => {
-  const { content } = props;
-
-  return (
-    <Flex
-      alignSelf="center"
-      bg={['initial', 'zinc.100/98']}
-      borderColor={['initial', 'zinc.100']}
-      borderRadius={12}
-      borderWidth={[0, 1]}
-      bottom={['initial', 6]}
-      direction="column"
-      flexGrow={[1, 0]}
-      flexShrink={0}
-      height={['100%', 'fit-content']}
-      maxWidth={['initial', 'calc(100% - 2rem)', 'calc(100% - 2rem)', '84%']}
-      mt={[-1.5, 0]}
-      padding={[0, 3]}
-      pb={[6, 4]}
-      position={['initial', 'fixed']}
-      pt={[0, 4]}
-      px={['0.68rem', 4]}
-      shadow={['initial', 'lg']}
-    >
-      <Markdown color="zinc.900">{content.content}</Markdown>
-    </Flex>
-  );
-};
-
-const checkLoading = (...items: unknown[]) =>
-  items.some((item) => typeof item === 'undefined');
-
-const InnerDetails = (props: {
-  projectId: ProjectId;
-  hasSeenImages: Set<ProjectId>;
-}) => {
-  const { projectId, hasSeenImages } = props;
-  const coverImage = useQuery(api.projects.loadProjectCoverImage, {
-    projectId,
-  });
-  const content = useQuery(api.projects.loadProjectContent, { projectId });
-  const embedCode = useQuery(api.projects.loadProjectEmbed, { projectId });
-  const isLoading = checkLoading(coverImage, content, embedCode);
-
-  return (
-    <ScrollContainer opacity={isLoading ? 0 : 1}>
-      {coverImage && (
-        <CoverImage
-          coverImage={coverImage}
-          onLoad={() => hasSeenImages.add(projectId)}
-          useAnimation={!hasSeenImages.has(projectId)}
-        />
-      )}
-      {content && <Content content={content} />}
-      {embedCode && <EmbedCode embedCode={embedCode} />}
-    </ScrollContainer>
-  );
-};
-
-export const ProjectDetails = (props: {
-  direction: Directions;
-  projectId: ProjectId;
-}) => {
-  const { direction, projectId } = props;
-  const [hasSeenImages] = useState<Set<ProjectId>>(() => new Set());
-  const transitions = useTransition(projectId, {
-    from: fromTransition(direction),
-    enter: {
-      transform: 'translate3d(0%, 0, 0)',
-      opacity: 1,
-    },
-    leave: toTransition(direction),
-  });
-
-  return (
-    <Flex
-      flex={1}
-      overflow="hidden"
-      width="100%"
-      height="100%"
-      position="relative"
-    >
-      {transitions((style, currentId) => (
-        <animated.div
-          key={currentId}
-          style={{
-            ...style,
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-          }}
-        >
-          <InnerDetails projectId={currentId} hasSeenImages={hasSeenImages} />
-        </animated.div>
-      ))}
-    </Flex>
-  );
-};
diff --git a/src/feat/Projects/ui/ProjectUrl.tsx b/src/feat/Projects/ui/ProjectUrl.tsx
deleted file mode 100644
index a3752b6..0000000
--- a/src/feat/Projects/ui/ProjectUrl.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  animated,
-  useTransition,
-  type TransitionFrom,
-  type TransitionTo,
-} from '@react-spring/web';
-import { Flex } from 'styled-system/jsx';
-import { Link } from '~/ui/Link';
-import type { Directions } from '../hooks/useNextPrev';
-
-const formatProjectUrl = (content: string): string => {
-  const url = new URL(content);
-  let path = url.pathname;
-
-  if (path[path.length - 1] === '/') {
-    path = path.slice(0, -1);
-  }
-
-  return `${url.host.replace('www.', '')}${path}${url.search}`;
-};
-
-const fromTransition = (direction: Directions): TransitionFrom<string> => {
-  const distance = 2;
-  if (direction !== 0) {
-    return {
-      transform: `translate3d(${direction === 1 ? distance : -distance}%, 0, 0)`,
-      opacity: 0.68,
-    };
-  }
-
-  return {
-    transform: 'translate3d(0%, 0, 0)',
-    opacity: 0,
-  };
-};
-
-const toTransition = (direction: Directions): TransitionTo<string> => {
-  const distance = 2;
-  if (direction !== 0) {
-    return {
-      transform: `translate3d(${direction === 1 ? -distance : distance}%, 0, 0)`,
-      opacity: 0,
-      position: 'absolute',
-    };
-  }
-
-  return {
-    transform: 'translate3d(0%, 0, 0)',
-    opacity: 0,
-  };
-};
-
-export const ProjectUrl = (props: { url?: string; direction: Directions }) => {
-  const { url, direction } = props;
-  const transitions = useTransition(url, {
-    from: fromTransition(direction),
-    enter: {
-      transform: 'translate3d(0%, 0, 0)',
-      opacity: 1,
-    },
-    leave: toTransition(direction),
-  });
-
-  return (
-    <Flex
-      flex={1}
-      height="100%"
-      minWidth={0}
-      overflow="hidden"
-      position="relative"
-      width={0}
-    >
-      {transitions((style, projectUrl) => (
-        <>
-          {projectUrl && (
-            <animated.div
-              style={{
-                ...style,
-                alignItems: 'center',
-                display: 'flex',
-                height: '100%',
-                width: '100%',
-              }}
-            >
-              <Link
-                color="zinc.600"
-                display="block"
-                fontSize={['0.9168rem', '1rem']}
-                fontStyle="italic"
-                fontWeight={500}
-                href={url}
-                maxWidth={['100%', '18rem', '20rem', '25rem', '28rem']}
-                overflow="hidden"
-                target="_blank"
-                textDecoration="underline"
-                textOverflow="ellipsis"
-                whiteSpace="nowrap"
-                width="100%"
-                _hover={{
-                  textDecoration: 'none',
-                }}
-              >
-                &raquo; {formatProjectUrl(projectUrl)}
-              </Link>
-            </animated.div>
-          )}
-        </>
-      ))}
-    </Flex>
-  );
-};

From 5caf334aa98f88d777446005f886ed2f7481b6d8 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 16:09:38 -0500
Subject: [PATCH 18/20] restore project viewer feature flag

---
 src/App.tsx                          |  5 +++++
 src/feat/Projects/ui/ProjectItem.tsx | 31 +++++++++++++++++-----------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b0682cf..57b9949 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import { useBreakpoints, useInteractions } from '~/lib/viewport';
 import { Button } from '~/ui/Button';
 import { Link } from '~/ui/Link';
 import { Text } from '~/ui/Text';
+import { FeatureFlags, useFeatureFlags } from './lib/features';
 
 const Bio = () => {
   return (
@@ -64,6 +65,7 @@ const ContentContainer = (
 const LOAD_ITEMS_COUNT = 7;
 
 const App = () => {
+  const { features } = useFeatureFlags();
   const { isMobile } = useBreakpoints();
   const { hasTouch } = useInteractions();
   const { isOpen, openProjectViewer, projectId } = useProjectViewer();
@@ -95,6 +97,9 @@ const App = () => {
                     <ProjectItem
                       key={project._id}
                       isSelected={isOpen && projectId === project._id}
+                      isViewerEnabled={features.get(
+                        FeatureFlags.PROJECT_VIEWER,
+                      )}
                       item={project}
                       onSelect={(_, target) => {
                         if ((isMobile || hasTouch) && !!project.embedId) {
diff --git a/src/feat/Projects/ui/ProjectItem.tsx b/src/feat/Projects/ui/ProjectItem.tsx
index 7d24875..c1adaf4 100644
--- a/src/feat/Projects/ui/ProjectItem.tsx
+++ b/src/feat/Projects/ui/ProjectItem.tsx
@@ -13,13 +13,14 @@ export const formatTimestamp = (ts: number) =>
 
 export interface ProjectItemProps {
   isSelected: boolean;
+  isViewerEnabled: boolean;
   item: ProjectEntity;
   onSelect: (projectId: ProjectId, container: HTMLDivElement) => void;
 }
 
 export const ProjectItem = memo<ProjectItemProps>(
   function ProjectItem(props) {
-    const { isSelected, item, onSelect } = props;
+    const { isSelected, item, onSelect, isViewerEnabled } = props;
     const { _id, title, url, category, publishedAt } = item;
     const containerRef = useRef<HTMLDivElement>(null);
     const styles = useSpring({
@@ -38,10 +39,14 @@ export const ProjectItem = memo<ProjectItemProps>(
               fontWeight={500}
               href={url}
               target="_blank"
-              onClick={(e) => {
-                e.preventDefault();
-                onSelect(_id, containerRef.current);
-              }}
+              {...(isViewerEnabled
+                ? {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      onSelect(_id, containerRef.current);
+                    },
+                  }
+                : {})}
             >
               {title}
             </Link>
@@ -51,13 +56,15 @@ export const ProjectItem = memo<ProjectItemProps>(
             <Text fontSize="xs" color="zinc.700">
               {formatTimestamp(publishedAt)}
             </Text>
-            <Flex alignItems="center" justifyContent="center">
-              {['sound', 'video'].includes(item.category) && item.embedId ? (
-                <WaveIcon color="primary" size="sm" mt="-1px" />
-              ) : (
-                <LinkIcon color="primary" size="sm" />
-              )}
-            </Flex>
+            {isViewerEnabled && (
+              <Flex alignItems="center" justifyContent="center">
+                {['sound', 'video'].includes(item.category) && item.embedId ? (
+                  <WaveIcon color="primary" size="sm" mt="-1px" />
+                ) : (
+                  <LinkIcon color="primary" size="sm" />
+                )}
+              </Flex>
+            )}
           </Stack>
         </Stack>
       </animated.div>

From 7622fda79f269b43e53d970a59f567e7d7241522 Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 16:17:48 -0500
Subject: [PATCH 19/20] remove unused query

---
 convex/projects.ts | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/convex/projects.ts b/convex/projects.ts
index 135dcbe..69cb092 100644
--- a/convex/projects.ts
+++ b/convex/projects.ts
@@ -17,20 +17,6 @@ export const loadProjects = query({
   },
 });
 
-export const loadProjectIds = query({
-  args: {},
-  handler: async (ctx) => {
-    const projects = await ctx.db
-      .query('projects')
-      .withIndex('deletedByOrder', (q) => q.eq('deletedAt', null))
-      .filter((q) => q.neq(q.field('publishedAt'), null))
-      .order('asc')
-      .collect();
-
-    return projects?.map((p) => p._id);
-  },
-});
-
 const getProjectOrNotFound = async (
   ctx: QueryCtx,
   projectId: Id<'projects'>,

From f12940323bad962cd3171d6cd66466c5fc70631c Mon Sep 17 00:00:00 2001
From: Cory O'Brien <cory@prtcl.cc>
Date: Fri, 3 Jan 2025 17:26:58 -0500
Subject: [PATCH 20/20] rename and adjust embed loader

---
 src/ui/MediaEmbed.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/ui/MediaEmbed.tsx b/src/ui/MediaEmbed.tsx
index f97a5b5..5379c8a 100644
--- a/src/ui/MediaEmbed.tsx
+++ b/src/ui/MediaEmbed.tsx
@@ -90,15 +90,18 @@ export const Iframe = styled('iframe', {
 });
 
 // Because iframe's and CORS and inner content loading flicker
-const useFakeLoader = () => {
+const useFauxLoader = () => {
   const [isLoading, toggleLoading] = useState(true);
   const [delay] = useState(() => new Rand({ min: 300, max: 500 }));
-  useMetro((timer) => {
-    if (timer.state.totalElapsed >= delay.value()) {
-      timer.stop();
-      toggleLoading(false);
-    }
-  });
+  useMetro(
+    (timer) => {
+      if (timer.state.totalElapsed >= delay.value()) {
+        timer.stop();
+        toggleLoading(false);
+      }
+    },
+    { time: 50 },
+  );
 
   return { isLoading };
 };
@@ -111,7 +114,7 @@ export interface MediaEmbedProps {
 
 export const MediaEmbed = (props: MediaEmbedProps) => {
   const { src, service, title = 'Video' } = props;
-  const { isLoading } = useFakeLoader();
+  const { isLoading } = useFauxLoader();
   const serviceProps = getServiceProps(service, src);
 
   return (