Fixed heart icon in other user's stashes. Syncing stashes to session on creation and removal.

components/stashes/heart.vue

@@ -28,19 +28,37 @@
 			</template>
 		</VDropdown>
 
-		<Icon
-			v-if="itemStashes.some((itemStash) => itemStash.id === currentStash.id)"
-			:icon="currentStash.isPrimary ? 'heart7' : 'folder-heart'"
-			class="heart favorited noselect"
-			@click.native.stop="unstashItem(currentStash)"
-		/>
+		<template v-if="pageStash?.user.id === user.id">
+			<Icon
+				v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
+				:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
+				class="heart favorited noselect"
+				@click.native.stop="unstashItem(pageStash)"
+			/>
 
-		<Icon
-			v-else
-			:icon="currentStash.isPrimary ? 'heart8' : 'folder-heart'"
-			class="heart noselect"
-			@click.native.stop="stashItem(currentStash)"
-		/>
+			<Icon
+				v-else
+				:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
+				class="heart noselect"
+				@click.native.stop="stashItem(pageStash)"
+			/>
+		</template>
+
+		<template v-else>
+			<Icon
+				v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
+				icon="heart7"
+				class="heart favorited noselect"
+				@click.native.stop="unstashItem(user.primaryStash)"
+			/>
+
+			<Icon
+				v-else
+				icon="heart8"
+				class="heart noselect"
+				@click.native.stop="stashItem(user.primaryStash)"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -71,7 +89,7 @@ const props = defineProps({
 const emit = defineEmits(['stashed', 'unstashed']);
 
 const { user, pageProps } = inject('pageContext');
-const currentStash = pageProps.stash || user?.primaryStash;
+const pageStash = pageProps.stash;
 
 const itemStashes = ref(props.item.stashes);
 

pages/scene/+Page.vue

@@ -76,7 +76,7 @@
 					>
 						<img
 							v-if="scene.channel.hasLogo"
-							:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/network.png` : `/logos/${scene.network.slug}/${scene.channel.slug}.png`"
+							:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/thumbs/network.png` : `/logos/${scene.network.slug}/thumbs/${scene.channel.slug}.png`"
 							class="channel-logo entity-logo"
 						>
 					</Link>
@@ -87,12 +87,12 @@
 					>
 						by
 						<Link
-							:href="`/${scene.network.type}/${scene.network.slug}`"
+							:href="`/${scene.network.type}/thumbs/${scene.network.slug}`"
 							class="network-link entity-link"
 						>
 							<img
 								v-if="scene.network.hasLogo"
-								:src="`/logos/${scene.network.slug}/network.png`"
+								:src="`/logos/${scene.network.slug}/thumbs/network.png`"
 								class="network-logo entity-logo"
 							>
 						</Link>
@@ -371,11 +371,13 @@ const poster = computed(() => {
 
 .meta {
 	display: flex;
+	height: 3.25rem;
 	justify-content: space-between;
-	align-items: center;
+	align-items: stretch;
 	background: var(--grey-dark-40);
 	border-radius: 0 0 .5rem .5rem;
 	color: var(--text-light);
+	overflow: hidden;
 }
 
 .entity {
@@ -386,18 +388,23 @@ const poster = computed(() => {
 }
 
 .entity-link {
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
 	padding: .5rem 1rem;
+	height: 100%;
 }
 
 .entity-logo {
-	width: 10rem;
+	max-width: 15rem;
 	max-height: 100%;
-	object-fit: contain;
 }
 
 .network-container {
+	height: 100%;
 	display: flex;
 	align-items: center;
+	overflow: hidden;
 }
 
 .date {

src/web/auth.js

@@ -2,6 +2,7 @@
 import IPCIDR from 'ip-cidr';
 
 import { login, signup } from '../auth.js';
+import { fetchUser } from '../users.js';
 
 function getIp(req) {
 	const ip = req.headers['x-forwarded-for']?.split(',')[0] || req.connection.remoteAddress; // See src/ws
@@ -35,6 +36,15 @@ export async function setUserApi(req, res, next) {
 	next();
 }
 
+export async function updateSessionUser(req) {
+	const user = await fetchUser(req.session.user.id, {}, req.session.user);
+
+	req.session.user = user;
+
+	req.user = user;
+	req.user.ip = req.userIp;
+}
+
 export async function loginApi(req, res) {
 	const user = await login(req.body, req.userIp);
 

src/web/stashes.js

@@ -10,20 +10,27 @@ import {
 	updateStash,
 } from '../stashes.js';
 
+import { updateSessionUser } from './auth.js';
+
 export async function createStashApi(req, res) {
 	const stash = await createStash(req.body, req.session.user);
 
+	await updateSessionUser(req);
+
 	res.send(stash);
 }
 
 export async function updateStashApi(req, res) {
 	const stash = await updateStash(Number(req.params.stashId), req.body, req.session.user);
 
+	await updateSessionUser(req);
+
 	res.send(stash);
 }
 
 export async function removeStashApi(req, res) {
 	await removeStash(Number(req.params.stashId), req.session.user);
+	await updateSessionUser(req);
 
 	res.status(204).send();
 }