refactor settings panes, simplify admin page

24 files changed, 439 insertions, 400 deletions

diff --git a/src/guff/post-types.cr b/src/guff/post-types.cr
new file mode 100644
index 0000000..d55c0f6
--- /dev/null
+++ b/src/guff/post-types.cr
@@ -0,0 +1,21 @@
+module Guff
+  POST_TYPES = {
+    blog: {
+      id:   "blog",
+      name: "Blog Post",
+      icon: "fa-sticky-note-o",
+    },
+
+    page: {
+      id:   "page",
+      name: "Page",
+      icon: "fa-file-text-o",
+    },
+
+    project: {
+      id:   "project",
+      name: "Project",
+      icon: "fa-cube",
+    },
+  }
+end
diff --git a/src/guff/views/admin-navbar.cr b/src/guff/views/admin-navbar.cr
new file mode 100644
index 0000000..3d88cd6
--- /dev/null
+++ b/src/guff/views/admin-navbar.cr
@@ -0,0 +1,9 @@
+require "./html"
+
+class Guff::Views::AdminNavbarView < Guff::Views::HTMLView
+  def initialize(context, @title : String)
+    super(context)
+  end
+
+  ECR.def_to_s("src/views/admin-navbar.ecr")
+end
diff --git a/src/guff/views/admin-page.cr b/src/guff/views/admin-page.cr
index aaa5104..63ebec2 100644
--- a/src/guff/views/admin-page.cr
+++ b/src/guff/views/admin-page.cr
@@ -5,154 +5,81 @@ require "./panes/*"
 class Guff::Views::AdminPageView < Guff::Views::HTMLView
   TITLE = "Guff Admin"
 
