From 0441e4b73dd4de30708a6cf2860f878e6654efb4 Mon Sep 17 00:00:00 2001
From: Arno Pigeon <git@sysody.eu>
Date: Mon, 11 Dec 2023 18:10:10 +0100
Subject: [PATCH 1/3] feat: pin files to top of gcode files list

Add the ability to pin gcode files to top of dashboard file panel and gcode files view

Signed-off-by: Arno Pigeon <git@sysody.eu>
---
 src/components/panels/GcodefilesPanel.vue   | 24 +++++++++++++++++
 src/components/panels/Status/Gcodefiles.vue | 30 +++++++++++++++++++--
 src/plugins/helpers.ts                      |  3 +++
 src/store/files/actions.ts                  |  2 ++
 src/store/files/getters.ts                  |  2 ++
 src/store/files/types.ts                    |  1 +
 src/store/gui/actions.ts                    | 16 +++++++++++
 src/store/gui/index.ts                      |  1 +
 src/store/gui/mutations.ts                  | 10 +++++++
 src/store/gui/types.ts                      |  1 +
 10 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index bd903e684..78a960322 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -239,6 +239,9 @@
                             <template v-if="item.isDirectory">
                                 <v-icon>{{ mdiFolder }}</v-icon>
                             </template>
+                            <template v-else-if="item.isPinned">
+                                <v-icon>{{ mdiPin }}</v-icon>
+                            </template>
                             <template v-else-if="item.small_thumbnail">
                                 <v-tooltip
                                     top
@@ -311,6 +314,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>
+                    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>
+                    Unpin
+                </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory"
                     :disabled="printerIsPrinting || !klipperReadyForGui || !isGcodeFile(contextMenu.item)"
@@ -652,6 +665,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 +740,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 +1324,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',
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
index b65a32e48..827cd4f6e 100644
--- a/src/components/panels/Status/Gcodefiles.vue
+++ b/src/components/panels/Status/Gcodefiles.vue
@@ -4,6 +4,7 @@
             :items="gcodeFiles"
             hide-default-footer
             class="dashboard-gcodes-table"
+            :custom-sort="sortFiles"
             sort-by="time_added"
             mobile-breakpoint="0"
             @current-items="setFirst">
@@ -19,7 +20,10 @@
                     @contextmenu="showContextMenu($event, item)"
                     @click="showDialog(item)">
                     <td class="pr-0 text-center" style="width: 32px">
-                        <template v-if="item.small_thumbnail">
+                        <template v-if="item.isPinned">
+                            <v-icon>{{ mdiPin }}</v-icon>
+                        </template>
+                        <template v-else-if="item.small_thumbnail">
                             <v-tooltip
                                 top
                                 content-class="tooltip__content-opacity1"
