mirror of
https://github.com/SrIzan10/osu-radio.git
synced 2026-05-01 10:55:12 +00:00
sort classes
This commit is contained in:
Tnixc
@@ -1,5 +1,5 @@
|
||||
/** @type {import("prettier").Options} */
|
||||
export default {
|
||||
printWidth: 100,
|
||||
plugins: ["@trivago/prettier-plugin-sort-imports"],
|
||||
plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
|
||||
};
|
||||
|
||||
80
package-lock.json
generated
80
package-lock.json
generated
@@ -44,6 +44,7 @@
|
||||
"eslint-plugin-solid": "^0.14.3",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"solid-js": "^1.7.6",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "~5.5.0",
|
||||
@@ -8110,6 +8111,85 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.6.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
|
||||
"integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "*",
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"@zackad/prettier-plugin-twig-melody": "*",
|
||||
"prettier": "^3.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-import-sort": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-marko": "*",
|
||||
"prettier-plugin-multiline-arrays": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-sort-imports": "*",
|
||||
"prettier-plugin-style-order": "*",
|
||||
"prettier-plugin-svelte": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@ianvs/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@shopify/prettier-plugin-liquid": {
|
||||
"optional": true
|
||||
},
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@zackad/prettier-plugin-twig-melody": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-css-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-import-sort": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-jsdoc": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-marko": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-multiline-arrays": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-style-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format": {
|
||||
"version": "29.7.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
"eslint-plugin-solid": "^0.14.3",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"solid-js": "^1.7.6",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "~5.5.0",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
export default function SongHint(): HTMLElement {
|
||||
return (
|
||||
<div class="flex items-center bg-opacity-80 bg-black p-2 rounded-md shadow-lg">
|
||||
<div class="w-12 h-12 bg-gray-700 rounded-md mr-3"></div>
|
||||
<div class="flex items-center rounded-md bg-black bg-opacity-80 p-2 shadow-lg">
|
||||
<div class="mr-3 h-12 w-12 rounded-md bg-gray-700"></div>
|
||||
<div class="flex flex-col">
|
||||
<div class="w-32 h-4 bg-gray-700 rounded mb-2"></div>
|
||||
<div class="w-24 h-3 bg-gray-600 rounded"></div>
|
||||
<div class="mb-2 h-4 w-32 rounded bg-gray-700"></div>
|
||||
<div class="h-3 w-24 rounded bg-gray-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
) as HTMLElement;
|
||||
|
||||
@@ -60,8 +60,8 @@ const SongContextMenu: Component<SongContextMenuProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Show when={show()}>
|
||||
<div class="absolute z-50 bg-surface shadow-lg rounded-md overflow-hidden" ref={menu}>
|
||||
<div class="bg-gradient-to-b from-black/30 to-transparent">
|
||||
<div class="absolute z-50 overflow-hidden rounded-md bg-surface shadow-lg" ref={menu}>
|
||||
<div class="from-black/30 bg-gradient-to-b to-transparent">
|
||||
<For each={props.children}>{(child) => child}</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ const SongContextMenuItem: Component<SongContextMenuItemProps> = (props) => {
|
||||
return (
|
||||
<button
|
||||
ref={divAccessor}
|
||||
class="w-full text-left px-4 py-2 hover:bg-accent/20 transition-colors duration-200"
|
||||
class="hover:bg-accent/20 w-full px-4 py-2 text-left transition-colors duration-200"
|
||||
>
|
||||
{props.children}
|
||||
</button>
|
||||
|
||||
@@ -47,7 +47,7 @@ const SongControls: Component<SongControlsProps> = () => {
|
||||
</Match>
|
||||
</Switch>
|
||||
</IconButton>
|
||||
<div class="w-24 ml-3">
|
||||
<div class="ml-3 w-24">
|
||||
<Bar fill={localVolume()} setFill={setLocalVolume} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +65,7 @@ const SongControls: Component<SongControlsProps> = () => {
|
||||
</IconButton>
|
||||
|
||||
<button
|
||||
class="w-12 h-12 flex items-center justify-center bg-accent rounded-full text-2xl"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-2xl"
|
||||
onClick={() => togglePlay()}
|
||||
disabled={disable()}
|
||||
title={playHint()}
|
||||
|
||||
@@ -8,19 +8,19 @@ import { Component } from "solid-js";
|
||||
|
||||
const SongDetail: Component = () => {
|
||||
return (
|
||||
<div class="flex flex-col h-full p-8 max-w-2xl w-full">
|
||||
<div class="flex-grow mb-8 grid place-items-center">
|
||||
<div class="flex h-full w-full max-w-2xl flex-col p-8">
|
||||
<div class="mb-8 grid flex-grow place-items-center">
|
||||
<SongImage
|
||||
src={song().bg}
|
||||
instantLoad={true}
|
||||
class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg"
|
||||
class="size-80 rounded-lg bg-cover bg-center object-cover shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold">{song().title}</h2>
|
||||
<span class="text-lg text-text-700">{song().artist}</span>
|
||||
<span class="text-text-700 text-lg">{song().artist}</span>
|
||||
</div>
|
||||
|
||||
<Bar
|
||||
|
||||
@@ -65,13 +65,13 @@ const SongItem: Component<SongItemProps> = ({
|
||||
onContextMenu={showMenu}
|
||||
>
|
||||
<SongImage
|
||||
class="absolute inset-0 z-[-1] w-full h-full bg-no-repeat bg-cover bg-center rounded-md data-[active=true]:opacity-100 opacity-50"
|
||||
class="absolute inset-0 z-[-1] h-full w-full rounded-md bg-cover bg-center bg-no-repeat opacity-50 data-[active=true]:opacity-100"
|
||||
src={song.bg}
|
||||
group={group}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col justify-center min-h-[72px] p-3 bg-black/50 overflow-hidden rounded-md">
|
||||
<h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">
|
||||
<div class="bg-black/50 flex min-h-[72px] flex-col justify-center overflow-hidden rounded-md p-3">
|
||||
<h3 class="text-shadow shadow-black/60 text-[22px] font-extrabold leading-7">
|
||||
{song.title}
|
||||
</h3>
|
||||
<p class="text-base text-subtext">{song.artist}</p>
|
||||
|
||||
@@ -66,7 +66,7 @@ const SongListSearch: Component<SearchProps> = (props) => {
|
||||
<div class="p-5">
|
||||
<div class="relative mb-4">
|
||||
<input
|
||||
class="w-full h-10 pl-10 pr-4 rounded-full bg-thin-material focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
class="h-10 w-full rounded-full bg-thin-material pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
type="text"
|
||||
id="search_input"
|
||||
placeholder="Type to search songs..."
|
||||
@@ -75,7 +75,7 @@ const SongListSearch: Component<SearchProps> = (props) => {
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600"
|
||||
class="text-text-600 absolute left-3 top-1/2 -translate-y-1/2 transform"
|
||||
for="search_input"
|
||||
>
|
||||
<i class="ri-search-2-line" />
|
||||
|
||||
@@ -74,7 +74,7 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
|
||||
</Switch>
|
||||
</IconButton>
|
||||
<Dropdown isOpen={isOpen} onValueChange={setIsOpen}>
|
||||
<Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">
|
||||
<Dropdown.Trigger class="rounded-md bg-thin-material px-3 py-1">
|
||||
{optionLabel()}
|
||||
</Dropdown.Trigger>
|
||||
<Dropdown.List
|
||||
@@ -87,7 +87,7 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
|
||||
>
|
||||
{orderOptions.map((option) => (
|
||||
<Dropdown.Item
|
||||
class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200"
|
||||
class="hover:bg-accent/20 px-4 py-2 transition-colors duration-200"
|
||||
value={option.value}
|
||||
>
|
||||
{option.text}
|
||||
|
||||
@@ -73,7 +73,7 @@ const SongList: Component<SongViewProps> = (props) => {
|
||||
const group = namespace.create(true);
|
||||
|
||||
return (
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="sticky top-0 z-10">
|
||||
<SongListSearch tags={tagsSignal} setOrder={setOrder} count={count} error={searchError} />
|
||||
</div>
|
||||
@@ -86,11 +86,11 @@ const SongList: Component<SongViewProps> = (props) => {
|
||||
apiInitData={payload()}
|
||||
setCount={setCount}
|
||||
reset={resetListing}
|
||||
fallback={<div class="text-center py-8 text-text-600">No songs...</div>}
|
||||
fallback={<div class="text-text-600 py-8 text-center">No songs...</div>}
|
||||
builder={(s) => (
|
||||
<SongItem song={s} group={group} onSelect={createQueue}>
|
||||
<PlayNext path={s.path} />
|
||||
<button class="w-full text-left px-4 py-2 hover:bg-accent/20 transition-colors duration-200">
|
||||
<button class="hover:bg-accent/20 w-full px-4 py-2 text-left transition-colors duration-200">
|
||||
Add to playlist
|
||||
</button>
|
||||
</SongItem>
|
||||
|
||||
@@ -81,8 +81,8 @@ const SongQueue: Component = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={view} class="h-full flex flex-col">
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between p-5 bg-black bg-opacity-90 backdrop-blur-md">
|
||||
<div ref={view} class="flex h-full flex-col">
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between bg-black bg-opacity-90 p-5 backdrop-blur-md">
|
||||
<h2 class="text-lg font-semibold">Next songs on the queue ({count()})</h2>
|
||||
<IconButton onClick={handleCloseButtonClick}>
|
||||
<i class="ri-close-line" />
|
||||
@@ -96,7 +96,7 @@ const SongQueue: Component = () => {
|
||||
setCount={setCount}
|
||||
reset={resetListing}
|
||||
onLoadItems={onSongsLoad}
|
||||
fallback={<div class="text-center py-8 text-text-600">No queue...</div>}
|
||||
fallback={<div class="text-text-600 py-8 text-center">No queue...</div>}
|
||||
builder={(s) => (
|
||||
<SongItem
|
||||
song={s}
|
||||
|
||||
@@ -14,22 +14,22 @@ import { Component, For, JSXElement, Match, Show, Switch } from "solid-js";
|
||||
|
||||
const MainScene: Component = () => {
|
||||
return (
|
||||
<div class="h-screen overflow-hidden flex flex-col">
|
||||
<div class="flex h-screen flex-col overflow-hidden">
|
||||
<Nav />
|
||||
<main class="relative h-[calc(100vh-52px)] flex">
|
||||
<main class="relative flex h-[calc(100vh-52px)]">
|
||||
<TabContent />
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<SongDetail />
|
||||
</div>
|
||||
|
||||
<QueueModal />
|
||||
</main>
|
||||
|
||||
<div class="absolute inset-0 z-[-1] pointer-events-none opacity-[0.072]">
|
||||
<div class="pointer-events-none absolute inset-0 z-[-1] opacity-[0.072]">
|
||||
<SongImage
|
||||
src={song().bg}
|
||||
instantLoad={true}
|
||||
class="w-full h-full bg-cover filter blur-xl"
|
||||
class="h-full w-full bg-cover blur-xl filter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,7 +38,7 @@ const MainScene: Component = () => {
|
||||
|
||||
const Nav: Component = () => {
|
||||
return (
|
||||
<nav class="flex items-center h-[52px] px-5 bg-thick-material gap-1">
|
||||
<nav class="flex h-[52px] items-center gap-1 bg-thick-material px-5">
|
||||
<For each={Object.values(TABS)}>
|
||||
{({ label, ...rest }) => <NavItem {...rest}>{label}</NavItem>}
|
||||
</For>
|
||||
@@ -61,8 +61,7 @@ type NavItemProps = Pick<Tab, "value" | "icon"> & {
|
||||
const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
|
||||
return (
|
||||
<button
|
||||
class={`flex items-center gap-4 px-4 py-1 rounded-sm hover:bg-surface
|
||||
${mainActiveTab() === value ? "bg-surface" : ""}`}
|
||||
class={`flex items-center gap-4 rounded-sm px-4 py-1 hover:bg-surface ${mainActiveTab() === value ? "bg-surface" : ""}`}
|
||||
onclick={() => setMainActiveTab(value)}
|
||||
>
|
||||
<i class={`${icon} ${mainActiveTab() === value ? "text-text" : "text-subtext"}`} />
|
||||
@@ -77,7 +76,7 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
|
||||
|
||||
const TabContent: Component = () => {
|
||||
return (
|
||||
<div class="overflow-y-auto w-[480px] min-w-[320px] h-full bg-opacity-72 bg-thick-material border-r border-stroke">
|
||||
<div class="bg-opacity-72 h-full w-[480px] min-w-[320px] overflow-y-auto border-r border-stroke bg-thick-material">
|
||||
<Switch fallback={<div>Tab not found</div>}>
|
||||
<Match when={mainActiveTab() === TABS.SONGS.value}>
|
||||
<SongList isAllSongs={true} />
|
||||
@@ -93,7 +92,7 @@ const TabContent: Component = () => {
|
||||
const QueueModal: Component = () => {
|
||||
return (
|
||||
<Show when={songQueueModalOpen()}>
|
||||
<div class="absolute top-0 right-0 bottom-0 h-full overflow-y-auto w-[480px] bg-gradient-to-b from-black to-zinc-900/72 border-l border-stroke">
|
||||
<div class="to-zinc-900/72 absolute bottom-0 right-0 top-0 h-full w-[480px] overflow-y-auto border-l border-stroke bg-gradient-to-b from-black">
|
||||
<SongQueue />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
Reference in New Issue
Block a user