add folders structure

app/controllers/api/template_folders_autocomplete_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Api
+  class TemplateFoldersAutocompleteController < ApiBaseController
+    load_and_authorize_resource :template_folder, parent: false
+
+    LIMIT = 100
+
+    def index
+      template_folders = @template_folders.joins(:templates).where(templates: { deleted_at: nil }).distinct
+      template_folders = TemplateFolders.search(template_folders, params[:q]).limit(LIMIT)
+
+      render json: template_folders.as_json(only: %i[name deleted_at])
+    end
+  end
+end

app/controllers/dashboard_controller.rb

@@ -6,17 +6,56 @@ class DashboardController < ApplicationController
   before_action :maybe_redirect_product_url
   before_action :maybe_render_landing
 
+  load_and_authorize_resource :template_folder, parent: false
   load_and_authorize_resource :template, parent: false
 
+  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
+  TEMPLATES_PER_PAGE = 12
+  FOLDERS_PER_PAGE = 18
+
   def index
-    @templates = @templates.active.preload(:author).order(id: :desc)
+    @template_folders = filter_template_folders(@template_folders)
-    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @template_folders = pagy(
+      @template_folders,
+      items: FOLDERS_PER_PAGE,
+      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
+    )
+
+    if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
+      @templates = @templates.none
+    else
+      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
+      @templates = filter_templates(@templates)
 
-    @pagy, @templates = pagy(@templates, items: 12)
+      items =
+        if @template_folders.size < 4
+          TEMPLATES_PER_PAGE
+        else
+          (@template_folders.size < 7 ? 9 : 6)
+        end
+
+      @pagy, @templates = pagy(@templates, items:)
+    end
   end
 
   private
 
+  def filter_template_folders(template_folders)
+    rel = template_folders.joins(:active_templates)
+                          .order(id: :desc)
+                          .distinct
+
+    TemplateFolders.search(rel, params[:q])
+  end
+
+  def filter_templates(templates)
+    rel = templates.active.preload(:author).order(id: :desc)
+                   .where(folder_id: current_account.default_template_folder.id)
+
+    Templates.search(rel, params[:q])
+  end
+
   def maybe_redirect_product_url
     return if !Docuseal.multitenant? || signed_in?
 

app/controllers/template_folders_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class TemplateFoldersController < ApplicationController
+  load_and_authorize_resource :template_folder
+
+  def show
+    @templates = @template_folder.templates.active.preload(:author).order(id: :desc)
+    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @templates = pagy(@templates, items: 12)
+  end
+
+  def edit; end
+
+  def update
+    if @template_folder != current_account.default_template_folder &&
+       @template_folder.update(template_folder_params)
+      redirect_to folder_path(@template_folder), notice: 'Folder name has been updated'
+    else
+      redirect_to folder_path(@template_folder), alert: 'Unable to rename folder'
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_archived_controller.rb

@@ -4,7 +4,7 @@ class TemplatesArchivedController < ApplicationController
   load_and_authorize_resource :template, parent: false
 
   def index
-    @templates = @templates.where.not(deleted_at: nil).preload(:author).order(id: :desc)
+    @templates = @templates.where.not(deleted_at: nil).preload(:author, :folder).order(id: :desc)
     @templates = Templates.search(@templates, params[:q])
 
     @pagy, @templates = pagy(@templates, items: 12)

app/controllers/templates_controller.rb

@@ -31,6 +31,7 @@ class TemplatesController < ApplicationController
   def create
     @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
 
     if @template.save

app/controllers/templates_folders_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class TemplatesFoldersController < ApplicationController
+  load_and_authorize_resource :template
+
+  def edit; end
+
+  def update
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:name])
+
+    if @template.save
+      redirect_back(fallback_location: template_path(@template), notice: 'Document template has been moved')
+    else
+      redirect_back(fallback_location: template_path(@template), notice: 'Unable to move template into folder')
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_uploads_controller.rb

@@ -6,6 +6,7 @@ class TemplatesUploadsController < ApplicationController
   def create
     @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.name = File.basename(params[:files].first.original_filename, '.*')
 
     @template.save!

app/javascript/application.js

@@ -16,6 +16,7 @@ import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
 import SubmittersAutocomplete from './elements/submitter_autocomplete'
+import FolderAutocomplete from './elements/folder_autocomplete'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -45,6 +46,7 @@ window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
+window.customElements.define('folder-autocomplete', FolderAutocomplete)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {

app/javascript/elements/folder_autocomplete.js

@@ -0,0 +1,43 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: this.dataset.submitOnSelect === 'true' ? 0 : 1,
+      minLength: 0,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    this.input.value = item.name
+  }
+
+  fetch = (text, resolve) => {
+    const queryParams = new URLSearchParams({ q: text })
+
+    fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
+      const items = await resp.json()
+
+      resolve(items)
+    }).catch(() => {
+      resolve([])
+    })
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item.name
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}

app/models/account.rb

@@ -17,7 +17,7 @@ class Account < ApplicationRecord
   has_many :account_configs, dependent: :destroy
   has_many :templates, dependent: :destroy
   has_many :template_folders, dependent: :destroy
-  has_one :default_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },
+  has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },
           class_name: 'TemplateFolder', dependent: :destroy, inverse_of: :account
   has_many :submissions, through: :templates
   has_many :submitters, through: :submissions
@@ -27,9 +27,8 @@ class Account < ApplicationRecord
   attribute :timezone, :string, default: 'UTC'
   attribute :locale, :string, default: 'en-US'
 
