add: collapsing and deletion animation

Added collapsable cards and animation for deletion and card footer

app/pages/index.vue

@@ -23,14 +23,22 @@
 </template>
 
 <script setup lang="ts">
-const initialId = crypto.randomUUID()
+const randomUUID = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => {
+    const random = Math.random() * 16 | 0
+    const value = char === 'x' ? random : (random & 0x3 | 0x8)
+    return value.toString(16)
+  })
+}
+
+const initialId = randomUUID()
 
 const cards = useState('cards', () => [
   initialId,
 ])
 
 const addCard = () => {
-  cards.value.push(crypto.randomUUID())
+  cards.value.push(randomUUID())
 }
 
 const removeCard = (uuid : string) => {