Show pin on pinned tooltips

src/data/themes.ts

@@ -23,6 +23,7 @@ export interface Theme {
     variables: ThemeVars;
     floatingTabs: boolean;
     mergeAdjacent: boolean;
+    showPin: boolean;
 }
 
 declare module "@vue/runtime-dom" {
@@ -53,7 +54,8 @@ const defaultTheme: Theme = {
         "--feature-margin": "0px"
     },
     floatingTabs: true,
-    mergeAdjacent: true
+    mergeAdjacent: true,
+    showPin: true
 };
 
 export enum Themes {

src/features/tooltips/Tooltip.vue

@@ -24,6 +24,7 @@
                     '--yoffset': unref(yoffset) || '0px'
                 }"
             >
+                <span v-if="showPin" class="material-icons pinned">push_pin</span>
                 <component v-if="comp" :is="comp" />
             </div>
         </transition>
@@ -31,8 +32,10 @@
 </template>
 
 <script lang="ts">
+import themes from "data/themes";
 import { CoercableComponent, jsx, StyleValue } from "features/feature";
 import { Persistent } from "game/persistence";
+import settings from "game/settings";
 import {
     coerceComponent,
     computeOptionalComponent,
@@ -93,6 +96,8 @@ export default defineComponent({
             }
         }
 
+        const showPin = computed(() => unwrapRef(pinned) && themes[settings.theme].showPin);
+
         return {
             TooltipDirection,
             isHovered,
@@ -100,7 +105,8 @@ export default defineComponent({
             comp,
             elementComp,
             unref,
-            togglePinned
+            togglePinned,
+            showPin
         };
     }
 });
@@ -210,4 +216,11 @@ export default defineComponent({
     margin-top: -10px;
     border-color: transparent transparent var(--tooltip-background) transparent;
 }
+
+.pinned {
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    transform: rotateZ(45deg);
+}
 </style>