Troll Room upgrade

client/components/NetworkForm.vue

@@ -436,6 +436,12 @@ the server tab on new connection"
 					<template v-else>Connect</template>
 				</button>
 			</div>
+
+			<div>
+				<button type="button" class="btn" @click="resetToDefaults">
+					Reset to defaults
+				</button>
+			</div>
 		</form>
 	</div>
 </template>
@@ -501,12 +507,22 @@ export default defineComponent({
 	setup(props) {
 		const store = useStore();
 		const config = ref(store.state.serverConfiguration);
-		const trollroomNick = ref(localStorage.getItem('trollroom-nick') ?? props.defaults?.nick);
-		const trollroomJoin = ref(localStorage.getItem('trollroom-join') ?? props.defaults?.join);
-		const trollroomPassword = ref(localStorage.getItem('trollroom-password') ?? props.defaults?.password);
+		const trollroomNick = ref(window.localStorage.getItem('trollroom-nick') ?? props.defaults?.nick);
+		const trollroomJoin = ref(window.localStorage.getItem('trollroom-join') ?? props.defaults?.join);
+		const trollroomPassword = ref(window.localStorage.getItem('trollroom-password') ?? '');
 		const previousUsername = ref(props.defaults?.username);
 		const displayPasswordField = ref(false);
 
+		const resetToDefaults = () => {
+			window.localStorage.removeItem('trollroom-nick');
+			window.localStorage.removeItem('trollroom-join');
+			window.localStorage.removeItem('trollroom-password');
+
+			trollroomNick.value = props.defaults?.nick;
+			trollroomJoin.value = props.defaults?.join;
+			trollroomPassword.value = '';
+		};
+
 		const publicPassword = ref<HTMLInputElement | null>(null);
 
 		watch(displayPasswordField, (newValue) => {
@@ -629,6 +645,7 @@ export default defineComponent({
 			trollroomNick,
 			trollroomJoin,
 			trollroomPassword,
+			resetToDefaults,
 		};
 	},
 });

client/components/NetworkList.vue

@@ -5,7 +5,8 @@
 		role="navigation"
 		aria-label="Network and Channel list"
 	>
-		You are not connected to the Troll Room.
+		You are not connected to the Troll Room.<br>
+		<router-link to="/connect">Connect Now</router-link>
 	</div>
 	<div v-else ref="networklist" role="navigation" aria-label="Network and Channel list">
 		<div class="jump-to-input" v-if="false">

client/components/Sidebar.vue

@@ -3,13 +3,13 @@
 		<div class="scrollable-area">
 			<div class="logo-container">
 				<img
-					src="img/trollroom-logo.svg"
+					src="/img/trollroom-logo.svg"
 					class="logo"
 					alt="Troll Room"
 					role="presentation"
 				/>
 				<img
-					src="img/trollroom-logo.svg"
+					src="/img/trollroom-logo.svg"
 					class="logo-inverted"
 					alt="Troll Room"
 					role="presentation"
@@ -29,11 +29,11 @@
 				>
 			</div>
 
-			<a href="#/livestream" class="channel-list-item" aria-label="Livestream" title="Livestream" data-name="Livestream" data-type="livestream">
+			<router-link to="/livestream" class="channel-list-item" aria-label="Livestream" title="Livestream" data-name="Livestream" data-type="livestream">
 				<div class="lobby-wrap">
 					<span title="Livestream" class="name">Livestream</span>
 				</div>
-			</a>
+			</router-link>
 
 			<NetworkList />
 		</div>

client/components/Windows/Information.vue

@@ -81,10 +81,7 @@
 				</p>
 
 				<p>
-					<a
-						href="#/help"
-						class="documentation-link"
-					>Controls</a>
+					<router-link to="/help" class="documentation-link">Controls</router-link>
 				</p>
 			</div>
 
@@ -94,7 +91,7 @@
 
 			<div class="about">
 				<p>
-					The No Agenda Stream and the Troll Room are provided by <a href="https://podcastindex.social/@voidzero">voidzero</a>.<br>
+					The No Agenda Stream and the Troll Room are provided by <a href="https://noagenda.ninja">voidzero</a>.<br>
 					The programming of the streams is managed by <a href="https://noauthority.social/@SirBemrose">Sir Bemrose</a>.<br>
 					noagenda.stream was created by <a href="https://www.codedmonkey.com">Coded Monkey</a>.
 				</p>
@@ -104,7 +101,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, ref} from "vue";
+import {defineComponent} from "vue";
 import {useStore} from "../../js/store";
 import Player from "../Player.vue";
 import SidebarToggle from "../SidebarToggle.vue";

client/components/Windows/Livestream.vue

@@ -7,7 +7,7 @@
 		<div class="container">
 			<div class="content-logo">
 				<img
-					src="img/trollroom-logo.svg"
+					src="/img/trollroom-logo.svg"
 					alt="Troll Room"
 					role="presentation"
 				/>
@@ -18,10 +18,7 @@
 			<p class="lead">Welcome to the stream that's all talk, no commercials. No Agenda.</p>
 
 			<p>
-				<a
-					href="#/information"
-					class="documentation-link"
-				>Learn more</a>
+				<router-link to="/information" class="documentation-link">Learn more</router-link>
 			</p>
 
 			<InlinePlayer />
@@ -49,14 +46,11 @@
 
 			<h2>Troll Room</h2>
 
-			<a v-if="store.state.networks.length === 0" href="#/connect" class="btn">Connect to the Troll Room</a>
-			<a v-else href="#/chan-2" class="btn">Return to the troll room</a>
+			<router-link v-if="store.state.networks.length === 0" to="/connect" class="btn">Connect to the Troll Room</router-link>
+			<router-link v-else to="/chan-2" class="btn">Return to the troll room</router-link>
 
 			<p>
-				<a
-					href="#/information"
-					class="documentation-link"
-				>Learn more</a>
+				<router-link to="/information" class="documentation-link">Learn more</router-link>
 			</p>
 		</div>
 	</div>

compose.yaml

@@ -3,6 +3,8 @@ services:
         container_name: trollroom
         image: ghcr.io/noagenda/trollroom:${APP_TAG:-local}
         build: .
+        environment:
+            NODE_ENV: development
         ports:
             - "9000:9000"
         volumes: