order playlists

app/views/home/_playlist_section.erb

@@ -23,7 +23,8 @@
           <div class="relative">
             <div class="overflow-auto no-scrollbar relative" data-scroll-target="scrollContainer">
               <div class="grid grid-cols-1- grid-flow-col grid-rows-1- sm:gap-x-2 md:grid-cols-4- md:gap-y-0- lg:gap-x-8">
-                <% Playlist.published.latests.where(playlist_type: playlist_type).order("release_date desc, id desc").limit(limit).each do |playlist| %>
+                <% Playlist.published.latests.where(playlist_type: playlist_type)
+                  .order("editor_choice_position asc, release_date desc, id desc").limit(limit).each do |playlist| %>
                   <div class="w-64 m-4">
                     <%= link_to playlist_path(playlist) do %>
                       <div class="group group-hover relative">

app/views/home/_playlist_section_wide.erb

@@ -9,13 +9,15 @@
           </h2>
         </div>
 
-        <div class="relative mx-2">
+        <div class="relative mx-2 mt-2">
           <div class="overflow-auto no-scrollbar relative">
 
             <div class="container mx-auto p-4-">
               <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
 
-                <% Playlist.published.latests.where(playlist_type: playlist_type).order("release_date desc, id desc").limit(limit).each_with_index do |playlist, index| %>
+                <% Playlist.published.where(playlist_type: playlist_type)
+                  .order("editor_choice_position asc, release_date, id desc").limit(limit).each_with_index do |playlist, index| %>
+
                   <div class=" <%= index == 0 ? "col-span-1 sm:col-span-2 sm:row-span-2 bg-brand-600" : "bg-default" %> ">
                     <%= link_to playlist_path(playlist) do %>
                       <div class="relative">
@@ -25,8 +27,8 @@
                           ) %>
                         </div>
                         <div class="space-y-1 text-sm text-left mt-2 p-2">
-                          <h3 class="font-medium leading-none">
-                              <%= playlist.title %>
+                          <h3 class="<%= index == 0 ? "text-2xl font-bold" : "font-medium leading-none" %>">
+                            <%= playlist.title %>
                           </h3>
                           <p class="text-xs text-default dark:text-default/40">
                             <%= t(:by, name: playlist.user.username) %>

db/migrate/20240722053122_add_position_to_playlist.rb

@@ -0,0 +1,5 @@
+class AddPositionToPlaylist < ActiveRecord::Migration[7.1]
+  def change
+    add_column :playlists, :editor_choice_position, :integer
+  end
+end