bookmark card updates

dd3v · dd3v · commit 3d7a70f42ffa · 2025-06-01T23:43:04.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "favbox",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "type": "module",
   "scripts": {
@@ -26,7 +26,6 @@
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/vue-3": "^2.9.1",
     "@vueuse/core": "^9.13.0",
-    "@vueuse/motion": "^2.2.5",
     "@zanmato/vue3-treeselect": "^0.4.1",
     "floating-vue": "^5.2.2",
     "jsstore": "^4.7.4",
diff --git a/src/ext/browser/components/SearchTerm.vue b/src/ext/browser/components/SearchTerm.vue
@@ -9,7 +9,6 @@
         class="flex items-center"
       >
         <AppBadge
-          v-motion-fade
           closable
           :color="getColor(tag.key)"
           @onClose="onClose(tag.key, tag.value)"
diff --git a/src/ext/browser/components/card/BookmarkCard.vue b/src/ext/browser/components/card/BookmarkCard.vue
@@ -3,6 +3,7 @@
     :is="displayComponent"
     :key="bookmark.id"
     :bookmark="bookmark"
+    class="bookmark-card"
   >
     <template #actions>
       <div class="absolute right-2 top-0 transition-opacity duration-300 ease-out group-hover:opacity-100">
@@ -83,3 +84,31 @@ const displayComponent = computed({
   },
 });
 </script>
+<style scoped>
+.bookmark-card {
+  opacity: 0;
+  transform: translateY(30px);
+  filter: blur(8px) brightness(0.6);
+  animation: fadeBlurUp 1s ease-out forwards;
+  animation-timeline: view();
+  animation-range: entry 0% entry 40%;
+}
+
+@keyframes fadeBlurUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+    filter: blur(8px) brightness(0.6);
+  }
+  60% {
+    opacity: 0.8;
+    transform: translateY(-2px);
+    filter: blur(2px) brightness(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0px) brightness(1);
+  }
+}
+</style>
diff --git a/src/ext/browser/components/card/type/CardView.vue b/src/ext/browser/components/card/type/CardView.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-motion-fade-visible-once
     class="group relative w-full max-w-sm overflow-hidden rounded-md border border-solid border-gray-100 bg-white shadow-sm transition-transform duration-300 ease-in-out hover:-translate-y-1 dark:border-neutral-900 dark:bg-neutral-950"
   >
     <a
diff --git a/src/ext/browser/components/card/type/ListView.vue b/src/ext/browser/components/card/type/ListView.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-motion-slide-visible-once-bottom
     class="group relative min-h-min w-full overflow-hidden rounded-md border border-solid border-gray-100 bg-white p-3 shadow-sm dark:border-neutral-900 dark:bg-neutral-950"
   >
     <a
diff --git a/src/ext/browser/components/card/type/MasonryView.vue b/src/ext/browser/components/card/type/MasonryView.vue
@@ -1,58 +1,45 @@
-<!-- eslint-disable tailwindcss/no-custom-classname -->
 <template>
   <div class="group relative">
-    <!-- Main gradient background on hover -->
+    <!-- Animated border background -->
     <div
       :class="[
-        'duration-400 absolute -inset-1.5 rounded-xl opacity-0 blur-lg transition-all ease-out group-hover:opacity-40 group-hover:blur-xl dark:group-hover:opacity-50',
-        gradient
+        'absolute -inset-0.5 rounded-lg bg-gradient-to-r opacity-0 transition duration-500 group-hover:opacity-60',
+        animatedBorderGradient
       ]"
     />
-
-    <!-- Subtle inner gradient for enhanced effect -->
+    <!-- Glow effect -->
     <div
       :class="[
-        'absolute -inset-0.5 rounded-lg opacity-0 blur-sm transition-all duration-300 ease-out group-hover:opacity-25 group-hover:blur-md',
-        `${gradient}-inner`
-      ]"
-    />
-
-    <!-- Animated border -->
-    <div
-      :class="[
-        'duration-400 absolute -inset-0.5 rounded-lg opacity-0 transition-all ease-out group-hover:opacity-50',
-        `${gradient}-border`
+        'absolute -inset-2 bg-black/10 opacity-0 blur-lg transition-all duration-300 hover:border-none group-hover:opacity-50 dark:z-0 dark:bg-white/10 dark:group-hover:opacity-100',
+        gradient
       ]"
     />
-
     <div
