fix artist header ambient

fix: remove item from page
introducing pages
2025-12-24 19:30:20 +00:00 · 2025-01-31 12:01:43 +03:00 · 2025-01-31 11:25:55 +03:00 · 2025-01-29 12:43:20 +03:00 · 2025-01-29 12:30:42 +03:00 · 2025-01-29 12:28:51 +03:00
42 changed files with 2354 additions and 729 deletions
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
    "pinia-plugin-persistedstate": "^3.2.0",
    "qr-code-styling": "^1.6.0-rc.1",
    "v-wave": "^1.5.0",
-    "vue": "^v3.2.45",
+    "vue": "^v3.5.13",
    "vue-boring-avatars": "^1.4.0",
    "vue-debounce": "^3.0.2",
    "vue-router": "^4.1.3",
@@ -45,6 +45,7 @@
    "typescript": "^5.0.4",
    "vite": "^3.0.4",
    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-node-polyfills": "^0.22.0",
    "vite-plugin-pwa": "^0.16.4",
    "vite-plugin-singlefile": "^0.13.5",
    "vite-svg-loader": "^4.0.0",
--- a/src/assets/icons/explicit.svg
+++ b/src/assets/icons/explicit.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.84421 21.8972H18.0295C20.5685 21.8972 21.8737 20.5919 21.8737 18.0914V3.82921C21.8737 1.32656 20.5685 0.0234375 18.0295 0.0234375H3.84421C1.31484 0.0234375 0 1.31695 0 3.82921V18.0914C0 20.6016 1.31484 21.8972 3.84421 21.8972Z" fill="#aeaeaf"/>
+<path d="M8.24921 16.3608C7.44976 16.3608 7.04688 15.8618 7.04688 15.0368V6.67026C7.04688 5.84948 7.45187 5.34839 8.24921 5.34839H13.795C14.3777 5.34839 14.7607 5.68026 14.7607 6.26643C14.7607 6.8376 14.3777 7.19619 13.795 7.19619H9.33695V9.92808H13.5377C14.0824 9.92808 14.4464 10.2356 14.4464 10.7923C14.4464 11.3222 14.0824 11.6255 13.5377 11.6255H9.33695V14.513H13.795C14.3777 14.513 14.7607 14.8545 14.7607 15.4406C14.7607 16.0118 14.3777 16.3608 13.795 16.3608H8.24921Z" fill="#111111"/>
+</svg>
--- a/src/assets/icons/lastfm.svg
+++ b/src/assets/icons/lastfm.svg
@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="currentColor" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M14.131 22.948l-1.172-3.193c0 0-1.912 2.131-4.771 2.131-2.537 0-4.333-2.203-4.333-5.729 0-4.511 2.276-6.125 4.515-6.125 3.224 0 4.245 2.089 5.125 4.772l1.161 3.667c1.161 3.561 3.365 6.421 9.713 6.421 4.548 0 7.631-1.391 7.631-5.068 0-2.968-1.697-4.511-4.844-5.244l-2.344-0.511c-1.624-0.371-2.104-1.032-2.104-2.131 0-1.249 0.985-1.984 2.604-1.984 1.767 0 2.704 0.661 2.865 2.24l3.661-0.444c-0.297-3.301-2.584-4.656-6.323-4.656-3.308 0-6.532 1.251-6.532 5.245 0 2.5 1.204 4.077 4.245 4.807l2.484 0.589c1.865 0.443 2.484 1.224 2.484 2.287 0 1.359-1.323 1.921-3.828 1.921-3.703 0-5.244-1.943-6.124-4.625l-1.204-3.667c-1.541-4.765-4.005-6.531-8.891-6.531-5.287-0.016-8.151 3.385-8.151 9.192 0 5.573 2.864 8.595 8.005 8.595 4.14 0 6.125-1.943 6.125-1.943z"/> </g>
+
+</svg>
--- a/src/assets/icons/pencil.svg
+++ b/src/assets/icons/pencil.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.42607 18.5857L16.593 5.42412L14.344 3.16546L1.1674 16.3366L0.0267015 19.0816C-0.10197 19.4303 0.258496 19.8049 0.592479 19.6708L3.42607 18.5857ZM17.715 4.32139L18.9829 3.07476C19.6122 2.44546 19.6378 1.7482 19.0703 1.16906L18.6128 0.709452C18.0454 0.139922 17.3439 0.200625 16.7125 0.808593L15.4467 2.06273L17.715 4.32139Z" fill="currentColor"/>
+</svg>
+
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -267,4 +267,9 @@ button {
 .badge.new {
  background-color: $blue;
  opacity: 1;
+}
+
+.explicit-icon {
+  width: 0.9rem;
+  margin-left: $smaller;
 }
--- a/src/components/ArtistView/Header.vue
+++ b/src/components/ArtistView/Header.vue
@@ -1,170 +1,177 @@
 <template>
-  <div
-    v-if="!on_sidebar"
-    class="artist-header-ambient rounded-lg"
-    :class="{ isSmallPhone }"
-    style="height: 100%; width: 100%"
-    :style="{
-      boxShadow: !useCircularImage ? (colors.bg.length ? `0 .5rem 2rem ${colors.bg}` : undefined) : undefined,
-    }"
-  ></div>
-  <div
-    ref="artistheader"
-    class="artist-page-header rounded-lg no-scroll"
-    :class="{ isSmallPhone, useCircularImage }"
-    :style="{
-      height: `${isSmallPhone ? '25rem' : containerHeight}`,
-    }"
-  >
-    <Info :artist="artist" :use-circular-image="useCircularImage" />
-    <div
-      class="artist-img no-select"
-      :style="{
-        height: containerHeight,
-      }"
-    >
-      <img id="artist-avatar" :src="paths.images.artist.large + artist.image" @load="store.setBgColor" />
+    <div class="headparent">
+        <div
+            v-if="!on_sidebar"
+            class="artist-header-ambient rounded-lg"
+            :class="{ isSmallPhone }"
+            :style="{
+                boxShadow: !useCircularImage ? (colors.bg.length ? `0 .5rem 2rem ${colors.bg}` : undefined) : undefined,
+            }"
+        ></div>
+        <div
+            ref="artistheader"
+            class="artist-page-header rounded-lg no-scroll"
+            :class="{ isSmallPhone, useCircularImage }"
+            :style="{
+                height: `${isSmallPhone ? '25rem' : containerHeight}`,
+            }"
+        >
+            <Info :artist="artist" :use-circular-image="useCircularImage" />
+            <div
+                class="artist-img no-select"
+                :style="{
+                    height: containerHeight,
+                }"
+            >
+                <img id="artist-avatar" :src="paths.images.artist.large + artist.image" @load="store.setBgColor" />
+            </div>
+            <div
+                v-if="!useCircularImage"
+                class="gradient"
+                :style="{
+                    backgroundImage: colors.bg
+                        ? `linear-gradient(${gradientDirection}, transparent ${
+                              isSmall ? 60 : gradientTransparentWidth - (width < 700 ? 40 : width < 900 ? 20 : 10)
+                          }%,
+        ${colors.bg} ${gradientWidth}%,
+        ${colors.bg} 100%)`
+                        : '',
+                }"
+            ></div>
+        </div>
    </div>
-    <div
-      v-if="!useCircularImage"
-      class="gradient"
-      :style="{
-        backgroundImage: colors.bg
-          ? `linear-gradient(${gradientDirection}, transparent ${
-              isSmall ? 60 : gradientTransparentWidth - (width < 700 ? 40 : width < 900 ? 20 : 10)
-            }%,
-      ${colors.bg} ${gradientWidth}%,
-      ${colors.bg} 100%)`
-          : '',
-      }"
-    ></div>
-  </div>
 </template>

 <script setup lang="ts">
-import useSettingsStore from "@/stores/settings";
-import { useElementSize } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-import { Ref, computed, onMounted, ref } from "vue";
-import { onBeforeRouteUpdate } from "vue-router";
+import useSettingsStore from '@/stores/settings'
+import { useElementSize } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { Ref, computed, onMounted, ref } from 'vue'
+import { onBeforeRouteUpdate } from 'vue-router'

-import { paths } from "@/config";
-import updatePageTitle from "@/utils/updatePageTitle";
+import { paths } from '@/config'
+import updatePageTitle from '@/utils/updatePageTitle'

-import { isSmall } from "@/stores/content-width";
-import useArtistStore from "@/stores/pages/artist";
-import Info from "./HeaderComponents/Info.vue";
+import { isSmall } from '@/stores/content-width'
+import useArtistStore from '@/stores/pages/artist'
+import Info from './HeaderComponents/Info.vue'

-const image_width_px = 450;
-const store = useArtistStore();
-const settings = useSettingsStore();
+const image_width_px = 450
+const store = useArtistStore()
+const settings = useSettingsStore()

 const props = defineProps<{
-  on_sidebar?: boolean;
-}>();
+    on_sidebar?: boolean
+}>()

-const { info: artist, colors } = storeToRefs(store);
+const { info: artist, colors } = storeToRefs(store)

 function updateTitle() {
-  props.on_sidebar ? () => {} : updatePageTitle(artist.value.name);
+    props.on_sidebar ? () => {} : updatePageTitle(artist.value.name)
 }

-onMounted(() => updateTitle());
-onBeforeRouteUpdate(() => updateTitle());
+onMounted(() => updateTitle())
+onBeforeRouteUpdate(() => updateTitle())

-const artistheader: Ref<HTMLElement | null> = ref(null);
-const { width } = useElementSize(artistheader);
+const artistheader: Ref<HTMLElement | null> = ref(null)
+const { width } = useElementSize(artistheader)

-const gradientTransparentWidth = computed(() => Math.floor((image_width_px / (width.value || 1)) * 100));
+const gradientTransparentWidth = computed(() => Math.floor((image_width_px / (width.value || 1)) * 100))

-const isSmallPhone = computed(() => width.value <= 660);
-const useCircularImage = computed(() => !isSmallPhone.value && settings.useCircularArtistImg);
+const isSmallPhone = computed(() => width.value <= 660)
+const useCircularImage = computed(() => !isSmallPhone.value && settings.useCircularArtistImg)

-const gradientDirection = computed(() => (isSmallPhone.value ? "210deg" : "to left"));
+const gradientDirection = computed(() => (isSmallPhone.value ? '210deg' : 'to left'))

 const gradientWidth = computed(() => {
-  return isSmallPhone.value ? "80" : Math.min(gradientTransparentWidth.value, 50);
-});
+    return isSmallPhone.value ? '80' : Math.min(gradientTransparentWidth.value, 50)
+})

 const containerHeight = computed(() => {
-  return useCircularImage.value ? "13rem" : "18rem";
-});
+    return useCircularImage.value ? '13rem' : '18rem'
+})
 </script>

 <style lang="scss">
