🎉 Sort assets ascending / descending

frontend/resources/images/icons/listing-list.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+  <path d="M37.5 437.5v25h425v-25zM25 400a25 25 0 00-25 25v50a25 25 0 0025 25h450a25 25 0 0025-25v-50a25 25 0 00-25-25zM37.5 37.5v25h425v-25zM25 0A25 25 0 000 25v50a25 25 0 0025 25h450a25 25 0 0025-25V25a25 25 0 00-25-25zm12.5 237.5v25h425v-25zM25 200a25 25 0 00-25 25v50a25 25 0 0025 25h450a25 25 0 0025-25v-50a25 25 0 00-25-25z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

frontend/resources/images/icons/listing-thumbs.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+  <path d="M37.5 37.5v150h150v-150zM25 0A25 25 0 000 25v175a25 25 0 0025 25h175a25 25 0 0025-25V25a25 25 0 00-25-25zm287.5 37.5v150h150v-150zM300 0a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V25a25 25 0 00-25-25zm12.5 312.5v150h150v-150zM300 275a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V300a25 25 0 00-25-25zM37.5 312.5v150h150v-150zM25 275a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V300a25 25 0 00-25-25z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

frontend/resources/images/icons/sort-ascending.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+  <path d="M169.748 283.25a25.007 23.438 0 0120.24 37.219L85.49 455.125h84.257a25.007 23.438 0 010 46.875H36.378a25.007 23.438 0 01-20.24-37.219l104.496-134.656H36.378a25.007 23.438 0 010-46.875zM353.133 2a25.007 23.438 0 0125.007 23.438v399.187l82.956-72.562a25.007 23.438 0 0134.143 34.25L370.204 495.688a25.007 23.438 0 01-34.143 0L211.026 386.313a25.007 23.438 0 0134.143-34.25l82.957 72.562V25.438A25.007 23.438 0 01353.133 2zm-250.07 0a25.007 23.438 0 0123.64 15.781l75.02 203.125a25.027 23.457 0 01-47.312 15.313l-11.437-31.094H63.152l-11.437 31.094A25.043 23.471 0 014.37 220.906L79.423 17.781A25.007 23.438 0 01103.063 2zm0 95.094L80.49 158.25h45.18z"/>
+</svg>

frontend/resources/images/icons/sort-descending.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+  <path d="M353.133 2a25.007 23.436 0 0125.007 23.436v399.16l82.956-72.557a25.007 23.436 0 0134.143 34.248L370.204 495.654a25.007 23.436 0 01-34.143 0L211.026 386.287a25.007 23.436 0 0134.143-34.248l82.957 72.557V25.436A25.007 23.436 0 01353.133 2zm-250.07 249.983a25.007 23.436 0 0123.64 15.78l75.02 203.112a25.027 23.455 0 11-47.312 15.311l-11.437-31.092H63.152l-11.437 31.092A25.043 23.47 0 114.37 470.875l75.054-203.112a25.007 23.436 0 0123.64-15.78zm0 95.087L80.49 408.223h45.18zM169.748 2a25.007 23.436 0 0120.24 37.216L85.49 173.863h84.257a25.007 23.436 0 110 46.872H36.378a25.007 23.436 0 01-20.24-37.216L120.635 48.872H36.378a25.007 23.436 0 010-46.872z"/>
+</svg>

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -118,9 +118,27 @@
     cursor: pointer;
   }
 
