revert and add ellipsis

apps/cutelauncher/app.js

@@ -42,7 +42,7 @@
     Bangle.drawWidgets = () => { };
     Bangle.loadWidgets = () => { };
 
-    const ITEM_HEIGHT = 125;
+    const ITEM_HEIGHT = 110;
 
     E.showScroller({
         h: ITEM_HEIGHT,
@@ -55,75 +55,31 @@
             let icon = apps[idx].icon;
             let iconWidth = icon.width || 48;
             let iconHeight = icon.height || 48;
-            let maxSize = 60;
+            let maxSize = 70;
             let scale = Math.min(maxSize / iconWidth, maxSize / iconHeight);
             let scaledHeight = Math.floor(iconHeight * scale);
 
             // Center the icon horizontally
             let iconX = rect.x + (rect.w - maxSize) / 2;
+            g.drawImage(icon, iconX, rect.y, { scale: scale });
 
-            // Define rectangle size (independent of icon size)
+            // Draw app name with ellipsis if needed
-            const rectSize = 100;
+            let name = apps[idx].name;
-            const rectX = rect.x + (rect.w - rectSize) / 2;
+            let maxWidth = rect.w - 80; // Leave some padding
+            let textWidth = g.stringWidth(name);
 
-            // Draw rounded rectangle background using polygon
-            g.setColor(g.theme.bg2);
-            const r = 20; // increased radius from 10 to 20
-            const x1 = rectX - 5;
-            const y1 = rect.y + 5;
-            const x2 = rectX + rectSize + 5;
-            const y2 = rect.y + rectSize + 15;
-
-            // Create points for a rounded rectangle (approximating curves with more points per corner)
-            g.fillPoly([
-                x1 + r, y1,    // Top edge
-                x2 - r, y1,
-                x2 - r * 0.7, y1,
-                x2 - r * 0.4, y1 + r * 0.1,
-                x2 - r * 0.1, y1 + r * 0.4,  // Top right corner
-                x2, y1 + r * 0.7,
-                x2, y1 + r,
-                x2, y2 - r,    // Right edge
-                x2, y2 - r * 0.7,
-                x2 - r * 0.1, y2 - r * 0.4,
-                x2 - r * 0.4, y2 - r * 0.1,  // Bottom right corner
-                x2 - r * 0.7, y2,
-                x2 - r, y2,
-                x1 + r, y2,    // Bottom edge
-                x1 + r * 0.7, y2,
-                x1 + r * 0.4, y2 - r * 0.1,
-                x1 + r * 0.1, y2 - r * 0.4,  // Bottom left corner
-                x1, y2 - r * 0.7,
-                x1, y2 - r,
-                x1, y1 + r,    // Left edge
-                x1, y1 + r * 0.7,
-                x1 + r * 0.1, y1 + r * 0.4,
-                x1 + r * 0.4, y1 + r * 0.1,  // Top left corner
-                x1 + r * 0.7, y1
-            ]);
-            g.setColor(g.theme.fg);
-
-            // Draw icon centered in the top portion
-            let iconPadding = 12;
-            // Center icon within the rectangle
-            let iconXInRect = rectX + (rectSize - maxSize) / 2;
-            g.setBgColor(g.theme.bg2).drawImage(icon, iconXInRect, rect.y + iconPadding + 10, { scale: scale });
-
-            // Draw app name with ellipsis if too long
-            const maxWidth = rectSize - 10;
-            let text = apps[idx].name;
-            let textWidth = g.stringWidth(text);
             if (textWidth > maxWidth) {
-                const ellipsis = "...";
+                // Add ellipsis and truncate text
-                const ellipsisWidth = g.stringWidth(ellipsis);
+                while (textWidth > maxWidth - g.stringWidth("...") && name.length > 1) {
-                while (textWidth + ellipsisWidth > maxWidth && text.length > 0) {
+                    name = name.slice(0, -1);
-                    text = text.slice(0, -1);
+                    textWidth = g.stringWidth(name);
-                    textWidth = g.stringWidth(text);
                 }
-                text = text + ellipsis;
+                name += "...";
             }
-            let textY = rect.y + iconPadding + scaledHeight + 18;
+
-            g.drawString(text, rectX + rectSize / 2, textY);
+            // Position text below icon with padding
+            let textY = rect.y + scaledHeight + 4;
+            g.drawString(name, rect.x + rect.w / 2, textY);
         },
         select: (idx) => {
             // Launch the selected app

apps/cutelauncher/metadata.json

@@ -1,7 +1,7 @@
 {
     "id": "cutelauncher",
     "name": "Cute Launcher",
-    "version": "0.08",
+    "version": "0.09",
     "description": "A simple launcher app for Bangle.js 2 that makes use of the full touchscreen",
     "icon": "app.png",
     "type": "launch",