+.headparent {
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
 .artist-header-ambient {
-  height: 17rem;
-  position: absolute;
-  opacity: 0.25;
-  margin-right: -1rem;
+    height: 18rem;
+    width: 100%;
+    position: absolute;
+    opacity: 0.25;
 }

 .artist-page-header {
-  display: grid;
-  grid-template-columns: 1fr 450px;
-  position: relative;
-
-  .artist-img {
-    display: flex;
-    align-items: flex-end;
-    order: 1;
-
-    img {
-      height: 100%;
-      width: 100%;
-      aspect-ratio: 1;
-      object-fit: cover;
-      object-position: 0% 20%;
-    }
-  }
-
-  &.useCircularImage {
-    grid-template-columns: min-content 1fr;
-
-    .artist-img {
-      padding: 1rem;
-      order: -1;
-      z-index: 10;
-
-      img {
-        border-radius: 50%;
-        height: calc(100% - 0rem);
-        width: unset;
-        aspect-ratio: 1;
-      }
-    }
-  }
-
-  .gradient {
-    position: absolute;
-    background-image: linear-gradient(to left, transparent 10%, $gray 50%, $gray 100%);
-    height: 100%;
-    width: 100%;
-
-    &.isSmallPhone {
-      background-image: linear-gradient(210deg, transparent 20%, $gray 80%, $gray 100%);
-    }
-  }
-
-  &.isSmallPhone {
-    display: flex;
-    flex-direction: column-reverse;
+    display: grid;
+    grid-template-columns: 1fr 450px;
    position: relative;

    .artist-img {
-      position: absolute;
-      width: 100%;
-      top: 0;
-      height: 100% !important;
+        display: flex;
+        align-items: flex-end;
+        order: 1;

-      img {
+        img {
+            height: 100%;
+            width: 100%;
+            aspect-ratio: 1;
+            object-fit: cover;
+            object-position: 0% 20%;
+        }
+    }
+
+    &.useCircularImage {
+        grid-template-columns: min-content 1fr;
+
+        .artist-img {
+            padding: 1rem;
+            order: -1;
+            z-index: 10;
+
+            img {
+                border-radius: 50%;
+                height: calc(100% - 0rem);
+                width: unset;
+                aspect-ratio: 1;
+            }
+        }
+    }
+
+    .gradient {
+        position: absolute;
+        background-image: linear-gradient(to left, transparent 10%, $gray 50%, $gray 100%);
        height: 100%;
        width: 100%;
-        aspect-ratio: 1;
-        object-fit: cover;
-        object-position: 0% 20%;
-      }
+
+        &.isSmallPhone {
+            background-image: linear-gradient(210deg, transparent 20%, $gray 80%, $gray 100%);
+        }
+    }
+
+    &.isSmallPhone {
+        display: flex;
+        flex-direction: column-reverse;
+        position: relative;
+
+        .artist-img {
+            position: absolute;
+            width: 100%;
+            top: 0;
+            height: 100% !important;
+
+            img {
+                height: 100%;
+                width: 100%;
+                aspect-ratio: 1;
+                object-fit: cover;
+                object-position: 0% 20%;
+            }
+        }
    }
-  }
 }
 </style>
--- a/src/components/BottomBar/Left.vue
+++ b/src/components/BottomBar/Left.vue
@@ -32,6 +32,7 @@
                <span class="ellip">
                    {{ queue.currenttrack?.title || 'Hello there' }}
                </span>
+                <ExplicitIcon class="explicit-icon" v-if="queue.currenttrack?.explicit" />
                <MasterFlag :bitrate="queue.currenttrack?.bitrate || 0" />
            </div>
            <ArtistName
@@ -61,6 +62,7 @@ import HotKeys from '../LeftSidebar/NP/HotKeys.vue'
 import HeartSvg from '../shared/HeartSvg.vue'
 import MasterFlag from '../shared/MasterFlag.vue'
 import Actions from './Right.vue'
+import ExplicitIcon from '@/assets/icons/explicit.svg'

 const queue = useQStore()
 const settings = useSettingsStore()
--- a/src/components/SettingsView/Components/SecretInput.vue
+++ b/src/components/SettingsView/Components/SecretInput.vue
@@ -0,0 +1,80 @@
+<template>
+    <form class="secretinput" @submit.prevent="$emit('submit', input)">
+        <div class="left rounded-sm no-scroll">
+            <input :type="showText ? 'text' : 'password'" v-model="input" @input="() => (showTextManual = true)" />
+            <button @click.prevent="showTextManual = !showTextManual">
+                <EyeSvg v-if="showText" />
+                <EyeSlashSvg v-else />
+            </button>
+        </div>
+        <div class="right">
+            <button>Save</button>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import EyeSvg from '@/assets/icons/eye.svg'
+import EyeSlashSvg from '@/assets/icons/eye.slash.svg'
+
+const props = defineProps<{
+    text: string
+}>()
+
+const input = ref('')
+const showTextManual = ref(false)
+const showText = computed(() => {
+    if (showTextManual.value) return true
+
+    return input.value.length == 0
+})
+
+defineEmits<{
+    (e: 'submit', value: string): void
+}>()
+
+onMounted(() => {
+    if (props.text) {
+        input.value = props.text
+    }
+})
+</script>
+
+<style lang="scss">
+.secretinput {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    gap: 1rem;
+    width: 100%;
+
+    .left {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        position: relative;
+        background-color: $gray5;
+
+        input {
+            height: 100%;
+            width: 100%;
+            border: none;
+            outline: none;
+            background: none;
+            padding: $small;
+            font-size: 12px;
+            font-family: 'SF Mono';
+            color: #ffffff00;
+        }
+
+        svg {
+            height: 1rem;
+        }
+
+        button {
+            background: none;
+        }
+    }
+}
+</style>
--- a/src/components/SettingsView/Group.vue
+++ b/src/components/SettingsView/Group.vue
@@ -84,6 +84,11 @@
                    component_key="streaming_quality"
                />
                <BackupRestore v-if="setting.type === SettingType.backup" />
+                <SecretInput
+                    v-if="setting.type === SettingType.secretinput"
+                    :text="setting.state ? setting.state() : ''"
+                    @submit="setting.action"
+                />
            </div>
        </div>
    </div>
@@ -107,6 +112,7 @@ import Pairing from '../modals/settings/custom/Pairing.vue'
 import DropDown from '../shared/DropDown.vue'
 import About from './About.vue'
 import BackupRestore from './Components/BackupRestore.vue'
+import SecretInput from './Components/SecretInput.vue'

 defineProps<{
    group: SettingGroup
--- a/src/components/Stats/Stats.vue
+++ b/src/components/Stats/Stats.vue
@@ -57,6 +57,10 @@ onMounted(async () => {
        date.value = res.data.dates
    }
 })
+
+defineOptions({
+    inheritAttrs: false,
+})
 </script>

 <style lang="scss">
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -22,6 +22,12 @@
                @hideModal="hideModal"
                @setTitle="setTitle"
            />
+            <CrudPage
+                v-if="modal.component == modal.options.page"
+                @hideModal="hideModal"
+                @setTitle="setTitle"
+                v-bind="modal.props"
+            />
            <UpdatePlaylist
                v-if="modal.component == modal.options.updatePlaylist"
                v-bind="modal.props"
@@ -49,6 +55,7 @@ import { useRouter } from 'vue-router'

 import AuthLogin from './modals/AuthLogin.vue'
 import ConfirmModal from './modals/ConfirmModal.vue'
+import CrudPage from './modals/CrudPage.vue'
 import NewPlaylist from './modals/NewPlaylist.vue'
 import RootDirsPrompt from './modals/RootDirsPrompt.vue'
 import SetRootDirs from './modals/SetRootDirs.vue'
--- a/src/components/modals/CrudPage.vue
+++ b/src/components/modals/CrudPage.vue
@@ -0,0 +1,81 @@
+<template>
+    <form action="" v-if="delete">
+        <div>Are you sure you want to delete this page?</div>
+        <br />
+        <button @click.prevent="submit" class="critical">Yes, Delete</button>
+    </form>
+    <form class="playlist-modal" @submit.prevent="submit" v-else>
+        <label for="name">Page name</label>
+        <br />
+        <input type="search" class="rounded-sm" id="name" :value="page?.name" />
+        <br />
+        <label for="description">Description</label>
+        <br />
+        <input type="search" class="rounded-sm" id="description" :value="page?.extra.description" />
+        <br /><br />
+        <button type="submit">{{ page ? 'Update' : 'Create' }}</button>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { Page } from '@/interfaces'
+import { createNewPage, deletePage, updatePage } from '@/requests/pages'
+import { router } from '@/router';
+import { NotifType, Notification } from '@/stores/notification'
+
+const props = defineProps<{
+    page?: Page
+    hash?: string
+    type?: string
+    extra?: any
+    delete?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'hideModal'): void
+    (e: 'setTitle', title: string): void
+}>()
+
+emit('setTitle', props.page ? (props.delete ? 'Delete Page' : 'Update Page') : 'New Page')
+
+async function submit(e: Event) {
+    if (props.delete && props.page) {
+        const deleted = await deletePage(props.page.id)
+        if (deleted) {
+            new Notification('Page deleted', NotifType.Success)
+            emit('hideModal')
+            router.push('/')
+        }
+        return
+    }
+
+    e.preventDefault()
+    const name = (e.target as any).elements['name'].value
+    const description = (e.target as any).elements['description'].value
+
+    // If the page is null, we are creating a new page
+    if (props.page == null) {
+        const created = await createNewPage(name, description, [
+            {
+                hash: props.hash as string,
+                type: props.type as string,
+                extra: props.extra,
+            },
+        ])
+
+        if (created) {
+            new Notification('New page created', NotifType.Success)
+            emit('hideModal')
+        }
+    } else {
+        const updatedPage = await updatePage(props.page, name, description)
+
+        if (updatedPage) {
+            props.page.name = updatedPage.name
+            props.page.extra.description = updatedPage.extra.description
+            new Notification('Page updated', NotifType.Success)
+            emit('hideModal')
+        }
+    }
+}
+</script>
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -5,6 +5,8 @@
            params: { albumhash: album.albumhash },
        }"
        class="album-card"
