mirror of
https://github.com/SrIzan10/osu-radio.git
synced 2026-05-01 10:55:12 +00:00
Merge pull request #83 from Team-BTMC/ui/icons
use lucide icons everywhere
This commit is contained in:
duduBTW
30
package-lock.json
generated
30
package-lock.json
generated
@@ -12,8 +12,6 @@
|
||||
"@electron-toolkit/preload": "^3.0.1",
|
||||
"@electron-toolkit/utils": "^3.0.0",
|
||||
"@floating-ui/dom": "^1.6.11",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/graceful-fs": "^4.1.6",
|
||||
"@xhayper/discord-rpc": "^1.2.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@@ -24,7 +22,6 @@
|
||||
"graceful-fs": "^4.2.11",
|
||||
"lucide-solid": "^0.452.0",
|
||||
"node-addon-api": "^8.2.1",
|
||||
"remixicon": "^4.3.0",
|
||||
"sharp": "^0.33.5",
|
||||
"solid-focus-trap": "^0.1.7",
|
||||
"tailwind-merge": "^2.5.3"
|
||||
@@ -1571,27 +1568,6 @@
|
||||
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
|
||||
"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
|
||||
"integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
|
||||
"license": "(CC-BY-4.0 AND MIT)",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@gar/promisify": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
|
||||
@@ -8447,12 +8423,6 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/remixicon": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.3.0.tgz",
|
||||
"integrity": "sha512-jRYQ37dTFSkJtvcxwTUAkIiXkYRvA9EDvVuXPNrmt2xf/VS//CRgFtsX2TAFBoQOhh9SDh7l6La4Xu12snEyxg==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
|
||||
@@ -27,8 +27,6 @@
|
||||
"@electron-toolkit/preload": "^3.0.1",
|
||||
"@electron-toolkit/utils": "^3.0.0",
|
||||
"@floating-ui/dom": "^1.6.11",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/graceful-fs": "^4.1.6",
|
||||
"@xhayper/discord-rpc": "^1.2.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@@ -39,7 +37,6 @@
|
||||
"graceful-fs": "^4.2.11",
|
||||
"lucide-solid": "^0.452.0",
|
||||
"node-addon-api": "^8.2.1",
|
||||
"remixicon": "^4.3.0",
|
||||
"sharp": "^0.33.5",
|
||||
"solid-focus-trap": "^0.1.7",
|
||||
"tailwind-merge": "^2.5.3"
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 300">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g class="hero-apps" style="fill: #71abb7;">
|
||||
<path d="M15 138l-4.9-.64L8 133l-2.1 4.36L1 138l3.6 3.26-.93 4.74L8 143.67l4.33 2.33-.93-4.74z"></path>
|
||||
<path d="M897.2 114.0912l-5.2 3.63v-2.72c0-.55-.45-1-1-1h-8c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-2.72l5.2 3.63c.33.23.8 0 .8-.41v-10c0-.41-.47-.64-.8-.41z"></path>
|
||||
<path d="M65.4 188.625h-1.6c.88 0 1.6-.7313 1.6-1.625v-1.625c0-.8937-.72-1.625-1.6-1.625h-1.6c-.88 0-1.6.7313-1.6 1.625V187c0 .8937.72 1.625 1.6 1.625h-1.6c-.88 0-1.6.7313-1.6 1.625v3.25h1.6v4.875c0 .8937.72 1.625 1.6 1.625h1.6c.88 0 1.6-.7313 1.6-1.625V193.5H67v-3.25c0-.8937-.72-1.625-1.6-1.625zm-3.2-3.25h1.6V187h-1.6v-1.625zm3.2 6.5h-1.6v6.5h-1.6v-6.5h-1.6v-1.625h4.8v1.625zm3.344-5.6875c0-3.2175-2.576-5.8337-5.744-5.8337-3.168 0-5.744 2.6162-5.744 5.8337 0 .455.048.8937.144 1.3162v3.2175c-.976-1.2512-1.6-2.8112-1.6-4.55 0-4.03 3.232-7.3125 7.2-7.3125s7.2 3.2825 7.2 7.3125c0 1.7225-.624 3.2988-1.6 4.55v-3.2175c.096-.4387.144-.8612.144-1.3162zm6.256 0c0 4.68-2.608 8.7425-6.4 10.7738v-1.7063c2.976-1.885 4.944-5.2325 4.944-9.0675 0-5.915-4.72-10.7087-10.544-10.7087-5.824 0-10.544 4.7937-10.544 10.7087 0 3.835 1.968 7.1825 4.944 9.0675v1.7063c-3.792-2.0313-6.4-6.0938-6.4-10.7738C51 179.46 56.376 174 63 174s12 5.46 12 12.1875z"></path>
|
||||
<path d="M830.7143 142.3333c-.8643 0-1.5714.7125-1.5714 1.5834v3.1666c0 .871.707 1.5834 1.5713 1.5834h12.5714c.8643 0 1.5714-.7125 1.5714-1.5834v-3.1666c0-.871-.707-1.5834-1.5713-1.5834h-12.5714zm12.5714 2.771l-1.9643 1.979h-2.357L837 145.1043l-1.9643 1.979h-2.357l-1.9644-1.979v-1.1876h1.1786l1.964 1.979 1.9644-1.979h2.3572l1.9643 1.979 1.964-1.979h1.1787v1.1875zm-9.4286 5.1457h6.286v1.5833h-6.286V150.25zM837 136c-6.0657 0-11 4.6075-11 10.2917v7.125c0 .8708.707 1.5833 1.5714 1.5833h18.8572c.8643 0 1.5714-.7125 1.5714-1.5833v-7.125C848 140.6075 843.0657 136 837 136zm9.4286 17.4167h-18.8572v-7.125c0-4.8925 4.1486-8.851 9.4286-8.851 5.28 0 9.4286 3.9585 9.4286 8.851v7.125z"></path>
|
||||
<path d="M75 91.8065V96h4.1935L90.376 84.8174l-4.1934-4.1935L75 91.8064zm4.1935 2.7957h-2.7957v-2.7957h1.398v1.3978h1.3977v1.398zM93.591 81.6024l-1.817 1.817-4.1935-4.1934 1.817-1.817c.5453-.5453 1.426-.5453 1.971 0l2.2226 2.2224c.5453.5452.5453 1.4258 0 1.971z"></path>
|
||||
<path d="M797 187h4v4h-4v-4zm12-1v19c0 1.1-.9 2-2 2h-20c-1.1 0-2-.9-2-2v-24c0-1.1.9-2 2-2h15l7 7zm-2 1l-6-6h-14v22l6-10 4 8 4-4 6 6v-16z"></path>
|
||||
<path d="M138 125c-6.62 0-12 5-12 11 0 9.04 12 21 12 21s12-11.96 12-21c0-6-5.38-11-12-11zm0 29.1c-3.72-4.06-10-12.22-10-18.1 0-4.96 4.5-9 10-9 2.68 0 5.22.96 7.12 2.72 1.84 1.72 2.88 3.94 2.88 6.28 0 5.88-6.28 14.04-10 18.1zm4-18.1c0 2.22-1.78 4-4 4-2.22 0-4-1.78-4-4 0-2.22 1.78-4 4-4 2.22 0 4 1.78 4 4z"></path>
|
||||
<path d="M771 82h8v2h-8v-2zm0 6h8v-2h-8v2zm0 4h8v-2h-8v2zm22-10h-8v2h8v-2zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2zm4-12v18c0 1.1-.9 2-2 2h-11l-2 2-2-2h-11c-1.1 0-2-.9-2-2V78c0-1.1.9-2 2-2h11l2 2 2-2h11c1.1 0 2 .9 2 2zm-16 1l-1-1h-11v18h12V79zm14-1h-11l-1 1v17h12V78z"></path>
|
||||
<path d="M176 203h-24c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v7l7-7h13c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2zm0 18h-14l-4 4v-4h-6v-16h24v16z"></path>
|
||||
<path d="M673 88.921c0 2.18-.9 4.18-2.34 5.66l-1.34-1.34c1.1-1.12 1.78-2.62 1.78-4.32 0-1.7-.68-3.22-1.78-4.32l1.34-1.34c1.44 1.44 2.34 3.44 2.34 5.66zm-8.56-11.48l-7.44 7.44h-4c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h4l7.44 7.44c.94.94 2.56.28 2.56-1.06v-20.76c0-1.34-1.62-2-2.56-1.06zm11.88.16l-1.34 1.34c2.56 2.56 4.12 6.06 4.12 9.96 0 3.88-1.56 7.4-4.12 9.96l1.34 1.34c2.9-2.9 4.68-6.9 4.68-11.32 0-4.44-1.78-8.44-4.68-11.32v.04zm-2.82 2.82l-1.38 1.34c1.84 1.84 2.96 4.38 2.96 7.16 0 2.78-1.12 5.32-2.96 7.12l1.38 1.34c2.16-2.16 3.5-5.16 3.5-8.46 0-3.3-1.34-6.32-3.5-8.5z"></path>
|
||||
<path d="M226 79h-16c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h28c1.1 0 2-.9 2-2V81c0-1.1-.9-2-2-2zm-18 4h-8v-2h8v2zm9 14c-3.88 0-7-3.12-7-7s3.12-7 7-7 7 3.12 7 7-3.12 7-7 7zm5-7c0 2.76-2.26 5-5 5s-5-2.26-5-5 2.26-5 5-5 5 2.26 5 5z"></path>
|
||||
<path d="M725.8393 157h-15.6498c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2h15.6298C727 153 727 153.82 727 155c0 1.18 0 2-1.1807 2h.02zm-11.6473-10c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2h11.6273C727 143 727 143.82 727 145c0 1.18 0 2-1.1807 2H714.192zM695 146.82l2.8218-2.6 3.182 3.18 8.185-8.4 2.8218 2.82-11.0068 11-6.0038-6zM710.1895 163h15.6298C727 163 727 163.82 727 165c0 1.18 0 2-1.1807 2h-15.6298c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2z"></path>
|
||||
<path d="M223 152v24c0 1.65 1.35 3 3 3h36c1.65 0 3-1.35 3-3v-24c0-1.65-1.35-3-3-3h-36c-1.65 0-3 1.35-3 3zm39 0l-18 15-18-15h36zm-36 4.5l12 9-12 9v-18zm3 19.5l10.5-9 4.5 4.5 4.5-4.5 10.5 9h-30zm33-1.5l-12-9 12-9v18z"></path>
|
||||
<path d="M648 182h-3v4.5c0 .84-.66 1.5-1.5 1.5h-6c-.84 0-1.5-.66-1.5-1.5V182h-9v4.5c0 .84-.66 1.5-1.5 1.5h-6c-.84 0-1.5-.66-1.5-1.5V182h-3c-1.65 0-3 1.35-3 3v33c0 1.65 1.35 3 3 3h33c1.65 0 3-1.35 3-3v-33c0-1.65-1.35-3-3-3zm0 36h-33v-27h33v27zm-24-33h-3v-6h3v6zm18 0h-3v-6h3v6zm-15 12h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3z"></path>
|
||||
</g>
|
||||
<g class="hero-icons" style="fill: #c2f5ff;">
|
||||
<path d="M441.1132 69.724c7.681 0 13.9075-6.207 13.9075-13.8636 0-7.6565-6.2266-13.8634-13.9075-13.8634-7.681 0-13.9076 6.207-13.9076 13.8634 0 7.6566 6.2266 13.8635 13.9076 13.8635zm0-5.7932c-4.4713 0-8.096-3.6132-8.096-8.0704 0-4.457 3.6247-8.0703 8.096-8.0703 4.4712 0 8.096 3.6133 8.096 8.0704 0 4.4572-3.6248 8.0704-8.096 8.0704z"></path>
|
||||
<path d="M354.8995 220.2693c7.681 0 13.9075-6.207 13.9075-13.8635s-6.2266-13.8634-13.9075-13.8634c-7.681 0-13.9075 6.207-13.9075 13.8634 0 7.6566 6.2266 13.8635 13.9075 13.8635zm0-5.793c-4.4713 0-8.096-3.6133-8.096-8.0705 0-4.457 3.6247-8.0703 8.096-8.0703s8.096 3.6132 8.096 8.0703c0 4.4572-3.6247 8.0704-8.096 8.0704z"></path>
|
||||
<path d="M541.0343 206.4058c0-7.6565-6.2266-13.8634-13.9075-13.8634-7.681 0-13.9075 6.207-13.9075 13.8634 0 7.6566 6.2266 13.8635 13.9075 13.8635 7.681 0 13.9075-6.207 13.9075-13.8635zm-5.8115 0c0 4.4572-3.6247 8.0704-8.096 8.0704s-8.096-3.6132-8.096-8.0704c0-4.457 3.6247-8.0703 8.096-8.0703s8.096 3.6132 8.096 8.0703z"></path>
|
||||
<path d="M397.6943 214.5258c9.7012 27.0033 25.5723 43.629 43.419 43.629 13.0157 0 25.0578-8.8443 34.4482-24.4154.827-1.371.3822-3.1507-.9932-3.975-1.3755-.824-3.1607-.3808-3.9876.9902-8.439 13.9938-18.8052 21.6072-29.4675 21.6072-14.8247 0-28.9803-14.8288-37.9476-39.7892-.541-1.506-2.2044-2.2897-3.7153-1.7504-1.511.5394-2.297 2.1975-1.756 3.7036z"></path>
|
||||
<path d="M514.124 163.4733c18.5545-21.85 25.033-43.826 16.122-59.2117-6.557-11.321-20.419-17.2982-38.841-17.537-1.6047-.021-2.9225 1.259-2.9434 2.8586-.0208 1.5996 1.263 2.9132 2.8678 2.934 16.5683.2148 28.5106 5.3642 33.8836 14.641 7.4018 12.7797 1.6243 32.3774-15.5247 52.5722-1.037 1.221-.8844 3.0487.3405 4.0822 1.2248 1.0336 3.0584.8817 4.0952-.3393z"></path>
|
||||
<path d="M411.5672 88.457c-28.3373-5.1448-50.7424.24-59.672 15.6575-6.6635 11.505-4.7588 26.7585 4.6193 43.0637.7982 1.3878 2.574 1.8678 3.966 1.072 1.3923-.7956 1.874-2.5656 1.0756-3.9534-8.4477-14.688-10.0915-27.8524-4.628-37.2857 7.418-12.8074 27.403-17.6105 53.5978-12.8546 1.579.2866 3.092-.7568 3.3794-2.3307.2876-1.5738-.7592-3.082-2.338-3.3687z"></path>
|
||||
<path d="M486.3075 209.2436c5.022-15.998 7.7194-34.453 7.7194-53.6842 0-47.9875-16.849-89.3545-40.8478-99.977-1.4667-.649-3.1837.0098-3.835 1.472-.6512 1.462.01 3.1735 1.4766 3.8227 21.404 9.474 37.3945 48.7337 37.3945 94.6824 0 18.6574-2.612 36.5297-7.454 51.954-.4794 1.5268.3736 3.1518 1.9052 3.6295s3.1617-.3727 3.641-1.8994z"></path>
|
||||
<path d="M466.439 89.4215c-16.7763 3.583-34.6332 10.5886-51.7827 20.4585-42.434 24.4216-70.1147 60.4323-66.2703 86.5432.233 1.5828 1.709 2.6776 3.297 2.4453 1.5877-.2323 2.686-1.7037 2.453-3.2865-3.4135-23.1838 22.825-57.3183 63.426-80.685 16.6365-9.5746 33.9267-16.3578 50.0946-19.811 1.5692-.335 2.5687-1.8748 2.2325-3.439-.336-1.5642-1.8807-2.5606-3.45-2.2255z"></path>
|
||||
<path d="M371.2508 166.997c11.458 12.5516 26.3438 24.3243 43.3203 34.0947 41.106 23.6572 84.866 29.9805 106.4328 15.3217 1.326-.9013 1.668-2.7033.7638-4.025-.904-1.3217-2.712-1.6626-4.0378-.7614-19.302 13.1195-60.871 7.1128-100.253-15.5523-16.469-9.4783-30.8834-20.8782-41.9277-32.9767-1.08-1.1832-2.9178-1.2695-4.1048-.1928-1.187 1.0766-1.2735 2.9086-.1934 4.0918z"></path>
|
||||
<path d="M443.2374 165.3634c-5.432 1.17-10.7838-2.2712-11.9598-7.686-1.1714-5.415 2.2785-10.7498 7.7106-11.922 5.432-1.17 10.7838 2.2712 11.9598 7.686 1.1737 5.415-2.2785 10.7498-7.7106 11.922z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.8 KiB |
@@ -1,4 +1,5 @@
|
||||
import Popover from "../popover/Popover";
|
||||
import { ChevronDownIcon } from "lucide-solid";
|
||||
import { Component, JSX } from "solid-js";
|
||||
|
||||
type Props = JSX.IntrinsicElements["button"];
|
||||
@@ -6,7 +7,7 @@ const DropdownSelectTrigger: Component<Props> = (props) => {
|
||||
return (
|
||||
<Popover.Trigger class="flex items-center justify-between gap-2 rounded bg-surface px-4 py-2.5 hover:bg-overlay">
|
||||
<span class="text-base leading-6">{props.children}</span>
|
||||
<i class="ri-arrow-down-s-line text-xl text-subtext" />
|
||||
<ChevronDownIcon size={20} class="text-subtext" />
|
||||
</Popover.Trigger>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import Popover from "../popover/Popover";
|
||||
import { ChevronDownIcon } from "lucide-solid";
|
||||
import { Component, JSX } from "solid-js";
|
||||
|
||||
type Props = JSX.IntrinsicElements["button"];
|
||||
const DropdownTrigger: Component<Props> = (props) => {
|
||||
return (
|
||||
<Popover.Trigger class="flex items-center gap-2 rounded-full border-solid border-stroke px-4 py-0.5 hover:bg-surface">
|
||||
<i class="ri-arrow-down-s-line text-xl text-subtext" />
|
||||
<span class="text-sm">{props.children}</span>
|
||||
<ChevronDownIcon size={20} class="text-subtext" />
|
||||
<span class="text-base">{props.children}</span>
|
||||
</Popover.Trigger>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import Impulse from "../../lib/Impulse";
|
||||
import { none, orDefault, some } from "../../lib/rust-like-utils-client/Optional";
|
||||
import Gradient from "../Gradient";
|
||||
import { hideNotice } from "./NoticeContainer";
|
||||
import { XIcon } from "lucide-solid";
|
||||
import { Accessor, Component, createSignal } from "solid-js";
|
||||
|
||||
export type NoticeType = {
|
||||
@@ -58,7 +59,7 @@ const Notice: Component<NoticeProps> = (props) => {
|
||||
<div class="head">
|
||||
<h3>{props.notice.title}</h3>
|
||||
<button onClick={removeNotice}>
|
||||
<i class="ri-close-line" />
|
||||
<XIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import "../../assets/css/search/tag-item.css";
|
||||
import { XIcon } from "lucide-solid";
|
||||
import { Component } from "solid-js";
|
||||
|
||||
export type TagItemProps = {
|
||||
@@ -25,7 +26,7 @@ const TagItem: Component<TagItemProps> = (props) => {
|
||||
>
|
||||
<span>{props.name}</span>
|
||||
<button onClick={() => props.onRemove(props.name)}>
|
||||
<i class="ri-close-fill" />
|
||||
<XIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,6 +2,7 @@ import "../../assets/css/search/tag-select.css";
|
||||
import Gradient from "../Gradient";
|
||||
import TextField from "../form/TextField";
|
||||
import TagItem from "./TagItem";
|
||||
import { TagIcon } from "lucide-solid";
|
||||
import { Component, createEffect, createSignal, For, Signal } from "solid-js";
|
||||
|
||||
export type Tag = {
|
||||
@@ -125,7 +126,7 @@ const TagSelect: Component<TagSelectProps> = (props) => {
|
||||
disabled={props.disabled}
|
||||
title={"Add/Remove tags for searching"}
|
||||
>
|
||||
<i class="ri-tag-line" />
|
||||
<TagIcon size={20} />
|
||||
</button>
|
||||
<dialog ref={dialog} class={"tag-select"}>
|
||||
<Gradient classTop={"tag-select-container"}>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import { cn } from "../../lib/css.utils";
|
||||
import Dropdown from "../dropdown/Dropdown";
|
||||
import { changeAudioDevice } from "@renderer/components/song/song.utils";
|
||||
import { GlobeIcon, LucideIcon, Volume2Icon } from "lucide-solid";
|
||||
import { Component, createEffect, createSignal, JSX, onMount } from "solid-js";
|
||||
|
||||
const Settings: Component = () => {
|
||||
return (
|
||||
<div class="flex flex-col gap-10 p-8">
|
||||
<SettingsSection title="General" icon="ri-global-line">
|
||||
<SettingsSection title="General" Icon={GlobeIcon}>
|
||||
Empty
|
||||
</SettingsSection>
|
||||
<SettingsSection title="Audio" icon="ri-volume-up-line">
|
||||
<SettingsSection title="Audio" Icon={Volume2Icon}>
|
||||
<AudioDeviceSetting />
|
||||
</SettingsSection>
|
||||
</div>
|
||||
@@ -18,14 +19,14 @@ const Settings: Component = () => {
|
||||
|
||||
type SettingsSectionProps = JSX.IntrinsicElements["div"] & {
|
||||
title: string;
|
||||
icon: string;
|
||||
Icon: LucideIcon;
|
||||
};
|
||||
|
||||
const SettingsSection: Component<SettingsSectionProps> = ({ title, icon, children, ...rest }) => {
|
||||
const SettingsSection: Component<SettingsSectionProps> = ({ title, Icon, children, ...rest }) => {
|
||||
return (
|
||||
<div class={cn("flex flex-col gap-6", rest.class)}>
|
||||
<div class="flex items-center gap-3">
|
||||
<i class={`text-subtext ${icon}`} />
|
||||
<Icon class="text-text opacity-70" size={16} />
|
||||
<h3 class="text-base text-text">{title}</h3>
|
||||
</div>
|
||||
{children}
|
||||
|
||||
@@ -11,6 +11,18 @@ import {
|
||||
} from "../song.utils";
|
||||
import Button from "@renderer/components/button/Button";
|
||||
import Slider from "@renderer/components/slider/Slider";
|
||||
import {
|
||||
CirclePlusIcon,
|
||||
PauseIcon,
|
||||
PlayIcon,
|
||||
RepeatIcon,
|
||||
ShuffleIcon,
|
||||
SkipBackIcon,
|
||||
SkipForwardIcon,
|
||||
Volume1Icon,
|
||||
Volume2Icon,
|
||||
VolumeXIcon,
|
||||
} from "lucide-solid";
|
||||
import { Component, createEffect, createSignal, Match, Show, Switch } from "solid-js";
|
||||
|
||||
const SongControls: Component = () => {
|
||||
@@ -41,7 +53,7 @@ const SongControls: Component = () => {
|
||||
disabled={disable()}
|
||||
title="Shuffle"
|
||||
>
|
||||
<i class="ri-shuffle-fill" />
|
||||
<ShuffleIcon size={20} />
|
||||
</Button>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
@@ -52,7 +64,7 @@ const SongControls: Component = () => {
|
||||
disabled={disable()}
|
||||
title="Play previous"
|
||||
>
|
||||
<i class="ri-skip-back-mini-fill" />
|
||||
<SkipBackIcon size={20} />
|
||||
</Button>
|
||||
|
||||
<button
|
||||
@@ -61,8 +73,8 @@ const SongControls: Component = () => {
|
||||
disabled={disable()}
|
||||
title={playHint()}
|
||||
>
|
||||
<Show when={!isPlaying()} fallback={<i class="ri-pause-fill" />}>
|
||||
<i class="ri-play-fill" />
|
||||
<Show when={!isPlaying()} fallback={<PauseIcon fill="currentColor" size={20} />}>
|
||||
<PlayIcon fill="currentColor" size={20} />
|
||||
</Show>
|
||||
</button>
|
||||
|
||||
@@ -73,7 +85,7 @@ const SongControls: Component = () => {
|
||||
disabled={disable()}
|
||||
title="Play next"
|
||||
>
|
||||
<i class="ri-skip-forward-mini-fill"></i>
|
||||
<SkipForwardIcon size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -86,7 +98,7 @@ const SongControls: Component = () => {
|
||||
disabled={disable()}
|
||||
title="Repeat"
|
||||
>
|
||||
<i class="ri-repeat-2-fill" />
|
||||
<RepeatIcon size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<RightPart />
|
||||
@@ -116,13 +128,13 @@ const LeftPart = () => {
|
||||
<Button size="icon" variant="ghost" onClick={handleMuteSong}>
|
||||
<Switch>
|
||||
<Match when={volume() === 0}>
|
||||
<i class="ri-volume-mute-fill" />
|
||||
<VolumeXIcon size={20} />
|
||||
</Match>
|
||||
<Match when={volume() < 0.5}>
|
||||
<i class="ri-volume-down-fill" />
|
||||
<Volume1Icon size={20} />
|
||||
</Match>
|
||||
<Match when={volume() >= 0.5}>
|
||||
<i class="ri-volume-up-fill" />
|
||||
<Volume2Icon size={20} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</Button>
|
||||
@@ -151,7 +163,7 @@ const RightPart = () => {
|
||||
return (
|
||||
<div class="flex flex-1 justify-end">
|
||||
<Button size="icon" variant="ghost">
|
||||
<i class="ri-add-fill" />
|
||||
<CirclePlusIcon size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { SearchQueryError } from "../../../../../main/lib/search-parser/@search-
|
||||
import { Tag } from "../../search/TagSelect";
|
||||
import { setSongsSearch } from "../song-list/song-list.utils";
|
||||
import SongListSearchOrderBy from "./SongListSearchOrderBy";
|
||||
import { SearchIcon } from "lucide-solid";
|
||||
import { Accessor, Component, Setter, Signal } from "solid-js";
|
||||
|
||||
export type SearchProps = {
|
||||
@@ -77,7 +78,7 @@ const SongListSearch: Component<SearchProps> = (props) => {
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 transform text-text"
|
||||
for="search_input"
|
||||
>
|
||||
<i class="ri-search-2-line" />
|
||||
<SearchIcon size={20} class="opacity-70" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Button from "@renderer/components/button/Button";
|
||||
import Dropdown from "@renderer/components/dropdown/Dropdown";
|
||||
import { ArrowDownAzIcon, ArrowUpZaIcon } from "lucide-solid";
|
||||
import { Component, createMemo, createSignal, Match, Setter, Switch } from "solid-js";
|
||||
import { OrderDirection, OrderOptions, Order } from "src/@types";
|
||||
|
||||
@@ -64,10 +65,10 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
|
||||
<Button variant={"ghost"} size="icon" onClick={switchDirections}>
|
||||
<Switch>
|
||||
<Match when={direction() === "asc"}>
|
||||
<i class="ri-sort-asc" />
|
||||
<ArrowDownAzIcon size={20} />
|
||||
</Match>
|
||||
<Match when={direction() === "desc"}>
|
||||
<i class="ri-sort-desc" />
|
||||
<ArrowUpZaIcon size={20} />
|
||||
</Match>
|
||||
</Switch>
|
||||
</Button>
|
||||
|
||||
@@ -7,6 +7,7 @@ import SongContextMenuItem from "../context-menu/SongContextMenuItem";
|
||||
import SongItem from "../song-item/SongItem";
|
||||
import { setSongQueueModalOpen } from "./song-queue.utils";
|
||||
import Button from "@renderer/components/button/Button";
|
||||
import { XIcon } from "lucide-solid";
|
||||
import { Component, createSignal, onCleanup, onMount } from "solid-js";
|
||||
|
||||
const SongQueue: Component = () => {
|
||||
@@ -84,8 +85,8 @@ const SongQueue: Component = () => {
|
||||
<div ref={view} class="flex h-full flex-col bg-regular-material backdrop-blur-md">
|
||||
<div class="sticky top-0 z-10 flex items-center justify-between p-5">
|
||||
<h2 class="text-lg font-semibold">Next songs on the queue ({count()})</h2>
|
||||
<Button variant="ghost" onClick={handleCloseButtonClick}>
|
||||
<i class="ri-close-line" />
|
||||
<Button variant="ghost" size="icon" onClick={handleCloseButtonClick}>
|
||||
<XIcon size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import App from "./App";
|
||||
import "./global.css";
|
||||
import "remixicon/fonts/remixicon.css";
|
||||
import { render } from "solid-js/web";
|
||||
|
||||
render(() => <App />, document.getElementById("root") as HTMLElement);
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
toggleSongQueueModalOpen,
|
||||
} from "@renderer/components/song/song-queue/song-queue.utils";
|
||||
import { song } from "@renderer/components/song/song.utils";
|
||||
import { Minimize2, Minus, Square, X } from "lucide-solid";
|
||||
import { LayersIcon, Minimize2Icon, MinusIcon, SquareIcon, XIcon } from "lucide-solid";
|
||||
import {
|
||||
Accessor,
|
||||
Component,
|
||||
@@ -35,7 +35,6 @@ const MainScene: Component = () => {
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<SongDetail />
|
||||
</div>
|
||||
|
||||
<QueueModal />
|
||||
</main>
|
||||
|
||||
@@ -90,7 +89,7 @@ const Nav: Component = () => {
|
||||
class="mr-2"
|
||||
onClick={toggleSongQueueModalOpen}
|
||||
>
|
||||
<i class="ri-stack-fill" />
|
||||
<LayersIcon size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
{os() !== "darwin" && <WindowControls maximized={maximized} setMaximized={setMaximized} />}
|
||||
@@ -105,7 +104,7 @@ function WindowControls(props: { maximized: Accessor<boolean>; setMaximized: Set
|
||||
onclick={async () => window.api.request("window::minimize")}
|
||||
class="nav-window-control"
|
||||
>
|
||||
<Minus size={20} />
|
||||
<MinusIcon size={20} />
|
||||
</button>
|
||||
<button
|
||||
onclick={async () => {
|
||||
@@ -114,28 +113,30 @@ function WindowControls(props: { maximized: Accessor<boolean>; setMaximized: Set
|
||||
}}
|
||||
class="nav-window-control"
|
||||
>
|
||||
{props.maximized() ? <Minimize2 size={20} /> : <Square size={18} />}
|
||||
{props.maximized() ? <Minimize2Icon size={20} /> : <SquareIcon size={18} />}
|
||||
</button>
|
||||
<button
|
||||
onclick={async () => window.api.request("window::close")}
|
||||
class="nav-window-control close"
|
||||
>
|
||||
<X size={20} />
|
||||
<XIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type NavItemProps = Pick<Tab, "value" | "icon"> & {
|
||||
type NavItemProps = Pick<Tab, "value" | "Icon"> & {
|
||||
children: JSXElement;
|
||||
};
|
||||
const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
|
||||
const NavItem: Component<NavItemProps> = ({ children, value, Icon }) => {
|
||||
return (
|
||||
<button
|
||||
class={`nav-item 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"}`} />
|
||||
<span class={`${mainActiveTab() === value ? "" : "opacity-70"}`}>
|
||||
<Icon size={20} />
|
||||
</span>
|
||||
<span
|
||||
class={`text-base font-semibold ${mainActiveTab() === value ? "text-text" : "text-subtext"}`}
|
||||
>
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
import type { LucideIcon } from "lucide-solid";
|
||||
import { MusicIcon, SettingsIcon } from "lucide-solid";
|
||||
import { createSignal } from "solid-js";
|
||||
|
||||
export type Tab = {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: string;
|
||||
Icon: LucideIcon;
|
||||
};
|
||||
|
||||
export const TABS = {
|
||||
SONGS: {
|
||||
label: "Songs",
|
||||
value: "songs",
|
||||
icon: "ri-music-fill",
|
||||
Icon: MusicIcon,
|
||||
},
|
||||
SETTINGS: {
|
||||
label: "Settings",
|
||||
value: "settings",
|
||||
icon: "ri-settings-4-fill",
|
||||
Icon: SettingsIcon,
|
||||
},
|
||||
} satisfies Record<string, Tab>;
|
||||
} as const satisfies Record<string, Tab>;
|
||||
|
||||
const [mainActiveTab, setMainActiveTab] = createSignal(TABS.SONGS.value);
|
||||
const [mainActiveTab, setMainActiveTab] = createSignal<Tab["value"]>(TABS.SONGS.value);
|
||||
export { mainActiveTab, setMainActiveTab };
|
||||
|
||||
Reference in New Issue
Block a user