-  POST_TYPES = {
-    blog: {
-      id:   "blog",
-      name: "Blog Post",
-      icon: "fa-sticky-note-o",
-    },
-
-    page: {
-      id:   "page",
-      name: "Page",
-      icon: "fa-file-text-o",
-    },
-
-    project: {
-      id:   "project",
-      name: "Project",
-      icon: "fa-cube",
-    },
+  STYLES = %w{
+    assets/font-awesome-4.5.0/css/font-awesome.min.css
+    assets/bootstrap-3.3.6/css/bootstrap.min.css
+    assets/bootstrap-3.3.6/css/bootstrap-theme.min.css
+    assets/css/admin.css
   }
 
-  TABS = {
-    "admin" => [{
-      :id   => "home",
-      :css  => "active",
-      :icon => "fa-home",
-      :name => "Home",
-      :text => "View home tab.",
-    }, {
-      :id   => "posts",
-      :css  => "",
-      :icon => "fa-cubes",
-      :name => "Posts",
-      :text => "Manage blog, pages, and projects.",
-    }, {
-      :id   => "files",
-      :css  => "",
-      :icon => "fa-files-o",
-      :name => "Files",
-      :text => "Manage files.",
-    }, {
-      :id   => "settings",
-      :css  => "",
-      :icon => "fa-cogs",
-      :name => "Settings",
-      :text => "Configure settings.",
-    }],
-
-    "settings" => [{
-      :id   => "general",
-      :css  => "active",
-      :icon => "fa-cog",
-      :name => "General",
-      :text => "Manage general settings.",
-    }, {
-      :id   => "backups",
-      :css  => "",
-      :icon => "fa-archive",
-      :name => "Backups",
-      :text => "Manage backups.",
-    }, {
-      :id   => "import",
-      :css  => "",
-      :icon => "fa-upload",
-      :name => "Import / Export",
-      :text => "Import and export posts.",
-    }, {
-      :id   => "sites",
-      :css  => "",
-      :icon => "fa-sitemap",
-      :name => "Sites",
-      :text => "Manage sites and domains.",
-    }, {
-      :id   => "themes",
-      :css  => "",
-      :icon => "fa-eye",
-      :name => "Themes",
-      :text => "Manage themes.",
-    }, {
-      :id   => "users",
-      :css  => "",
-      :icon => "fa-users",
-      :name => "Users",
-      :text => "Manage users and permissions.",
-    }],
+  SCRIPTS = %w{
+    assets/jquery-2.2.1.min.js
+    assets/luigi-template-0.4.1.min.js
+    assets/js/util.js
+    assets/bootstrap-3.3.6/js/bootstrap.min.js
+    assets/ckeditor-4.5.8-custom/ckeditor.js
+    assets/js/search-field.js
+    assets/js/dropdown.js
+    assets/js/admin/tabs/users.js
+    assets/js/admin/tabs/posts.js
+    assets/js/admin/tabs/files.js
+    assets/js/admin/dialogs/user-add.js
+    assets/js/admin/dialogs/user-edit.js
+    assets/js/admin/dialogs/post-edit.js
+    assets/js/admin/dialogs/blog-edit.js
+    assets/js/admin/dialogs/page-edit.js
+    assets/js/admin/dialogs/project-edit.js
   }
 
-  NEW_POST_MENU_ITEM = "
-    <li>
-      <a
-        href='#'
-        title='Create new %s.'
-        class='add-post'
-        data-type='%s'
-      >
-        <i class='fa fa-fw %s'></i>
-        %s
-      </a>
-    </li>
-  "
-
-  TEMPLATES = {
-    :option => "
-      <option value='%s'>%s</option>
-    ",
-
-    :new_post_button => "
-      <a
-        href='#'
-        class='btn btn-primary'
-        title='Create new blog post, page, or project.'
-        data-toggle='dropdown'
-      >
-        <i class='fa fa-plus-circle'></i>
-        Create
-        <i class='fa fa-fw fa-caret-down'></i>
-      </a>
-
-      <ul class='dropdown-menu'>" + %i{blog page project}.map { |id|
-        NEW_POST_MENU_ITEM % %i{name id icon name}.map { |key|
-          POST_TYPES[id][key]
-        }
-      }.join + "
-      </ul>
-    ",
+  TABS = [{
+    :id   => "home",
+    :css  => "active",
+    :icon => "fa-home",
+    :name => "Home",
+    :text => "View home tab.",
+  }, {
+    :id   => "posts",
+    :css  => "",
+    :icon => "fa-cubes",
+    :name => "Posts",
+    :text => "Manage blog, pages, and projects.",
+  }, {
+    :id   => "files",
+    :css  => "",
+    :icon => "fa-files-o",
+    :name => "Files",
+    :text => "Manage files.",
+  }, {
+    :id   => "settings",
+    :css  => "",
+    :icon => "fa-cogs",
+    :name => "Settings",
+    :text => "Configure settings.",
+  }]
+
+  private def styles
+    super(STYLES)
+  end
 
-    :state_button => "
-      <a
-        href='#'
-        class='btn btn-default'
-        title='Mark as %s.'
-        data-val='%s'
-      >
-        <i class='fa %s'></i>
-        %s
-      </a>
-    ",
-  }
+  private def scripts
+    super(SCRIPTS)
+  end
 
-  def tabs(id : String)
-    super(id, TABS[id])
+  private def navbar
+    AdminNavbarView.new(@context, TITLE)
   end
 
-  private def new_post_button
-    TEMPLATES[:new_post_button]
+  private def tabs
+    super("admin", TABS)
   end
 
-  private def page_data
-    { post_types: POST_TYPES}.to_json
+  private def panes
+    String.build do |io|
+      io << Panes::Admin::Home.new(@context)
+      io << Panes::Admin::Posts.new(@context)
+      io << Panes::Admin::Files.new(@context)
+      io << Panes::Admin::Settings.new(@context)
+    end
   end
 
   private def dialogs
@@ -165,12 +92,8 @@ class Guff::Views::AdminPageView < Guff::Views::HTMLView
     end
   end
 
-  private def admin_panes
-    String.build do |io|
-      io << Panes::Admin::Home.new(@context)
-      io << Panes::Admin::Posts.new(@context)
-      io << Panes::Admin::Files.new(@context)
-    end
+  private def page_data
+    { post_types: POST_TYPES}.to_json
   end
 
   ECR.def_to_s("src/views/admin-page.ecr")
diff --git a/src/guff/views/dialogs/admin/page-edit.cr b/src/guff/views/dialogs/admin/page-edit.cr
index 363ee00..1df8b30 100644
--- a/src/guff/views/dialogs/admin/page-edit.cr
+++ b/src/guff/views/dialogs/admin/page-edit.cr
@@ -1,9 +1,9 @@
 require "./post-edit"
 
 class Guff::Views::Dialogs::Admin::PageEdit < Guff::Views::Dialogs::Admin::PostEdit
-  private def theme_options
-    tmpl = Guff::Views::AdminPageView::TEMPLATES[:option]
+  OPTION = "<option value='%s'>%s</option>"
 
+  private def theme_options
     [{
       "id"    => "site-default",
       "name"  => "Site Default",
@@ -16,7 +16,7 @@ class Guff::Views::Dialogs::Admin::PageEdit < Guff::Views::Dialogs::Admin::PostE
         }.map { |k| row["theme_#{k}"] },
       }
     }).map { |row|
-      tmpl % %w{id name}.map { |k| row[k] }
+      OPTION % %w{id name}.map { |k| row[k] }
     }.join("")
   end
 
