✨ Feature(custom): add infinite scroll animation for favorite badge

src/renderer/pages/Upload.vue

@@ -43,7 +43,12 @@
               @touchend="handleBadgeTouchEnd"
               @touchcancel="handleBadgeTouchEnd"
             >
-              <span class="badge-name">{{ getAbbreviatedName(picbedType) }}</span>
+              <div class="badge-text-mask">
+                <div class="badge-text-track">
+                  <span class="badge-name">{{ getPicbedName(picbedType) }}</span>
+                  <span class="badge-name shadow-text">{{ getPicbedName(picbedType) }}</span>
+                </div>
+              </div>
               <button
                 v-if="longPressedBadge === picbedType.id"
                 class="badge-remove"
@@ -943,26 +948,6 @@ function getPicbedName(picbedType: IFavoritePicbedItem): string {
   return `${target ? target.name : picbedType.type}-${picbedType.configName}`
 }
 
-const truncatePart = (part: string): string => {
-  let partCount = 0
-  let res = ''
-  for (const char of part) {
-    const isDoubleByte = char.charCodeAt(0) > 127
-    const nextCount = partCount + (isDoubleByte ? 2 : 1)
-    if (nextCount > 4) {
-      return res
-    }
-    res += char
-    partCount = nextCount
-  }
-  return res
-}
-
-function getAbbreviatedName(picbedType: IFavoritePicbedItem): string {
-  const name = getPicbedName(picbedType)
-  return name.split('-').map(truncatePart).join('-')
-}
-
 function isCurrentPicbed(picbedType: IFavoritePicbedItem): boolean {
   return defaultIdG.value === picbedType.id
 }

src/renderer/pages/css/UploadPage.css

@@ -153,6 +153,7 @@ html, body {
   flex-shrink: 0;
   user-select: none;
   position: relative;
+  overflow: hidden;
 }
 
 .picbed-badge:hover {
@@ -162,6 +163,43 @@ html, body {
   transform: translateY(-1px);
 }
 
+.badge-text-mask {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.badge-text-track {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge-text-track .badge-name.shadow-text {
+  display: none;
+}
+
+.picbed-badge:hover .badge-text-track {
+  display: flex;
+  width: fit-content;
+  text-overflow: clip;
+  animation: badge-scroll 5s linear infinite;
+}
+
+.picbed-badge:hover .badge-name {
+  padding-right: 20px;
+}
+
+.picbed-badge:hover .badge-name.shadow-text {
+  display: block;
+}
+
+@keyframes badge-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
 .picbed-badge.is-active {
   border-color: var(--color-accent);
   border-width: 0.1rem;
@@ -174,9 +212,6 @@ html, body {
 
 .badge-name {
   line-height: 1;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }