Add new folder link in side bar

services/web/app/views/project/list.jade

@@ -19,449 +19,9 @@ block content
 		.container
 			.row
 				.col-md-2
-					.dropdown
-						a.btn.btn-primary.dropdown-toggle(
-							href="#",
-							data-toggle="dropdown"
-						) New Project
-						ul.dropdown-menu(role="menu")
-							li
-								a(
-									href,
-									ng-click="openCreateProjectModal()"
-								) Blank Project
-							li
-								a(
-									href,
-									ng-click="openCreateProjectModal('example')"
-								) Example Project
-							li
-								a(
-									href,
-									ng-click="openUploadProjectModal()"
-								) Upload Project
-							li.divider
-							li.dropdown-header Templates
-							li
-								a.menu-indent(href="/templates/cv") CV or Resume
-							li
-								a.menu-indent(href="/templates/cover-letters") Cover Letter
-							li
-								a.menu-indent(href="/templates/journals") Journal Article
-							li
-								a.menu-indent(href="/templates/presentations") Presentation
-							li
-								a.menu-indent(href="/templates/thesis") Thesis
-							li
-								a.menu-indent(href="/templates/bibliographies") Bibliographies
-							li
-								a.menu-indent(href="/templates") View All »
-
-					.row-spaced(ng-if="projects.length > 0", ng-cloak)
-						ul.list-unstyled.folders-menu(
-							ng-controller="TagListController"
-						)
-							li(ng-class="{active: (filter == 'all')}")
-								a(href, ng-click="filterProjects('all')") All projects
-							li(ng-class="{active: (filter == 'owned')}")
-								a(href, ng-click="filterProjects('owned')") Your projects
-							li(ng-class="{active: (filter == 'shared')}")
-								a(href, ng-click="filterProjects('shared')") Shared projects
-							li(ng-class="{active: (filter == 'archived')}")
-								a(href, ng-click="filterProjects('archived')") Deleted projects
-							li(ng-if="tags.length > 0")
-								h2 Folders
-							li(
-								ng-repeat="tag in tags | filter:nonEmpty",
-								ng-controller="TagListItemController",
-								ng-class="{active: tag.selected}",
-								ng-cloak
-							)
-								a(href="#", ng-click="selectTag()")
-									i.icon.fa(
-										ng-class="{\
-											'fa-folder-open-o': tag.selected,\
-											'fa-folder-o': !tag.selected\
-										}"
-									)
-									|  {{tag.name}} 
-									span.subdued ({{tag.project_ids.length}})
-
-					.row-spaced(ng-if="projects.length == 0", ng-cloak)
-						.first-project
-							div
-								i.fa.fa-arrow-up.fa-2x
-							div
-								strong Create your first project!
-
-					- if (showUserDetailsArea)
-						.row-spaced#userProfileInformation(ng-if="projects.length > 0", ng-cloak)
-							div(ng-controller="UserProfileController")
-								hr(ng-show="percentComplete < 100")
-								.text-centered.user-profile(ng-show="percentComplete < 100")
-									.progress
-										.progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}")
-
-									p.small
-										| Your profile is 
-										strong {{percentComplete}}% 
-										| complete
-
-									button#completeUserProfileInformation.btn.btn-info(
-										ng-hide="formVisable",
-										ng-click="openUserProfileModal()"
-									) Complete
-
-					-if (settings.enableSubscriptions && !hasSubscription)
-						.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
-							hr
-							p.small You are using the free version of ShareLaTeX.
-							p
-								a(href="/user/subscription/plans").btn.btn-primary Upgrade
-							p.small
-								| or unlock some free bonus features by 
-								a(href="/user/bonus") sharing ShareLaTeX.
+					include ./list/side-bar
 
 				.col-md-10