+  .listing-options {
+    background-color: $color-gray-60;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: $medium $small 0 $small;
+
+    .listing-option-btn {
+      cursor: pointer;
+      margin-left: $small;
+
+      svg {
+        fill: $color-gray-20;
+        height: 16px;
+        width: 16px;
+      }
+    }
+  }
+
   .asset-section {
     background-color: $color-gray-60;
-    border-top: 1px solid $color-gray-50;
     padding: $small;
     font-size: $fs12;
     color: $color-gray-20;
@@ -130,6 +148,11 @@
     // max-height: 30rem;
     // overflow-y: scroll;
 
+    // First child is the listing options buttons
+    &:not(:nth-child(2)) {
+      border-top: 1px solid $color-gray-50;
+    }
+
     .asset-title {
       display: flex;
       cursor: pointer;

frontend/src/app/main/data/workspace/libraries.cljs

@@ -193,7 +193,7 @@
        ptk/WatchEvent
        (watch [_ state s]
          (let [rchg {:type :add-typography
-                     :typography (assoc typography :ts (.now js/Date))}
+                     :typography typography}
                uchg {:type :del-typography
                      :id (:id typography)}]
            (rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true})

frontend/src/app/main/ui/icons.cljs

@@ -60,6 +60,8 @@
 (def libraries (icon-xref :libraries))
 (def library (icon-xref :library))
 (def line (icon-xref :line))
+(def listing-list (icon-xref :listing-list))
+(def listing-thumbs (icon-xref :listing-thumbs))
 (def line-height (icon-xref :line-height))
 (def loader (icon-xref :loader))
 (def lock (icon-xref :lock))
@@ -117,6 +119,8 @@
 (def shape-vdistribute (icon-xref :shape-vdistribute))
 (def size-horiz (icon-xref :size-horiz))
 (def size-vert (icon-xref :size-vert))
+(def sort-ascending (icon-xref :sort-ascending))
+(def sort-descending (icon-xref :sort-descending))
 (def strikethrough (icon-xref :strikethrough))
 (def stroke (icon-xref :stroke))
 (def sublevel (icon-xref :sublevel))

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -794,7 +794,7 @@
                  [(t locale "workspace.assets.delete") handle-delete-typography]]}]
      (when open?
        [:div.asset-list
-        (for [typography (sort-by :ts typographies)]
+        (for [typography typographies]
           [:& typography-entry
            {:key (:id typography)
             :typography typography
@@ -852,12 +852,13 @@
       (l/derived refs/workspace-local)))
 
 (defn apply-filters
-  [coll filters]
+  [coll filters reverse-sort?]
-  (->> coll
+  (let [comp-fn (if reverse-sort? > <)]
-    (filter (fn [item]
+    (->> coll
-              (or (matches-search (:name item "!$!") (:term filters))
+         (filter (fn [item]
-                  (matches-search (:value item "!$!") (:term filters)))))
+                   (or (matches-search (:name item "!$!") (:term filters))
-    (sort-by #(str/lower (:name %)))))
+                       (matches-search (:value item "!$!") (:term filters)))))
+         (sort-by #(str/lower (:name %)) comp-fn))))
 
 (mf/defc file-library
   [{:keys [file local? default-open? filters locale] :as props}]
@@ -871,6 +872,9 @@
                              (d/nilv true)))
         shared?        (:is-shared file)
         router         (mf/deref refs/router)
+
+        reverse-sort?  (mf/use-state false)
+
         toggle-open    (st/emitf (dwl/set-assets-box-open (:id file) :library (not open?)))
 
         url            (rt/resolve router :workspace
@@ -879,16 +883,21 @@
                                    {:page-id (get-in file [:data :pages 0])})
 
         colors-ref     (mf/use-memo (mf/deps (:id file)) #(file-colors-ref (:id file)))
-        colors         (apply-filters (mf/deref colors-ref) filters)
+        colors         (apply-filters (mf/deref colors-ref) filters @reverse-sort?)
 
         typography-ref (mf/use-memo (mf/deps (:id file)) #(file-typography-ref (:id file)))
-        typographies   (apply-filters (mf/deref typography-ref) filters)
+        typographies   (apply-filters (mf/deref typography-ref) filters @reverse-sort?)
 
         media-ref      (mf/use-memo (mf/deps (:id file)) #(file-media-ref (:id file)))
-        media          (apply-filters (mf/deref media-ref) filters)
+        media          (apply-filters (mf/deref media-ref) filters @reverse-sort?)
 
         components-ref (mf/use-memo (mf/deps (:id file)) #(file-components-ref (:id file)))
-        components     (apply-filters (mf/deref components-ref) filters)]
+        components     (apply-filters (mf/deref components-ref) filters @reverse-sort?)
+
+        toggle-sort
+        (mf/use-callback
+          (fn [event]
+            (swap! reverse-sort? not)))]
 
     [:div.tool-window
      [:div.tool-window-bar.library-bar
@@ -928,6 +937,12 @@
                                      (or (> (count typographies) 0)
                                          (str/empty? (:term filters))))]
          [:div.tool-window-content
+          [:div.listing-options
+           [:div.listing-option-btn {:on-click toggle-sort}
+            (if @reverse-sort?
+              i/sort-descending
+              i/sort-ascending)]
+           [:div.listing-option-btn i/listing-thumbs]]
           (when show-components?
             [:& components-box {:file-id (:id file)
                                 :local? local?