got the basic ui, dragging, sorting etc going for widgets acp

public/src/forum/admin/themes.js

@@ -102,6 +102,8 @@ define(['forum/admin/settings'], function(Settings) {
 		tabIndent.config.tab = '    ';
 		tabIndent.render(customCSSEl);
 
+		Themes.prepareWidgets();
+
 		Settings.prepare();
 	}
 
@@ -132,5 +134,27 @@ define(['forum/admin/settings'], function(Settings) {
 		themeContainer.appendChild(themeFrag);
 	}
 
+	Themes.prepareWidgets = function() {
+		$('#widgets .panel').draggable({
+			helper: function(e) {
+				return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width());
+			},
+			connectToSortable: ".widget-area"
+		});
+
+		$('#widgets .widget-area').sortable({
+			update: function (event, ui) {
+				if (!ui.item.hasClass('block')) {
+					ui.item.addClass('block');
+					ui.item.children('.panel-heading').append('<div class="toggle-widget pull-right pointer"><i class="fa fa-chevron-down"></i></div>');
+				}
+				
+			}
+		}).on('click', '.toggle-widget', function() {
+			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+		});
+		
+	};
+
 	return Themes;
 });

public/templates/admin/themes.tpl

@@ -9,7 +9,7 @@
 	</ul>
 
 	<div class="tab-content">
-		<div class="tab-pane active" id="themes">
+		<div class="tab-pane" id="themes">
 			<h3>Installed Themes</h3>
 			<p>
 				The following themes are currently installed in this NodeBB instance.
@@ -50,8 +50,44 @@
 
 			<button class="btn btn-primary" id="save">Save</button>
 		</div>
-		<div class="tab-pane" id="widgets">
+		<div class="tab-pane active" id="widgets">
 			<h3>Widgets</h3>
+
+			<div class="row">
+				<div class="col-xs-6">
+					<h4>Available Widgets</h4>
+					<div class="well">
+						<div class="panel panel-default pointer">
+							<div class="panel-heading">
+								<strong>HTML</strong> <small>Any text, html, or embedded script.</small>
+							</div>
+							<div class="panel-body hidden">
+								<textarea class="form-control" rows="6" placeholder="Enter HTML"></textarea>
+							</div>
+						</div>
+						<div class="panel panel-default pointer">
+							<div class="panel-heading">
+								<strong>Markdown</strong> <small>Markdown formatted text</small>
+							</div>
+							<div class="panel-body hidden">
+								<textarea class="form-control" rows="6" placeholder="Enter Markdown"></textarea>
+							</div>
+						</div>
+						<!-- BEGIN widgets -->
+
+						<!-- END widgets -->
+					</div>
+				</div>
+
+				<div class="col-xs-6">
+					<!-- BEGIN areas -->
+					<h4>{areas.name}</h4>
+					<div class="well widget-area">
+
+					</div>
+					<!-- END areas -->
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

src/routes/admin.js

@@ -410,9 +410,9 @@ var nconf = require('nconf'),
 			});
 
 			app.get('/themes', function (req, res) {
-				plugins.fireHook('filter:widgets.getAreas', [], function(err, widgets) {
+				plugins.fireHook('filter:widgets.getAreas', [], function(err, areas) {
 					res.json(200, {
-						widgets: widgets
+						areas: areas
 					});
 				});
 			});