-  def default_folder
+  def default_template_folder
-    super || template_folders.new(name: TemplateFolder::DEFAULT_NAME,
+    super || build_default_template_folder(name: TemplateFolder::DEFAULT_NAME,
-                                  author_id: users.minimum(:id))
+                                           author_id: users.minimum(:id)).tap(&:save!)
-                             .tap(&:save!)
   end
 end

app/models/template.rb

@@ -62,6 +62,6 @@ class Template < ApplicationRecord
   private
 
   def maybe_set_default_folder
-    self.folder ||= account.default_folder
+    self.folder ||= account.default_template_folder
   end
 end

app/models/template_folder.rb

@@ -28,7 +28,13 @@ class TemplateFolder < ApplicationRecord
   belongs_to :author, class_name: 'User'
   belongs_to :account
 
-  has_many :templates, dependent: :destroy
+  has_many :templates, dependent: :destroy, foreign_key: :folder_id, inverse_of: :folder
+  has_many :active_templates, -> { where(deleted_at: nil) },
+           class_name: 'Template', dependent: :destroy, foreign_key: :folder_id, inverse_of: :folder
 
   scope :active, -> { where(deleted_at: nil) }
+
+  def default?
+    name == DEFAULT_NAME
+  end
 end

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 %>
+  <% view_archived_html = capture do %>
-    <div class="grid gap-4 md:grid-cols-3">
+    <% if current_account.templates.where.not(deleted_at: nil).exists? %>
-      <%= render partial: 'templates/template', collection: @templates %>
+      <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 @templates.blank? %>
-      <% if current_account.templates.where.not(deleted_at: nil).exists? %>
+      <% if @pagy.pages > 1 %>
-        <div>
+        <%= render 'shared/pagination', pagy: @pagy, left_additional_html: view_archived_html %>
-          <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
+      <% 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">
+      <p class="flex text-xs text-base-content/60">
-        <%= svg_icon('calendar', class: 'w-4 h-4') %>
+        <span class="flex items-center space-x-1 w-1/2">
-        <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
+          <%= 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">
+  <div class="absolute top-0 bottom-0 w-0 flex items-center hidden md:group-hover:flex" style="right: 37px">
-    <% if template.deleted_at? && can?(:update, template) %>
+    <div class="space-y-1">
-      <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
+      <% if can?(:update, template) && !template.deleted_at? %>
-        <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
+        <span class="tooltip tooltip-left" data-tip="Move">
-        <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <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 %>
+      <% 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 %>
-    <% elsif can?(:update, template) %>
+      <% if can?(:create, template) %>
-      <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+        <span class="tooltip tooltip-left" data-tip="Clone">
-        <%= svg_icon('pencil', class: 'w-4 h-4') %>
+          <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">
-      </a>
+            <%= svg_icon('copy', class: 'w-4 h-4') %>
-    <% end %>
+          </a>
-    <% if can?(:create, template) %>
+        </span>
-      <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') %>
       <% end %>
-    <% 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">
+<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">
-  <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+  <div>
-    <%= template.name %>
+    <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-    <% if template.deleted_at? %>
+      <%= template.name %>
-      <span class="badge badge-outline badge-lg align-middle">Archived</span>
+      <% if template.deleted_at? %>
-    <% end %>
+        <span class="badge badge-outline badge-lg align-middle">Archived</span>
-  </h1>
+      <% end %>
-  <div class="flex md:justify-between space-x-2 flex-none">
+    </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 %>

config/routes.rb

@@ -32,6 +32,7 @@ Rails.application.routes.draw do
   namespace :api, defaults: { format: :json } do
     resources :attachments, only: %i[create]
     resources :submitters_autocomplete, only: %i[index]
+    resources :template_folders_autocomplete, only: %i[index]
     resources :submitter_email_clicks, only: %i[create]
     resources :submitter_form_views, only: %i[create]
     resources :submissions, only: %i[create]
@@ -51,10 +52,12 @@ Rails.application.routes.draw do
   resources :console_redirect, only: %i[index]
   resource :templates_upload, only: %i[create]
   resources :templates_archived, only: %i[index], path: 'archived'
+  resources :folders, only: %i[show edit update destroy], controller: 'template_folders'
   resources :templates, only: %i[new create edit show destroy] do
     resources :restore, only: %i[create], controller: 'templates_restore'
     resources :archived, only: %i[index], controller: 'templates_archived_submissions'
     resources :submissions, only: %i[new create]
+    resource :folder, only: %i[edit update], controller: 'templates_folders'
     resources :submissions_export, only: %i[index new]
   end
 

lib/accounts.rb

@@ -34,6 +34,7 @@ module Accounts
     new_template = Template.find(1).dup
     new_template.account_id = account.id
     new_template.slug = SecureRandom.base58(14)
+    new_template.folder = account.default_template_folder
 
     new_template.save!
 

lib/template_folders.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module TemplateFolders
+  module_function
+
+  def search(folders, keyword)
+    return folders if keyword.blank?
+
+    folders.where(TemplateFolder.arel_table[:name].lower.matches("%#{keyword.downcase}%"))
+  end
+
+  def find_or_create_by_name(author, name)
+    return author.account.default_template_folder if name.blank? || name == TemplateFolder::DEFAULT_NAME
+
+    author.account.template_folders.create_with(author:, account: author.account).find_or_create_by(name:)
+  end
+end