Merge branch 'dev' into 'dev'

Dev sync

See merge request kostikov/core!4

13 files changed, 779 insertions, 290 deletions

diff --git a/view/css/mod_cloud.css b/view/css/mod_cloud.css
index 83deddf8a..8dce7f180 100644
--- a/view/css/mod_cloud.css
+++ b/view/css/mod_cloud.css
@@ -1,10 +1,14 @@
 #files-mkdir-tools,
 #files-upload-tools,
-[id^="perms-panel-"] {
+.cloud-tool,
+.cloud-multi-tool,
+#multi-dbtn-acl,
+#multi-dropdown-button {
 	display: none;
 }
 
-[id^="perms-panel-"] {
+.attach-edit-panel,
+#attach-multi-edit-panel {
 	padding: 3px 10px 0px 10px !important;
 }
 
@@ -17,28 +21,40 @@
 	width: 100%;
 }
 
-#cloud-index td:nth-child(1){
+#cloud-index td:nth-child(3) a {
+	display: block;
+}
+
+#cloud-index td:nth-child(1) {
 	padding: 7px 3px 7px 10px;
 }
 
-#cloud-index td:nth-child(2){
+#cloud-index td:nth-child(6) {
+	padding: 7px 10px 7px 3px;
+}
+
+#cloud-index td:nth-child(3) {
 	word-break: break-all;
 }
 
-#cloud-index th:nth-child(8),
-#cloud-index td:nth-child(8){
+#cloud-index td:nth-child(4) {
+	white-space: nowrap;
+}
+
+#cloud-index th:nth-child(7),
+#cloud-index td:nth-child(7) {
 	padding: 7px 3px;
 	white-space: nowrap;
 }
 
-#cloud-index th:nth-child(9),
-#cloud-index td:nth-child(9){
-	padding: 7px 10px 7px 7px;
+#cloud-index th:nth-child(8),
+#cloud-index td:nth-child(8) {
+	padding: 7px 10px;
 	white-space: nowrap;
 }
 
 .cloud-index-tool {
-	padding: 7px 10px;
+	padding: 7px 0px;
 }
 
 #files-upload {
@@ -52,9 +68,39 @@
 	box-shadow: inset 0 0px 7px #5cb85c;
 }
 
+.attach-drop-ok {
+	background-color: aliceblue !important;
+}
+
+.attach-drop-zone {
+	border-top-width: 3px;
+	border-top-style: dashed;
+	border-top-color: #eee;
+	border-bottom-width: 3px;
+	border-bottom-style: dashed;
+	border-bottom-color: #eee;
+}
+
 .upload-progress-bar {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
 	background-size: 0px;
 	padding: 0px !important;
 	height: 3px;
 }