-					.container-fluid
-						.row
-							.col-md-12
-								form.project-search.form-horizontal(role="form")
-									.form-group.has-feedback.has-feedback-left.col-md-7
-										input.form-control.col-md-7(
-											placeholder='Search projects…',
-											autofocus='autofocus',
-											ng-model="searchText",
-											focus-on='search:clear'
-										)
-										i.fa.fa-search.form-control-feedback-left
-										i.fa.fa-times.form-control-feedback(
-											ng-click="clearSearchText()",
-											style="cursor: pointer;",
-											ng-show="searchText.length > 0"
-										)
-									//- i.fa.fa-remove
-
-								.project-tools(ng-cloak)
-									.btn-toolbar(ng-show="filter != 'archived'")
-										.btn-group(ng-hide="selectedProjects.length < 1")
-											a.btn.btn-default(
-												href='#',
-												tooltip="Download",
-												tooltip-placement="bottom",
-												ng-click="downloadSelectedProjects()"
-											)
-												i.fa.fa-cloud-download
-											a.btn.btn-default(
-												href='#',
-												tooltip="Delete",
-												tooltip-placement="bottom",
-												ng-click="openArchiveProjectsModal()"
-											)
-												i.fa.fa-trash-o
-
-										.btn-group.dropdown(ng-hide="selectedProjects.length < 1")
-											a.btn.btn-default.dropdown-toggle(
-												href="#",
-												data-toggle="dropdown",
-												tooltip="Add to folders",
-												tooltip-placement="bottom"
-											)
-												i.fa.fa-folder-open-o
-												|  
-												span.caret
-											ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu(
-												role="menu"
-												ng-controller="TagListController"
-											)
-												li.dropdown-header Add to folder
-												li(
-													ng-repeat="tag in tags | filter:nonEmpty | orderBy:'name'",
-													ng-controller="TagDropdownItemController"
-												)
-													a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click")
-														i.fa(
-															ng-class="{\
-																'fa-check-square-o': areSelectedProjectsInTag == true,\
-																'fa-square-o': areSelectedProjectsInTag == false,\
-																'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
-															}"
-														)
-														|  {{tag.name}}
-												li.divider
-												li
-													a(href="#", ng-click="openNewTagModal()", stop-propagation="click") Create New Folder
-
-										.btn-group(ng-hide="selectedProjects.length != 1").dropdown
-											a.btn.btn-default.dropdown-toggle(
-												href='#',
-												data-toggle="dropdown"
-											) More 
-												span.caret
-											ul.dropdown-menu.dropdown-menu-right(role="menu")
-												li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
-													a(
-														href='#',
-														ng-click="openRenameProjectModal()"
-													) Rename
-												li
-													a(
-														href='#',
-														ng-click="openCloneProjectModal()"
-													) Make a copy
-
-									.btn-toolbar(ng-show="filter == 'archived'")
-										.btn-group(ng-hide="selectedProjects.length < 1")
-											a.btn.btn-default(
-												href='#',
-												data-original-title="Restore",
-												data-toggle="tooltip",
-												data-placement="bottom",
-												ng-click="restoreSelectedProjects()"
-											) Restore
-
-										.btn-group(ng-hide="selectedProjects.length < 1")
-											a.btn.btn-danger(
-												href='#',
-												data-original-title="Delete Forever",
-												data-toggle="tooltip",
-												data-placement="bottom",
-												ng-click="openDeleteProjectsModal()"
-											) Delete Forever
-
-						.row.row-spaced
-							.col-md-12
-								.card.card-thin
-									ul.list-unstyled.project-list.structured-list(
-										select-all-list,
-										ng-if="projects.length > 0",
-										max-height="windowHeight - 290",
-										ng-cloak
-									)
-										li.container-fluid
-											.row
-												.col-md-6
-													input.select-all(
-														select-all,
-														type="checkbox"
-													)
-													span.header Title
-												.col-md-2
-													span.header Owner
-												.col-md-4
-													span.header Last Modified
-										li.project_entry.container-fluid(
-											ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
-											ng-controller="ProjectListItemController"
-										)
-											.row
-												.col-md-6
-													input.select-item(
-														select-individual,
-														type="checkbox",
-														ng-model="project.selected"
-													)
-													span
-														a.projectName(href="/project/{{project.id}}") {{project.name}}
-														span.label.label-default.tag-label(ng-repeat='tag in project.tags')
-															| {{tag.name}}
-												.col-md-2
-													span.owner {{ownerName()}}
-												.col-md-4
-													span.last-modified {{project.lastUpdated | formatDate}}
-										li(
-											ng-if="visibleProjects.length == 0",
-											ng-cloak
-										)
-											.row
-												.col-md-12.text-centered
-													small No projects
-									div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
-										h2 Welcome to ShareLaTeX!
-										p New to LaTeX? Start by having a look at our
-											a(href="/templates")  templates
-											|  or
-											a(href="/learn")  help guides
-											| ,
-											br 
-											| or create your first project on the left.
-
-		script(type='text/ng-template', id='newTagModalTemplate')
-			.modal-header
-				h3 Create New Folder
-			.modal-body
-				form(name="newTagForm", novalidate)
-					input.form-control(
-						type="text",
-						placeholder="New Folder Name",
-						required,
-						ng-model="inputs.newTagName",
-						on-enter="create()",
-						focus-on="open"
-					)
-			.modal-footer
-				button.btn.btn-default(ng-click="cancel()") Cancel
-				button.btn.btn-primary(
-					ng-disabled="newTagForm.$invalid"
-					ng-click="create()"
-				) Create
-
-		script(type='text/ng-template', id='renameProjectModalTemplate')
-			.modal-header
-				h3 Rename Project
-			.modal-body
-				form(name="renameProjectForm", novalidate)
-					input.form-control(
-						type="text",
-						placeholder="Project Name",
-						ng-model="inputs.projectName",
-						required,
-						on-enter="rename()",
-						focus-on="open"
-					)
-			.modal-footer
-				button.btn.btn-default(ng-click="cancel()") Cancel
-				button.btn.btn-primary(
-					ng-click="rename()",
-					ng-disabled="renameProjectForm.$invalid"
-				) Rename
-
-		script(type='text/ng-template', id='cloneProjectModalTemplate')
-			.modal-header
-				h3 Copy Project
-			.modal-body
-				form(name="cloneProjectForm", novalidate)
-					.form-group
-						label New Name
-						input.form-control(
-							type="text",
-							placeholder="New Project Name",
-							required,
-							ng-model="inputs.projectName",
-							on-enter="clone()",
-							focus-on="open"
-						)
-			.modal-footer
-				button.btn.btn-default(
-					ng-disabled="state.inflight"
-					ng-click="cancel()"
-				) Cancel
-				button.btn.btn-primary(
-					ng-disabled="cloneProjectForm.$invalid || state.inflight"
-					ng-click="clone()"
-				)
-					span(ng-hide="state.inflight") Copy
-					span(ng-show="state.inflight") Copying...
-
-		script(type='text/ng-template', id='newProjectModalTemplate')
-			.modal-header
-				h3 New Project
-			.modal-body
-				form(novalidate, name="newProjectForm")
-					input.form-control(
-						type="text",
-						placeholder="Project Name",
-						required,
-						ng-model="inputs.projectName",
-						on-enter="create()",
-						focus-on="open"
-					)
-			.modal-footer
-				button.btn.btn-default(
-					ng-disabled="state.inflight"
-					ng-click="cancel()"
-				) Cancel
-				button.btn.btn-primary(
-					ng-disabled="newProjectForm.$invalid || state.inflight"
-					ng-click="create()"
-				)
-					span(ng-hide="state.inflight") Create
-					span(ng-show="state.inflight") Creating...
-
-		script(type='text/ng-template', id='deleteProjectsModalTemplate')
-			.modal-header
-				h3 {{action}} Projects
-			.modal-body
-				div(ng-show="projectsToDelete.length > 0")
-					p You are about to delete the following projects:
-					ul
-						li(ng-repeat="project in projectsToDelete | orderBy:'name'")
-							strong {{project.name}}
-				div(ng-show="projectsToLeave.length > 0")
-					p You are about to leave the following projects:
-					ul
-						li(ng-repeat="project in projectsToLeave | orderBy:'name'")
-							strong {{project.name}}
-			.modal-footer
-				button.btn.btn-default(
-					ng-click="cancel()"
-				) Cancel
-				button.btn.btn-danger(
-					ng-click="delete()"
-				) {{action}}
-
-		script(type="text/ng-template", id="uploadProjectModalTemplate")
-			.modal-header
-				h3 Upload Zipped Project
-			.modal-body(
-				fine-upload
-				endpoint="/project/new/upload"
-				waiting-for-response-text="Creating project..."
-				failed-upload-text="Upload failed. Is it a valid zip file?"
-				upload-button-text="Select a .zip file"
-				drag-area-text="drag .zip file"
-				multiple="false"
-				allowed-extensions="['zip']"
-				on-complete-callback="onComplete"
-			)
-				span Upload a zipped project
-			.modal-footer
-				button.btn.btn-default(ng-click="cancel()") Cancel
+					include ./list/project-list
 
