Repository: directus/directus
File: app/src/modules/content/routes/item.vue (Vue)

Code before:
<script setup lang="ts">
import { useEditsGuard } from '@/composables/use-edits-guard';
import { useItem } from '@/composables/use-item';
import { useLocalStorage } from '@/composables/use-local-storage';
import { useItemPermissions } from '@/composables/use-permissions';
import { useShortcut } from '@/composables/use-shortcut';
import { useTemplateData } from '@/composables/use-template-data';
import { useVersions } from '@/composables/use-versions';
import { useFlows } from '@/composables/use-flows';
import { useUserStore } from '@/stores/user';
import { getCollectionRoute, getItemRoute } from '@/utils/get-route';
import { renderStringTemplate } from '@/utils/render-string-template';
import { translateShortcut } from '@/utils/translate-shortcut';
import PrivateView from '@/views/private';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
import FlowSidebarDetail from '@/views/private/components/flow-sidebar-detail.vue';
import LivePreview from '@/views/private/components/live-preview.vue';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail.vue';
import SaveOptions from '@/views/private/components/save-options.vue';
import SharesSidebarDetail from '@/views/private/components/shares-sidebar-detail.vue';
import FlowDialogs from '@/views/private/components/flow-dialogs.vue';
import { useCollection } from '@directus/composables';
import type { PrimaryKey } from '@directus/types';
import { useHead } from '@unhead/vue';
import { computed, onBeforeUnmount, ref, toRefs, unref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import ContentNavigation from '../components/navigation.vue';
import VersionMenu from '../components/version-menu.vue';

Review comment (suggestion):
We should do this localStorage update across the board. I've created https://github.com/directus/directus/issues/26256 to track

Code after:
<script setup lang="ts">
import { useEditsGuard } from '@/composables/use-edits-guard';
import { useItem } from '@/composables/use-item';
import { useLocalStorage, useBreakpoints, breakpointsTailwind } from '@vueuse/core';
import { useItemPermissions } from '@/composables/use-permissions';
import { useShortcut } from '@/composables/use-shortcut';
import { useTemplateData } from '@/composables/use-template-data';
import { useVersions } from '@/composables/use-versions';
import { useFlows } from '@/composables/use-flows';
import { useUserStore } from '@/stores/user';
import { getCollectionRoute, getItemRoute } from '@/utils/get-route';
import { renderStringTemplate } from '@/utils/render-string-template';
import { translateShortcut } from '@/utils/translate-shortcut';
import PrivateView from '@/views/private';
import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
import FlowSidebarDetail from '@/views/private/components/flow-sidebar-detail.vue';
import LivePreview from '@/views/private/components/live-preview.vue';
import RevisionsSidebarDetail from '@/views/private/components/revisions-sidebar-detail.vue';
import SaveOptions from '@/views/private/components/save-options.vue';
import SharesSidebarDetail from '@/views/private/components/shares-sidebar-detail.vue';
import FlowDialogs from '@/views/private/components/flow-dialogs.vue';
import { useCollection } from '@directus/composables';
import type { PrimaryKey } from '@directus/types';
import { SplitPanel } from '@directus/vue-split-panel';
import { useHead } from '@unhead/vue';
import PrivateViewResizeHandle from '@/views/private/private-view/components/private-view-resize-handle.vue';
import { computed, onBeforeUnmount, provide, ref, toRefs, unref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';