+
+.bootstrap-tagsinput input[type=text] {
+	height: unset;
+}
+
+.bootstrap-tagsinput {
+	box-shadow: none;
+}
+
+.breadcrumb {
+	padding: 0px 10px 0px 10px;
+	margin: 0px 0px 3px 0px;
+}
+
+.breadcrumb-item {
+	margin: 0px;
+}
diff --git a/view/js/acl.js b/view/js/acl.js
index 940fdaa44..ee6cb062f 100644
--- a/view/js/acl.js
+++ b/view/js/acl.js
@@ -30,7 +30,7 @@ function ACL(backend_url) {
 	that.custom       = $("#acl-custom");
 	that.acl_select   = $("#acl-select");
 
-	// set the initial ACL lists in case the enclosing form gets submitted before the ajax loader completes. 
+	// set the initial ACL lists in case the enclosing form gets submitted before the ajax loader completes.
 	//that.on_submit();
 
 	/*events*/
@@ -90,7 +90,7 @@ ACL.prototype.get_form_data = function(event) {
 
 }
 
-// no longer called only on submit - call to update whenever a change occurs to the acl list. 
+// no longer called only on submit - call to update whenever a change occurs to the acl list.
 ACL.prototype.on_submit = function() {
 
 	$('.acl-field').remove();
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index 27011b4d4..dc757d5c8 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -171,6 +171,7 @@ function string2bb(element) {
 			template: contact_format
 		};
 
+/*
 		// Autocomplete forums
 		forums = {
 			match: /(^|\s)(\!\!*)([^ \n]{2,})$/,
@@ -180,7 +181,7 @@ function string2bb(element) {
 			replace: editor_replace,
 			template: contact_format
 		};
-
+*/
 
 		// Autocomplete hashtags
 		tags = {
diff --git a/view/js/main.js b/view/js/main.js
index ca82e3101..7df705603 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -44,7 +44,7 @@ if(localStorage.getItem('uid') !== localUser.toString()) {
 window.onstorage = function(e) {
 	if(e.key === 'uid' && parseInt(e.newValue) !== localUser) {
 		if(window_needs_alert) {
-			window_needs_alert = false; 
+			window_needs_alert = false;
 			alert("Your identity has changed. Page reload required!");
 			window.location.reload();
 			return;
@@ -99,12 +99,12 @@ $(document).ready(function() {
 		wordSeparator : aStr['t16'],
 		numbers       : aStr['t17'],
 	};
-	
+
 	jQuery.timeago.settings.allowFuture = true;
 
 	if(sse_enabled) {
 		if(typeof(window.SharedWorker) === 'undefined') {
-			// notifications with multiple tabs open will not work very well in this scenario 
+			// notifications with multiple tabs open will not work very well in this scenario
 			var evtSource = new EventSource('/sse');
 
 			evtSource.addEventListener('notifications', function(e) {
@@ -298,7 +298,7 @@ function handle_comment_form(e) {
 		$('#' + commentElm).addClass('expanded').removeAttr('placeholder');
 		$('#' + commentElm).attr('tabindex','9');
 		$('#' + submitElm).attr('tabindex','10');
-		
+
 		form.find(':not(:visible)').show();
 	}
 
@@ -452,7 +452,7 @@ function insertCommentAttach(comment,id) {
 	$('body').css('cursor', 'wait');
 
 	$('#invisible-comment-upload').trigger('click');
- 
+
 	return false;
 
 }
@@ -631,7 +631,7 @@ function updateConvItems(mode,data) {
 	if(mode === 'append') {
 		next = 'threads-end';
 	}
-	
+
 	if(mode === 'replace') {
 		$('.thread-parent').remove(); // clear existing content
 	}
@@ -652,7 +652,7 @@ function updateConvItems(mode,data) {
 			if($('#collapsed-comments-'+itmId).is(':visible'))
 				isVisible = true;
 
-			// insert the content according to the mode and first_page 
+			// insert the content according to the mode and first_page
 			// and whether or not the content exists already (overwrite it)
 
 			if($('#' + ident).length == 0) {
@@ -765,7 +765,7 @@ function updateConvItems(mode,data) {
 	}
 
 	// Setup to determine if the media player is playing. This affects
-	// some content loading decisions. 
+	// some content loading decisions.
 
 	$('video').off('playing');
 	$('video').off('pause');
@@ -1253,24 +1253,25 @@ function dopin(id) {
 }
 
 function dropItem(url, object) {
+	var confirm = confirmDelete();
+	if(confirm) {
+		var id = url.split('/')[2];
+		$('body').css('cursor', 'wait');
+		$(object + ', #pinned-wrapper-' + id).css('opacity', 0.33);
 
-        var confirm = confirmDelete();
-        if(confirm) {
-                var id = url.split('/')[2];
-                $('body').css('cursor', 'wait');
-                $(object + ', #pinned-wrapper-' + id).fadeTo('fast', 0.33, function () {
-                        $.get(url).done(function() {
-                                $(object + ', #pinned-wrapper-' + id).remove();
-                                $('body').css('cursor', 'auto');
-                        });
-                });
-                if($('#wall-item-pinned-' + id).length)
-                    $.post('pin/pin', { 'id' : id });
-                return true;
-        }
-        else {
-                return false;
+		$.get(url, function() {
+			$(object + ', #pinned-wrapper-' + id).remove();
+			$('body').css('cursor', 'auto');
+		});
+
+		if($('#wall-item-pinned-' + id).length)
+			$.post('pin/pin', { 'id' : id });
+
+		return true;
         }
+	else {
+		return false;
+	}
 }
 
 function dosubthread(ident) {
@@ -1339,18 +1340,6 @@ function lockview(type, id) {
 	});
 }
 
-function filestorage(event, nick, id) {
-	$('#cloud-index-' + last_filestorage_id).removeClass('cloud-index-active');
-	$('#perms-panel-' + last_filestorage_id).hide().html('');
-	$('#file-edit-' + id).show();
-	$.get('filestorage/' + nick + '/' + id + '/edit', function(data) {
-		$('#cloud-index-' + id).addClass('cloud-index-active');
-		$('#perms-panel-' + id).html(data).show();
-		$('#file-edit-' + id).hide();
-		last_filestorage_id = id;
-	});
-}
-
 function submitPoll(id) {
 
 	$.post('vote/' + id,
@@ -1473,17 +1462,17 @@ function preview_mail() {
 }
 
 function bin2hex(s) {
-	// Converts the binary representation of data to hex    
-	//   
-	// version: 812.316  
-	// discuss at: http://phpjs.org/functions/bin2hex  
-	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)  
-	// +   bugfixed by: Onno Marsman  
-	// +   bugfixed by: Linuxworld  
-	// *     example 1: bin2hex('Kev');  
-	// *     returns 1: '4b6576'  
-	// *     example 2: bin2hex(String.fromCharCode(0x00));  
-	// *     returns 2: '00'  
+	// Converts the binary representation of data to hex
+	//
+	// version: 812.316
+	// discuss at: http://phpjs.org/functions/bin2hex
+	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+	// +   bugfixed by: Onno Marsman
+	// +   bugfixed by: Linuxworld
+	// *     example 1: bin2hex('Kev');
+	// *     returns 1: '4b6576'
+	// *     example 2: bin2hex(String.fromCharCode(0x00));
+	// *     returns 2: '00'
 	var v,i, f = 0, a = [];
 	s += '';
 	f = s.length;
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 031895caf..cbd9c2a08 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -3,22 +3,348 @@
  */
 
 $(document).ready(function () {
+
 	// call initialization file
 	if (window.File && window.FileList && window.FileReader) {
 		UploadInit();
 	}
+
+	var attach_drop_id;
+	var attach_draging;
+
+	// Per File Tools
+
+	$('.cloud-tool-info-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		close_and_deactivate_all_panels();
+		$('#cloud-tool-info-' + id).toggle();
+		$('#cloud-index-' + id).addClass('cloud-index-active');
+	});
+
+	$('.cloud-tool-perms-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		activate_id(id);
+	});
+
+	$('.cloud-tool-rename-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		activate_id(id);
+		$('#cloud-tool-rename-' + id).show();
+	});
+
+	$('.cloud-tool-move-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		activate_id(id);
+		$('#cloud-tool-move-' + id).show();
+	});
+
+	$('.cloud-tool-categories-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		activate_id(id);
+		$('#id_categories_' + id).tagsinput({
+			tagClass: 'badge badge-pill badge-warning text-dark'
+		});
+		$('#cloud-tool-categories-' + id).show();
+	});
+
+	$('.cloud-tool-download-btn').on('click', function (e) {
+		close_and_deactivate_all_panels();
+	});
+
+	$('.cloud-tool-delete-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+
+		close_and_deactivate_all_panels();
+
+		let confirm = confirmDelete();
+		if (confirm) {
+			$('body').css('cursor', 'wait');
+			$('#cloud-index-' + id).css('opacity', 0.33);
+
+			let form = $('#attach_edit_form_' + id).serializeArray();
+			form.push({name: 'delete', value: 1});
+
+			$.post('attach_edit', form, function (data) {
+				if (data.success) {
+					$('#cloud-index-' + id + ', #cloud-tools-' + id).remove();
+					$('body').css('cursor', 'auto');
+				}
+				return true;
+			});
+
+		}
+		return false;
+	});
+
+	$('.cloud-tool-cancel-btn').on('click', function (e) {
+		e.preventDefault();
+		let id = $(this).data('id');
+		close_and_deactivate_all_panels();
+		$('#attach_edit_form_' + id).trigger('reset');
+		$('#id_categories_' + id).tagsinput('destroy');
+	});
+
+	// Per File Tools Eend
+
+	// DnD
+
+	$(document).on('drop', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+	});
+
+	$(document).on('dragover', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+	});
+
+	$(document).on('dragleave', function (e) {
+		e.preventDefault();
+		e.stopPropagation();
+	});
+
+	$('.cloud-index.attach-drop').on('drop', function (e) {
+
+		let target = $(this);
+		let folder = target.data('folder');
+		let id = target.data('id');
+
+
+		if(typeof folder === typeof undefined) {
+			return false;
+		}
+
+		// Check if it's a file
+		if (e.dataTransfer.files[0]) {
+			$('#file-folder').val(folder);
+			return true;
+		}
+
+		if(id === attach_drop_id) {
+			return false;
+		}
+
+		if(target.hasClass('attach-drop-zone') && attach_draging) {
+			return false;
+		}
+
+		target.removeClass('attach-drop-ok');
+
+		$.post('attach_edit', {'channel_id': channelId, 'dnd': 1, 'attach_id': attach_drop_id, ['newfolder_' + attach_drop_id]: folder }, function (data) {
+			if (data.success) {
+				$('#cloud-index-' + attach_drop_id + ', #cloud-tools-' + attach_drop_id).remove();
+				attach_drop_id = null;
+			}
+		});
+	});
+
+	$('.cloud-index.attach-drop').on('dragover', function (e) {
+		let target = $(this);
+
+		if(target.hasClass('attach-drop-zone') && attach_draging) {
+			return false;
+		}
+
+		target.addClass('attach-drop-ok');
+	});
+
+	$('.cloud-index').on('dragleave', function (e) {
+		let target = $(this);
+		target.removeClass('attach-drop-ok');
+	});
+
+	$('.cloud-index').on('dragstart', function (e) {
+		let target = $(this);
+		attach_drop_id = target.data('id');
+		// dragstart is not fired if a file is draged onto the window
+		// we use this to distinguish between drags and file drops
+		attach_draging = true;
+	});
+
+	$('.cloud-index').on('dragend', function (e) {
+		let target = $(this);
+		target.removeClass('attach-drop-ok');
+		attach_draging = false;
+	});
+
+	// DnD End
+
+	// Multi Tools
+
+	$('#cloud-multi-tool-select-all').on('change', function (e) {
+		if ($(this).is(':checked')) {
+			$('.cloud-multi-tool-checkbox').prop('checked', true);
+			$('.cloud-index:not(#cloud-index-up)').addClass('cloud-index-selected cloud-index-active');
+			$('.cloud-tools').addClass('cloud-index-selected');
+		}
+		else {
+			$('.cloud-multi-tool-checkbox').prop('checked', false);
+			$('.cloud-index').removeClass('cloud-index-selected cloud-index-active');
+			$('.cloud-tools').removeClass('cloud-index-selected');
+		}
+
+		$('.cloud-multi-tool-checkbox').trigger('change');
+	});
+
+
+	$('.cloud-multi-tool-checkbox').on('change', function (e) {
+		let id = $(this).val();
+
+		if ($(this).is(':checked')) {
+			$('#cloud-index-' + id).addClass('cloud-index-selected cloud-index-active');
+			$('#cloud-tools-' + id).addClass('cloud-index-selected');
+			$('<input id="aid_' + id + '" class="attach-ids-input" type="hidden" name="attach_ids[]" value="' + id + '">').prependTo('#attach_multi_edit_form');
+		}
+		else {
+			$('#cloud-index-' + id).removeClass('cloud-index-selected cloud-index-active');
+			$('#cloud-tools-' + id).removeClass('cloud-index-selected');
+			if ($('#cloud-multi-tool-select-all').is(':checked'))
+				$('#cloud-multi-tool-select-all').prop('checked', false);
+
+			$('#aid_' + id).remove();
+		}
+
+		if($('.cloud-multi-tool-checkbox:checked').length) {
+			close_all_panels();
+			$('#cloud-multi-actions').addClass('bg-warning');
+			$('#multi-dropdown-button').fadeIn();
+		}
+		else {
+			$('#cloud-multi-actions').removeClass('bg-warning');
+			$('#multi-dropdown-button').fadeOut();
+			close_and_deactivate_all_panels();
+			disable_multi_acl();
+		}
+
+	});
+
+	$('#cloud-multi-tool-perms-btn').on('click', function (e) {
+		e.preventDefault();
+
+		close_all_panels();
+		enable_multi_acl();
+
+		$('#cloud-multi-tool-submit').show();
+	});
+
+	$('#cloud-multi-tool-move-btn').on('click', function (e) {
+		e.preventDefault();
+
+		close_all_panels();
+		disable_multi_acl();
+
+		$('#cloud-multi-tool-submit, #cloud-multi-tool-move').show();
+	});
+
+	$('#cloud-multi-tool-categories-btn').on('click', function (e) {
+		e.preventDefault();
+
+		close_all_panels();
+		disable_multi_acl();
+
+		$('#id_categories').tagsinput({
+			tagClass: 'badge badge-pill badge-warning text-dark'
+		});
+
+		$('#cloud-multi-tool-submit, #cloud-multi-tool-categories').show();
+	});
+
+	$('#cloud-multi-tool-delete-btn').on('click', function (e) {
+		e.preventDefault();
+
+		let post_data = $('.cloud-multi-tool-checkbox').serializeArray();
+
+		if(! post_data.length) {
+			return false;
+		}
+		let confirm = confirmDelete();
+		if (confirm) {
+			$('body').css('cursor', 'wait');
+			$('.cloud-index-selected').css('opacity', 0.33);
+
+			post_data.push(
+				{ name: 'channel_id', value: channelId },
+				{ name: 'delete', value: 1},
+			);
+
+			$.post('attach_edit', post_data, function (data) {
+				if (data.success) {
+					console.log(data);
+					$('.cloud-index-selected').remove();
+					$('body').css('cursor', 'auto');
+				}
+				return true;
+			});
+		}
+		return false;
+
+	});
+
+	$('.cloud-multi-tool-cancel-btn').on('click', function (e) {
+		e.preventDefault();
+
+		close_and_deactivate_all_panels();
+		disable_multi_acl();
+
+		$('#attach_multi_edit_form').trigger('reset');
+		$('#id_categories').tagsinput('destroy');
+	});
+
+	// Multi Tools End
+
+	// Helper Functions
+
+	function disable_multi_acl() {
+		$('#multi-perms').val(0);
+		$('#multi-dbtn-acl, #recurse_container').hide();
+		$('#attach-multi-edit-perms').removeClass('btn-group');
+	}
+
+	function enable_multi_acl() {
+		$('#multi-perms').val(1);
+		$('#multi-dbtn-acl, #recurse_container').show();
+		$('#attach-multi-edit-perms').addClass('btn-group');
+	}
+
+	function close_all_panels() {
+		$('.cloud-tool, .cloud-multi-tool').hide();
+	}
+
+	function deactivate_all_panels() {
+		$('.cloud-index').removeClass('cloud-index-active');
+	}
+
+	function close_and_deactivate_all_panels() {
+		close_all_panels();
+		deactivate_all_panels();
+	}
+
+	function activate_id(id) {
+		close_and_deactivate_all_panels();
+		$('#cloud-multi-tool-select-all, .cloud-multi-tool-checkbox').prop('checked', false).trigger('change');
+
+		$('#cloud-tool-submit-' + id).show();
+		$('#cloud-index-' + id).addClass('cloud-index-active');
+	}
+
 });
 
-//
+
+
+
 // initialize
 function UploadInit() {
 
-	var fileselect = $("#files-upload");
-	var filedrag = $("#cloud-drag-area");
 	var submit = $("#upload-submit");
 	var count = 1;
+	var filedrag = $(".cloud-index.attach-drop");
 
- 
 	$('#invisible-cloud-file-upload').fileupload({
 			url: 'file_upload',
 			dataType: 'json',
@@ -26,8 +352,8 @@ function UploadInit() {
 			maxChunkSize: 4 * 1024 * 1024,
 
 			add: function(e,data) {
-				$(data.files).each( function() { this.count = ++ count; prepareHtml(this); }); 
-				
+				$(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
+
 				var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []);
 				var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []);
 				var deny_cid  = ($('#ajax-upload-files').data('deny_cid') || []);
@@ -49,7 +375,6 @@ function UploadInit() {
 				});
 
 				data.formData = $('#ajax-upload-files').serializeArray();
-
 				data.submit();
 			},
 
@@ -58,7 +383,7 @@ function UploadInit() {
 
 				// there will only be one file, the one we are looking for
 
-				$(data.files).each( function() { 
+				$(data.files).each( function() {
 					var idx = this.count;
 
 					// Dynamically update the percentage complete displayed in the file upload list
@@ -70,7 +395,6 @@ function UploadInit() {
 
 			},
 
-
 			stop: function(e,data) {
 				window.location.href = window.location.href;
 			}
@@ -81,60 +405,17 @@ function UploadInit() {
 
 }
 
-// file drag hover
-function DragDropUploadFileHover(e) {
-	e.stopPropagation();
-	e.preventDefault();
-	e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
-}
-
-// file selection via drag/drop
-function DragDropUploadFileSelectHandler(e) {
-	// cancel event and hover styling
-	DragDropUploadFileHover(e);
-
-	// fetch FileList object
-	var files = e.target.files || e.originalEvent.dataTransfer.files;
 
-	$('.new-upload').remove();
-
-	// process all File objects
-	for (var i = 0, f; f = files[i]; i++) {
-		prepareHtml(f, i);
-		UploadFile(f, i);
-	}
-}
-
-// file selection via input
-function UploadFileSelectHandler(e) {
-	// fetch FileList object
-	if(e.target.id === 'upload-submit') {
-		e.preventDefault();
-		var files = e.data[0].files;
-	}
-	if(e.target.id === 'files-upload') {
-		$('.new-upload').remove();
-		var files = e.target.files;
-	}
-
-	// process all File objects
-	for (var i = 0, f; f = files[i]; i++) {
-		if(e.target.id === 'files-upload')
-			prepareHtml(f, i);
-		if(e.target.id === 'upload-submit') {
-			UploadFile(f, i);
-		}
-	}
-}
 
 function prepareHtml(f) {
 	var num = f.count - 1;
 	var i = f.count;
 	$('#cloud-index #new-upload-progress-bar-' + num.toString()).after(
 		'<tr id="new-upload-' + i + '" class="new-upload">' +
-		'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
+		'<td></td>' +
+		'<td><i class="fa fa-fw ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
 		'<td>' + f.name + '</td>' +
-		'<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
+		'<td id="upload-progress-' + i + '"></td><td></td><td></td>' +
 		'<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' +
 		'</tr>' +
 		'<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
@@ -199,63 +480,4 @@ function getIconFromType(type) {
 	return iconFromType;
 }
 
-// upload  files
-function UploadFile(file, idx) {
-
-
-	window.filesToUpload = window.filesToUpload + 1;
-
-	var xhr = new XMLHttpRequest();
 
-	xhr.withCredentials = true;   // Include the SESSION cookie info for authentication
-
-	(xhr.upload || xhr).addEventListener('progress', function (e) {
-
-		var done = e.position || e.loaded;
-		var total = e.totalSize || e.total;
-		// Dynamically update the percentage complete displayed in the file upload list
-		$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
-		$('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
-
-		if(done == total) {
-			$('#upload-progress-' + idx).html('Processing...');
-		}
-
-	});
-
-
-	xhr.addEventListener('load', function (e) {
-		//we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
-		$('#upload-progress-' + idx).html('Ready!');
-
-		//console.log('xhr upload complete', e);
-		window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
-
-		// When all the uploads have completed, refresh the page
-		if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
-
-			window.fileUploadsCompleted = window.filesToUpload = 0;
-
-			// After uploads complete, refresh browser window to display new files
-			window.location.href = window.location.href;
-		}
-	});
-
-
-	xhr.addEventListener('error', function (e) {
-		$('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
-	});
-
-	// POST to the entire cloud path 
-//	xhr.open('post', 'file_upload', true);
-
-//	var formfields = $("#ajax-upload-files").serializeArray();
-
-//	var data = new FormData();
-//	$.each(formfields, function(i, field) {
-//		data.append(field.name, field.value);
-//	});
-//	data.append('userfile', file);
-
-//	xhr.send(data);
-}
diff --git a/view/pdl/mod_cloud.pdl b/view/pdl/mod_cloud.pdl
index a5461df50..44ef1e4fc 100644
--- a/view/pdl/mod_cloud.pdl
+++ b/view/pdl/mod_cloud.pdl
@@ -1,5 +1,6 @@
 [region=aside]
 [widget=vcard][/widget]
+[widget=categories][var=files]1[/var][/widget]
 [/region]
 [region=right_aside]
 [widget=notifications][/widget]
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 545e610b5..7e7f33d8e 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -365,7 +365,7 @@ footer {
 	bottom:1px;
 	text-align: right;
 	padding-bottom: 1em;
-	padding-right: 3em; 
+	padding-right: 3em;
 }
 
 .birthday-today,
@@ -484,7 +484,7 @@ footer {
 .pager_next,
 .pager-prev,
 .pager-next,
-.pager_n { 
+.pager_n {
 	border: 1px solid #ccc;
 	background: transparent;
 	padding: 4px;
@@ -738,7 +738,7 @@ nav .acpopup {
 	height: auto; overflow: auto;
 	border-bottom: 2px solid #cccccc;
 	padding-bottom: 1em;
-	margin-bottom: 1em;	
+	margin-bottom: 1em;
 }
 .oauthapp img {
 	float: left;
@@ -1016,7 +1016,7 @@ th,td {
 	max-width: 19.4em;
 	overflow: hidden;
 }
-	
+
 /* mail */
 
 img.mail-conv-sender-photo {
@@ -1560,12 +1560,12 @@ blockquote {
 	margin-top:-3px;
 }
 
-dl.bb-dl > dt { 
+dl.bb-dl > dt {
 	/* overriding the default dl style from bootstrap, as bootstrap's
 	   style of a bold unindented line followed by a plain unindented
 	   line is already acheivable in bbcode without dl */
-	font-weight: normal; 
-} 
+	font-weight: normal;
+}
 dl.dl-terms-monospace > dt { font-family:     monospace; }
 dl.dl-terms-bold      > dt { font-weight:     bold; }
 dl.dl-terms-italic    > dt { font-style:      italic; }
@@ -1576,7 +1576,7 @@ dl.bb-dl:not(.dl-horizontal) > dd {
 	margin-left: 2em;
 }
 dl.bb-dl > dd > li {
-	/* adding some indent so bullet-list items will line up better with 
+	/* adding some indent so bullet-list items will line up better with
 	   dl descriptions if someone wants to be impure and combine them */
 	margin-left: 1em;
 }
@@ -1815,3 +1815,7 @@ dl.bb-dl > dd > li {
 span.default-highlight {
 	background-color: yellow;
 }
+
+.bootstrap-tagsinput {
+	width: 100%;
+}
diff --git a/view/tpl/breadcrumb.tpl b/view/tpl/breadcrumb.tpl
new file mode 100644
index 000000000..205b712d9
--- /dev/null
+++ b/view/tpl/breadcrumb.tpl
@@ -0,0 +1,11 @@
+<nav aria-label="breadcrumb">
+	<ol class="breadcrumb bg-transparent">
+		{{foreach $breadcrumbs as $breadcrumb}}
+		{{if $breadcrumb@last}}
+		<li class="breadcrumb-item active h3 pt-3 pb-3" aria-current="page">{{$breadcrumb.name}}</li>
+		{{else}}
+		<li class="breadcrumb-item h3 cloud-index attach-drop pt-3 pb-3" data-folder="{{$breadcrumb.hash}}" title="{{$breadcrumb.hash}}"><a href="{{$breadcrumb.path}}">{{$breadcrumb.name}}</a></li>
+		{{/if}}
+		{{/foreach}}
+	</ol>
+</nav>
diff --git a/view/tpl/categories_widget.tpl b/view/tpl/categories_widget.tpl
index 1341c652c..fd27dca44 100755
--- a/view/tpl/categories_widget.tpl
+++ b/view/tpl/categories_widget.tpl
@@ -1,12 +1,12 @@
 <div id="categories-sidebar" class="widget">
 	<h3>{{$title}}</h3>
 	<div id="categories-sidebar-desc">{{$desc}}</div>
-	
+
 	<ul class="nav nav-pills flex-column">
 		<li class="nav-item"><a href="{{$base}}" class="nav-link{{if $sel_all}} active{{/if}}">{{$all}}</a></li>
 		{{foreach $terms as $term}}
-		<li class="nav-item"><a  href="{{$base}}?f=&cat={{$term.name|urlencode}}" class="nav-link{{if $term.selected}} active{{/if}}">{{$term.name}}</a></li>
+		<li class="nav-item"><a  href="{{$base}}/?cat={{$term.name|urlencode}}" class="nav-link{{if $term.selected}} active{{/if}}">{{$term.name}}</a></li>
 		{{/foreach}}
 	</ul>
-	
+
 </div>
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 292452cca..039d19fac 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -1,44 +1,57 @@
 <input id="invisible-cloud-file-upload" type="file" name="files" style="visibility:hidden;position:absolute;top:-50;left:-50;width:0;height:0;" multiple>
-<div id="files-mkdir-tools" class="section-content-tools-wrapper">
-	<label for="files-mkdir">{{$folder_header}}</label>
-	<form id="mkdir-form" method="post" action="file_upload" class="acl-form" data-form_id="mkdir-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
-		<input type="hidden" name="folder" value="{{$folder}}" />
-		<input type="hidden" name="channick" value="{{$channick}}" />
-		<input type="hidden" name="return_url" value="{{$return_url}}" />
-		<input id="files-mkdir" type="text" name="filename" class="form-control form-group">
-		<div class="pull-right btn-group">
-			<div class="btn-group">
-				{{if $lockstate}}
-				<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
-					<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
-				</button>
-				{{/if}}
-				<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+<div id="files-mkdir-tools">
+	<div class="section-content-tools-wrapper">
+		<label for="files-mkdir">{{$folder_header}}</label>
+		<form id="mkdir-form" method="post" action="file_upload" class="acl-form" data-form_id="mkdir-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
+			<input type="hidden" name="folder" value="{{$folder}}" />
+			<input type="hidden" name="channick" value="{{$channick}}" />
+			<input type="hidden" name="return_url" value="{{$return_url}}" />
+			<input id="files-mkdir" type="text" name="filename" class="form-control form-group">
+			<div class="pull-right btn-group">
+				<div class="btn-group">
+					{{if $lockstate}}
+					<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
+						<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
+					</button>
+					{{/if}}
+					<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+				</div>
 			</div>
-		</div>
-	</form>
-	<div class="clear"></div>
+		</form>
+		<div class="clear"></div>
+	</div>
+	<hr class="m-0">
 </div>
-<div id="files-upload-tools" class="section-content-tools-wrapper">
-	{{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{if $quota.desc}}{{$quota.desc}}<br><br>{{/if}}</div>{{/if}}
-	<form id="ajax-upload-files" method="post" action="#" enctype="multipart/form-data" class="acl-form" data-form_id="ajax-upload-files" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
-		<input type="hidden" name="directory" value="{{$path}}" />
-		<input type="hidden" name="channick" value="{{$channick}}" />
-		<input type="hidden" name="return_url" value="{{$return_url}}" />
-		<!--label for="files-upload">{{$upload_header}}</label>
-		<input class="form-group pull-left" id="files-upload" type="file" name="files[]" multiple -->
-		{{include file="field_checkbox.tpl" field=$notify}}
-		<div class="pull-right btn-group">
-			<div class="btn-group">
-				{{if $lockstate}}
-				<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
-					<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
-				</button>
-				{{/if}}
-				<button id="upload-submit" class="btn btn-primary btn-sm pull-right">{{$upload_submit}}</button>
+<div id="files-upload-tools">
+	<div class="section-content-tools-wrapper ">
+		{{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{if $quota.desc}}{{$quota.desc}}<br><br>{{/if}}</div>{{/if}}
+		<form id="ajax-upload-files" method="post" action="#" enctype="multipart/form-data" class="acl-form" data-form_id="ajax-upload-files" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
+			<input id="file-folder"type="hidden" name="folder" value="{{$folder}}" />
+			<input type="hidden" name="channick" value="{{$channick}}" />
+			<input type="hidden" name="return_url" value="{{$return_url}}" />
+			{{include file="field_checkbox.tpl" field=$notify}}
+			<div class="cloud-index attach-drop attach-drop-zone text-center p-4 mb-3" data-folder="{{$folder}}">
+				<span class="text-muted">You can select files via the upload button or drop them right here or into an existing folder.</span>
 			</div>
-		</div>
-	</form>
-	<div class="clear"></div>
+			<div class="pull-right btn-group">
+				<div class="btn-group">
+					{{if $lockstate}}
+					<button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" type="button">
+						<i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
+					</button>
+					{{/if}}
+					<button id="upload-submit" class="btn btn-primary btn-sm pull-right">{{$upload_submit}}</button>
+				</div>
+			</div>
+		</form>
+		<div class="clear"></div>
+	</div>
+	<hr class="m-0">
 </div>
+{{if $aclselect}}
 {{$aclselect}}
+{{/if}}
+{{if $breadcrumbs_html}}
+{{$breadcrumbs_html}}
+<hr class="m-0">
+{{/if}}
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index 90347d274..a6993fe97 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -1,84 +1,271 @@
-<div id="cloud-drag-area" class="section-content-wrapper-np">
-{{if $tiles}}
+<div class="section-content-wrapper-np">
+	{{if $tiles}}
 	<table id="cloud-index">
 		<tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
 	</table>
 
 	{{if $parentpath}}
 	<div class="cloud-container" >
-
-	<div class="cloud-icon tiles"><a href="{{$parentpath.path}}">
-	<div class="cloud-icon-container"><i class="fa fa-fw fa-level-up" ></i></div>
-	</a>
-	</div>
-	<div class="cloud-title"><a href="{{$parentpath.path}}">..</a>
-	</div>
+		<div class="cloud-icon tiles">
+			<a href="{{$parentpath}}">
+				<div class="cloud-icon-container">
+					<i class="fa fa-fw fa-level-up" ></i>
+				</div>
+			</a>
+		</div>
+		<div class="cloud-title">
+			<a href="{{$parentpath}}">..</a>
+		</div>
 	</div>
 	{{/if}}
 
 	{{foreach $entries as $item}}
 	<div class="cloud-container">
-	<div class="cloud-icon tiles"><a href="{{$item.fullPath}}">
-	{{if $item.photo_icon}}
-	<img src="{{$item.photo_icon}}" title="{{$item.type}}" >
-	{{else}}
-	<div class="cloud-icon-container"><i class="fa fa-fw {{$item.iconFromType}}" title="{{$item.type}}"></i></div>
-	{{/if}}
-	</a>
-	</div>
-	<div class="cloud-title"><a href="{{$item.fullPath}}">
-	{{$item.displayName}}
-	</a>
-	</div>
-	{{if $item.is_owner}}
-
-	{{/if}}
+		<div class="cloud-icon tiles"><a href="{{$item.rel_path}}">
+		{{if $item.photo_icon}}
+		<img src="{{$item.photo_icon}}" title="{{$item.type}}" >
+		{{else}}
+		<div class="cloud-icon-container">
+			<i class="fa fa-fw {{$item.icon_from_type}}" title="{{$item.type}}"></i>
+		</div>
+		{{/if}}
+		</div>
+		<div class="cloud-title">
+			<a href="{{$item.rel_path}}">
+				{{$item.name}}
+			</a>
+		</div>
+		{{if $item.is_owner}}
+			{{* add file tools here*}}
+		{{/if}}
 	</div>
 	{{/foreach}}
 	<div class="clear"></div>
-{{else}}
+	{{else}}
 	<table id="cloud-index">
 		<tr>
-			<th width="1%"></th>
-			<th width="92%">{{$name}}</th>
-			<th width="1%"></th><th width="1%"></th><th width="1%"></th><th width="1%"></th>
-			<th width="1%">{{*{{$type}}*}}</th>
+			<th width="1%">{{* multi tool checkbox *}}</th>
+			<th width="1%">{{* icon *}}</th>
+			<th width="93%">{{$name}}</th>
+			<th width="1%">{{* categories *}}</th>
+			<th width="1%">{{* lock icon *}}</th>
+			<th width="1%">{{* tools icon *}}</th>
 			<th width="1%" class="d-none d-md-table-cell">{{$size}}</th>
 			<th width="1%" class="d-none d-md-table-cell">{{$lastmod}}</th>
 		</tr>
-	{{if $parentpath}}
-		<tr>
-			<td><i class="fa fa-level-up"></i>{{*{{$parentpath.icon}}*}}</td>
-			<td><a href="{{$parentpath.path}}" title="{{$parent}}">..</a></td>
-			<td></td><td></td><td></td><td></td>
-			<td>{{*[{{$parent}}]*}}</td>
-			<td class="d-none d-md-table-cell"></td>
-			<td class="d-none d-md-table-cell"></td>
+		{{if $parentpath}}
+		<tr id="cloud-index-up" class="cloud-index{{if ! $is_root_folder}} attach-drop{{/if}}"{{if ! $is_root_folder}} data-folder="{{$folder_parent}}"/{{/if}}>
+			<td></td>
+			<td><i class="fa fa-level-up"></i></td>
+			<td colspan="6"><a href="{{$parentpath}}" title="{{$parent}}" class="p-2" draggable="false">..</a></td>
 		</tr>
-	{{/if}}
+		<tr class="cloud-tools">
+			<td colspan="8" class="attach-edit-panel">{{* this is for display consistency *}}</td>
+		</tr>
+		{{/if}}
+		{{if $channel_id && $is_owner && $entries.0}}
+		<tr id="cloud-multi-actions">
+			<td colspan="2">
+				<div class="form-check form-check-inline">
+					<input class="form-check-input" type="checkbox" id="cloud-multi-tool-select-all" value="" title="Select all">
+				</div>
+			</td>
+			<td colspan="3">
+				<div class="form-check form-check-inline">
+					<label class="form-check-label" for="cloud-multi-tool-select-all">Select all</label>
+				</div>
+			</td>
+			<td colspan="3">
+				{{if $is_owner}}
+				<div class="dropdown">
+					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">Bulk Actions</span>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
+						{{if $is_owner}}
+						<a id="cloud-multi-tool-perms-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-lock"></i> Adjust permissions</a>
+						{{/if}}
+						<a id="cloud-multi-tool-move-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-copy"></i> Move or copy</a>
+						<a id="cloud-multi-tool-categories-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-asterisk"></i> Categories</a>
+						<a id="cloud-multi-tool-delete-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> {{$delete}}</a>
+					</div>
+				</div>
+				{{else if $is_admin}}
+				<div class="dropdown">
+					<button class="btn btn-warning btn-sm" id="multi-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<i class="fa fa-fw fa-ellipsis-v d-table-cell"></i><span class="d-none d-md-table-cell">Bulk Actions</span>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button">
+						<a id="cloud-multi-tool-delete-btn" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> {{$admin_delete}}</a>
+					</div>
+				</div>
+				{{/if}}
+			</td>
+		</tr>
+		<tr id="cloud-multi-tools">
+			<td id="attach-multi-edit-panel" colspan="8">
+				<form id="attach_multi_edit_form" action="attach_edit" method="post" class="acl-form" data-form_id="attach_multi_edit_form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
+					<input type="hidden" name="channel_id" value="{{$channel_id}}" />
+					<input id="multi-perms" type="hidden" name="permissions" value="0">
+					<input type="hidden" name="return_path" value="{{$return_path}}">
+					<div id="cloud-multi-tool-move" class="cloud-multi-tool">
+						{{include file="field_select.tpl" field=$newfolder}}
+						{{include file="field_checkbox.tpl" field=$copy}}
+					</div>
+					<div id="cloud-multi-tool-categories" class="cloud-multi-tool">
+						{{include file="field_input.tpl" field=$categories}}
+					</div>
+					<div id="cloud-multi-tool-submit" class="cloud-multi-tool">
+						{{if $is_owner}}
+						{{include file="field_checkbox.tpl" field=$recurse}}
+						{{/if}}
+						<div id="attach-multi-submit" class="form-group">
+							<button id="cloud-multi-tool-cancel-btn" class="btn btn-outline-secondary btn-sm cloud-multi-tool-cancel-btn" type="button">
+									Cancel
+							</button>
+							<div id="attach-multi-edit-perms" class="btn-group float-right">
+								{{if $is_owner}}
+								<button id="multi-dbtn-acl" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button">
+									<i id="multi-jot-perms-icon" class="fa fa-{{$lockstate}} jot-icons jot-perms-icon"></i>
+								</button>
+								{{/if}}
+								<button id="multi-dbtn-submit" class="btn btn-primary btn-sm" type="submit" name="submit">
+									{{$edit}}
+								</button>
+							</div>
+						</div>
+					</div>
+				</form>
+			</td>
+		</tr>
+		{{/if}}
 		<tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
-	{{foreach $entries as $item}}
-		<tr id="cloud-index-{{$item.attachId}}">
-			<td><i class="fa {{$item.iconFromType}}" title="{{$item.type}}"></i></td>
-			<td><a href="{{$item.fullPath}}">{{$item.displayName}}</a></td>
-	{{if $item.is_owner}}
-			<td class="cloud-index-tool">{{$item.attachIcon}}</td>
-			<td class="cloud-index-tool"><div id="file-edit-{{$item.attachId}}" class="spinner-wrapper"><div class="spinner s"></div></div></td>
-			<td class="cloud-index-tool"><i class="fakelink fa fa-pencil" onclick="filestorage(event, '{{$nick}}', {{$item.attachId}});"></i></td>
-			<td class="cloud-index-tool"><a href="#" title="{{$delete}}" onclick="dropItem('{{$item.fileStorageUrl}}/{{$item.attachId}}/delete/json', '#cloud-index-{{$item.attachId}},#cloud-tools-{{$item.attachId}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a></td>
-
-	{{else}}
-			<td></td><td></td><td></td>{{if $is_admin || $item.is_creator}}<td class="cloud-index-tool"><a href="#" title="{{if $is_admin}}{{$admin_delete}}{{else}}{{$delete}}{{/if}}" onclick="dropItem('{{$item.fileStorageUrl}}/{{$item.attachId}}/delete/json', '#cloud-index-{{$item.attachId}},#cloud-tools-{{$item.attachId}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>{{else}}<td>{{/if}}</td>
-	{{/if}}
-			<td>{{*{{$item.type}}*}}</td>
-			<td class="d-none d-md-table-cell">{{$item.sizeFormatted}}</td>
-			<td class="d-none d-md-table-cell">{{$item.lastmodified}}</td>
+		{{foreach $entries as $item}}
+		<tr id="cloud-index-{{$item.attach_id}}" class="cloud-index{{if $item.collection}} attach-drop{{/if}}"{{if $item.collection}} data-folder="{{$item.resource}}"{{/if}} data-id="{{$item.attach_id}}" draggable="true">
+			<td>
+				{{if $channel_id && $is_owner}}
+				<div class="form-check form-check-inline">
+					<input class="form-check-input cloud-multi-tool-checkbox" type="checkbox" id="cloud-multi-tool-checkbox-{{$item.attach_id}}" name="attach_ids[]" value="{{$item.attach_id}}">
+				</div>
+				{{/if}}
+			</td>
+			<td><i class="fa {{$item.icon_from_type}}" title="{{$item.type}}"></i></td>
+			<td><a href="{{$item.rel_path}}" class="p-2" draggable="false">{{$item.name}}</a></td>
+			<td>{{$item.terms}}</td>
+			<td class="cloud-index-tool p-2">
+				{{if $item.lockstate == 'lock'}}
+				<i class="fa fa-lock lockview" data-toggle="dropdown" onclick="lockview('attach',{{$item.attach_id}});"></i>
+				<ul id="panel-{{$item.attach_id}}" class="lockview-panel dropdown-menu dropdown-menu-right"></ul>
+				{{/if}}
+			</td>
+			<td class="cloud-index-tool">
+				{{if ($item.is_owner || $item.is_creator) && $item.attach_id}}
+				<div class="dropdown">
+					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<i class="fa fa-fw fa-ellipsis-v"></i>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
+						<a id="cloud-tool-info-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-info-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-info"></i> Info</a>
+						{{if $item.is_owner}}
+						<a id="cloud-tool-perms-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-perms-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-{{$item.lockstate}}"></i> Adjust permissions</a>
+						{{/if}}
+						<a id="cloud-tool-rename-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-rename-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-pencil"></i> Rename</a>
+						<a id="cloud-tool-move-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-move-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-copy"></i> Move or copy</a>
+						<a id="cloud-tool-categories-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-categories-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-asterisk"></i> Categories</a>
+						{{if !$item.collection}}
+						{{if $item.is_owner}}
+						<a id="cloud-tool-share-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-share-btn" href="/rpost?attachment=[attachment]{{$item.resource}},{{$item.revision}}[/attachment]&acl[allow_cid]={{$item.raw_allow_cid}}&acl[allow_gid]={{$item.raw_allow_gid}}&acl[deny_cid]={{$item.raw_deny_cid}}&acl[deny_gid]={{$item.raw_deny_gid}}" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-share-square-o"></i> Post</a>
+						{{/if}}
+						<a id="cloud-tool-download-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-download-btn" href="/attach/{{$item.resource}}" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-cloud-download"></i> Download</a>
+						{{/if}}
+						<a id="cloud-tool-delete-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-delete-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-trash-o"></i> {{$delete}}</a>
+					</div>
+				</div>
+				{{else}}
+				{{if ($is_admin || !$item.collection) && $item.attach_id}}
+				<div class="dropdown">
+					<button class="btn btn-link btn-sm" id="dropdown-button-{{$item.attach_id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<i class="fa fa-fw fa-ellipsis-v"></i>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-button-{{$item.attach_id}}">
+						{{if !$item.collection}}
+						<a id="cloud-tool-download-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-download-btn" href="/attach/{{$item.resource}}" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-cloud-download"></i> Download</a>
+						{{/if}}
+						{{if $is_admin}}
+						<a id="cloud-tool-delete-btn-{{$item.attach_id}}" class="dropdown-item cloud-tool-delete-btn" href="#" data-id="{{$item.attach_id}}"><i class="fa fa-fw fa-trash-o"></i> {{$admin_delete}}</a>
+						{{/if}}
+					</div>
+				</div>
+				{{/if}}
+			</td>
+			{{/if}}
+			<td class="d-none d-md-table-cell p-2">{{$item.size_formatted}}</td>
+			<td class="d-none d-md-table-cell p-2">{{$item.last_modified}}</td>
 		</tr>
-		<tr id="cloud-tools-{{$item.attachId}}">
-			<td id="perms-panel-{{$item.attachId}}" colspan="9"></td>
+		<tr id="cloud-tools-{{$item.attach_id}}" class="cloud-tools">
+			<td id="attach-edit-panel-{{$item.attach_id}}" class="attach-edit-panel" colspan="8">
+				<form id="attach_edit_form_{{$item.attach_id}}" action="attach_edit" method="post" class="acl-form" data-form_id="attach_edit_form_{{$item.attach_id}}" data-allow_cid='{{$item.allow_cid}}' data-allow_gid='{{$item.allow_gid}}' data-deny_cid='{{$item.deny_cid}}' data-deny_gid='{{$item.deny_gid}}'>
+					<input type="hidden" name="attach_id" value="{{$item.attach_id}}" />
+					<input type="hidden" name="channel_id" value="{{$channel_id}}" />
+					<input type="hidden" name="return_path" value="{{$return_path}}">
+					<div id="cloud-tool-rename-{{$item.attach_id}}" class="cloud-tool">
+						{{include file="field_input.tpl" field=$item.newfilename}}
+					</div>
+					<div id="cloud-tool-info-{{$item.attach_id}}" class="cloud-tool">
+						{{if ! $item.collection}}
+						<div class="form-group">
+							<label for="attach-code-input-{{$item.attach_id}}">Attachment BBcode</label>
+							<input type="text" class="form-control" id="attach-code-input-{{$item.attach_id}}" name="attach-code-input-{{$item.attach_id}}" value="{{$item.attach_bbcode}}" onclick="this.select();" />
+						</div>
+						{{if $item.embed_bbcode}}
+						<div class="form-group">
+							<label for="embed-code-input-{{$item.attach_id}}">Embed BBcode</label>
+							<input type="text" class="form-control" id="embed-code-input-{{$item.attach_id}}" name="embed-code-input-{{$item.attach_id}}" value="{{$item.embed_bbcode}}" onclick="this.select();" />
+						</div>
+						{{/if}}
+						{{/if}}
+						<div class="form-group">
+							<label for="link-code-input-{{$item.attach_id}}">Link BBcode</label>
+							<input type="text" class="form-control" id="link-code-input-{{$item.attach_id}}" name="link-code-input-{{$item.attach_id}}" value="{{$item.link_bbcode}}" onclick="this.select();" />
+						</div>
+						<div class="form-group">
+							<button id="cloud-tool-close-btn-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm cloud-tool-cancel-btn" type="button" data-id="{{$item.attach_id}}">
+								Close
+							</button>
+						</div>
+					</div>
+					<div id="cloud-tool-move-{{$item.attach_id}}" class="cloud-tool">
+						{{include file="field_select.tpl" field=$item.newfolder}}
+						{{include file="field_checkbox.tpl" field=$item.copy}}
+					</div>
+					<div id="cloud-tool-categories-{{$item.attach_id}}" class="cloud-tool">
+						{{include file="field_input.tpl" field=$item.categories}}
+					</div>
+					<div id="cloud-tool-submit-{{$item.attach_id}}" class="cloud-tool">
+						{{if $item.is_owner}}
+						{{if !$item.collection}}{{include file="field_checkbox.tpl" field=$item.notify}}{{/if}}
+						{{if $item.collection}}{{include file="field_checkbox.tpl" field=$item.recurse}}{{/if}}
+						{{/if}}
+						<div id="attach-submit-{{$item.attach_id}}" class="form-group">
+							<button id="cloud-tool-cancel-btn-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm cloud-tool-cancel-btn" type="button" data-id="{{$item.attach_id}}">
+									Cancel
+							</button>
+							<div id="attach-edit-perms-{{$item.attach_id}}" class="btn-group float-right">
+								{{if $item.is_owner}}
+								<button id="dbtn-acl-{{$item.attach_id}}" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" type="button">
+									<i id="jot-perms-icon-{{$item.attach_id}}" class="fa fa-{{$item.lockstate}} jot-icons jot-perms-icon"></i>
+								</button>
+								{{/if}}
+								<button id="dbtn-submit-{{$item.attach_id}}" class="btn btn-primary btn-sm" type="submit" name="submit">
+									{{$edit}}
+								</button>
+							</div>
+						</div>
+					</div>
+				</form>
+			</td>
 		</tr>
-
-	{{/foreach}}
+		{{/foreach}}
 	</table>
 {{/if}}
 </div>
diff --git a/view/tpl/field_select.tpl b/view/tpl/field_select.tpl
index 8c3776841..7cc624fab 100755
--- a/view/tpl/field_select.tpl
+++ b/view/tpl/field_select.tpl
@@ -1,4 +1,4 @@
-	<div class="form-group">
+	<div id="id_{{$field.0}}_wrapper" class="form-group">
 		<label for="id_{{$field.0}}">{{$field.1}}</label>
 		<select class="form-control" name="{{$field.0}}" id="id_{{$field.0}}">
 			{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
diff --git a/view/tpl/xchan_vcard.tpl b/view/tpl/xchan_vcard.tpl
index 9c357bba8..447839167 100755
--- a/view/tpl/xchan_vcard.tpl
+++ b/view/tpl/xchan_vcard.tpl
@@ -1,10 +1,25 @@
-<div id="vcard" class="vcard h-card">
-<div id="profile-photo-wrapper"><a href="{{$link}}"><img class="vcard-photo photo u-photo" src="{{$photo}}" alt="{{$name}}" /></a></div>
-{{if $connect}}
-<div class="connect-btn-wrapper"><a href="follow?f=&url={{$follow}}" class="btn btn-block btn-success btn-sm" rel="nofollow"><i class="fa fa-plus"></i> {{$connect}}</a></div>
-{{/if}}
-<div class="fn p-name">{{$name}}</div>
+<div class="card mb-3 h-card">
+	<div class="row">
+		<div class="col-4">
+			<a href="{{$link}}" >
+				<img class="u-photo" src="{{$photo}}" alt="{{$name}}" width="80px" height="80px">
+			</a>
+		</div>
+		<div class="col m-1">
+			<div class="row">
+				<strong class="fn p-name">{{$name}}</strong>
+			</div>
+			<div class="row">
+				<small class="text-muted p-adr">{{$addr}}</small>
+			</div>
+			{{if $connect}}
+			<div class="row mt-2">
+				<a href="follow?f=&url={{$follow}}" class="btn btn-success btn-sm" rel="nofollow">
+					<i class="fa fa-plus"></i> {{$connect}}
+				</a>
+			</div>
+			{{/if}}
+		</div>
+	</div>
 </div>
 
-
-