feat(landscape): add shuffle anchor

addons/landscape/index.js

@@ -11,5 +11,9 @@ module.exports = function (commas) {
       commas.module.require('internal/landscape/landscape-slot.vue').default
     )
 
+    commas.workspace.addAnchor(
+      commas.module.require('internal/landscape/landscape-anchor.vue').default
+    )
+
   }
 }

renderer/internal/landscape/hooks.mjs

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+
+export const nonceRef = ref(Date.now())
+export function useNonce() {
+  return nonceRef
+}
+
+export function refreshLandscapeBackground() {
+  nonceRef.value = Date.now()
+}

renderer/internal/landscape/landscape-anchor.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="landscape-anchor" @click="refresh">
+    <span class="feather-icon icon-shuffle"></span>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue'
+import { refreshLandscapeBackground } from './hooks.mjs'
+
+export default {
+  name: 'landscape-anchor',
+  setup() {
+    const state = reactive({})
+
+    return {
+      ...toRefs(state),
+      refresh: refreshLandscapeBackground,
+    }
+  },
+}
+</script>
+
+<style>
+.proxy-anchor.active {
+  color: var(--design-cyan);
+}
+</style>

renderer/internal/landscape/landscape-slot.vue

@@ -16,7 +16,7 @@
       </mask>
       <filter id="background-filter">
         <feComponentTransfer>
-          <feFuncA type="linear" slope="5" intercept="-4.7" />
+          <feFuncA type="linear" slope="0.3" />
         </feComponentTransfer>
       </filter>
     </defs>
@@ -35,12 +35,13 @@
 <script>
 import { computed, reactive, toRefs, unref } from 'vue'
 import { useSettings } from '../../hooks/settings.mjs'
+import { useNonce } from './hooks.mjs'
 
 export default {
   name: 'landscape-slot',
   setup() {
     const state = reactive({
-      nonce: Date.now(),
+      nonce: useNonce(),
     })
 
     const settingsRef = useSettings()