add folders structure

app/views/dashboard/index.html.erb

@@ -3,7 +3,7 @@
   <div class="flex justify-between mb-4 items-center">
     <h1 class="text-4xl font-bold"><span class="hidden md:inline">Document</span> Templates</h1>
     <div class="flex space-x-2">
-      <% if params[:q].present? || @pagy.pages > 1 %>
+      <% if params[:q].present? || @pagy.pages > 1 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>
       <% if can?(:create, ::Template) %>
@@ -15,17 +15,31 @@
       <% end %>
     </div>
   </div>
-  <% if @pagy.count > 0 %>
-    <div class="grid gap-4 md:grid-cols-3">
-      <%= render partial: 'templates/template', collection: @templates %>
+  <% view_archived_html = capture do %>
+    <% if current_account.templates.where.not(deleted_at: nil).exists? %>
+      <div>
+        <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
+      </div>
+    <% end %>
+  <% end %>
+  <% if @template_folders.present? %>
+    <div class="grid gap-4 md:grid-cols-3 <%= 'mb-6' if @templates.present? %>">
+      <%= render partial: 'template_folders/folder', collection: @template_folders, as: :folder %>
     </div>
-    <% view_archived_html = capture do %>
-      <% if current_account.templates.where.not(deleted_at: nil).exists? %>
-        <div>
-          <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
+    <% if @templates.blank? %>
+      <% if @pagy.pages > 1 %>
+        <%= render 'shared/pagination', pagy: @pagy, left_additional_html: view_archived_html %>
+      <% elsif params[:q].blank? %>
+        <div class="mt-2">
+          <%= view_archived_html %>
         </div>
       <% end %>
     <% end %>
+  <% end %>
+  <% if @templates.present? %>
+    <div class="grid gap-4 md:grid-cols-3">
+      <%= render partial: 'templates/template', collection: @templates %>
+    </div>
     <% if @pagy.pages > 1 %>
       <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates', left_additional_html: view_archived_html %>
     <% else %>

app/views/icons/_arrow_up_right.html.erb

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M17 7l-10 10"></path>
+  <path d="M8 7l9 0l0 9"></path>
+</svg>

app/views/icons/_folder.html.erb

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+</svg>

app/views/icons/_folder_share.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M13 19h-8a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4"></path>
+  <path d="M16 22l5 -5"></path>
+  <path d="M21 21.5v-4.5h-4.5"></path>
+</svg>

app/views/icons/_pencil_share.html.erb

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path>
+  <path d="M13.5 6.5l4 4"></path>
+  <path d="M16 22l5 -5"></path>
+  <path d="M21 21.5v-4.5h-4.5"></path>
+</svg>

app/views/shared/_pagination.html.erb

@@ -2,7 +2,7 @@
 <% if @pagy.pages > 1 %>
   <div class="flex my-6 justify-center md:justify-between">
     <div class="hidden md:block text-sm">
-      <%= @pagy.from %>-<%= @pagy.to %> of <%= @pagy.count %> <%= local_assigns[:items_name] || 'items' %>
+      <%= @pagy.from %>-<%= local_assigns.fetch(:to, @pagy.to) %> of <%= local_assigns.fetch(:count, @pagy.count) %> <%= local_assigns[:items_name] || 'items' %>
       <%= local_assigns[:left_additional_html] %>
     </div>
     <div class="join">

app/views/template_folders/_folder.html.erb

@@ -0,0 +1,12 @@
+<% is_long = folder.name.size > 32 %>
+<a href="<%= folder_path(folder) %>" class="flex h-full flex-col justify-between rounded-2xl py-5 px-6 w-full bg-base-200">
+  <% if !is_long %>
+    <%= svg_icon('folder', class: 'w-6 h-6') %>
+  <% end %>
+  <div class="text-lg font-semibold mt-1" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <%= is_long ? 2 : 1 %>;">
+    <% if is_long %>
+      <%= svg_icon('folder', class: 'w-6 h-6 inline') %>
+    <% end %>
+    <%= folder.name %>
+  </div>
+</a>

app/views/template_folders/edit.html.erb

