closes #160

+ minor cosmetic change

src/components/Library.vue

@@ -204,6 +204,9 @@ const setProxy = async () => {
     conn.on('error', err => {
       console.log(err);
     });
+  },
+  copyPeerId = () => {
+    if (sync.id[3] == '-') navigator.clipboard.writeText(sync.id);
   };
 
 const Login = async () => {
@@ -369,7 +372,11 @@ onMounted(async () => {
         </div>
 
         <div v-else-if="sync.type == 'rec'">
-          <pre>ID: {{ sync.id }}</pre>
+          <div class="id-wrap">
+            <span class="id-box">ID</span>
+            <pre>{{ sync.id }}</pre>
+            <i class="bi bi-clipboard id-copy clickable" @click="copyPeerId"></i>
+          </div>
         </div>
       </template>
 
@@ -472,7 +479,7 @@ onMounted(async () => {
         class="textbox"
         type="password"
         :placeholder="t('general.password')"
-        autocomplete="password"
+        autocomplete="current-password"
         @change="user.password = $event.target.value"
         required />
       <button @click="Login" class="textbox">{{ t('title.login') }}</button>
@@ -539,7 +546,8 @@ pre {
 }
 .tabs button[data-active='true'],
 .login button,
-button.logout {
+button.logout,
+.id-box {
   font-weight: bold;
   color: var(--color-background);
   background: linear-gradient(135deg, cornflowerblue, #88c0d0);
@@ -569,6 +577,23 @@ input[type='file']::file-selector-button {
 .tabs button:last-child {
   border-radius: 0 0.25rem 0.25rem 0;
 }
+.id-wrap {
+  background-color: var(--color-background);
+}
+.id-wrap, .id-box {
+  border-radius: .25rem;
+  padding: .25rem .75rem;
+}
+.id-wrap > * {
+  width: unset;
+  display: inline-block;
+}
+.id-copy {
+  float: right;
+  margin: 0;
+  padding: 0;
+  bottom: -0.125rem;
+}
 .login {
   display: block;
   margin: 1rem auto;

src/scripts/colors.js

@@ -1,9 +1,9 @@
 const c = [
-  'linear-gradient(45deg, #88c0d0, #5e81ac)',
-  'linear-gradient(45deg, #5e81ac, #b48ead)',
-  'linear-gradient(45deg, #a3be8c, #88c0d0)',
-  'linear-gradient(45deg, #ebcb8b, #a3be8c)',
-  'linear-gradient(45deg, #d08770, #bf616a)',
+  'linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09))',
+  //'linear-gradient(45deg, oklab(0.68 -0.02 -0.06), oklab(0.65 0.11 -0.05))',
+  //'linear-gradient(45deg, #a3be8c, #88c0d0)',
+  //'linear-gradient(45deg, #ebcb8b, #a3be8c)',
+  //'linear-gradient(45deg, oklab(0.82 0.09 0.07), oklab(0.58 0.14 0.04)',
 ];
 
 export function useRand() {

src/scripts/util.js

@@ -23,6 +23,10 @@ export function useVerifyAuth(hash) {
   return PL_EXP.test(hash);
 }
 
+export function useTitle(t) {
+  document.title = `${t} - Hyperpipe`;
+}
+
 export function useRoute(l) {
   history.pushState({}, '', l);
 }

src/stores/results.js

@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 import { useNav } from '@/stores/misc.js';
 
 import { getJsonPiped, getJsonHyp, getJsonAuth } from '@/scripts/fetch.js';
-import { useVerifyAuth, useRoute } from '@/scripts/util.js';
+import { useVerifyAuth, useRoute, useTitle } from '@/scripts/util.js';
 
 export const useResults = defineStore('results', () => {
   const items = ref({}),
@@ -62,6 +62,7 @@ export const useResults = defineStore('results', () => {
       title: json.name,
     });
 
+    useTitle(json.name);
     useRoute('/playlist?list=' + hash);
     useNav().state.page = 'home';
     document.body.scrollIntoView();
@@ -126,6 +127,7 @@ export const useArtist = defineStore('artist', () => {
     reset();
     set(json);
 
+    useTitle(json.title);
     useRoute('/channel/' + e);
     useNav().state.page = 'home';
     document.body.scrollIntoView();