pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate to mantine v6 (#15)

Browse source 
* 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 2023-01-28 20:46:07 -08:00 • committed by GitHub
parent 768269f074
commit 44a4b88809
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 1301 additions and 349 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

419
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "feishin", "name": "feishin",
"version": "0.0.1-alpha3", "version": "0.0.1-alpha4",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "feishin", "name": "feishin",
"version": "0.0.1-alpha3", "version": "0.0.1-alpha4",
"hasInstallScript": true, "hasInstallScript": true,
"license": "GPL-3.0", "license": "GPL-3.0",
"dependencies": { "dependencies": {
@ -16,17 +16,17 @@
"@ag-grid-community/react": "^28.2.1", "@ag-grid-community/react": "^28.2.1",
"@ag-grid-community/styles": "^28.2.1", "@ag-grid-community/styles": "^28.2.1",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@mantine/core": "^5.9.5", "@mantine/core": "^6.0.0-alpha.0",
"@mantine/dates": "^5.9.5", "@mantine/dates": "^6.0.0-alpha.0",
"@mantine/dropzone": "^5.9.5", "@mantine/dropzone": "^6.0.0-alpha.0",
"@mantine/form": "^5.9.5", "@mantine/form": "^6.0.0-alpha.0",
"@mantine/hooks": "^5.9.5", "@mantine/hooks": "^6.0.0-alpha.0",
"@mantine/modals": "^5.9.5", "@mantine/modals": "^6.0.0-alpha.0",
"@mantine/notifications": "^5.9.5", "@mantine/notifications": "^6.0.0-alpha.0",
"@mantine/spotlight": "^5.9.5", "@mantine/utils": "^6.0.0-alpha.0",
"@tanstack/react-query": "^4.16.1", "@tanstack/react-query": "^4.16.1",
"@tanstack/react-query-devtools": "^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", "dayjs": "^1.11.6",
"electron-debug": "^3.2.0", "electron-debug": "^3.2.0",
"electron-localshortcut": "^3.2.1", "electron-localshortcut": "^3.2.1",
@ -1694,55 +1694,56 @@
} }
}, },
"node_modules/@mantine/core": { "node_modules/@mantine/core": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
"integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==", "integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
"dependencies": { "dependencies": {
"@floating-ui/react-dom-interactions": "^0.10.1", "@floating-ui/react-dom-interactions": "^0.10.1",
"@mantine/styles": "5.9.5", "@mantine/styles": "6.0.0-alpha.0",
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"@radix-ui/react-scroll-area": "1.0.2", "@radix-ui/react-scroll-area": "1.0.2",
"react-remove-scroll": "^2.5.5",
"react-textarea-autosize": "8.3.4" "react-textarea-autosize": "8.3.4"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/hooks": "5.9.5", "@mantine/hooks": "6.0.0-alpha.0",
"react": ">=16.8.0", "react": ">=16.8.0",
"react-dom": ">=16.8.0" "react-dom": ">=16.8.0"
} }
}, },
"node_modules/@mantine/dates": { "node_modules/@mantine/dates": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
"integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==", "integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
"dependencies": { "dependencies": {
"@mantine/utils": "5.9.5" "@mantine/utils": "6.0.0-alpha.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "5.9.5", "@mantine/core": "6.0.0-alpha.0",
"@mantine/hooks": "5.9.5", "@mantine/hooks": "6.0.0-alpha.0",
"dayjs": ">=1.0.0", "dayjs": ">=1.0.0",
"react": ">=16.8.0" "react": ">=16.8.0"
} }
}, },
"node_modules/@mantine/dropzone": { "node_modules/@mantine/dropzone": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
"integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==", "integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
"dependencies": { "dependencies": {
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"react-dropzone": "14.2.3" "react-dropzone": "14.2.3"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "5.9.5", "@mantine/core": "6.0.0-alpha.0",
"@mantine/hooks": "5.9.5", "@mantine/hooks": "6.0.0-alpha.0",
"react": ">=16.8.0", "react": ">=16.8.0",
"react-dom": ">=16.8.0" "react-dom": ">=16.8.0"
} }
}, },
"node_modules/@mantine/form": { "node_modules/@mantine/form": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
"integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==", "integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
"dependencies": { "dependencies": {
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"klona": "^2.0.5" "klona": "^2.0.5"
@ -1752,60 +1753,46 @@
} }
}, },
"node_modules/@mantine/hooks": { "node_modules/@mantine/hooks": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
"integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==", "integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
"peerDependencies": { "peerDependencies": {
"react": ">=16.8.0" "react": ">=16.8.0"
} }
}, },
"node_modules/@mantine/modals": { "node_modules/@mantine/modals": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
"integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==", "integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
"dependencies": { "dependencies": {
"@mantine/utils": "5.9.5" "@mantine/utils": "6.0.0-alpha.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "5.9.5", "@mantine/core": "6.0.0-alpha.0",
"@mantine/hooks": "5.9.5", "@mantine/hooks": "6.0.0-alpha.0",
"react": ">=16.8.0", "react": ">=16.8.0",
"react-dom": ">=16.8.0" "react-dom": ">=16.8.0"
} }
}, },
"node_modules/@mantine/notifications": { "node_modules/@mantine/notifications": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
"integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==", "integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
"dependencies": { "dependencies": {
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"react-transition-group": "4.4.2" "react-transition-group": "4.4.2"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "5.9.5", "@mantine/core": "6.0.0-alpha.0",
"@mantine/hooks": "5.9.5", "@mantine/hooks": "6.0.0-alpha.0",
"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",
"react": ">=16.8.0", "react": ">=16.8.0",
"react-dom": ">=16.8.0" "react-dom": ">=16.8.0"
} }
}, },
"node_modules/@mantine/styles": { "node_modules/@mantine/styles": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
"integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==", "integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
"dependencies": { "dependencies": {
"clsx": "1.1.1", "clsx": "1.1.1",
"csstype": "3.0.9" "csstype": "3.0.9"
@ -1822,9 +1809,9 @@
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
}, },
"node_modules/@mantine/utils": { "node_modules/@mantine/utils": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
"integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==", "integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
"peerDependencies": { "peerDependencies": {
"react": ">=16.8.0" "react": ">=16.8.0"
} }
@ -2299,11 +2286,11 @@
} }
}, },
"node_modules/@tanstack/react-virtual": { "node_modules/@tanstack/react-virtual": {
"version": "3.0.0-beta.34", "version": "3.0.0-beta.39",
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
"integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==", "integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
"dependencies": { "dependencies": {
"@tanstack/virtual-core": "3.0.0-beta.34" "@tanstack/virtual-core": "3.0.0-beta.39"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@ -2314,9 +2301,9 @@
} }
}, },
"node_modules/@tanstack/virtual-core": { "node_modules/@tanstack/virtual-core": {
"version": "3.0.0-beta.34", "version": "3.0.0-beta.39",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz", "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
"integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg==", "integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ==",
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
@ -7010,6 +6997,11 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true "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": { "node_modules/detect-port": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz", "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@ -10732,6 +10724,14 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/get-package-type": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@ -12048,6 +12048,14 @@
"node": ">= 0.10" "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": { "node_modules/ip": {
"version": "1.1.5", "version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@ -17548,6 +17556,51 @@
"typescript": "^4" "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": { "node_modules/react-router": {
"version": "6.5.0", "version": "6.5.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
@ -17611,6 +17664,28 @@
"react": "^16 || ^17 || ^18" "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": { "node_modules/react-test-renderer": {
"version": "18.0.0", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz",
@ -22585,6 +22660,26 @@
"node": ">=0.10.0" "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": { "node_modules/use-composed-ref": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", "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": { "node_modules/use-sync-external-store": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -24993,78 +25109,71 @@
} }
}, },
"@mantine/core": { "@mantine/core": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.0-alpha.0.tgz",
"integrity": "sha512-A3cYzGOJ9BpU6tgqTl8qzOe8mmqzvuB76N6IHsPjk+uhbQCBXuNaoxOemP0wEM4HpEAzH1FR1kGhk6tO3gogUA==", "integrity": "sha512-GUeofUfoD84JviBZjXCwzpejjgXs57jbqU9RrpzeFo90nHPrCLp+gCPGMRmpJGShQVlAHk5AWBqDMFDQOSMIwA==",
"requires": { "requires": {
"@floating-ui/react-dom-interactions": "^0.10.1", "@floating-ui/react-dom-interactions": "^0.10.1",
"@mantine/styles": "5.9.5", "@mantine/styles": "6.0.0-alpha.0",
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"@radix-ui/react-scroll-area": "1.0.2", "@radix-ui/react-scroll-area": "1.0.2",
"react-remove-scroll": "^2.5.5",
"react-textarea-autosize": "8.3.4" "react-textarea-autosize": "8.3.4"
} }
}, },
"@mantine/dates": { "@mantine/dates": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-6.0.0-alpha.0.tgz",
"integrity": "sha512-lxjkoZ3DXIrJ/81X6FMd14PNoLE5qFm/cJumba0wy1OkhFjj2Ua9qEWOQs3lnjnrj9ocxCAy5DkRAoGdNfUNtQ==", "integrity": "sha512-T8KpdhU71Y0TuPvmzwuOIzEwFDzaoutqzAr1YuzwArGNJ4G1Dab9Yzlv+rJyobkEkv51zH9DY6G/NBYLOTvj3g==",
"requires": { "requires": {
"@mantine/utils": "5.9.5" "@mantine/utils": "6.0.0-alpha.0"
} }
}, },
"@mantine/dropzone": { "@mantine/dropzone": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.0-alpha.0.tgz",
"integrity": "sha512-Xh/U3dEK//p23yCGCPnd/9Q0HyjOrm9fsxRYifvmCFfzpSUKsBu25HxtiYJaG50nSHCincJCmIvbTB10kyDWCA==", "integrity": "sha512-c7geyTSklNfAnVUFFSha7mEXVTAHMydrpIccMbEOJKgNrRIYVCE14lk+1G+FGBEBYjkd3ezAfpugHVKmWThBFw==",
"requires": { "requires": {
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"react-dropzone": "14.2.3" "react-dropzone": "14.2.3"
} }
}, },
"@mantine/form": { "@mantine/form": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.0-alpha.0.tgz",
"integrity": "sha512-paOJggdQR+KGUtpCW3inH8hu12TwHMwDrOmMbqgaWuuRuwY+kZUnLtf7akLLnwH/C9S/YsDJ9B9QGHaQElilFw==", "integrity": "sha512-lTBsF2k4Lg1ci5votYEc3UiOkCBUbUEBDuIVhq30T78cYrHwfaLuw+WgxpY3eJC+HKOkzmowjWLCDOslRy81WQ==",
"requires": { "requires": {
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"klona": "^2.0.5" "klona": "^2.0.5"
} }
}, },
"@mantine/hooks": { "@mantine/hooks": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.0-alpha.0.tgz",
"integrity": "sha512-6u0oj5zFYAP8bY+iW5Y5HEFS6tZmvJN5KwNPH+F2Omw61hN7shehHED7Jbe5zkxcggFvqmkA/6FMk+VYfovmkA==", "integrity": "sha512-nM07MwufE1u0TztsKqFcxWoiWVtPq9ksm9pa6YiiS7pHtnq6BE+8qK8ASBqCtTpXydMYGeIQ2fgJH2hRGVtQjg==",
"requires": {} "requires": {}
}, },
"@mantine/modals": { "@mantine/modals": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.0-alpha.0.tgz",
"integrity": "sha512-ZVtvzHCyjkkztWhz3gkbsX8wdm7j0lN8dAaF51xvQHs9eZPgP5gXzyGpqeU23trk8O+4b6nY/TT2+5amJ/SKrQ==", "integrity": "sha512-SAAuS/Z5qMzeP0ZMVfSwy5B/C4YHi3e6C2wzJ9WrDYAxmwVKFTShDffY8X0QHq452n16oc5q2H9nhsm2/4+lCg==",
"requires": { "requires": {
"@mantine/utils": "5.9.5" "@mantine/utils": "6.0.0-alpha.0"
} }
}, },
"@mantine/notifications": { "@mantine/notifications": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.0-alpha.0.tgz",
"integrity": "sha512-RGr48xPVMjlt0l6LEG7sncgTf4oKHxBDtLYOBwybNuLs1pcpmoHGdcgCkvINnXKWFHF8IQG/l3eDlKBseromJQ==", "integrity": "sha512-itxhWPiOBfNvNPnrmNEuuDsjCyOYznYYrsnklYywwGpvMfXFXJjOiAhgGqEf7VsEo56k787jDATt9aveBIDofQ==",
"requires": { "requires": {
"@mantine/utils": "5.9.5", "@mantine/utils": "6.0.0-alpha.0",
"react-transition-group": "4.4.2" "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": { "@mantine/styles": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.0-alpha.0.tgz",
"integrity": "sha512-Rixu60eVS9aP8ugTM0Yoc5MpXXsfemRlu2PDZGL0fhcOyUYHi5mXvlhgxqrET3zkFrBJ+PHuPLQBgBimffGqiw==", "integrity": "sha512-DEq94AX41zOr5wsRO5vn8rLb3cFhfycU0pELzMHi8TLUiMuiphTn8eM5QrrfX78AGDK4z6fFwT+KI7J5Brm+mA==",
"requires": { "requires": {
"clsx": "1.1.1", "clsx": "1.1.1",
"csstype": "3.0.9" "csstype": "3.0.9"
@ -25078,9 +25187,9 @@
} }
}, },
"@mantine/utils": { "@mantine/utils": {
"version": "5.9.5", "version": "6.0.0-alpha.0",
"resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.9.5.tgz", "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.0-alpha.0.tgz",
"integrity": "sha512-OtMOvXMyqpZ+Tz25DYRwRkvERvmF4L0RJiq+JnXk+1yKDvG+JZQuMMLnt0nZ81T6q7uzDSA29cJ45syHL2BXmQ==", "integrity": "sha512-1UggIXUVrsYi/Fo3wc/0v1A0rwV562TJmoqUtaJCyB/cyhemytEztpfl4XzxhITwoy7Ydziw3ubZnfMMchUX5w==",
"requires": {} "requires": {}
}, },
"@mdn/browser-compat-data": { "@mdn/browser-compat-data": {
@ -25423,17 +25532,17 @@
} }
}, },
"@tanstack/react-virtual": { "@tanstack/react-virtual": {
"version": "3.0.0-beta.34", "version": "3.0.0-beta.39",
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.34.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.39.tgz",
"integrity": "sha512-EQdy+jSObZzeuDSbFBxLbnRnvooth+4CBs5gh3FAhaaH3X99Km42pOWwXgPpu6mZCstxlopoFc4BY957i4uG5Q==", "integrity": "sha512-odun31XKT4gQyJXw0ipsNmXL7AAO+mbg2omoxZyW+JJyqU5m1S3BeLpZQKMCv+Ek59mPGeGWPZXxaZd7TalnHg==",
"requires": { "requires": {
"@tanstack/virtual-core": "3.0.0-beta.34" "@tanstack/virtual-core": "3.0.0-beta.39"
} }
}, },
"@tanstack/virtual-core": { "@tanstack/virtual-core": {
"version": "3.0.0-beta.34", "version": "3.0.0-beta.39",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.34.tgz", "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.39.tgz",
"integrity": "sha512-9whWuShYSwpJV6kPufEGuNXXJfdkqspD55GMjqE1wPJ8g2iHk0HQdPlb5kGgt/2IDYrxAV/mMFWQM1lMj7cKkg==" "integrity": "sha512-VZ1ESIo+PAPOsxqGzccFPWDD/gsJAViSTU6glhd5pLSMkYDsmtdklfYrE3bWLC3dsbLWI689yzpLgh436v26mQ=="
}, },
"@teamsupercell/typings-for-css-modules-loader": { "@teamsupercell/typings-for-css-modules-loader": {
"version": "2.5.1", "version": "2.5.1",
@ -29104,6 +29213,11 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true "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": { "detect-port": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz", "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@ -31923,6 +32037,11 @@
"has-symbols": "^1.0.3" "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": { "get-package-type": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@ -32923,6 +33042,14 @@
"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
"dev": true "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": { "ip": {
"version": "1.1.5", "version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@ -37012,6 +37139,27 @@
"dev": true, "dev": true,
"requires": {} "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": { "react-router": {
"version": "6.5.0", "version": "6.5.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.5.0.tgz",
@ -37053,6 +37201,16 @@
"prop-types": "^15.8.1" "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": { "react-test-renderer": {
"version": "18.0.0", "version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.0.0.tgz", "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==", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
"dev": true "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": { "use-composed-ref": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz", "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-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": { "use-sync-external-store": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

18
package.json
View file

@ -253,17 +253,17 @@
"@ag-grid-community/react": "^28.2.1", "@ag-grid-community/react": "^28.2.1",
"@ag-grid-community/styles": "^28.2.1", "@ag-grid-community/styles": "^28.2.1",
"@emotion/react": "^11.10.4", "@emotion/react": "^11.10.4",
"@mantine/core": "^5.9.5", "@mantine/core": "^6.0.0-alpha.0",
"@mantine/dates": "^5.9.5", "@mantine/dates": "^6.0.0-alpha.0",
"@mantine/dropzone": "^5.9.5", "@mantine/dropzone": "^6.0.0-alpha.0",
"@mantine/form": "^5.9.5", "@mantine/form": "^6.0.0-alpha.0",
"@mantine/hooks": "^5.9.5", "@mantine/hooks": "^6.0.0-alpha.0",
"@mantine/modals": "^5.9.5", "@mantine/modals": "^6.0.0-alpha.0",
"@mantine/notifications": "^5.9.5", "@mantine/notifications": "^6.0.0-alpha.0",
"@mantine/spotlight": "^5.9.5", "@mantine/utils": "^6.0.0-alpha.0",
"@tanstack/react-query": "^4.16.1", "@tanstack/react-query": "^4.16.1",
"@tanstack/react-query-devtools": "^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", "dayjs": "^1.11.6",
"electron-debug": "^3.2.0", "electron-debug": "^3.2.0",
"electron-localshortcut": "^3.2.1", "electron-localshortcut": "^3.2.1",

88
src/renderer/app.tsx
View file

@ -4,10 +4,10 @@ import { ModuleRegistry } from '@ag-grid-community/core';
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model'; import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
import { MantineProvider } from '@mantine/core'; import { MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals'; import { ModalsProvider } from '@mantine/modals';
import { NotificationsProvider } from '@mantine/notifications';
import { initSimpleImg } from 'react-simple-img'; import { initSimpleImg } from 'react-simple-img';
import { BaseContextModal } from './components'; import { BaseContextModal } from './components';
import { useTheme } from './hooks'; import { useTheme } from './hooks';
import { Notifications } from '@mantine/notifications';
import { AppRouter } from './router/app-router'; import { AppRouter } from './router/app-router';
import { useSettingsStore } from './store/settings.store'; import { useSettingsStore } from './store/settings.store';
import './styles/global.scss'; import './styles/global.scss';
@ -36,13 +36,6 @@ export const App = () => {
withGlobalStyles withGlobalStyles
withNormalizeCSS withNormalizeCSS
theme={{ theme={{
breakpoints: {
lg: 1200,
md: 1000,
sm: 800,
xl: 1400,
xs: 500,
},
colorScheme: theme as 'light' | 'dark', colorScheme: theme as 'light' | 'dark',
components: { Modal: { styles: { body: { padding: '.5rem' } } } }, components: { Modal: { styles: { body: { padding: '.5rem' } } } },
defaultRadius: 'xs', defaultRadius: 'xs',
@ -60,53 +53,52 @@ export const App = () => {
}, },
fontFamily: 'var(--content-font-family)', fontFamily: 'var(--content-font-family)',
fontSizes: { fontSizes: {
lg: 16, lg: '1.5rem',
md: 14, md: '1.1rem',
sm: 12, sm: '0.9rem',
xl: 18, xl: '2rem',
xs: 10, 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: {}, other: {},
spacing: { spacing: {
lg: 12, lg: '2rem',
md: 8, md: '1rem',
sm: 4, sm: '0.5rem',
xl: 16, xl: '4rem',
xs: 2, xs: '0rem',
}, },
}} }}
> >
<NotificationsProvider <ModalsProvider
autoClose={1500} modalProps={{
position="bottom-center" centered: true,
style={{ transitionDuration: 300,
marginBottom: '85px', transitionProps: {
opacity: '.8', exitDuration: 300,
userSelect: 'none',
width: '300px',
}}
transitionDuration={200}
>
<ModalsProvider
modalProps={{
centered: true,
exitTransitionDuration: 300,
overflow: 'inside',
overlayBlur: 0,
overlayOpacity: 0.8,
transition: 'slide-down', transition: 'slide-down',
transitionDuration: 300, },
}} }}
modals={{ base: BaseContextModal }} modals={{ base: BaseContextModal }}
> >
<PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}> <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
<ContextMenuProvider> <ContextMenuProvider>
<AppRouter /> <Notifications />
</ContextMenuProvider> <AppRouter />
</PlayQueueHandlerContext.Provider> </ContextMenuProvider>
</ModalsProvider> </PlayQueueHandlerContext.Provider>
</NotificationsProvider> </ModalsProvider>
</MantineProvider> </MantineProvider>
); );
}; };

1
src/renderer/components/badge/index.tsx
View file

@ -10,7 +10,6 @@ const StyledBadge = styled(MantineBadge)<BadgeProps>`
} }
.mantine-Badge-inner { .mantine-Badge-inner {
padding: 0 0.5rem;
color: var(--badge-fg); color: var(--badge-fg);
} }
`; `;

6
src/renderer/components/button/index.tsx
View file

@ -92,7 +92,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
opacity: 0.6; opacity: 0.6;
} }
&:hover { &:not([data-disabled])&:hover {
color: ${(props) => { color: ${(props) => {
switch (props.variant) { switch (props.variant) {
case 'default': case 'default':
@ -100,7 +100,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
case 'filled': case 'filled':
return 'var(--btn-primary-fg-hover)'; return 'var(--btn-primary-fg-hover)';
case 'subtle': case 'subtle':
return 'var(--btn-subtle-fg-hover)'; return 'var(--btn-subtle-fg-hover) !important';
default: default:
return ''; return '';
} }
@ -134,7 +134,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
} }
} }
&:focus-visible { &:not([data-disabled])&:focus-visible {
color: ${(props) => { color: ${(props) => {
switch (props.variant) { switch (props.variant) {
case 'default': case 'default':

1
src/renderer/components/dropdown-menu/index.tsx
View file

@ -63,7 +63,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
& .mantine-Menu-itemLabel { & .mantine-Menu-itemLabel {
color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')}; color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
font-weight: 500; font-weight: 500;
font-size: 1em;
} }
& .mantine-Menu-itemRightSection { & .mantine-Menu-itemRightSection {

47
src/renderer/components/feature-carousel/index.tsx
View file

@ -27,8 +27,7 @@ const Grid = styled.div`
grid-auto-columns: 1fr; grid-auto-columns: 1fr;
grid-template-areas: 'image info'; grid-template-areas: 'image info';
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: 225px 1fr; grid-template-columns: 200px 1fr;
gap: 0.5rem;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
@ -152,16 +151,27 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
/> />
</ImageColumn> </ImageColumn>
<InfoColumn> <InfoColumn>
<Stack sx={{ width: '100%' }}> <Stack
spacing="md"
sx={{ width: '100%' }}
>
<TitleWrapper> <TitleWrapper>
<TextTitle fw="bold">{currentItem?.name}</TextTitle> <TextTitle
lh="4rem"
lineClamp={2}
order={1}
sx={{ fontSize: '4rem' }}
weight={900}
>
{currentItem?.name}
</TextTitle>
</TitleWrapper> </TitleWrapper>
<TitleWrapper> <TitleWrapper>
{currentItem?.albumArtists.map((artist) => ( {currentItem?.albumArtists.map((artist) => (
<TextTitle <TextTitle
key={`carousel-artist-${artist.id}`} key={`carousel-artist-${artist.id}`}
fw="600" order={2}
order={3} weight={600}
> >
{artist.name} {artist.name}
</TextTitle> </TextTitle>
@ -169,10 +179,15 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
</TitleWrapper> </TitleWrapper>
<Group> <Group>
{currentItem?.genres?.map((genre) => ( {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 size="lg">{currentItem?.releaseYear}</Badge>
<Badge>{currentItem?.songCount} tracks</Badge> <Badge size="lg">{currentItem?.songCount} tracks</Badge>
</Group> </Group>
</Stack> </Stack>
</InfoColumn> </InfoColumn>
@ -187,25 +202,25 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
</AnimatePresence> </AnimatePresence>
<Group <Group
spacing="xs" spacing="xs"
sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }} sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
> >
<Button <Button
disabled={itemIndex === 0} disabled={itemIndex === 0}
px="lg"
radius={100} radius={100}
variant="subtle" size="md"
variant="default"
onClick={handlePrevious} onClick={handlePrevious}
> >
<RiArrowLeftSLine size={15} /> <RiArrowLeftSLine size="2rem" />
</Button> </Button>
<Button <Button
disabled={itemIndex === (data?.length || 1) - 1} disabled={itemIndex === (data?.length || 1) - 1}
px="lg"
radius={100} radius={100}
variant="subtle" size="md"
variant="default"
onClick={handleNext} onClick={handleNext}
> >
<RiArrowRightSLine size={15} /> <RiArrowRightSLine size="2rem" />
</Button> </Button>
</Group> </Group>
</Wrapper> </Wrapper>

4
src/renderer/components/grid-carousel/index.tsx
View file

@ -199,10 +199,11 @@ const Title = ({ children }: TitleProps) => {
<Group position="apart"> <Group position="apart">
{children} {children}
{showPaginationButtons && ( {showPaginationButtons && (
<Group> <Group spacing="sm">
<Button <Button
compact compact
disabled={!pagination?.hasPreviousPage} disabled={!pagination?.hasPreviousPage}
size="md"
variant="default" variant="default"
onClick={handlePreviousPage} onClick={handlePreviousPage}
> >
@ -210,6 +211,7 @@ const Title = ({ children }: TitleProps) => {
</Button> </Button>
<Button <Button
compact compact
size="md"
variant="default" variant="default"
onClick={handleNextPage} onClick={handleNextPage}
> >

2
src/renderer/components/modal/index.tsx
View file

@ -21,8 +21,6 @@ export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
export const Modal = ({ children, handlers, ...rest }: ModalProps) => { export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
return ( return (
<MantineModal <MantineModal
overlayBlur={2}
overlayOpacity={0.2}
{...rest} {...rest}
onClose={handlers.close} onClose={handlers.close}
> >

2
src/renderer/components/page-header/index.tsx
View file

@ -11,7 +11,7 @@ const Container = styled(motion(Flex))<{
position: ${(props) => props.position || 'relative'}; position: ${(props) => props.position || 'relative'};
z-index: 2000; z-index: 2000;
width: 100%; width: 100%;
height: ${(props) => props.height || '60px'}; height: ${(props) => props.height || '65px'};
`; `;
const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>` const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`

1
src/renderer/components/search-input/index.tsx
View file

@ -44,6 +44,7 @@ export const SearchInput = ({
ref={mergedRef} ref={mergedRef}
{...props} {...props}
icon={showIcon && <RiSearchLine size={15} />} icon={showIcon && <RiSearchLine size={15} />}
size="md"
styles={{ styles={{
icon: { svg: { fill: 'var(--btn-default-fg)' } }, icon: { svg: { fill: 'var(--btn-default-fg)' } },
input: { input: {

4
src/renderer/components/text-title/index.tsx
View file

@ -28,6 +28,10 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
color: ${(props) => props.$link && 'var(--main-fg)'}; color: ${(props) => props.$link && 'var(--main-fg)'};
text-decoration: ${(props) => (props.$link ? 'underline' : 'none')}; text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
} }
h1 {
font-size: 4rem;
}
`; `;
const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => { const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {

1
src/renderer/components/toast/index.tsx
View file

@ -34,7 +34,6 @@ const showToast = ({ type, ...props }: NotificationProps) => {
return showNotification({ return showNotification({
autoClose: defaultDuration, autoClose: defaultDuration,
disallowClose: true,
styles: () => ({ styles: () => ({
closeButton: {}, closeButton: {},
description: { description: {

1
src/renderer/components/virtual-table/cells/combined-title-cell.tsx
View file

@ -22,6 +22,7 @@ const CellContainer = styled(motion.div)<{ height: number }>`
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
letter-spacing: 0.5px;
`; `;
const ImageWrapper = styled.div` const ImageWrapper = styled.div`

1
src/renderer/components/virtual-table/cells/generic-cell.tsx
View file

@ -25,6 +25,7 @@ export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' |
: 'flex-start'}; : 'flex-start'};
width: 100%; width: 100%;
height: 100%; height: 100%;
letter-spacing: 0.5px;
`; `;
type Options = { type Options = {

2
src/renderer/components/virtual-table/headers/generic-table-header.tsx
View file

@ -77,9 +77,9 @@ export const GenericTableHeader = (
return ( return (
<TextHeaderWrapper <TextHeaderWrapper
fw="500"
overflow="hidden" overflow="hidden"
position={position} position={position}
weight={500}
> >
{children || displayName} {children || displayName}
</TextHeaderWrapper> </TextHeaderWrapper>

2
src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
View file

@ -6,7 +6,7 @@ export const useFixedTableHeader = () => {
const tableContainerRef = useRef<HTMLDivElement | null>(null); const tableContainerRef = useRef<HTMLDivElement | null>(null);
const isNotPastTableIntersection = useInView(intersectRef, { const isNotPastTableIntersection = useInView(intersectRef, {
margin: '-63px 0px 0px 0px', margin: '-68px 0px 0px 0px',
}); });
const tableInView = useInView(tableContainerRef, { const tableInView = useInView(tableContainerRef, {

2
src/renderer/features/action-required/components/mpv-required.tsx
View file

@ -22,7 +22,7 @@ export const MpvRequired = () => {
return ( 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> <Text>
MPV is available at the following:{' '} MPV is available at the following:{' '}
<a <a

4
src/renderer/features/action-required/components/server-credential-required.tsx
View file

@ -6,11 +6,11 @@ export const ServerCredentialRequired = () => {
return ( return (
<> <>
<Text size="lg"> <Text>
The selected server &apos;{currentServer?.name}&apos; requires an additional login to The selected server &apos;{currentServer?.name}&apos; requires an additional login to
access. access.
</Text> </Text>
<Text size="lg"> <Text>
Add your credentials in the &apos;manage servers&apos; menu or switch to a different server. Add your credentials in the &apos;manage servers&apos; menu or switch to a different server.
</Text> </Text>
</> </>

2
src/renderer/features/action-required/components/server-required.tsx
View file

@ -3,7 +3,7 @@ import { Text } from '/@/renderer/components';
export const ServerRequired = () => { export const ServerRequired = () => {
return ( return (
<> <>
<Text size="xl">No server selected.</Text> <Text>No server selected.</Text>
<Text>Add or select a server in the file menu.</Text> <Text>Add or select a server in the file menu.</Text>
</> </>
); );

4
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -126,8 +126,8 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
More from this artist More from this artist
</TextTitle> </TextTitle>
@ -189,7 +189,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
ref={showGenres ? null : intersectRef} ref={showGenres ? null : intersectRef}
className="test" className="test"
py="1rem" py="1rem"
spacing="lg" spacing="md"
> >
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs"> <Group spacing="xs">

4
src/renderer/features/albums/components/album-detail-header.tsx
View file

@ -47,7 +47,7 @@ export const AlbumDetailHeader = forwardRef(
item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }} item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
> >
<Stack mt="1rem"> <Stack spacing="sm">
<Group> <Group>
{metadataItems.map((item, index) => ( {metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}> <Fragment key={`item-${item.id}-${index}`}>
@ -79,10 +79,10 @@ export const AlbumDetailHeader = forwardRef(
<Text <Text
$link $link
component={Link} component={Link}
fw="600"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id, albumArtistId: artist.id,
})} })}
weight={600}
> >
{artist.name} {artist.name}
</Text> </Text>

15
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -415,16 +415,17 @@ export const AlbumListHeader = ({
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
fw="bold"
maw="20vw" maw="20vw"
order={3} order={2}
overflow="hidden" overflow="hidden"
weight={700}
> >
{title || 'Albums'} {title || 'Albums'}
</TextTitle> </TextTitle>
<Badge <Badge
px="1rem"
radius="xl" radius="xl"
size="lg" size="xl"
> >
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount} {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge> </Badge>
@ -510,7 +511,7 @@ export const AlbumListHeader = ({
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button
compact compact
fw="600" fw={600}
variant="subtle" variant="subtle"
> >
{sortByLabel} {sortByLabel}
@ -531,7 +532,7 @@ export const AlbumListHeader = ({
</DropdownMenu> </DropdownMenu>
<Button <Button
compact compact
fw="600" fw={600}
variant="subtle" variant="subtle"
onClick={handleToggleSortOrder} onClick={handleToggleSortOrder}
> >
@ -552,7 +553,7 @@ export const AlbumListHeader = ({
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button
compact compact
fw="600" fw={600}
variant="subtle" variant="subtle"
> >
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />} {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
@ -574,7 +575,7 @@ export const AlbumListHeader = ({
)} )}
<Button <Button
compact compact
fw="600" fw={600}
variant="subtle" variant="subtle"
onClick={handleOpenFiltersModal} onClick={handleOpenFiltersModal}
> >

4
src/renderer/features/albums/routes/album-detail-route.tsx
View file

@ -1,5 +1,5 @@
import { NativeScrollArea } from '/@/renderer/components'; 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 { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
@ -42,7 +42,7 @@ const AlbumDetailRoute = () => {
backgroundColor: background, backgroundColor: background,
children: ( children: (
<LibraryHeaderBar> <LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} /> <PlayButton onClick={handlePlay} />
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title> <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
</LibraryHeaderBar> </LibraryHeaderBar>
), ),

12
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -165,8 +165,8 @@ export const AlbumArtistDetailContent = () => {
title: ( title: (
<> <>
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Recent releases Recent releases
</TextTitle> </TextTitle>
@ -193,8 +193,8 @@ export const AlbumArtistDetailContent = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Appears on Appears on
</TextTitle> </TextTitle>
@ -211,8 +211,8 @@ export const AlbumArtistDetailContent = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Related artists Related artists
</TextTitle> </TextTitle>
@ -281,7 +281,7 @@ export const AlbumArtistDetailContent = () => {
return ( return (
<ContentContainer ref={cq.ref}> <ContentContainer ref={cq.ref}>
<Box component="section"> <Box component="section">
<Group spacing="lg"> <Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs"> <Group spacing="xs">
<Button <Button
@ -369,8 +369,8 @@ export const AlbumArtistDetailContent = () => {
maw="1280px" maw="1280px"
> >
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
About {detailQuery?.data?.name} About {detailQuery?.data?.name}
</TextTitle> </TextTitle>
@ -393,8 +393,8 @@ export const AlbumArtistDetailContent = () => {
align="flex-end" align="flex-end"
> >
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Top Songs Top Songs
</TextTitle> </TextTitle>

198
src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx Normal file
View file

@ -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>
);
};

473
src/renderer/features/artists/components/album-artist-detail-discography-header.tsx Normal file
View file

@ -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>
);
};

0
src/renderer/features/artists/components/album-artist-detail-discography-list.tsx Normal file
View file

2
src/renderer/features/artists/components/album-artist-detail-header.tsx
View file

@ -46,7 +46,7 @@ export const AlbumArtistDetailHeader = forwardRef(
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }} item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
> >
<Stack mt="1rem"> <Stack>
<Group> <Group>
{metadataItems {metadataItems
.filter((i) => i.value) .filter((i) => i.value)

48
src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
View file

@ -1,6 +1,5 @@
import { MutableRefObject, useCallback, useMemo } from 'react'; import { MutableRefObject, useCallback, useMemo } from 'react';
import type { import type {
BodyScrollEvent,
ColDef, ColDef,
GridReadyEvent, GridReadyEvent,
IDatasource, IDatasource,
@ -8,6 +7,7 @@ import type {
RowDoubleClickedEvent, RowDoubleClickedEvent,
} from '@ag-grid-community/core'; } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useSetState } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys'; import { queryKeys } from '/@/renderer/api/query-keys';
@ -21,11 +21,9 @@ import {
SongListFilter, SongListFilter,
useCurrentServer, useCurrentServer,
useSetSongTable, useSetSongTable,
useSetSongTablePagination,
useSongListStore, useSongListStore,
useSongTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types'; import { ListDisplayType, TablePagination as TablePaginationType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu'; import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
@ -49,8 +47,13 @@ export const AlbumArtistDetailSongListContent = ({
const server = useCurrentServer(); const server = useCurrentServer();
const page = useSongListStore(); const page = useSongListStore();
const pagination = useSongTablePagination(); const [pagination, setPagination] = useSetState<TablePaginationType>({
const setPagination = useSetSongTablePagination(); currentPage: 0,
itemsPerPage: 100,
totalItems: itemCount || 0,
totalPages: 0,
});
const setTable = useSetSongTable(); const setTable = useSetSongTable();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
@ -62,14 +65,6 @@ export const AlbumArtistDetailSongListContent = ({
[page.table.columns], [page.table.columns],
); );
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const onGridReady = useCallback( const onGridReady = useCallback(
(params: GridReadyEvent) => { (params: GridReadyEvent) => {
const dataSource: IDatasource = { const dataSource: IDatasource = {
@ -79,10 +74,7 @@ export const AlbumArtistDetailSongListContent = ({
const queryKey = queryKeys.songs.list(server?.id || '', { const queryKey = queryKeys.songs.list(server?.id || '', {
...filter, ...filter,
// artistIds: [albumArtistId],
limit, limit,
// sortBy: SongListSort.ALBUM,
// sortOrder: SortOrder.ASC,
startIndex, startIndex,
}); });
@ -91,11 +83,8 @@ export const AlbumArtistDetailSongListContent = ({
async ({ signal }) => async ({ signal }) =>
api.controller.getSongList({ api.controller.getSongList({
query: { query: {
// artistIds: [albumArtistId],
...filter, ...filter,
limit, limit,
// sortBy: SongListSort.ALBUM,
// sortOrder: SortOrder.ASC,
startIndex, startIndex,
}, },
server, server,
@ -110,9 +99,8 @@ export const AlbumArtistDetailSongListContent = ({
rowCount: undefined, rowCount: undefined,
}; };
params.api.setDatasource(dataSource); params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
}, },
[filter, page.table.scrollOffset, queryClient, server], [filter, queryClient, server],
); );
const onPaginationChanged = useCallback( const onPaginationChanged = useCallback(
@ -132,12 +120,6 @@ export const AlbumArtistDetailSongListContent = ({
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination], [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
); );
const handleGridSizeChange = () => {
if (page.table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const handleColumnChange = useCallback(() => { const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {}; const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns(); const columnsOrder = columnApi?.getAllGridColumns();
@ -164,11 +146,6 @@ export const AlbumArtistDetailSongListContent = ({
const debouncedColumnChange = debounce(handleColumnChange, 200); 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 handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => { const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
@ -189,18 +166,17 @@ export const AlbumArtistDetailSongListContent = ({
ref={tableRef} ref={tableRef}
alwaysShowHorizontalScroll alwaysShowHorizontalScroll
animateRows animateRows
autoFitColumns
maintainColumnOrder maintainColumnOrder
suppressCopyRowsToClipboard suppressCopyRowsToClipboard
suppressMoveWhenRowDragging suppressMoveWhenRowDragging
suppressPaginationPanel suppressPaginationPanel
suppressRowDrag suppressRowDrag
suppressScrollOnNewData suppressScrollOnNewData
autoFitColumns={page.table.autoFit}
blockLoadDebounceMillis={200} blockLoadDebounceMillis={200}
cacheBlockSize={500} cacheBlockSize={500}
cacheOverflowSize={1} cacheOverflowSize={1}
columnDefs={columnDefs} columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false} enableCellChangeFlash={false}
getRowId={(data) => data.data.id} getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100} infiniteInitialRowCount={itemCount || 100}
@ -211,12 +187,10 @@ export const AlbumArtistDetailSongListContent = ({
rowHeight={page.table.rowHeight || 40} rowHeight={page.table.rowHeight || 40}
rowModelType="infinite" rowModelType="infinite"
rowSelection="multiple" rowSelection="multiple"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu} onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange} onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange} onColumnResized={debouncedColumnChange}
onGridReady={onGridReady} onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged} onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick} onRowDoubleClicked={handleRowDoubleClick}
/> />

5
src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
View file

@ -96,7 +96,6 @@ export const AlbumArtistDetailSongListHeader = ({
const server = useCurrentServer(); const server = useCurrentServer();
const page = useSongListStore(); const page = useSongListStore();
const setPage = useSetSongStore(); const setPage = useSetSongStore();
// const setFilter = useSetSongFilters();
const setTable = useSetSongTable(); const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination(); const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
@ -300,10 +299,10 @@ export const AlbumArtistDetailSongListHeader = ({
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
fw="bold"
maw="20vw" maw="20vw"
order={3} order={3}
overflow="hidden" overflow="hidden"
weight={700}
> >
{title} {title}
</TextTitle> </TextTitle>
@ -402,7 +401,7 @@ export const AlbumArtistDetailSongListHeader = ({
sortOrderLabel sortOrderLabel
) : ( ) : (
<> <>
{page.filter.sortOrder === SortOrder.ASC ? ( {filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} /> <RiSortAsc size={15} />
) : ( ) : (
<RiSortDesc size={15} /> <RiSortDesc size={15} />

2
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
View file

@ -54,10 +54,10 @@ export const AlbumArtistDetailTopSongsListHeader = ({
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
fw="bold"
maw="20vw" maw="20vw"
order={3} order={3}
overflow="hidden" overflow="hidden"
weight={700}
> >
{title} {title}
</TextTitle> </TextTitle>

30
src/renderer/features/artists/components/album-artist-list-header.tsx
View file

@ -12,12 +12,14 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types'; import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { import {
ALBUMARTIST_TABLE_COLUMNS, ALBUMARTIST_TABLE_COLUMNS,
Badge,
Button, Button,
DropdownMenu, DropdownMenu,
MultiSelect, MultiSelect,
PageHeader, PageHeader,
SearchInput, SearchInput,
Slider, Slider,
SpinnerIcon,
Switch, Switch,
Text, Text,
TextTitle, TextTitle,
@ -72,10 +74,15 @@ const HeaderItems = styled.div`
interface AlbumArtistListHeaderProps { interface AlbumArtistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>; gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
} }
export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHeaderProps) => { export const AlbumArtistListHeader = ({
itemCount,
gridRef,
tableRef,
}: AlbumArtistListHeaderProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const server = useCurrentServer(); const server = useCurrentServer();
const setPage = useSetAlbumArtistStore(); const setPage = useSetAlbumArtistStore();
@ -308,12 +315,21 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
size="xl" size="xl"
variant="subtle" variant="subtle"
> >
<TextTitle <Group noWrap>
fw="bold" <TextTitle
order={3} order={3}
> weight={700}
Album Artists >
</TextTitle> Album Artists
</TextTitle>
<Badge
px="1rem"
radius="xl"
size="xl"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button> </Button>
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>

83
src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx Normal file
View file

@ -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;

22
src/renderer/features/artists/routes/album-artist-list-route.tsx
View file

@ -4,16 +4,38 @@ import { AnimatedPage } from '/@/renderer/features/shared';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react'; import { useRef } from 'react';
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content'; 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 AlbumArtistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null); const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | 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 ( return (
<AnimatedPage> <AnimatedPage>
<VirtualGridContainer> <VirtualGridContainer>
<AlbumArtistListHeader <AlbumArtistListHeader
gridRef={gridRef} gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef} tableRef={tableRef}
/> />
<AlbumArtistListContent <AlbumArtistListContent

8
src/renderer/features/home/routes/home-route.tsx
View file

@ -123,8 +123,8 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Explore from your library Explore from your library
</TextTitle> </TextTitle>
@ -142,8 +142,8 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Recently played Recently played
</TextTitle> </TextTitle>
@ -161,8 +161,8 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Newly added releases Newly added releases
</TextTitle> </TextTitle>
@ -180,8 +180,8 @@ const HomeRoute = () => {
}, },
title: ( title: (
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Most played Most played
</TextTitle> </TextTitle>

2
src/renderer/features/now-playing/components/now-playing-header.tsx
View file

@ -9,8 +9,8 @@ export const NowPlayingHeader = () => {
<PageHeader> <PageHeader>
<Group p="1rem"> <Group p="1rem">
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
Queue Queue
</TextTitle> </TextTitle>

4
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
View file

@ -23,7 +23,7 @@ export const SidebarPlayQueue = () => {
<> <>
<Flex <Flex
bg="var(--titlebar-bg)" bg="var(--titlebar-bg)"
h="60px" h="65px"
sx={{ position: 'relative' }} sx={{ position: 'relative' }}
w="100%" w="100%"
> >
@ -40,7 +40,7 @@ export const SidebarPlayQueue = () => {
</Flex> </Flex>
<Flex <Flex
direction="column" direction="column"
h="calc(100% - 60px)" h="calc(100% - 65px)"
sx={{ borderLeft: '2px solid var(--generic-border-color)' }} sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
w="100%" w="100%"
> >

2
src/renderer/features/playlists/components/playlist-detail-header.tsx
View file

@ -45,7 +45,7 @@ export const PlaylistDetailHeader = forwardRef(
item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }} item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
> >
<Stack mt="1rem"> <Stack>
<Group> <Group>
{metadataItems.map((item, index) => ( {metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}> <Fragment key={`item-${item.id}-${index}`}>

2
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
View file

@ -262,8 +262,8 @@ export const PlaylistDetailSongListHeader = ({
variant="subtle" variant="subtle"
> >
<TextTitle <TextTitle
fw="bold"
order={3} order={3}
weight={700}
> >
{detailQuery?.data?.name} {detailQuery?.data?.name}
</TextTitle> </TextTitle>

24
src/renderer/features/servers/components/server-list-item.tsx
View file

@ -20,16 +20,11 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
}; };
return ( return (
<Stack <Stack>
mt="1rem"
p="1rem"
spacing="xl"
>
<ServerSection <ServerSection
title={ title={
<Group position="apart"> <Group position="apart">
<Text>Server details</Text> <Text>Server details</Text>
<Group spacing="md" />
</Group> </Group>
} }
> >
@ -39,30 +34,31 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
onCancel={() => editHandlers.toggle()} onCancel={() => editHandlers.toggle()}
/> />
) : ( ) : (
<Group position="apart"> <Stack>
<Group> <Group noWrap>
<Stack> <Stack>
<Text>URL</Text> <Text>URL</Text>
<Text>Username</Text> <Text>Username</Text>
</Stack> </Stack>
<Stack> <Stack>
<Text size="sm">{server.url}</Text> <Text>{server.url}</Text>
<Text size="sm">{server.username}</Text> <Text>{server.username}</Text>
</Stack> </Stack>
</Group> </Group>
<Group> <Group grow>
<Button <Button
leftIcon={<RiEdit2Fill />}
tooltip={{ label: 'Edit server details' }} tooltip={{ label: 'Edit server details' }}
variant="subtle" variant="subtle"
onClick={() => editHandlers.toggle()} onClick={() => editHandlers.toggle()}
> >
<RiEdit2Fill /> Edit
</Button> </Button>
</Group> </Group>
</Group> </Stack>
)} )}
</ServerSection> </ServerSection>
<Divider my="xl" /> <Divider my="sm" />
<TimeoutButton <TimeoutButton
leftIcon={<RiDeleteBin2Line />} leftIcon={<RiDeleteBin2Line />}
timeoutProps={{ callback: handleDeleteServer, duration: 1500 }} timeoutProps={{ callback: handleDeleteServer, duration: 1500 }}

2
src/renderer/features/servers/components/server-list.tsx
View file

@ -30,7 +30,7 @@ export const ServerList = () => {
sx={{ sx={{
position: 'absolute', position: 'absolute',
right: 55, right: 55,
transform: 'translateY(-4.5rem)', transform: 'translateY(-2.5rem)',
}} }}
> >
<Button <Button

2
src/renderer/features/settings/components/general-tab.tsx
View file

@ -196,7 +196,7 @@ export const GeneralTab = () => {
]; ];
return ( return (
<Stack spacing="xl"> <Stack spacing="md">
{options {options
.filter((o) => !o.isHidden) .filter((o) => !o.isHidden)
.map((option) => ( .map((option) => (

2
src/renderer/features/settings/components/playback-tab.tsx
View file

@ -360,7 +360,7 @@ export const PlaybackTab = () => {
]; ];
return ( return (
<Stack spacing="xl"> <Stack spacing="md">
{playerOptions {playerOptions
.filter((o) => !o.isHidden) .filter((o) => !o.isHidden)
.map((option) => ( .map((option) => (

11
src/renderer/features/shared/components/library-header-bar.tsx
View file

@ -14,7 +14,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
align="center" align="center"
h="100%" h="100%"
px="1rem" px="1rem"
spacing="xl" spacing="md"
> >
{children} {children}
</Group> </Group>
@ -28,9 +28,9 @@ interface TitleProps {
const Title = ({ children }: TitleProps) => { const Title = ({ children }: TitleProps) => {
return ( return (
<TextTitle <TextTitle
fw="bold"
order={2} order={2}
overflow="hidden" overflow="hidden"
weight={700}
> >
{children} {children}
</TextTitle> </TextTitle>
@ -39,14 +39,13 @@ const Title = ({ children }: TitleProps) => {
interface PlayButtonProps { interface PlayButtonProps {
onClick: () => void; onClick: () => void;
size?: number;
} }
const PlayButton = ({ size, onClick }: PlayButtonProps) => { const PlayButton = ({ onClick }: PlayButtonProps) => {
return ( return (
<PlayBtn <PlayBtn
h={size || 45} h="50px"
w={size || 45} w="50px"
onClick={onClick} onClick={onClick}
/> />
); );

9
src/renderer/features/shared/components/library-header.tsx
View file

@ -134,20 +134,19 @@ export const LibraryHeader = forwardRef(
<Text <Text
$link $link
component={Link} component={Link}
fw="600"
sx={{ textTransform: 'uppercase' }}
to={item.route} to={item.route}
tt="uppercase"
weight={600}
> >
{item.type} {item.type}
</Text> </Text>
</Group> </Group>
<TextTitle <TextTitle
fw="900" lh="5rem"
lh="1.12"
lineClamp={2} lineClamp={2}
overflow="hidden" overflow="hidden"
pb=".06em"
sx={{ fontSize: titleSize, overflow: 'hidden' }} sx={{ fontSize: titleSize, overflow: 'hidden' }}
weight={900}
> >
{title} {title}
</TextTitle> </TextTitle>

4
src/renderer/features/shared/components/play-button.tsx
View file

@ -17,9 +17,9 @@ const MotionButton = styled(motion(_Button))`
export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => { export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
return ( return (
<MotionButton <MotionButton
h={50} h="50px"
variant="filled" variant="filled"
w={50} w="50px"
whileHover={{ scale: 1.1 }} whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
{...props} {...props}

53
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -1,7 +1,6 @@
import { MouseEvent } from 'react'; import { MouseEvent } from 'react';
import { Stack, Grid, Accordion, Center, Group } from '@mantine/core'; import { Stack, Grid, Accordion, Center, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals'; import { closeAllModals, openModal } from '@mantine/modals';
import { SpotlightProvider } from '@mantine/spotlight';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { BsCollection } from 'react-icons/bs'; import { BsCollection } from 'react-icons/bs';
import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components'; import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
@ -135,26 +134,28 @@ export const Sidebar = () => {
spacing={0} spacing={0}
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }} sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
> >
<ActionsContainer p={10}> <ActionsContainer
gutter="sm"
p={10}
>
<Grid.Col span={8}> <Grid.Col span={8}>
<SpotlightProvider actions={[]}> <TextInput
<TextInput disabled
disabled readOnly
readOnly icon={<RiSearchLine />}
icon={<RiSearchLine />} placeholder="Search"
placeholder="Search" rightSectionWidth={90}
rightSectionWidth={90} size="md"
// onClick={() => openSpotlight()} />
/>
</SpotlightProvider>
</Grid.Col> </Grid.Col>
<Grid.Col span={4}> <Grid.Col span={4}>
<Group <Group
grow grow
spacing={5} spacing="sm"
> >
<Button <Button
px={5} px={5}
size="md"
sx={{ color: 'var(--titlebar-fg)' }} sx={{ color: 'var(--titlebar-fg)' }}
variant="default" variant="default"
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
@ -163,6 +164,7 @@ export const Sidebar = () => {
</Button> </Button>
<Button <Button
px={5} px={5}
size="md"
sx={{ color: 'var(--titlebar-fg)' }} sx={{ color: 'var(--titlebar-fg)' }}
variant="default" variant="default"
onClick={() => navigate(1)} onClick={() => navigate(1)}
@ -183,7 +185,7 @@ export const Sidebar = () => {
py="0.5rem" py="0.5rem"
to={AppRoute.HOME} to={AppRoute.HOME}
> >
<Group> <Group spacing="sm">
{location.pathname === AppRoute.HOME ? ( {location.pathname === AppRoute.HOME ? (
<RiHome4Fill size="1.3em" /> <RiHome4Fill size="1.3em" />
) : ( ) : (
@ -210,7 +212,7 @@ export const Sidebar = () => {
> >
<Accordion.Item value="library"> <Accordion.Item value="library">
<Accordion.Control> <Accordion.Control>
<Group> <Group spacing="sm">
{location.pathname.includes('/library/') ? ( {location.pathname.includes('/library/') ? (
<RiDatabaseFill size="1.3em" /> <RiDatabaseFill size="1.3em" />
) : ( ) : (
@ -221,7 +223,7 @@ export const Sidebar = () => {
</Accordion.Control> </Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<SidebarItem to={AppRoute.LIBRARY_ALBUMS}> <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
<Group> <Group spacing="sm">
{location.pathname === AppRoute.LIBRARY_ALBUMS ? ( {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
<RiAlbumFill size="1.1em" /> <RiAlbumFill size="1.1em" />
) : ( ) : (
@ -231,7 +233,7 @@ export const Sidebar = () => {
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_SONGS}> <SidebarItem to={AppRoute.LIBRARY_SONGS}>
<Group> <Group spacing="sm">
{location.pathname === AppRoute.LIBRARY_SONGS ? ( {location.pathname === AppRoute.LIBRARY_SONGS ? (
<RiMusic2Fill size="1.1em" /> <RiMusic2Fill size="1.1em" />
) : ( ) : (
@ -241,7 +243,7 @@ export const Sidebar = () => {
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}> <SidebarItem to={AppRoute.LIBRARY_ALBUM_ARTISTS}>
<Group> <Group spacing="sm">
{location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? ( {location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS ? (
<RiUserVoiceFill size="1.1em" /> <RiUserVoiceFill size="1.1em" />
) : ( ) : (
@ -254,7 +256,7 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group> <Group spacing="sm">
<RiFlag2Line size="1.1em" /> <RiFlag2Line size="1.1em" />
Genres Genres
</Group> </Group>
@ -263,7 +265,7 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group> <Group spacing="sm">
<RiFolder3Line size="1.1em" /> <RiFolder3Line size="1.1em" />
Folders Folders
</Group> </Group>
@ -272,7 +274,7 @@ export const Sidebar = () => {
</Accordion.Item> </Accordion.Item>
<Accordion.Item value="collections"> <Accordion.Item value="collections">
<Accordion.Control disabled> <Accordion.Control disabled>
<Group> <Group spacing="sm">
<BsCollection size="1.3em" /> <BsCollection size="1.3em" />
Collections Collections
</Group> </Group>
@ -285,7 +287,10 @@ export const Sidebar = () => {
noWrap noWrap
position="apart" position="apart"
> >
<Group noWrap> <Group
noWrap
spacing="sm"
>
{location.pathname.includes('/playlists/') ? ( {location.pathname.includes('/playlists/') ? (
<MdFeaturedPlayList size="1.3em" /> <MdFeaturedPlayList size="1.3em" />
) : ( ) : (
@ -300,7 +305,7 @@ export const Sidebar = () => {
<Button <Button
compact compact
component="div" component="div"
h="1.5em" h="1.5rem"
tooltip={{ label: 'Create playlist', openDelay: 500 }} tooltip={{ label: 'Create playlist', openDelay: 500 }}
variant="default" variant="default"
onClick={handleCreatePlaylistModal} onClick={handleCreatePlaylistModal}
@ -310,7 +315,7 @@ export const Sidebar = () => {
<Button <Button
compact compact
component={Link} component={Link}
h="1.5em" h="1.5rem"
to={AppRoute.PLAYLISTS} to={AppRoute.PLAYLISTS}
tooltip={{ label: 'Playlist list', openDelay: 500 }} tooltip={{ label: 'Playlist list', openDelay: 500 }}
variant="default" variant="default"

5
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -318,16 +318,17 @@ export const SongListHeader = ({
> >
<Group noWrap> <Group noWrap>
<TextTitle <TextTitle
fw="bold"
maw="20vw" maw="20vw"
order={3} order={3}
overflow="hidden" overflow="hidden"
weight={700}
> >
{title || 'Tracks'} {title || 'Tracks'}
</TextTitle> </TextTitle>
<Badge <Badge
px="1rem"
radius="xl" radius="xl"
size="lg" size="xl"
> >
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount} {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge> </Badge>

2
src/renderer/router/titlebar-outlet.tsx
View file

@ -7,7 +7,7 @@ const TitlebarContainer = styled.header`
top: 0; top: 0;
right: 0; right: 0;
z-index: 5000; z-index: 5000;
height: 2.5rem; height: 30px;
background: var(--titlebar-controls-bg); background: var(--titlebar-controls-bg);
-webkit-app-region: drag; -webkit-app-region: drag;
`; `;

2
src/renderer/styles/ag-grid.scss
View file

@ -1,6 +1,6 @@
.ag-header-fixed { .ag-header-fixed {
position: fixed !important; position: fixed !important;
top: 60px; top: 65px;
z-index: 15; z-index: 15;
background: var(--table-header-bg) !important; background: var(--table-header-bg) !important;
margin: 0 -2rem; margin: 0 -2rem;

6
src/renderer/themes/default.scss
View file

@ -1,5 +1,5 @@
:root { :root {
--root-font-size: 12px; --root-font-size: 13px;
--icon-color: rgb(255, 255, 255); --icon-color: rgb(255, 255, 255);
--primary-color: rgb(34, 104, 255); --primary-color: rgb(34, 104, 255);
@ -65,8 +65,8 @@
--dropdown-menu-bg: rgb(40, 40, 40); --dropdown-menu-bg: rgb(40, 40, 40);
--dropdown-menu-fg: rgb(235, 235, 235); --dropdown-menu-fg: rgb(235, 235, 235);
--dropdown-menu-item-padding: 1rem 0.8rem; --dropdown-menu-item-padding: 1rem 0.5rem;
--dropdown-menu-item-font-size: 0.9em; --dropdown-menu-item-font-size: 1rem;
--dropdown-menu-bg-hover: rgb(62, 62, 62); --dropdown-menu-bg-hover: rgb(62, 62, 62);
--dropdown-menu-border: none; --dropdown-menu-border: none;
--dropdown-menu-border-radius: 2px; --dropdown-menu-border-radius: 2px;