+        @contextmenu.prevent="showMenu"
+        :class="{ 'context-menu-open': contextMenuFlag }"
    >
        <div class="with-img rounded-sm no-scroll">
            <div
@@ -56,7 +58,7 @@

 <script setup lang="ts">
 import { Routes } from '@/router'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'

 import { Album } from '../../interfaces'
@@ -66,9 +68,11 @@ import { playSources } from '@/enums'
 import useAlbumStore from '@/stores/pages/album'
 import { paths } from '../../config'
 import MasterFlag from './MasterFlag.vue'
+import { showAlbumContextMenu } from '@/helpers/contextMenuHandler'

-const imguri = paths.images.thumb.medium
 const route = useRoute()
+const contextMenuFlag = ref(false)
+const imguri = paths.images.thumb.medium

 const props = defineProps<{
    album: Album
@@ -94,6 +98,10 @@ const artists = computed(() => {

    return albumartists
 })
+
+function showMenu(e: MouseEvent) {
+    showAlbumContextMenu(e, contextMenuFlag, props.album)
+}
 </script>

 <style lang="scss">
@@ -105,6 +113,10 @@ const artists = computed(() => {
    height: max-content;
    transition: background-color 0.2s ease-out;

+    &.context-menu-open {
+        background-color: $gray5;
+    }
+
    .with-img {
        position: relative;

@@ -130,10 +142,6 @@ const artists = computed(() => {
                opacity: 1;
            }

-            img {
-                /* border-radius: 0 0 $medium $medium; Not sure why this one was added, fugly with animation */
-            }
-
            .gradient {
                opacity: 1;
            }
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -7,6 +7,8 @@
            },
        }"
        class="artist-card"
+        @contextmenu.prevent="showContextMenu"
+        :class="{ 'context-menu-open': contextMenuFlag }"
    >
        <div class="image circular">
            <img class="artist-image circular" :src="imguri + artist.image" />
@@ -38,12 +40,19 @@ import { Routes } from '@/router'

 import { playSources } from '@/enums'
 import PlayBtn from './PlayBtn.vue'
+import { ref } from 'vue'
+import { showArtistContextMenu } from '@/helpers/contextMenuHandler'

 const imguri = paths.images.artist.medium
+const contextMenuFlag = ref(false)

-defineProps<{
+const props = defineProps<{
    artist: Artist
 }>()
+
+const showContextMenu = (e: MouseEvent) => {
+    showArtistContextMenu(e, contextMenuFlag, props.artist.artisthash, props.artist.name)
+}
 </script>

 <style lang="scss">
@@ -59,6 +68,10 @@ defineProps<{
    height: max-content;
    transition: background-color 0.2s ease-out;

+    &.context-menu-open {
+        background-color: $gray5;
+    }
+
    .image {
        position: relative;

--- a/src/components/shared/CardRow.vue
+++ b/src/components/shared/CardRow.vue
@@ -1,36 +1,66 @@
 <template>
-  <div v-if="type == 'album'" class="cardlistrow">
-    <AlbumCard v-for="item in items" :key="item.albumhash" class="hlistitem" :album="(item as Album)" />
-  </div>
-  <div v-else-if="type == 'artist'" class="cardlistrow">
-    <ArtistCard v-for="item in items" :key="item.artisthash" class="hlistitem" :artist="(item as Artist)" />
-  </div>
-  <div v-else-if="type == 'mix'" class="cardlistrow">
-    <MixCard v-for="item in items" :key="item.sourcehash" class="hlistitem" :mix="(item as Mix)" />
-  </div>
+    <div class="cardlistrow">
+        <component v-for="item in items" :key="item.key" :is="item.component" v-bind="item.props" />
+    </div>
 </template>

 <script setup lang="ts">
-import { Album, Artist, Mix } from "@/interfaces";
-import AlbumCard from "./AlbumCard.vue";
-import ArtistCard from "./ArtistCard.vue";
-import MixCard from "../Mixes/MixCard.vue";
+import { Album, Artist, Mix } from '@/interfaces'
+import AlbumCard from './AlbumCard.vue'
+import ArtistCard from './ArtistCard.vue'
+import MixCard from '../Mixes/MixCard.vue'
+import { computed } from 'vue'

-defineProps<{
-  type: string | "album" | "artist" | "mix";
-  items: Album[] | Artist[] | Mix[];
-}>();
+const props = defineProps<{
+    items: Album[] | Artist[] | Mix[]
+}>()
+
+const items = computed(() => {
+    return props.items.map((item: any) => {
+        const i = {
+            component: <any>null,
+            props: {},
+            key: '',
+        }
+
+        switch (item['type']) {
+            case 'album':
+                i.component = AlbumCard
+                i.key = item.albumhash
+                i.props = {
+                    album: item,
+                }
+                break
+            case 'artist':
+                i.component = ArtistCard
+                i.key = item.artisthash
+                i.props = {
+                    artist: item,
+                }
+                break
+            case 'mix':
+                i.component = MixCard
+                i.key = item.sourcehash
+                i.props = {
+                    mix: item,
+                }
+                break
+        }
+
+        return i
+    })
+})
 </script>

 <style lang="scss">
 .cardlistrow {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax($cardwidth, 1fr));
-  padding-bottom: 2rem;
-  z-index: -1;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax($cardwidth, 1fr));
+    padding-bottom: 2rem;
+    z-index: -1;

-  @include mediumPhones {
-    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-  }
+    @include mediumPhones {
+        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    }
 }
 </style>
--- a/src/components/shared/CardScroller.vue
+++ b/src/components/shared/CardScroller.vue
@@ -2,11 +2,17 @@
    <div class="cardscroller">
        <div class="rinfo">
            <div class="rtitle">
-                <b>{{ title }}</b>
+                <b>
+                    <RouterLink :to="route || ''">
+                        {{ title }}
+                    </RouterLink>
+                </b>
                <SeeAll v-if="route && itemlist.length >= maxAbumCards" :route="route" :text="seeAllText" />
            </div>
            <div v-if="description" class="rdesc">
-                {{ description }}
+                <RouterLink :to="route || ''">
+                    {{ description }}
+                </RouterLink>
            </div>
        </div>
        <div class="recentitems">
--- a/src/components/shared/GenericHeader.vue
+++ b/src/components/shared/GenericHeader.vue
@@ -30,6 +30,12 @@
        grid-template-columns: 1fr max-content;
    }

+    .right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
    .after {
        margin-top: 2rem;
        margin-left: -$medium;
--- a/src/components/shared/MasterFlag.vue
+++ b/src/components/shared/MasterFlag.vue
@@ -28,7 +28,7 @@ defineProps<{
  font-weight: 600;
  margin-left: $smaller;
  padding: 2px 5px;
-  border-radius: 5px;
+  border-radius: 4px;
  opacity: 0.75;
  text-transform: uppercase;
 }
--- a/src/components/shared/SongItem/TrackTitle.vue
+++ b/src/components/shared/SongItem/TrackTitle.vue
@@ -25,6 +25,7 @@
        <span class="title ellip">
          {{ track.title }}
        </span>
+        <ExplicitIcon  class="explicit-icon" v-if="track.explicit" />
        <MasterFlag :bitrate="track.bitrate" />
      </div>
      <div class="isSmallArtists">
@@ -40,6 +41,7 @@ const imguri = paths.images.thumb.small;

 import ArtistName from "../ArtistName.vue";
 import MasterFlag from "../MasterFlag.vue";
+import ExplicitIcon from "@/assets/icons/explicit.svg";

 import { paths } from "@/config";

@@ -59,6 +61,10 @@ defineEmits<{
  position: relative;
  align-items: center;

+  .explicit-icon {
+    margin-left: $small;
+  }
+
  .thumbnail {
    margin-right: $medium;
    display: flex;
--- a/src/config.ts
+++ b/src/config.ts
@@ -85,6 +85,9 @@ export const paths = {
                return this.base + '/artists'
            },
        },
+        pages: {
+            base: base_url + '/pages',
+        },
        search: {
            base: base_url + '/search',
            get top() {
@@ -144,7 +147,7 @@ export const paths = {
        },
        files: base_url + '/file',
        home: {
-            base: base_url + '/home',
+            base: base_url + '/nothome',
            get recentlyAdded() {
                return this.base + '/recents/added'
            },
--- a/src/context_menus/album.ts
+++ b/src/context_menus/album.ts
@@ -1,56 +1,109 @@
-import useModal from "@/stores/modal";
-import useAlbum from "@/stores/pages/album";
-import useTracklist from "@/stores/queue/tracklist";
+import { router, Routes } from '@/router'

-import { Option, Playlist } from "@/interfaces";
-import { addAlbumToPlaylist } from "@/requests/playlists";
-import { getAddToPlaylistOptions, get_find_on_social } from "./utils";
-import { AddToQueueIcon, PlayNextIcon, PlaylistIcon, PlusIcon } from "@/icons";
+import useAlbum from '@/stores/pages/album'
+import useTracklist from '@/stores/queue/tracklist'
+import usePage from '@/stores/pages/page'

-export default async () => {
-  const album = useAlbum();
+import { getAlbumTracks } from '@/requests/album'
+import { addAlbumToPlaylist } from '@/requests/playlists'
+import { addOrRemoveItemFromPage } from '@/requests/pages'

-  const play_next = <Option>{
-    label: "Play next",
-    action: () => {
-      const tracks = album.tracks.filter(
-        (track) => !track.is_album_disc_number
-      );
-      useTracklist().insertAfterCurrent(tracks);
-    },
-    icon: PlayNextIcon,
-  };
+import { Album, Option, Page, Playlist, Track } from '@/interfaces'
+import { AddToQueueIcon, DeleteIcon, PlayNextIcon, PlusIcon } from '@/icons'
+import { getAddToPageOptions, getAddToPlaylistOptions, get_find_on_social } from './utils'

-  const add_to_queue = <Option>{
-    label: "Add to queue",
-    action: () => {
-      const tracks = album.tracks.filter(
-        (track) => !track.is_album_disc_number
-      );
-      useTracklist().addTracks(tracks);
-    },
-    icon: AddToQueueIcon,
-  };
+export default async (album?: Album) => {
+    const albumStore = useAlbum()

-  // Action for each playlist option
-  const AddToPlaylistAction = (playlist: Playlist) => {
-    const store = album;
-    addAlbumToPlaylist(playlist, store.info.albumhash);
-  };
+    if (!album) {
+        album = albumStore.info
+    }

-  const add_to_playlist: Option = {
-    label: "Add to Playlist",
-    children: () => getAddToPlaylistOptions(AddToPlaylistAction, {
-      albumhash: album.info.albumhash,
-      playlist_name: album.info.title,
-    }),
-    icon: PlusIcon,
-  };
+    const play_next = <Option>{
+        label: 'Play next',
+        action: async () => {
+            let tracks: Track[] = []

-  return [
-    play_next,
-    add_to_queue,
-    add_to_playlist,
-    get_find_on_social(),
-  ];
-};
+            if (album) {
+                tracks = await getAlbumTracks(album.albumhash)
+            } else {
+                tracks = albumStore.tracks.filter(track => !track.is_album_disc_number)
+            }
+
+            useTracklist().insertAfterCurrent(tracks)
+        },
+        icon: PlayNextIcon,
+    }
+
+    const add_to_queue = <Option>{
+        label: 'Add to queue',
+        action: async () => {
+            let tracks: Track[] = []
+
+            if (album) {
+                tracks = await getAlbumTracks(album.albumhash)
+            } else {
+                tracks = albumStore.tracks.filter(track => !track.is_album_disc_number)
+            }
+
+            useTracklist().addTracks(tracks)
+        },
+        icon: AddToQueueIcon,
+    }
+
+    // Action for each playlist option
+    const AddToPlaylistAction = (playlist: Playlist) => {
+        addAlbumToPlaylist(playlist, album.albumhash)
+    }
+
+    const add_to_playlist: Option = {
+        label: 'Add to Playlist',
+        children: () =>
+            getAddToPlaylistOptions(AddToPlaylistAction, {
+                albumhash: album.albumhash,
+                playlist_name: album.title,
+            }),
+        icon: PlusIcon,
+    }
+
+    const addToPageAction = (page: Page) => {
+        addOrRemoveItemFromPage(page.id, album, 'album', 'add')
+    }
+
+    const add_to_page: Option = {
+        label: 'Add to Page',
+        children: () =>
+            getAddToPageOptions(addToPageAction, {
+                page: null,
+                hash: album.albumhash,
+                type: 'album',
+                extra: {},
+            }),
+        icon: PlusIcon,
+    }
+
+    const remove_from_page: Option = {
+        label: 'Remove from Page',
+        action: async () => {
+            const success = await addOrRemoveItemFromPage(
+                parseInt(router.currentRoute.value.params.page as string),
+                album,
+                'album',
+                'remove'
+            )
+
+            if (success) {
+                usePage().removeLocalItem(album, 'album')
+            }
+        },
+        icon: DeleteIcon,
+    }
+
+    return [
+        play_next,
+        add_to_queue,
+        add_to_playlist,
+        ...[router.currentRoute.value.name === Routes.Page ? remove_from_page : add_to_page],
+        get_find_on_social('album', '', album),
+    ]
+}
--- a/src/context_menus/artist.ts
+++ b/src/context_menus/artist.ts
@@ -1,54 +1,102 @@
-import modal from "@/stores/modal";
-import useTracklist from "@/stores/queue/tracklist";
+import { Routes } from '@/router'
+import { router } from '@/router'

-import { getArtistTracks } from "@/requests/artists";
-import { addArtistToPlaylist } from "@/requests/playlists";
+import usePage from '@/stores/pages/page'
+import useTracklist from '@/stores/queue/tracklist'

-import { Option, Playlist } from "@/interfaces";
-import { getAddToPlaylistOptions, get_find_on_social } from "./utils";
-import { AddToQueueIcon, PlayNextIcon, PlaylistIcon, PlusIcon } from "@/icons";
+import { getArtistTracks } from '@/requests/artists'
+import { addArtistToPlaylist } from '@/requests/playlists'
+import { addOrRemoveItemFromPage } from '@/requests/pages'
+
+import { Artist, Option, Page, Playlist } from '@/interfaces'
+import { AddToQueueIcon, DeleteIcon, PlayNextIcon, PlusIcon } from '@/icons'
+import { getAddToPageOptions, getAddToPlaylistOptions, get_find_on_social } from './utils'

 export default async (artisthash: string, artistname: string) => {
-  const play_next = <Option>{
-    label: "Play next",
-    action: () => {
-      getArtistTracks(artisthash).then((tracks) => {
-        const store = useTracklist();
-        store.insertAfterCurrent(tracks);
-      });
-    },
-    icon: PlayNextIcon,
-  };
+    const play_next = <Option>{
+        label: 'Play next',
+        action: () => {
+            getArtistTracks(artisthash).then(tracks => {
+                const store = useTracklist()
+                store.insertAfterCurrent(tracks)
+            })
+        },
+        icon: PlayNextIcon,
+    }

-  const add_to_queue = <Option>{
-    label: "Add to queue",
-    action: () => {
-      getArtistTracks(artisthash).then((tracks) => {
-        const store = useTracklist();
-        store.addTracks(tracks);
-      });
-    },
-    icon: AddToQueueIcon,
-  };
+    const add_to_queue = <Option>{
+        label: 'Add to queue',
+        action: () => {
+            getArtistTracks(artisthash).then(tracks => {
+                const store = useTracklist()
+                store.addTracks(tracks)
+            })
+        },
+        icon: AddToQueueIcon,
+    }

-  // Action for each playlist option
-  const AddToPlaylistAction = (playlist: Playlist) => {
-    addArtistToPlaylist(playlist, artisthash);
-  };
+    // Action for each playlist option
+    const AddToPlaylistAction = (playlist: Playlist) => {
+        addArtistToPlaylist(playlist, artisthash)
+    }

-  const add_to_playlist: Option = {
-    label: "Add to Playlist",
-    children: () => getAddToPlaylistOptions(AddToPlaylistAction, {
-      artisthash,
-      playlist_name: `This is ${artistname}`,
-    }),
-    icon: PlusIcon,
-  };
+    const add_to_playlist: Option = {
+        label: 'Add to Playlist',
+        children: () =>
+            getAddToPlaylistOptions(AddToPlaylistAction, {
+                artisthash,
+                playlist_name: `This is ${artistname}`,
+            }),
+        icon: PlusIcon,
+    }

-  return [
-    play_next,
-    add_to_queue,
-    add_to_playlist,
-    get_find_on_social("artist"),
-  ];
-};
+    const addToPageAction = (page: Page) => {
+        addOrRemoveItemFromPage(
+            page.id,
+            {
+                artisthash,
+            } as Artist,
+            'artist',
+            'add'
+        )
+    }
+
+    const add_to_page: Option = {
+        label: 'Add to Page',
+        children: () =>
+            getAddToPageOptions(addToPageAction, {
+                page: null,
+                hash: artisthash,
+                type: 'artist',
+                extra: {},
+            }),
+        icon: PlusIcon,
+    }
+
+    const remove_from_page: Option = {
+        label: 'Remove from Page',
+        action: async () => {
+            const success = await addOrRemoveItemFromPage(
+                parseInt(router.currentRoute.value.params.page as string),
+                {
+                    artisthash,
+                } as Artist,
+                'artist',
+                'remove'
+            )
+
+            if (success) {
+                usePage().removeLocalItem({ artisthash } as Artist, 'artist')
+            }
+        },
+        icon: DeleteIcon,
+    }
+
+    return [
+        play_next,
+        add_to_queue,
+        add_to_playlist,
+        ...[router.currentRoute.value.name === Routes.Page ? remove_from_page : add_to_page],
+        get_find_on_social('artist'),
+    ]
+}
--- a/src/context_menus/hashing.ts
+++ b/src/context_menus/hashing.ts
@@ -0,0 +1,22 @@
+import crypto from 'crypto';
+
+
+export function getLastFmApiSig(data: {[key: string]: any}, secret: string): string {
+    // Sort keys alphabetically
+    const sortedKeys = Object.keys(data).sort();
+    
+    // Concatenate parameters in name+value format
+    const concatenatedString = sortedKeys.reduce((acc, key) => {
+        // Ensure values are properly encoded
+        const value = encodeURIComponent(data[key].toString());
+        return acc + key + value;
+    }, '');
+
+    // Append secret
+    const stringToHash = concatenatedString + secret;
+    
+    // Generate MD5 hash
+    return crypto.createHash('md5')
+        .update(stringToHash)
+        .digest('hex');
+}
--- a/src/context_menus/utils.ts
+++ b/src/context_menus/utils.ts
@@ -3,16 +3,15 @@ import useAlbum from '@/stores/pages/album'
 import useArtist from '@/stores/pages/artist'

 import { SearchIcon } from '@/icons'
-import { Option, Playlist } from '@/interfaces'
+import { Album, Option, Page, Playlist } from '@/interfaces'
+import { getAllPages } from '@/requests/pages'
 import { getAllPlaylists } from '@/requests/playlists'

 export const separator: Option = {
    type: 'separator',
 }

-export function get_new_playlist_option(
-    new_playlist_modal_props: any = {}
-): Option {
+export function get_new_playlist_option(new_playlist_modal_props: any = {}): Option {
    return {
        label: 'New playlist',
        action: () => {
@@ -21,6 +20,15 @@ export function get_new_playlist_option(
    }
 }

+export function get_new_page_option(new_playlist_modal_props: any = {}): Option {
+    return {
+        label: 'New page',
+        action: () => {
+            modal().showPageModal(new_playlist_modal_props)
+        },
+    }
+}
+
 type action = (playlist: Playlist) => void

 /**
@@ -29,10 +37,7 @@ type action = (playlist: Playlist) => void
 * @param new_playlist_modal_props Props to be passed to the modal when creating a new playlist
 * @returns A list of options to be used in a context menu
 */
-export async function getAddToPlaylistOptions(
-    addToPlaylist: action,
-    new_playlist_modal_props: any = {}
-) {
+export async function getAddToPlaylistOptions(addToPlaylist: action, new_playlist_modal_props: any = {}) {
    const new_playlist = get_new_playlist_option(new_playlist_modal_props)
    const p = await getAllPlaylists(true)

@@ -44,7 +49,7 @@ export async function getAddToPlaylistOptions(

    let playlists = <Option[]>[]

-    playlists = p.map((playlist) => {
+    playlists = p.map(playlist => {
        return <Option>{
            label: playlist.name,
            action: () => {
@@ -56,20 +61,42 @@ export async function getAddToPlaylistOptions(
    return [...items, separator, ...playlists]
 }

-export const get_find_on_social = (page = 'album', query = '') => {
+/**
+ *
+ * @param addToPlaylist Function to be called when a playlist is selected
+ * @param new_playlist_modal_props Props to be passed to the modal when creating a new playlist
+ * @returns A list of options to be used in a context menu
+ */
+export async function getAddToPageOptions(addToPage: (page: Page) => void, new_page_modal_props: any = {}) {
+    const new_page = get_new_page_option(new_page_modal_props)
+    const p = await getAllPages()
+
+    let items = [new_page]
+
+    if (p.length === 0) {
+        return items
+    }
+
+    let pages = <Option[]>[]
+
+    pages = p.map(playlist => {
+        return <Option>{
+            label: playlist.name,
+            action: () => {
+                addToPage(playlist)
+            },
+        }
+    })
+
+    return [...items, separator, ...pages]
+}
+
+export const get_find_on_social = (page = 'album', query = '', album?: Album) => {
    const is_album = page === 'album'
    const getAlbumSearchTerm = () => {
-        const store = useAlbum()
-
-        return `${store.info.title} - ${store.info.albumartists
-            .map((a) => a.name)
-            .join(', ')}`
+        return `${album?.title} - ${album?.albumartists.map(a => a.name).join(', ')}`
    }
-    const search_term = query
-        ? query
-        : is_album
-        ? getAlbumSearchTerm()
-        : useArtist().info.name
+    const search_term = query ? query : is_album ? getAlbumSearchTerm() : useArtist().info.name

    return <Option>{
        label: 'Search on',
@@ -77,67 +104,36 @@ export const get_find_on_social = (page = 'album', query = '') => {
        children: async () => [
            {
                label: 'Google',
-                action: () =>
-                    window.open(
-                        `https://www.google.com/search?q=${search_term}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://www.google.com/search?q=${search_term}`, '_blank'),
            },
            {
                label: 'YouTube',
-                action: () =>
-                    window.open(
-                        `https://www.youtube.com/results?search_query=${search_term}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://www.youtube.com/results?search_query=${search_term}`, '_blank'),
            },
            {
                label: 'Spotify',
-                action: () =>
-                    window.open(
-                        `https://open.spotify.com/search/${search_term}/${page}s`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://open.spotify.com/search/${search_term}/${page}s`, '_blank'),
            },
            {
                label: 'Tidal',
-                action: () =>
-                    window.open(
-                        `https://listen.tidal.com/search/${page}s?q=${search_term}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://listen.tidal.com/search/${page}s?q=${search_term}`, '_blank'),
            },
            {
                label: 'Apple Music',
-                action: () =>
-                    window.open(
-                        `https://music.apple.com/search?term=${search_term}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://music.apple.com/search?term=${search_term}`, '_blank'),
            },
            {
                label: 'Deezer',
-                action: () =>
-                    window.open(
-                        `https://www.deezer.com/search/${search_term}/${page}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://www.deezer.com/search/${search_term}/${page}`, '_blank'),
            },
            {
                label: 'Wikipedia',
                action: () =>
-                    window.open(
-                        `https://en.wikipedia.org/wiki/Special:Search?search=${search_term}`,
-                        '_blank'
-                    ),
+                    window.open(`https://en.wikipedia.org/wiki/Special:Search?search=${search_term}`, '_blank'),
            },
            {
                label: 'Last.fm',
-                action: () =>
-                    window.open(
-                        `https://www.last.fm/search/${page}s?q=${search_term}`,
-                        '_blank'
-                    ),
+                action: () => window.open(`https://www.last.fm/search/${page}s?q=${search_term}`, '_blank'),
            },
        ],
    }
--- a/src/enums.ts
+++ b/src/enums.ts
@@ -102,4 +102,7 @@ export interface DBSettings {
  scanInterval: number
  plugins: Plugin[];
  version: string;
+  lastfmApiKey: string;
+  lastfmApiSecret: string;
+  lastfmSessionKey: string;
 }
--- a/src/helpers/contextMenuHandler.ts
+++ b/src/helpers/contextMenuHandler.ts
@@ -1,88 +1,78 @@
-import { Store } from "pinia";
-import { Ref } from "vue";
-import { useRoute } from "vue-router";
+import { Store } from 'pinia'
+import { Ref } from 'vue'
+import { useRoute } from 'vue-router'

-import { ContextSrc } from "@/enums";
-import { Track } from "@/interfaces";
-import useContextStore from "@/stores/context";
+import { ContextSrc } from '@/enums'
+import { Album, Track } from '@/interfaces'
+import useContextStore from '@/stores/context'

-import albumContextItems from "@/context_menus/album";
-import artistContextItems from "@/context_menus/artist";
-import folderContextItems from "@/context_menus/folder";
-import trackContextItems from "@/context_menus/track";
-import queueContextItems from "@/context_menus/queue";
+import albumContextItems from '@/context_menus/album'
+import artistContextItems from '@/context_menus/artist'
+import folderContextItems from '@/context_menus/folder'
+import trackContextItems from '@/context_menus/track'
+import queueContextItems from '@/context_menus/queue'

-let stop_prev_watcher = () => {};
+let stop_prev_watcher = () => {}

 function flagWatcher(menu: Store, flag: Ref<boolean>) {
-  stop_prev_watcher();
+    stop_prev_watcher()

-  if (flag.value) {
-    return (flag.value = false);
-  }
+    if (flag.value) {
+        return (flag.value = false)
+    }

-  // watch for context menu visibility and reset flag
-  stop_prev_watcher = menu.$subscribe((mutation, state) => {
-    //@ts-ignore
-    flag.value = state.visible;
-  });
+    // watch for context menu visibility and reset flag
+    stop_prev_watcher = menu.$subscribe((mutation, state) => {
+        //@ts-ignore
+        flag.value = state.visible
+    })
 }

-export const showTrackContextMenu = (
-  e: MouseEvent,
-  track: Track,
-  flag: Ref<boolean>,
-) => {
-  const menu = useContextStore();
-  const options = () => trackContextItems(track);
+export const showTrackContextMenu = (e: MouseEvent, track: Track, flag: Ref<boolean>) => {
+    const menu = useContextStore()
+    const options = () => trackContextItems(track)

-  menu.showContextMenu(e, options, ContextSrc.Track);
+    menu.showContextMenu(e, options, ContextSrc.Track)

-  flagWatcher(menu, flag);
-};
+    flagWatcher(menu, flag)
+}

-export const showAlbumContextMenu = (e: MouseEvent, flag: Ref<boolean>) => {
-  const menu = useContextStore();
+export const showAlbumContextMenu = (e: MouseEvent, flag: Ref<boolean>, album?: Album) => {
+    const menu = useContextStore()

-  const options = () => albumContextItems();
-  menu.showContextMenu(e, options, ContextSrc.AlbumHeader);
+    const options = () => albumContextItems(album)
+    menu.showContextMenu(e, options, ContextSrc.AlbumHeader)

-  flagWatcher(menu, flag);
-};
+    flagWatcher(menu, flag)
+}

-export const showFolderContextMenu = (
-  e: MouseEvent,
-  flag: Ref<boolean>,
-  source: ContextSrc,
-  path: string
-) => {
-  const menu = useContextStore();
+export const showFolderContextMenu = (e: MouseEvent, flag: Ref<boolean>, source: ContextSrc, path: string) => {
+    const menu = useContextStore()

-  const options = () => folderContextItems(path);
-  menu.showContextMenu(e, options, source);
+    const options = () => folderContextItems(path)
+    menu.showContextMenu(e, options, source)

-  flagWatcher(menu, flag);
-};
+    flagWatcher(menu, flag)
+}

-export const showArtistContextMenu = (
-  e: MouseEvent,
-  flag: Ref<boolean>,
-  artisthash: string,
-  artistname: string
-) => {
-  const menu = useContextStore();
+export const showArtistContextMenu = (e: MouseEvent, flag: Ref<boolean>, artisthash: string, artistname: string) => {
+    const menu = useContextStore()

-  const options = () => artistContextItems(artisthash, artistname);
-  menu.showContextMenu(e, options, ContextSrc.ArtistHeader);
+    const options = () => artistContextItems(artisthash, artistname)
+    menu.showContextMenu(e, options, ContextSrc.ArtistHeader)

-  flagWatcher(menu, flag);
-};
+    flagWatcher(menu, flag)
+}

 export const showQueueContextMenu = (e: MouseEvent, flag: Ref<boolean>) => {
-  const menu = useContextStore();
+    const menu = useContextStore()

-  const options = () => queueContextItems();
-  menu.showContextMenu(e, options, ContextSrc.Queue);
+    const options = () => queueContextItems()
+    menu.showContextMenu(e, options, ContextSrc.Queue)

-  flagWatcher(menu, flag);
-};
+    flagWatcher(menu, flag)
+}
+
+// export const showAlbumCardContextMenu = (e: MouseEvent, flag: Ref<boolean>, album: Album) => {
+
+// }
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -28,6 +28,7 @@ export interface Track extends AlbumDisc {
    trackhash: string
    filetype: string
    is_favorite: boolean
+    explicit: boolean

    og_title: string
    og_album: string
@@ -117,6 +118,7 @@ export interface HomePageItem {
    items: { type: string; item?: any; with_helptext?: boolean }[]
    path?: string
    seeAllText?: string
+    url?: string
 }

 export interface Artist {
@@ -178,6 +180,15 @@ export interface Playlist {
          }[]
 }

+export interface Page {
+    id: number
+    name: string
+    items: (Album | Artist | Mix | Playlist)[]
+    extra: {
+        description: string
+    }
+}
+
 export interface Radio {
    name: string
    image: string
--- a/src/requests/pages.ts
+++ b/src/requests/pages.ts
@@ -0,0 +1,138 @@
+import { paths } from '@/config'
+import { Album, Artist, Mix, Page, Playlist } from '@/interfaces'
+import { Notification, NotifType } from '@/stores/notification'
+import useAxios from './useAxios'
+
+const { base: basePageUrl } = paths.api.pages
+
+export async function getAllPages() {
+    const { data, status } = await useAxios({
+        url: basePageUrl,
+        method: 'GET',
+    })
+
+    if (status == 200) {
+        return data as Page[]
+    }
+
+    return []
+}
+
+export async function getPage(page_id: string) {
+    const { data, status } = await useAxios({
+        url: basePageUrl + `/${page_id}`,
+        method: 'GET',
+    })
+
+    return data as Page
+}
+
+export async function createNewPage(
+    name: string,
+    description: string,
+    items?: { hash: string; type: string; extra: any }[]
+) {
+    const { data, status } = await useAxios({
+        url: basePageUrl,
+        props: {
+            name,
+            description,
+            items,
+        },
+        method: 'POST',
+    })
+
+    if (status == 201) {
+        return true
+    }
+
+    return false
+}
+
+export async function updatePage(page: Page, name: string, description: string) {
+    const { data, status } = await useAxios({
+        url: basePageUrl + `/${page.id}`,
+        props: {
+            name,
+            description,
+        },
+        method: 'PUT',
+    })
+
+    if (status == 200) {
+        return data.page as Page
+    }
+
+    return null
+}
+
+export async function addOrRemoveItemFromPage(
+    page_number: number,
+    item: Album | Artist | Mix | Playlist,
+    type: string,
+    command: 'add' | 'remove'
+) {
+    const payload = {
+        type: type,
+        hash: '',
+        extra: {},
+    }
+
+    switch (type) {
+        case 'album':
+            payload.hash = (item as Album).albumhash
+            break
+        case 'artist':
+            payload.hash = (item as Artist).artisthash
+            break
+        case 'mix':
+            payload.hash = (item as Mix).sourcehash
+            break
+        case 'playlist':
+            payload.hash = (item as Playlist).id.toString()
+            break
+    }
+
+    if (payload.hash === '') {
+        throw new Error('Invalid item type. Item not added to page.')
+    }
+
+    const { data, status } = await useAxios({
+        url: basePageUrl + `/${page_number}/items`,
+        props: {
+            item: payload,
+        },
+        method: command == 'add' ? 'POST' : 'DELETE',
+    })
+
+    if (status == 200) {
+        new Notification(
+            `${payload.type[0].toUpperCase() + payload.type.slice(1)} ${
+                command == 'add' ? 'added' : 'removed'
+            } to page`,
+            NotifType.Success
+        )
+        return true
+    }
+
+    if (status == 400) {
+        new Notification(`${payload.type[0].toUpperCase() + payload.type.slice(1)} already in page`, NotifType.Error)
+        return false
+    }
+
+    new Notification('Failed: ' + data.error, NotifType.Error)
+    return false
+}
+
+export async function deletePage(page_number: number) {
+    const { data, status } = await useAxios({
+        url: basePageUrl + `/${page_number}`,
+        method: 'DELETE',
+    })
+
+    if (status == 200) {
+        return true
+    }
+
+    return false
+}
--- a/src/requests/useAxios.ts
+++ b/src/requests/useAxios.ts
@@ -20,7 +20,7 @@ export function getBaseUrl() {

 axios.defaults.baseURL = getBaseUrl()

-export default async (args: FetchProps) => {
+export default async (args: FetchProps, withCredentials: boolean = true) => {
    const on_ngrok = args.url.includes('ngrok')
    const ngrok_config = {
        'ngrok-skip-browser-warning': 'stupid-SOAB!',
@@ -37,7 +37,7 @@ export default async (args: FetchProps) => {
            method: args.method || 'POST',
            // INFO: Add ngrok header and provided headers
            headers: { ...args.headers, ...(on_ngrok ? ngrok_config : {}) },
-            withCredentials: true,
+            withCredentials: withCredentials,
        })

        stopLoading()
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,6 +28,7 @@ const FavoriteCardScroller = () => import("@/views/FavoriteCardScroller.vue");
 const StatsView = () => import("@/views/Stats/main.vue");
 const MixView = () => import("@/views/MixView.vue");
 const MixListView = () => import("@/views/MixListView.vue");
+const Page = () => import("@/views/Pages/Page.vue");

 const folder = {
  path: "/folder/:path",
@@ -202,6 +203,12 @@ const MixList = {
  component: MixListView,
 };

+const PageView = {
+  path: "/pages/:page",
+  name: "Page",
+  component: Page,
+};
+
 const routes = [
  folder,
  playlists,
@@ -225,6 +232,7 @@ const routes = [
  Stats,
  Mix,
  MixList,
+  PageView,
 ];

 const Routes = {
@@ -250,6 +258,7 @@ const Routes = {
  Stats: Stats.name,
  Mix: Mix.name,
  MixList: MixList.name,
+  Page: PageView.name,
 };

 const router = createRouter({
--- a/src/settings/enums.ts
+++ b/src/settings/enums.ts
@@ -7,7 +7,7 @@ export enum SettingType {
  root_dirs,
  free_number_input,
  locked_number_input,
-  
+
  // custom components 👇
  quick_actions,
  profile,
@@ -15,5 +15,6 @@ export enum SettingType {
  pairing,
  about,
  streaming_quality,
-  backup
+  backup,
+  secretinput,
 }
--- a/src/settings/general/root-dirs.ts
+++ b/src/settings/general/root-dirs.ts
@@ -1,63 +1,61 @@
-import { Setting } from "@/interfaces/settings";
-import {
-  addRootDirs as editRootDirs,
-  triggerScan,
-} from "@/requests/settings/rootdirs";
-import { SettingType } from "../enums";
-import { manageRootDirsStrings as data } from "../strings";
+import { Setting } from '@/interfaces/settings'
+import { addRootDirs as editRootDirs, triggerScan } from '@/requests/settings/rootdirs'
+import { SettingType } from '../enums'
+import { manageRootDirsStrings as data } from '../strings'

-import useModalStore from "@/stores/modal";
-import useSettingsStore from "@/stores/settings";
+import useModalStore from '@/stores/modal'
+import useSettingsStore from '@/stores/settings'

-const text = data.settings;
+const text = data.settings

 const change_root_dirs: Setting = {
-  title: text.change,
-  type: SettingType.button,
-  state: null,
-  button_text: () =>
-    `\xa0 \xa0 ${
-      useSettingsStore().root_dirs.length ? "Modify" : "Configure"
-    } \xa0 \xa0`,
-  action: () => useModalStore().showRootDirsPromptModal(),
-};
+    title: text.change,
+    type: SettingType.button,
+    state: null,
+    button_text: () => `\xa0 \xa0 ${useSettingsStore().root_dirs.length ? 'Modify' : 'Configure'} \xa0 \xa0`,
+    action: () => useModalStore().showRootDirsPromptModal(),
+}

 const list_root_dirs: Setting = {
-  title: text.list_root_dirs,
-  type: SettingType.root_dirs,
-  state: () =>
-    useSettingsStore().root_dirs.map((d) => ({
-      title: d,
-      action: () => {
-        editRootDirs([], [d]).then((all_dirs) => {
-          useSettingsStore().setRootDirs(all_dirs);
-        });
-      },
-    })),
-  defaultAction: () => {},
-  action: () => triggerScan(),
-};
+    title: text.list_root_dirs,
+    type: SettingType.root_dirs,
+    state: () =>
+        useSettingsStore().root_dirs.map(d => ({
+            title: d,
+            action: () => {
+                editRootDirs([], [d]).then(all_dirs => {
+                    useSettingsStore().setRootDirs(all_dirs)
+                })
+            },
+        })),
+    defaultAction: () => {},
+    action: () => triggerScan(),
+}

-const enable_scans: Setting = {
-  title: "Enable periodic scans",
-  type: SettingType.binary,
-  state: () => useSettingsStore().enablePeriodicScans,
-  action: () => useSettingsStore().togglePeriodicScans(),
-};
+// const enable_scans: Setting = {
+//   title: "Enable periodic scans",
+//   type: SettingType.binary,
+//   state: () => useSettingsStore().enablePeriodicScans,
+//   action: () => useSettingsStore().togglePeriodicScans(),
+// };

-const useWatchdog: Setting = {
-  title: "Watch root dirs for new music",
-  experimental: true,
-  type: SettingType.binary,
-  state: () => useSettingsStore().enableWatchDog,
-  action: () => useSettingsStore().toggleWatchdog(),
-};
+// const useWatchdog: Setting = {
+//   title: "Watch root dirs for new music",
+//   experimental: true,
+//   type: SettingType.binary,
+//   state: () => useSettingsStore().enableWatchDog,
+//   action: () => useSettingsStore().toggleWatchdog(),
+// };

-const periodicScanInterval: Setting = {
-  title: "Periodic scan interval (minutes)",
-  type: SettingType.free_number_input,
-  state: () => useSettingsStore().periodicInterval,
-  action: (newValue: number) => useSettingsStore().updatePeriodicInterval(newValue),
-};
+// const periodicScanInterval: Setting = {
+//   title: "Periodic scan interval (minutes)",
+//   type: SettingType.free_number_input,
+//   state: () => useSettingsStore().periodicInterval,
+//   action: (newValue: number) => useSettingsStore().updatePeriodicInterval(newValue),
+// };

-export default [change_root_dirs, list_root_dirs, useWatchdog, enable_scans, periodicScanInterval];
+export default [
+    change_root_dirs,
+    list_root_dirs,
+    // useWatchdog, enable_scans, periodicScanInterval
+]
--- a/src/settings/plugins/index.ts
+++ b/src/settings/plugins/index.ts
@@ -1,20 +1,29 @@
-import lyrics from "./lyrics";
-import useAuth from "@/stores/auth";
-import { SettingCategory } from "@/interfaces/settings";
+import lyrics from './lyrics'
+import useAuth from '@/stores/auth'
+import { SettingCategory } from '@/interfaces/settings'

-import LyricsSvg from "@/assets/icons/lyrics.svg?raw";
-import { loggedInUserIsAdmin } from "../utils";
+import LyricsSvg from '@/assets/icons/lyrics.svg?raw'
+import LastfmSvg from '@/assets/icons/lastfm.svg?raw'
+
+import { loggedInUserIsAdmin } from '../utils'
+import lastfm from './lastfm'

 export default <SettingCategory>{
-  title: "Plugins",
-  show_if: loggedInUserIsAdmin,
-  groups: [
-    {
-      title: "Lyrics",
-      icon: LyricsSvg,
-      desc: "Finds and displays lyrics from the internet.",
-      settings: lyrics,
-      experimental: true,
-    },
-  ],
-};
+    title: 'Plugins',
+    show_if: loggedInUserIsAdmin,
+    groups: [
+        {
+            title: 'Lyrics',
+            icon: LyricsSvg,
+            desc: 'Finds and displays lyrics from the internet.',
+            settings: lyrics,
+            experimental: true,
+        },
+        {
+            title: 'Last.fm',
+            icon: LastfmSvg,
+            desc: 'Last.fm integration',
+            settings: lastfm,
+        },
+    ],
+}
--- a/src/settings/plugins/lastfm.ts
+++ b/src/settings/plugins/lastfm.ts
@@ -0,0 +1,61 @@
+import useSettings from '@/stores/settings'
+import { Setting } from '@/interfaces/settings'
+import { SettingType } from '../enums'
+
+const authorize = <Setting>{
+    title: 'Connect your account',
+    desc: 'Allow Swing Music to access your Last.fm account',
+    type: SettingType.button,
+    action: () => {
+        const settings = useSettings()
+        if (settings.lastfm_integration_started) {
+            return settings.finishLastfmAuth()
+        }
+
+        if (settings.lastfm_session_key) {
+            return settings.disconnectLastfm()
+        }
+
+        return settings.authorizeLastfmApiKey()
+    },
+    button_text: () => {
+        const settings = useSettings()
+        if (settings.lastfm_integration_started) {
+            return 'Finish'
+        }
+
+        if (settings.lastfm_session_key) {
+            return 'Disconnect'
+        }
+
+        return 'Connect'
+    },
+}
+
+// const api_key = <Setting>{
+//     title: 'Use custom API Key',
+//     desc: 'instead of the Swing Music default to authenticate with Last.fm',
+//     type: SettingType.secretinput,
+//     state: () => useSettings().lastfm_api_key,
+//     action: (value: string) => {
+//         if (!value) {
+//             return
+//         }
+//         return useSettings().setLastfmApiKey(value)
+//     },
+// }
+
+// const api_secret = <Setting>{
+//     title: 'Use custom API Secret',
+//     desc: 'instead of the Swing Music default to sign your scrobble submission',
+//     type: SettingType.secretinput,
+//     state: () => useSettings().lastfm_api_secret,
+//     action: (value: string) => {
+//         if (!value) {
+//             return
+//         }
+//         return useSettings().setLastfmApiSecret(value)
+//     },
+// }
+
+export default [authorize]
--- a/src/stores/home.ts
+++ b/src/stores/home.ts
@@ -30,9 +30,11 @@ export default defineStore('homepage', () => {

    async function fetchAll() {
        const data: { [key: string]: HomePageItem }[] = await getHomePageData(maxAbumCards.value)
+        let keys = []

        for (const [index, item] of data.entries()) {
            const key = Object.keys(item)[0]
+            keys.push(key)
            // @ts-ignore
            homepageData[key] = item[key]
            // @ts-ignore
@@ -41,6 +43,18 @@ export default defineStore('homepage', () => {
            homepageData[key].path = routes[key]
            // @ts-ignore
            homepageData[key].seeAllText = seeAllTexts[key]
+
+            if (item[key].url) {
+                // @ts-ignore
+                homepageData[key].path = item[key].url
+            }
+        }
+
+        // remove keys not in response
+        for (const key in homepageData) {
+            if (!keys.includes(key)) {
+                delete homepageData[key]
+            }
        }
    }

--- a/src/stores/modal.ts
+++ b/src/stores/modal.ts
@@ -1,86 +1,90 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'

 export enum ModalOptions {
-  newPlaylist,
-  updatePlaylist,
-  deletePlaylist,
-  SetIP,
-  rootDirsPrompt,
-  setRootDirs,
-  saveFolderAsPlaylist,
-  login,
-  settings
+    newPlaylist,
+    page,
+    updatePlaylist,
+    deletePlaylist,
+    SetIP,
+    rootDirsPrompt,
+    setRootDirs,
+    saveFolderAsPlaylist,
+    login,
+    settings,
 }

-export default defineStore("newModal", {
-  state: () => ({
-    title: "",
-    options: ModalOptions,
-    component: <any>null,
-    props: <any>{},
-    visible: false,
-  }),
-  actions: {
-    showModal(modalOption: ModalOptions, props: any = {}) {
-      this.component = modalOption;
-      this.visible = true;
-      this.props = props;
+export default defineStore('newModal', {
+    state: () => ({
+        title: '',
+        options: ModalOptions,
+        component: <any>null,
+        props: <any>{},
+        visible: false,
+    }),
+    actions: {
+        showModal(modalOption: ModalOptions, props: any = {}) {
+            this.component = modalOption
+            this.visible = true
+            this.props = props
+        },
+        showNewPlaylistModal(props: any = {}) {
+            this.showModal(ModalOptions.newPlaylist, props)
+        },
+        showPageModal(props: any = {}) {
+            this.showModal(ModalOptions.page, props)
+        },
+        showSaveFolderAsPlaylistModal(path: string) {
+            const playlist_name = path.split('/').pop()
+            const props = {
+                playlist_name,
+                path,
+            }
+            this.showModal(ModalOptions.newPlaylist, props)
+        },
+        showSaveArtistAsPlaylistModal(name: string, artisthash: string) {
+            const props = {
+                artisthash,
+                playlist_name: `This is ${name}`,
+            }
+            this.showModal(ModalOptions.newPlaylist, props)
+        },
+        showSaveQueueAsPlaylistModal(name: string) {
+            const props = {
+                is_queue: true,
+                playlist_name: name,
+            }
+            this.showModal(ModalOptions.newPlaylist, props)
+        },
+        showEditPlaylistModal() {
+            this.showModal(ModalOptions.updatePlaylist)
+        },
+        showDeletePlaylistModal(pid: number) {
+            const props = {
+                pid: pid,
+            }
+            this.showModal(ModalOptions.deletePlaylist, props)
+        },
+        showSetIPModal() {
+            this.showModal(ModalOptions.SetIP)
+        },
+        showRootDirsPromptModal() {
+            this.showModal(ModalOptions.rootDirsPrompt)
+        },
+        showSetRootDirsModal() {
+            this.showModal(ModalOptions.setRootDirs)
+        },
+        showLoginModal() {
+            this.showModal(ModalOptions.login)
+        },
+        showSettingsModal() {
+            this.showModal(ModalOptions.settings)
+        },
+        hideModal() {
+            this.visible = false
+            this.setTitle('')
+        },
+        setTitle(new_title: string) {
+            this.title = new_title
+        },
    },
-    showNewPlaylistModal(props: any = {}) {
-      this.showModal(ModalOptions.newPlaylist, props);
-    },
-    showSaveFolderAsPlaylistModal(path: string) {
-      const playlist_name = path.split("/").pop();
-      const props = {
-        playlist_name,
-        path,
-      };
-      this.showModal(ModalOptions.newPlaylist, props);
-    },
-    showSaveArtistAsPlaylistModal(name: string, artisthash: string) {
-      const props = {
-        artisthash,
-        playlist_name: `This is ${name}`,
-      };
-      this.showModal(ModalOptions.newPlaylist, props);
-    },
-    showSaveQueueAsPlaylistModal(name: string) {
-      const props = {
-        is_queue: true,
-        playlist_name: name,
-      };
-      this.showModal(ModalOptions.newPlaylist, props);
-    },
-    showEditPlaylistModal() {
-      this.showModal(ModalOptions.updatePlaylist);
-    },
-    showDeletePlaylistModal(pid: number) {
-      const props = {
-        pid: pid,
-      };
-      this.showModal(ModalOptions.deletePlaylist, props);
-    },
-    showSetIPModal() {
-      this.showModal(ModalOptions.SetIP);
-    },
-    showRootDirsPromptModal() {
-      this.showModal(ModalOptions.rootDirsPrompt);
-    },
-    showSetRootDirsModal() {
-      this.showModal(ModalOptions.setRootDirs);
-    },
-    showLoginModal(){
-      this.showModal(ModalOptions.login);
-    },
-    showSettingsModal(){
-      this.showModal(ModalOptions.settings);
-    },
-    hideModal() {
-      this.visible = false;
-      this.setTitle("");
-    },
-    setTitle(new_title: string) {
-      this.title = new_title;
-    },
-  },
-});
+})
--- a/src/stores/pages/page.ts
+++ b/src/stores/pages/page.ts
@@ -0,0 +1,27 @@
+import { Artist, Album, Page } from '@/interfaces'
+import { getPage } from '@/requests/pages'
+import { defineStore } from 'pinia'
+
+export default defineStore('page', {
+    state: () => ({
+        page: <Page | null>null,
+    }),
+    actions: {
+        async fetchPage(page_no: string) {
+            this.page = await getPage(page_no)
+        },
+        async removeLocalItem(item: Album | Artist, type: 'album' | 'artist') {
+            if (!this.page) return
+
+            if (type == 'album') {
+                this.page.items = this.page.items.filter(i => {
+                    return (i as Album).albumhash != (item as Album).albumhash
+                })
+            } else {
+                this.page.items = this.page.items.filter(i => {
+                    return (i as Artist).artisthash != (item as Artist).artisthash
+                })
+            }
+        },
+    },
+})
--- a/src/stores/settings/index.ts
+++ b/src/stores/settings/index.ts
@@ -7,6 +7,9 @@ import { pluginSetActive, updatePluginSettings } from '@/requests/plugins'
 import { updateConfig } from '@/requests/settings'
 import { usePlayer } from '@/stores/player'
 import { content_width } from '../content-width'
+import { getLastFmApiSig } from '@/context_menus/hashing'
+import useAxios from '@/requests/useAxios'
+import { paths } from '@/config'

 export default defineStore('settings', {
    state: () => ({
@@ -47,6 +50,11 @@ export default defineStore('settings', {
            auto_download: false,
            overide_unsynced: false,
        },
+        lasftfm_token: '',
+        lastfm_api_key: '',
+        lastfm_api_secret: '',
+        lastfm_session_key: '',
+        lastfm_integration_started: false,

        // audio
        use_silence_skip: true,
@@ -80,6 +88,9 @@ export default defineStore('settings', {
            this.periodicInterval = settings.scanInterval
            this.enableWatchDog = settings.enableWatchDog

+            this.lastfm_api_key = settings.lastfmApiKey
+            this.lastfm_api_secret = settings.lastfmApiSecret
+            this.lastfm_session_key = settings.lastfmSessionKey
            this.use_lyrics_plugin = settings.plugins.find(p => p.name === 'lyrics_finder')?.active

            if (this.use_lyrics_plugin) {
@@ -224,11 +235,11 @@ export default defineStore('settings', {
        },

        async genericToggleSetting(key: string, value: any, prop: string) {
+            // @ts-expect-error
            const oldValue = this[prop]
+            // @ts-expect-error
            this[prop] = value

-            console.log(this[prop])
-
            const res = await updateConfig(key, value)

            if (res.status !== 200) {
@@ -282,6 +293,67 @@ export default defineStore('settings', {
                'show_albums_as_singles'
            )
        },
+        async setLastfmApiKey(key: string) {
+            return await this.genericToggleSetting('lastfmApiKey', key, 'lastfm_api_key')
+        },
+        async setLastfmApiSecret(key: string) {
+            return await this.genericToggleSetting('lastfmApiSecret', key, 'lastfm_api_secret')
+        },
+        async authorizeLastfmApiKey() {
+            const getTokenUrl =
+                'http://ws.audioscrobbler.com/2.0/?format=json&method=auth.getToken&api_key=' +
+                this.lastfm_api_key +
+                '&api_sig=' +
+                getLastFmApiSig({ api_key: this.lastfm_api_key }, this.lastfm_api_secret)
+
+            const data = await useAxios(
+                {
+                    url: getTokenUrl,
+                    method: 'POST',
+                },
+                false
+            )
+            console.log('res: ', data)
+
+            if (data.status !== 200) {
+                return
+            }
+
+            this.lasftfm_token = data.data.token
+            const url = 'https://www.last.fm/api/auth/?api_key=' + this.lastfm_api_key + '&token=' + this.lasftfm_token
+            window.open(url, '_blank')
+            this.lastfm_integration_started = true
+        },
+        async finishLastfmAuth() {
+            const res = await useAxios({
+                url: paths.api.plugins + '/lastfm/session/create',
+                method: 'POST',
+                props: {
+                    token: this.lasftfm_token,
+                },
+            })
+
+            console.log('res: ', res)
+
+            if (res.status !== 200) {
+                return
+            }
+
+            this.lastfm_session_key = res.data.session_key
+            this.lastfm_integration_started = false
+        },
+        async disconnectLastfm() {
+            const res = await useAxios({
+                url: paths.api.plugins + '/lastfm/session/delete',
+                method: 'POST',
+            })
+
+            if (res.status !== 200) {
+                return
+            }
+
+            this.lastfm_session_key = ''
+        },
        setStreamingQuality(quality: string) {
            this.streaming_quality = quality
        },
--- a/src/views/Pages/Page.vue
+++ b/src/views/Pages/Page.vue
@@ -0,0 +1,66 @@
+<template>
+    <CardGridPage :items="page.page?.items || []">
+        <template #header>
+            <GenericHeader>
+                <template #name>
+                    <span @click="updatePage">
+                        {{ page.page?.name }} <span><PencilSvg height="0.8rem" width="0.8rem" /></span
+                    ></span>
+                </template>
+                <template #description v-if="page.page?.extra.description">
+                    <span @click="updatePage"> {{ page.page?.extra.description }} </span>
+                </template>
+                <template #right>
+                    <button @click="deletePage"><DeleteSvg height="1.2rem" width="1.2rem" /> Delete</button>
+                </template>
+            </GenericHeader>
+        </template>
+    </CardGridPage>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+import DeleteSvg from '@/assets/icons/delete.svg'
+import PencilSvg from '@/assets/icons/pencil.svg'
+import GenericHeader from '@/components/shared/GenericHeader.vue'
+import CardGridPage from '@/views/SearchView/CardGridPage.vue'
+
+import useModal from '@/stores/modal'
+import usePage from '@/stores/pages/page'
+
+const modal = useModal()
+const page = usePage()
+
+onMounted(async () => {
+    const route = useRoute()
+    const page_id = route.params.page as string
+    page.fetchPage(page_id)
+})
+
+function updatePage() {
+    console.log('update page')
+    modal.showPageModal({
+        page: page.page,
+    })
+}
+
+function deletePage() {
+    modal.showPageModal({
+        page: page.page,
+        delete: true,
+    })
+}
+</script>
+
+<style scoped lang="scss">
+span {
+    cursor: text;
+    margin-right: $smaller;
+}
+
+.generichead {
+    margin-top: 2rem;
+}
+</style>
--- a/src/views/SearchView/CardGridPage.vue
+++ b/src/views/SearchView/CardGridPage.vue
@@ -1,100 +1,90 @@
 <template>
-  <NoItems
-    :title="`No ${page} results`"
-    :description="desc"
-    :icon="SearchSvg"
-    :flag="!items.length"
-    v-if="showNoItemsComponent"
-  />
-  <div class="v-scroll-page" style="height: 100%">
-    <DynamicScroller
-      style="height: 100%"
-      class="scroller"
-      :min-item-size="64"
-      :items="scrollerItems"
-    >
-      <template #before>
-        <slot name="header"></slot>
-      </template>
-      <template #default="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.props]"
-          :data-index="index"
-        >
-          <component
-            :is="item.component"
-            :key="index"
-            v-bind="item.props"
-          ></component>
-        </DynamicScrollerItem>
-      </template>
-    </DynamicScroller>
-  </div>
+    <NoItems
+        :title="`No ${page} results`"
+        :description="desc"
+        :icon="SearchSvg"
+        :flag="!items.length"
+        v-if="showNoItemsComponent"
+    />
+    <div class="v-scroll-page" style="height: 100%">
+        <DynamicScroller style="height: 100%" class="scroller" :min-item-size="64" :items="scrollerItems">
+            <template #before>
+                <slot name="header"></slot>
+            </template>
+            <template #default="{ item, index, active }">
+                <DynamicScrollerItem
+                    :item="item"
+                    :active="active"
+                    :size-dependencies="[item.props]"
+                    :data-index="index"
+                >
+                    <component :is="item.component" :key="index" v-bind="item.props"></component>
+                </DynamicScrollerItem>
+            </template>
+        </DynamicScroller>
+    </div>
 </template>

 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'

-import useSearchStore from "@/stores/search";
-import { maxAbumCards } from "@/stores/content-width";
+import useSearchStore from '@/stores/search'
+import { maxAbumCards } from '@/stores/content-width'

-import SearchSvg from "@/assets/icons/search.svg";
-import NoItems from "@/components/shared/NoItems.vue";
-import CardRow from "@/components/shared/CardRow.vue";
-import AlbumsFetcher from "@/components/ArtistView/AlbumsFetcher.vue";
+import SearchSvg from '@/assets/icons/search.svg'
+import NoItems from '@/components/shared/NoItems.vue'
+import CardRow from '@/components/shared/CardRow.vue'
+import AlbumsFetcher from '@/components/ArtistView/AlbumsFetcher.vue'

 const props = defineProps<{
-  page: "album" | "artist" | "mix";
-  fetch_callback?: () => Promise<void>;
-  items: any[];
-  outside_route?: boolean;
-  showNoItemsComponent?: boolean;
-}>();
+    page?: 'album' | 'artist' | 'mix'
+    fetch_callback?: () => Promise<void>
+    items: any[]
+    outside_route?: boolean
+    showNoItemsComponent?: boolean
+}>()

-const search = useSearchStore();
+const search = useSearchStore()

 const desc = computed(() =>
-  search.query === ""
-    ? `Start typing to search for ${props.page}s`
-    : `Results for '${search.query}' should appear here`
-);
+    search.query === ''
+        ? `Start typing to search for ${props.page}s`
+        : `Results for '${search.query}' should appear here`
+)

 const scrollerItems = computed(() => {
-  let maxCards = maxAbumCards.value;
+    let maxCards = maxAbumCards.value

-  if (props.outside_route) {
-    maxCards = 6;
-  }
+    if (props.outside_route) {
+        maxCards = 6
+    }

-  const groups = Math.ceil(props.items.length / maxCards);
-  const items = [];
+    const groups = Math.ceil(props.items.length / maxCards)
+    const items = []

-  for (let i = 0; i < groups; i++) {
-    items.push({
-      id: i,
-      component: CardRow,
-      props: {
-        type: props.page,
-        items: props.items.slice(i * maxCards, (i + 1) * maxCards),
-      },
-    });
-  }
+    for (let i = 0; i < groups; i++) {
+        items.push({
+            id: i,
+            component: CardRow,
+            props: {
+                items: props.items.slice(i * maxCards, (i + 1) * maxCards),
+            },
+        })
+    }

-  const moreItems = props.page === 'album' ? search.albums.more : search.artists.more
+    const moreItems = props.page === 'album' ? search.albums.more : search.artists.more

-  if (props.fetch_callback && moreItems) {
-    items.push({
-      id: Math.random(),
-      component: AlbumsFetcher,
-      props: {
-        fetch_callback: props.fetch_callback,
-        outside_route: props.outside_route,
-      },
-    });
-  }
+    if (props.fetch_callback && moreItems) {
+        items.push({
+            id: Math.random(),
+            component: AlbumsFetcher,
+            props: {
+                fetch_callback: props.fetch_callback,
+                outside_route: props.outside_route,
+            },
+        })
+    }

-  return items;
-});
+    return items
+})
 </script>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@ import vue from "@vitejs/plugin-vue";
 import svgLoader from "vite-svg-loader";
 import { VitePWA } from "vite-plugin-pwa";
 import viteCompression from "vite-plugin-compression";
+import { nodePolyfills } from 'vite-plugin-node-polyfills'

 const path = require("path");

@@ -90,6 +91,9 @@ export default defineConfig({
    viteCompression({
      threshold: 150,
    }),
+    nodePolyfills({
+      include: ['crypto'],
+    }),
  ],
  resolve: {
    alias: {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
cwilvx	9222e94b6c	fix artist header ambient	2025-01-31 12:01:43 +03:00
cwilvx	54c165b64a	fix: remove item from page	2025-01-31 11:25:55 +03:00
Mungai Njoroge	591509ebaf	introducing pages Pages	2025-01-29 12:43:20 +03:00
cwilvx	80a0bdbbf1	remove root dir draft settings	2025-01-29 12:30:42 +03:00
cwilvx	2e27da3f9f	fix cardscroller	2025-01-29 12:28:51 +03:00
cwilvx	74bf8f5d78	context menu on artist	2025-01-29 12:05:27 +03:00
cwilvx	bfdefc37fd	album card context menu	2025-01-29 11:43:02 +03:00
cwilvx	44a877b9c9	enable delete	2025-01-28 10:44:52 +03:00
cwilvx	db93fd554e	first draft	2025-01-28 09:17:37 +03:00
cwilvx	40a7ad084c	revert bottom bar test bitrate	2025-01-28 06:41:47 +03:00
cwilvx	e44aa01d63	move /home to /nothome	2025-01-07 23:21:44 +03:00
cwilvx	192e705890	add explicit flag	2025-01-06 00:18:34 +03:00
cwilvx	50f92b65ab	revert default settings page	2024-12-30 21:10:07 +03:00
cwilvx	a5aea45cd6	Merge branch 'lastfm'	2024-12-30 21:01:04 +03:00
cwilvx	56b1ab35d3	lastfm integration	2024-12-30 20:58:46 +03:00
Mungai Njoroge	cc93fe7419	Merge pull request #39 from swingmx/another-one Recommendations and misc stuff	2024-12-28 16:04:52 +03:00