@@ -79,6 +83,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>
+                    Pin
+                </v-list-item>
+                <v-list-item v-else @click="unPinFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPinOff }}</v-icon>
+                    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 +240,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,9 +255,12 @@ import {
     mdiRenameBox,
     mdiDelete,
     mdiCloseThick,
+    mdiPin,
+    mdiPinOff,
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
+import { sortFiles } from '@/plugins/helpers'
 
 interface dialogRenameObject {
     show: boolean
@@ -260,6 +275,7 @@ interface dialogAddBatchToQueue {
 }
 
 @Component({
+    methods: { sortFiles },
     components: {
         Panel,
         StartPrintDialog,
@@ -278,6 +294,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 +517,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) : ''
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 7f4c89b31..b979dce1c 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -160,6 +160,9 @@ export const sortFiles = (items: FileStateFile[] | null, sortBy: string[], sortD
 
         // Then make sure directories come first
         items.sort((a: any, b: any) => (a.isDirectory === b.isDirectory ? 0 : a.isDirectory ? -1 : 1))
+
+        // Place pinned files on top
+        items.sort((a: any, b: any) => (a.isPinned === b.isPinned ? 0 : a.isPinned ? -1 : 1))
     }
 
     return items ?? []
diff --git a/src/store/files/actions.ts b/src/store/files/actions.ts
index a67e1f114..73dddcf44 100644
--- a/src/store/files/actions.ts
+++ b/src/store/files/actions.ts
@@ -11,6 +11,7 @@ import { RootState } from '@/store/types'
 import i18n from '@/plugins/i18n'
 import { hiddenDirectories, validGcodeExtensions } from '@/store/variables'
 import axios from 'axios'
+import store from '@/store'
 
 export const actions: ActionTree<FileState, RootState> = {
     reset({ commit }) {
@@ -279,6 +280,7 @@ export const actions: ActionTree<FileState, RootState> = {
         if (payload.error) {
             Vue.$toast.error(payload.error.message)
         } else {
+            store.dispatch('gui/removePinnedFile', payload.item.path)
             const delPath = payload.item.path.substr(payload.item.path.lastIndexOf('/') + 1)
             const fileExtension = payload.item.path.substr(payload.item.path.lastIndexOf('.') + 1)
 
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
index 829d01db1..936868450 100644
--- a/src/store/files/getters.ts
+++ b/src/store/files/getters.ts
@@ -8,6 +8,7 @@ import {
 import { GetterTree } from 'vuex'
 import { FileState, FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
+import store from '@/store'
 
 // eslint-disable-next-line
 export const getters: GetterTree<FileState, any> = {
@@ -183,6 +184,7 @@ export const getters: GetterTree<FileState, any> = {
                     }
                 }
 
+                tmp.isPinned = store?.state?.gui?.view.gcodefiles.pinnedFiles.some((f) => f === tmp.filename) || false
                 if (boolShowPrintedFiles) output.push(tmp)
                 else if (tmp.count_printed === 0) output.push(tmp)
             })
diff --git a/src/store/files/types.ts b/src/store/files/types.ts
index 55197c159..23c593526 100644
--- a/src/store/files/types.ts
+++ b/src/store/files/types.ts
@@ -43,6 +43,7 @@ export interface FileStateFile {
 }
 
 export interface FileStateGcodefile extends FileStateFile {
+    isPinned?: boolean
     preheat_gcode: string | null
     small_thumbnail: string | null
     big_thumbnail: string | null
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index ea4dd7363..9ee81338d 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -199,6 +199,22 @@ export const actions: ActionTree<GuiState, RootState> = {
         Vue.$socket.emit('server.database.post_item', { namespace: 'mainsail', key: keyName, value: newState })
     },
 
+    addPinnedFile({ commit, dispatch, state }, value) {
+        commit('addPinnedFile', value)
+        dispatch('updateSettings', {
+            keyName: 'gcodefiles.pinnedFiles',
+            newVal: state.view.gcodefiles.pinnedFiles,
+        })
+    },
+
+    removePinnedFile({ commit, dispatch, state }, value) {
+        commit('removePinnedFile', value)
+        dispatch('updateSettings', {
+            keyName: 'gcodefiles.pinnedFiles',
+            newVal: state.view.gcodefiles.pinnedFiles,
+        })
+    },
+
     setGcodefilesMetadata({ commit, dispatch, state }, data) {
         commit('setGcodefilesMetadata', data)
         dispatch('updateSettings', {
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index f1c095b12..67e08dbd4 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -206,6 +206,7 @@ export const getDefaultState = (): GuiState => {
                 ],
                 currentPath: '',
                 selectedFiles: [],
+                pinnedFiles: [],
             },
             heightmap: {
                 probed: true,
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index 2fcc87e50..2be0a8f34 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -43,6 +43,16 @@ export const mutations: MutationTree<GuiState> = {
         Vue.set(state.view.gcodefiles, 'hideMetadataColumns', array)
     },
 
+    addPinnedFile(state, value) {
+        const array = [value, ...state.view.gcodefiles.pinnedFiles]
+        Vue.set(state.view.gcodefiles, 'pinnedFiles', array)
+    },
+
+    removePinnedFile(state, value) {
+        const array = state.view.gcodefiles.pinnedFiles.filter((n) => n !== value)
+        Vue.set(state.view.gcodefiles, 'pinnedFiles', array)
+    },
+
     setGcodefilesShowHiddenFiles(state, value) {
         Vue.set(state.view.gcodefiles, 'showHiddenFiles', value)
     },
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 0555ebc4b..3122373e5 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -142,6 +142,7 @@ export interface GuiState {
             orderMetadataColumns: string[]
             currentPath: string
             selectedFiles: FileStateGcodefile[]
+            pinnedFiles: string[]
         }
         heightmap: {
             probed: boolean

From 3a0349975087904d3c039cfcd61acec5991b8db1 Mon Sep 17 00:00:00 2001
From: Arno Pigeon <git@sysody.eu>
Date: Wed, 13 Dec 2023 23:31:37 +0100
Subject: [PATCH 2/3] feat: pin files to top of gcode files list

Add translation support

Signed-off-by: Arno Pigeon <git@sysody.eu>
---
 src/components/panels/GcodefilesPanel.vue   | 4 ++--
 src/components/panels/Status/Gcodefiles.vue | 4 ++--
 src/locales/en.json                         | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 78a960322..564d43c5f 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -318,11 +318,11 @@
                     v-if="!contextMenu.item.isPinned && !contextMenu.item.isDirectory"
                     @click="pinFile(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPin }}</v-icon>
-                    Pin
+                    {{ $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>
-                    Unpin
+                    {{ $t('Files.Unpin') }}
                 </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory"
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
index 827cd4f6e..cd84fc185 100644
--- a/src/components/panels/Status/Gcodefiles.vue
+++ b/src/components/panels/Status/Gcodefiles.vue
@@ -85,11 +85,11 @@
             <v-list>
                 <v-list-item v-if="!contextMenu.item.isPinned" @click="pinFile(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPin }}</v-icon>
-                    Pin
+                    {{ $t('Files.Pin') }}
                 </v-list-item>
                 <v-list-item v-else @click="unPinFile(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPinOff }}</v-icon>
-                    Unpin
+                    {{ $t('Files.Unpin') }}
                 </v-list-item>
                 <v-list-item :disabled="printerIsPrinting || !klipperReadyForGui" @click="showDialog(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlay }}</v-icon>
diff --git a/src/locales/en.json b/src/locales/en.json
index e62fb45a2..54427a36f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -221,6 +221,7 @@
         "NewDirectory": "New Directory",
         "NozzleDiameter": "Nozzle Diameter",
         "ObjectHeight": "Object Height",
+        "Pin": "Pin",
         "Preheat": "Preheat",
         "PrintedFiles": "Printed files",
         "PrintStart": "Print start",
@@ -240,6 +241,7 @@
         "SuccessfullyRenamed": "Successfully renamed {filename}.",
         "SuccessfullyUploaded": "Upload of {filename} successful!",
         "Total": "Total",
+        "Unpin": "Unpin",
         "UploadNewGcode": "Upload new G-Code",
         "Used": "Used",
         "View3D": "View 3D"

From 3756ed351d3a87404adb01a7aa9149bf4c4d4b5a Mon Sep 17 00:00:00 2001
From: Arno Pigeon <git@sysody.eu>
Date: Mon, 18 Dec 2023 18:15:52 +0100
Subject: [PATCH 3/3] feat: pin files to top of gcode files list

Icons for dashboard status card
Separated pinned files tab
Small pin icon without overriding preview thumbnails

Signed-off-by: Arno Pigeon <git@sysody.eu>
---
 src/components/panels/GcodefilesPanel.vue     |  20 +-
 src/components/panels/Status/Gcodefiles.vue   |   8 +-
 .../panels/Status/PinnedGcodefiles.vue        | 593 ++++++++++++++++++
 src/components/panels/StatusPanel.vue         |  29 +-
 4 files changed, 634 insertions(+), 16 deletions(-)
 create mode 100644 src/components/panels/Status/PinnedGcodefiles.vue

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 564d43c5f..46ab7d926 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -235,13 +235,10 @@
                                 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>
-                            <template v-else-if="item.isPinned">
-                                <v-icon>{{ mdiPin }}</v-icon>
-                            </template>
                             <template v-else-if="item.small_thumbnail">
                                 <v-tooltip
                                     top
@@ -274,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">
@@ -1621,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>
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
index cd84fc185..16351805f 100644
--- a/src/components/panels/Status/Gcodefiles.vue
+++ b/src/components/panels/Status/Gcodefiles.vue
@@ -4,7 +4,6 @@
             :items="gcodeFiles"
             hide-default-footer
             class="dashboard-gcodes-table"
-            :custom-sort="sortFiles"
             sort-by="time_added"
             mobile-breakpoint="0"
             @current-items="setFirst">
@@ -20,10 +19,7 @@
                     @contextmenu="showContextMenu($event, item)"
                     @click="showDialog(item)">
                     <td class="pr-0 text-center" style="width: 32px">
-                        <template v-if="item.isPinned">
-                            <v-icon>{{ mdiPin }}</v-icon>
-                        </template>
-                        <template v-else-if="item.small_thumbnail">
+                        <template v-if="item.small_thumbnail">
                             <v-tooltip
                                 top
                                 content-class="tooltip__content-opacity1"
@@ -260,7 +256,6 @@ import {
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
-import { sortFiles } from '@/plugins/helpers'
 
 interface dialogRenameObject {
     show: boolean
@@ -275,7 +270,6 @@ interface dialogAddBatchToQueue {
 }
 
 @Component({
-    methods: { sortFiles },
     components: {
         Panel,
         StartPrintDialog,
diff --git a/src/components/panels/Status/PinnedGcodefiles.vue b/src/components/panels/Status/PinnedGcodefiles.vue
new file mode 100644
index 000000000..61982c34e
--- /dev/null
+++ b/src/components/panels/Status/PinnedGcodefiles.vue
@@ -0,0 +1,593 @@
+<template>
+    <v-card ref="filesGcodeCard" class="filesGcodeCard" flat>
+        <v-data-table
+            :items="gcodeFiles"
+            hide-default-footer
+            class="dashboard-gcodes-table"
+            sort-by="time_added"
+            mobile-breakpoint="0"
+            @current-items="setFirst">
+            <template #no-data>
+                <div class="text-center">{{ $t('Panels.StatusPanel.EmptyGcodes') }}</div>
+            </template>
+
+            <template #item="{ item }">
+                <tr
+                    :key="item.filename"
+                    v-longpress:600="(e) => showContextMenu(e, item)"
+                    class="cursor-pointer"
+                    @contextmenu="showContextMenu($event, item)"
+                    @click="showDialog(item)">
+                    <td class="pr-0 text-center" style="width: 32px">
+                        <template v-if="item.small_thumbnail">
+                            <v-tooltip
+                                top
+                                content-class="tooltip__content-opacity1"
+                                :disabled="!item.big_thumbnail"
+                                :color="bigThumbnailTooltipColor">
+                                <template #activator="{ on, attrs }">
+                                    <vue-load-image class="d-flex">
+                                        <img
+                                            slot="image"
+                                            :src="item.small_thumbnail"
+                                            :alt="item.filename"
+                                            width="32"
+                                            height="32"
+                                            v-bind="attrs"
+                                            v-on="on" />
+                                        <div slot="preloader">
+                                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+                                        </div>
+                                        <div slot="error">
+                                            <v-icon>{{ mdiFile }}</v-icon>
+                                        </div>
+                                    </vue-load-image>
+                                </template>
+                                <span><img :src="item.big_thumbnail" :alt="item.filename" width="250" /></span>
+                            </v-tooltip>
+                        </template>
+                        <template v-else>
+                            <v-icon>{{ mdiFile }}</v-icon>
+                        </template>
+                    </td>
+                    <td class="pr-2">
+                        <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
+                        <div v-if="existMetadata(item)">
+                            <small>{{ getDescription(item) }}</small>
+                        </div>
+                    </td>
+                    <td>
+                        <v-tooltip v-if="item.last_status" top>
+                            <template #activator="{ on, attrs }">
+                                <span v-bind="attrs" v-on="on">
+                                    <v-icon small :color="getStatusColor(item.last_status)">
+                                        {{ getStatusIcon(item.last_status) }}
+                                    </v-icon>
+                                </span>
+                            </template>
+                            <span>{{ item.last_status.replace(/_/g, ' ') }}</span>
+                        </v-tooltip>
+                    </td>
+                </tr>
+            </template>
+        </v-data-table>
+        <resize-observer @notify="handleResize" />
+        <start-print-dialog
+            :bool="showDialogBool"
+            :file="dialogFile"
+            :current-path="currentPath"
+            @closeDialog="closeDialog" />
+        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <v-list>
+                <v-list-item @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') }}
+                </v-list-item>
+                <v-list-item v-if="moonrakerComponents.includes('job_queue')" @click="addToQueue(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddToQueue') }}
+                </v-list-item>
+                <v-list-item
+                    v-if="moonrakerComponents.includes('job_queue')"
+                    @click="openAddBatchToQueueDialog(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddBatchToQueue') }}
+                </v-list-item>
+                <v-list-item
+                    v-if="contextMenu.item.preheat_gcode !== null"
+                    :disabled="['error', 'printing', 'paused'].includes(printer_state)"
+                    @click="doSend(contextMenu.item.preheat_gcode)">
+                    <v-icon class="mr-1">{{ mdiFire }}</v-icon>
+                    {{ $t('Files.Preheat') }}
+                </v-list-item>
+                <v-list-item @click="view3D(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiVideo3d }}</v-icon>
+                    {{ $t('Files.View3D') }}
+                </v-list-item>
+                <v-list-item @click="downloadFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiCloudDownload }}</v-icon>
+                    {{ $t('Files.Download') }}
+                </v-list-item>
+                <v-list-item @click="editFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiFileDocumentEditOutline }}</v-icon>
+                    {{ $t('Files.EditFile') }}
+                </v-list-item>
+                <v-list-item @click="renameFile(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiRenameBox }}</v-icon>
+                    {{ $t('Files.Rename') }}
+                </v-list-item>
+                <v-list-item class="red--text" @click="deleteDialog = true">
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
+                    {{ $t('Files.Delete') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
+        <v-dialog v-model="dialogRenameFile.show" :max-width="400">
+            <panel
+                :title="$t('Files.RenameFile')"
+                card-class="dashboard-files-rename-file-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="dialogRenameFile.show = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text>
+                    <v-text-field
+                        ref="inputFieldRenameFile"
+                        v-model="dialogRenameFile.newName"
+                        :label="$t('Files.Name')"
+                        required
+                        @keyup.enter="renameFileAction"></v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="dialogRenameFile.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="renameFileAction">{{ $t('Files.Rename') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+
+        <!-- CONFIRM DELETE FILE DIALOG -->
+        <v-dialog v-model="deleteDialog" max-width="400">
+            <panel :title="$t('Files.Delete')" card-class="gcode-files-delete-dialog" :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="deleteDialog = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text>
+                    <p class="mb-0">
+                        {{ $t('Files.DeleteSingleFileQuestion', { name: filename }) }}
+                    </p>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="deleteDialog = false">
+                        {{ $t('Files.Cancel') }}
+                    </v-btn>
+                    <v-btn color="error" text @click="removeFile">
+                        {{ $t('Files.Delete') }}
+                    </v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+
+        <v-dialog v-model="dialogAddBatchToQueue.show" max-width="400">
+            <panel
+                :title="$t('Files.AddToQueue')"
+                card-class="gcode-files-add-to-queue-dialog"
+                :icon="mdiPlaylistPlus"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="dialogAddBatchToQueue.show = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-card-text>
+                    <v-text-field
+                        ref="inputFieldAddToQueueCount"
+                        v-model="dialogAddBatchToQueue.count"
+                        :label="$t('Files.Count')"
+                        required
+                        hide-spin-buttons
+                        type="number"
+                        :rules="countInputRules"
+                        @keyup.enter="addBatchToQueueAction">
+                        <template #append-outer>
+                            <div class="_spin_button_group">
+                                <v-btn class="mt-n3" icon plain small @click="dialogAddBatchToQueue.count++">
+                                    <v-icon>{{ mdiChevronUp }}</v-icon>
+                                </v-btn>
+                                <v-btn
+                                    :disabled="dialogAddBatchToQueue.count <= 1"
+                                    class="mb-n3"
+                                    icon
+                                    plain
+                                    small
+                                    @click="dialogAddBatchToQueue.count--">
+                                    <v-icon>{{ mdiChevronDown }}</v-icon>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="dialogAddBatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="addBatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+    </v-card>
+</template>
+
+<script lang="ts">
+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 { FileStateFile, FileStateGcodefile } from '@/store/files/types'
+import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
+import {
+    mdiChevronDown,
+    mdiChevronUp,
+    mdiFile,
+    mdiPlay,
+    mdiPlaylistPlus,
+    mdiFire,
+    mdiVideo3d,
+    mdiCloudDownload,
+    mdiFileDocumentEditOutline,
+    mdiRenameBox,
+    mdiDelete,
+    mdiCloseThick,
+    mdiPinOff,
+} from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
+import { defaultBigThumbnailBackground } from '@/store/variables'
+
+interface dialogRenameObject {
+    show: boolean
+    newName: string
+    item: FileStateGcodefile
+}
+
+interface dialogAddBatchToQueue {
+    show: boolean
+    count: number
+    item: FileStateGcodefile
+}
+
+@Component({
+    components: {
+        Panel,
+        StartPrintDialog,
+    },
+})
+export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixin) {
+    mdiChevronDown = mdiChevronDown
+    mdiChevronUp = mdiChevronUp
+    mdiFile = mdiFile
+    mdiPlay = mdiPlay
+    mdiPlaylistPlus = mdiPlaylistPlus
+    mdiFire = mdiFire
+    mdiVideo3d = mdiVideo3d
+    mdiCloudDownload = mdiCloudDownload
+    mdiFileDocumentEditOutline = mdiFileDocumentEditOutline
+    mdiRenameBox = mdiRenameBox
+    mdiDelete = mdiDelete
+    mdiCloseThick = mdiCloseThick
+    mdiPinOff = mdiPinOff
+
+    private deleteDialog = false
+    private showDialogBool = false
+    private dialogFile: FileStateGcodefile = {
+        isDirectory: false,
+        filename: '',
+        modified: new Date(),
+        permissions: '',
+        small_thumbnail: null,
+        big_thumbnail: null,
+        big_thumbnail_width: null,
+        count_printed: 0,
+        last_end_time: null,
+        last_filament_used: null,
+        last_print_duration: null,
+        last_status: null,
+        last_start_time: null,
+        last_total_duration: null,
+        preheat_gcode: null,
+    }
+    private currentPath = ''
+    private contentTdWidth = 100
+
+    declare $refs: {
+        filesGcodeCard: any
+        inputFieldRenameFile: HTMLInputElement
+    }
+
+    private contextMenu = {
+        shown: false,
+        touchTimer: undefined,
+        x: 0,
+        y: 0,
+        item: { ...this.dialogFile },
+    }
+
+    private dialogRenameFile: dialogRenameObject = {
+        show: false,
+        newName: '',
+        item: { ...this.dialogFile },
+    }
+
+    private dialogAddBatchToQueue: dialogAddBatchToQueue = {
+        show: false,
+        count: 1,
+        item: { ...this.contextMenu.item },
+    }
+
+    private countInputRules = [
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+    ]
+
+    get gcodeFiles() {
+        let gcodes = this.$store.getters['files/getAllGcodes'] ?? []
+        let pinnedFilenames = this.$store.state.gui.view.gcodefiles.pinnedFiles
+        gcodes = gcodes
+            .slice()
+            .sort((a: FileStateGcodefile, b: FileStateGcodefile) => {
+                return b.modified.getTime() - a.modified.getTime()
+            })
+            .filter((f: FileStateGcodefile) => pinnedFilenames.includes(f.filename))
+
+        const requestItems = gcodes.filter(
+            (file: FileStateGcodefile) => !file.metadataRequested && !file.metadataPulled
+        )
+
+        requestItems.forEach((file: FileStateGcodefile) => {
+            this.$store.dispatch('files/requestMetadata', {
+                filename: 'gcodes/' + file.filename,
+            })
+        })
+
+        return gcodes
+    }
+
+    get filename() {
+        const filename = this.contextMenu.item.filename.split('/')
+        return filename[filename.length - 1]
+    }
+
+    get styleContentTdWidth() {
+        return `width: ${this.contentTdWidth}px;`
+    }
+
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailTooltipColor() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return undefined
+        }
+
+        return this.bigThumbnailBackground
+    }
+
+    showContextMenu(e: any, item: FileStateGcodefile) {
+        if (!this.contextMenu.shown) {
+            e?.preventDefault()
+            this.contextMenu.shown = true
+            this.contextMenu.x = e?.clientX || e?.pageX || window.screenX / 2
+            this.contextMenu.y = e?.clientY || e?.pageY || window.screenY / 2
+            this.contextMenu.item = item
+            this.$nextTick(() => {
+                this.contextMenu.shown = true
+            })
+        }
+    }
+
+    getDescription(item: FileStateGcodefile) {
+        let output = ''
+
+        output += this.$t('Panels.StatusPanel.Filament') + ': '
+        if (item.filament_total || item.filament_weight_total) {
+            if (item.filament_total) output += item.filament_total.toFixed() + ' mm'
+            if (item.filament_total && item.filament_weight_total) output += ' / '
+            if (item.filament_weight_total) output += item.filament_weight_total.toFixed(2) + ' g'
+        } else output += '--'
+
+        output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': '
+        if (item.estimated_time) output += this.formatPrintTime(item.estimated_time)
+        else output += '--'
+
+        return output
+    }
+
+    existMetadata(item: FileStateGcodefile) {
+        return item?.metadataPulled
+    }
+
+    setFirst(currItems: any) {
+        // first check that actually exists values
+        if (currItems.length) {
+            // toggle all to false
+            currItems.forEach((x: any) => (x.isFirst = false))
+            // just set first to true
+            currItems[0].isFirst = true
+        }
+    }
+
+    formatPrintTime(totalSeconds: number) {
+        if (totalSeconds) {
+            let output = ''
+
+            const days = Math.floor(totalSeconds / (3600 * 24))
+            if (days) {
+                totalSeconds %= 3600 * 24
+                output += days + 'd'
+            }
+
+            const hours = Math.floor(totalSeconds / 3600)
+            totalSeconds %= 3600
+            if (hours) output += ' ' + hours + 'h'
+
+            const minutes = Math.floor(totalSeconds / 60)
+            if (minutes) output += ' ' + minutes + 'm'
+
+            const seconds = totalSeconds % 60
+            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
+
+            return output
+        }
+
+        return '--'
+    }
+
+    getStatusIcon(status: string) {
+        return this.$store.getters['server/history/getPrintStatusIcon'](status)
+    }
+
+    getStatusColor(status: string) {
+        return this.$store.getters['server/history/getPrintStatusIconColor'](status)
+    }
+
+    showDialog(file: FileStateGcodefile) {
+        this.currentPath =
+            file.filename.lastIndexOf('/') >= 0 ? '/' + file.filename.slice(0, file.filename.lastIndexOf('/')) : ''
+        this.dialogFile = { ...file }
+        if (file.filename.lastIndexOf('/') >= 0) {
+            this.dialogFile.filename = file.filename.slice(file.filename.lastIndexOf('/') + 1)
+        }
+        this.showDialogBool = true
+    }
+
+    closeDialog() {
+        this.showDialogBool = false
+    }
+
+    addToQueue(item: FileStateGcodefile) {
+        this.$store.dispatch('server/jobQueue/addToQueue', [item.filename])
+    }
+
+    openAddBatchToQueueDialog(item: FileStateGcodefile) {
+        this.dialogAddBatchToQueue.show = true
+        this.dialogAddBatchToQueue.count = 1
+        this.dialogAddBatchToQueue.item = item
+    }
+
+    async addBatchToQueueAction() {
+        let filename = [this.currentPath, this.dialogAddBatchToQueue.item.filename].join('/')
+        if (filename.startsWith('/')) filename = filename.slice(1)
+
+        const array: string[] = []
+        for (let i = 0; i < this.dialogAddBatchToQueue.count; i++) {
+            array.push(filename)
+        }
+
+        await this.$store.dispatch('server/jobQueue/addToQueue', array)
+
+        this.dialogAddBatchToQueue.show = false
+    }
+
+    view3D(item: FileStateGcodefile) {
+        this.$router.push({ path: '/viewer', query: { filename: 'gcodes/' + item.filename } })
+    }
+
+    downloadFile(item: FileStateGcodefile) {
+        const href = this.apiUrl + '/server/files/gcodes/' + encodeURI(item.filename)
+
+        window.open(href)
+    }
+
+    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) : ''
+        const filename = pos > 0 ? item.filename.slice(pos + 1) : item.filename
+
+        this.$store.dispatch('editor/openFile', {
+            root: 'gcodes',
+            path,
+            filename,
+            size: item.size,
+            permissions: item.permissions,
+        })
+    }
+
+    renameFile(item: FileStateGcodefile) {
+        this.dialogRenameFile.item = item
+        const pos = item.filename.lastIndexOf('/')
+        this.dialogRenameFile.newName = pos > 0 ? item.filename.slice(pos + 1) : item.filename
+        this.dialogRenameFile.show = true
+
+        setTimeout(() => {
+            this.$refs.inputFieldRenameFile?.focus()
+        }, 200)
+    }
+
+    renameFileAction() {
+        this.dialogRenameFile.show = false
+        const pos = this.dialogRenameFile.item.filename.lastIndexOf('/')
+        const path = pos > 0 ? this.dialogRenameFile.item.filename.slice(0, pos + 1) : ''
+
+        this.$socket.emit(
+            'server.files.move',
+            {
+                source: 'gcodes/' + this.dialogRenameFile.item.filename,
+                dest: 'gcodes/' + path + this.dialogRenameFile.newName,
+            },
+            { action: 'files/getMove' }
+        )
+    }
+
+    removeFile() {
+        this.$socket.emit(
+            'server.files.delete_file',
+            { path: 'gcodes/' + this.contextMenu.item.filename },
+            { action: 'files/getDeleteFile' }
+        )
+
+        this.deleteDialog = false
+    }
+
+    mounted() {
+        setTimeout(() => {
+            this.calcContentTdWidth()
+        }, 200)
+    }
+
+    calcContentTdWidth() {
+        this.contentTdWidth = this.$refs.filesGcodeCard?.$el?.clientWidth - 48 - 48 - 32
+    }
+
+    handleResize() {
+        this.$nextTick(() => {
+            this.calcContentTdWidth()
+        })
+    }
+}
+</script>
+
+<style scoped>
+.filesGcodeCard {
+    position: relative;
+}
+
+._spin_button_group {
+    width: 24px;
+    margin-top: -6px;
+    margin-left: -6px;
+    margin-bottom: -6px;
+}
+</style>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index a193f0a5b..1335d11a8 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -89,12 +89,18 @@
                 <v-divider class="mt-0 mb-0"></v-divider>
             </template>
             <v-tabs v-model="activeTab" fixed-tabs>
-                <v-tab v-if="current_filename" href="#status">{{ $t('Panels.StatusPanel.Status') }}</v-tab>
-                <v-tab href="#files">{{ $t('Panels.StatusPanel.Files') }}</v-tab>
+                <v-tab v-if="current_filename" href="#status">
+                    <v-icon>{{ mdiPrinter3d }}</v-icon>
+                </v-tab>
+                <v-tab href="#files">
+                    <v-icon>{{ mdiFile }}</v-icon>
+                </v-tab>
+                <v-tab v-if="$store.state.gui.view.gcodefiles.pinnedFiles?.length" href="#pinnedfiles">
+                    <v-icon>{{ mdiPin }}</v-icon>
+                </v-tab>
                 <v-tab href="#jobqueue">
-                    <v-badge :color="jobQueueBadgeColor" :content="jobsCount.toString()" :inline="true">
-                        {{ $t('Panels.StatusPanel.Jobqueue') }}
-                    </v-badge>
+                    <v-icon>{{ mdiFormatListCheckbox }}</v-icon>
+                    <v-badge :color="jobQueueBadgeColor" :content="jobsCount.toString()" :inline="true"></v-badge>
                 </v-tab>
             </v-tabs>
             <v-divider class="my-0"></v-divider>
@@ -105,6 +111,9 @@
                 <v-tab-item value="files">
                     <status-panel-gcodefiles />
                 </v-tab-item>
+                <v-tab-item v-if="$store.state.gui.view.gcodefiles.pinnedFiles?.length" value="pinnedfiles">
+                    <status-panel-pinned-gcodefiles />
+                </v-tab-item>
                 <v-tab-item value="jobqueue">
                     <status-panel-jobqueue />
                 </v-tab-item>
@@ -121,6 +130,7 @@ import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
 import StatusPanelPrintstatus from '@/components/panels/Status/Printstatus.vue'
 import StatusPanelGcodefiles from '@/components/panels/Status/Gcodefiles.vue'
+import StatusPanelPinnedGcodefiles from '@/components/panels/Status/PinnedGcodefiles.vue'
 import StatusPanelJobqueue from '@/components/panels/Status/Jobqueue.vue'
 import StatusPanelExcludeObject from '@/components/panels/Status/ExcludeObject.vue'
 import StatusPanelPrintstatusThumbnail from '@/components/panels/Status/PrintstatusThumbnail.vue'
@@ -139,6 +149,10 @@ import {
     mdiCloseCircle,
     mdiLayersPlus,
     mdiDotsVertical,
+    mdiFile,
+    mdiPin,
+    mdiFormatListCheckbox,
+    mdiPrinter3d,
 } from '@mdi/js'
 import { PrinterStateMacro } from '@/store/printer/types'
 
@@ -149,6 +163,7 @@ import { PrinterStateMacro } from '@/store/printer/types'
         Panel,
         StatusPanelExcludeObject,
         StatusPanelGcodefiles,
+        StatusPanelPinnedGcodefiles,
         StatusPanelJobqueue,
         StatusPanelPrintstatus,
         StatusPanelPrintstatusThumbnail,
@@ -161,6 +176,10 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     mdiCloseCircle = mdiCloseCircle
     mdiDotsVertical = mdiDotsVertical
     mdiAlertOutline = mdiAlertOutline
+    mdiPin = mdiPin
+    mdiFile = mdiFile
+    mdiFormatListCheckbox = mdiFormatListCheckbox
+    mdiPrinter3d = mdiPrinter3d
 
     private boolShowObjects = false
     private boolShowPauseAtLayer = false