From e44207230244f8f2375668ad792b4d825ee1456a Mon Sep 17 00:00:00 2001
From: Panto! <guustavopantoja@gmail.com>
Date: Sun, 20 Aug 2023 02:35:05 -0300
Subject: [PATCH 1/2] feat: SortChanger more closer to what's proposed on
 concept

---
 package-lock.json                                     | 4 ++--
 src/assets/Icons/Note.svg                             | 3 +++
 src/assets/Icons/index.ts                             | 2 ++
 src/components/Setlist/SongEntry/SongEntry.module.css | 4 ++++
 src/routes/Setlist/SortChanger.module.css             | 7 ++++++-
 src/routes/Setlist/SortChanger.tsx                    | 4 ++++
 6 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/Icons/Note.svg

diff --git a/package-lock.json b/package-lock.json
index 3342f2f..4ef7c27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "yet_another_launcher",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "yet_another_launcher",
-      "version": "0.2.1",
+      "version": "0.2.2",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-progress": "^1.0.3",
diff --git a/src/assets/Icons/Note.svg b/src/assets/Icons/Note.svg
new file mode 100644
index 0000000..77339c5
--- /dev/null
+++ b/src/assets/Icons/Note.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50033 9.33333V2.11111L11.167 1V8.22222M4.50033 9.33333C4.50033 10.2538 3.75413 11 2.83366 11C1.91318 11 1.16699 10.2538 1.16699 9.33333C1.16699 8.41286 1.91318 7.66667 2.83366 7.66667C3.75413 7.66667 4.50033 8.41286 4.50033 9.33333ZM11.167 8.22222C11.167 9.1427 10.4208 9.88889 9.50033 9.88889C8.57985 9.88889 7.83366 9.1427 7.83366 8.22222C7.83366 7.30175 8.57985 6.55556 9.50033 6.55556C10.4208 6.55556 11.167 7.30175 11.167 8.22222Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/Icons/index.ts b/src/assets/Icons/index.ts
index 66bb9e3..c70a83b 100644
--- a/src/assets/Icons/index.ts
+++ b/src/assets/Icons/index.ts
@@ -11,6 +11,7 @@ import { ReactComponent as InstallingIcon } from "./Installing.svg";
 import { ReactComponent as LinkIcon } from "./Link.svg";
 import { ReactComponent as MinimizeIcon } from "./Minimize.svg";
 import { ReactComponent as NewsIcon } from "./News.svg";
+import { ReactComponent as NoteIcon } from "./Note.svg";
 import { ReactComponent as OrganizerIcon } from "./Organizer.svg";
 import { ReactComponent as QueueIcon } from "./Queue.svg";
 import { ReactComponent as QueueListIcon } from "./QueueList.svg";
@@ -39,6 +40,7 @@ export {
     LinkIcon,
     MinimizeIcon,
     NewsIcon,
+    NoteIcon,
     OrganizerIcon,
     QueueIcon,
     QueueListIcon,
diff --git a/src/components/Setlist/SongEntry/SongEntry.module.css b/src/components/Setlist/SongEntry/SongEntry.module.css
index 33c69c0..2910742 100644
--- a/src/components/Setlist/SongEntry/SongEntry.module.css
+++ b/src/components/Setlist/SongEntry/SongEntry.module.css
@@ -7,6 +7,10 @@
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+.song:last-child {
+    border-bottom: none;
+}
+
 .track_container {
     display: flex;
     align-items: flex-start;
diff --git a/src/routes/Setlist/SortChanger.module.css b/src/routes/Setlist/SortChanger.module.css
index 9266f27..37d3d26 100644
--- a/src/routes/Setlist/SortChanger.module.css
+++ b/src/routes/Setlist/SortChanger.module.css
@@ -5,7 +5,7 @@ button {
 .container {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: right;
     gap: 5px; 
 }
 
@@ -18,6 +18,7 @@ button {
 
     border-radius: 50px;
     background: #E9E9E9;
+    cursor: pointer;
 
     color: black;
     font-size: 12px;
@@ -26,6 +27,10 @@ button {
     line-height: normal; 
 }
 
+.item svg {
+    height: 15px;
+}
+
 .item[data-state="on"] {
     background: black;
     color: white;
diff --git a/src/routes/Setlist/SortChanger.tsx b/src/routes/Setlist/SortChanger.tsx
index 4cb900d..21195e1 100644
--- a/src/routes/Setlist/SortChanger.tsx
+++ b/src/routes/Setlist/SortChanger.tsx
@@ -1,6 +1,7 @@
 import { SetlistSong } from "@app/hooks/useSetlistRelease";
 import styles from "./SortChanger.module.css";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import { NoteIcon, SongIcon, TimeIcon } from "@app/assets/Icons";
 
 export type SortType = keyof SetlistSong;
 
@@ -16,12 +17,15 @@ const SortChanger: React.FC<Props> = ({ onChange }: Props) => {
         onValueChange={(value) => onChange(value as SortType)}>
         
         <ToggleGroup.Item className={styles.item} value="title">
+            <NoteIcon />
             Song Name
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="artist">
+            <SongIcon />
             Artist Name
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="length">
+            <TimeIcon />
             Song Length
         </ToggleGroup.Item>
     </ToggleGroup.Root>;

From 413d512954cef39470941078a401c3046889b471 Mon Sep 17 00:00:00 2001
From: Panto! <guustavopantoja@gmail.com>
Date: Sun, 20 Aug 2023 03:13:22 -0300
Subject: [PATCH 2/2] feat: add release toggle

---
 src/routes/Setlist/SortChanger.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/routes/Setlist/SortChanger.tsx b/src/routes/Setlist/SortChanger.tsx
index 21195e1..0356b3f 100644
--- a/src/routes/Setlist/SortChanger.tsx
+++ b/src/routes/Setlist/SortChanger.tsx
@@ -1,7 +1,7 @@
 import { SetlistSong } from "@app/hooks/useSetlistRelease";
 import styles from "./SortChanger.module.css";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
-import { NoteIcon, SongIcon, TimeIcon } from "@app/assets/Icons";
+import { DateIcon, NoteIcon, SongIcon, TimeIcon } from "@app/assets/Icons";
 
 export type SortType = keyof SetlistSong;
 
@@ -14,19 +14,23 @@ const SortChanger: React.FC<Props> = ({ onChange }: Props) => {
         className={styles.container}
         type="single"
         defaultValue="title"
-        onValueChange={(value) => onChange(value as SortType)}>
+        onValueChange={(value: SortType) => onChange(value)}>
         
         <ToggleGroup.Item className={styles.item} value="title">
             <NoteIcon />
-            Song Name
+            Track
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="artist">
             <SongIcon />
-            Artist Name
+            Artist
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="length">
             <TimeIcon />
-            Song Length
+            Length
+        </ToggleGroup.Item>
+        <ToggleGroup.Item className={styles.item} value="release">
+            <DateIcon />
+            Release
         </ToggleGroup.Item>
     </ToggleGroup.Root>;
 };