Clean up some code

Author: penelopeysm

src/components/Details.svelte

@@ -69,7 +69,11 @@
 
 <div class="details">
     {#if selectedConcerts.length === 1}
-        <SelectedConcertDetails selectedConcert={selectedConcerts[0]} />
+        <SelectedConcertDetails
+            selectedConcert={selectedConcerts[0]}
+            on:add={(e) => addToView(e.detail.concerts, e.detail.viewName)}
+            on:addNew={(e) => addToNewView(e.detail.concerts)}
+        />
     {:else if selectedConcerts.length === 0}
         <div id="centred-text">
             <h2>No concert selected</h2>

src/components/Dropdown.svelte

@@ -67,18 +67,14 @@
     div.dropdown-options :global(button) {
         background-color: #f0f0f0;
         border: 1px solid #ccc;
-        border-radius: 5px;
+        border-bottom: none;
         padding: 5px;
         margin: 0;
-        text-align: left;
-    }
-
-    div.dropdown-options.left :global(button) {
-        text-align: left;
+        text-align: left;  /* Regardless of alignment, text should always be on left */
     }
 
-    div.dropdown-options.right :global(button) {
-        text-align: right;
+    div.dropdown-options :global(button:last-child) {
+        border-bottom: 1px solid #ccc;
     }
 
     div.dropdown-options :global(button:hover) {

src/components/SelectedConcertDetails.svelte

@@ -2,7 +2,7 @@
     import Tags from "src/components/Tags.svelte";
     import { formatDate, getPriceString } from "src/lib/utils";
     import { type Concert } from "src/lib/bindings/Concert";
-    import { concertViews, currentViewName } from "src/lib/stores";
+    import { concertViews } from "src/lib/stores";
     import Dropdown from "src/components/Dropdown.svelte";
 
     export let selectedConcert: Concert;
@@ -17,37 +17,14 @@
         return validViews;
     }
 
+    // These are handled in the parent component to avoid code duplication
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
     function addToView(concert: Concert, viewName: string) {
-        const existingConcerts = $concertViews.get(viewName) as Concert[];
-        $concertViews.set(viewName, [...existingConcerts, concert]);
-        $concertViews = new Map($concertViews); // trigger store update
+        dispatch("add", { concerts: [concert], viewName });
     }
-
-    // TODO Reduce duplication with ViewList.svelte
     function addToNewView(concert: Concert) {
-        const newViewName = getNewViewName();
-        if (newViewName === null) {
-            return;
-        }
-        $concertViews.set(newViewName, [concert]);
-        $concertViews = new Map($concertViews); // Required to trigger store update
-        $currentViewName = newViewName;
-    }
-
-    function getNewViewName(): string | null {
-        const newViewName = prompt("Enter a name for the new view");
-        if (newViewName === null) {
-            return null;
-        }
-        if (newViewName === "") {
-            alert("Please enter a name");
-            return null;
-        }
-        if ($concertViews.has(newViewName)) {
-            alert("A view with that name already exists");
-            return null;
-        }
-        return newViewName;
+        dispatch("addNew", { concerts: [concert] });
     }
 </script>