Split inputs in inputs and applications

ui/src/lib/components/Applications.svelte

@@ -0,0 +1,30 @@
+<script>
+ import { activeSources } from '$lib/stores/sources';
+</script>
+
+<ul class="list-group list-group-flush">
+    {#each $activeSources as source}
+        <li class="list-group-item py-3 d-flex justify-content-between">
+            <div>
+                <strong>{source.name}</strong>
+                {#await source.currently()}
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                {:then title}
+                    <span class="text-muted">{title}</span>
+                {/await}
+            </div>
+            {#if source.controlable}
+                <div>
+                    <button
+                        class="btn btn-sm btn-primary"
+                        on:click={() => source.playpause()}
+                    >
+                        <i class="bi bi-pause"></i>
+                    </button>
+                </div>
+            {/if}
+        </li>
+    {/each}
+</ul>

ui/src/lib/components/Inputs.svelte

@@ -1,42 +1,17 @@
 <script>
  import { activeInputs, inputsList } from '$lib/stores/inputs';
- import { activeSources } from '$lib/stores/sources';
 
  export let showInactives = false;
 </script>
 
 <ul class="list-group list-group-flush">
-    {#if $activeSources.length === 0 && ((showInactives && $inputsList.length === 0) || (!showInactives && $activeInputs.length === 0))}
+    {#if (showInactives && $inputsList.length === 0) || (!showInactives && $activeInputs.length === 0)}
         <li class="list-group-item py-3">
             <span class="text-muted">
                 Aucune source active.
             </span>
         </li>
     {/if}
-    {#each $activeSources as source}
-        <li class="list-group-item py-3 d-flex justify-content-between">
-            <div>
-                <strong>{source.name}</strong>
-                {#await source.currently()}
-                    <div class="spinner-border spinner-border-sm" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                {:then title}
-                    <span class="text-muted">{title}</span>
-                {/await}
-            </div>
-            {#if source.controlable}
-                <div>
-                    <button
-                        class="btn btn-sm btn-primary"
-                        on:click={() => source.playpause()}
-                    >
-                        <i class="bi bi-pause"></i>
-                    </button>
-                </div>
-            {/if}
-        </li>
-    {/each}
     {#each $inputsList as input}
         {#if showInactives || input.active}
             <li class="list-group-item py-3 d-flex flex-column">

ui/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+ import Applications from '$lib/components/Applications.svelte';
  import Inputs from '$lib/components/Inputs.svelte';
  import Mixer from '$lib/components/Mixer.svelte';
  import SourceSelection from '$lib/components/SourceSelection.svelte';
@@ -84,6 +85,15 @@
         </div>
 
         <div class="col-md">
+            {#if $activeSources.length > 0}
+                <div class="card my-2">
+                    <h4 class="card-header">
+                        <i class="bi bi-window-stack"></i>
+                        Applications
+                    </h4>
+                    <Applications />
+                </div>
+            {/if}
             <div class="card my-2">
                 <h4 class="card-header">
                     <i class="bi bi-speaker"></i>