feat: pin files to top of gcode files list

src/components/panels/GcodefilesPanel.vue

@@ -235,7 +235,7 @@
                                 class="pa-0 mr-0"
                                 @click.stop="select(!isSelected)"></v-simple-checkbox>
                         </td>
-                        <td class="px-0 text-center" style="width: 32px">
+                        <td class="px-0 text-center fileicon-container" style="width: 32px">
                             <template v-if="item.isDirectory">
                                 <v-icon>{{ mdiFolder }}</v-icon>
                             </template>
@@ -271,6 +271,10 @@
                             <template v-else>
                                 <v-icon>{{ mdiFile }}</v-icon>
                             </template>
+
+                            <span v-if="item.isPinned" class="pin">
+                                <v-icon>{{ mdiPin }}</v-icon>
+                            </span>
                         </td>
                         <td class=" ">{{ item.filename }}</td>
                         <td class="text-right text-no-wrap">
@@ -311,6 +315,16 @@
             @closeDialog="closeStartPrint" />
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
+                <v-list-item
+                    v-if="!contextMenu.item.isPinned && !contextMenu.item.isDirectory"
+                    @click="pinFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPin }}</v-icon>
+                    {{ $t('Files.Pin') }}
+                </v-list-item>
+                <v-list-item v-else-if="!contextMenu.item.isDirectory" @click="unPinFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPinOff }}</v-icon>
+                    {{ $t('Files.Unpin') }}
+                </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory"
                     :disabled="printerIsPrinting || !klipperReadyForGui || !isGcodeFile(contextMenu.item)"
@@ -652,6 +666,8 @@ import {
     mdiVideo3d,
     mdiFileDocumentEditOutline,
     mdiContentCopy,
+    mdiPin,
+    mdiPinOff,
 } from '@mdi/js'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
 import ControlMixin from '@/components/mixins/control'
@@ -725,6 +741,8 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
     mdiCheckboxBlankOutline = mdiCheckboxBlankOutline
     mdiCheckboxMarked = mdiCheckboxMarked
     mdiDragVertical = mdiDragVertical
+    mdiPin = mdiPin
+    mdiPinOff = mdiPinOff
 
     formatFilesize = formatFilesize
     formatPrintTime = formatPrintTime
@@ -1307,6 +1325,13 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         }
     }
 
+    pinFile(item: FileStateFile) {
+        this.$store.dispatch('gui/addPinnedFile', item.filename)
+    }
+    unPinFile(item: FileStateFile) {
+        this.$store.dispatch('gui/removePinnedFile', item.filename)
+    }
+
     editFile(item: FileStateGcodefile) {
         this.$store.dispatch('editor/openFile', {
             root: 'gcodes',
@@ -1597,4 +1622,15 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
 .handle {
     cursor: move;
 }
+
+.fileicon-container {
+    position: relative;
+}
+
+.pin {
+    position: absolute;
+    top: 0;
+    right: 0;
+    filter: drop-shadow(0 0 4px black);
+}
 </style>

src/components/panels/Status/Gcodefiles.vue

@@ -79,6 +79,14 @@
             @closeDialog="closeDialog" />
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
+                <v-list-item v-if="!contextMenu.item.isPinned" @click="pinFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPin }}</v-icon>
+                    {{ $t('Files.Pin') }}
+                </v-list-item>
+                <v-list-item v-else @click="unPinFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPinOff }}</v-icon>
+                    {{ $t('Files.Unpin') }}
+                </v-list-item>
                 <v-list-item :disabled="printerIsPrinting || !klipperReadyForGui" @click="showDialog(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlay }}</v-icon>
                     {{ $t('Files.PrintStart') }}
@@ -228,7 +236,7 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
-import { FileStateGcodefile } from '@/store/files/types'
+import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
 import {
     mdiChevronDown,
@@ -243,6 +251,8 @@ import {
     mdiRenameBox,
     mdiDelete,
     mdiCloseThick,
+    mdiPin,
+    mdiPinOff,
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
@@ -278,6 +288,8 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
     mdiRenameBox = mdiRenameBox
     mdiDelete = mdiDelete
     mdiCloseThick = mdiCloseThick
+    mdiPin = mdiPin
+    mdiPinOff = mdiPinOff
 
     private deleteDialog = false
     private showDialogBool = false
@@ -499,6 +511,14 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         window.open(href)
     }
 
+    pinFile(item: FileStateFile) {
+        this.$store.dispatch('gui/addPinnedFile', item.filename)
+    }
+
+    unPinFile(item: FileStateFile) {
+        this.$store.dispatch('gui/removePinnedFile', item.filename)
+    }
+
     editFile(item: FileStateGcodefile) {
         const pos = item.filename.lastIndexOf('/')
         const path = pos > 0 ? item.filename.slice(0, pos + 1) : ''