0.7.1

components/header/header.vue

@@ -14,6 +14,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'updates' }"
 						href="/updates"
 					>Updates</Link>
 				</li>
@@ -21,6 +22,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'actors' }"
 						href="/actors"
 					>Actors</Link>
 				</li>
@@ -28,6 +30,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'channels' }"
 						href="/channels"
 					>Channels</Link>
 				</li>
@@ -35,6 +38,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'tags' }"
 						href="/tags"
 					>Tags</Link>
 				</li>
@@ -42,6 +46,7 @@
 				<li class="nav-item">
 					<Link
 						class="link"
+						:class="{ active: activePage === 'movies' }"
 						href="/movies"
 					>Movies</Link>
 				</li>
@@ -65,7 +70,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 import navigate from '#/src/navigate.js';
 
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
@@ -73,6 +78,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 const pageContext = inject('pageContext');
 const query = ref(pageContext.urlParsed.search.q || '');
 
+const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
+
 function search() {
 	navigate('/search', { q: query.value }, { redirect: true });
 }

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.7.0",
+      "version": "0.7.1",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@floating-ui/dom": "^1.5.3",

package.json

@@ -57,5 +57,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.7.0"
+  "version": "0.7.1"
 }

pages/movies/+Page.vue

@@ -33,6 +33,26 @@
 			/>
 		</Filters>
 
+		<div class="movies-container">
+			<div class="movies-header">
+				<div class="meta">{{ total }} results</div>
+
+				<select
+					v-model="scope"
+					class="input"
+					@change="search({ autoScope: false })"
+				>
+					<option value="likes">Likes</option>
+					<option value="latest">Latest</option>
+					<option value="upcoming">Upcoming</option>
+					<option value="new">New</option>
+					<option
+						value="results"
+						:disabled="!filters.search"
+					>Relevance</option>
+				</select>
+			</div>
+
 			<ul class="movies nolist">
 				<li
 					v-for="movie in movies"
@@ -59,7 +79,7 @@
 						>
 					</a>
 
-				<div class="meta">
+					<div class="tile-meta">
 						<div class="channel">
 							<Link
 								:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
@@ -123,6 +143,7 @@
 				</li>
 			</ul>
 		</div>
+	</div>
 </template>
 
 <script setup>
@@ -264,11 +285,30 @@ function updateFilter(prop, value, reload = true) {
 	background: var(--background-base-10);
 }
 
+.movies-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.movies-header {
+	display: flex;
+	align-items: center;
+	padding: .5rem 1rem .25rem 3rem;
+}
+
+.meta {
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .movies {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
 	gap: 1rem;
-	padding: 1rem;
+	padding: .5rem 1rem 1rem 1rem;
 }
 
 .movie {
@@ -307,7 +347,7 @@ function updateFilter(prop, value, reload = true) {
 	opacity: .1;
 }
 
-.meta {
+.tile-meta {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;