-      v-motion-slide-visible-once-bottom
-      class="group relative mb-3 min-h-max w-full max-w-md overflow-hidden rounded-md border border-solid border-gray-100 bg-white shadow-sm transition-all duration-300 ease-out hover:scale-[1.015] hover:border-transparent hover:shadow-lg hover:shadow-purple-500/5 dark:border-neutral-900 dark:bg-neutral-950 dark:shadow-sm dark:hover:shadow-lg dark:hover:shadow-purple-500/10"
+      class="group relative mb-3 min-h-max w-full max-w-md overflow-hidden rounded-md border border-solid border-gray-100 bg-white shadow-sm hover:[box-shadow:0px_0px_0px_1px_rgba(233,_226,_238,_0.253)] dark:border-neutral-900 dark:bg-neutral-950 dark:shadow-sm dark:hover:[box-shadow:0px_0px_0px_1px_rgba(233,_226,_238,_0.253)]"
     >
       <a
         :href="bookmark.url"
         target="_blank"
       >
         <bookmark-image :bookmark="bookmark" />
-        <div class="relative z-10 p-2">
-          <h1 class="break-words text-sm text-black transition-colors duration-200 group-hover:text-purple-900 dark:text-white dark:group-hover:text-purple-100">{{ bookmark.title }}</h1>
-          <p class="break-words py-2 text-xs text-gray-700 transition-colors duration-200 group-hover:text-gray-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+        <div class="p-2">
+          <h1 class="break-words text-sm text-black dark:text-white">{{ bookmark.title }}</h1>
+          <p class="break-words py-2 text-xs text-gray-700 dark:text-neutral-500">
             {{ bookmark.description }}
           </p>
           <div class="flex items-center gap-2">
             <bookmark-favicon
               :bookmark="bookmark"
-              class="size-4 transition-transform duration-200 group-hover:scale-110"
+              class="size-4"
             />
-            <span class="truncate text-xs font-thin text-soft-900 transition-colors duration-200 group-hover:text-gray-600 dark:text-neutral-500 dark:group-hover:text-neutral-400">
+            <span class="truncate text-xs font-thin text-soft-900 dark:text-neutral-500">
               {{ bookmark.domain }}
             </span>
           </div>
           <div class="mt-2.5 flex flex-wrap gap-1">
             <app-badge
               v-for="(value, key) in bookmark.tags"
               :key="key"
-              class="transition-all duration-200 group-hover:scale-105"
             >
               {{ value }}
             </app-badge>
@@ -78,165 +65,83 @@ defineProps({
 });
 
 const gradients = [
-  'aurora', 'cosmic', 'ocean', 'sunset', 'forest', 'neon', 'rainbow', 'fire', 'ice', 'galaxy',
+  'green-blue-pink', 'pink-orange-purple', 'purple-green-yellow', 'red-yellow-blue',
+  'blue-purple-orange', 'orange-green-purple', 'green-pink-yellow', 'pink-blue-yellow',
+  'purple-pink-blue', 'orange-blue-purple',
+];
+
+const animatedBorderGradients = [
+  'from-gray-400 via-gray-100 to-gray-400',
+  'from-slate-400 via-slate-200 to-slate-400',
+  'from-cyan-400 via-blue-300 to-cyan-400',
+  'from-indigo-400 via-violet-300 to-indigo-400',
+  'from-sky-400 via-cyan-300 to-sky-400',
+  'from-amber-400 via-orange-300 to-amber-400',
+  'from-rose-400 via-pink-300 to-rose-400',
+  'from-emerald-400 via-teal-300 to-emerald-400',
+  'from-purple-400 via-fuchsia-300 to-purple-400',
+  'from-lime-300 via-emerald-400 to-lime-300',
+  'from-violet-400 via-purple-300 to-violet-400',
+  'from-amber-500 via-yellow-300 to-amber-500',
+  'from-blue-500 via-cyan-400 to-blue-500',
 ];
 
 const gradient = ref(gradients[Math.floor(Math.random() * gradients.length)]);
+const animatedBorderGradient = ref(animatedBorderGradients[Math.floor(Math.random() * animatedBorderGradients.length)]);
 </script>
 
 <style scoped>
