Make file actions work from sidebar

The favorite icon in the sidebar now triggers the file action and also
updates itself according to the model's state when triggered from the
file row.

The thumbnail triggers the default action.

Currently only one FileInfoModel is used for the selection and state
synchronization between views.

FileList reload now auto-closes the sidebar.

7 files changed, 272 insertions, 211 deletions

diff --git a/apps/files/js/detailfileinfoview.js b/apps/files/js/detailfileinfoview.js
index 9a88b5e2d8a..43595001212 100644
--- a/apps/files/js/detailfileinfoview.js
+++ b/apps/files/js/detailfileinfoview.js
@@ -16,35 +16,13 @@
 	 * Displays a block of details about the file info.
 	 *
 	 */
-	var DetailFileInfoView = function() {
-		this.initialize();
-	};
-	/**
-	 * @memberof OCA.Files
-	 */
-	DetailFileInfoView.prototype = {
-		/**
-		 * jQuery element
-		 */
-		$el: null,
+	var DetailFileInfoView = OC.Backbone.View.extend({
+		tagName: 'div',
+		className: 'detailFileInfoView',
 
 		_template: null,
 
 		/**
-		 * Currently displayed file info
-		 *
-		 * @type OCA.Files.FileInfo
-		 */
-		_fileInfo: null,
-
-		/**
-		 * Initialize the details view
-		 */
-		initialize: function() {
-			this.$el = $('<div class="detailFileInfoView"></div>');
-		},
-
-		/**
 		 * returns the jQuery object for HTML output
 		 *
 		 * @returns {jQuery}
@@ -54,30 +32,12 @@
 		},
 
 		/**
-		 * Destroy / uninitialize this instance.
-		 */
-		destroy: function() {
-			if (this.$el) {
-				this.$el.remove();
-			}
-		},
-
-		/**
-		 * Renders this details view
-		 *
-		 * @abstract
-		 */
-		render: function() {
-			// to be implemented in subclass
-		},
-
-		/**
 		 * Sets the file info to be displayed in the view
 		 *
 		 * @param {OCA.Files.FileInfo} fileInfo file info to set
 		 */
 		setFileInfo: function(fileInfo) {
-			this._fileInfo = fileInfo;
+			this.model = fileInfo;
 			this.render();
 		},
 
@@ -87,9 +47,9 @@
 		 * @return {OCA.Files.FileInfo} file info
 		 */
 		getFileInfo: function() {
-			return this._fileInfo;
+			return this.model;
 		}
-	};
+	});
 
 	OCA.Files.DetailFileInfoView = DetailFileInfoView;
 })();
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 7b7bd013f9e..4df359e4523 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -33,31 +33,15 @@
 	 * The details view show details about a selected file.
 	 *
 	 */
