From 6ae62a60fc57b542f09e051e5952e2fa4057b24e Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Tue, 20 Jan 2026 18:45:57 +0100
Subject: [PATCH] fix Store layout: use list-item pattern for full-width
 elements

---
 src/main/assets/apps/store/store_content.rml | 226 ++++++++-----------
 1 file changed, 93 insertions(+), 133 deletions(-)

diff --git a/src/main/assets/apps/store/store_content.rml b/src/main/assets/apps/store/store_content.rml
index 68c3344..f3e5a25 100644
--- a/src/main/assets/apps/store/store_content.rml
+++ b/src/main/assets/apps/store/store_content.rml
@@ -12,152 +12,126 @@
     </div>
 
     <div style="flex: 1; overflow: auto;">
-        <!-- Featured Banner -->
-        <div style="margin: 16px; padding: 24px; background-color: #7c3aed; border-radius: 16px;">
-            <div style="font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 4px;">FEATURED</div>
-            <div style="font-size: 24px; color: #FFFFFF; font-weight: bold; margin-bottom: 8px;">Weather Pro</div>
-            <div style="font-size: 14px; color: rgba(255,255,255,0.9); margin-bottom: 16px;">Beautiful forecasts with live radar</div>
-            <div class="btn-primary" onclick="installApp('weather')" style="width: 100px;">
-                <span>Install</span>
+        <!-- Featured App -->
+        <div class="list-header">Featured</div>
+
+        <div class="list-item" onclick="installApp('weather')" style="background-color: #7c3aed;">
+            <div class="list-item-avatar" style="background-color: #9c5afd; border-radius: 12px;">W</div>
+            <div class="list-item-content">
+                <span class="list-item-title" style="color: #FFFFFF;">Weather Pro</span>
+                <span class="list-item-subtitle" style="color: #E8D5FF;">Beautiful forecasts with live radar</span>
+            </div>
+            <div class="btn-icon">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
             </div>
         </div>
 
-        <!-- Categories -->
-        <div class="section-header">
-            <span class="section-title">Categories</span>
-        </div>
+        <!-- Categories Header -->
+        <div class="list-header">Categories</div>
 
-        <div style="display: flex; gap: 12px; padding: 0 16px; overflow-x: auto;">
-            <div onclick="openCategory('games')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-                <div style="width: 48px; height: 48px; border-radius: 12px; background-color: #F44336; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
-                    <span style="font-size: 24px; color: #FFFFFF;">G</span>
-                </div>
-                <span style="font-size: 14px; color: #FFFFFF;">Games</span>
+        <!-- Categories Row -->
+        <div style="display: flex; padding: 0 16px 16px 16px; gap: 12px;">
+            <div onclick="openCategory('games')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
+                <div class="list-item-avatar" style="background-color: #F44336;">G</div>
+                <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Games</span>
             </div>
-            <div onclick="openCategory('social')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-                <div style="width: 48px; height: 48px; border-radius: 12px; background-color: #2196F3; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
-                    <span style="font-size: 24px; color: #FFFFFF;">S</span>
-                </div>
-                <span style="font-size: 14px; color: #FFFFFF;">Social</span>
+            <div onclick="openCategory('social')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
+                <div class="list-item-avatar" style="background-color: #2196F3;">S</div>
+                <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Social</span>
             </div>
-            <div onclick="openCategory('tools')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-                <div style="width: 48px; height: 48px; border-radius: 12px; background-color: #4CAF50; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
-                    <span style="font-size: 24px; color: #FFFFFF;">T</span>
-                </div>
-                <span style="font-size: 14px; color: #FFFFFF;">Tools</span>
+            <div onclick="openCategory('tools')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
+                <div class="list-item-avatar" style="background-color: #4CAF50;">T</div>
+                <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Tools</span>
             </div>
-            <div onclick="openCategory('media')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;">
-                <div style="width: 48px; height: 48px; border-radius: 12px; background-color: #FF9800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
-                    <span style="font-size: 24px; color: #FFFFFF;">M</span>
-                </div>
-                <span style="font-size: 14px; color: #FFFFFF;">Media</span>
+            <div onclick="openCategory('media')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
+                <div class="list-item-avatar" style="background-color: #FF9800;">M</div>
+                <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Media</span>
             </div>
         </div>
 
         <!-- Popular Apps -->
-        <div class="section-header">
-            <span class="section-title">Popular Apps</span>
-            <span class="section-action" onclick="seeAllPopular()">SEE ALL</span>
+        <div class="list-header">Popular Apps</div>
+
+        <div class="list-item" onclick="openAppDetails('socialvr')">
+            <div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div>
+            <div class="list-item-content">
+                <span class="list-item-title">SocialVR</span>
+                <span class="list-item-subtitle">Connect in VR</span>
+            </div>
+            <div class="btn-icon" onclick="installApp('socialvr'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
+            </div>
         </div>
 