-/* Main gradients with reduced spread */
-.aurora {
-  background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.3) 0%, rgba(168, 85, 247, 0.25) 40%, rgba(236, 72, 153, 0.2) 70%, transparent 90%);
-}
-
-.cosmic {
-  background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.35) 0%, rgba(79, 70, 229, 0.3) 35%, rgba(236, 72, 153, 0.25) 60%, transparent 85%);
-}
-
-.ocean {
-  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.35) 0%, rgba(59, 130, 246, 0.3) 40%, rgba(168, 85, 247, 0.25) 70%, transparent 90%);
-}
-
-.sunset {
-  background: radial-gradient(ellipse at center, rgba(251, 146, 60, 0.35) 0%, rgba(239, 68, 68, 0.3) 40%, rgba(236, 72, 153, 0.25) 70%, transparent 90%);
-}
-
-.forest {
-  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.35) 0%, rgba(132, 204, 22, 0.3) 40%, rgba(251, 191, 36, 0.25) 70%, transparent 90%);
-}
-
-.neon {
-  background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.4) 0%, rgba(168, 85, 247, 0.35) 35%, rgba(6, 182, 212, 0.25) 65%, transparent 85%);
-}
-
-.rainbow {
-  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.25) 0%, rgba(251, 146, 60, 0.25) 20%, rgba(251, 191, 36, 0.25) 40%, rgba(34, 197, 94, 0.25) 60%, rgba(6, 182, 212, 0.25) 80%, transparent 95%);
-}
-
-.fire {
-  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.4) 0%, rgba(251, 146, 60, 0.35) 40%, rgba(251, 191, 36, 0.25) 70%, transparent 90%);
-}
-
-.ice {
-  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.35) 0%, rgba(59, 130, 246, 0.3) 40%, rgba(168, 85, 247, 0.25) 70%, transparent 90%);
-}
-
-.galaxy {
-  background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.4) 0%, rgba(88, 28, 135, 0.35) 35%, rgba(147, 51, 234, 0.25) 65%, transparent 85%);
-}
-
-/* Inner gradients for enhanced effect */
-.aurora-inner {
-  background: linear-gradient(45deg, rgba(96, 165, 250, 0.15) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(236, 72, 153, 0.1) 100%);
-}
-
-.cosmic-inner {
-  background: linear-gradient(135deg, rgba(147, 51, 234, 0.18) 0%, rgba(79, 70, 229, 0.15) 50%, rgba(236, 72, 153, 0.12) 100%);
-}
-
-.ocean-inner {
-  background: linear-gradient(45deg, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.15) 50%, rgba(168, 85, 247, 0.12) 100%);
-}
-
-.sunset-inner {
-  background: linear-gradient(45deg, rgba(251, 146, 60, 0.18) 0%, rgba(239, 68, 68, 0.15) 50%, rgba(236, 72, 153, 0.12) 100%);
-}
-
-.forest-inner {
-  background: linear-gradient(45deg, rgba(34, 197, 94, 0.18) 0%, rgba(132, 204, 22, 0.15) 50%, rgba(251, 191, 36, 0.12) 100%);
-}
-
-.neon-inner {
-  background: linear-gradient(45deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.18) 50%, rgba(6, 182, 212, 0.15) 100%);
-}
-
-.rainbow-inner {
-  background: linear-gradient(45deg, rgba(239, 68, 68, 0.12) 0%, rgba(251, 191, 36, 0.12) 33%, rgba(34, 197, 94, 0.12) 66%, rgba(168, 85, 247, 0.12) 100%);
-}
-
-.fire-inner {
-  background: linear-gradient(45deg, rgba(239, 68, 68, 0.2) 0%, rgba(251, 146, 60, 0.18) 50%, rgba(251, 191, 36, 0.15) 100%);
-}
-
-.ice-inner {
-  background: linear-gradient(45deg, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.15) 50%, rgba(168, 85, 247, 0.12) 100%);
-}
-
-.galaxy-inner {
-  background: linear-gradient(45deg, rgba(30, 41, 59, 0.2) 0%, rgba(88, 28, 135, 0.18) 50%, rgba(147, 51, 234, 0.15) 100%);
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
-/* Subtle animated borders */
-.aurora-border {
-  background: linear-gradient(90deg, rgba(96, 165, 250, 0.4), rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.4), rgba(96, 165, 250, 0.4));
+.group:hover div[class*="from-"] {
   background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
+  animation: gradient-shift 4s ease-in-out infinite;
 }
 
-.cosmic-border {
-  background: linear-gradient(90deg, rgba(147, 51, 234, 0.4), rgba(79, 70, 229, 0.4), rgba(236, 72, 153, 0.4), rgba(147, 51, 234, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
+.green-blue-pink {
+  background: radial-gradient(circle, rgba(102, 255, 115, 0.3) 0%, rgba(102, 178, 255, 0.3) 40%, rgba(255, 102, 178, 0.3) 70%, transparent 100%);
 }
 
-.ocean-border {
-  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(168, 85, 247, 0.4), rgba(6, 182, 212, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
+.pink-orange-purple {
+  background: radial-gradient(circle, rgba(255, 102, 178, 0.3) 0%, rgba(255, 178, 102, 0.3) 40%, rgba(178, 102, 255, 0.3) 70%, transparent 100%);
 }
 
-.sunset-border {
-  background: linear-gradient(90deg, rgba(251, 146, 60, 0.4), rgba(239, 68, 68, 0.4), rgba(236, 72, 153, 0.4), rgba(251, 146, 60, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
+.purple-green-yellow {
+  background: radial-gradient(circle, rgba(178, 102, 255, 0.3) 0%, rgba(102, 255, 178, 0.3) 40%, rgba(255, 255, 102, 0.3) 70%, transparent 100%);
 }
 
-.forest-border {
-  background: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(132, 204, 22, 0.4), rgba(251, 191, 36, 0.4), rgba(34, 197, 94, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 4s ease infinite;
+.red-yellow-blue {
+  background: radial-gradient(circle, rgba(255, 102, 102, 0.3) 0%, rgba(255, 255, 102, 0.3) 40%, rgba(102, 178, 255, 0.3) 70%, transparent 100%);
 }
 
-.neon-border {
-  background: linear-gradient(90deg, rgba(236, 72, 153, 0.5), rgba(168, 85, 247, 0.5), rgba(6, 182, 212, 0.5), rgba(236, 72, 153, 0.5));
-  background-size: 200% 200%;
-  animation: gradientShift 3s ease infinite;
+.blue-purple-orange {
+  background: radial-gradient(circle, rgba(102, 204, 255, 0.3) 0%, rgba(204, 102, 255, 0.3) 40%, rgba(255, 204, 102, 0.3) 70%, transparent 100%);
 }
 
-.rainbow-border {
-  background: linear-gradient(90deg, rgba(239, 68, 68, 0.4), rgba(251, 146, 60, 0.4), rgba(251, 191, 36, 0.4), rgba(34, 197, 94, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(168, 85, 247, 0.4));
-  background-size: 300% 300%;
-  animation: gradientShift 5s ease infinite;
+.orange-green-purple {
+  background: radial-gradient(circle, rgba(255, 153, 102, 0.3) 0%, rgba(102, 255, 153, 0.3) 40%, rgba(153, 102, 255, 0.3) 70%, transparent 100%);
 }
 
-.fire-border {
-  background: linear-gradient(90deg, rgba(239, 68, 68, 0.5), rgba(251, 146, 60, 0.5), rgba(251, 191, 36, 0.4), rgba(239, 68, 68, 0.5));
-  background-size: 200% 200%;
-  animation: gradientShift 3s ease infinite;
+.green-pink-yellow {
+  background: radial-gradient(circle, rgba(102, 255, 204, 0.3) 0%, rgba(255, 102, 204, 0.3) 40%, rgba(204, 255, 102, 0.3) 70%, transparent 100%);
 }
 
-.ice-border {
-  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(168, 85, 247, 0.4), rgba(6, 182, 212, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 4.5s ease infinite;
+.pink-blue-yellow {
+  background: radial-gradient(circle, rgba(255, 102, 255, 0.3) 0%, rgba(102, 255, 255, 0.3) 40%, rgba(255, 255, 102, 0.3) 70%, transparent 100%);
 }
 
-.galaxy-border {
-  background: linear-gradient(90deg, rgba(30, 41, 59, 0.4), rgba(88, 28, 135, 0.4), rgba(147, 51, 234, 0.4), rgba(30, 41, 59, 0.4));
-  background-size: 200% 200%;
-  animation: gradientShift 5s ease infinite;
+.purple-pink-blue {
+  background: radial-gradient(circle, rgba(153, 102, 255, 0.3) 0%, rgba(255, 102, 153, 0.3) 40%, rgba(102, 255, 255, 0.3) 70%, transparent 100%);
 }
 
-@keyframes gradientShift {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+.orange-blue-purple {
+  background: radial-gradient(circle, rgba(255, 204, 102, 0.3) 0%, rgba(102, 204, 255, 0.3) 40%, rgba(204, 102, 255, 0.3) 70%, transparent 100%);
 }
 </style>
diff --git a/src/ext/browser/views/BookmarksView.vue b/src/ext/browser/views/BookmarksView.vue
@@ -231,7 +231,6 @@ const handleRemove = async (bookmark) => {
   try {
     const id = bookmark.id.toString();
     await browser.bookmarks.remove(id);
-    await bookmarkStorage.remove(id);
     bookmarksList.value = bookmarksList.value.filter((item) => item.id.toString() !== id);
     notify({ group: 'default', text: 'Bookmark successfully removed!' }, NOTIFICATION_DURATION);
     console.log(`Bookmark ${id} successfully removed`);
diff --git a/src/ext/browser/views/HealthCheckView.vue b/src/ext/browser/views/HealthCheckView.vue

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,6 @@`
`9`	`9`	`class="flex items-center"`
`10`	`10`	`>`
`11`	`11`	`<AppBadge`
`12`		`- v-motion-fade`
`13`	`12`	`closable`
`14`	`13`	`:color="getColor(tag.key)"`
`15`	`14`	`@onClose="onClose(tag.key, tag.value)"`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`		`- v-motion-fade-visible-once`
`4`	`3`	`class="group relative w-full max-w-sm overflow-hidden rounded-md border border-solid border-gray-100 bg-white shadow-sm transition-transform duration-300 ease-in-out hover:-translate-y-1 dark:border-neutral-900 dark:bg-neutral-950"`
`5`	`4`	`>`
`6`	`5`	`<a`