From 1bf4fc7526be33db1716349bab80c88b0f3e754d Mon Sep 17 00:00:00 2001
From: Michael Bashurov <accounts@saitonakamura.me>
Date: Wed, 17 Dec 2025 13:23:40 +0200
Subject: [PATCH] Refactor CardPage to use Panel component and signals

---
 examples/card/src/App.tsx | 174 ++++++++++++++++++--------------------
 1 file changed, 83 insertions(+), 91 deletions(-)

diff --git a/examples/card/src/App.tsx b/examples/card/src/App.tsx
index 37a5bab1..8c782cf6 100644
--- a/examples/card/src/App.tsx
+++ b/examples/card/src/App.tsx
@@ -14,10 +14,9 @@ import {
   CardTitle,
   Switch,
 } from '@react-three/uikit-default'
-import { useMemo, useRef } from 'react'
-import { signal } from '@preact/signals-core'
+import { useMemo, useRef, useState } from 'react'
+import { Signal, signal } from '@preact/signals-core'
 import { easing, geometry } from 'maath'
-import { Floating, Physical } from './components/Simulation.js'
 
 setPreferredColorScheme('light')
 const notifications = [{ title: 'Your call has been confirmed.', description: '1 hour ago' }]
@@ -38,32 +37,93 @@ export default function App() {
             <Text>Source Code</Text>
           </Button>
         </Fullscreen>
-        <Floating position={[0, 0, 7]} />
         <Environment preset="city" />
-        <Rig />
       </Defaults>
     </Canvas>
   )
 }
 
-function Rig() {
-  useFrame((state, delta) => {
-    easing.damp3(state.camera.position, [state.pointer.x * 2, state.pointer.y * 2, 18], 0.35, delta)
-    state.camera.lookAt(0, 0, -10)
-  })
-  return null
-}
-
 const cardGeometry = new geometry.RoundedPlaneGeometry(1, 1, 0.025)
 
