refactor(scenery): moved thumbnails toggler to header

src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue

@@ -39,6 +39,15 @@
         >
           <img src="/images/icon-tablice.ico" alt="icon-tablice" />
         </a>
+
+        <button
+          class="thumbnails-btn"
+          data-tooltip-type="HtmlTooltip"
+          :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
+          @click="toggleThumbnails"
+        >
+          <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-eye' : 'fa-eye-slash'}`"></i>
+        </button>
       </span>
     </h3>
   </div>
@@ -61,9 +70,16 @@ const props = defineProps({
   chosenCheckpoint: {
     type: String,
     required: true
+  },
+
+  showStockThumbnails: {
+    type: Boolean,
+    required: true
   }
 });
 
+const emits = defineEmits(['toggleThumbnails']);
+
 const mainStore = useMainStore();
 
 const tabliceZbiorczeHref = computed(() => {
@@ -83,6 +99,10 @@ const pragotronHref = computed(() => {
 const generatorHref = computed(() => {
   return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`;
 });
+
+function toggleThumbnails() {
+  emits('toggleThumbnails');
+}
 </script>
 
 <style lang="scss" scoped>
@@ -111,4 +131,9 @@ img {
   gap: 0.25em;
   margin-left: 0.5em;
 }
+
+.thumbnails-btn {
+  padding: 0.25em;
+  width: 2em;
+}
 </style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -35,15 +35,6 @@
       </template>
     </div>
 
-    <div class="timetable-options">
-      <div class="thumbnails-checkbox">
-        <label>
-          <input type="checkbox" v-model="showStockThumbnails" />
-          <span>POKAZUJ PODGLĄDY SKŁADÓW</span>
-        </label>
-      </div>
-    </div>
-
     <div class="list-container">
       <transition-group name="list-anim">
         <div
@@ -250,6 +241,11 @@ const props = defineProps({
   chosenCheckpoint: {
     type: String,
     required: true
+  },
+
+  showStockThumbnails: {
+    type: Boolean,
+    required: true
   }
 });
 
@@ -257,8 +253,6 @@ const route = useRoute();
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
-const showStockThumbnails = ref(false);
-
 const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   if (!props.onlineScenery) return [];
 
@@ -310,7 +304,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
 
 .scenery-timetable-list {
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto 1fr;
   overflow: hidden;
 }
 
@@ -358,26 +352,6 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   }
 }
 
-.thumbnails-checkbox {
-  label {
-    cursor: pointer;
-    color: #aaa;
-  }
-
-  input {
-    width: 0;
-    outline: none;
-  }
-
-  input:checked + span {
-    color: var(--clr-success);
-  }
-
-  input:focus-visible + span {
-    outline: 1px solid white;
-  }
-}
-
 .list-container {
   position: relative;
   overflow-y: auto;