@@ -0,0 +1,10 @@
+<%= render 'shared/turbo_modal', title: 'Rename Folder' do %>
+  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+    <div class="form-control my-6">
+      <%= f.text_field :name, required: true, placeholder: 'Folder Name...', class: 'base-input w-full', autofocus: true %>
+    </div>
+    <div class="form-control">
+      <%= f.button button_title(title: 'Rename', disabled_with: 'Saving'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

app/views/template_folders/show.html.erb

@@ -0,0 +1,45 @@
+<div>
+  <%= link_to root_path do %>
+    &larr;
+    <span>Home</span>
+  <% end %>
+</div>
+<div class="flex justify-between mb-4 items-center">
+  <h1 class="text-4xl font-bold flex items-center space-x-2">
+    <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
+    <span class="peer">
+      <%= @template_folder.name %>
+    </span>
+    <% if can?(:update, @template_folder) && @template_folder.name != TemplateFolder::DEFAULT_NAME %>
+      <span class="pl-1 opacity-0 hover:opacity-100 peer-hover:opacity-100">
+        <a href="<%= edit_folder_path(@template_folder) %>" data-turbo-frame="modal">
+          <%= svg_icon('pencil', class: 'w-7 h-7') %>
+        </a>
+      </span>
+    <% end %>
+  </h1>
+  <div class="flex space-x-2">
+    <% if params[:q].present? || @pagy.pages > 1 %>
+      <%= render 'shared/search_input' %>
+    <% end %>
+    <% if can?(:create, ::Template) %>
+      <%= render 'templates/upload_button', folder_name: @template_folder.name %>
+      <%= link_to new_template_path(folder_name: @template_folder.name), class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
+        <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+        <span class="hidden md:block">Create</span>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+<% if @pagy.count > 0 %>
+  <div class="grid gap-4 md:grid-cols-3">
+    <%= render partial: 'templates/template', collection: @templates %>
+  </div>
+  <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates' %>
+<% elsif params[:q].present? %>
+  <div class="text-center">
+    <div class="mt-16 text-3xl font-semibold">
+      Templates not Found
+    </div>
+  </div>
+<% end %>

app/views/templates/_template.html.erb

@@ -8,33 +8,58 @@
         <%= svg_icon('user', class: 'w-4 h-4') %>
         <span><%= template.author.full_name.presence || template.author.email %></span>
       </p>
-      <p class="flex items-center space-x-1 text-xs text-base-content/60">
-        <%= svg_icon('calendar', class: 'w-4 h-4') %>
-        <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
+      <p class="flex text-xs text-base-content/60">
+        <span class="flex items-center space-x-1 w-1/2">
+          <%= svg_icon('calendar', class: 'w-4 h-4') %>
+          <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
+        </span>
+        <% if template.deleted_at? %>
+          <span class="flex items-center space-x-1 w-1/2">
+            <%= svg_icon('folder', class: 'w-4 h-4 flex-shrink-0') %>
+            <span class="truncate"><%= template.folder.name %></span>
+          </span>
+        <% end %>
       </p>
     </div>
   </a>
-  <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden md:group-hover:block" style="right: 40px">
-    <% if template.deleted_at? && can?(:update, template) %>
-      <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
-        <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
-        <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+  <div class="absolute top-0 bottom-0 w-0 flex items-center hidden md:group-hover:flex" style="right: 37px">
+    <div class="space-y-1">
+      <% if can?(:update, template) && !template.deleted_at? %>
+        <span class="tooltip tooltip-left" data-tip="Move">
+          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('folder_share', class: 'w-4 h-4') %>
+          </a>
+        </span>
       <% end %>
-    <% elsif can?(:update, template) %>
-      <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-        <%= svg_icon('pencil', class: 'w-4 h-4') %>
-      </a>
-    <% end %>
-    <% if can?(:create, template) %>
-      <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-        <%= svg_icon('copy', class: 'w-4 h-4') %>
-      </a>
-    <% end %>
-    <% if !template.deleted_at? && can?(:destroy, template) %>
-      <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
-        <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
-        <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+      <% if template.deleted_at? && can?(:update, template) %>
+        <span class="tooltip tooltip-left" data-tip="Restore">
+          <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
+            <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
+            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <% end %>
+        </span>
+      <% elsif can?(:update, template) %>
+        <span class="tooltip tooltip-left" data-tip="Edit">
+          <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('pencil', class: 'w-4 h-4') %>
+          </a>
+        </span>
       <% end %>
-    <% end %>
+      <% if can?(:create, template) %>
+        <span class="tooltip tooltip-left" data-tip="Clone">
+          <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('copy', class: 'w-4 h-4') %>
+          </a>
+        </span>
+      <% end %>
+      <% if !template.deleted_at? && can?(:destroy, template) %>
+        <span class="tooltip tooltip-left" data-tip="Archive">
+          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
+            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
+            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <% end %>
+        </span>
+      <% end %>
+    </div>
   </div>
 </div>

app/views/templates/_title.html.erb

@@ -1,11 +1,28 @@
-<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-center mb-8">
-  <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-    <%= template.name %>
-    <% if template.deleted_at? %>
-      <span class="badge badge-outline badge-lg align-middle">Archived</span>
-    <% end %>
-  </h1>
-  <div class="flex md:justify-between space-x-2 flex-none">
+<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-start mb-3">
+  <div>
+    <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+      <%= template.name %>
+      <% if template.deleted_at? %>
+        <span class="badge badge-outline badge-lg align-middle">Archived</span>
+      <% end %>
+    </h1>
+    <div class="flex items-center">
+      <a href="<%= folder_path(@template.folder) %>" class="flex items-center space-x-1 mt-1 peer">
+        <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0') %>
+        <span class="text-sm">
+          <%= @template.folder.name %>
+        </span>
+      </a>
+      <% if can?(:update, template) %>
+        <span class="pl-1 tooltip tooltip-right opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
+          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
+            <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
+          </a>
+        </span>
+      <% end %>
+    </div>
+  </div>
+  <div class="flex md:justify-between space-x-2 flex-none pt-1">
     <% if !template.deleted_at? && can?(:destroy, template) %>
       <%= button_to button_title(title: 'Remove', disabled_with: 'Removing', icon: svg_icon('trash', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
     <% end %>

app/views/templates/_upload_button.html.erb

@@ -14,4 +14,5 @@
     </span>
   </button>
   <input id="upload_template" name="files[]" class="hidden" onchange="this.form.requestSubmit()" type="file" accept="image/*, application/pdf<%= ', .docx, .doc, .xlsx, .xls' if Docuseal.multitenant? %>" multiple>
+  <input hidden name="folder_name" value="<%= local_assigns[:folder_name] %>">
 <% end %>

app/views/templates/new.html.erb

@@ -1,12 +1,23 @@
 <%= render 'shared/turbo_modal', title: @base_template ? 'Clone Template' : 'New Document Template' do %>
-  <%= form_for @template, data: { turbo_frame: :_top } do |f| %>
+  <%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
     <% if @base_template %>
       <%= hidden_field_tag :base_template_id, @base_template.id %>
     <% end %>
-    <div class="form-control my-6">
+    <div class="form-control mt-6">
       <%= f.text_field :name, required: true, placeholder: 'Template Name', class: 'base-input' %>
     </div>
-    <div class="form-control mt-4">
+    <div class="mt-3 mb-4 flex items-center justify-between">
+      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
+        <%= svg_icon('folder', class: 'w-6 h-6') %>
+      </a>
+      <folder-autocomplete class="flex justify-between w-full">
+        <input id="folder_name" type="text" class="w-64 outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
+        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="link peer-focus:hidden mr-1.5">
+          Change Folder
+        </a>
+      </folder-autocomplete>
+    </div>
+    <div class="form-control">
       <%= f.button button_title(title: @base_template ? 'Submit' : 'Create', disabled_with: 'Creating'), class: 'base-button' %>
     </div>
   <% end %>

app/views/templates_archived/index.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= link_to root_path(@template) do %>
+  <%= link_to root_path do %>
     &larr;
     <span>Back to Active</span>
   <% end %>

app/views/templates_folders/edit.html.erb

@@ -0,0 +1,12 @@
+<%= render 'shared/turbo_modal', title: 'Move Into Folder' do %>
+  <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+    <div class="form-control my-6">
+      <folder-autocomplete class="block" data-submit-on-select="true">
+        <%= f.text_field :name, required: true, placeholder: 'New Folder Name...', class: 'base-input w-full', autofocus: true %>
+      </folder-autocomplete>
+    </div>
+    <div class="form-control">
+      <%= f.button button_title(title: 'Move', disabled_with: 'Moving'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>