+const Panel = ({ shown$ }: { shown$: Signal<boolean> }) => {
+  return (
+    shown$.value && (
+      <Container
+        paddingTop={40}
+        transformTranslateY={0}
+        backgroundColor={colors.secondary}
+        borderRadius={20}
+        flexDirection="column"
+      >
+        <CardHeader>
+          <CardTitle>
+            <Text>Notifications</Text>
+          </CardTitle>
+          <CardDescription>
+            <Text>You have 3 unread messages.</Text>
+          </CardDescription>
+        </CardHeader>
+        <CardContent flexDirection="column" gap={16}>
+          <Container flexDirection="row" alignItems="center" gap={16} borderRadius={6} borderWidth={1} padding={16}>
+            <BellRing />
+            <Container flexDirection="column" gap={4}>
+              <Text fontSize={14} lineHeight="100%">
+                Push Notifications
+              </Text>
+              <Text fontSize={14} lineHeight={20} color={colors.mutedForeground}>
+                Send notifications to device.
+              </Text>
+            </Container>
+            <Container flexGrow={1} />
+            <Switch />
+          </Container>
+          <Container flexDirection="column">
+            {notifications.map((notification, index) => (
+              <Container
+                key={index}
+                marginBottom={index === notifications.length - 1 ? 0 : 16}
+                paddingBottom={index === notifications.length - 1 ? 0 : 16}
+                alignItems="flex-start"
+                flexDirection="row"
+                gap={17}
+              >
+                <Container
+                  height={8}
+                  width={8}
+                  transformTranslateY={4}
+                  borderRadius={1000}
+                  backgroundColor={colors.primary}
+                />
+                <Container gap={4} flexDirection="column">
+                  <Text fontSize={14} lineHeight="100%">
+                    {notification.title}
+                  </Text>
+                  <Text fontSize={14} lineHeight={20} color={colors.mutedForeground}>
+                    {notification.description}
+                  </Text>
+                </Container>
+              </Container>
+            ))}
+          </Container>
+        </CardContent>
+        <CardFooter>
+          <Button
+            onClick={(e) => (e.stopPropagation(), (shown$.value = !shown$.peek()))}
+            flexDirection="row"
+            width="100%"
+          >
+            <Check marginRight={8} height={16} width={16} />
+            <Text>Mark all as read</Text>
+          </Button>
+        </CardFooter>
+      </Container>
+    )
+  )
+}
+
 export function CardPage() {
   const openRef = useRef(false)
-  const translateY = useMemo(() => signal(-460), [])
-  const translateZ = useMemo(() => signal(0), [])
-  useFrame((_, delta) => {
-    easing.damp(translateY, 'value', openRef.current ? 0 : -460, 0.2, delta)
-    easing.damp(translateZ, 'value', openRef.current ? 200 : 0, 0.2, delta)
-  })
+  const shown$ = useMemo(() => signal(false), [])
   return (
     <Root flexDirection="column" pixelSize={0.01} sizeX={4.4}>
       <Defaults>
@@ -71,11 +131,11 @@ export function CardPage() {
           backgroundColor={0xffffff}
           dark={{ backgroundColor: 0x0 }}
           borderRadius={20}
-          onClick={(e) => (e.stopPropagation(), (openRef.current = !openRef.current))}
+          onClick={(e) => (e.stopPropagation(), (shown$.value = !shown$.value))}
           cursor="pointer"
           flexDirection="column"
           zIndex={10}
-          transformTranslateZ={translateZ}
+          transformTranslateZ={200}
         >
           <Content transformTranslateZ={1} padding={14} keepAspectRatio={false} width="100%" height={400}>
             <mesh geometry={cardGeometry}>
@@ -83,7 +143,7 @@ export function CardPage() {
                 <color attach="background" args={['white']} />
                 <ambientLight intensity={Math.PI} />
                 <Environment preset="city" />
-                <Physical />
+                {/*<Physical />*/}
                 <PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
               </MeshPortalMaterial>
             </mesh>
@@ -115,75 +175,7 @@ export function CardPage() {
           </Container>
         </Container>
         <Container flexDirection="column" transformTranslateY={-40} overflow="hidden">
-          <Container
-            paddingTop={40}
-            transformTranslateY={translateY}
-            backgroundColor={colors.secondary}
-            borderRadius={20}
-            flexDirection="column"
-          >
-            <CardHeader>
-              <CardTitle>
-                <Text>Notifications</Text>
-              </CardTitle>
-              <CardDescription>
-                <Text>You have 3 unread messages.</Text>
-              </CardDescription>
-            </CardHeader>
-            <CardContent flexDirection="column" gap={16}>
-              <Container flexDirection="row" alignItems="center" gap={16} borderRadius={6} borderWidth={1} padding={16}>
-                <BellRing />
-                <Container flexDirection="column" gap={4}>
-                  <Text fontSize={14} lineHeight="100%">
-                    Push Notifications
-                  </Text>
-                  <Text fontSize={14} lineHeight={20} color={colors.mutedForeground}>
-                    Send notifications to device.
-                  </Text>
-                </Container>
-                <Container flexGrow={1} />
-                <Switch />
-              </Container>
-              <Container flexDirection="column">
-                {notifications.map((notification, index) => (
-                  <Container
-                    key={index}
-                    marginBottom={index === notifications.length - 1 ? 0 : 16}
-                    paddingBottom={index === notifications.length - 1 ? 0 : 16}
-                    alignItems="flex-start"
-                    flexDirection="row"
-                    gap={17}
-                  >
-                    <Container
-                      height={8}
-                      width={8}
-                      transformTranslateY={4}
-                      borderRadius={1000}
-                      backgroundColor={colors.primary}
-                    />
-                    <Container gap={4} flexDirection="column">
-                      <Text fontSize={14} lineHeight="100%">
-                        {notification.title}
-                      </Text>
-                      <Text fontSize={14} lineHeight={20} color={colors.mutedForeground}>
-                        {notification.description}
-                      </Text>
-                    </Container>
-                  </Container>
-                ))}
-              </Container>
-            </CardContent>
-            <CardFooter>
-              <Button
-                onClick={(e) => (e.stopPropagation(), (openRef.current = !openRef.current))}
-                flexDirection="row"
-                width="100%"
-              >
-                <Check marginRight={8} height={16} width={16} />
-                <Text>Mark all as read</Text>
-              </Button>
-            </CardFooter>
-          </Container>
+          <Panel shown$={shown$} />
         </Container>
       </Defaults>
     </Root>