From e3d27e4b4fef075d4bb4296c44dfe1becfb23e10 Mon Sep 17 00:00:00 2001
From: silentrald <silentrald1216@gmail.com>
Date: Mon, 6 Jan 2025 19:25:51 +0800
Subject: [PATCH] [feat-216] applied ui for filter/sorting map/playlist

* also applied change to model filter ui
---
 .../maps-playlists-panel.component.tsx        | 48 ++++++++++---------
 .../models-panel.component.tsx                |  4 +-
 .../components/svgs/bsm-icon.component.tsx    |  7 ++-
 .../icons/arrow-upward-icon.component.tsx     | 15 ++++++
 4 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 src/renderer/components/svgs/icons/arrow-upward-icon.component.tsx

diff --git a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
index b947889f..54e3fe46 100644
--- a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx
@@ -253,7 +253,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
 
     return (
         <>
-            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white mb-4">
+            <nav className="w-full shrink-0 flex h-9 justify-center gap-2 text-main-color-1 dark:text-white mb-4">
                 <BsmDropdownButton
                     classNames={{
                         mainContainer: "h-full relative z-[1] flex justify-center w-fit",
@@ -264,7 +264,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
                     icon="add"
                     buttonColor="primary"
                     text="misc.add"
-                    align="center"
+                    align="left"
                     menuTranslationY="6px"
                     withBar={false}
                     items={addDropDownItems}
@@ -282,30 +282,34 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
                 <BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 whitespace-nowrap" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" textClassName="whitespace-nowrap" withBar={false}>
                     {(
                         tabIndex === 0 ? (
-                            <FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[500px] h-fit p-2 rounded-md shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter} />
+                            <FilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[500px] h-fit p-2 rounded-full shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter} />
                         ) : (
-                            <LocalPlaylistFilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[300px] h-fit p-2 rounded-md shadow-md shadow-black" filter={playlistFilter} onChange={setPlaylistFilter} />
+                            <LocalPlaylistFilterPanel className="absolute top-[calc(100%+3px)] origin-top w-[300px] h-fit p-2 rounded-full shadow-md shadow-black" filter={playlistFilter} onChange={setPlaylistFilter} />
                         )
                     )}
                 </BsmDropdownButton>
-                <BsmSelect
-                    className="bg-theme-1 rounded-full px-1 pb-0.5 text-center cursor-pointer"
-                    options={sortOptions}
-                    selected={selectedSort}
-                    onChange={handleSortChange}
-                />
-                <BsmButton
-                    className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3"
-                    iconClassName="transition-transform size-full ease-in-out duration-200 bg-light-main-color-1 dark:bg-main-color-3"
-                    iconStyle={{ transform: (tabIndex === MAP_TAB && mapSort.ascending)
-                                            || (tabIndex === PLAYLIST_TAB && playlistSort.ascending)
-                                                ? "rotate(360deg)" : "rotate(180deg)"}}
-                    icon="chevron-top"
-                    typeColor="primary"
-                    withBar={false}
-                    onClick={handleAscendingClick}
-                />
-                <BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center" />
+
+                <div className="h-full relative">
+                    <BsmButton
+                        className="h-full absolute top-0 aspect-square rounded-l-full z-[1]"
+                        iconClassName="transition-transform size-full ease-in-out duration-200 bg-light-main-color-2 dark:bg-main-color-2"
+                        iconStyle={{ transform: (tabIndex === MAP_TAB && mapSort.ascending)
+                                                || (tabIndex === PLAYLIST_TAB && playlistSort.ascending)
+                                                    ? "rotate(0deg)" : "rotate(180deg)"}}
+                        icon="arrow-upward"
+                        withBar={false}
+                        onClick={handleAscendingClick}
+                    />
+
+                    <BsmSelect
+                        className="h-full bg-theme-2 rounded-full pl-9 cursor-pointer outline-none"
+                        options={sortOptions}
+                        selected={selectedSort}
+                        onChange={handleSortChange}
+                    />
+                </div>
+
+                <BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="right" />
             </nav>
             <BsContentTabPanel
                 tabIndex={tabIndex}
diff --git a/src/renderer/components/models-management/models-panel.component.tsx b/src/renderer/components/models-management/models-panel.component.tsx
index e10ba910..c043c37c 100644
--- a/src/renderer/components/models-management/models-panel.component.tsx
+++ b/src/renderer/components/models-management/models-panel.component.tsx
@@ -133,7 +133,7 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
 
     return (
         <div ref={ref} className="w-full h-full flex flex-col items-center justify-center gap-4">
-            <div className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
+            <div className="w-full shrink-0 flex h-9 justify-center gap-2 text-main-color-1 dark:text-white">
                 <BsmButton
                     className="flex items-center justify-center w-fit rounded-full px-2 py-1 font-bold"
                     icon="add"
@@ -149,7 +149,7 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
                 <div className="h-full rounded-full bg-light-main-color-2 dark:bg-main-color-2 grow p-[6px]">
                     <input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={t("models.panel.actions.search")} onChange={e => setSearch(e.target.value)} tabIndex={-1} />
                 </div>
-                <BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="center" />
+                <BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="right" />
             </div>
             <BsContentTabPanel
                 tabIndex={currentTabIndex}
diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index 7421a201..28a9f7f2 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -68,10 +68,11 @@ import { BrowseIcon } from "./icons/browse-icon.component";
 import { AddFileIcon } from "./icons/add-file-icon.component";
 import { CancelIcon } from "./icons/cancel-icon.component";
 import { WarningIcon } from "./icons/warning-icon.component";
+import { ArrowUpwardIcon } from "./icons/arrow-upward-icon.component";
 
 
 
-export type BsmIconType = SongDetailDiffCharactertistic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "web-site" | "clean" | "browse" | "add-file" | "cancel" | "warning" | "fr-FR-flag" | "es-ES-flag" | "it-IT-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag" | "ko-KR-flag" | "null" );
+export type BsmIconType = SongDetailDiffCharactertistic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "web-site" | "clean" | "browse" | "add-file" | "arrow-upward" | "cancel" | "warning" | "fr-FR-flag" | "es-ES-flag" | "it-IT-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag" | "ko-KR-flag" | "null" );
 
 export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => {
     // TODO : Very ugly very messy, need to find a better way to do this
@@ -282,6 +283,10 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
         if(icon === "add-file") {
             return <AddFileIcon className={className} style={style} />;
         }
+        if(icon === "arrow-upward") {
+            return <ArrowUpwardIcon className={className} style={style} />;
+        }
+
         if(icon === "null") {
             return null;
         }
diff --git a/src/renderer/components/svgs/icons/arrow-upward-icon.component.tsx b/src/renderer/components/svgs/icons/arrow-upward-icon.component.tsx
new file mode 100644
index 00000000..eb0dfe9c
--- /dev/null
+++ b/src/renderer/components/svgs/icons/arrow-upward-icon.component.tsx
@@ -0,0 +1,15 @@
+import { createSvgIcon } from "../svg-icon.type";
+
+export const ArrowUpwardIcon = createSvgIcon((props, ref) => {
+    return (
+        <svg
+            ref={ref}
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            fill="currentColor"
+        >
+            <path d="M440-608 324-492q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L520-608v328q0 17-11.5 28.5T480-240q-17 0-28.5-11.5T440-280v-328Z" />
+        </svg>
+    );
+});