-	var DetailsView = function() {
-		this.initialize();
-	};
-
-	/**
-	 * @memberof OCA.Files
-	 */
-	DetailsView.prototype = {
-
-		/**
-		 * jQuery element
-		 */
-		$el: null,
+	var DetailsView = OC.Backbone.View.extend({
+		id: 'app-sidebar',
+		tabName: 'div',
+		className: 'detailsView',
 
 		_template: null,
 		_templateTabHeader: null,
 
 		/**
-		 * Currently displayed file info
-		 *
-		 * @type OCA.Files.FileInfo
-		 */
-		_fileInfo: null,
-
-		/**
 		 * List of detail tab views
 		 *
 		 * @type Array<OCA.Files.DetailTabView>
@@ -78,33 +62,25 @@
 		 */
 		_currentTabId: null,
 
+		events: {
+			'click a.close': '_onClose',
+			'click .tabHeaders .tabHeader': '_onClickTab'
+		},
+
 		/**
 		 * Initialize the details view
 		 */
 		initialize: function() {
-			this.$el = $('<div id="app-sidebar"></div>');
-			this.fileInfo = null;
 			this._tabViews = [];
 			this._detailFileInfoViews = [];
 
-			this.$el.on('click', 'a.close', function(event) {
-				OC.Apps.hideAppSidebar();
-				event.preventDefault();
-			});
-
-			this.$el.on('click', '.tabHeaders .tabHeader', _.bind(this._onClickTab, this));
-
 			// uncomment to add some dummy tabs for testing
-			//this._addTestTabs();
+			// this._addTestTabs();
 		},
 
-		/**
-		 * Destroy / uninitialize this instance.
-		 */
-		destroy: function() {
-			if (this.$el) {
-				this.$el.remove();
-			}
+		_onClose: function(event) {
+			OC.Apps.hideAppSidebar();
+			event.preventDefault();
 		},
 
 		_onClickTab: function(e) {
@@ -148,7 +124,6 @@
 		 */
 		render: function() {
 			var self = this;
-			this.$el.empty();
 
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
@@ -158,12 +133,13 @@
 				this._templateTabHeader = Handlebars.compile(TEMPLATE_TAB_HEADER);
 			}
 
-			var $el = $(this._template({
+			this.$el.html(this._template({
 				closeLabel: t('files', 'Close')
 			}));
-			var $tabsContainer = $el.find('.tabsContainer');
-			var $tabHeadsContainer = $el.find('.tabHeaders');
-			var $detailsContainer = $el.find('.detailFileInfoContainer');
+
+			var $tabsContainer = this.$el.find('.tabsContainer');
+			var $tabHeadsContainer = this.$el.find('.tabHeaders');
+			var $detailsContainer = this.$el.find('.detailFileInfoContainer');
 
 			// render details
 			_.each(this._detailFileInfoViews, function(detailView) {
@@ -172,40 +148,36 @@
 
 			if (this._tabViews.length > 0) {
 				if (!this._currentTab) {
-					this._currentTab = this._tabViews[0].getId();
+					this._currentTab = this._tabViews[0].id;
 				}
 
 				// render tabs
 				_.each(this._tabViews, function(tabView, i) {
 					// hidden by default
 					var $el = tabView.get$();
-					var isCurrent = (tabView.getId() === self._currentTab);
+					var isCurrent = (tabView.id === self._currentTab);
 					if (!isCurrent) {
 						$el.addClass('hidden');
 					}
 					$tabsContainer.append($el);
 
 					$tabHeadsContainer.append(self._templateTabHeader({
-						tabId: tabView.getId(),
+						tabId: tabView.id,
 						tabIndex: i,
 						label: tabView.getLabel(),
 						selected: isCurrent
 					}));
 				});
 			}
-
-			// TODO: select current tab
-
-			this.$el.append($el);
 		},
 
 		/**
 		 * Sets the file info to be displayed in the view
 		 *
-		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 * @param {OCA.Files.FileInfoModel} fileInfo file info to set
 		 */
 		setFileInfo: function(fileInfo) {
-			this._fileInfo = fileInfo;
+			this.model = fileInfo;
 
 			this.render();
 
@@ -221,10 +193,10 @@
 		/**
 		 * Returns the file info.
 		 *
-		 * @return {OCA.Files.FileInfo} file info
+		 * @return {OCA.Files.FileInfoModel} file info
 		 */
 		getFileInfo: function() {
-			return this._fileInfo;
+			return this.model;
 		},
 
 		/**
@@ -244,7 +216,7 @@
 		addDetailView: function(detailView) {
 			this._detailFileInfoViews.push(detailView);
 		}
-	};
+	});
 
 	OCA.Files.DetailsView = DetailsView;
 })();
diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index b9b1dda2ccc..b2e02971fb4 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -17,23 +17,10 @@
 	 * Base class for tab views to display file information.
 	 *
 	 */
-	var DetailTabView = function(id) {
-		this.initialize(id);
-	};
+	var DetailTabView = OC.Backbone.View.extend({
+		tag: 'div',
 
-	/**
-	 * @memberof OCA.Files
-	 */
-	DetailTabView.prototype = {
-		/**
-		 * jQuery element
-		 */
-		$el: null,
-
-		/**
-		 * Tab id
-		 */
-		_id: null,
+		className: 'tab',
 
 		/**
 		 * Tab label
@@ -42,52 +29,20 @@
 
 		_template: null,
 
-		/**
-		 * Currently displayed file info
-		 *
-		 * @type OCA.Files.FileInfo
-		 */
-		_fileInfo: null,
-
-		/**
-		 * Initialize the details view
-		 *
-		 * @param {string} id tab id
-		 */
-		initialize: function(id) {
-			if (!id) {
-				throw 'Argument "id" is required';
-			}
-			this._id = id;
-			this.$el = $('<div class="tab"></div>');
-			this.$el.attr('data-tabid', id);
-		},
-
-		/**
-		 * Destroy / uninitialize this instance.
-		 */
-		destroy: function() {
-			if (this.$el) {
-				this.$el.remove();
+		initialize: function() {
+			if (!this.id) {
+				this.id = 'detailTabView' + DetailTabView._TAB_COUNT;
+				DetailTabView._TAB_COUNT++;
 			}
 		},
 
 		/**
-		 * Returns the tab element id
-		 *
-		 * @return {string} tab id
-		 */
-		getId: function() {
-			return this._id;
-		},
-
-		/**
 		 * Returns the tab label
 		 *
 		 * @return {String} label
 		 */
 		getLabel: function() {
-			return 'Tab ' + this._id;
+			return 'Tab ' + this.id;
 		},
 
 		/**
@@ -107,29 +62,29 @@
 		render: function() {
 			// to be implemented in subclass
 			// FIXME: code is only for testing
-			this.$el.empty();
-			this.$el.append('<div>Hello ' + this._id + '</div>');
+			this.$el.html('<div>Hello ' + this.id + '</div>');
 		},
 
 		/**
 		 * Sets the file info to be displayed in the view
 		 *
-		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 * @param {OCA.Files.FileInfoModel} fileInfo file info to set
 		 */
 		setFileInfo: function(fileInfo) {
-			this._fileInfo = fileInfo;
+			this.model = fileInfo;
 			this.render();
 		},
 
 		/**
 		 * Returns the file info.
 		 *
-		 * @return {OCA.Files.FileInfo} file info
+		 * @return {OCA.Files.FileInfoModel} file info
 		 */
 		getFileInfo: function() {
-			return this._fileInfo;
+			return this.model;
 		}
-	};
+	});
+	DetailTabView._TAB_COUNT = 0;
 
 	OCA.Files.DetailTabView = DetailTabView;
 })();
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 43f74c5816d..a2dcf266bf9 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -31,6 +31,10 @@
 		actions: {},
 		defaults: {},
 		icons: {},
+
+		/**
+		 * @deprecated
+		 */
 		currentFile: null,
 
 		/**
@@ -331,6 +335,9 @@
 			$trigger.addClass('open');
 
 			menu = new OCA.Files.FileActionsMenu();
+
+			context.$file.find('td.filename').append(menu.$el);
+
 			menu.$el.on('afterHide', function() {
 				context.$file.removeClass('mouseOver');
 				$trigger.removeClass('open');
@@ -338,7 +345,6 @@
 			});
 
 			context.$file.addClass('mouseOver');
-			context.$file.find('td.filename').append(menu.$el);
 			menu.show(context);
 		},
 
@@ -401,11 +407,22 @@
 					// also set on global object for legacy apps
 					window.FileActions.currentFile = currentFile;
 
+					var callContext = _.extend({}, context);
+
+					if (!context.dir && context.fileList) {
+						callContext.dir = $file.attr('data-path') || context.fileList.getCurrentDirectory();
+					}
+
+					if (!context.fileInfoModel && context.fileList) {
+						callContext.fileInfoModel = context.fileList.getModelForFile(fileName);
+						if (!callContext.fileInfoModel) {
+							console.warn('No file info model found for file "' + fileName + '"');
+						}
+					}
+
 					actionSpec.action(
 						fileName,
-						_.extend(context, {
-							dir: $file.attr('data-path') || context.fileList.getCurrentDirectory()
-						})
+						callContext
 					);
 				}
 			);
@@ -413,6 +430,63 @@
 		},
 
 		/**
+		 * Trigger the given action on the given file.
+		 *
+		 * @param {string} actionName action name
+		 * @param {OCA.Files.FileInfoModel} fileInfoModel file info model
+		 * @param {OCA.Files.FileList} [fileList] file list, for compatibility with older action handlers [DEPRECATED]
+		 *
+		 * @return {boolean} true if the action handler was called, false otherwise
+		 *
+		 * @since 8.2
+		 */
+		triggerAction: function(actionName, fileInfoModel, fileList) {
+			var actionFunc;
+			var actions = this.get(
+				fileInfoModel.get('mimetype'),
+				fileInfoModel.isDirectory() ? 'dir' : 'file',
+				fileInfoModel.get('permissions')
+			);
+
+			if (actionName) {
+				actionFunc = actions[actionName];
+			} else {
+				actionFunc = this.getDefault(
+					fileInfoModel.get('mimetype'),
+					fileInfoModel.isDirectory() ? 'dir' : 'file',
+					fileInfoModel.get('permissions')
+				);
+			}
+
+			if (!actionFunc) {
+				actionFunc = actions['Download'];
+			}
+
+			if (!actionFunc) {
+				return false;
+			}
+
+			var context = {
+				fileActions: this,
+				fileInfoModel: fileInfoModel,
+				dir: fileInfoModel.get('path')
+			};
+
+			var fileName = fileInfoModel.get('name');
+			this.currentFile = fileName;
+			// also set on global object for legacy apps
+			window.FileActions.currentFile = fileName;
+
+			if (fileList) {
+				// compatibility with action handlers that expect these
+				context.fileList = fileList;
+				context.$file = fileList.findFileEl(fileName);
+			}
+
+			actionFunc(fileName, context);
+		},
+
+		/**
 		 * Display file actions for the given element
 		 * @param parent "td" element of the file for which to display actions
 		 * @param triggerEvent if true, triggers the fileActionsReady on the file
@@ -626,11 +700,12 @@
 	 * Action handler function for file actions
 	 *
 	 * @callback OCA.Files.FileActions~actionHandler
-	 * @param {String} fileName name of the clicked file
+	 * @param {String} fileName name of the file on which the action must be performed
 	 * @param context context
 	 * @param {String} context.dir directory of the file
-	 * @param context.$file jQuery element of the file
-	 * @param {OCA.Files.FileList} context.fileList the FileList instance on which the action occurred
+	 * @param {OCA.Files.FileInfoModel} fileInfoModel file info model
+	 * @param {Object} [context.$file] jQuery element of the file [DEPRECATED]
+	 * @param {OCA.Files.FileList} [context.fileList] the FileList instance on which the action occurred [DEPRECATED]
 	 * @param {OCA.Files.FileActions} context.fileActions the FileActions instance on which the action occurred
 	 */
 
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index e297edcf11b..1f86f5a392a 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -213,7 +213,7 @@
 
 			if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
 				this._detailsView = new OCA.Files.DetailsView();
-				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
+				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView({fileList: this, fileActions: this.fileActions}));
 				this._detailsView.$el.insertBefore(this.$el);
 				this._detailsView.$el.addClass('disappear');
 			}
@@ -283,32 +283,74 @@
 		},
 
 		/**
+		 * Returns a unique model for the given file name.
+		 *
+		 * @param {string|object} fileName file name or jquery row
+		 * @return {OCA.Files.FileInfoModel} file info model
+		 */
+		getModelForFile: function(fileName) {
+			var $tr;
+			// jQuery object ?
+			if (fileName.is) {
+				$tr = fileName;
+				fileName = $tr.attr('data-file');
+			} else {
+				$tr = this.findFileEl(fileName);
+			}
+
+			if (!$tr || !$tr.length) {
+				return null;
+			}
+
+			// if requesting the selected model, return it
+			if (this._currentFileModel && this._currentFileModel.get('name') === fileName) {
+				return this._currentFileModel;
+			}
+
+			// TODO: note, this is a temporary model required for synchronising
+			// state between different views.
+			// In the future the FileList should work with Backbone.Collection
+			// and contain existing models that can be used.
+			// This method would in the future simply retrieve the matching model from the collection.
+			var model = new OCA.Files.FileInfoModel(this.elementToFile($tr));
+			if (!model.has('path')) {
+				model.set('path', this.getCurrentDirectory(), {silent: true});
+			}
+			return model;
+		},
+
+		/**
 		 * Update the details view to display the given file
 		 *
-		 * @param {OCA.Files.FileInfo} fileInfo file info to display
+		 * @param {string} fileName file name from the current list
 		 */
-		_updateDetailsView: function(fileInfo) {
+		_updateDetailsView: function(fileName) {
 			if (!this._detailsView) {
 				return;
 			}
 
-			var self = this;
 			var oldFileInfo = this._detailsView.getFileInfo();
 			if (oldFileInfo) {
 				// TODO: use more efficient way, maybe track the highlight
-				this.$fileList.children().filterAttr('data-id', '' + oldFileInfo.id).removeClass('highlighted');
+				this.$fileList.children().filterAttr('data-id', '' + oldFileInfo.get('id')).removeClass('highlighted');
+				oldFileInfo.off('change', this._onSelectedModelChanged, this);
 			}
 
-			if (!fileInfo) {
+			if (!fileName) {
 				OC.Apps.hideAppSidebar();
 				this._detailsView.setFileInfo(null);
+				this._currentFileModel = null;
 				return;
 			}
 
-			this.$fileList.children().filterAttr('data-id', '' + fileInfo.id).addClass('highlighted');
-			this._detailsView.setFileInfo(_.extend({
-				path: this.getCurrentDirectory()
-			}, fileInfo));
+			var $tr = this.findFileEl(fileName);
+			var model = this.getModelForFile($tr);
+
+			this._currentFileModel = model;
+
+			$tr.addClass('highlighted');
+
+			this._detailsView.setFileInfo(model);
 			this._detailsView.$el.scrollTop(0);
 			_.defer(OC.Apps.showAppSidebar);
 		},
@@ -367,7 +409,7 @@
 				this._selectionSummary.remove(data);
 			}
 			if (this._selectionSummary.getTotal() === 1) {
-				this._updateDetailsView(_.values(this._selectedFiles)[0]);
+				this._updateDetailsView(_.values(this._selectedFiles)[0].name);
 			} else {
 				// show nothing when multiple files are selected
 				this._updateDetailsView(null);
@@ -432,8 +474,7 @@
 						$(event.target).closest('a').blur();
 					}
 				} else {
-					var fileInfo = this.files[$tr.index()];
-					this._updateDetailsView(fileInfo);
+					this._updateDetailsView($tr.attr('data-file'));
 					event.preventDefault();
 				}
 			}
@@ -1188,6 +1229,8 @@
 					sortdirection: this._sortDirection
 				}
 			});
+			// close sidebar
+			this._updateDetailsView(null);
 			var callBack = this.reloadCallback.bind(this);
 			return this._reloadCall.then(callBack, callBack);
 		},
@@ -1587,7 +1630,7 @@
 								tr.remove();
 								tr = self.add(fileInfo, {updateSummary: false, silent: true});
 								self.$fileList.trigger($.Event('fileActionsReady', {fileList: self, $files: $(tr)}));
-								self._updateDetailsView(fileInfo);
+								self._updateDetailsView(fileInfo.name);
 							}
 						});
 					} else {
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index a00d907d0d6..6910e5f2be5 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<div class="thumbnail"></div><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' +
+		'<a href="#" class="thumbnail action-default"></a><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' +
 		'<div class="file-details ellipsis">' +
 		'    <a href="#" ' +
 		'    alt="{{starAltText}}"' +
@@ -27,58 +27,104 @@
 	 * Displays main details about a file
 	 *
 	 */
-	var MainFileInfoDetailView = function() {
-		this.initialize();
-	};
-	/**
-	 * @memberof OCA.Files
-	 */
-	MainFileInfoDetailView.prototype = _.extend({}, OCA.Files.DetailFileInfoView.prototype,
+	var MainFileInfoDetailView = OCA.Files.DetailFileInfoView.extend(
 		/** @lends OCA.Files.MainFileInfoDetailView.prototype */ {
-		_template: null,
+
+		className: 'mainFileInfoView',
 
 		/**
-		 * Initialize the details view
+		 * Associated file list instance, for file actions
+		 *
+		 * @type {OCA.Files.FileList}
 		 */
-		initialize: function() {
-			this.$el = $('<div class="mainFileInfoView"></div>');
-		},
+		_fileList: null,
 
 		/**
-		 * Renders this details view
+		 * File actions
+		 *
+		 * @type {OCA.Files.FileActions}
 		 */
-		render: function() {
-			this.$el.empty();
+		_fileActions: null,
+
+		events: {
+			'click a.action-favorite': '_onClickFavorite',
+			'click a.action-default': '_onClickDefaultAction'
+		},
 
+		template: function(data) {
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
 			}
+			return this._template(data);
+		},
 
-			if (this._fileInfo) {
-				var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0;
-				this.$el.append(this._template({
+		initialize: function(options) {
+			options = options || {};
+			this._fileList = options.fileList;
+			this._fileActions = options.fileActions;
+			if (!this._fileList) {
+				throw 'Missing requird parameter "fileList"';
+			}
+			if (!this._fileActions) {
+				throw 'Missing requird parameter "fileActions"';
+			}
+		},
+
+		_onClickFavorite: function(event) {
+			event.preventDefault();
+			this._fileActions.triggerAction('Favorite', this.model, this._fileList);
+		},
+
+		_onClickDefaultAction: function(event) {
+			event.preventDefault();
+			this._fileActions.triggerAction(null, this.model, this._fileList);
+		},
+
+		_onModelChanged: function() {
+			// simply re-render
+			this.render();
+		},
+
+		setFileInfo: function(fileInfo) {
+			if (this.model) {
+				this.model.off('change', this._onModelChanged, this);
+			}
+			this.model = fileInfo;
+			if (this.model) {
+				this.model.on('change', this._onModelChanged, this);
+			}
+			this.render();
+		},
+
+		/**
+		 * Renders this details view
+		 */
+		render: function() {
+			if (this.model) {
+				var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
+				this.$el.html(this.template({
 					nameLabel: t('files', 'Name'),
-					name: this._fileInfo.name,
+					name: this.model.get('name'),
 					pathLabel: t('files', 'Path'),
-					path: this._fileInfo.path,
+					path: this.model.get('path'),
 					sizeLabel: t('files', 'Size'),
-					size: OC.Util.humanFileSize(this._fileInfo.size, true),
-					altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
+					size: OC.Util.humanFileSize(this.model.get('size'), true),
+					altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
 					dateLabel: t('files', 'Modified'),
-					altDate: OC.Util.formatDate(this._fileInfo.mtime),
-					date: OC.Util.relativeModifiedDate(this._fileInfo.mtime),
+					altDate: OC.Util.formatDate(this.model.get('mtime')),
+					date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
 					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
 					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
 				}));
 
 				// TODO: we really need OC.Previews
 				var $iconDiv = this.$el.find('.thumbnail');
-				if (this._fileInfo.mimetype !== 'httpd/unix-directory') {
+				if (!this.model.isDirectory()) {
 					// TODO: inject utility class?
 					FileList.lazyLoadPreview({
-						path: this._fileInfo.path + '/' + this._fileInfo.name,
-						mime: this._fileInfo.mimetype,
-						etag: this._fileInfo.etag,
+						path: this.model.getFullPath(),
+						mime: this.model.get('mimetype'),
+						etag: this.model.get('etag'),
 						x: 50,
 						y: 50,
 						callback: function(previewUrl) {
@@ -90,7 +136,10 @@
 					$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
 				}
 				this.$el.find('[title]').tooltip({placement: 'bottom'});
+			} else {
+				this.$el.empty();
 			}
+			this.delegateEvents();
 		}
 	});
 
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index ec69ce4b965..d8552c71e45 100644
--- a/apps/files/js/tagsplugin.js
+++ b/apps/files/js/tagsplugin.js
@@ -77,7 +77,7 @@
 			var self = this;
 			// register "star" action
 			fileActions.registerAction({
-				name: 'favorite',
+				name: 'Favorite',
 				displayName: 'Favorite',
 				mime: 'all',
 				permissions: OC.PERMISSION_READ,
@@ -124,6 +124,7 @@
 						toggleStar($actionEl, (newTags.indexOf(OC.TAG_FAVORITE) >= 0));
 						$file.attr('data-tags', newTags.join('|'));
 						$file.attr('data-favorite', !isFavorite);
+						context.fileInfoModel.set('tags', newTags);
 						fileInfo.tags = newTags;
 					});
 				}
@@ -145,6 +146,12 @@
 				$tr.find('td:first').prepend('<div class="favorite"></div>');
 				return $tr;
 			};
+			var oldElementToFile = fileList.elementToFile;
+			fileList.elementToFile = function($el) {
+				var fileInfo = oldElementToFile.apply(this, arguments);
+				fileInfo.tags = $el.attr('data-tags') || [];
+				return fileInfo;
+			};
 		},
 
 		attach: function(fileList) {