chore: animated widget add screen

packages/ui/src/base/view/index.tsx

@@ -1,5 +1,6 @@
 import { styled } from 'styled-components';
 import { Theme } from '../../theme';
+import { motion } from 'framer-motion';
 
 type SizeKey = keyof Theme['space'];
 type BgKey = keyof Theme['colors']['bg'];
@@ -22,7 +23,7 @@ const getSize = (
   return '0';
 };
 
-const View = styled.div<{
+const View = styled(motion.div)<{
   $br?: boolean;
   $bg?: BgKey;
   $m?: SizeKey;

packages/ui/src/interface/add-from-url/index.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { Card, Dialog, View } from '../../base';
 import { useGetWidgetsFromUrl } from '@refocus/sdk';
 import { Typography } from '../../typography';
+import { AnimatePresence, motion } from 'framer-motion';
 
 type AddWidgetFromUrlProps = {
   onCreate: (name: string, data: any) => void;
@@ -20,11 +21,15 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
   );
 
   useEffect(() => {
+    try {
       const parsed = new URL(url, 'http://example.com');
+      update(parsed);
       if (parsed.host === 'example.com') {
         return;
       }
-    update(parsed);
+    } catch (e) {
+      return;
+    }
   }, [url, update]);
 
   return (
@@ -45,8 +50,29 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
                 value={url}
               />
             </View>
-            {widgets.map((widget) => (
-              <View key={widget.id}>
+            <AnimatePresence>
+              {widgets.length === 0 && url && (
+                <View
+                  $fr
+                  $items="center"
+                  $gap="sm"
+                  initial={{ opacity: 0, y: 20, height: 0 }}
+                  animate={{ opacity: 1, y: 0, height: 'auto' }}
+                  exit={{ opacity: 0, y: 20, height: 0 }}
+                >
+                  <Typography variant="body">
+                    No widgets found at this URL
+                  </Typography>
+                </View>
+              )}
+              {widgets.length > 0 &&
+                widgets.map((widget) => (
+                  <motion.div
+                    key={widget.id}
+                    initial={{ opacity: 0, y: 20, height: 0 }}
+                    animate={{ opacity: 1, y: 0, height: 'auto' }}
+                    exit={{ opacity: 0, y: 20, height: 0 }}
+                  >
                     <Dialog.Close>
                       <Card
                         $fr
@@ -56,7 +82,9 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
                         onClick={() => handleSave(widget.id, widget.data)}
                       >
                         <View>
-                      <Typography variant="header">{widget.icon}</Typography>
+                          <Typography variant="header">
+                            {widget.icon}
+                          </Typography>
                         </View>
                         <View>
                           <Typography variant="title">{widget.name}</Typography>
@@ -68,8 +96,9 @@ const Root: React.FC<AddWidgetFromUrlProps> = ({ onCreate, children }) => {
                         </View>
                       </Card>
                     </Dialog.Close>
-              </View>
+                  </motion.div>
                 ))}
+            </AnimatePresence>
           </View>
         </Dialog.Content>
       </Dialog.Portal>