Migrate to mantine v6 (#15)
* Add letter spacing to cell text * Set window control height in px * Add temp unused routes * Migrate text title font weights * Bump mantine to v6 alpha * Migrate modals / notifications * Increase header bar to 65px * Adjust play button props * Migrate various components * Migrate various pages and root styles * Adjust default badge padding * Fix sidebar spacing * Fix list header badges * Adjust default theme
This commit is contained in:
Jeff
GitHub
parent
768269f074
commit
44a4b88809
52 changed files with 1301 additions and 349 deletions
419
package-lock.json
generated
419
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "feishin",
|
||||
"version": "0.0.1-alpha3",
|
||||
"version": "0.0.1-alpha4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "feishin",
|
||||
"version": "0.0.1-alpha3",
|
||||
"version": "0.0.1-alpha4",
|
||||
"hasInstallScript": true,
|
||||
"license": "GPL-3.0",
|
||||
"dependencies": {
|
||||
|
|
@ -16,17 +16,17 @@
|
|||
"@ag-grid-community/react": "^28.2.1",
|
||||
"@ag-grid-community/styles": "^28.2.1",
|
||||
"@emotion/react": "^11.10.4",
|
||||
"@mantine/core": "^5.9.5",
|
||||
"@mantine/dates": "^5.9.5",
|
||||
"@mantine/dropzone": "^5.9.5",
|
||||
"@mantine/form": "^5.9.5",
|
||||
"@mantine/hooks": "^5.9.5",
|
||||
"@mantine/modals": "^5.9.5",
|
||||
"@mantine/notifications": "^5.9.5",
|
||||
"@mantine/spotlight": "^5.9.5",
|
||||
"@mantine/core": "^6.0.0-alpha.0",
|
||||
"@mantine/dates": "^6.0.0-alpha.0",
|
||||
"@mantine/dropzone": "^6.0.0-alpha.0",
|
||||
"@mantine/form": "^6.0.0-alpha.0",
|
||||
"@mantine/hooks": "^6.0.0-alpha.0",
|
||||
"@mantine/modals": "^6.0.0-alpha.0",
|
||||
"@mantine/notifications": "^6.0.0-alpha.0",
|
||||
"@mantine/utils": "^6.0.0-alpha.0",
|
||||
"@tanstack/react-query": "^4.16.1",
|
||||
"@tanstack/react-query-devtools": "^4.16.1",
|
||||
"@tanstack/react-virtual": "^3.0.0-beta.34",
|
||||
"@tanstack/react-virtual": "^3.0.0-beta.39",
|
||||
"dayjs": "^1.11.6",
|
||||
"electron-debug": "^3.2.0",
|
||||
"electron-localshortcut": "^3.2.1",
|
||||
|
|
@ -1694,55 +1694,56 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mantine/core": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz",
|
||||
"integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom-interactions": "^0.10.1",
|
||||
"@mantine/styles": "5.9.5",
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/styles": "6.0.0-alpha.0",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"@radix-ui/react-scroll-area": "1.0.2",
|
||||
"react-remove-scroll": "^2.5.5",
|
||||
"react-textarea-autosize": "8.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"@mantine/hooks": "6.0.0-alpha.0",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/dates": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz",
|
||||
"integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
"@mantine/utils": "6.0.0-alpha.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.9.5",
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"@mantine/core": "6.0.0-alpha.0",
|
||||
"@mantine/hooks": "6.0.0-alpha.0",
|
||||
"dayjs": ">=1.0.0",
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/dropzone": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz",
|
||||
"integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"react-dropzone": "14.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.9.5",
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"@mantine/core": "6.0.0-alpha.0",
|
||||
"@mantine/hooks": "6.0.0-alpha.0",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/form": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz",
|
||||
"integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"klona": "^2.0.5"
|
||||
|
|
@ -1752,60 +1753,46 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mantine/hooks": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz",
|
||||
"integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/modals": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz",
|
||||
"integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
"@mantine/utils": "6.0.0-alpha.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.9.5",
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"@mantine/core": "6.0.0-alpha.0",
|
||||
"@mantine/hooks": "6.0.0-alpha.0",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/notifications": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz",
|
||||
"integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"react-transition-group": "4.4.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.9.5",
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/spotlight": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-5.9.5.tgz",
|
||||
"integrity": "sha512-JFk9UKaagwMJjljySYpWq2QR3yHrFcxgWltY2ebjtFsPIKllzXxHAy/+VetytyNl9LtKnF8q0A93OctlGamq4A==",
|
||||
"dependencies": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "5.9.5",
|
||||
"@mantine/hooks": "5.9.5",
|
||||
"@mantine/core": "6.0.0-alpha.0",
|
||||
"@mantine/hooks": "6.0.0-alpha.0",
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/styles": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz",
|
||||
"integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
|
||||
"dependencies": {
|
||||
"clsx": "1.1.1",
|
||||
"csstype": "3.0.9"
|
||||
|
|
@ -1822,9 +1809,9 @@
|
|||
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
|
||||
},
|
||||
"node_modules/@mantine/utils": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz",
|
||||
"integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
|
|
@ -2299,11 +2286,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-virtual": {
|
||||
"version": "3.0.0-beta.34",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz",
|
||||
"integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==",
|
||||
"version": "3.0.0-beta.39",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
|
||||
"integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.0.0-beta.34"
|
||||
"@tanstack/virtual-core": "3.0.0-beta.39"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
|
|
@ -2314,9 +2301,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@tanstack/virtual-core": {
|
||||
"version": "3.0.0-beta.34",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz",
|
||||
"integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg==",
|
||||
"version": "3.0.0-beta.39",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
|
||||
"integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
|
|
@ -7010,6 +6997,11 @@
|
|||
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/detect-node-es": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
|
||||
},
|
||||
"node_modules/detect-port": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
|
||||
|
|
@ -10732,6 +10724,14 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-nonce": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
|
||||
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/get-package-type": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
|
||||
|
|
@ -12048,6 +12048,14 @@
|
|||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
|
|
@ -17548,6 +17556,51 @@
|
|||
"typescript": "^4"
|
||||
}
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
|
||||
"integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
|
||||
"dependencies": {
|
||||
"react-remove-scroll-bar": "^2.3.3",
|
||||
"react-style-singleton": "^2.2.1",
|
||||
"tslib": "^2.1.0",
|
||||
"use-callback-ref": "^1.3.0",
|
||||
"use-sidecar": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-remove-scroll-bar": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
|
||||
"integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
|
||||
"dependencies": {
|
||||
"react-style-singleton": "^2.2.1",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
|
||||
|
|
@ -17611,6 +17664,28 @@
|
|||
"react": "^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
|
||||
"dependencies": {
|
||||
"get-nonce": "^1.0.0",
|
||||
"invariant": "^2.2.4",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-test-renderer": {
|
||||
"version": "18.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz",
|
||||
|
|
@ -22585,6 +22660,26 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-callback-ref": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
|
||||
"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-composed-ref": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
|
||||
|
|
@ -22622,6 +22717,27 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sidecar": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||
"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
|
||||
"dependencies": {
|
||||
"detect-node-es": "^1.1.0",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
|
|
@ -24993,78 +25109,71 @@
|
|||
}
|
||||
},
|
||||
"@mantine/core": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz",
|
||||
"integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
|
||||
"requires": {
|
||||
"@floating-ui/react-dom-interactions": "^0.10.1",
|
||||
"@mantine/styles": "5.9.5",
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/styles": "6.0.0-alpha.0",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"@radix-ui/react-scroll-area": "1.0.2",
|
||||
"react-remove-scroll": "^2.5.5",
|
||||
"react-textarea-autosize": "8.3.4"
|
||||
}
|
||||
},
|
||||
"@mantine/dates": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz",
|
||||
"integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
|
||||
"requires": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
"@mantine/utils": "6.0.0-alpha.0"
|
||||
}
|
||||
},
|
||||
"@mantine/dropzone": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz",
|
||||
"integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
|
||||
"requires": {
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"react-dropzone": "14.2.3"
|
||||
}
|
||||
},
|
||||
"@mantine/form": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz",
|
||||
"integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
|
||||
"requires": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"klona": "^2.0.5"
|
||||
}
|
||||
},
|
||||
"@mantine/hooks": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz",
|
||||
"integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@mantine/modals": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz",
|
||||
"integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
|
||||
"requires": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
"@mantine/utils": "6.0.0-alpha.0"
|
||||
}
|
||||
},
|
||||
"@mantine/notifications": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz",
|
||||
"integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
|
||||
"requires": {
|
||||
"@mantine/utils": "5.9.5",
|
||||
"@mantine/utils": "6.0.0-alpha.0",
|
||||
"react-transition-group": "4.4.2"
|
||||
}
|
||||
},
|
||||
"@mantine/spotlight": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-5.9.5.tgz",
|
||||
"integrity": "sha512-JFk9UKaagwMJjljySYpWq2QR3yHrFcxgWltY2ebjtFsPIKllzXxHAy/+VetytyNl9LtKnF8q0A93OctlGamq4A==",
|
||||
"requires": {
|
||||
"@mantine/utils": "5.9.5"
|
||||
}
|
||||
},
|
||||
"@mantine/styles": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz",
|
||||
"integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
|
||||
"requires": {
|
||||
"clsx": "1.1.1",
|
||||
"csstype": "3.0.9"
|
||||
|
|
@ -25078,9 +25187,9 @@
|
|||
}
|
||||
},
|
||||
"@mantine/utils": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz",
|
||||
"integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==",
|
||||
"version": "6.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
|
||||
"requires": {}
|
||||
},
|
||||
"@mdn/browser-compat-data": {
|
||||
|
|
@ -25423,17 +25532,17 @@
|
|||
}
|
||||
},
|
||||
"@tanstack/react-virtual": {
|
||||
"version": "3.0.0-beta.34",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz",
|
||||
"integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==",
|
||||
"version": "3.0.0-beta.39",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
|
||||
"integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
|
||||
"requires": {
|
||||
"@tanstack/virtual-core": "3.0.0-beta.34"
|
||||
"@tanstack/virtual-core": "3.0.0-beta.39"
|
||||
}
|
||||
},
|
||||
"@tanstack/virtual-core": {
|
||||
"version": "3.0.0-beta.34",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz",
|
||||
"integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg=="
|
||||
"version": "3.0.0-beta.39",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
|
||||
"integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ=="
|
||||
},
|
||||
"@teamsupercell/typings-for-css-modules-loader": {
|
||||
"version": "2.5.1",
|
||||
|
|
@ -29104,6 +29213,11 @@
|
|||
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
|
||||
"dev": true
|
||||
},
|
||||
"detect-node-es": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
|
||||
},
|
||||
"detect-port": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
|
||||
|
|
@ -31923,6 +32037,11 @@
|
|||
"has-symbols": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"get-nonce": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
|
||||
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
|
||||
},
|
||||
"get-package-type": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
|
||||
|
|
@ -32923,6 +33042,14 @@
|
|||
"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
|
||||
"dev": true
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
|
|
@ -37012,6 +37139,27 @@
|
|||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"react-remove-scroll": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
|
||||
"integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
|
||||
"requires": {
|
||||
"react-remove-scroll-bar": "^2.3.3",
|
||||
"react-style-singleton": "^2.2.1",
|
||||
"tslib": "^2.1.0",
|
||||
"use-callback-ref": "^1.3.0",
|
||||
"use-sidecar": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"react-remove-scroll-bar": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
|
||||
"integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
|
||||
"requires": {
|
||||
"react-style-singleton": "^2.2.1",
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
|
||||
|
|
@ -37053,6 +37201,16 @@
|
|||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
|
||||
"requires": {
|
||||
"get-nonce": "^1.0.0",
|
||||
"invariant": "^2.2.4",
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
"version": "18.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz",
|
||||
|
|
@ -40941,6 +41099,14 @@
|
|||
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
|
||||
"dev": true
|
||||
},
|
||||
"use-callback-ref": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
|
||||
"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"use-composed-ref": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
|
||||
|
|
@ -40961,6 +41127,15 @@
|
|||
"use-isomorphic-layout-effect": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"use-sidecar": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||
"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
|
||||
"requires": {
|
||||
"detect-node-es": "^1.1.0",
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -253,17 +253,17 @@
|
|||
"@ag-grid-community/react": "^28.2.1",
|
||||
"@ag-grid-community/styles": "^28.2.1",
|
||||
"@emotion/react": "^11.10.4",
|
||||
"@mantine/core": "^5.9.5",
|
||||
"@mantine/dates": "^5.9.5",
|
||||
"@mantine/dropzone": "^5.9.5",
|
||||
"@mantine/form": "^5.9.5",
|
||||
"@mantine/hooks": "^5.9.5",
|
||||
"@mantine/modals": "^5.9.5",
|
||||
"@mantine/notifications": "^5.9.5",
|
||||
"@mantine/spotlight": "^5.9.5",
|
||||
"@mantine/core": "^6.0.0-alpha.0",
|
||||
"@mantine/dates": "^6.0.0-alpha.0",
|
||||
"@mantine/dropzone": "^6.0.0-alpha.0",
|
||||
"@mantine/form": "^6.0.0-alpha.0",
|
||||
"@mantine/hooks": "^6.0.0-alpha.0",
|
||||
"@mantine/modals": "^6.0.0-alpha.0",
|
||||
"@mantine/notifications": "^6.0.0-alpha.0",
|
||||
"@mantine/utils": "^6.0.0-alpha.0",
|
||||
"@tanstack/react-query": "^4.16.1",
|
||||
"@tanstack/react-query-devtools": "^4.16.1",
|
||||
"@tanstack/react-virtual": "^3.0.0-beta.34",
|
||||
"@tanstack/react-virtual": "^3.0.0-beta.39",
|
||||
"dayjs": "^1.11.6",
|
||||
"electron-debug": "^3.2.0",
|
||||
"electron-localshortcut": "^3.2.1",
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import { ModuleRegistry } from '@ag-grid-community/core';
|
|||
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { ModalsProvider } from '@mantine/modals';
|
||||
import { NotificationsProvider } from '@mantine/notifications';
|
||||
import { initSimpleImg } from 'react-simple-img';
|
||||
import { BaseContextModal } from './components';
|
||||
import { useTheme } from './hooks';
|
||||
import { Notifications } from '@mantine/notifications';
|
||||
import { AppRouter } from './router/app-router';
|
||||
import { useSettingsStore } from './store/settings.store';
|
||||
import './styles/global.scss';
|
||||
|
|
@ -36,13 +36,6 @@ export const App = () => {
|
|||
withGlobalStyles
|
||||
withNormalizeCSS
|
||||
theme={{
|
||||
breakpoints: {
|
||||
lg: 1200,
|
||||
md: 1000,
|
||||
sm: 800,
|
||||
xl: 1400,
|
||||
xs: 500,
|
||||
},
|
||||
colorScheme: theme as 'light' | 'dark',
|
||||
components: { Modal: { styles: { body: { padding: '.5rem' } } } },
|
||||
defaultRadius: 'xs',
|
||||
|
|
@ -60,53 +53,52 @@ export const App = () => {
|
|||
},
|
||||
fontFamily: 'var(--content-font-family)',
|
||||
fontSizes: {
|
||||
lg: 16,
|
||||
md: 14,
|
||||
sm: 12,
|
||||
xl: 18,
|
||||
xs: 10,
|
||||
lg: '1.5rem',
|
||||
md: '1.1rem',
|
||||
sm: '0.9rem',
|
||||
xl: '2rem',
|
||||
xs: '0.8rem',
|
||||
},
|
||||
headings: {
|
||||
fontFamily: 'var(--content-font-family)',
|
||||
fontWeight: 700,
|
||||
sizes: {
|
||||
h1: '6rem',
|
||||
h2: '4rem',
|
||||
h3: '3rem',
|
||||
h4: '1.5rem',
|
||||
h5: '1.2rem',
|
||||
h6: '1rem',
|
||||
},
|
||||
},
|
||||
headings: { fontFamily: 'var(--content-font-family)' },
|
||||
other: {},
|
||||
spacing: {
|
||||
lg: 12,
|
||||
md: 8,
|
||||
sm: 4,
|
||||
xl: 16,
|
||||
xs: 2,
|
||||
lg: '2rem',
|
||||
md: '1rem',
|
||||
sm: '0.5rem',
|
||||
xl: '4rem',
|
||||
xs: '0rem',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<NotificationsProvider
|
||||
autoClose={1500}
|
||||
position="bottom-center"
|
||||
style={{
|
||||
marginBottom: '85px',
|
||||
opacity: '.8',
|
||||
userSelect: 'none',
|
||||
width: '300px',
|
||||
}}
|
||||
transitionDuration={200}
|
||||
>
|
||||
<ModalsProvider
|
||||
modalProps={{
|
||||
centered: true,
|
||||
exitTransitionDuration: 300,
|
||||
overflow: 'inside',
|
||||
overlayBlur: 0,
|
||||
overlayOpacity: 0.8,
|
||||
<ModalsProvider
|
||||
modalProps={{
|
||||
centered: true,
|
||||
transitionDuration: 300,
|
||||
transitionProps: {
|
||||
exitDuration: 300,
|
||||
transition: 'slide-down',
|
||||
transitionDuration: 300,
|
||||
}}
|
||||
modals={{ base: BaseContextModal }}
|
||||
>
|
||||
<PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
|
||||
<ContextMenuProvider>
|
||||
<AppRouter />
|
||||
</ContextMenuProvider>
|
||||
</PlayQueueHandlerContext.Provider>
|
||||
</ModalsProvider>
|
||||
</NotificationsProvider>
|
||||
},
|
||||
}}
|
||||
modals={{ base: BaseContextModal }}
|
||||
>
|
||||
<PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
|
||||
<ContextMenuProvider>
|
||||
<Notifications />
|
||||
<AppRouter />
|
||||
</ContextMenuProvider>
|
||||
</PlayQueueHandlerContext.Provider>
|
||||
</ModalsProvider>
|
||||
</MantineProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const StyledBadge = styled(MantineBadge)<BadgeProps>`
|
|||
}
|
||||
|
||||
.mantine-Badge-inner {
|
||||
padding: 0 0.5rem;
|
||||
color: var(--badge-fg);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not([data-disabled])&:hover {
|
||||
color: ${(props) => {
|
||||
switch (props.variant) {
|
||||
case 'default':
|
||||
|
|
@ -100,7 +100,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
|||
case 'filled':
|
||||
return 'var(--btn-primary-fg-hover)';
|
||||
case 'subtle':
|
||||
return 'var(--btn-subtle-fg-hover)';
|
||||
return 'var(--btn-subtle-fg-hover) !important';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
|||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:not([data-disabled])&:focus-visible {
|
||||
color: ${(props) => {
|
||||
switch (props.variant) {
|
||||
case 'default':
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
|
|||
& .mantine-Menu-itemLabel {
|
||||
color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& .mantine-Menu-itemRightSection {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,7 @@ const Grid = styled.div`
|
|||
grid-auto-columns: 1fr;
|
||||
grid-template-areas: 'image info';
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 225px 1fr;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: 200px 1fr;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -152,16 +151,27 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
/>
|
||||
</ImageColumn>
|
||||
<InfoColumn>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Stack
|
||||
spacing="md"
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
<TitleWrapper>
|
||||
<TextTitle fw="bold">{currentItem?.name}</TextTitle>
|
||||
<TextTitle
|
||||
lh="4rem"
|
||||
lineClamp={2}
|
||||
order={1}
|
||||
sx={{ fontSize: '4rem' }}
|
||||
weight={900}
|
||||
>
|
||||
{currentItem?.name}
|
||||
</TextTitle>
|
||||
</TitleWrapper>
|
||||
<TitleWrapper>
|
||||
{currentItem?.albumArtists.map((artist) => (
|
||||
<TextTitle
|
||||
key={`carousel-artist-${artist.id}`}
|
||||
fw="600"
|
||||
order={3}
|
||||
order={2}
|
||||
weight={600}
|
||||
>
|
||||
{artist.name}
|
||||
</TextTitle>
|
||||
|
|
@ -169,10 +179,15 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
</TitleWrapper>
|
||||
<Group>
|
||||
{currentItem?.genres?.map((genre) => (
|
||||
<Badge key={`carousel-genre-${genre.id}`}>{genre.name}</Badge>
|
||||
<Badge
|
||||
key={`carousel-genre-${genre.id}`}
|
||||
size="lg"
|
||||
>
|
||||
{genre.name}
|
||||
</Badge>
|
||||
))}
|
||||
<Badge>{currentItem?.releaseYear}</Badge>
|
||||
<Badge>{currentItem?.songCount} tracks</Badge>
|
||||
<Badge size="lg">{currentItem?.releaseYear}</Badge>
|
||||
<Badge size="lg">{currentItem?.songCount} tracks</Badge>
|
||||
</Group>
|
||||
</Stack>
|
||||
</InfoColumn>
|
||||
|
|
@ -187,25 +202,25 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
</AnimatePresence>
|
||||
<Group
|
||||
spacing="xs"
|
||||
sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }}
|
||||
sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
|
||||
>
|
||||
<Button
|
||||
disabled={itemIndex === 0}
|
||||
px="lg"
|
||||
radius={100}
|
||||
variant="subtle"
|
||||
size="md"
|
||||
variant="default"
|
||||
onClick={handlePrevious}
|
||||
>
|
||||
<RiArrowLeftSLine size={15} />
|
||||
<RiArrowLeftSLine size="2rem" />
|
||||
</Button>
|
||||
<Button
|
||||
disabled={itemIndex === (data?.length || 1) - 1}
|
||||
px="lg"
|
||||
radius={100}
|
||||
variant="subtle"
|
||||
size="md"
|
||||
variant="default"
|
||||
onClick={handleNext}
|
||||
>
|
||||
<RiArrowRightSLine size={15} />
|
||||
<RiArrowRightSLine size="2rem" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Wrapper>
|
||||
|
|
|
|||
|
|
@ -199,10 +199,11 @@ const Title = ({ children }: TitleProps) => {
|
|||
<Group position="apart">
|
||||
{children}
|
||||
{showPaginationButtons && (
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
<Button
|
||||
compact
|
||||
disabled={!pagination?.hasPreviousPage}
|
||||
size="md"
|
||||
variant="default"
|
||||
onClick={handlePreviousPage}
|
||||
>
|
||||
|
|
@ -210,6 +211,7 @@ const Title = ({ children }: TitleProps) => {
|
|||
</Button>
|
||||
<Button
|
||||
compact
|
||||
size="md"
|
||||
variant="default"
|
||||
onClick={handleNextPage}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@ export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
|
|||
export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
|
||||
return (
|
||||
<MantineModal
|
||||
overlayBlur={2}
|
||||
overlayOpacity={0.2}
|
||||
{...rest}
|
||||
onClose={handlers.close}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Container = styled(motion(Flex))<{
|
|||
position: ${(props) => props.position || 'relative'};
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: ${(props) => props.height || '60px'};
|
||||
height: ${(props) => props.height || '65px'};
|
||||
`;
|
||||
|
||||
const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export const SearchInput = ({
|
|||
ref={mergedRef}
|
||||
{...props}
|
||||
icon={showIcon && <RiSearchLine size={15} />}
|
||||
size="md"
|
||||
styles={{
|
||||
icon: { svg: { fill: 'var(--btn-default-fg)' } },
|
||||
input: {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,10 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
|
|||
color: ${(props) => props.$link && 'var(--main-fg)'};
|
||||
text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ const showToast = ({ type, ...props }: NotificationProps) => {
|
|||
|
||||
return showNotification({
|
||||
autoClose: defaultDuration,
|
||||
disallowClose: true,
|
||||
styles: () => ({
|
||||
closeButton: {},
|
||||
description: {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ const CellContainer = styled(motion.div)<{ height: number }>`
|
|||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
letter-spacing: 0.5px;
|
||||
`;
|
||||
|
||||
const ImageWrapper = styled.div`
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' |
|
|||
: 'flex-start'};
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
letter-spacing: 0.5px;
|
||||
`;
|
||||
|
||||
type Options = {
|
||||
|
|
|
|||
|
|
@ -77,9 +77,9 @@ export const GenericTableHeader = (
|
|||
|
||||
return (
|
||||
<TextHeaderWrapper
|
||||
fw="500"
|
||||
overflow="hidden"
|
||||
position={position}
|
||||
weight={500}
|
||||
>
|
||||
{children || displayName}
|
||||
</TextHeaderWrapper>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export const useFixedTableHeader = () => {
|
|||
const tableContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const isNotPastTableIntersection = useInView(intersectRef, {
|
||||
margin: '-63px 0px 0px 0px',
|
||||
margin: '-68px 0px 0px 0px',
|
||||
});
|
||||
|
||||
const tableInView = useInView(tableContainerRef, {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const MpvRequired = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Text size="lg">Set your MPV executable location below and restart the application.</Text>
|
||||
<Text>Set your MPV executable location below and restart the application.</Text>
|
||||
<Text>
|
||||
MPV is available at the following:{' '}
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ export const ServerCredentialRequired = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Text size="lg">
|
||||
<Text>
|
||||
The selected server '{currentServer?.name}' requires an additional login to
|
||||
access.
|
||||
</Text>
|
||||
<Text size="lg">
|
||||
<Text>
|
||||
Add your credentials in the 'manage servers' menu or switch to a different server.
|
||||
</Text>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Text } from '/@/renderer/components';
|
|||
export const ServerRequired = () => {
|
||||
return (
|
||||
<>
|
||||
<Text size="xl">No server selected.</Text>
|
||||
<Text>No server selected.</Text>
|
||||
<Text>Add or select a server in the file menu.</Text>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -126,8 +126,8 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
More from this artist
|
||||
</TextTitle>
|
||||
|
|
@ -189,7 +189,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
|
|||
ref={showGenres ? null : intersectRef}
|
||||
className="test"
|
||||
py="1rem"
|
||||
spacing="lg"
|
||||
spacing="md"
|
||||
>
|
||||
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
|
||||
<Group spacing="xs">
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const AlbumDetailHeader = forwardRef(
|
|||
item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
|
||||
title={detailQuery?.data?.name || ''}
|
||||
>
|
||||
<Stack mt="1rem">
|
||||
<Stack spacing="sm">
|
||||
<Group>
|
||||
{metadataItems.map((item, index) => (
|
||||
<Fragment key={`item-${item.id}-${index}`}>
|
||||
|
|
@ -79,10 +79,10 @@ export const AlbumDetailHeader = forwardRef(
|
|||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
fw="600"
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
})}
|
||||
weight={600}
|
||||
>
|
||||
{artist.name}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -415,16 +415,17 @@ export const AlbumListHeader = ({
|
|||
>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
maw="20vw"
|
||||
order={3}
|
||||
order={2}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{title || 'Albums'}
|
||||
</TextTitle>
|
||||
<Badge
|
||||
px="1rem"
|
||||
radius="xl"
|
||||
size="lg"
|
||||
size="xl"
|
||||
>
|
||||
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
|
||||
</Badge>
|
||||
|
|
@ -510,7 +511,7 @@ export const AlbumListHeader = ({
|
|||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
>
|
||||
{sortByLabel}
|
||||
|
|
@ -531,7 +532,7 @@ export const AlbumListHeader = ({
|
|||
</DropdownMenu>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
onClick={handleToggleSortOrder}
|
||||
>
|
||||
|
|
@ -552,7 +553,7 @@ export const AlbumListHeader = ({
|
|||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
>
|
||||
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
|
||||
|
|
@ -574,7 +575,7 @@ export const AlbumListHeader = ({
|
|||
)}
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
onClick={handleOpenFiltersModal}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NativeScrollArea } from '/@/renderer/components';
|
||||
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
|
||||
import { AnimatedPage, LibraryHeaderBar, PlayButton } from '/@/renderer/features/shared';
|
||||
import { useRef } from 'react';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
|
||||
|
|
@ -42,7 +42,7 @@ const AlbumDetailRoute = () => {
|
|||
backgroundColor: background,
|
||||
children: (
|
||||
<LibraryHeaderBar>
|
||||
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
|
||||
<PlayButton onClick={handlePlay} />
|
||||
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
|
||||
</LibraryHeaderBar>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -165,8 +165,8 @@ export const AlbumArtistDetailContent = () => {
|
|||
title: (
|
||||
<>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Recent releases
|
||||
</TextTitle>
|
||||
|
|
@ -193,8 +193,8 @@ export const AlbumArtistDetailContent = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Appears on
|
||||
</TextTitle>
|
||||
|
|
@ -211,8 +211,8 @@ export const AlbumArtistDetailContent = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Related artists
|
||||
</TextTitle>
|
||||
|
|
@ -281,7 +281,7 @@ export const AlbumArtistDetailContent = () => {
|
|||
return (
|
||||
<ContentContainer ref={cq.ref}>
|
||||
<Box component="section">
|
||||
<Group spacing="lg">
|
||||
<Group spacing="md">
|
||||
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
|
||||
<Group spacing="xs">
|
||||
<Button
|
||||
|
|
@ -369,8 +369,8 @@ export const AlbumArtistDetailContent = () => {
|
|||
maw="1280px"
|
||||
>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
About {detailQuery?.data?.name}
|
||||
</TextTitle>
|
||||
|
|
@ -393,8 +393,8 @@ export const AlbumArtistDetailContent = () => {
|
|||
align="flex-end"
|
||||
>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Top Songs
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
import { useMemo, useRef } from 'react';
|
||||
import { ColDef } from '@ag-grid-community/core';
|
||||
import { Box, Group, Stack } from '@mantine/core';
|
||||
import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
|
||||
import { useParams } from 'react-router';
|
||||
import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types';
|
||||
import {
|
||||
getColumnDefs,
|
||||
VirtualTable,
|
||||
Text,
|
||||
TextTitle,
|
||||
NativeScrollArea,
|
||||
} from '/@/renderer/components';
|
||||
import { useAlbumList } from '/@/renderer/features/albums';
|
||||
import { PlayButton } from '/@/renderer/features/shared';
|
||||
import { useSongList } from '/@/renderer/features/songs';
|
||||
import { useSongListStore } from '/@/renderer/store';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { Play } from '/@/renderer/types';
|
||||
|
||||
const RowVirtualizer = ({
|
||||
rows,
|
||||
columnDefs,
|
||||
handlePlay,
|
||||
rowVirtualizer,
|
||||
}: {
|
||||
columnDefs: ColDef[];
|
||||
handlePlay: (play: Play, data: any[]) => void;
|
||||
rowVirtualizer: Virtualizer<any, Element>;
|
||||
rows: any[];
|
||||
}) => {
|
||||
const items = rowVirtualizer.getVirtualItems();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{items.map((virtualRow) => (
|
||||
<div
|
||||
key={rows?.[virtualRow.index].id}
|
||||
style={{
|
||||
height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 300}px`,
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
transform: `translateY(${virtualRow.start}px)`,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
p="2rem"
|
||||
spacing="lg"
|
||||
>
|
||||
<Group noWrap>
|
||||
<img
|
||||
alt={`${rows?.[virtualRow.index]?.name}-cover`}
|
||||
height={150}
|
||||
src={rows?.[virtualRow.index]?.imageUrl}
|
||||
width={150}
|
||||
/>
|
||||
<Stack>
|
||||
<TextTitle
|
||||
order={1}
|
||||
weight={700}
|
||||
>
|
||||
{rows?.[virtualRow.index]?.name}
|
||||
</TextTitle>
|
||||
<Text $secondary>{rows?.[virtualRow.index]?.releaseYear}</Text>
|
||||
<PlayButton
|
||||
h="35px"
|
||||
w="35px"
|
||||
onClick={() => handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)}
|
||||
/>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Box sx={{ height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 60}px` }}>
|
||||
<VirtualTable
|
||||
autoFitColumns
|
||||
suppressCellFocus
|
||||
suppressHorizontalScroll
|
||||
suppressLoadingOverlay
|
||||
suppressRowDrag
|
||||
transparentHeader
|
||||
columnDefs={columnDefs}
|
||||
getRowId={(data) => data.data.id}
|
||||
rowData={rows?.[virtualRow.index]?.songs}
|
||||
rowHeight={60}
|
||||
rowModelType="clientSide"
|
||||
rowSelection="multiple"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AlbumArtistDiscographyDetailList = () => {
|
||||
const { albumArtistId } = useParams() as { albumArtistId: string };
|
||||
// const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
|
||||
|
||||
const albumsQuery = useAlbumList({
|
||||
jfParams: { artistIds: albumArtistId },
|
||||
ndParams: { artist_id: albumArtistId },
|
||||
sortBy: AlbumListSort.YEAR,
|
||||
sortOrder: SortOrder.DESC,
|
||||
startIndex: 0,
|
||||
});
|
||||
|
||||
const songsQuery = useSongList(
|
||||
{
|
||||
albumIds: albumsQuery.data?.items?.map((album) => album.id),
|
||||
sortBy: SongListSort.ALBUM,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
{
|
||||
enabled: !albumsQuery.isLoading,
|
||||
},
|
||||
);
|
||||
|
||||
const songsByAlbum = useMemo(() => {
|
||||
if (songsQuery.isLoading || albumsQuery.isLoading) return null;
|
||||
|
||||
const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => {
|
||||
if (!acc[song.albumId as keyof typeof acc]) {
|
||||
acc[song.albumId as keyof typeof acc] = [];
|
||||
}
|
||||
|
||||
acc[song.albumId as keyof typeof acc].push(song);
|
||||
|
||||
return acc;
|
||||
}, {} as Record<string, Song[]>);
|
||||
|
||||
const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => {
|
||||
return {
|
||||
...album,
|
||||
songs: songsByAlbumMap?.[album.id],
|
||||
};
|
||||
});
|
||||
|
||||
return albumDetailWithSongs;
|
||||
}, [
|
||||
albumsQuery?.data?.items,
|
||||
albumsQuery?.isLoading,
|
||||
songsQuery?.data?.items,
|
||||
songsQuery?.isLoading,
|
||||
]);
|
||||
|
||||
const page = useSongListStore();
|
||||
|
||||
const columnDefs: ColDef[] = useMemo(
|
||||
() =>
|
||||
getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
|
||||
[page.table.columns],
|
||||
);
|
||||
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
const parentRef = useRef<any>();
|
||||
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: songsByAlbum?.length || 0,
|
||||
estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300,
|
||||
getScrollElement: () => parentRef.current,
|
||||
overscan: 3,
|
||||
});
|
||||
|
||||
const handlePlay = (play: Play, data: any[]) => {
|
||||
handlePlayQueueAdd?.({
|
||||
byData: data,
|
||||
play,
|
||||
});
|
||||
};
|
||||
|
||||
if (albumsQuery.isLoading || songsQuery.isLoading) return null;
|
||||
|
||||
return (
|
||||
<NativeScrollArea
|
||||
ref={parentRef}
|
||||
scrollBarOffset="0"
|
||||
>
|
||||
{songsByAlbum && (
|
||||
<RowVirtualizer
|
||||
columnDefs={columnDefs}
|
||||
handlePlay={handlePlay}
|
||||
rowVirtualizer={rowVirtualizer}
|
||||
rows={songsByAlbum}
|
||||
/>
|
||||
)}
|
||||
</NativeScrollArea>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,473 @@
|
|||
import type { IDatasource } from '@ag-grid-community/core';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { Flex, Group, Stack } from '@mantine/core';
|
||||
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
RiFilter3Line,
|
||||
RiFolder2Line,
|
||||
RiMoreFill,
|
||||
RiSortAsc,
|
||||
RiSortDesc,
|
||||
} from 'react-icons/ri';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
LibraryItem,
|
||||
ServerType,
|
||||
SongListQuery,
|
||||
SongListSort,
|
||||
SortOrder,
|
||||
} from '/@/renderer/api/types';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
PageHeader,
|
||||
Slider,
|
||||
TextTitle,
|
||||
Switch,
|
||||
MultiSelect,
|
||||
Text,
|
||||
SONG_TABLE_COLUMNS,
|
||||
Badge,
|
||||
SpinnerIcon,
|
||||
} from '/@/renderer/components';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
import { useMusicFolders } from '/@/renderer/features/shared';
|
||||
import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
|
||||
import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
import {
|
||||
SongListFilter,
|
||||
useCurrentServer,
|
||||
useSetSongFilters,
|
||||
useSetSongStore,
|
||||
useSetSongTable,
|
||||
useSetSongTablePagination,
|
||||
useSongListStore,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
|
||||
|
||||
const FILTERS = {
|
||||
jellyfin: [
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
|
||||
],
|
||||
navidrome: [
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
|
||||
],
|
||||
};
|
||||
|
||||
const ORDER = [
|
||||
{ name: 'Ascending', value: SortOrder.ASC },
|
||||
{ name: 'Descending', value: SortOrder.DESC },
|
||||
];
|
||||
|
||||
interface SongListHeaderProps {
|
||||
itemCount?: number;
|
||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||
}
|
||||
|
||||
export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
|
||||
const server = useCurrentServer();
|
||||
const page = useSongListStore();
|
||||
const setPage = useSetSongStore();
|
||||
const setFilter = useSetSongFilters();
|
||||
const setTable = useSetSongTable();
|
||||
const setPagination = useSetSongTablePagination();
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const cq = useContainerQuery();
|
||||
|
||||
const musicFoldersQuery = useMusicFolders();
|
||||
|
||||
const sortByLabel =
|
||||
(server?.type &&
|
||||
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
|
||||
(f) => f.value === page.filter.sortBy,
|
||||
)?.name) ||
|
||||
'Unknown';
|
||||
|
||||
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
|
||||
|
||||
const handleFilterChange = useCallback(
|
||||
async (filters?: SongListFilter) => {
|
||||
const dataSource: IDatasource = {
|
||||
getRows: async (params) => {
|
||||
const limit = params.endRow - params.startRow;
|
||||
const startIndex = params.startRow;
|
||||
|
||||
const pageFilters = filters || page.filter;
|
||||
|
||||
const queryKey = queryKeys.songs.list(server?.id || '', {
|
||||
limit,
|
||||
startIndex,
|
||||
...pageFilters,
|
||||
});
|
||||
|
||||
const songsRes = await queryClient.fetchQuery(
|
||||
queryKey,
|
||||
async ({ signal }) =>
|
||||
api.controller.getSongList({
|
||||
query: {
|
||||
limit,
|
||||
startIndex,
|
||||
...pageFilters,
|
||||
},
|
||||
server,
|
||||
signal,
|
||||
}),
|
||||
{ cacheTime: 1000 * 60 * 1 },
|
||||
);
|
||||
|
||||
const songs = api.normalize.songList(songsRes, server);
|
||||
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
|
||||
},
|
||||
rowCount: undefined,
|
||||
};
|
||||
tableRef.current?.api.setDatasource(dataSource);
|
||||
tableRef.current?.api.purgeInfiniteCache();
|
||||
tableRef.current?.api.ensureIndexVisible(0, 'top');
|
||||
setPagination({ currentPage: 0 });
|
||||
},
|
||||
[page.filter, server, setPagination, tableRef],
|
||||
);
|
||||
|
||||
const handleSetSortBy = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value || !server?.type) return;
|
||||
|
||||
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
|
||||
(f) => f.value === e.currentTarget.value,
|
||||
)?.defaultOrder;
|
||||
|
||||
const updatedFilters = setFilter({
|
||||
sortBy: e.currentTarget.value as SongListSort,
|
||||
sortOrder: sortOrder || SortOrder.ASC,
|
||||
});
|
||||
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
[handleFilterChange, server?.type, setFilter],
|
||||
);
|
||||
|
||||
const handleSetMusicFolder = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value) return;
|
||||
|
||||
let updatedFilters = null;
|
||||
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
|
||||
updatedFilters = setFilter({ musicFolderId: undefined });
|
||||
} else {
|
||||
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
|
||||
}
|
||||
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
[handleFilterChange, page.filter.musicFolderId, setFilter],
|
||||
);
|
||||
|
||||
const handleToggleSortOrder = useCallback(() => {
|
||||
const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
|
||||
const updatedFilters = setFilter({ sortOrder: newSortOrder });
|
||||
handleFilterChange(updatedFilters);
|
||||
}, [page.filter.sortOrder, handleFilterChange, setFilter]);
|
||||
|
||||
const handleSetViewType = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value) return;
|
||||
const display = e.currentTarget.value as ListDisplayType;
|
||||
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
|
||||
|
||||
if (display === ListDisplayType.TABLE) {
|
||||
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
|
||||
setPagination({ currentPage: 0 });
|
||||
} else if (display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setPagination({ currentPage: 0 });
|
||||
}
|
||||
},
|
||||
[page, setPage, setPagination, tableRef],
|
||||
);
|
||||
|
||||
// const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
|
||||
// const previousSearchTerm = page.filter.searchTerm;
|
||||
// const searchTerm = e.target.value === '' ? undefined : e.target.value;
|
||||
// const updatedFilters = setFilter({ searchTerm });
|
||||
// if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
|
||||
// }, 500);
|
||||
|
||||
const handleTableColumns = (values: TableColumn[]) => {
|
||||
const existingColumns = page.table.columns;
|
||||
|
||||
if (values.length === 0) {
|
||||
return setTable({
|
||||
columns: [],
|
||||
});
|
||||
}
|
||||
|
||||
// If adding a column
|
||||
if (values.length > existingColumns.length) {
|
||||
const newColumn = { column: values[values.length - 1], width: 100 };
|
||||
|
||||
return setTable({ columns: [...existingColumns, newColumn] });
|
||||
}
|
||||
|
||||
// If removing a column
|
||||
const removed = existingColumns.filter((column) => !values.includes(column.column));
|
||||
const newColumns = existingColumns.filter((column) => !removed.includes(column));
|
||||
|
||||
return setTable({ columns: newColumns });
|
||||
};
|
||||
|
||||
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setTable({ autoFit: e.currentTarget.checked });
|
||||
|
||||
if (e.currentTarget.checked) {
|
||||
tableRef.current?.api.sizeColumnsToFit();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowHeight = (e: number) => {
|
||||
setTable({ rowHeight: e });
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
|
||||
handleFilterChange(page.filter);
|
||||
};
|
||||
|
||||
const handlePlay = async (play: Play) => {
|
||||
if (!itemCount || itemCount === 0) return;
|
||||
const query: SongListQuery = { startIndex: 0, ...page.filter };
|
||||
|
||||
handlePlayQueueAdd?.({
|
||||
byItemType: {
|
||||
id: query,
|
||||
type: LibraryItem.SONG,
|
||||
},
|
||||
play,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeader p="1rem">
|
||||
<Flex
|
||||
ref={cq.ref}
|
||||
direction="row"
|
||||
justify="space-between"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
gap="md"
|
||||
justify="center"
|
||||
>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
rightIcon={<RiArrowDownSLine size={15} />}
|
||||
size="xl"
|
||||
sx={{ paddingLeft: 0, paddingRight: 0 }}
|
||||
variant="subtle"
|
||||
>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Tracks
|
||||
</TextTitle>
|
||||
<Badge
|
||||
radius="xl"
|
||||
size="lg"
|
||||
>
|
||||
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Label>Display type</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE}
|
||||
value={ListDisplayType.TABLE}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Table
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
|
||||
value={ListDisplayType.TABLE_PAGINATED}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Table (paginated)
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
|
||||
<DropdownMenu.Item closeMenuOnClick={false}>
|
||||
<Slider
|
||||
defaultValue={page.table.rowHeight || 0}
|
||||
label={null}
|
||||
max={100}
|
||||
min={25}
|
||||
onChangeEnd={handleRowHeight}
|
||||
/>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
closeMenuOnClick={false}
|
||||
component="div"
|
||||
sx={{ cursor: 'default' }}
|
||||
>
|
||||
<Stack>
|
||||
<MultiSelect
|
||||
clearable
|
||||
data={SONG_TABLE_COLUMNS}
|
||||
defaultValue={page.table?.columns.map((column) => column.column)}
|
||||
width={300}
|
||||
onChange={handleTableColumns}
|
||||
/>
|
||||
<Group position="apart">
|
||||
<Text>Auto Fit Columns</Text>
|
||||
<Switch
|
||||
defaultChecked={page.table.autoFit}
|
||||
onChange={handleAutoFitColumns}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
>
|
||||
{sortByLabel}
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
|
||||
<DropdownMenu.Item
|
||||
key={`filter-${filter.name}`}
|
||||
$isActive={filter.value === page.filter.sortBy}
|
||||
value={filter.value}
|
||||
onClick={handleSetSortBy}
|
||||
>
|
||||
{filter.name}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
compact
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
onClick={handleToggleSortOrder}
|
||||
>
|
||||
{cq.isMd ? (
|
||||
sortOrderLabel
|
||||
) : (
|
||||
<>
|
||||
{page.filter.sortOrder === SortOrder.ASC ? (
|
||||
<RiSortAsc size={15} />
|
||||
) : (
|
||||
<RiSortDesc size={15} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{server?.type === ServerType.JELLYFIN && (
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw={600}
|
||||
variant="subtle"
|
||||
>
|
||||
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
{musicFoldersQuery.data?.map((folder) => (
|
||||
<DropdownMenu.Item
|
||||
key={`musicFolder-${folder.id}`}
|
||||
$isActive={page.filter.musicFolderId === folder.id}
|
||||
value={folder.id}
|
||||
onClick={handleSetMusicFolder}
|
||||
>
|
||||
{folder.name}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
variant="subtle"
|
||||
>
|
||||
{cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
{server?.type === ServerType.NAVIDROME ? (
|
||||
<NavidromeSongFilters handleFilterChange={handleFilterChange} />
|
||||
) : (
|
||||
<JellyfinSongFilters handleFilterChange={handleFilterChange} />
|
||||
)}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
variant="subtle"
|
||||
>
|
||||
<RiMoreFill size={15} />
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
|
||||
Add to queue
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
|
||||
Add to queue next
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</PageHeader>
|
||||
);
|
||||
};
|
||||
|
|
@ -46,7 +46,7 @@ export const AlbumArtistDetailHeader = forwardRef(
|
|||
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
|
||||
title={detailQuery?.data?.name || ''}
|
||||
>
|
||||
<Stack mt="1rem">
|
||||
<Stack>
|
||||
<Group>
|
||||
{metadataItems
|
||||
.filter((i) => i.value)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { MutableRefObject, useCallback, useMemo } from 'react';
|
||||
import type {
|
||||
BodyScrollEvent,
|
||||
ColDef,
|
||||
GridReadyEvent,
|
||||
IDatasource,
|
||||
|
|
@ -8,6 +7,7 @@ import type {
|
|||
RowDoubleClickedEvent,
|
||||
} from '@ag-grid-community/core';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { useSetState } from '@mantine/hooks';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
|
|
@ -21,11 +21,9 @@ import {
|
|||
SongListFilter,
|
||||
useCurrentServer,
|
||||
useSetSongTable,
|
||||
useSetSongTablePagination,
|
||||
useSongListStore,
|
||||
useSongTablePagination,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType } from '/@/renderer/types';
|
||||
import { ListDisplayType, TablePagination as TablePaginationType } from '/@/renderer/types';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
|
||||
|
|
@ -49,8 +47,13 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
const server = useCurrentServer();
|
||||
const page = useSongListStore();
|
||||
|
||||
const pagination = useSongTablePagination();
|
||||
const setPagination = useSetSongTablePagination();
|
||||
const [pagination, setPagination] = useSetState<TablePaginationType>({
|
||||
currentPage: 0,
|
||||
itemsPerPage: 100,
|
||||
totalItems: itemCount || 0,
|
||||
totalPages: 0,
|
||||
});
|
||||
|
||||
const setTable = useSetSongTable();
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const playButtonBehavior = usePlayButtonBehavior();
|
||||
|
|
@ -62,14 +65,6 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
[page.table.columns],
|
||||
);
|
||||
|
||||
const defaultColumnDefs: ColDef = useMemo(() => {
|
||||
return {
|
||||
lockPinned: true,
|
||||
lockVisible: true,
|
||||
resizable: true,
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onGridReady = useCallback(
|
||||
(params: GridReadyEvent) => {
|
||||
const dataSource: IDatasource = {
|
||||
|
|
@ -79,10 +74,7 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
|
||||
const queryKey = queryKeys.songs.list(server?.id || '', {
|
||||
...filter,
|
||||
// artistIds: [albumArtistId],
|
||||
limit,
|
||||
// sortBy: SongListSort.ALBUM,
|
||||
// sortOrder: SortOrder.ASC,
|
||||
startIndex,
|
||||
});
|
||||
|
||||
|
|
@ -91,11 +83,8 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
async ({ signal }) =>
|
||||
api.controller.getSongList({
|
||||
query: {
|
||||
// artistIds: [albumArtistId],
|
||||
...filter,
|
||||
limit,
|
||||
// sortBy: SongListSort.ALBUM,
|
||||
// sortOrder: SortOrder.ASC,
|
||||
startIndex,
|
||||
},
|
||||
server,
|
||||
|
|
@ -110,9 +99,8 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
rowCount: undefined,
|
||||
};
|
||||
params.api.setDatasource(dataSource);
|
||||
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
|
||||
},
|
||||
[filter, page.table.scrollOffset, queryClient, server],
|
||||
[filter, queryClient, server],
|
||||
);
|
||||
|
||||
const onPaginationChanged = useCallback(
|
||||
|
|
@ -132,12 +120,6 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||
);
|
||||
|
||||
const handleGridSizeChange = () => {
|
||||
if (page.table.autoFit) {
|
||||
tableRef?.current?.api.sizeColumnsToFit();
|
||||
}
|
||||
};
|
||||
|
||||
const handleColumnChange = useCallback(() => {
|
||||
const { columnApi } = tableRef?.current || {};
|
||||
const columnsOrder = columnApi?.getAllGridColumns();
|
||||
|
|
@ -164,11 +146,6 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
|
||||
const debouncedColumnChange = debounce(handleColumnChange, 200);
|
||||
|
||||
const handleScroll = (e: BodyScrollEvent) => {
|
||||
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
|
||||
setTable({ scrollOffset });
|
||||
};
|
||||
|
||||
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
|
||||
|
||||
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
|
||||
|
|
@ -189,18 +166,17 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
ref={tableRef}
|
||||
alwaysShowHorizontalScroll
|
||||
animateRows
|
||||
autoFitColumns
|
||||
maintainColumnOrder
|
||||
suppressCopyRowsToClipboard
|
||||
suppressMoveWhenRowDragging
|
||||
suppressPaginationPanel
|
||||
suppressRowDrag
|
||||
suppressScrollOnNewData
|
||||
autoFitColumns={page.table.autoFit}
|
||||
blockLoadDebounceMillis={200}
|
||||
cacheBlockSize={500}
|
||||
cacheOverflowSize={1}
|
||||
columnDefs={columnDefs}
|
||||
defaultColDef={defaultColumnDefs}
|
||||
enableCellChangeFlash={false}
|
||||
getRowId={(data) => data.data.id}
|
||||
infiniteInitialRowCount={itemCount || 100}
|
||||
|
|
@ -211,12 +187,10 @@ export const AlbumArtistDetailSongListContent = ({
|
|||
rowHeight={page.table.rowHeight || 40}
|
||||
rowModelType="infinite"
|
||||
rowSelection="multiple"
|
||||
onBodyScrollEnd={handleScroll}
|
||||
onCellContextMenu={handleContextMenu}
|
||||
onColumnMoved={handleColumnChange}
|
||||
onColumnResized={debouncedColumnChange}
|
||||
onGridReady={onGridReady}
|
||||
onGridSizeChanged={handleGridSizeChange}
|
||||
onPaginationChanged={onPaginationChanged}
|
||||
onRowDoubleClicked={handleRowDoubleClick}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@ export const AlbumArtistDetailSongListHeader = ({
|
|||
const server = useCurrentServer();
|
||||
const page = useSongListStore();
|
||||
const setPage = useSetSongStore();
|
||||
// const setFilter = useSetSongFilters();
|
||||
const setTable = useSetSongTable();
|
||||
const setPagination = useSetSongTablePagination();
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
|
@ -300,10 +299,10 @@ export const AlbumArtistDetailSongListHeader = ({
|
|||
>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
maw="20vw"
|
||||
order={3}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{title}
|
||||
</TextTitle>
|
||||
|
|
@ -402,7 +401,7 @@ export const AlbumArtistDetailSongListHeader = ({
|
|||
sortOrderLabel
|
||||
) : (
|
||||
<>
|
||||
{page.filter.sortOrder === SortOrder.ASC ? (
|
||||
{filter.sortOrder === SortOrder.ASC ? (
|
||||
<RiSortAsc size={15} />
|
||||
) : (
|
||||
<RiSortDesc size={15} />
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@ export const AlbumArtistDetailTopSongsListHeader = ({
|
|||
>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
maw="20vw"
|
||||
order={3}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{title}
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,14 @@ import { queryKeys } from '/@/renderer/api/query-keys';
|
|||
import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import {
|
||||
ALBUMARTIST_TABLE_COLUMNS,
|
||||
Badge,
|
||||
Button,
|
||||
DropdownMenu,
|
||||
MultiSelect,
|
||||
PageHeader,
|
||||
SearchInput,
|
||||
Slider,
|
||||
SpinnerIcon,
|
||||
Switch,
|
||||
Text,
|
||||
TextTitle,
|
||||
|
|
@ -72,10 +74,15 @@ const HeaderItems = styled.div`
|
|||
|
||||
interface AlbumArtistListHeaderProps {
|
||||
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
|
||||
itemCount?: number;
|
||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||
}
|
||||
|
||||
export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHeaderProps) => {
|
||||
export const AlbumArtistListHeader = ({
|
||||
itemCount,
|
||||
gridRef,
|
||||
tableRef,
|
||||
}: AlbumArtistListHeaderProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const server = useCurrentServer();
|
||||
const setPage = useSetAlbumArtistStore();
|
||||
|
|
@ -308,12 +315,21 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
|
|||
size="xl"
|
||||
variant="subtle"
|
||||
>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
>
|
||||
Album Artists
|
||||
</TextTitle>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Album Artists
|
||||
</TextTitle>
|
||||
<Badge
|
||||
px="1rem"
|
||||
radius="xl"
|
||||
size="xl"
|
||||
>
|
||||
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
|
||||
</Badge>
|
||||
</Group>
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import { useParams } from 'react-router';
|
||||
import { AlbumListSort, SortOrder, SongListSort } from '/@/renderer/api/types';
|
||||
import { VirtualGridContainer } from '/@/renderer/components';
|
||||
import { useAlbumList } from '/@/renderer/features/albums';
|
||||
import { AnimatedPage } from '/@/renderer/features/shared';
|
||||
import { useSongList } from '/@/renderer/features/songs';
|
||||
// import { useSongListStore } from '/@/renderer/store';
|
||||
// import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
// import { Play } from '/@/renderer/types';
|
||||
// import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
|
||||
|
||||
const AlbumArtistDetailDiscographyRoute = () => {
|
||||
const { albumArtistId } = useParams() as { albumArtistId: string };
|
||||
// const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
|
||||
|
||||
const albumsQuery = useAlbumList({
|
||||
jfParams: { artistIds: albumArtistId },
|
||||
ndParams: { artist_id: albumArtistId },
|
||||
sortBy: AlbumListSort.YEAR,
|
||||
sortOrder: SortOrder.DESC,
|
||||
startIndex: 0,
|
||||
});
|
||||
|
||||
const songsQuery = useSongList(
|
||||
{
|
||||
albumIds: albumsQuery.data?.items?.map((album) => album.id),
|
||||
sortBy: SongListSort.ALBUM,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
},
|
||||
{
|
||||
enabled: !albumsQuery.isLoading,
|
||||
},
|
||||
);
|
||||
|
||||
// const page = useSongListStore();
|
||||
|
||||
// const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
if (albumsQuery.isLoading || songsQuery.isLoading) return null;
|
||||
|
||||
// const handlePlay = (play: Play, data: any[]) => {
|
||||
// handlePlayQueueAdd?.({
|
||||
// byData: data,
|
||||
// play,
|
||||
// });
|
||||
// };
|
||||
|
||||
return (
|
||||
<AnimatedPage>
|
||||
<VirtualGridContainer>
|
||||
{/* <AlbumArtistDiscographyHeader />
|
||||
<PageHeader>
|
||||
<Group
|
||||
position="apart"
|
||||
w="100%"
|
||||
>
|
||||
{albumArtistQuery?.data?.name || ''}
|
||||
<Group spacing="xs">
|
||||
<Button
|
||||
compact
|
||||
radius="xl"
|
||||
variant="subtle"
|
||||
>
|
||||
<RiListUnordered size="1.5em" />
|
||||
</Button>
|
||||
<Button
|
||||
compact
|
||||
radius="xl"
|
||||
variant="subtle"
|
||||
>
|
||||
<RiLayoutGridFill size="1.5em" />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</PageHeader> *
|
||||
<AlbumArtistDiscographyDetailList /> */}
|
||||
</VirtualGridContainer>
|
||||
</AnimatedPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlbumArtistDetailDiscographyRoute;
|
||||
|
|
@ -4,16 +4,38 @@ import { AnimatedPage } from '/@/renderer/features/shared';
|
|||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { useRef } from 'react';
|
||||
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
|
||||
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
|
||||
import { useAlbumArtistListStore } from '/@/renderer/store';
|
||||
|
||||
const AlbumArtistListRoute = () => {
|
||||
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
|
||||
const tableRef = useRef<AgGridReactType | null>(null);
|
||||
const page = useAlbumArtistListStore();
|
||||
const filters = page.filter;
|
||||
|
||||
const itemCountCheck = useAlbumArtistList(
|
||||
{
|
||||
limit: 1,
|
||||
startIndex: 0,
|
||||
...filters,
|
||||
},
|
||||
{
|
||||
cacheTime: 1000 * 60 * 60 * 2,
|
||||
staleTime: 1000 * 60 * 60 * 2,
|
||||
},
|
||||
);
|
||||
|
||||
const itemCount =
|
||||
itemCountCheck.data?.totalRecordCount === null
|
||||
? undefined
|
||||
: itemCountCheck.data?.totalRecordCount;
|
||||
|
||||
return (
|
||||
<AnimatedPage>
|
||||
<VirtualGridContainer>
|
||||
<AlbumArtistListHeader
|
||||
gridRef={gridRef}
|
||||
itemCount={itemCount}
|
||||
tableRef={tableRef}
|
||||
/>
|
||||
<AlbumArtistListContent
|
||||
|
|
|
|||
|
|
@ -123,8 +123,8 @@ const HomeRoute = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Explore from your library
|
||||
</TextTitle>
|
||||
|
|
@ -142,8 +142,8 @@ const HomeRoute = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Recently played
|
||||
</TextTitle>
|
||||
|
|
@ -161,8 +161,8 @@ const HomeRoute = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Newly added releases
|
||||
</TextTitle>
|
||||
|
|
@ -180,8 +180,8 @@ const HomeRoute = () => {
|
|||
},
|
||||
title: (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Most played
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export const NowPlayingHeader = () => {
|
|||
<PageHeader>
|
||||
<Group p="1rem">
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
Queue
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const SidebarPlayQueue = () => {
|
|||
<>
|
||||
<Flex
|
||||
bg="var(--titlebar-bg)"
|
||||
h="60px"
|
||||
h="65px"
|
||||
sx={{ position: 'relative' }}
|
||||
w="100%"
|
||||
>
|
||||
|
|
@ -40,7 +40,7 @@ export const SidebarPlayQueue = () => {
|
|||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
h="calc(100% - 60px)"
|
||||
h="calc(100% - 65px)"
|
||||
sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
|
||||
w="100%"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const PlaylistDetailHeader = forwardRef(
|
|||
item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
|
||||
title={detailQuery?.data?.name || ''}
|
||||
>
|
||||
<Stack mt="1rem">
|
||||
<Stack>
|
||||
<Group>
|
||||
{metadataItems.map((item, index) => (
|
||||
<Fragment key={`item-${item.id}-${index}`}>
|
||||
|
|
|
|||
|
|
@ -262,8 +262,8 @@ export const PlaylistDetailSongListHeader = ({
|
|||
variant="subtle"
|
||||
>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
{detailQuery?.data?.name}
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -20,16 +20,11 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
mt="1rem"
|
||||
p="1rem"
|
||||
spacing="xl"
|
||||
>
|
||||
<Stack>
|
||||
<ServerSection
|
||||
title={
|
||||
<Group position="apart">
|
||||
<Text>Server details</Text>
|
||||
<Group spacing="md" />
|
||||
</Group>
|
||||
}
|
||||
>
|
||||
|
|
@ -39,30 +34,31 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
|
|||
onCancel={() => editHandlers.toggle()}
|
||||
/>
|
||||
) : (
|
||||
<Group position="apart">
|
||||
<Group>
|
||||
<Stack>
|
||||
<Group noWrap>
|
||||
<Stack>
|
||||
<Text>URL</Text>
|
||||
<Text>Username</Text>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Text size="sm">{server.url}</Text>
|
||||
<Text size="sm">{server.username}</Text>
|
||||
<Text>{server.url}</Text>
|
||||
<Text>{server.username}</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Group>
|
||||
<Group grow>
|
||||
<Button
|
||||
leftIcon={<RiEdit2Fill />}
|
||||
tooltip={{ label: 'Edit server details' }}
|
||||
variant="subtle"
|
||||
onClick={() => editHandlers.toggle()}
|
||||
>
|
||||
<RiEdit2Fill />
|
||||
Edit
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</ServerSection>
|
||||
<Divider my="xl" />
|
||||
<Divider my="sm" />
|
||||
<TimeoutButton
|
||||
leftIcon={<RiDeleteBin2Line />}
|
||||
timeoutProps={{ callback: handleDeleteServer, duration: 1500 }}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const ServerList = () => {
|
|||
sx={{
|
||||
position: 'absolute',
|
||||
right: 55,
|
||||
transform: 'translateY(-4.5rem)',
|
||||
transform: 'translateY(-2.5rem)',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export const GeneralTab = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<Stack spacing="xl">
|
||||
<Stack spacing="md">
|
||||
{options
|
||||
.filter((o) => !o.isHidden)
|
||||
.map((option) => (
|
||||
|
|
|
|||
|
|
@ -360,7 +360,7 @@ export const PlaybackTab = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<Stack spacing="xl">
|
||||
<Stack spacing="md">
|
||||
{playerOptions
|
||||
.filter((o) => !o.isHidden)
|
||||
.map((option) => (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
|
|||
align="center"
|
||||
h="100%"
|
||||
px="1rem"
|
||||
spacing="xl"
|
||||
spacing="md"
|
||||
>
|
||||
{children}
|
||||
</Group>
|
||||
|
|
@ -28,9 +28,9 @@ interface TitleProps {
|
|||
const Title = ({ children }: TitleProps) => {
|
||||
return (
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={2}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{children}
|
||||
</TextTitle>
|
||||
|
|
@ -39,14 +39,13 @@ const Title = ({ children }: TitleProps) => {
|
|||
|
||||
interface PlayButtonProps {
|
||||
onClick: () => void;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
const PlayButton = ({ size, onClick }: PlayButtonProps) => {
|
||||
const PlayButton = ({ onClick }: PlayButtonProps) => {
|
||||
return (
|
||||
<PlayBtn
|
||||
h={size || 45}
|
||||
w={size || 45}
|
||||
h="50px"
|
||||
w="50px"
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -134,20 +134,19 @@ export const LibraryHeader = forwardRef(
|
|||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
fw="600"
|
||||
sx={{ textTransform: 'uppercase' }}
|
||||
to={item.route}
|
||||
tt="uppercase"
|
||||
weight={600}
|
||||
>
|
||||
{item.type}
|
||||
</Text>
|
||||
</Group>
|
||||
<TextTitle
|
||||
fw="900"
|
||||
lh="1.12"
|
||||
lh="5rem"
|
||||
lineClamp={2}
|
||||
overflow="hidden"
|
||||
pb=".06em"
|
||||
sx={{ fontSize: titleSize, overflow: 'hidden' }}
|
||||
weight={900}
|
||||
>
|
||||
{title}
|
||||
</TextTitle>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ const MotionButton = styled(motion(_Button))`
|
|||
export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
|
||||
return (
|
||||
<MotionButton
|
||||
h={50}
|
||||
h="50px"
|
||||
variant="filled"
|
||||
w={50}
|
||||
w="50px"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { MouseEvent } from 'react';
|
||||
import { Stack, Grid, Accordion, Center, Group } from '@mantine/core';
|
||||
import { closeAllModals, openModal } from '@mantine/modals';
|
||||
import { SpotlightProvider } from '@mantine/spotlight';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { BsCollection } from 'react-icons/bs';
|
||||
import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
|
||||
|
|
@ -135,26 +134,28 @@ export const Sidebar = () => {
|
|||
spacing={0}
|
||||
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
|
||||
>
|
||||
<ActionsContainer p={10}>
|
||||
<ActionsContainer
|
||||
gutter="sm"
|
||||
p={10}
|
||||
>
|
||||
<Grid.Col span={8}>
|
||||
<SpotlightProvider actions={[]}>
|
||||
<TextInput
|
||||
disabled
|
||||
readOnly
|
||||
icon={<RiSearchLine />}
|
||||
placeholder="Search"
|
||||
rightSectionWidth={90}
|
||||
// onClick={() => openSpotlight()}
|
||||
/>
|
||||
</SpotlightProvider>
|
||||
<TextInput
|
||||
disabled
|
||||
readOnly
|
||||
icon={<RiSearchLine />}
|
||||
placeholder="Search"
|
||||
rightSectionWidth={90}
|
||||
size="md"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<Group
|
||||
grow
|
||||
spacing={5}
|
||||
spacing="sm"
|
||||
>
|
||||
<Button
|
||||
px={5}
|
||||
size="md"
|
||||
sx={{ color: 'var(--titlebar-fg)' }}
|
||||
variant="default"
|
||||
onClick={() => navigate(-1)}
|
||||
|
|
@ -163,6 +164,7 @@ export const Sidebar = () => {
|
|||
</Button>
|
||||
<Button
|
||||
px={5}
|
||||
size="md"
|
||||
sx={{ color: 'var(--titlebar-fg)' }}
|
||||
variant="default"
|
||||
onClick={() => navigate(1)}
|
||||
|
|
@ -183,7 +185,7 @@ export const Sidebar = () => {
|
|||
py="0.5rem"
|
||||
to={AppRoute.HOME}
|
||||
>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === AppRoute.HOME ? (
|
||||
<RiHome4Fill size="1.3em" />
|
||||
) : (
|
||||
|
|
@ -210,7 +212,7 @@ export const Sidebar = () => {
|
|||
>
|
||||
<Accordion.Item value="library">
|
||||
<Accordion.Control>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
{location.pathname.includes('/library/') ? (
|
||||
<RiDatabaseFill size="1.3em" />
|
||||
) : (
|
||||
|
|
@ -221,7 +223,7 @@ export const Sidebar = () => {
|
|||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === AppRoute.LIBRARY_ALBUMS ? (
|
||||
<RiAlbumFill size="1.1em" />
|
||||
) : (
|
||||
|
|
@ -231,7 +233,7 @@ export const Sidebar = () => {
|
|||
</Group>
|
||||
</SidebarItem>
|
||||
<SidebarItem to={AppRoute.LIBRARY_SONGS}>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === AppRoute.LIBRARY_SONGS ? (
|
||||
<RiMusic2Fill size="1.1em" />
|
||||
) : (
|
||||
|
|
@ -241,7 +243,7 @@ export const Sidebar = () => {
|
|||
</Group>
|
||||
</SidebarItem>
|
||||
<SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
{location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? (
|
||||
<RiUserVoiceFill size="1.1em" />
|
||||
) : (
|
||||
|
|
@ -254,7 +256,7 @@ export const Sidebar = () => {
|
|||
disabled
|
||||
to={AppRoute.LIBRARY_FOLDERS}
|
||||
>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
<RiFlag2Line size="1.1em" />
|
||||
Genres
|
||||
</Group>
|
||||
|
|
@ -263,7 +265,7 @@ export const Sidebar = () => {
|
|||
disabled
|
||||
to={AppRoute.LIBRARY_FOLDERS}
|
||||
>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
<RiFolder3Line size="1.1em" />
|
||||
Folders
|
||||
</Group>
|
||||
|
|
@ -272,7 +274,7 @@ export const Sidebar = () => {
|
|||
</Accordion.Item>
|
||||
<Accordion.Item value="collections">
|
||||
<Accordion.Control disabled>
|
||||
<Group>
|
||||
<Group spacing="sm">
|
||||
<BsCollection size="1.3em" />
|
||||
Collections
|
||||
</Group>
|
||||
|
|
@ -285,7 +287,10 @@ export const Sidebar = () => {
|
|||
noWrap
|
||||
position="apart"
|
||||
>
|
||||
<Group noWrap>
|
||||
<Group
|
||||
noWrap
|
||||
spacing="sm"
|
||||
>
|
||||
{location.pathname.includes('/playlists/') ? (
|
||||
<MdFeaturedPlayList size="1.3em" />
|
||||
) : (
|
||||
|
|
@ -300,7 +305,7 @@ export const Sidebar = () => {
|
|||
<Button
|
||||
compact
|
||||
component="div"
|
||||
h="1.5em"
|
||||
h="1.5rem"
|
||||
tooltip={{ label: 'Create playlist', openDelay: 500 }}
|
||||
variant="default"
|
||||
onClick={handleCreatePlaylistModal}
|
||||
|
|
@ -310,7 +315,7 @@ export const Sidebar = () => {
|
|||
<Button
|
||||
compact
|
||||
component={Link}
|
||||
h="1.5em"
|
||||
h="1.5rem"
|
||||
to={AppRoute.PLAYLISTS}
|
||||
tooltip={{ label: 'Playlist list', openDelay: 500 }}
|
||||
variant="default"
|
||||
|
|
|
|||
|
|
@ -318,16 +318,17 @@ export const SongListHeader = ({
|
|||
>
|
||||
<Group noWrap>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
maw="20vw"
|
||||
order={3}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{title || 'Tracks'}
|
||||
</TextTitle>
|
||||
<Badge
|
||||
px="1rem"
|
||||
radius="xl"
|
||||
size="lg"
|
||||
size="xl"
|
||||
>
|
||||
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
|
||||
</Badge>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const TitlebarContainer = styled.header`
|
|||
top: 0;
|
||||
right: 0;
|
||||
z-index: 5000;
|
||||
height: 2.5rem;
|
||||
height: 30px;
|
||||
background: var(--titlebar-controls-bg);
|
||||
-webkit-app-region: drag;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.ag-header-fixed {
|
||||
position: fixed !important;
|
||||
top: 60px;
|
||||
top: 65px;
|
||||
z-index: 15;
|
||||
background: var(--table-header-bg) !important;
|
||||
margin: 0 -2rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--root-font-size: 12px;
|
||||
--root-font-size: 13px;
|
||||
--icon-color: rgb(255, 255, 255);
|
||||
|
||||
--primary-color: rgb(34, 104, 255);
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
|
||||
--dropdown-menu-bg: rgb(40, 40, 40);
|
||||
--dropdown-menu-fg: rgb(235, 235, 235);
|
||||
--dropdown-menu-item-padding: 1rem 0.8rem;
|
||||
--dropdown-menu-item-font-size: 0.9em;
|
||||
--dropdown-menu-item-padding: 1rem 0.5rem;
|
||||
--dropdown-menu-item-font-size: 1rem;
|
||||
--dropdown-menu-bg-hover: rgb(62, 62, 62);
|
||||
--dropdown-menu-border: none;
|
||||
--dropdown-menu-border-radius: 2px;
|
||||
|
|
|
|||
Reference in a new issue