-		script(type="text/ng-template", id="userProfileModalTemplate")
-			.modal-header
-				h3 Your Profile
-			.modal-body
-				form(enctype='multipart/form-data', method='post')
-					.form-group
-						label(for="first_name") First Name
-						input.form-control(
-							type='text',
-							name='first_name',
-							ng-model="userInfoForm.first_name",
-							ng-blur="sendUpdate()",
-							placeholder="First Name",
-							select-when="formVisable"
-						)
-					.form-group
-						label(for="last_name") Last Name
-						input.form-control(
-							type='text',
-							name='last_name',
-							ng-model="userInfoForm.last_name",
-							ng-blur="sendUpdate()",
-							placeholder='Last Name'
-						)
-					.form-group#institution_auto_complete
-						label(for="institution") Institution
-						autocomplete(
-							ng-model="userInfoForm.institution",
-							name="institution",
-							data="institutions",
-							ng-blur="sendUpdate()",
-							on-type="updateInstitutionsList",
-							attr-placeholder="Institution",
-							attr-inputclass="form-control"
-						)
-					.form-group
-						label(for="role") Role
-						input.form-control(
-							type='text',
-							name='role',
-							ng-model="userInfoForm.role",
-							placeholder='Role',
-							ng-blur="sendUpdate()",
-							typeahead="role for role in roles | filter:$viewValue"
-						)
-			.modal-footer
-				button.btn.btn-info(ng-click="done()") Done
+		include ./list/modals