diff --git a/src/guff/views/dialogs/admin/post-edit.cr b/src/guff/views/dialogs/admin/post-edit.cr
index 640580e..abaaa50 100644
--- a/src/guff/views/dialogs/admin/post-edit.cr
+++ b/src/guff/views/dialogs/admin/post-edit.cr
@@ -1,10 +1,19 @@
 class Guff::Views::Dialogs::Admin::PostEdit < Guff::Views::HTMLView
+  STATE_BUTTON_TEMPLATE = "
+    <a
+      href='#'
+      class='btn btn-default'
+      title='Mark as %s.'
+      data-val='%s'
+    >
+      <i class='fa %s'></i>
+      %s
+    </a>
+  "
   protected def state_buttons
-    tmpl = Guff::Views::AdminPageView::TEMPLATES[:state_button]
-
     @state_buttons ||= String.build do |io|
       @context.models.state.get_states.each do |row|
-        io << tmpl % [
+        io << STATE_BUTTON_TEMPLATE % [
           h(row["name"]),
           h(row["state"]),
           h(row["icon"]),
diff --git a/src/guff/views/dialogs/admin/user.cr b/src/guff/views/dialogs/admin/user.cr
index fbb71da..df4708e 100644
--- a/src/guff/views/dialogs/admin/user.cr
+++ b/src/guff/views/dialogs/admin/user.cr
@@ -1,10 +1,10 @@
 class Guff::Views::Dialogs::Admin::User < Guff::Views::HTMLView
-  protected def role_options
-    tmpl = Guff::Views::AdminPageView::TEMPLATES[:option]
+  OPTION = "<option value='%s'>%s</option>"
 
+  protected def role_options
     @role_options ||= String.build do |io|
       @context.models.role.get_roles.each do |row|
-        io << tmpl % %w{role name}.map { |key| h(row[key]) }
+        io << OPTION % %w{role name}.map { |key| h(row[key]) }
       end
     end
   end
diff --git a/src/guff/views/panes/admin/pane.cr b/src/guff/views/panes/admin/pane.cr
index eba64d8..483badd 100644
--- a/src/guff/views/panes/admin/pane.cr
+++ b/src/guff/views/panes/admin/pane.cr
@@ -1,7 +1,41 @@
 require "../../html"
 
 class Guff::Views::Panes::Admin::Pane < Guff::Views::HTMLView
+  NEW_POST_MENU_ITEM = "
+    <li>
+      <a
+        href='#'
+        title='Create new %s.'
+        class='add-post'
+        data-type='%s'
+      >
+        <i class='fa fa-fw %s'></i>
+        %s
+      </a>
+    </li>
+  "
+
+  NEW_POST_BUTTON = "
+    <a
+      href='#'
+      class='btn btn-primary'
+      title='Create new blog post, page, or project.'
+      data-toggle='dropdown'
+    >
+      <i class='fa fa-plus-circle'></i>
+      Create
+      <i class='fa fa-fw fa-caret-down'></i>
+    </a>
+
+    <ul class='dropdown-menu'>" + %i{blog page project}.map { |id|
+      NEW_POST_MENU_ITEM % %i{name id icon name}.map { |key|
+        POST_TYPES[id][key]
+      }
+    }.join + "
+    </ul>
+  "
+
   protected def new_post_button
-    Guff::Views::AdminPageView::TEMPLATES[:new_post_button]
+    NEW_POST_BUTTON
   end
 end
diff --git a/src/guff/views/panes/admin/settings.cr b/src/guff/views/panes/admin/settings.cr
new file mode 100644
index 0000000..c9d4f92
--- /dev/null
+++ b/src/guff/views/panes/admin/settings.cr
@@ -0,0 +1,56 @@
+class Guff::Views::Panes::Admin::Settings < Guff::Views::HTMLView
+  TABS = [{
+    :id   => "general",
+    :css  => "active",
+    :icon => "fa-cog",
+    :name => "General",
+    :text => "Manage general settings.",
+  }, {
+    :id   => "backups",
+    :css  => "",
+    :icon => "fa-archive",
+    :name => "Backups",
+    :text => "Manage backups.",
+  }, {
+    :id   => "import",
+    :css  => "",
+    :icon => "fa-upload",
+    :name => "Import / Export",
+    :text => "Import and export posts.",
+  }, {
+    :id   => "sites",
+    :css  => "",
+    :icon => "fa-sitemap",
+    :name => "Sites",
+    :text => "Manage sites and domains.",
+  }, {
+    :id   => "themes",
+    :css  => "",
+    :icon => "fa-eye",
+    :name => "Themes",
+    :text => "Manage themes.",
+  }, {
+    :id   => "users",
+    :css  => "",
+    :icon => "fa-users",
+    :name => "Users",
+    :text => "Manage users and permissions.",
+  }]
+
+  private def tabs
+    super("settings", TABS)
+  end
+
+  private def panes
+    String.build do |io|
+      io << Panes::Settings::General.new(@context)
+      io << Panes::Settings::Backups.new(@context)
+      io << Panes::Settings::Import.new(@context)
+      io << Panes::Settings::Sites.new(@context)
+      io << Panes::Settings::Themes.new(@context)
+      io << Panes::Settings::Users.new(@context)
+    end
+  end
+
+  ECR.def_to_s("src/views/panes/admin/settings.ecr")
+end
diff --git a/src/guff/views/panes/settings/backups.cr b/src/guff/views/panes/settings/backups.cr
new file mode 100644
index 0000000..0fe4bbf
--- /dev/null
+++ b/src/guff/views/panes/settings/backups.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::Backups < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/backups.ecr")
+end
diff --git a/src/guff/views/panes/settings/general.cr b/src/guff/views/panes/settings/general.cr
new file mode 100644
index 0000000..7037fcb
--- /dev/null
+++ b/src/guff/views/panes/settings/general.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::General < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/general.ecr")
+end
diff --git a/src/guff/views/panes/settings/import.cr b/src/guff/views/panes/settings/import.cr
new file mode 100644
index 0000000..244dba3
--- /dev/null
+++ b/src/guff/views/panes/settings/import.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::Import < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/import.ecr")
+end
diff --git a/src/guff/views/panes/settings/sites.cr b/src/guff/views/panes/settings/sites.cr
new file mode 100644
index 0000000..86d7718
--- /dev/null
+++ b/src/guff/views/panes/settings/sites.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::Sites < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/sites.ecr")
+end
diff --git a/src/guff/views/panes/settings/themes.cr b/src/guff/views/panes/settings/themes.cr
new file mode 100644
index 0000000..d1a90d9
--- /dev/null
+++ b/src/guff/views/panes/settings/themes.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::Themes < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/themes.ecr")
+end
diff --git a/src/guff/views/panes/settings/users.cr b/src/guff/views/panes/settings/users.cr
new file mode 100644
index 0000000..21922cb
--- /dev/null
+++ b/src/guff/views/panes/settings/users.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Panes::Settings::Users < Guff::Views::HTMLView
+  ECR.def_to_s("src/views/panes/settings/users.ecr")
+end
diff --git a/src/views/admin-navbar.ecr b/src/views/admin-navbar.ecr
new file mode 100644
index 0000000..4a06b15
--- /dev/null
+++ b/src/views/admin-navbar.ecr
@@ -0,0 +1,29 @@
+<div
+  class='navbar navbar-inverse navbar-static-top'
+  role='navigation'
+>
+  <div class='container-fluid'>
+    <div class='navbar-header'>
+      <a
+        href='admin.html'
+        class='navbar-brand'
+        title='Reload admin page.'
+      >
+        <i class='fa fa-bomb'></i>
+        <%= h(@title) %>
+      </a><!-- navbar-brand -->
+    </div><!-- navbar-default -->
+
+    <ul class='nav navbar-nav navbar-right'>
+      <li>
+        <a
+          href='logout.html'
+          title='Log out.'
+        >
+          <i class='fa fa-power-off'></i>
+          Log Out
+        </a>
+      </li>
+    </ul><!-- nav -->
+  </div><!-- container-fluid -->
+</div><!-- navbar -->
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index 5b9f352..1eb030a 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -3,266 +3,30 @@
   <head>
     <meta charset="utf-8"/>
     <title><%= h(TITLE) %></title>
-
-    <%=
-      styles %w{
-        assets/font-awesome-4.5.0/css/font-awesome.min.css
-        assets/bootstrap-3.3.6/css/bootstrap.min.css
-        assets/bootstrap-3.3.6/css/bootstrap-theme.min.css
-        assets/css/admin.css
-      }
-    %>
+    <%= styles %>
   </head>
 
   <body>
-    <div
-      class='navbar navbar-inverse navbar-static-top'
-      role='navigation'
-    >
-      <div class='container-fluid'>
-        <div class='navbar-header'>
-          <a
-            href='admin.html'
-            class='navbar-brand'
-          >
-            <i class='fa fa-bomb'></i>
-            <%= h(TITLE) %>
-          </a><!-- navbar-brand -->
-        </div><!-- navbar-default -->
-
-        <ul class='nav navbar-nav navbar-right'>
-          <li>
-            <a
-              href='logout.html'
-              title='Log out.'
-            >
-              <i class='fa fa-power-off'></i>
-              Log Out
-            </a>
-          </li>
-        </ul><!-- nav -->
-      </div><!-- container-fluid -->
-    </div><!-- navbar -->
+    <%= navbar %>
 
     <div class='container'>
       <div class='col-md-12'>
         <ul class='nav nav-tabs nav-justified' role='tablist'><%=
-          tabs("admin")
+          tabs
         %></ul><!-- nav -->
 
-        <div class='tab-content'>
-          <%= admin_panes %>
-
-          <div
-            id='admin-pane-settings'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='panel panel-default'>
-              <div class='panel-body'>
-                <div class='row'>
-                  <div class='col-md-3'>
-                    <ul class='nav nav-pills nav-stacked' role='tablist'><%=
-                      tabs("settings")
-                    %></ul><!-- nav -->
-                  </div><!-- col-md-3 -->
-
-                  <div class='col-md-9'>
-                    <div class='tab-content'>
-                      <div
-                        id='settings-pane-general'
-                        class='tab-pane active'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: general settings
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-users'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                            <div class='btn-toolbar'>
-                              <div class='btn-group btn-group-sm'>
-                                <a
-                                  href='#'
-                                  class='btn btn-primary'
-                                  title='Create new user.'
-                                  data-toggle='modal'
-                                  data-target='#user-add-dialog'
-                                >
-                                  <i class='fa fa-user-plus'></i>
-                                  New User
-                                </a><!-- btn -->
-                              </div><!-- btn-group -->
-
-                              <div class='btn-group btn-group-sm pull-right'>
-                                <a
-                                  href='#'
-                                  class='btn btn-default search-toggle'
-                                  title='Toggle search field.'
-                                >
-                                  <i class='fa fa-fw fa-search'></i>
-                                </a><!-- btn-->
-                              </div><!-- btn-group -->
-
-                              <div class='btn-group btn-group-sm pull-right'>
-                                <a
-                                  href='#'
-                                  id='users-reload'
-                                  class='btn btn-default'
-                                  title='Reload users.'
-                                >
-                                  <span class='loading'>
-                                    <i class='fa fa-fw fa-refresh'></i>
-                                  </span>
-
-                                  <span class='loading hidden'>
-                                    <i class='fa fa-fw fa-spinner fa-spin'></i>
-                                  </span>
-                                </a><!-- #reload -->
-                              </div><!-- btn-group -->
-                            </div><!-- btn-toolbar -->
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-heading hidden search-toggle'>
-                            <div class='input-group input-group-sm'>
-                              <span class='input-group-addon'>
-                                <i class='fa fa-search'></i>
-                              </span>
-
-                              <input
-                                type='text'
-                                id='users-q'
-                                class='form-control'
-                                title='Enter search terms'
-                              />
-                            </div><!-- input-group -->
-                          </div><!-- panel-heading -->
-
-                          <div id='users' class='list-group'>
-                            <span class='list-group-item disabled'>
-                              <i class='fa fa-spinner fa-spin'></i>
-                              Loading...
-                            </span><!-- list-group-item -->
-                          </div><!-- list-group -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-themes'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div id='themes' class='panel-body'>
-                            <p>
-                              TODO: themes
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-sites'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div id='sites' class='panel-body'>
-                            <p>
-                              TODO: sites settings
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-backups'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: backups
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-import'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: import
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-                    </div><!-- tab-content -->
-                  </div><!-- col-md-9 -->
-                </div><!-- row -->
-              </div><!-- panel-body -->
-            </div><!-- panel -->
-          </div><!-- tab-pane -->
-        </div><!-- tab-content -->
+        <div class='tab-content'><%=
+          panes 
+        %></div><!-- tab-content -->
       </div><!-- col-md-12 -->
     </div><!-- container -->
 
     <%= dialogs %>
   </body>
 
-
   <script type='text/javascript'><!--
     var DATA = <%= page_data %>;
-    // -->
-  </script>
-  <%=
-    scripts %w{
-      assets/jquery-2.2.1.min.js
-      assets/luigi-template-0.4.1.min.js
-      assets/js/util.js
-      assets/bootstrap-3.3.6/js/bootstrap.min.js
-      assets/ckeditor-4.5.8-custom/ckeditor.js
-      assets/js/search-field.js
-      assets/js/dropdown.js
-      assets/js/admin/tabs/users.js
-      assets/js/admin/tabs/posts.js
-      assets/js/admin/tabs/files.js
-      assets/js/admin/dialogs/user-add.js
-      assets/js/admin/dialogs/user-edit.js
-      assets/js/admin/dialogs/post-edit.js
-      assets/js/admin/dialogs/blog-edit.js
-      assets/js/admin/dialogs/page-edit.js
-      assets/js/admin/dialogs/project-edit.js
-    }
-  %>
+  // --></script>
+
+  <%= scripts %>
 </html>
diff --git a/src/views/panes/admin/posts.ecr b/src/views/panes/admin/posts.ecr
index 5e6571d..5b8e669 100644
--- a/src/views/panes/admin/posts.ecr
+++ b/src/views/panes/admin/posts.ecr
@@ -33,7 +33,7 @@
               :type => "divider",
             }] + %i{blog page project}.map { |id|
               # get post type
-              post_type = Guff::Views::AdminPageView::POST_TYPES[id]
+              post_type = Guff::POST_TYPES[id]
 
               {
                 :id   => post_type[:id],
diff --git a/src/views/panes/admin/settings.ecr b/src/views/panes/admin/settings.ecr
new file mode 100644
index 0000000..0824ce8
--- /dev/null
+++ b/src/views/panes/admin/settings.ecr
@@ -0,0 +1,23 @@
+<div
+  id='admin-pane-settings'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-body'>
+      <div class='row'>
+        <div class='col-md-3'>
+          <ul class='nav nav-pills nav-stacked' role='tablist'><%=
+            tabs
+          %></ul><!-- nav -->
+        </div><!-- col-md-3 -->
+
+        <div class='col-md-9'>
+          <div class='tab-content'><%=
+            panes
+          %></div><!-- tab-content -->
+        </div><!-- col-md-9 -->
+      </div><!-- row -->
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/backups.ecr b/src/views/panes/settings/backups.ecr
new file mode 100644
index 0000000..a9f4fc9
--- /dev/null
+++ b/src/views/panes/settings/backups.ecr
@@ -0,0 +1,16 @@
+<div
+  id='settings-pane-backups'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        TODO: backups
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/general.ecr b/src/views/panes/settings/general.ecr
new file mode 100644
index 0000000..65fba81
--- /dev/null
+++ b/src/views/panes/settings/general.ecr
@@ -0,0 +1,16 @@
+<div
+  id='settings-pane-general'
+  class='tab-pane active'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        TODO: general settings
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/import.ecr b/src/views/panes/settings/import.ecr
new file mode 100644
index 0000000..fe8e94f
--- /dev/null
+++ b/src/views/panes/settings/import.ecr
@@ -0,0 +1,16 @@
+<div
+  id='settings-pane-import'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        TODO: import
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/sites.ecr b/src/views/panes/settings/sites.ecr
new file mode 100644
index 0000000..774a023
--- /dev/null
+++ b/src/views/panes/settings/sites.ecr
@@ -0,0 +1,16 @@
+<div
+  id='settings-pane-sites'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+    </div><!-- panel-heading -->
+
+    <div id='sites' class='panel-body'>
+      <p>
+        TODO: sites settings
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/themes.ecr b/src/views/panes/settings/themes.ecr
new file mode 100644
index 0000000..a88f24e
--- /dev/null
+++ b/src/views/panes/settings/themes.ecr
@@ -0,0 +1,16 @@
+<div
+  id='settings-pane-themes'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+    </div><!-- panel-heading -->
+
+    <div id='themes' class='panel-body'>
+      <p>
+        TODO: themes
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/settings/users.ecr b/src/views/panes/settings/users.ecr
new file mode 100644
index 0000000..87ca397
--- /dev/null
+++ b/src/views/panes/settings/users.ecr
@@ -0,0 +1,73 @@
+<div
+  id='settings-pane-users'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            class='btn btn-primary'
+            title='Create new user.'
+            data-toggle='modal'
+            data-target='#user-add-dialog'
+          >
+            <i class='fa fa-user-plus'></i>
+            New User
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            class='btn btn-default search-toggle'
+            title='Toggle search field.'
+          >
+            <i class='fa fa-fw fa-search'></i>
+          </a><!-- btn-->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='users-reload'
+            class='btn btn-default'
+            title='Reload users.'
+          >
+            <span class='loading'>
+              <i class='fa fa-fw fa-refresh'></i>
+            </span>
+
+            <span class='loading hidden'>
+              <i class='fa fa-fw fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- #reload -->
+        </div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-heading hidden search-toggle'>
+      <div class='input-group input-group-sm'>
+        <span class='input-group-addon'>
+          <i class='fa fa-search'></i>
+        </span>
+
+        <input
+          type='text'
+          id='users-q'
+          class='form-control'
+          title='Enter search terms'
+        />
+      </div><!-- input-group -->
+    </div><!-- panel-heading -->
+
+    <div id='users' class='list-group'>
+      <span class='list-group-item disabled'>
+        <i class='fa fa-spinner fa-spin'></i>
+        Loading...
+      </span><!-- list-group-item -->
+    </div><!-- list-group -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->