From ae1da42386aee30428a3aaec4a40db726e48a2cf Mon Sep 17 00:00:00 2001
From: Sebastien DUMETZ <s.dumetz@holusion.com>
Date: Thu, 15 Feb 2024 15:40:14 +0100
Subject: [PATCH] propagate search API changes to Home layout

---
 source/ui/screens/Home.ts    |  9 ++++++++-
 source/ui/state/strings.ts   |  4 ++--
 source/ui/styles/layout.scss | 15 ++++++++++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/source/ui/screens/Home.ts b/source/ui/screens/Home.ts
index 87cb44c5..3850e1a6 100644
--- a/source/ui/screens/Home.ts
+++ b/source/ui/screens/Home.ts
@@ -52,6 +52,8 @@ interface Upload{
     constructor()
     {
         super();
+        this.orderBy = "mtime";
+        this.orderDirection = "desc";
     }
 
     createRenderRoot() {
@@ -135,7 +137,7 @@ interface Upload{
                 ${"author" in scene? html`
                 <span style="flex: 1 0 6rem;overflow: hidden;text-overflow: ellipsis">${scene.name}</span>
                 <span style="flex: 0 5 auto; font-size:smaller">${scene.author}</span>
-                <span style="flex: 1 0 5rem;overflow: hidden;text-align: right;; font-size:smaller">${new Date(scene.ctime).toLocaleString()}</span>
+                <span style="flex: 1 0 5rem;overflow: hidden;text-align: right;; font-size:smaller">${new Date(scene.mtime).toLocaleString()}</span>
             `:scene.name}
             </a>
         `;
@@ -190,6 +192,11 @@ interface Upload{
         <div class="section">
             <h3>${this.t("ui.mtimeSection")}</h3>
             <div class="list list-items" style="position:relative;">
+                <span class="list-header">
+                    <span style="flex: 1 0 6rem;overflow: hidden;text-overflow: ellipsis">${this.t("ui.name")}</span>
+                    <span style="flex: 0 5 auto; font-size:smaller">${this.t("ui.author")}</span>
+                    <span style="flex: 1 0 5rem;overflow: hidden;text-align: right;; font-size:smaller">${this.t("ui.mtime")}</span>
+                </span>
                 ${repeat([
                     ...scenes.slice(0, 8),
                 ],({name})=>name , (scene)=>this.renderSceneCompact(scene))}
diff --git a/source/ui/state/strings.ts b/source/ui/state/strings.ts
index 103bbf7f..63a98969 100644
--- a/source/ui/state/strings.ts
+++ b/source/ui/state/strings.ts
@@ -188,8 +188,8 @@ export default {
       en: "rename"
     },
     name:{
-      fr: "ordre alphabethique",
-      en: "alphabetical"
+      fr: "nom",
+      en: "name"
     },
     sortBy:{
       fr: "Trier par",
diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
index 5f237ef9..069e3167 100644
--- a/source/ui/styles/layout.scss
+++ b/source/ui/styles/layout.scss
@@ -111,14 +111,15 @@ scene-card{
 }
 
 .list-items{
-  .list-item{
-      display:flex; 
+  
+  .list-item, .list-header{
+      display: flex; 
       flex: 1 1 auto;
       gap: 1rem;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: #000a;
+      background: #000;
       padding: 1rem;
       border-bottom: 1px solid $color-dark;
       text-decoration: none;
@@ -126,6 +127,14 @@ scene-card{
         background: #071922
       }
   }
+
+  .list-header{
+    font-size: 1.2rem;
+    font-weight: bold;
+    padding: 1.2rem 1rem 0.8rem 1rem;
+    border-bottom: 2px solid $color-dark;
+  }
+
   .list-item:nth-child(2n){
     background: #000;
     &:hover{