services/web/app/views/project/list/modals.jade

@@ -0,0 +1,179 @@
+script(type='text/ng-template', id='newTagModalTemplate')
+	.modal-header
+		h3 Create New Folder
+	.modal-body
+		form(name="newTagForm", novalidate)
+			input.form-control(
+				type="text",
+				placeholder="New Folder Name",
+				required,
+				ng-model="inputs.newTagName",
+				on-enter="create()",
+				focus-on="open"
+			)
+	.modal-footer
+		button.btn.btn-default(ng-click="cancel()") Cancel
+		button.btn.btn-primary(
+			ng-disabled="newTagForm.$invalid"
+			ng-click="create()"
+		) Create
+
+script(type='text/ng-template', id='renameProjectModalTemplate')
+	.modal-header
+		h3 Rename Project
+	.modal-body
+		form(name="renameProjectForm", novalidate)
+			input.form-control(
+				type="text",
+				placeholder="Project Name",
+				ng-model="inputs.projectName",
+				required,
+				on-enter="rename()",
+				focus-on="open"
+			)
+	.modal-footer
+		button.btn.btn-default(ng-click="cancel()") Cancel
+		button.btn.btn-primary(
+			ng-click="rename()",
+			ng-disabled="renameProjectForm.$invalid"
+		) Rename
+
+script(type='text/ng-template', id='cloneProjectModalTemplate')
+	.modal-header
+		h3 Copy Project
+	.modal-body
+		form(name="cloneProjectForm", novalidate)
+			.form-group
+				label New Name
+				input.form-control(
+					type="text",
+					placeholder="New Project Name",
+					required,
+					ng-model="inputs.projectName",
+					on-enter="clone()",
+					focus-on="open"
+				)
+	.modal-footer
+		button.btn.btn-default(
+			ng-disabled="state.inflight"
+			ng-click="cancel()"
+		) Cancel
+		button.btn.btn-primary(
+			ng-disabled="cloneProjectForm.$invalid || state.inflight"
+			ng-click="clone()"
+		)
+			span(ng-hide="state.inflight") Copy
+			span(ng-show="state.inflight") Copying...
+
+script(type='text/ng-template', id='newProjectModalTemplate')
+	.modal-header
+		h3 New Project
+	.modal-body
+		form(novalidate, name="newProjectForm")
+			input.form-control(
+				type="text",
+				placeholder="Project Name",
+				required,
+				ng-model="inputs.projectName",
+				on-enter="create()",
+				focus-on="open"
+			)
+	.modal-footer
+		button.btn.btn-default(
+			ng-disabled="state.inflight"
+			ng-click="cancel()"
+		) Cancel
+		button.btn.btn-primary(
+			ng-disabled="newProjectForm.$invalid || state.inflight"
+			ng-click="create()"
+		)
+			span(ng-hide="state.inflight") Create
+			span(ng-show="state.inflight") Creating...
+
+script(type='text/ng-template', id='deleteProjectsModalTemplate')
+	.modal-header
+		h3 {{action}} Projects
+	.modal-body
+		div(ng-show="projectsToDelete.length > 0")
+			p You are about to delete the following projects:
+			ul
+				li(ng-repeat="project in projectsToDelete | orderBy:'name'")
+					strong {{project.name}}
+		div(ng-show="projectsToLeave.length > 0")
+			p You are about to leave the following projects:
+			ul
+				li(ng-repeat="project in projectsToLeave | orderBy:'name'")
+					strong {{project.name}}
+	.modal-footer
+		button.btn.btn-default(
+			ng-click="cancel()"
+		) Cancel
+		button.btn.btn-danger(
+			ng-click="delete()"
+		) {{action}}
+
+script(type="text/ng-template", id="uploadProjectModalTemplate")
+	.modal-header
+		h3 Upload Zipped Project
+	.modal-body(
+		fine-upload
+		endpoint="/project/new/upload"
+		waiting-for-response-text="Creating project..."
+		failed-upload-text="Upload failed. Is it a valid zip file?"
+		upload-button-text="Select a .zip file"
+		drag-area-text="drag .zip file"
+		multiple="false"
+		allowed-extensions="['zip']"
+		on-complete-callback="onComplete"
+	)
+		span Upload a zipped project
+	.modal-footer
+		button.btn.btn-default(ng-click="cancel()") Cancel
+
+script(type="text/ng-template", id="userProfileModalTemplate")
+	.modal-header
+		h3 Your Profile
+	.modal-body
+		form(enctype='multipart/form-data', method='post')
+			.form-group
+				label(for="first_name") First Name
+				input.form-control(
+					type='text',
+					name='first_name',
+					ng-model="userInfoForm.first_name",
+					ng-blur="sendUpdate()",
+					placeholder="First Name",
+					select-when="formVisable"
+				)
+			.form-group
+				label(for="last_name") Last Name
+				input.form-control(
+					type='text',
+					name='last_name',
+					ng-model="userInfoForm.last_name",
+					ng-blur="sendUpdate()",
+					placeholder='Last Name'
+				)
+			.form-group#institution_auto_complete
+				label(for="institution") Institution
+				autocomplete(
+					ng-model="userInfoForm.institution",
+					name="institution",
+					data="institutions",
+					ng-blur="sendUpdate()",
+					on-type="updateInstitutionsList",
+					attr-placeholder="Institution",
+					attr-inputclass="form-control"
+				)
+			.form-group
+				label(for="role") Role
+				input.form-control(
+					type='text',
+					name='role',
+					ng-model="userInfoForm.role",
+					placeholder='Role',
+					ng-blur="sendUpdate()",
+					typeahead="role for role in roles | filter:$viewValue"
+				)
+	.modal-footer
+		button.btn.btn-info(ng-click="done()") Done

