feat: SortChanger more closer to what's proposed on concept

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,

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;

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;

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 { DateIcon, NoteIcon, SongIcon, TimeIcon } from "@app/assets/Icons";
 
 export type SortType = keyof SetlistSong;
 
@@ -13,16 +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">
-            Song Name
+            <NoteIcon />
+            Track
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="artist">
-            Artist Name
+            <SongIcon />
+            Artist
         </ToggleGroup.Item>
         <ToggleGroup.Item className={styles.item} value="length">
-            Song Length
+            <TimeIcon />
+            Length
+        </ToggleGroup.Item>
+        <ToggleGroup.Item className={styles.item} value="release">
+            <DateIcon />
+            Release
         </ToggleGroup.Item>
     </ToggleGroup.Root>;
 };