From a833540bba10c2bc8b208a54fb293063511e09ed Mon Sep 17 00:00:00 2001 From: DIYgod Date: Mon, 19 Feb 2024 22:44:04 +0800 Subject: [PATCH] feat: mobile style optimization --- package.json | 1 + pnpm-lock.yaml | 276 ++++++++++++++++++++++++++++++--- src/lib/components/Sheet.tsx | 140 +++++++++++++++++ src/options/Siderbar.tsx | 70 +++++++-- src/options/index.tsx | 4 +- src/options/routes/General.tsx | 34 ++-- src/popup/RSSList.tsx | 2 +- 7 files changed, 476 insertions(+), 51 deletions(-) create mode 100644 src/lib/components/Sheet.tsx diff --git a/package.json b/package.json index e82aa9e..d8e8ffa 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@plasmohq/messaging": "^0.6.2", "@plasmohq/storage": "^1.9.3", "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 843e017..6e25ed7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@iconify-json/mingcute': specifier: ^1.1.16 @@ -13,6 +17,9 @@ dependencies: '@radix-ui/react-accordion': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-dialog': + specifier: 1.0.5 + version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-label': specifier: ^2.0.2 version: 2.0.2(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -2599,7 +2606,7 @@ packages: /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 dev: false /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): @@ -2644,7 +2651,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.2.55)(react@18.2.0) @@ -2672,7 +2679,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -2692,7 +2699,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -2706,11 +2713,45 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false + /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.9 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + aria-hidden: 1.2.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-remove-scroll: 2.5.5(@types/react@18.2.55)(react@18.2.0) + dev: false + /@radix-ui/react-direction@1.0.1(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} peerDependencies: @@ -2720,11 +2761,73 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false + /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.9 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.9 + '@types/react': 18.2.55 + react: 18.2.0 + dev: false + + /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.9 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-id@1.0.1(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: @@ -2734,7 +2837,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -2761,6 +2864,27 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.9 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.55 + '@types/react-dom': 18.2.19 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: @@ -2774,7 +2898,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 @@ -2796,7 +2920,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/react-slot': 1.0.2(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 '@types/react-dom': 18.2.19 @@ -2855,7 +2979,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -2869,7 +2993,22 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.9 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -2884,7 +3023,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -2898,7 +3037,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@types/react': 18.2.55 react: 18.2.0 dev: false @@ -2912,7 +3051,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.9 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.55)(react@18.2.0) '@types/react': 18.2.55 react: 18.2.0 @@ -3538,6 +3677,13 @@ packages: /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + /aria-hidden@1.2.3: + resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==} + engines: {node: '>=10'} + dependencies: + tslib: 2.6.2 + dev: false + /aria-query@5.3.0: resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} dependencies: @@ -4166,6 +4312,10 @@ packages: engines: {node: '>=8'} dev: false + /detect-node-es@1.1.0: + resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} + dev: false + /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} @@ -4578,6 +4728,11 @@ packages: has-symbols: 1.0.3 hasown: 2.0.0 + /get-nonce@1.0.1: + resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} + engines: {node: '>=6'} + dev: false + /get-port@7.0.0: resolution: {integrity: sha512-mDHFgApoQd+azgMdwylJrv2DX47ywGq1i5VFJE7fZ0dttNq3iQMfsU4IvEgBHojA3KqEudyu7Vq+oN8kNaNkWw==} engines: {node: '>=16'} @@ -4934,6 +5089,12 @@ packages: wrap-ansi: 6.2.0 dev: false + /invariant@2.2.4: + resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} + dependencies: + loose-envify: 1.4.0 + dev: false + /is-arguments@1.1.1: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} @@ -6405,6 +6566,41 @@ packages: engines: {node: '>=0.10.0'} dev: false + /react-remove-scroll-bar@2.3.5(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==} + 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 + dependencies: + '@types/react': 18.2.55 + react: 18.2.0 + react-style-singleton: 2.2.1(@types/react@18.2.55)(react@18.2.0) + tslib: 2.6.2 + dev: false + + /react-remove-scroll@2.5.5(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} + 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 + dependencies: + '@types/react': 18.2.55 + react: 18.2.0 + react-remove-scroll-bar: 2.3.5(@types/react@18.2.55)(react@18.2.0) + react-style-singleton: 2.2.1(@types/react@18.2.55)(react@18.2.0) + tslib: 2.6.2 + use-callback-ref: 1.3.1(@types/react@18.2.55)(react@18.2.0) + use-sidecar: 1.1.2(@types/react@18.2.55)(react@18.2.0) + dev: false + /react-router-dom@6.22.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==} engines: {node: '>=14.0.0'} @@ -6428,6 +6624,23 @@ packages: react: 18.2.0 dev: false + /react-style-singleton@2.2.1(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} + 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 + dependencies: + '@types/react': 18.2.55 + get-nonce: 1.0.1 + invariant: 2.2.4 + react: 18.2.0 + tslib: 2.6.2 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -7225,6 +7438,37 @@ packages: escalade: 3.1.1 picocolors: 1.0.0 + /use-callback-ref@1.3.1(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==} + 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 + dependencies: + '@types/react': 18.2.55 + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /use-sidecar@1.1.2(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + 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 + dependencies: + '@types/react': 18.2.55 + detect-node-es: 1.1.0 + react: 18.2.0 + tslib: 2.6.2 + dev: false + /usehooks-ts@2.14.0(react@18.2.0): resolution: {integrity: sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==} engines: {node: '>=16.15.0'} @@ -7392,7 +7636,3 @@ packages: /zod@3.22.4: resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/lib/components/Sheet.tsx b/src/lib/components/Sheet.tsx new file mode 100644 index 0000000..2bdea2c --- /dev/null +++ b/src/lib/components/Sheet.tsx @@ -0,0 +1,140 @@ +"use client" + +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { cva, type VariantProps } from "class-variance-authority" +import { X } from "lucide-react" + +import { cn } from "~/lib/utils" + +const Sheet = SheetPrimitive.Root + +const SheetTrigger = SheetPrimitive.Trigger + +const SheetClose = SheetPrimitive.Close + +const SheetPortal = SheetPrimitive.Portal + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName + +const sheetVariants = cva( + "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +) + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +SheetContent.displayName = SheetPrimitive.Content.displayName + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetHeader.displayName = "SheetHeader" + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetFooter.displayName = "SheetFooter" + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetTitle.displayName = SheetPrimitive.Title.displayName + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetDescription.displayName = SheetPrimitive.Description.displayName + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +} diff --git a/src/options/Siderbar.tsx b/src/options/Siderbar.tsx index 58d45ed..fc604cd 100644 --- a/src/options/Siderbar.tsx +++ b/src/options/Siderbar.tsx @@ -1,12 +1,23 @@ import RSSHubIcon from "data-base64:~/assets/icon.png" import { Link, useLocation } from "react-router-dom" +import { useMediaQuery } from "usehooks-ts" import { AppearanceSwitch } from "~/lib/components/AppearanceSwitch" +import { + Sheet, + SheetClose, + SheetContent, + SheetTrigger, +} from "~/lib/components/Sheet" import { cn } from "~/lib/utils" import info from "../../package.json" -function Siderbar() { +function SiderbarContent({ + withClose, +}: { + withClose?: boolean +}) { const location = useLocation() const links = [ { @@ -26,8 +37,10 @@ function Siderbar() { }, ] + const Close = withClose ? SheetClose : (props) => <>{props.children} + return ( -
+ <>
@@ -37,18 +50,20 @@ function Siderbar() {
    {links.map((link) => (
  • - - - {chrome.i18n.getMessage(link.text)} - + + + + {chrome.i18n.getMessage(link.text)} + +
    • ))}
@@ -62,6 +77,33 @@ function Siderbar() {

+ + ) +} + +function Siderbar() { + const matches = useMediaQuery("(min-width: 640px)") + + return ( +
+ {matches ? ( +
+ +
+ ) : ( +
+ + + + + +
+ +
+ + +
+ )}
) } diff --git a/src/options/index.tsx b/src/options/index.tsx index 873e312..3cf2af2 100644 --- a/src/options/index.tsx +++ b/src/options/index.tsx @@ -9,14 +9,14 @@ import Siderbar from "./Siderbar" function Options() { return ( -
+
-
+
diff --git a/src/options/routes/General.tsx b/src/options/routes/General.tsx index 1e542f0..6f0b77f 100644 --- a/src/options/routes/General.tsx +++ b/src/options/routes/General.tsx @@ -177,24 +177,26 @@ function General() { {quickSubscriptions.map((quickSubscription) => (
- - setConfig({ - submitto: { - [quickSubscription.key]: value, - }, - } as any) - } - /> - +
+ + setConfig({ + submitto: { + [quickSubscription.key]: value, + }, + } as any) + } + /> + +
{config.submitto[quickSubscription.key] && ("subscribeDomainKey" in quickSubscription ? (

{chrome.i18n.getMessage(type)}

-
    +
      {list.map((item) => ( ))}