Added user links to sidebar.

assets/components/header/menu.vue

@@ -21,7 +21,7 @@
 				class="menu-item"
 				@click.stop="$store.dispatch('logout')"
 			>
-				<Icon icon="enter2" />Log out
+				<Icon icon="exit2" />Log out
 			</li>
 
 			<li

assets/components/sidebar/sidebar.vue

@@ -129,35 +129,63 @@
 				</nav>
 			</div>
 
-			<div class="sidebar-section toggles noselect">
+			<div class="sidebar-section controls noselect">
 				<label
-					v-show="sfw"
+					v-if="auth && me"
-					class="toggle"
+					@click="$emit('toggleSidebar', false)"
-					@click="setSfw(false)"
+				>
-				><Icon icon="fire" />Disable safe mode</label>
+					<router-link
+						:to="{ name: 'user', params: { username: me.username } }"
+						class="toggle username nolink"
+					>{{ me.username }}</router-link>
+				</label>
 
-				<label
+				<div class="toggles noselect">
-					v-show="!sfw"
+					<label
-					class="toggle"
+						v-if="auth && !me"
-					@click="setSfw(true)"
+						@click="$emit('toggleSidebar', false)"
-				><Icon icon="flower" />Enable safe mode</label>
+					>
+						<router-link
+							:to="{ name: 'login', query: { ref: $route.path } }"
+							class="toggle nolink"
+						><Icon icon="enter2" />Log in</router-link>
+					</label>
 
-				<label
+					<label
-					v-show="theme === 'dark'"
+						v-if="auth && me"
-					class="toggle"
+						class="toggle"
-					@click="setTheme('light')"
+						@click.stop="$store.dispatch('logout')"
-				><Icon icon="sun" />Use light theme</label>
+					><Icon icon="exit2" />Log out</label>
 
-				<label
+					<label
-					v-show="theme === 'light'"
+						v-show="sfw"
-					class="toggle"
+						class="toggle"
-					@click="setTheme('dark')"
+						@click="setSfw(false)"
-				><Icon icon="moon" />Use dark theme</label>
+					><Icon icon="fire" />Disable safe mode</label>
 
-				<label
+					<label
-					class="toggle"
+						v-show="!sfw"
-					@click="$emit('showFilters', true)"
+						class="toggle"
-				><Icon icon="filter" />Filters</label>
+						@click="setSfw(true)"
+					><Icon icon="flower" />Enable safe mode</label>
+
+					<label
+						v-show="theme === 'dark'"
+						class="toggle"
+						@click="setTheme('light')"
+					><Icon icon="sun" />Use light theme</label>
+
+					<label
+						v-show="theme === 'light'"
+						class="toggle"
+						@click="setTheme('dark')"
+					><Icon icon="moon" />Use dark theme</label>
+
+					<label
+						class="toggle"
+						@click="$emit('showFilters', true)"
+					><Icon icon="filter" />Filters</label>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -178,6 +206,14 @@ function theme(state) {
 	return state.ui.theme;
 }
 
+function auth(state) {
+	return state.auth.enabled;
+}
+
+function me(state) {
+	return state.auth.user;
+}
+
 function setTheme(newTheme) {
 	this.$store.dispatch('setTheme', newTheme);
 }
@@ -198,6 +234,8 @@ export default {
 	},
 	computed: {
 		...mapState({
+			auth,
+			me,
 			sfw,
 			theme,
 		}),
@@ -312,10 +350,13 @@ export default {
     }
 }
 
+.controls {
+	margin: .5rem 0 0 0;
+}
+
 .toggles {
 	flex-shrink: 0;
 	border-top: solid 1px var(--shadow-hint);
-	margin: .5rem 0 0 0;
 }
 
 .toggle {
@@ -324,6 +365,10 @@ export default {
 	color: var(--shadow);
 	font-weight: bold;
 
+	&.username {
+		justify-content: center;
+	}
+
 	.icon {
 		fill: var(--shadow);
 		margin: 0 1rem 0 0;

assets/components/users/actor-preview.vue

@@ -82,6 +82,7 @@ export default {
 	align-items: center;
 	height: 100%;
 	padding: 0 .5rem;
+	font-size: .8rem;
 	font-weight: bold;
 }
 </style>

assets/js/curate.js

@@ -148,6 +148,10 @@ function curateStash(stash) {
 }
 
 function curateUser(user) {
+	if (!user) {
+		return null;
+	}
+
 	const curatedUser = user;
 
 	if (user.stashes) {

assets/js/users/actions.js

@@ -55,7 +55,7 @@ function initUsersActions(store, _router) {
 			}
 		`, {
 			hasAuth: !!store.state.auth.user,
-			userId: store.state.auth.user?.id,
+			userId: store.state.auth.user?.id || null,
 			username,
 		});