-        <div class="list">
-            <div class="list-item" onclick="openAppDetails('socialvr')">
-                <div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">SocialVR</span>
-                    <span class="list-item-subtitle">Connect in virtual reality</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('socialvr'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+        <div class="list-item" onclick="openAppDetails('vrfit')">
+            <div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
+            <div class="list-item-content">
+                <span class="list-item-title">VR Fitness</span>
+                <span class="list-item-subtitle">Workout in VR</span>
             </div>
-
-            <div class="list-divider"></div>
-
-            <div class="list-item" onclick="openAppDetails('vrfit')">
-                <div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">VR Fitness</span>
-                    <span class="list-item-subtitle">Workout in virtual worlds</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('vrfit'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+            <div class="btn-icon" onclick="installApp('vrfit'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
             </div>
+        </div>
 
-            <div class="list-divider"></div>
-
-            <div class="list-item" onclick="openAppDetails('notesync')">
-                <div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">NoteSync</span>
-                    <span class="list-item-subtitle">Notes across all devices</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('notesync'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+        <div class="list-item" onclick="openAppDetails('notesync')">
+            <div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div>
+            <div class="list-item-content">
+                <span class="list-item-title">NoteSync</span>
+                <span class="list-item-subtitle">Notes everywhere</span>
             </div>
+            <div class="btn-icon" onclick="installApp('notesync'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
+            </div>
+        </div>
 
-            <div class="list-divider"></div>
-
-            <div class="list-item" onclick="openAppDetails('mediaplayer')">
-                <div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">Media Player</span>
-                    <span class="list-item-subtitle">Play all video formats</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('mediaplayer'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+        <div class="list-item" onclick="openAppDetails('mediaplayer')">
+            <div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div>
+            <div class="list-item-content">
+                <span class="list-item-title">Media Player</span>
+                <span class="list-item-subtitle">Play all formats</span>
+            </div>
+            <div class="btn-icon" onclick="installApp('mediaplayer'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
             </div>
         </div>
 
         <!-- New Releases -->
-        <div class="section-header">
-            <span class="section-title">New Releases</span>
-            <span class="section-action" onclick="seeAllNew()">SEE ALL</span>
-        </div>
+        <div class="list-header">New Releases</div>
 
-        <div class="list">
-            <div class="list-item" onclick="openAppDetails('calculator')">
-                <div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">Calculator</span>
-                    <span class="list-item-subtitle">Scientific calculator</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('calculator'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+        <div class="list-item" onclick="openAppDetails('calculator')">
+            <div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div>
+            <div class="list-item-content">
+                <span class="list-item-title">Calculator</span>
+                <span class="list-item-subtitle">Scientific calc</span>
             </div>
-
-            <div class="list-divider"></div>
-
-            <div class="list-item" onclick="openAppDetails('filemanager')">
-                <div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">File Manager</span>
-                    <span class="list-item-subtitle">Organize your files</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('filemanager'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
-            </div>
-
-            <div class="list-divider"></div>
-
-            <div class="list-item" onclick="openAppDetails('clock')">
-                <div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div>
-                <div class="list-item-content">
-                    <span class="list-item-title">Clock</span>
-                    <span class="list-item-subtitle">Alarms, timers, world clock</span>
-                </div>
-                <div class="btn-outline" onclick="installApp('clock'); event.stopPropagation();" style="padding: 8px 16px;">
-                    <span style="font-size: 14px;">Install</span>
-                </div>
+            <div class="btn-icon" onclick="installApp('calculator'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
+            </div>
+        </div>
+
+        <div class="list-item" onclick="openAppDetails('filemanager')">
+            <div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
+            <div class="list-item-content">
+                <span class="list-item-title">File Manager</span>
+                <span class="list-item-subtitle">Organize files</span>
+            </div>
+            <div class="btn-icon" onclick="installApp('filemanager'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
+            </div>
+        </div>
+
+        <div class="list-item" onclick="openAppDetails('clock')">
+            <div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div>
+            <div class="list-item-content">
+                <span class="list-item-title">Clock</span>
+                <span class="list-item-subtitle">Alarms, timers</span>
+            </div>
+            <div class="btn-icon" onclick="installApp('clock'); event.stopPropagation();">
+                <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
             </div>
         </div>
 
-        <!-- Bottom padding -->
         <div style="height: 24px;"></div>
     </div>
 </div>
@@ -191,19 +165,5 @@ function installApp(appId)
     end
 end
 
-function seeAllPopular()
-    print("[Store] See all popular apps")
-    if showToast then
-        showToast("Popular apps")
-    end
-end
-
-function seeAllNew()
-    print("[Store] See all new releases")
-    if showToast then
-        showToast("New releases")
-    end
-end
-
 print("[Store] Content loaded")
 </script>