[web] Improve dialog modal for directory

web-src/src/i18n/de.json

@@ -361,11 +361,13 @@
     "comment": "Kommentar",
     "composer": "Komponist",
     "duration": "Dauer",
+    "folders": "Ordner",
     "genre": "Genre",
     "genres": "Genres",
     "name": "Name",
     "owner": "Besitzer",
     "path": "Pfad",
+    "playlists": "Playlisten",
     "playtime": "Spielzeit",
     "popularity": "Popularität / Followers",
     "position": "Disc / Track",

web-src/src/i18n/en.json

@@ -361,11 +361,13 @@
     "comment": "Comment",
     "composer": "Composer",
     "duration": "Duration",
+    "folders": "Folders",
     "genre": "Genre",
     "genres": "Genres",
     "name": "Name",
     "owner": "Owner",
     "path": "Path",
+    "playlists": "Playlists",
     "playtime": "Playtime",
     "popularity": "Popularity / Followers",
     "position": "Disc / Track",

web-src/src/i18n/fr.json

@@ -361,11 +361,13 @@
     "comment": "Commentaire",
     "composer": "Compositeur",
     "duration": "Durée",
+    "folders": "Dossiers",
     "genre": "Genre",
     "genres": "Genres",
     "name": "Nom",
     "owner": "Propriétaire",
     "path": "Emplacement",
+    "playlists": "Listes de lecture",
     "playtime": "Temps de lecture",
     "popularity": "Popularité / Abonnements",
     "position": "Disque / Piste",

web-src/src/i18n/zh-CN.json

@@ -361,11 +361,13 @@
     "comment": "评论",
     "composer": "作曲家",
     "duration": "时长",
+    "folders": "文件夹",
     "genre": "流派",
     "genres": "流派",
     "name": "名称",
     "owner": "所有者",
     "path": "路径",
+    "playlists": "播放列表",
     "playtime": "总播放时长",
     "popularity": "流行度 / 粉丝数",
     "position": "盘符 / 曲目",

web-src/src/i18n/zh-TW.json

@@ -361,11 +361,13 @@
     "comment": "評論",
     "composer": "作曲家",
     "duration": "時長",
+    "folders": "檔案夾",
     "genre": "音樂類型",
     "genres": "音樂類型",
     "name": "名稱",
     "owner": "所有者",
     "path": "路徑",
+    "playlists": "播放列表",
     "playtime": "總播放時長",
     "popularity": "流行度 / 粉絲數",
     "position": "盤符 / 曲目",

web-src/src/pages/PageFiles.vue

@@ -20,14 +20,14 @@
           :items="tracks"
           icon="file-music-outline"
         />
-        <modal-dialog-directory
-          :item="current"
-          :show="showDetailsModal"
-          @close="showDetailsModal = false"
-        />
       </template>
     </content-with-heading>
   </div>
+  <modal-dialog-playable
+    :item="playable"
+    :show="showDetailsModal"
+    @close="showDetailsModal = false"
+  />
 </template>
 
 <script>
@@ -38,7 +38,7 @@ import HeadingTitle from '@/components/HeadingTitle.vue'
 import ListDirectories from '@/components/ListDirectories.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import ListTracks from '@/components/ListTracks.vue'
-import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
+import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import webapi from '@/webapi'
 
@@ -79,7 +79,7 @@ export default {
     ListDirectories,
     ListPlaylists,
     ListTracks,
-    ModalDialogDirectory
+    ModalDialogPlayable
   },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
@@ -117,6 +117,17 @@ export default {
         return this.current?.slice(this.current.lastIndexOf('/') + 1)
       }
       return this.$t('page.files.title')
+    },
+    playable() {
+      return {
+        expression: `path starts with "${this.current}" order by path asc`,
+        name: this.current,
+        properties: [
+          { key: 'property.folders', value: this.directories.length },
+          { key: 'property.playlists', value: this.playlists.total },
+          { key: 'property.tracks', value: this.tracks.total }
+        ]
+      }
     }
   },
   methods: {