fix: move dialogs to dialog controls

This reduces the number of permission checks and also ensures that the
button will only show up, when the dialog is available as well ruling
out any typos in the permission names *cough*.

refs #300

src/components/playlist/APlaylistEditor.vue

@@ -117,6 +117,9 @@
               <icon-formkit-url class="tw-flex-none" />
               {{ t('playlist.editor.control.importFile') }}
             </button>
+            <GetFileImportUrl v-slot="{ resolve }">
+              <AFileUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetFileImportUrl>
           </APermissionGuard>
         </div>
         <div class="tw-flex tw-flex-wrap tw-justify-center tw-items-center tw-gap-3 tw-mt-1">
@@ -125,47 +128,32 @@
               <icon-solar-play-stream-bold class="tw-flex-none" />
               {{ t('playlist.editor.control.addStream') }}
             </button>
+            <GetStreamUrl v-slot="{ resolve }">
+              <AStreamURLDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetStreamUrl>
           </APermissionGuard>
           <APermissionGuard show-permissions="program.add__line">
             <button type="button" class="btn btn-default" @click="addInputToPlaylist">
               <icon-game-icons-jack-plug class="tw-flex-none" />
               {{ t('playlist.editor.control.addInput') }}
             </button>
+            <GetInputUrl v-slot="{ resolve }">
+              <AInputUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetInputUrl>
           </APermissionGuard>
           <APermissionGuard show-permissions="program.add__m3ufile">
             <button type="button" class="btn btn-default" @click="addM3utoPlaylist">
               <icon-ph-playlist-light class="tw-flex-none" />
               {{ t('playlist.editor.control.addM3u') }}
             </button>
+            <GetM3uUrl v-slot="{ resolve }">
+              <AM3uUrlDialog @save="resolve($event)" @close="resolve(null)" />
+            </GetM3uUrl>
           </APermissionGuard>
         </div>
       </div>
     </fieldset>
   </div>
-
-  <APermissionGuard show-permissions="program.add__stream">
-    <GetStreamUrl v-slot="{ resolve }">
-      <AStreamURLDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetStreamUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="program.add__import">
-    <GetFileImportUrl v-slot="{ resolve }">
-      <AFileUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetFileImportUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="program.add__line">
-    <GetInputUrl v-slot="{ resolve }">
-      <AInputUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetInputUrl>
-  </APermissionGuard>
-
-  <APermissionGuard show-permissions="programm.add__m3ufile">
-    <GetM3uUrl v-slot="{ resolve }">
-      <AM3uUrlDialog @save="resolve($event)" @close="resolve(null)" />
-    </GetM3uUrl>
-  </APermissionGuard>
 </template>
 
 <script lang="ts" setup>