services/web/app/views/project/list/project-list.jade

@@ -0,0 +1,161 @@
+.row
+	.col-md-12
+		form.project-search.form-horizontal(role="form")
+			.form-group.has-feedback.has-feedback-left.col-md-7
+				input.form-control.col-md-7(
+					placeholder='Search projects…',
+					autofocus='autofocus',
+					ng-model="searchText",
+					focus-on='search:clear'
+				)
+				i.fa.fa-search.form-control-feedback-left
+				i.fa.fa-times.form-control-feedback(
+					ng-click="clearSearchText()",
+					style="cursor: pointer;",
+					ng-show="searchText.length > 0"
+				)
+			//- i.fa.fa-remove
+
+		.project-tools(ng-cloak)
+			.btn-toolbar(ng-show="filter != 'archived'")
+				.btn-group(ng-hide="selectedProjects.length < 1")
+					a.btn.btn-default(
+						href='#',
+						tooltip="Download",
+						tooltip-placement="bottom",
+						ng-click="downloadSelectedProjects()"
+					)
+						i.fa.fa-cloud-download
+					a.btn.btn-default(
+						href='#',
+						tooltip="Delete",
+						tooltip-placement="bottom",
+						ng-click="openArchiveProjectsModal()"
+					)
+						i.fa.fa-trash-o
+
+				.btn-group.dropdown(ng-hide="selectedProjects.length < 1")
+					a.btn.btn-default.dropdown-toggle(
+						href="#",
+						data-toggle="dropdown",
+						tooltip="Add to folders",
+						tooltip-placement="bottom"
+					)
+						i.fa.fa-folder-open-o
+						|  
+						span.caret
+					ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu(
+						role="menu"
+						ng-controller="TagListController"
+					)
+						li.dropdown-header Add to folder
+						li(
+							ng-repeat="tag in tags | filter:nonEmpty | orderBy:'name'",
+							ng-controller="TagDropdownItemController"
+						)
+							a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click")
+								i.fa(
+									ng-class="{\
+										'fa-check-square-o': areSelectedProjectsInTag == true,\
+										'fa-square-o': areSelectedProjectsInTag == false,\
+										'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
+									}"
+								)
+								|  {{tag.name}}
+						li.divider
+						li
+							a(href="#", ng-click="openNewTagModal()", stop-propagation="click") Create New Folder
+
+				.btn-group(ng-hide="selectedProjects.length != 1").dropdown
+					a.btn.btn-default.dropdown-toggle(
+						href='#',
+						data-toggle="dropdown"
+					) More 
+						span.caret
+					ul.dropdown-menu.dropdown-menu-right(role="menu")
+						li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
+							a(
+								href='#',
+								ng-click="openRenameProjectModal()"
+							) Rename
+						li
+							a(
+								href='#',
+								ng-click="openCloneProjectModal()"
+							) Make a copy
+
+			.btn-toolbar(ng-show="filter == 'archived'")
+				.btn-group(ng-hide="selectedProjects.length < 1")
+					a.btn.btn-default(
+						href='#',
+						data-original-title="Restore",
+						data-toggle="tooltip",
+						data-placement="bottom",
+						ng-click="restoreSelectedProjects()"
+					) Restore
+
+				.btn-group(ng-hide="selectedProjects.length < 1")
+					a.btn.btn-danger(
+						href='#',
+						data-original-title="Delete Forever",
+						data-toggle="tooltip",
+						data-placement="bottom",
+						ng-click="openDeleteProjectsModal()"
+					) Delete Forever
+
+.row.row-spaced
+	.col-md-12
+		.card.card-thin
+			ul.list-unstyled.project-list.structured-list(
+				select-all-list,
+				ng-if="projects.length > 0",
+				max-height="windowHeight - 290",
+				ng-cloak
+			)
+				li.container-fluid
+					.row
+						.col-md-6
+							input.select-all(
+								select-all,
+								type="checkbox"
+							)
+							span.header Title
+						.col-md-2
+							span.header Owner
+						.col-md-4
+							span.header Last Modified
+				li.project_entry.container-fluid(
+					ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
+					ng-controller="ProjectListItemController"
+				)
+					.row
+						.col-md-6
+							input.select-item(
+								select-individual,
+								type="checkbox",
+								ng-model="project.selected"
+							)
+							span
+								a.projectName(href="/project/{{project.id}}") {{project.name}}
+								span.label.label-default.tag-label(ng-repeat='tag in project.tags')
+									| {{tag.name}}
+						.col-md-2
+							span.owner {{ownerName()}}
+						.col-md-4
+							span.last-modified {{project.lastUpdated | formatDate}}
+				li(
+					ng-if="visibleProjects.length == 0",
+					ng-cloak
+				)
+					.row
+						.col-md-12.text-centered
+							small No projects
+			div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
+				h2 Welcome to ShareLaTeX!
+				p New to LaTeX? Start by having a look at our
+					a(href="/templates")  templates
+					|  or
+					a(href="/learn")  help guides
+					| ,
+					br 
+					| or create your first project on the left.

