feat: show playlist update time in settings dialog

Author: maxirmx

src/components/Playlist_Settings.vue

@@ -20,6 +20,7 @@ import { showFormValidationErrors } from '@/helpers/form.validation.alert.js'
 import { createAccountOptions } from '@/helpers/account.options.js'
 import { compareMediaInfo, createFileSizeSearchTokens, formatDuration, formatFileSize } from '@/helpers/media.format.js'
 import { itemsPerPageOptions } from '@/helpers/items.per.page.js'
+import { formatRuDateTime } from '@/helpers/date.format.js'
 import { getVideoCategoryTitle } from '@/helpers/video.scope.helpers.js'
 import {
   duplicatePlaylistDescriptionFallbackMessage,
@@ -59,7 +60,9 @@ const { videoPreview } = storeToRefs(videosStore)
 const playlist = ref({
   title: '',
   filename: '',
-  accountId: props.accountId ?? null
+  accountId: props.accountId ?? null,
+  createdAt: null,
+  updatedAt: null
 })
 
 function generatePlaylistFilename() {
@@ -256,6 +259,8 @@ const someVisiblePlaylistItemsSelected = computed(() => (
 const playlistButtonText = computed(() => (props.register ? 'Создать' : 'Сохранить'))
 const playlistTitleText = computed(() => (props.register ? 'Новый плейлист' : 'Настройки плейлиста' ))
 const formKey = computed(() => `${props.register ? 'create' : 'edit'}-${playlist.value.accountId ?? 'none'}`)
+const createdAtText = computed(() => formatRuDateTime(playlist.value.createdAt))
+const updatedAtText = computed(() => formatRuDateTime(playlist.value.updatedAt))
 const faCheckDouble = 'fa-solid fa-check-double'
 const faXmark = 'fa-solid fa-xmark'
 
@@ -296,7 +301,9 @@ if (!props.register) {
     playlist.value = {
       title: loadedPlaylist.title || '',
       filename: loadedPlaylist.filename || '',
-      accountId: loadedPlaylist.accountId ?? null
+      accountId: loadedPlaylist.accountId ?? null,
+      createdAt: loadedPlaylist.createdAt ?? null,
+      updatedAt: loadedPlaylist.updatedAt ?? null
     }
     playlistItems.value = normalizePlaylistItems(loadedPlaylist.items)
   } catch (err) {
@@ -728,6 +735,13 @@ function onInvalidSubmit(context) {
         />
       </div>
 
+      <div v-if="!props.register" class="form-group">
+        <label class="label-1">Создан / изменён:</label>
+        <div class="form-control input-1 playlist-readonly-value playlist-timestamps-inline" data-test="playlist-timestamps">
+          <span data-test="playlist-created-updated-at">{{ createdAtText }} / {{ updatedAtText }}</span>
+        </div>
+      </div>
+
       <div class="playlist-columns">
         <div class="playlist-column">
           <div class="playlist-column-header header-with-actions">
@@ -1121,6 +1135,18 @@ function onInvalidSubmit(context) {
   color: var(--primary-color-dark);
 }
 
+.playlist-readonly-value {
+  background-color: #f8f9fa;
+}
+
+.playlist-timestamps-inline {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+
 @media (max-width: 1100px) {
   .playlist-columns {
     grid-template-columns: 1fr;

src/components/Playlists_List.vue

@@ -46,7 +46,7 @@ const selectWidth = computed(() => estimateSelectWidth(accountOptions.value))
 const isBusy = computed(() => loading.value || accountsLoading.value)
 const playlistItems = computed(() => (playlists.value || []).map(playlist => ({
   ...playlist,
-  updatedAtSortKey: getPlaylistTimestamp(playlist)
+  updatedAtSortKey: getPlaylistSortTimestamp(playlist)
 })))
 
 function ensureSelection(options) {
@@ -99,19 +99,24 @@ function filterPlaylists(value, query, item) {
   return [
     rawPlaylist.title,
     rawPlaylist.filename,
+    formatPlaylistCreatedAt(rawPlaylist),
     formatPlaylistUpdatedAt(rawPlaylist),
     ...createFileSizeSearchTokens(rawPlaylist.totalFileSizeBytes),
     rawPlaylist.totalDurationSeconds,
     rawPlaylist.videoCount
   ].some(field => (field || '').toString().toLocaleLowerCase().includes(q))
 }
 
-function getPlaylistTimestamp(item) {
+function getPlaylistSortTimestamp(item) {
   return item?.updatedAt || item?.createdAt || null
 }
 
+function formatPlaylistCreatedAt(item) {
+  return formatRuDateTime(item?.createdAt)
+}
+
 function formatPlaylistUpdatedAt(item) {
-  return formatRuDateTime(getPlaylistTimestamp(item))
+  return formatRuDateTime(item?.updatedAt)
 }
 
 function createPlaylist() {
@@ -203,7 +208,10 @@ async function deletePlaylist(item) {
           {{ formatFileSize(item.totalFileSizeBytes) }}
         </template>
         <template v-slot:[`item.updatedAtSortKey`]="{ item }">
-          {{ formatPlaylistUpdatedAt(item) }}
+          <div class="playlist-timestamps-cell">
+            <div>{{ formatPlaylistCreatedAt(item) }}</div>
+            <div>{{ formatPlaylistUpdatedAt(item) }}</div>
+          </div>
         </template>
         <template v-slot:[`item.totalDurationSeconds`]="{ item }">
           {{ formatDuration(item.totalDurationSeconds) }}
@@ -232,3 +240,13 @@ async function deletePlaylist(item) {
     </v-card>
   </div>
 </template>
+
+<style scoped>
+.playlist-timestamps-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.2;
+}
+
+</style>

tests/Playlist_Settings.spec.js

@@ -1570,6 +1570,24 @@ describe('Playlist_Settings.vue', () => {
     expect(wrapper.find('[data-test="form"]').exists()).toBe(true)
   })
 
+  it('shows read-only created and updated timestamps on one line below title in edit mode', async () => {
+    playlistsStore.playlist = {
+      id: 9,
+      title: 'Existing',
+      filename: 'existing.m3u',
+      accountId: 1,
+      createdAt: '2026-06-23T10:00:00',
+      updatedAt: '2026-06-24T12:15:30',
+      items: []
+    }
+
+    const wrapper = mountSettings({ register: false, id: 9 })
+    await flushPromises()
+
+    expect(wrapper.find('[data-test="playlist-timestamps"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="playlist-created-updated-at"]').text()).toContain('23.06.2026, 10:00:00 / 24.06.2026, 12:15:30')
+  })
+
   it('error objects without message property use the error itself as the message', async () => {
     videosStore.getAllByAccount = vi.fn().mockRejectedValue({ code: 'ERR_NETWORK' })
     mountSettings({ accountId: 1 })

tests/Playlists_List.spec.js

@@ -177,7 +177,7 @@ describe('Playlists_List.vue', () => {
     expect(wrapper.text()).toContain('1:05')
   })
 
-  it('renders updated playlist timestamp column', async () => {
+  it('renders created and updated playlist timestamps in one column', async () => {
     playlistsStore.playlists.value = [{
       id: 2,
       updatedAt: '2026-06-24T12:15:30',
@@ -187,11 +187,13 @@ describe('Playlists_List.vue', () => {
     await flushPromises()
 
     expect(wrapper.find('[data-test="table-header-updatedAtSortKey"]').text()).toBe('Создан/Изменён')
+    expect(wrapper.text()).toContain('23.06.2026')
+    expect(wrapper.text()).toContain('10:00:00')
     expect(wrapper.text()).toContain('24.06.2026')
     expect(wrapper.text()).toContain('12:15:30')
   })
 
-  it('falls back to created timestamp when updatedAt is missing', async () => {
+  it('keeps created timestamp visible when updatedAt is missing', async () => {
     playlistsStore.playlists.value = [{
       id: 3,
       updatedAt: null,
@@ -202,16 +204,26 @@ describe('Playlists_List.vue', () => {
 
     expect(wrapper.text()).toContain('23.06.2026')
     expect(wrapper.text()).toContain('10:05:40')
+    expect(wrapper.text()).toContain('—')
   })
 
-  it('matches playlist search against formatted timestamp', async () => {
+  it('matches playlist search against formatted created and updated timestamps', async () => {
     const wrapper = mount(PlaylistsList, { global: { stubs: globalStubs } })
     await flushPromises()
 
+    expect(wrapper.vm.filterPlaylists(null, '23.06.2026', {
+      raw: {
+        title: 'Playlist',
+        filename: 'playlist.m3u',
+        createdAt: '2026-06-23T10:00:00',
+        updatedAt: '2026-06-24T12:15:30'
+      }
+    })).toBe(true)
     expect(wrapper.vm.filterPlaylists(null, '24.06.2026', {
       raw: {
         title: 'Playlist',
         filename: 'playlist.m3u',
+        createdAt: '2026-06-23T10:00:00',
         updatedAt: '2026-06-24T12:15:30'
       }
     })).toBe(true)