fix: collapsable widgets

packages/ui/src/interface/widget/index.tsx

@@ -5,6 +5,8 @@ import {
   WidgetView,
   useWidget,
 } from '@refocus/sdk';
+import { MdKeyboardArrowUp } from 'react-icons/md';
+import { motion } from 'framer-motion';
 import { VscTrash } from 'react-icons/vsc';
 import { CgMoreO } from 'react-icons/cg';
 import { Dialog, View } from '../../base';
@@ -29,6 +31,10 @@ const WidgetWrapper = styled(View)`
   flex: 1;
 `;
 
+const Spacer = styled(View)`
+  flex: 1;
+`;
+
 const Widget: React.FC<WidgetProps> = ({
   id,
   data,
@@ -37,6 +43,7 @@ const Widget: React.FC<WidgetProps> = ({
   onRemove,
 }) => {
   const theme = useTheme();
+  const [open, setOpen] = useState(true);
   const [showEdit, setShowEdit] = useState(false);
   const widget = useWidget(id);
   const hasMenu = useMemo(
@@ -52,11 +59,19 @@ const Widget: React.FC<WidgetProps> = ({
   );
   return (
     <WidgetProvider id={id} data={data} setData={setData}>
-      <Wrapper className={className} $fr>
-        <WidgetWrapper $f={1}>
-          <WidgetView />
-        </WidgetWrapper>
-        <View $fc>
+      <View $fr>
+        <motion.div animate={{ rotate: open ? 180 : 0 }}>
+          <View
+            $items="center"
+            $justify="center"
+            $fc
+            $p="sm"
+            onClick={() => setOpen(!open)}
+          >
+            <MdKeyboardArrowUp size={22} />
+          </View>
+        </motion.div>
+        <Spacer />
         {hasMenu && (
           <DropdownMenu>
             <DropdownMenu.Trigger>
@@ -85,7 +100,13 @@ const Widget: React.FC<WidgetProps> = ({
           </DropdownMenu>
         )}
       </View>
+      <motion.div animate={{ height: open ? 'auto' : 0 }}>
+        <Wrapper className={className} $fr>
+          <WidgetWrapper $f={1}>
+            <WidgetView />
+          </WidgetWrapper>
         </Wrapper>
+      </motion.div>
       <Dialog open={showEdit} onOpenChange={setShowEdit}>
         <Dialog.Overlay />
         <Dialog.Content>