services/web/app/views/project/list/side-bar.jade

@@ -0,0 +1,106 @@
+.dropdown
+	a.btn.btn-primary.dropdown-toggle(
+		href="#",
+		data-toggle="dropdown"
+	) New Project
+	ul.dropdown-menu(role="menu")
+		li
+			a(
+				href,
+				ng-click="openCreateProjectModal()"
+			) Blank Project
+		li
+			a(
+				href,
+				ng-click="openCreateProjectModal('example')"
+			) Example Project
+		li
+			a(
+				href,
+				ng-click="openUploadProjectModal()"
+			) Upload Project
+		li.divider
+		li.dropdown-header Templates
+		li
+			a.menu-indent(href="/templates/cv") CV or Resume
+		li
+			a.menu-indent(href="/templates/cover-letters") Cover Letter
+		li
+			a.menu-indent(href="/templates/journals") Journal Article
+		li
+			a.menu-indent(href="/templates/presentations") Presentation
+		li
+			a.menu-indent(href="/templates/thesis") Thesis
+		li
+			a.menu-indent(href="/templates/bibliographies") Bibliographies
+		li
+			a.menu-indent(href="/templates") View All »
+
+.row-spaced(ng-if="projects.length > 0", ng-cloak)
+	ul.list-unstyled.folders-menu(
+		ng-controller="TagListController"
+	)
+		li(ng-class="{active: (filter == 'all')}")
+			a(href, ng-click="filterProjects('all')") All projects
+		li(ng-class="{active: (filter == 'owned')}")
+			a(href, ng-click="filterProjects('owned')") Your projects
+		li(ng-class="{active: (filter == 'shared')}")
+			a(href, ng-click="filterProjects('shared')") Shared projects
+		li(ng-class="{active: (filter == 'archived')}")
+			a(href, ng-click="filterProjects('archived')") Deleted projects
+		li
+			h2 Folders
+		li(
+			ng-repeat="tag in tags | filter:nonEmpty",
+			ng-controller="TagListItemController",
+			ng-class="{active: tag.selected}",
+			ng-cloak
+		)
+			a(href, ng-click="selectTag()")
+				i.icon.fa.fa-fw(
+					ng-class="{\
+						'fa-folder-open-o': tag.selected,\
+						'fa-folder-o': !tag.selected\
+					}"
+				)
+				|  {{tag.name}} 
+				span.subdued ({{tag.project_ids.length}})
+		li(ng-cloak)
+			a(href, ng-click="openNewTagModal()")
+				i.fa.fa-fw.fa-plus
+				|  New Folder
+
+.row-spaced(ng-if="projects.length == 0", ng-cloak)
+	.first-project
+		div
+			i.fa.fa-arrow-up.fa-2x
+		div
+			strong Create your first project!
+
+- if (showUserDetailsArea)
+	.row-spaced#userProfileInformation(ng-if="projects.length > 0", ng-cloak)
+		div(ng-controller="UserProfileController")
+			hr(ng-show="percentComplete < 100")
+			.text-centered.user-profile(ng-show="percentComplete < 100")
+				.progress
+					.progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}")
+
+				p.small
+					| Your profile is 
+					strong {{percentComplete}}% 
+					| complete
+
+				button#completeUserProfileInformation.btn.btn-info(
+					ng-hide="formVisable",
+					ng-click="openUserProfileModal()"
+				) Complete
+
+-if (settings.enableSubscriptions && !hasSubscription)
+	.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
+		hr
+		p.small You are using the free version of ShareLaTeX.
+		p
+			a(href="/user/subscription/plans").btn.btn-primary Upgrade
+		p.small
+			| or unlock some free bonus features by 
+			a(href="/user/bonus") sharing ShareLaTeX.

services/web/public/stylesheets/app/project-list.less

@@ -53,6 +53,9 @@ ul.folders-menu {
 			}
 		}
 	}
+	li > a.small {
+		color: @gray;
+	}
 	h2 {
 		margin-top: @line-height-computed / 2;
 		margin-bottom: @line-height-computed / 4;