+22 -4

README.md

··· 1 1 # Red Dwarf 2 2 Red Dwarf is a Bluesky client that does not use any AppView servers, instead it gathers the data from [Constellation](https://constellation.microcosm.blue/) and each users' PDS. 3 3 4 4 -  4 4 +  5 5 6 6 huge thanks to [Microcosm](https://microcosm.blue/) for making this possible 7 7 8 8 ## running dev and build 9 9 in the `vite.config.ts` file you should change these values 10 10 ```ts 11 11 - const PROD_URL = "https://reddwarf.whey.party" 11 11 + const PROD_URL = "https://reddwarf.app" 12 12 const DEV_URL = "https://local3768forumtest.whey.party" 13 13 ``` 14 14 the PROD_URL is what will compile your oauth client metadata so it is very important to change that. same for DEV_URL if you are using a tunnel for dev work ··· 52 52 and for list feeds, you can just use something like graze or skyfeed to input a list of users and output a custom feed 53 53 54 54 ## Tanstack Router 55 55 - it does the job, nothing very specific was used here 55 55 + something specific was used here 56 56 + 57 57 + so tanstack router is used as the base, but the home route is using tanstack-router-keepalive to preserve the route for better responsiveness, and it also saves scroll position of feeds into jotai (persistent) 58 58 + 59 59 + i previously used a tanstack router loader to ensure the tanstack query cache is ready to prevent scroll jumps but it is way too slow so i replaced it with tanstack-router-keepalive 60 60 + 61 61 + ## Icons 62 62 + this project uses Material icons. do not the light variant. sometimes i use `Mdi` if the icon needed doesnt exist in `MaterialSymbols` 56 63 57 57 - im planning to use the loader system on select pages to prevent loss of scroll positon and state though its really complex so i havent done it yet but the migration to tanstack query is a huge first step towards this goal 64 64 + the project uses unplugin icon auto import, so you can just use the component and itll just work! 65 65 + 66 66 + the format is: 67 67 + ```tsx 68 68 + <IconMaterialSymbols{icon name here} /> 69 69 + // or 70 70 + <IconMdi{icon name here} /> 71 71 + ``` 72 72 + 73 73 + you can get the full list of icon names from iconify ([Material Symbols](https://icon-sets.iconify.design/material-symbols/) or [MDI](https://icon-sets.iconify.design/mdi/)) 74 74 + 75 75 + while it is nice to keep everything consistent by using material icons, if the icon you need is not provided by either material symbols nor mdi, you are allowed to just grab any icon from any pack (please do prioritize icons that fit in)

+2538 -24

package-lock.json

··· 8 8 "dependencies": { 9 9 "@atproto/api": "^0.16.6", 10 10 "@atproto/oauth-client-browser": "^0.3.33", 11 11 + "@radix-ui/react-dialog": "^1.1.15", 12 12 + "@radix-ui/react-dropdown-menu": "^2.1.16", 13 13 + "@radix-ui/react-hover-card": "^1.1.15", 14 14 + "@radix-ui/react-slider": "^1.3.6", 11 15 "@tailwindcss/vite": "^4.0.6", 12 16 "@tanstack/query-sync-storage-persister": "^5.85.6", 13 17 "@tanstack/react-devtools": "^0.2.2", ··· 16 20 "@tanstack/react-router": "^1.130.2", 17 21 "@tanstack/react-router-devtools": "^1.131.5", 18 22 "@tanstack/router-plugin": "^1.121.2", 23 23 + "dompurify": "^3.3.0", 19 24 "i": "^0.3.7", 20 25 "idb-keyval": "^6.2.2", 21 26 "jotai": "^2.13.1", 22 27 "npm": "^11.6.2", 28 28 + "radix-ui": "^1.4.3", 23 29 "react": "^19.0.0", 24 30 "react-dom": "^19.0.0", 25 31 "react-player": "^3.3.2", ··· 28 34 }, 29 35 "devDependencies": { 30 36 "@eslint-react/eslint-plugin": "^2.2.1", 37 37 + "@iconify-icon/react": "^3.0.1", 38 38 + "@iconify-json/material-symbols": "^1.2.42", 39 39 + "@iconify-json/mdi": "^1.2.3", 40 40 + "@iconify/json": "^2.2.396", 41 41 + "@svgr/core": "^8.1.0", 42 42 + "@svgr/plugin-jsx": "^8.1.0", 31 43 "@testing-library/dom": "^10.4.0", 32 44 "@testing-library/react": "^16.2.0", 33 45 "@types/node": "^24.3.0", ··· 45 57 "prettier": "^3.6.2", 46 58 "typescript": "^5.7.2", 47 59 "typescript-eslint": "^8.46.1", 60 60 + "unplugin-auto-import": "^20.2.0", 61 61 + "unplugin-icons": "^22.4.2", 48 62 "vite": "^6.3.5", 49 63 "vitest": "^3.0.5", 50 64 "web-vitals": "^4.2.4" ··· 61 75 }, 62 76 "engines": { 63 77 "node": ">=6.0.0" 78 78 + } 79 79 + }, 80 80 + "node_modules/@antfu/install-pkg": { 81 81 + "version": "1.1.0", 82 82 + "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz", 83 83 + "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==", 84 84 + "dev": true, 85 85 + "license": "MIT", 86 86 + "dependencies": { 87 87 + "package-manager-detector": "^1.3.0", 88 88 + "tinyexec": "^1.0.1" 89 89 + }, 90 90 + "funding": { 91 91 + "url": "https://github.com/sponsors/antfu" 92 92 + } 93 93 + }, 94 94 + "node_modules/@antfu/install-pkg/node_modules/tinyexec": { 95 95 + "version": "1.0.1", 96 96 + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz", 97 97 + "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==", 98 98 + "dev": true, 99 99 + "license": "MIT" 100 100 + }, 101 101 + "node_modules/@antfu/utils": { 102 102 + "version": "9.3.0", 103 103 + "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-9.3.0.tgz", 104 104 + "integrity": "sha512-9hFT4RauhcUzqOE4f1+frMKLZrgNog5b06I7VmZQV1BkvwvqrbC8EBZf3L1eEL2AKb6rNKjER0sEvJiSP1FXEA==", 105 105 + "dev": true, 106 106 + "license": "MIT", 107 107 + "funding": { 108 108 + "url": "https://github.com/sponsors/antfu" 64 109 } 65 110 }, 66 111 "node_modules/@asamuzakjp/css-color": { ··· 1552 1597 "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 1553 1598 } 1554 1599 }, 1600 1600 + "node_modules/@floating-ui/core": { 1601 1601 + "version": "1.7.3", 1602 1602 + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", 1603 1603 + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", 1604 1604 + "dependencies": { 1605 1605 + "@floating-ui/utils": "^0.2.10" 1606 1606 + } 1607 1607 + }, 1608 1608 + "node_modules/@floating-ui/dom": { 1609 1609 + "version": "1.7.4", 1610 1610 + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", 1611 1611 + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", 1612 1612 + "dependencies": { 1613 1613 + "@floating-ui/core": "^1.7.3", 1614 1614 + "@floating-ui/utils": "^0.2.10" 1615 1615 + } 1616 1616 + }, 1617 1617 + "node_modules/@floating-ui/react-dom": { 1618 1618 + "version": "2.1.6", 1619 1619 + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", 1620 1620 + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", 1621 1621 + "dependencies": { 1622 1622 + "@floating-ui/dom": "^1.7.4" 1623 1623 + }, 1624 1624 + "peerDependencies": { 1625 1625 + "react": ">=16.8.0", 1626 1626 + "react-dom": ">=16.8.0" 1627 1627 + } 1628 1628 + }, 1629 1629 + "node_modules/@floating-ui/utils": { 1630 1630 + "version": "0.2.10", 1631 1631 + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", 1632 1632 + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==" 1633 1633 + }, 1555 1634 "node_modules/@humanfs/core": { 1556 1635 "version": "0.19.1", 1557 1636 "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", ··· 1608 1687 "url": "https://github.com/sponsors/nzakas" 1609 1688 } 1610 1689 }, 1690 1690 + "node_modules/@iconify-icon/react": { 1691 1691 + "version": "3.0.1", 1692 1692 + "resolved": "https://registry.npmjs.org/@iconify-icon/react/-/react-3.0.1.tgz", 1693 1693 + "integrity": "sha512-/4CAVpk8HDyKS78r1G0rZhML7hI6jLxb8kAmjEXsCtuVUDwdGqicGCRg0T14mqeHNImrQPR49MhbuSSS++JlUA==", 1694 1694 + "dev": true, 1695 1695 + "license": "MIT", 1696 1696 + "dependencies": { 1697 1697 + "iconify-icon": "^3.0.1" 1698 1698 + }, 1699 1699 + "funding": { 1700 1700 + "url": "https://github.com/sponsors/cyberalien" 1701 1701 + }, 1702 1702 + "peerDependencies": { 1703 1703 + "react": ">=16" 1704 1704 + } 1705 1705 + }, 1706 1706 + "node_modules/@iconify-json/material-symbols": { 1707 1707 + "version": "1.2.42", 1708 1708 + "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.42.tgz", 1709 1709 + "integrity": "sha512-FDRfnQqy8iXaq/swVPFWaHftqP9tk3qDCRhC30s3UZL2j4mvGZk5gVECRXCkZv5jnsAiTpZxGQM8HrMiwE7GtA==", 1710 1710 + "dev": true, 1711 1711 + "license": "Apache-2.0", 1712 1712 + "dependencies": { 1713 1713 + "@iconify/types": "*" 1714 1714 + } 1715 1715 + }, 1716 1716 + "node_modules/@iconify-json/mdi": { 1717 1717 + "version": "1.2.3", 1718 1718 + "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz", 1719 1719 + "integrity": "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==", 1720 1720 + "dev": true, 1721 1721 + "license": "Apache-2.0", 1722 1722 + "dependencies": { 1723 1723 + "@iconify/types": "*" 1724 1724 + } 1725 1725 + }, 1726 1726 + "node_modules/@iconify/json": { 1727 1727 + "version": "2.2.396", 1728 1728 + "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.396.tgz", 1729 1729 + "integrity": "sha512-tijg77JFuYIt32S9N8p7La8C0zp9zKZsX6UP8ip5GVB1F6Mp3pZA5Vc5eAquTY50NoDJX58U6z4Qn3d6Wyossg==", 1730 1730 + "dev": true, 1731 1731 + "license": "MIT", 1732 1732 + "dependencies": { 1733 1733 + "@iconify/types": "*", 1734 1734 + "pathe": "^2.0.0" 1735 1735 + } 1736 1736 + }, 1737 1737 + "node_modules/@iconify/types": { 1738 1738 + "version": "2.0.0", 1739 1739 + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", 1740 1740 + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", 1741 1741 + "dev": true, 1742 1742 + "license": "MIT" 1743 1743 + }, 1744 1744 + "node_modules/@iconify/utils": { 1745 1745 + "version": "3.0.2", 1746 1746 + "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.0.2.tgz", 1747 1747 + "integrity": "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==", 1748 1748 + "dev": true, 1749 1749 + "license": "MIT", 1750 1750 + "dependencies": { 1751 1751 + "@antfu/install-pkg": "^1.1.0", 1752 1752 + "@antfu/utils": "^9.2.0", 1753 1753 + "@iconify/types": "^2.0.0", 1754 1754 + "debug": "^4.4.1", 1755 1755 + "globals": "^15.15.0", 1756 1756 + "kolorist": "^1.8.0", 1757 1757 + "local-pkg": "^1.1.1", 1758 1758 + "mlly": "^1.7.4" 1759 1759 + } 1760 1760 + }, 1761 1761 + "node_modules/@iconify/utils/node_modules/globals": { 1762 1762 + "version": "15.15.0", 1763 1763 + "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz", 1764 1764 + "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==", 1765 1765 + "dev": true, 1766 1766 + "license": "MIT", 1767 1767 + "engines": { 1768 1768 + "node": ">=18" 1769 1769 + }, 1770 1770 + "funding": { 1771 1771 + "url": "https://github.com/sponsors/sindresorhus" 1772 1772 + } 1773 1773 + }, 1611 1774 "node_modules/@isaacs/fs-minipass": { 1612 1775 "version": "4.0.1", 1613 1776 "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz", ··· 1771 1934 "node": ">= 8" 1772 1935 } 1773 1936 }, 1937 1937 + "node_modules/@radix-ui/number": { 1938 1938 + "version": "1.1.1", 1939 1939 + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz", 1940 1940 + "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==" 1941 1941 + }, 1942 1942 + "node_modules/@radix-ui/primitive": { 1943 1943 + "version": "1.1.3", 1944 1944 + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", 1945 1945 + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==" 1946 1946 + }, 1947 1947 + "node_modules/@radix-ui/react-accessible-icon": { 1948 1948 + "version": "1.1.7", 1949 1949 + "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz", 1950 1950 + "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==", 1951 1951 + "dependencies": { 1952 1952 + "@radix-ui/react-visually-hidden": "1.2.3" 1953 1953 + }, 1954 1954 + "peerDependencies": { 1955 1955 + "@types/react": "*", 1956 1956 + "@types/react-dom": "*", 1957 1957 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 1958 1958 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 1959 1959 + }, 1960 1960 + "peerDependenciesMeta": { 1961 1961 + "@types/react": { 1962 1962 + "optional": true 1963 1963 + }, 1964 1964 + "@types/react-dom": { 1965 1965 + "optional": true 1966 1966 + } 1967 1967 + } 1968 1968 + }, 1969 1969 + "node_modules/@radix-ui/react-accordion": { 1970 1970 + "version": "1.2.12", 1971 1971 + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz", 1972 1972 + "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==", 1973 1973 + "dependencies": { 1974 1974 + "@radix-ui/primitive": "1.1.3", 1975 1975 + "@radix-ui/react-collapsible": "1.1.12", 1976 1976 + "@radix-ui/react-collection": "1.1.7", 1977 1977 + "@radix-ui/react-compose-refs": "1.1.2", 1978 1978 + "@radix-ui/react-context": "1.1.2", 1979 1979 + "@radix-ui/react-direction": "1.1.1", 1980 1980 + "@radix-ui/react-id": "1.1.1", 1981 1981 + "@radix-ui/react-primitive": "2.1.3", 1982 1982 + "@radix-ui/react-use-controllable-state": "1.2.2" 1983 1983 + }, 1984 1984 + "peerDependencies": { 1985 1985 + "@types/react": "*", 1986 1986 + "@types/react-dom": "*", 1987 1987 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 1988 1988 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 1989 1989 + }, 1990 1990 + "peerDependenciesMeta": { 1991 1991 + "@types/react": { 1992 1992 + "optional": true 1993 1993 + }, 1994 1994 + "@types/react-dom": { 1995 1995 + "optional": true 1996 1996 + } 1997 1997 + } 1998 1998 + }, 1999 1999 + "node_modules/@radix-ui/react-alert-dialog": { 2000 2000 + "version": "1.1.15", 2001 2001 + "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz", 2002 2002 + "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==", 2003 2003 + "dependencies": { 2004 2004 + "@radix-ui/primitive": "1.1.3", 2005 2005 + "@radix-ui/react-compose-refs": "1.1.2", 2006 2006 + "@radix-ui/react-context": "1.1.2", 2007 2007 + "@radix-ui/react-dialog": "1.1.15", 2008 2008 + "@radix-ui/react-primitive": "2.1.3", 2009 2009 + "@radix-ui/react-slot": "1.2.3" 2010 2010 + }, 2011 2011 + "peerDependencies": { 2012 2012 + "@types/react": "*", 2013 2013 + "@types/react-dom": "*", 2014 2014 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2015 2015 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2016 2016 + }, 2017 2017 + "peerDependenciesMeta": { 2018 2018 + "@types/react": { 2019 2019 + "optional": true 2020 2020 + }, 2021 2021 + "@types/react-dom": { 2022 2022 + "optional": true 2023 2023 + } 2024 2024 + } 2025 2025 + }, 2026 2026 + "node_modules/@radix-ui/react-arrow": { 2027 2027 + "version": "1.1.7", 2028 2028 + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz", 2029 2029 + "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==", 2030 2030 + "dependencies": { 2031 2031 + "@radix-ui/react-primitive": "2.1.3" 2032 2032 + }, 2033 2033 + "peerDependencies": { 2034 2034 + "@types/react": "*", 2035 2035 + "@types/react-dom": "*", 2036 2036 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2037 2037 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2038 2038 + }, 2039 2039 + "peerDependenciesMeta": { 2040 2040 + "@types/react": { 2041 2041 + "optional": true 2042 2042 + }, 2043 2043 + "@types/react-dom": { 2044 2044 + "optional": true 2045 2045 + } 2046 2046 + } 2047 2047 + }, 2048 2048 + "node_modules/@radix-ui/react-aspect-ratio": { 2049 2049 + "version": "1.1.7", 2050 2050 + "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz", 2051 2051 + "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==", 2052 2052 + "dependencies": { 2053 2053 + "@radix-ui/react-primitive": "2.1.3" 2054 2054 + }, 2055 2055 + "peerDependencies": { 2056 2056 + "@types/react": "*", 2057 2057 + "@types/react-dom": "*", 2058 2058 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2059 2059 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2060 2060 + }, 2061 2061 + "peerDependenciesMeta": { 2062 2062 + "@types/react": { 2063 2063 + "optional": true 2064 2064 + }, 2065 2065 + "@types/react-dom": { 2066 2066 + "optional": true 2067 2067 + } 2068 2068 + } 2069 2069 + }, 2070 2070 + "node_modules/@radix-ui/react-avatar": { 2071 2071 + "version": "1.1.10", 2072 2072 + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz", 2073 2073 + "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==", 2074 2074 + "dependencies": { 2075 2075 + "@radix-ui/react-context": "1.1.2", 2076 2076 + "@radix-ui/react-primitive": "2.1.3", 2077 2077 + "@radix-ui/react-use-callback-ref": "1.1.1", 2078 2078 + "@radix-ui/react-use-is-hydrated": "0.1.0", 2079 2079 + "@radix-ui/react-use-layout-effect": "1.1.1" 2080 2080 + }, 2081 2081 + "peerDependencies": { 2082 2082 + "@types/react": "*", 2083 2083 + "@types/react-dom": "*", 2084 2084 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2085 2085 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2086 2086 + }, 2087 2087 + "peerDependenciesMeta": { 2088 2088 + "@types/react": { 2089 2089 + "optional": true 2090 2090 + }, 2091 2091 + "@types/react-dom": { 2092 2092 + "optional": true 2093 2093 + } 2094 2094 + } 2095 2095 + }, 2096 2096 + "node_modules/@radix-ui/react-checkbox": { 2097 2097 + "version": "1.3.3", 2098 2098 + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", 2099 2099 + "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==", 2100 2100 + "dependencies": { 2101 2101 + "@radix-ui/primitive": "1.1.3", 2102 2102 + "@radix-ui/react-compose-refs": "1.1.2", 2103 2103 + "@radix-ui/react-context": "1.1.2", 2104 2104 + "@radix-ui/react-presence": "1.1.5", 2105 2105 + "@radix-ui/react-primitive": "2.1.3", 2106 2106 + "@radix-ui/react-use-controllable-state": "1.2.2", 2107 2107 + "@radix-ui/react-use-previous": "1.1.1", 2108 2108 + "@radix-ui/react-use-size": "1.1.1" 2109 2109 + }, 2110 2110 + "peerDependencies": { 2111 2111 + "@types/react": "*", 2112 2112 + "@types/react-dom": "*", 2113 2113 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2114 2114 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2115 2115 + }, 2116 2116 + "peerDependenciesMeta": { 2117 2117 + "@types/react": { 2118 2118 + "optional": true 2119 2119 + }, 2120 2120 + "@types/react-dom": { 2121 2121 + "optional": true 2122 2122 + } 2123 2123 + } 2124 2124 + }, 2125 2125 + "node_modules/@radix-ui/react-collapsible": { 2126 2126 + "version": "1.1.12", 2127 2127 + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz", 2128 2128 + "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==", 2129 2129 + "dependencies": { 2130 2130 + "@radix-ui/primitive": "1.1.3", 2131 2131 + "@radix-ui/react-compose-refs": "1.1.2", 2132 2132 + "@radix-ui/react-context": "1.1.2", 2133 2133 + "@radix-ui/react-id": "1.1.1", 2134 2134 + "@radix-ui/react-presence": "1.1.5", 2135 2135 + "@radix-ui/react-primitive": "2.1.3", 2136 2136 + "@radix-ui/react-use-controllable-state": "1.2.2", 2137 2137 + "@radix-ui/react-use-layout-effect": "1.1.1" 2138 2138 + }, 2139 2139 + "peerDependencies": { 2140 2140 + "@types/react": "*", 2141 2141 + "@types/react-dom": "*", 2142 2142 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2143 2143 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2144 2144 + }, 2145 2145 + "peerDependenciesMeta": { 2146 2146 + "@types/react": { 2147 2147 + "optional": true 2148 2148 + }, 2149 2149 + "@types/react-dom": { 2150 2150 + "optional": true 2151 2151 + } 2152 2152 + } 2153 2153 + }, 2154 2154 + "node_modules/@radix-ui/react-collection": { 2155 2155 + "version": "1.1.7", 2156 2156 + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz", 2157 2157 + "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==", 2158 2158 + "dependencies": { 2159 2159 + "@radix-ui/react-compose-refs": "1.1.2", 2160 2160 + "@radix-ui/react-context": "1.1.2", 2161 2161 + "@radix-ui/react-primitive": "2.1.3", 2162 2162 + "@radix-ui/react-slot": "1.2.3" 2163 2163 + }, 2164 2164 + "peerDependencies": { 2165 2165 + "@types/react": "*", 2166 2166 + "@types/react-dom": "*", 2167 2167 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2168 2168 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2169 2169 + }, 2170 2170 + "peerDependenciesMeta": { 2171 2171 + "@types/react": { 2172 2172 + "optional": true 2173 2173 + }, 2174 2174 + "@types/react-dom": { 2175 2175 + "optional": true 2176 2176 + } 2177 2177 + } 2178 2178 + }, 2179 2179 + "node_modules/@radix-ui/react-compose-refs": { 2180 2180 + "version": "1.1.2", 2181 2181 + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", 2182 2182 + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", 2183 2183 + "peerDependencies": { 2184 2184 + "@types/react": "*", 2185 2185 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2186 2186 + }, 2187 2187 + "peerDependenciesMeta": { 2188 2188 + "@types/react": { 2189 2189 + "optional": true 2190 2190 + } 2191 2191 + } 2192 2192 + }, 2193 2193 + "node_modules/@radix-ui/react-context": { 2194 2194 + "version": "1.1.2", 2195 2195 + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz", 2196 2196 + "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==", 2197 2197 + "peerDependencies": { 2198 2198 + "@types/react": "*", 2199 2199 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2200 2200 + }, 2201 2201 + "peerDependenciesMeta": { 2202 2202 + "@types/react": { 2203 2203 + "optional": true 2204 2204 + } 2205 2205 + } 2206 2206 + }, 2207 2207 + "node_modules/@radix-ui/react-context-menu": { 2208 2208 + "version": "2.2.16", 2209 2209 + "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz", 2210 2210 + "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==", 2211 2211 + "dependencies": { 2212 2212 + "@radix-ui/primitive": "1.1.3", 2213 2213 + "@radix-ui/react-context": "1.1.2", 2214 2214 + "@radix-ui/react-menu": "2.1.16", 2215 2215 + "@radix-ui/react-primitive": "2.1.3", 2216 2216 + "@radix-ui/react-use-callback-ref": "1.1.1", 2217 2217 + "@radix-ui/react-use-controllable-state": "1.2.2" 2218 2218 + }, 2219 2219 + "peerDependencies": { 2220 2220 + "@types/react": "*", 2221 2221 + "@types/react-dom": "*", 2222 2222 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2223 2223 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2224 2224 + }, 2225 2225 + "peerDependenciesMeta": { 2226 2226 + "@types/react": { 2227 2227 + "optional": true 2228 2228 + }, 2229 2229 + "@types/react-dom": { 2230 2230 + "optional": true 2231 2231 + } 2232 2232 + } 2233 2233 + }, 2234 2234 + "node_modules/@radix-ui/react-dialog": { 2235 2235 + "version": "1.1.15", 2236 2236 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz", 2237 2237 + "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==", 2238 2238 + "dependencies": { 2239 2239 + "@radix-ui/primitive": "1.1.3", 2240 2240 + "@radix-ui/react-compose-refs": "1.1.2", 2241 2241 + "@radix-ui/react-context": "1.1.2", 2242 2242 + "@radix-ui/react-dismissable-layer": "1.1.11", 2243 2243 + "@radix-ui/react-focus-guards": "1.1.3", 2244 2244 + "@radix-ui/react-focus-scope": "1.1.7", 2245 2245 + "@radix-ui/react-id": "1.1.1", 2246 2246 + "@radix-ui/react-portal": "1.1.9", 2247 2247 + "@radix-ui/react-presence": "1.1.5", 2248 2248 + "@radix-ui/react-primitive": "2.1.3", 2249 2249 + "@radix-ui/react-slot": "1.2.3", 2250 2250 + "@radix-ui/react-use-controllable-state": "1.2.2", 2251 2251 + "aria-hidden": "^1.2.4", 2252 2252 + "react-remove-scroll": "^2.6.3" 2253 2253 + }, 2254 2254 + "peerDependencies": { 2255 2255 + "@types/react": "*", 2256 2256 + "@types/react-dom": "*", 2257 2257 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2258 2258 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2259 2259 + }, 2260 2260 + "peerDependenciesMeta": { 2261 2261 + "@types/react": { 2262 2262 + "optional": true 2263 2263 + }, 2264 2264 + "@types/react-dom": { 2265 2265 + "optional": true 2266 2266 + } 2267 2267 + } 2268 2268 + }, 2269 2269 + "node_modules/@radix-ui/react-direction": { 2270 2270 + "version": "1.1.1", 2271 2271 + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz", 2272 2272 + "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==", 2273 2273 + "peerDependencies": { 2274 2274 + "@types/react": "*", 2275 2275 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2276 2276 + }, 2277 2277 + "peerDependenciesMeta": { 2278 2278 + "@types/react": { 2279 2279 + "optional": true 2280 2280 + } 2281 2281 + } 2282 2282 + }, 2283 2283 + "node_modules/@radix-ui/react-dismissable-layer": { 2284 2284 + "version": "1.1.11", 2285 2285 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz", 2286 2286 + "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==", 2287 2287 + "dependencies": { 2288 2288 + "@radix-ui/primitive": "1.1.3", 2289 2289 + "@radix-ui/react-compose-refs": "1.1.2", 2290 2290 + "@radix-ui/react-primitive": "2.1.3", 2291 2291 + "@radix-ui/react-use-callback-ref": "1.1.1", 2292 2292 + "@radix-ui/react-use-escape-keydown": "1.1.1" 2293 2293 + }, 2294 2294 + "peerDependencies": { 2295 2295 + "@types/react": "*", 2296 2296 + "@types/react-dom": "*", 2297 2297 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2298 2298 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2299 2299 + }, 2300 2300 + "peerDependenciesMeta": { 2301 2301 + "@types/react": { 2302 2302 + "optional": true 2303 2303 + }, 2304 2304 + "@types/react-dom": { 2305 2305 + "optional": true 2306 2306 + } 2307 2307 + } 2308 2308 + }, 2309 2309 + "node_modules/@radix-ui/react-dropdown-menu": { 2310 2310 + "version": "2.1.16", 2311 2311 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz", 2312 2312 + "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==", 2313 2313 + "dependencies": { 2314 2314 + "@radix-ui/primitive": "1.1.3", 2315 2315 + "@radix-ui/react-compose-refs": "1.1.2", 2316 2316 + "@radix-ui/react-context": "1.1.2", 2317 2317 + "@radix-ui/react-id": "1.1.1", 2318 2318 + "@radix-ui/react-menu": "2.1.16", 2319 2319 + "@radix-ui/react-primitive": "2.1.3", 2320 2320 + "@radix-ui/react-use-controllable-state": "1.2.2" 2321 2321 + }, 2322 2322 + "peerDependencies": { 2323 2323 + "@types/react": "*", 2324 2324 + "@types/react-dom": "*", 2325 2325 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2326 2326 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2327 2327 + }, 2328 2328 + "peerDependenciesMeta": { 2329 2329 + "@types/react": { 2330 2330 + "optional": true 2331 2331 + }, 2332 2332 + "@types/react-dom": { 2333 2333 + "optional": true 2334 2334 + } 2335 2335 + } 2336 2336 + }, 2337 2337 + "node_modules/@radix-ui/react-focus-guards": { 2338 2338 + "version": "1.1.3", 2339 2339 + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz", 2340 2340 + "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==", 2341 2341 + "peerDependencies": { 2342 2342 + "@types/react": "*", 2343 2343 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2344 2344 + }, 2345 2345 + "peerDependenciesMeta": { 2346 2346 + "@types/react": { 2347 2347 + "optional": true 2348 2348 + } 2349 2349 + } 2350 2350 + }, 2351 2351 + "node_modules/@radix-ui/react-focus-scope": { 2352 2352 + "version": "1.1.7", 2353 2353 + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz", 2354 2354 + "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==", 2355 2355 + "dependencies": { 2356 2356 + "@radix-ui/react-compose-refs": "1.1.2", 2357 2357 + "@radix-ui/react-primitive": "2.1.3", 2358 2358 + "@radix-ui/react-use-callback-ref": "1.1.1" 2359 2359 + }, 2360 2360 + "peerDependencies": { 2361 2361 + "@types/react": "*", 2362 2362 + "@types/react-dom": "*", 2363 2363 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2364 2364 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2365 2365 + }, 2366 2366 + "peerDependenciesMeta": { 2367 2367 + "@types/react": { 2368 2368 + "optional": true 2369 2369 + }, 2370 2370 + "@types/react-dom": { 2371 2371 + "optional": true 2372 2372 + } 2373 2373 + } 2374 2374 + }, 2375 2375 + "node_modules/@radix-ui/react-form": { 2376 2376 + "version": "0.1.8", 2377 2377 + "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz", 2378 2378 + "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==", 2379 2379 + "dependencies": { 2380 2380 + "@radix-ui/primitive": "1.1.3", 2381 2381 + "@radix-ui/react-compose-refs": "1.1.2", 2382 2382 + "@radix-ui/react-context": "1.1.2", 2383 2383 + "@radix-ui/react-id": "1.1.1", 2384 2384 + "@radix-ui/react-label": "2.1.7", 2385 2385 + "@radix-ui/react-primitive": "2.1.3" 2386 2386 + }, 2387 2387 + "peerDependencies": { 2388 2388 + "@types/react": "*", 2389 2389 + "@types/react-dom": "*", 2390 2390 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2391 2391 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2392 2392 + }, 2393 2393 + "peerDependenciesMeta": { 2394 2394 + "@types/react": { 2395 2395 + "optional": true 2396 2396 + }, 2397 2397 + "@types/react-dom": { 2398 2398 + "optional": true 2399 2399 + } 2400 2400 + } 2401 2401 + }, 2402 2402 + "node_modules/@radix-ui/react-hover-card": { 2403 2403 + "version": "1.1.15", 2404 2404 + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz", 2405 2405 + "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==", 2406 2406 + "license": "MIT", 2407 2407 + "dependencies": { 2408 2408 + "@radix-ui/primitive": "1.1.3", 2409 2409 + "@radix-ui/react-compose-refs": "1.1.2", 2410 2410 + "@radix-ui/react-context": "1.1.2", 2411 2411 + "@radix-ui/react-dismissable-layer": "1.1.11", 2412 2412 + "@radix-ui/react-popper": "1.2.8", 2413 2413 + "@radix-ui/react-portal": "1.1.9", 2414 2414 + "@radix-ui/react-presence": "1.1.5", 2415 2415 + "@radix-ui/react-primitive": "2.1.3", 2416 2416 + "@radix-ui/react-use-controllable-state": "1.2.2" 2417 2417 + }, 2418 2418 + "peerDependencies": { 2419 2419 + "@types/react": "*", 2420 2420 + "@types/react-dom": "*", 2421 2421 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2422 2422 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2423 2423 + }, 2424 2424 + "peerDependenciesMeta": { 2425 2425 + "@types/react": { 2426 2426 + "optional": true 2427 2427 + }, 2428 2428 + "@types/react-dom": { 2429 2429 + "optional": true 2430 2430 + } 2431 2431 + } 2432 2432 + }, 2433 2433 + "node_modules/@radix-ui/react-id": { 2434 2434 + "version": "1.1.1", 2435 2435 + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz", 2436 2436 + "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==", 2437 2437 + "dependencies": { 2438 2438 + "@radix-ui/react-use-layout-effect": "1.1.1" 2439 2439 + }, 2440 2440 + "peerDependencies": { 2441 2441 + "@types/react": "*", 2442 2442 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2443 2443 + }, 2444 2444 + "peerDependenciesMeta": { 2445 2445 + "@types/react": { 2446 2446 + "optional": true 2447 2447 + } 2448 2448 + } 2449 2449 + }, 2450 2450 + "node_modules/@radix-ui/react-label": { 2451 2451 + "version": "2.1.7", 2452 2452 + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz", 2453 2453 + "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==", 2454 2454 + "dependencies": { 2455 2455 + "@radix-ui/react-primitive": "2.1.3" 2456 2456 + }, 2457 2457 + "peerDependencies": { 2458 2458 + "@types/react": "*", 2459 2459 + "@types/react-dom": "*", 2460 2460 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2461 2461 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2462 2462 + }, 2463 2463 + "peerDependenciesMeta": { 2464 2464 + "@types/react": { 2465 2465 + "optional": true 2466 2466 + }, 2467 2467 + "@types/react-dom": { 2468 2468 + "optional": true 2469 2469 + } 2470 2470 + } 2471 2471 + }, 2472 2472 + "node_modules/@radix-ui/react-menu": { 2473 2473 + "version": "2.1.16", 2474 2474 + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz", 2475 2475 + "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==", 2476 2476 + "dependencies": { 2477 2477 + "@radix-ui/primitive": "1.1.3", 2478 2478 + "@radix-ui/react-collection": "1.1.7", 2479 2479 + "@radix-ui/react-compose-refs": "1.1.2", 2480 2480 + "@radix-ui/react-context": "1.1.2", 2481 2481 + "@radix-ui/react-direction": "1.1.1", 2482 2482 + "@radix-ui/react-dismissable-layer": "1.1.11", 2483 2483 + "@radix-ui/react-focus-guards": "1.1.3", 2484 2484 + "@radix-ui/react-focus-scope": "1.1.7", 2485 2485 + "@radix-ui/react-id": "1.1.1", 2486 2486 + "@radix-ui/react-popper": "1.2.8", 2487 2487 + "@radix-ui/react-portal": "1.1.9", 2488 2488 + "@radix-ui/react-presence": "1.1.5", 2489 2489 + "@radix-ui/react-primitive": "2.1.3", 2490 2490 + "@radix-ui/react-roving-focus": "1.1.11", 2491 2491 + "@radix-ui/react-slot": "1.2.3", 2492 2492 + "@radix-ui/react-use-callback-ref": "1.1.1", 2493 2493 + "aria-hidden": "^1.2.4", 2494 2494 + "react-remove-scroll": "^2.6.3" 2495 2495 + }, 2496 2496 + "peerDependencies": { 2497 2497 + "@types/react": "*", 2498 2498 + "@types/react-dom": "*", 2499 2499 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2500 2500 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2501 2501 + }, 2502 2502 + "peerDependenciesMeta": { 2503 2503 + "@types/react": { 2504 2504 + "optional": true 2505 2505 + }, 2506 2506 + "@types/react-dom": { 2507 2507 + "optional": true 2508 2508 + } 2509 2509 + } 2510 2510 + }, 2511 2511 + "node_modules/@radix-ui/react-menubar": { 2512 2512 + "version": "1.1.16", 2513 2513 + "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz", 2514 2514 + "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==", 2515 2515 + "dependencies": { 2516 2516 + "@radix-ui/primitive": "1.1.3", 2517 2517 + "@radix-ui/react-collection": "1.1.7", 2518 2518 + "@radix-ui/react-compose-refs": "1.1.2", 2519 2519 + "@radix-ui/react-context": "1.1.2", 2520 2520 + "@radix-ui/react-direction": "1.1.1", 2521 2521 + "@radix-ui/react-id": "1.1.1", 2522 2522 + "@radix-ui/react-menu": "2.1.16", 2523 2523 + "@radix-ui/react-primitive": "2.1.3", 2524 2524 + "@radix-ui/react-roving-focus": "1.1.11", 2525 2525 + "@radix-ui/react-use-controllable-state": "1.2.2" 2526 2526 + }, 2527 2527 + "peerDependencies": { 2528 2528 + "@types/react": "*", 2529 2529 + "@types/react-dom": "*", 2530 2530 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2531 2531 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2532 2532 + }, 2533 2533 + "peerDependenciesMeta": { 2534 2534 + "@types/react": { 2535 2535 + "optional": true 2536 2536 + }, 2537 2537 + "@types/react-dom": { 2538 2538 + "optional": true 2539 2539 + } 2540 2540 + } 2541 2541 + }, 2542 2542 + "node_modules/@radix-ui/react-navigation-menu": { 2543 2543 + "version": "1.2.14", 2544 2544 + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz", 2545 2545 + "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==", 2546 2546 + "dependencies": { 2547 2547 + "@radix-ui/primitive": "1.1.3", 2548 2548 + "@radix-ui/react-collection": "1.1.7", 2549 2549 + "@radix-ui/react-compose-refs": "1.1.2", 2550 2550 + "@radix-ui/react-context": "1.1.2", 2551 2551 + "@radix-ui/react-direction": "1.1.1", 2552 2552 + "@radix-ui/react-dismissable-layer": "1.1.11", 2553 2553 + "@radix-ui/react-id": "1.1.1", 2554 2554 + "@radix-ui/react-presence": "1.1.5", 2555 2555 + "@radix-ui/react-primitive": "2.1.3", 2556 2556 + "@radix-ui/react-use-callback-ref": "1.1.1", 2557 2557 + "@radix-ui/react-use-controllable-state": "1.2.2", 2558 2558 + "@radix-ui/react-use-layout-effect": "1.1.1", 2559 2559 + "@radix-ui/react-use-previous": "1.1.1", 2560 2560 + "@radix-ui/react-visually-hidden": "1.2.3" 2561 2561 + }, 2562 2562 + "peerDependencies": { 2563 2563 + "@types/react": "*", 2564 2564 + "@types/react-dom": "*", 2565 2565 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2566 2566 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2567 2567 + }, 2568 2568 + "peerDependenciesMeta": { 2569 2569 + "@types/react": { 2570 2570 + "optional": true 2571 2571 + }, 2572 2572 + "@types/react-dom": { 2573 2573 + "optional": true 2574 2574 + } 2575 2575 + } 2576 2576 + }, 2577 2577 + "node_modules/@radix-ui/react-one-time-password-field": { 2578 2578 + "version": "0.1.8", 2579 2579 + "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz", 2580 2580 + "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==", 2581 2581 + "dependencies": { 2582 2582 + "@radix-ui/number": "1.1.1", 2583 2583 + "@radix-ui/primitive": "1.1.3", 2584 2584 + "@radix-ui/react-collection": "1.1.7", 2585 2585 + "@radix-ui/react-compose-refs": "1.1.2", 2586 2586 + "@radix-ui/react-context": "1.1.2", 2587 2587 + "@radix-ui/react-direction": "1.1.1", 2588 2588 + "@radix-ui/react-primitive": "2.1.3", 2589 2589 + "@radix-ui/react-roving-focus": "1.1.11", 2590 2590 + "@radix-ui/react-use-controllable-state": "1.2.2", 2591 2591 + "@radix-ui/react-use-effect-event": "0.0.2", 2592 2592 + "@radix-ui/react-use-is-hydrated": "0.1.0", 2593 2593 + "@radix-ui/react-use-layout-effect": "1.1.1" 2594 2594 + }, 2595 2595 + "peerDependencies": { 2596 2596 + "@types/react": "*", 2597 2597 + "@types/react-dom": "*", 2598 2598 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2599 2599 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2600 2600 + }, 2601 2601 + "peerDependenciesMeta": { 2602 2602 + "@types/react": { 2603 2603 + "optional": true 2604 2604 + }, 2605 2605 + "@types/react-dom": { 2606 2606 + "optional": true 2607 2607 + } 2608 2608 + } 2609 2609 + }, 2610 2610 + "node_modules/@radix-ui/react-password-toggle-field": { 2611 2611 + "version": "0.1.3", 2612 2612 + "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz", 2613 2613 + "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==", 2614 2614 + "dependencies": { 2615 2615 + "@radix-ui/primitive": "1.1.3", 2616 2616 + "@radix-ui/react-compose-refs": "1.1.2", 2617 2617 + "@radix-ui/react-context": "1.1.2", 2618 2618 + "@radix-ui/react-id": "1.1.1", 2619 2619 + "@radix-ui/react-primitive": "2.1.3", 2620 2620 + "@radix-ui/react-use-controllable-state": "1.2.2", 2621 2621 + "@radix-ui/react-use-effect-event": "0.0.2", 2622 2622 + "@radix-ui/react-use-is-hydrated": "0.1.0" 2623 2623 + }, 2624 2624 + "peerDependencies": { 2625 2625 + "@types/react": "*", 2626 2626 + "@types/react-dom": "*", 2627 2627 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2628 2628 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2629 2629 + }, 2630 2630 + "peerDependenciesMeta": { 2631 2631 + "@types/react": { 2632 2632 + "optional": true 2633 2633 + }, 2634 2634 + "@types/react-dom": { 2635 2635 + "optional": true 2636 2636 + } 2637 2637 + } 2638 2638 + }, 2639 2639 + "node_modules/@radix-ui/react-popover": { 2640 2640 + "version": "1.1.15", 2641 2641 + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz", 2642 2642 + "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==", 2643 2643 + "dependencies": { 2644 2644 + "@radix-ui/primitive": "1.1.3", 2645 2645 + "@radix-ui/react-compose-refs": "1.1.2", 2646 2646 + "@radix-ui/react-context": "1.1.2", 2647 2647 + "@radix-ui/react-dismissable-layer": "1.1.11", 2648 2648 + "@radix-ui/react-focus-guards": "1.1.3", 2649 2649 + "@radix-ui/react-focus-scope": "1.1.7", 2650 2650 + "@radix-ui/react-id": "1.1.1", 2651 2651 + "@radix-ui/react-popper": "1.2.8", 2652 2652 + "@radix-ui/react-portal": "1.1.9", 2653 2653 + "@radix-ui/react-presence": "1.1.5", 2654 2654 + "@radix-ui/react-primitive": "2.1.3", 2655 2655 + "@radix-ui/react-slot": "1.2.3", 2656 2656 + "@radix-ui/react-use-controllable-state": "1.2.2", 2657 2657 + "aria-hidden": "^1.2.4", 2658 2658 + "react-remove-scroll": "^2.6.3" 2659 2659 + }, 2660 2660 + "peerDependencies": { 2661 2661 + "@types/react": "*", 2662 2662 + "@types/react-dom": "*", 2663 2663 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2664 2664 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2665 2665 + }, 2666 2666 + "peerDependenciesMeta": { 2667 2667 + "@types/react": { 2668 2668 + "optional": true 2669 2669 + }, 2670 2670 + "@types/react-dom": { 2671 2671 + "optional": true 2672 2672 + } 2673 2673 + } 2674 2674 + }, 2675 2675 + "node_modules/@radix-ui/react-popper": { 2676 2676 + "version": "1.2.8", 2677 2677 + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz", 2678 2678 + "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==", 2679 2679 + "dependencies": { 2680 2680 + "@floating-ui/react-dom": "^2.0.0", 2681 2681 + "@radix-ui/react-arrow": "1.1.7", 2682 2682 + "@radix-ui/react-compose-refs": "1.1.2", 2683 2683 + "@radix-ui/react-context": "1.1.2", 2684 2684 + "@radix-ui/react-primitive": "2.1.3", 2685 2685 + "@radix-ui/react-use-callback-ref": "1.1.1", 2686 2686 + "@radix-ui/react-use-layout-effect": "1.1.1", 2687 2687 + "@radix-ui/react-use-rect": "1.1.1", 2688 2688 + "@radix-ui/react-use-size": "1.1.1", 2689 2689 + "@radix-ui/rect": "1.1.1" 2690 2690 + }, 2691 2691 + "peerDependencies": { 2692 2692 + "@types/react": "*", 2693 2693 + "@types/react-dom": "*", 2694 2694 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2695 2695 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2696 2696 + }, 2697 2697 + "peerDependenciesMeta": { 2698 2698 + "@types/react": { 2699 2699 + "optional": true 2700 2700 + }, 2701 2701 + "@types/react-dom": { 2702 2702 + "optional": true 2703 2703 + } 2704 2704 + } 2705 2705 + }, 2706 2706 + "node_modules/@radix-ui/react-portal": { 2707 2707 + "version": "1.1.9", 2708 2708 + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz", 2709 2709 + "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==", 2710 2710 + "dependencies": { 2711 2711 + "@radix-ui/react-primitive": "2.1.3", 2712 2712 + "@radix-ui/react-use-layout-effect": "1.1.1" 2713 2713 + }, 2714 2714 + "peerDependencies": { 2715 2715 + "@types/react": "*", 2716 2716 + "@types/react-dom": "*", 2717 2717 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2718 2718 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2719 2719 + }, 2720 2720 + "peerDependenciesMeta": { 2721 2721 + "@types/react": { 2722 2722 + "optional": true 2723 2723 + }, 2724 2724 + "@types/react-dom": { 2725 2725 + "optional": true 2726 2726 + } 2727 2727 + } 2728 2728 + }, 2729 2729 + "node_modules/@radix-ui/react-presence": { 2730 2730 + "version": "1.1.5", 2731 2731 + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", 2732 2732 + "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==", 2733 2733 + "dependencies": { 2734 2734 + "@radix-ui/react-compose-refs": "1.1.2", 2735 2735 + "@radix-ui/react-use-layout-effect": "1.1.1" 2736 2736 + }, 2737 2737 + "peerDependencies": { 2738 2738 + "@types/react": "*", 2739 2739 + "@types/react-dom": "*", 2740 2740 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2741 2741 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2742 2742 + }, 2743 2743 + "peerDependenciesMeta": { 2744 2744 + "@types/react": { 2745 2745 + "optional": true 2746 2746 + }, 2747 2747 + "@types/react-dom": { 2748 2748 + "optional": true 2749 2749 + } 2750 2750 + } 2751 2751 + }, 2752 2752 + "node_modules/@radix-ui/react-primitive": { 2753 2753 + "version": "2.1.3", 2754 2754 + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", 2755 2755 + "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", 2756 2756 + "dependencies": { 2757 2757 + "@radix-ui/react-slot": "1.2.3" 2758 2758 + }, 2759 2759 + "peerDependencies": { 2760 2760 + "@types/react": "*", 2761 2761 + "@types/react-dom": "*", 2762 2762 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2763 2763 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2764 2764 + }, 2765 2765 + "peerDependenciesMeta": { 2766 2766 + "@types/react": { 2767 2767 + "optional": true 2768 2768 + }, 2769 2769 + "@types/react-dom": { 2770 2770 + "optional": true 2771 2771 + } 2772 2772 + } 2773 2773 + }, 2774 2774 + "node_modules/@radix-ui/react-progress": { 2775 2775 + "version": "1.1.7", 2776 2776 + "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz", 2777 2777 + "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==", 2778 2778 + "dependencies": { 2779 2779 + "@radix-ui/react-context": "1.1.2", 2780 2780 + "@radix-ui/react-primitive": "2.1.3" 2781 2781 + }, 2782 2782 + "peerDependencies": { 2783 2783 + "@types/react": "*", 2784 2784 + "@types/react-dom": "*", 2785 2785 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2786 2786 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2787 2787 + }, 2788 2788 + "peerDependenciesMeta": { 2789 2789 + "@types/react": { 2790 2790 + "optional": true 2791 2791 + }, 2792 2792 + "@types/react-dom": { 2793 2793 + "optional": true 2794 2794 + } 2795 2795 + } 2796 2796 + }, 2797 2797 + "node_modules/@radix-ui/react-radio-group": { 2798 2798 + "version": "1.3.8", 2799 2799 + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz", 2800 2800 + "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==", 2801 2801 + "dependencies": { 2802 2802 + "@radix-ui/primitive": "1.1.3", 2803 2803 + "@radix-ui/react-compose-refs": "1.1.2", 2804 2804 + "@radix-ui/react-context": "1.1.2", 2805 2805 + "@radix-ui/react-direction": "1.1.1", 2806 2806 + "@radix-ui/react-presence": "1.1.5", 2807 2807 + "@radix-ui/react-primitive": "2.1.3", 2808 2808 + "@radix-ui/react-roving-focus": "1.1.11", 2809 2809 + "@radix-ui/react-use-controllable-state": "1.2.2", 2810 2810 + "@radix-ui/react-use-previous": "1.1.1", 2811 2811 + "@radix-ui/react-use-size": "1.1.1" 2812 2812 + }, 2813 2813 + "peerDependencies": { 2814 2814 + "@types/react": "*", 2815 2815 + "@types/react-dom": "*", 2816 2816 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2817 2817 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2818 2818 + }, 2819 2819 + "peerDependenciesMeta": { 2820 2820 + "@types/react": { 2821 2821 + "optional": true 2822 2822 + }, 2823 2823 + "@types/react-dom": { 2824 2824 + "optional": true 2825 2825 + } 2826 2826 + } 2827 2827 + }, 2828 2828 + "node_modules/@radix-ui/react-roving-focus": { 2829 2829 + "version": "1.1.11", 2830 2830 + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz", 2831 2831 + "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==", 2832 2832 + "dependencies": { 2833 2833 + "@radix-ui/primitive": "1.1.3", 2834 2834 + "@radix-ui/react-collection": "1.1.7", 2835 2835 + "@radix-ui/react-compose-refs": "1.1.2", 2836 2836 + "@radix-ui/react-context": "1.1.2", 2837 2837 + "@radix-ui/react-direction": "1.1.1", 2838 2838 + "@radix-ui/react-id": "1.1.1", 2839 2839 + "@radix-ui/react-primitive": "2.1.3", 2840 2840 + "@radix-ui/react-use-callback-ref": "1.1.1", 2841 2841 + "@radix-ui/react-use-controllable-state": "1.2.2" 2842 2842 + }, 2843 2843 + "peerDependencies": { 2844 2844 + "@types/react": "*", 2845 2845 + "@types/react-dom": "*", 2846 2846 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2847 2847 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2848 2848 + }, 2849 2849 + "peerDependenciesMeta": { 2850 2850 + "@types/react": { 2851 2851 + "optional": true 2852 2852 + }, 2853 2853 + "@types/react-dom": { 2854 2854 + "optional": true 2855 2855 + } 2856 2856 + } 2857 2857 + }, 2858 2858 + "node_modules/@radix-ui/react-scroll-area": { 2859 2859 + "version": "1.2.10", 2860 2860 + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz", 2861 2861 + "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==", 2862 2862 + "dependencies": { 2863 2863 + "@radix-ui/number": "1.1.1", 2864 2864 + "@radix-ui/primitive": "1.1.3", 2865 2865 + "@radix-ui/react-compose-refs": "1.1.2", 2866 2866 + "@radix-ui/react-context": "1.1.2", 2867 2867 + "@radix-ui/react-direction": "1.1.1", 2868 2868 + "@radix-ui/react-presence": "1.1.5", 2869 2869 + "@radix-ui/react-primitive": "2.1.3", 2870 2870 + "@radix-ui/react-use-callback-ref": "1.1.1", 2871 2871 + "@radix-ui/react-use-layout-effect": "1.1.1" 2872 2872 + }, 2873 2873 + "peerDependencies": { 2874 2874 + "@types/react": "*", 2875 2875 + "@types/react-dom": "*", 2876 2876 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2877 2877 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2878 2878 + }, 2879 2879 + "peerDependenciesMeta": { 2880 2880 + "@types/react": { 2881 2881 + "optional": true 2882 2882 + }, 2883 2883 + "@types/react-dom": { 2884 2884 + "optional": true 2885 2885 + } 2886 2886 + } 2887 2887 + }, 2888 2888 + "node_modules/@radix-ui/react-select": { 2889 2889 + "version": "2.2.6", 2890 2890 + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", 2891 2891 + "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==", 2892 2892 + "dependencies": { 2893 2893 + "@radix-ui/number": "1.1.1", 2894 2894 + "@radix-ui/primitive": "1.1.3", 2895 2895 + "@radix-ui/react-collection": "1.1.7", 2896 2896 + "@radix-ui/react-compose-refs": "1.1.2", 2897 2897 + "@radix-ui/react-context": "1.1.2", 2898 2898 + "@radix-ui/react-direction": "1.1.1", 2899 2899 + "@radix-ui/react-dismissable-layer": "1.1.11", 2900 2900 + "@radix-ui/react-focus-guards": "1.1.3", 2901 2901 + "@radix-ui/react-focus-scope": "1.1.7", 2902 2902 + "@radix-ui/react-id": "1.1.1", 2903 2903 + "@radix-ui/react-popper": "1.2.8", 2904 2904 + "@radix-ui/react-portal": "1.1.9", 2905 2905 + "@radix-ui/react-primitive": "2.1.3", 2906 2906 + "@radix-ui/react-slot": "1.2.3", 2907 2907 + "@radix-ui/react-use-callback-ref": "1.1.1", 2908 2908 + "@radix-ui/react-use-controllable-state": "1.2.2", 2909 2909 + "@radix-ui/react-use-layout-effect": "1.1.1", 2910 2910 + "@radix-ui/react-use-previous": "1.1.1", 2911 2911 + "@radix-ui/react-visually-hidden": "1.2.3", 2912 2912 + "aria-hidden": "^1.2.4", 2913 2913 + "react-remove-scroll": "^2.6.3" 2914 2914 + }, 2915 2915 + "peerDependencies": { 2916 2916 + "@types/react": "*", 2917 2917 + "@types/react-dom": "*", 2918 2918 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2919 2919 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2920 2920 + }, 2921 2921 + "peerDependenciesMeta": { 2922 2922 + "@types/react": { 2923 2923 + "optional": true 2924 2924 + }, 2925 2925 + "@types/react-dom": { 2926 2926 + "optional": true 2927 2927 + } 2928 2928 + } 2929 2929 + }, 2930 2930 + "node_modules/@radix-ui/react-separator": { 2931 2931 + "version": "1.1.7", 2932 2932 + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz", 2933 2933 + "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==", 2934 2934 + "dependencies": { 2935 2935 + "@radix-ui/react-primitive": "2.1.3" 2936 2936 + }, 2937 2937 + "peerDependencies": { 2938 2938 + "@types/react": "*", 2939 2939 + "@types/react-dom": "*", 2940 2940 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2941 2941 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2942 2942 + }, 2943 2943 + "peerDependenciesMeta": { 2944 2944 + "@types/react": { 2945 2945 + "optional": true 2946 2946 + }, 2947 2947 + "@types/react-dom": { 2948 2948 + "optional": true 2949 2949 + } 2950 2950 + } 2951 2951 + }, 2952 2952 + "node_modules/@radix-ui/react-slider": { 2953 2953 + "version": "1.3.6", 2954 2954 + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz", 2955 2955 + "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==", 2956 2956 + "dependencies": { 2957 2957 + "@radix-ui/number": "1.1.1", 2958 2958 + "@radix-ui/primitive": "1.1.3", 2959 2959 + "@radix-ui/react-collection": "1.1.7", 2960 2960 + "@radix-ui/react-compose-refs": "1.1.2", 2961 2961 + "@radix-ui/react-context": "1.1.2", 2962 2962 + "@radix-ui/react-direction": "1.1.1", 2963 2963 + "@radix-ui/react-primitive": "2.1.3", 2964 2964 + "@radix-ui/react-use-controllable-state": "1.2.2", 2965 2965 + "@radix-ui/react-use-layout-effect": "1.1.1", 2966 2966 + "@radix-ui/react-use-previous": "1.1.1", 2967 2967 + "@radix-ui/react-use-size": "1.1.1" 2968 2968 + }, 2969 2969 + "peerDependencies": { 2970 2970 + "@types/react": "*", 2971 2971 + "@types/react-dom": "*", 2972 2972 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2973 2973 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2974 2974 + }, 2975 2975 + "peerDependenciesMeta": { 2976 2976 + "@types/react": { 2977 2977 + "optional": true 2978 2978 + }, 2979 2979 + "@types/react-dom": { 2980 2980 + "optional": true 2981 2981 + } 2982 2982 + } 2983 2983 + }, 2984 2984 + "node_modules/@radix-ui/react-slot": { 2985 2985 + "version": "1.2.3", 2986 2986 + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", 2987 2987 + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", 2988 2988 + "dependencies": { 2989 2989 + "@radix-ui/react-compose-refs": "1.1.2" 2990 2990 + }, 2991 2991 + "peerDependencies": { 2992 2992 + "@types/react": "*", 2993 2993 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2994 2994 + }, 2995 2995 + "peerDependenciesMeta": { 2996 2996 + "@types/react": { 2997 2997 + "optional": true 2998 2998 + } 2999 2999 + } 3000 3000 + }, 3001 3001 + "node_modules/@radix-ui/react-switch": { 3002 3002 + "version": "1.2.6", 3003 3003 + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz", 3004 3004 + "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==", 3005 3005 + "dependencies": { 3006 3006 + "@radix-ui/primitive": "1.1.3", 3007 3007 + "@radix-ui/react-compose-refs": "1.1.2", 3008 3008 + "@radix-ui/react-context": "1.1.2", 3009 3009 + "@radix-ui/react-primitive": "2.1.3", 3010 3010 + "@radix-ui/react-use-controllable-state": "1.2.2", 3011 3011 + "@radix-ui/react-use-previous": "1.1.1", 3012 3012 + "@radix-ui/react-use-size": "1.1.1" 3013 3013 + }, 3014 3014 + "peerDependencies": { 3015 3015 + "@types/react": "*", 3016 3016 + "@types/react-dom": "*", 3017 3017 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3018 3018 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3019 3019 + }, 3020 3020 + "peerDependenciesMeta": { 3021 3021 + "@types/react": { 3022 3022 + "optional": true 3023 3023 + }, 3024 3024 + "@types/react-dom": { 3025 3025 + "optional": true 3026 3026 + } 3027 3027 + } 3028 3028 + }, 3029 3029 + "node_modules/@radix-ui/react-tabs": { 3030 3030 + "version": "1.1.13", 3031 3031 + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", 3032 3032 + "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==", 3033 3033 + "dependencies": { 3034 3034 + "@radix-ui/primitive": "1.1.3", 3035 3035 + "@radix-ui/react-context": "1.1.2", 3036 3036 + "@radix-ui/react-direction": "1.1.1", 3037 3037 + "@radix-ui/react-id": "1.1.1", 3038 3038 + "@radix-ui/react-presence": "1.1.5", 3039 3039 + "@radix-ui/react-primitive": "2.1.3", 3040 3040 + "@radix-ui/react-roving-focus": "1.1.11", 3041 3041 + "@radix-ui/react-use-controllable-state": "1.2.2" 3042 3042 + }, 3043 3043 + "peerDependencies": { 3044 3044 + "@types/react": "*", 3045 3045 + "@types/react-dom": "*", 3046 3046 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3047 3047 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3048 3048 + }, 3049 3049 + "peerDependenciesMeta": { 3050 3050 + "@types/react": { 3051 3051 + "optional": true 3052 3052 + }, 3053 3053 + "@types/react-dom": { 3054 3054 + "optional": true 3055 3055 + } 3056 3056 + } 3057 3057 + }, 3058 3058 + "node_modules/@radix-ui/react-toast": { 3059 3059 + "version": "1.2.15", 3060 3060 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz", 3061 3061 + "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==", 3062 3062 + "dependencies": { 3063 3063 + "@radix-ui/primitive": "1.1.3", 3064 3064 + "@radix-ui/react-collection": "1.1.7", 3065 3065 + "@radix-ui/react-compose-refs": "1.1.2", 3066 3066 + "@radix-ui/react-context": "1.1.2", 3067 3067 + "@radix-ui/react-dismissable-layer": "1.1.11", 3068 3068 + "@radix-ui/react-portal": "1.1.9", 3069 3069 + "@radix-ui/react-presence": "1.1.5", 3070 3070 + "@radix-ui/react-primitive": "2.1.3", 3071 3071 + "@radix-ui/react-use-callback-ref": "1.1.1", 3072 3072 + "@radix-ui/react-use-controllable-state": "1.2.2", 3073 3073 + "@radix-ui/react-use-layout-effect": "1.1.1", 3074 3074 + "@radix-ui/react-visually-hidden": "1.2.3" 3075 3075 + }, 3076 3076 + "peerDependencies": { 3077 3077 + "@types/react": "*", 3078 3078 + "@types/react-dom": "*", 3079 3079 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3080 3080 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3081 3081 + }, 3082 3082 + "peerDependenciesMeta": { 3083 3083 + "@types/react": { 3084 3084 + "optional": true 3085 3085 + }, 3086 3086 + "@types/react-dom": { 3087 3087 + "optional": true 3088 3088 + } 3089 3089 + } 3090 3090 + }, 3091 3091 + "node_modules/@radix-ui/react-toggle": { 3092 3092 + "version": "1.1.10", 3093 3093 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz", 3094 3094 + "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==", 3095 3095 + "dependencies": { 3096 3096 + "@radix-ui/primitive": "1.1.3", 3097 3097 + "@radix-ui/react-primitive": "2.1.3", 3098 3098 + "@radix-ui/react-use-controllable-state": "1.2.2" 3099 3099 + }, 3100 3100 + "peerDependencies": { 3101 3101 + "@types/react": "*", 3102 3102 + "@types/react-dom": "*", 3103 3103 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3104 3104 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3105 3105 + }, 3106 3106 + "peerDependenciesMeta": { 3107 3107 + "@types/react": { 3108 3108 + "optional": true 3109 3109 + }, 3110 3110 + "@types/react-dom": { 3111 3111 + "optional": true 3112 3112 + } 3113 3113 + } 3114 3114 + }, 3115 3115 + "node_modules/@radix-ui/react-toggle-group": { 3116 3116 + "version": "1.1.11", 3117 3117 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz", 3118 3118 + "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==", 3119 3119 + "dependencies": { 3120 3120 + "@radix-ui/primitive": "1.1.3", 3121 3121 + "@radix-ui/react-context": "1.1.2", 3122 3122 + "@radix-ui/react-direction": "1.1.1", 3123 3123 + "@radix-ui/react-primitive": "2.1.3", 3124 3124 + "@radix-ui/react-roving-focus": "1.1.11", 3125 3125 + "@radix-ui/react-toggle": "1.1.10", 3126 3126 + "@radix-ui/react-use-controllable-state": "1.2.2" 3127 3127 + }, 3128 3128 + "peerDependencies": { 3129 3129 + "@types/react": "*", 3130 3130 + "@types/react-dom": "*", 3131 3131 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3132 3132 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3133 3133 + }, 3134 3134 + "peerDependenciesMeta": { 3135 3135 + "@types/react": { 3136 3136 + "optional": true 3137 3137 + }, 3138 3138 + "@types/react-dom": { 3139 3139 + "optional": true 3140 3140 + } 3141 3141 + } 3142 3142 + }, 3143 3143 + "node_modules/@radix-ui/react-toolbar": { 3144 3144 + "version": "1.1.11", 3145 3145 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz", 3146 3146 + "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==", 3147 3147 + "dependencies": { 3148 3148 + "@radix-ui/primitive": "1.1.3", 3149 3149 + "@radix-ui/react-context": "1.1.2", 3150 3150 + "@radix-ui/react-direction": "1.1.1", 3151 3151 + "@radix-ui/react-primitive": "2.1.3", 3152 3152 + "@radix-ui/react-roving-focus": "1.1.11", 3153 3153 + "@radix-ui/react-separator": "1.1.7", 3154 3154 + "@radix-ui/react-toggle-group": "1.1.11" 3155 3155 + }, 3156 3156 + "peerDependencies": { 3157 3157 + "@types/react": "*", 3158 3158 + "@types/react-dom": "*", 3159 3159 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3160 3160 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3161 3161 + }, 3162 3162 + "peerDependenciesMeta": { 3163 3163 + "@types/react": { 3164 3164 + "optional": true 3165 3165 + }, 3166 3166 + "@types/react-dom": { 3167 3167 + "optional": true 3168 3168 + } 3169 3169 + } 3170 3170 + }, 3171 3171 + "node_modules/@radix-ui/react-tooltip": { 3172 3172 + "version": "1.2.8", 3173 3173 + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz", 3174 3174 + "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==", 3175 3175 + "dependencies": { 3176 3176 + "@radix-ui/primitive": "1.1.3", 3177 3177 + "@radix-ui/react-compose-refs": "1.1.2", 3178 3178 + "@radix-ui/react-context": "1.1.2", 3179 3179 + "@radix-ui/react-dismissable-layer": "1.1.11", 3180 3180 + "@radix-ui/react-id": "1.1.1", 3181 3181 + "@radix-ui/react-popper": "1.2.8", 3182 3182 + "@radix-ui/react-portal": "1.1.9", 3183 3183 + "@radix-ui/react-presence": "1.1.5", 3184 3184 + "@radix-ui/react-primitive": "2.1.3", 3185 3185 + "@radix-ui/react-slot": "1.2.3", 3186 3186 + "@radix-ui/react-use-controllable-state": "1.2.2", 3187 3187 + "@radix-ui/react-visually-hidden": "1.2.3" 3188 3188 + }, 3189 3189 + "peerDependencies": { 3190 3190 + "@types/react": "*", 3191 3191 + "@types/react-dom": "*", 3192 3192 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3193 3193 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3194 3194 + }, 3195 3195 + "peerDependenciesMeta": { 3196 3196 + "@types/react": { 3197 3197 + "optional": true 3198 3198 + }, 3199 3199 + "@types/react-dom": { 3200 3200 + "optional": true 3201 3201 + } 3202 3202 + } 3203 3203 + }, 3204 3204 + "node_modules/@radix-ui/react-use-callback-ref": { 3205 3205 + "version": "1.1.1", 3206 3206 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", 3207 3207 + "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==", 3208 3208 + "peerDependencies": { 3209 3209 + "@types/react": "*", 3210 3210 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3211 3211 + }, 3212 3212 + "peerDependenciesMeta": { 3213 3213 + "@types/react": { 3214 3214 + "optional": true 3215 3215 + } 3216 3216 + } 3217 3217 + }, 3218 3218 + "node_modules/@radix-ui/react-use-controllable-state": { 3219 3219 + "version": "1.2.2", 3220 3220 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz", 3221 3221 + "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==", 3222 3222 + "dependencies": { 3223 3223 + "@radix-ui/react-use-effect-event": "0.0.2", 3224 3224 + "@radix-ui/react-use-layout-effect": "1.1.1" 3225 3225 + }, 3226 3226 + "peerDependencies": { 3227 3227 + "@types/react": "*", 3228 3228 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3229 3229 + }, 3230 3230 + "peerDependenciesMeta": { 3231 3231 + "@types/react": { 3232 3232 + "optional": true 3233 3233 + } 3234 3234 + } 3235 3235 + }, 3236 3236 + "node_modules/@radix-ui/react-use-effect-event": { 3237 3237 + "version": "0.0.2", 3238 3238 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz", 3239 3239 + "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==", 3240 3240 + "dependencies": { 3241 3241 + "@radix-ui/react-use-layout-effect": "1.1.1" 3242 3242 + }, 3243 3243 + "peerDependencies": { 3244 3244 + "@types/react": "*", 3245 3245 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3246 3246 + }, 3247 3247 + "peerDependenciesMeta": { 3248 3248 + "@types/react": { 3249 3249 + "optional": true 3250 3250 + } 3251 3251 + } 3252 3252 + }, 3253 3253 + "node_modules/@radix-ui/react-use-escape-keydown": { 3254 3254 + "version": "1.1.1", 3255 3255 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz", 3256 3256 + "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==", 3257 3257 + "dependencies": { 3258 3258 + "@radix-ui/react-use-callback-ref": "1.1.1" 3259 3259 + }, 3260 3260 + "peerDependencies": { 3261 3261 + "@types/react": "*", 3262 3262 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3263 3263 + }, 3264 3264 + "peerDependenciesMeta": { 3265 3265 + "@types/react": { 3266 3266 + "optional": true 3267 3267 + } 3268 3268 + } 3269 3269 + }, 3270 3270 + "node_modules/@radix-ui/react-use-is-hydrated": { 3271 3271 + "version": "0.1.0", 3272 3272 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz", 3273 3273 + "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==", 3274 3274 + "dependencies": { 3275 3275 + "use-sync-external-store": "^1.5.0" 3276 3276 + }, 3277 3277 + "peerDependencies": { 3278 3278 + "@types/react": "*", 3279 3279 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3280 3280 + }, 3281 3281 + "peerDependenciesMeta": { 3282 3282 + "@types/react": { 3283 3283 + "optional": true 3284 3284 + } 3285 3285 + } 3286 3286 + }, 3287 3287 + "node_modules/@radix-ui/react-use-layout-effect": { 3288 3288 + "version": "1.1.1", 3289 3289 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz", 3290 3290 + "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==", 3291 3291 + "peerDependencies": { 3292 3292 + "@types/react": "*", 3293 3293 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3294 3294 + }, 3295 3295 + "peerDependenciesMeta": { 3296 3296 + "@types/react": { 3297 3297 + "optional": true 3298 3298 + } 3299 3299 + } 3300 3300 + }, 3301 3301 + "node_modules/@radix-ui/react-use-previous": { 3302 3302 + "version": "1.1.1", 3303 3303 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz", 3304 3304 + "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==", 3305 3305 + "peerDependencies": { 3306 3306 + "@types/react": "*", 3307 3307 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3308 3308 + }, 3309 3309 + "peerDependenciesMeta": { 3310 3310 + "@types/react": { 3311 3311 + "optional": true 3312 3312 + } 3313 3313 + } 3314 3314 + }, 3315 3315 + "node_modules/@radix-ui/react-use-rect": { 3316 3316 + "version": "1.1.1", 3317 3317 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz", 3318 3318 + "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==", 3319 3319 + "dependencies": { 3320 3320 + "@radix-ui/rect": "1.1.1" 3321 3321 + }, 3322 3322 + "peerDependencies": { 3323 3323 + "@types/react": "*", 3324 3324 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3325 3325 + }, 3326 3326 + "peerDependenciesMeta": { 3327 3327 + "@types/react": { 3328 3328 + "optional": true 3329 3329 + } 3330 3330 + } 3331 3331 + }, 3332 3332 + "node_modules/@radix-ui/react-use-size": { 3333 3333 + "version": "1.1.1", 3334 3334 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz", 3335 3335 + "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==", 3336 3336 + "dependencies": { 3337 3337 + "@radix-ui/react-use-layout-effect": "1.1.1" 3338 3338 + }, 3339 3339 + "peerDependencies": { 3340 3340 + "@types/react": "*", 3341 3341 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3342 3342 + }, 3343 3343 + "peerDependenciesMeta": { 3344 3344 + "@types/react": { 3345 3345 + "optional": true 3346 3346 + } 3347 3347 + } 3348 3348 + }, 3349 3349 + "node_modules/@radix-ui/react-visually-hidden": { 3350 3350 + "version": "1.2.3", 3351 3351 + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz", 3352 3352 + "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==", 3353 3353 + "dependencies": { 3354 3354 + "@radix-ui/react-primitive": "2.1.3" 3355 3355 + }, 3356 3356 + "peerDependencies": { 3357 3357 + "@types/react": "*", 3358 3358 + "@types/react-dom": "*", 3359 3359 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3360 3360 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3361 3361 + }, 3362 3362 + "peerDependenciesMeta": { 3363 3363 + "@types/react": { 3364 3364 + "optional": true 3365 3365 + }, 3366 3366 + "@types/react-dom": { 3367 3367 + "optional": true 3368 3368 + } 3369 3369 + } 3370 3370 + }, 3371 3371 + "node_modules/@radix-ui/rect": { 3372 3372 + "version": "1.1.1", 3373 3373 + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz", 3374 3374 + "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==" 3375 3375 + }, 1774 3376 "node_modules/@rolldown/pluginutils": { 1775 3377 "version": "1.0.0-beta.27", 1776 3378 "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", ··· 2085 3687 "solid-js": "^1.6.12" 2086 3688 } 2087 3689 }, 3690 3690 + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { 3691 3691 + "version": "8.0.0", 3692 3692 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", 3693 3693 + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", 3694 3694 + "dev": true, 3695 3695 + "license": "MIT", 3696 3696 + "engines": { 3697 3697 + "node": ">=14" 3698 3698 + }, 3699 3699 + "funding": { 3700 3700 + "type": "github", 3701 3701 + "url": "https://github.com/sponsors/gregberge" 3702 3702 + }, 3703 3703 + "peerDependencies": { 3704 3704 + "@babel/core": "^7.0.0-0" 3705 3705 + } 3706 3706 + }, 3707 3707 + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { 3708 3708 + "version": "8.0.0", 3709 3709 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", 3710 3710 + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", 3711 3711 + "dev": true, 3712 3712 + "license": "MIT", 3713 3713 + "engines": { 3714 3714 + "node": ">=14" 3715 3715 + }, 3716 3716 + "funding": { 3717 3717 + "type": "github", 3718 3718 + "url": "https://github.com/sponsors/gregberge" 3719 3719 + }, 3720 3720 + "peerDependencies": { 3721 3721 + "@babel/core": "^7.0.0-0" 3722 3722 + } 3723 3723 + }, 3724 3724 + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { 3725 3725 + "version": "8.0.0", 3726 3726 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", 3727 3727 + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", 3728 3728 + "dev": true, 3729 3729 + "license": "MIT", 3730 3730 + "engines": { 3731 3731 + "node": ">=14" 3732 3732 + }, 3733 3733 + "funding": { 3734 3734 + "type": "github", 3735 3735 + "url": "https://github.com/sponsors/gregberge" 3736 3736 + }, 3737 3737 + "peerDependencies": { 3738 3738 + "@babel/core": "^7.0.0-0" 3739 3739 + } 3740 3740 + }, 3741 3741 + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { 3742 3742 + "version": "8.0.0", 3743 3743 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", 3744 3744 + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", 3745 3745 + "dev": true, 3746 3746 + "license": "MIT", 3747 3747 + "engines": { 3748 3748 + "node": ">=14" 3749 3749 + }, 3750 3750 + "funding": { 3751 3751 + "type": "github", 3752 3752 + "url": "https://github.com/sponsors/gregberge" 3753 3753 + }, 3754 3754 + "peerDependencies": { 3755 3755 + "@babel/core": "^7.0.0-0" 3756 3756 + } 3757 3757 + }, 3758 3758 + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { 3759 3759 + "version": "8.0.0", 3760 3760 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", 3761 3761 + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", 3762 3762 + "dev": true, 3763 3763 + "license": "MIT", 3764 3764 + "engines": { 3765 3765 + "node": ">=14" 3766 3766 + }, 3767 3767 + "funding": { 3768 3768 + "type": "github", 3769 3769 + "url": "https://github.com/sponsors/gregberge" 3770 3770 + }, 3771 3771 + "peerDependencies": { 3772 3772 + "@babel/core": "^7.0.0-0" 3773 3773 + } 3774 3774 + }, 3775 3775 + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { 3776 3776 + "version": "8.0.0", 3777 3777 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", 3778 3778 + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", 3779 3779 + "dev": true, 3780 3780 + "license": "MIT", 3781 3781 + "engines": { 3782 3782 + "node": ">=14" 3783 3783 + }, 3784 3784 + "funding": { 3785 3785 + "type": "github", 3786 3786 + "url": "https://github.com/sponsors/gregberge" 3787 3787 + }, 3788 3788 + "peerDependencies": { 3789 3789 + "@babel/core": "^7.0.0-0" 3790 3790 + } 3791 3791 + }, 3792 3792 + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { 3793 3793 + "version": "8.1.0", 3794 3794 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", 3795 3795 + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", 3796 3796 + "dev": true, 3797 3797 + "license": "MIT", 3798 3798 + "engines": { 3799 3799 + "node": ">=14" 3800 3800 + }, 3801 3801 + "funding": { 3802 3802 + "type": "github", 3803 3803 + "url": "https://github.com/sponsors/gregberge" 3804 3804 + }, 3805 3805 + "peerDependencies": { 3806 3806 + "@babel/core": "^7.0.0-0" 3807 3807 + } 3808 3808 + }, 3809 3809 + "node_modules/@svgr/babel-plugin-transform-svg-component": { 3810 3810 + "version": "8.0.0", 3811 3811 + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", 3812 3812 + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", 3813 3813 + "dev": true, 3814 3814 + "license": "MIT", 3815 3815 + "engines": { 3816 3816 + "node": ">=12" 3817 3817 + }, 3818 3818 + "funding": { 3819 3819 + "type": "github", 3820 3820 + "url": "https://github.com/sponsors/gregberge" 3821 3821 + }, 3822 3822 + "peerDependencies": { 3823 3823 + "@babel/core": "^7.0.0-0" 3824 3824 + } 3825 3825 + }, 3826 3826 + "node_modules/@svgr/babel-preset": { 3827 3827 + "version": "8.1.0", 3828 3828 + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", 3829 3829 + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", 3830 3830 + "dev": true, 3831 3831 + "license": "MIT", 3832 3832 + "dependencies": { 3833 3833 + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", 3834 3834 + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", 3835 3835 + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", 3836 3836 + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", 3837 3837 + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", 3838 3838 + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", 3839 3839 + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", 3840 3840 + "@svgr/babel-plugin-transform-svg-component": "8.0.0" 3841 3841 + }, 3842 3842 + "engines": { 3843 3843 + "node": ">=14" 3844 3844 + }, 3845 3845 + "funding": { 3846 3846 + "type": "github", 3847 3847 + "url": "https://github.com/sponsors/gregberge" 3848 3848 + }, 3849 3849 + "peerDependencies": { 3850 3850 + "@babel/core": "^7.0.0-0" 3851 3851 + } 3852 3852 + }, 3853 3853 + "node_modules/@svgr/core": { 3854 3854 + "version": "8.1.0", 3855 3855 + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", 3856 3856 + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", 3857 3857 + "dev": true, 3858 3858 + "license": "MIT", 3859 3859 + "dependencies": { 3860 3860 + "@babel/core": "^7.21.3", 3861 3861 + "@svgr/babel-preset": "8.1.0", 3862 3862 + "camelcase": "^6.2.0", 3863 3863 + "cosmiconfig": "^8.1.3", 3864 3864 + "snake-case": "^3.0.4" 3865 3865 + }, 3866 3866 + "engines": { 3867 3867 + "node": ">=14" 3868 3868 + }, 3869 3869 + "funding": { 3870 3870 + "type": "github", 3871 3871 + "url": "https://github.com/sponsors/gregberge" 3872 3872 + } 3873 3873 + }, 3874 3874 + "node_modules/@svgr/hast-util-to-babel-ast": { 3875 3875 + "version": "8.0.0", 3876 3876 + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", 3877 3877 + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", 3878 3878 + "dev": true, 3879 3879 + "license": "MIT", 3880 3880 + "dependencies": { 3881 3881 + "@babel/types": "^7.21.3", 3882 3882 + "entities": "^4.4.0" 3883 3883 + }, 3884 3884 + "engines": { 3885 3885 + "node": ">=14" 3886 3886 + }, 3887 3887 + "funding": { 3888 3888 + "type": "github", 3889 3889 + "url": "https://github.com/sponsors/gregberge" 3890 3890 + } 3891 3891 + }, 3892 3892 + "node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": { 3893 3893 + "version": "4.5.0", 3894 3894 + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", 3895 3895 + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", 3896 3896 + "dev": true, 3897 3897 + "license": "BSD-2-Clause", 3898 3898 + "engines": { 3899 3899 + "node": ">=0.12" 3900 3900 + }, 3901 3901 + "funding": { 3902 3902 + "url": "https://github.com/fb55/entities?sponsor=1" 3903 3903 + } 3904 3904 + }, 3905 3905 + "node_modules/@svgr/plugin-jsx": { 3906 3906 + "version": "8.1.0", 3907 3907 + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", 3908 3908 + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", 3909 3909 + "dev": true, 3910 3910 + "license": "MIT", 3911 3911 + "dependencies": { 3912 3912 + "@babel/core": "^7.21.3", 3913 3913 + "@svgr/babel-preset": "8.1.0", 3914 3914 + "@svgr/hast-util-to-babel-ast": "8.0.0", 3915 3915 + "svg-parser": "^2.0.4" 3916 3916 + }, 3917 3917 + "engines": { 3918 3918 + "node": ">=14" 3919 3919 + }, 3920 3920 + "funding": { 3921 3921 + "type": "github", 3922 3922 + "url": "https://github.com/sponsors/gregberge" 3923 3923 + }, 3924 3924 + "peerDependencies": { 3925 3925 + "@svgr/core": "*" 3926 3926 + } 3927 3927 + }, 2088 3928 "node_modules/@svta/common-media-library": { 2089 3929 "version": "0.12.4", 2090 3930 "resolved": "https://registry.npmjs.org/@svta/common-media-library/-/common-media-library-0.12.4.tgz", ··· 2912 4752 "@types/react": "^19.0.0" 2913 4753 } 2914 4754 }, 4755 4755 + "node_modules/@types/trusted-types": { 4756 4756 + "version": "2.0.7", 4757 4757 + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", 4758 4758 + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", 4759 4759 + "license": "MIT", 4760 4760 + "optional": true 4761 4761 + }, 2915 4762 "node_modules/@typescript-eslint/eslint-plugin": { 2916 4763 "version": "8.46.1", 2917 4764 "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.1.tgz", ··· 3436 5283 "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", 3437 5284 "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", 3438 5285 "dev": true, 3439 3439 - "license": "Python-2.0", 3440 3440 - "peer": true 5286 5286 + "license": "Python-2.0" 5287 5287 + }, 5288 5288 + "node_modules/aria-hidden": { 5289 5289 + "version": "1.2.6", 5290 5290 + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz", 5291 5291 + "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==", 5292 5292 + "dependencies": { 5293 5293 + "tslib": "^2.0.0" 5294 5294 + }, 5295 5295 + "engines": { 5296 5296 + "node": ">=10" 5297 5297 + } 3441 5298 }, 3442 5299 "node_modules/aria-query": { 3443 5300 "version": "5.3.0", ··· 3849 5706 "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", 3850 5707 "dev": true, 3851 5708 "license": "MIT", 3852 3852 - "peer": true, 3853 5709 "engines": { 3854 5710 "node": ">=6" 3855 5711 } 3856 5712 }, 5713 5713 + "node_modules/camelcase": { 5714 5714 + "version": "6.3.0", 5715 5715 + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", 5716 5716 + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", 5717 5717 + "dev": true, 5718 5718 + "license": "MIT", 5719 5719 + "engines": { 5720 5720 + "node": ">=10" 5721 5721 + }, 5722 5722 + "funding": { 5723 5723 + "url": "https://github.com/sponsors/sindresorhus" 5724 5724 + } 5725 5725 + }, 3857 5726 "node_modules/caniuse-lite": { 3858 5727 "version": "1.0.30001737", 3859 5728 "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001737.tgz", ··· 4041 5910 "version": "0.0.1", 4042 5911 "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 4043 5912 "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", 5913 5913 + "dev": true, 5914 5914 + "license": "MIT" 5915 5915 + }, 5916 5916 + "node_modules/confbox": { 5917 5917 + "version": "0.2.2", 5918 5918 + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz", 5919 5919 + "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==", 4044 5920 "dev": true, 4045 5921 "license": "MIT" 4046 5922 }, ··· 4067 5943 "url": "https://opencollective.com/core-js" 4068 5944 } 4069 5945 }, 5946 5946 + "node_modules/cosmiconfig": { 5947 5947 + "version": "8.3.6", 5948 5948 + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", 5949 5949 + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", 5950 5950 + "dev": true, 5951 5951 + "license": "MIT", 5952 5952 + "dependencies": { 5953 5953 + "import-fresh": "^3.3.0", 5954 5954 + "js-yaml": "^4.1.0", 5955 5955 + "parse-json": "^5.2.0", 5956 5956 + "path-type": "^4.0.0" 5957 5957 + }, 5958 5958 + "engines": { 5959 5959 + "node": ">=14" 5960 5960 + }, 5961 5961 + "funding": { 5962 5962 + "url": "https://github.com/sponsors/d-fischer" 5963 5963 + }, 5964 5964 + "peerDependencies": { 5965 5965 + "typescript": ">=4.9.5" 5966 5966 + }, 5967 5967 + "peerDependenciesMeta": { 5968 5968 + "typescript": { 5969 5969 + "optional": true 5970 5970 + } 5971 5971 + } 5972 5972 + }, 4070 5973 "node_modules/cross-spawn": { 4071 5974 "version": "7.0.6", 4072 5975 "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", ··· 4206 6109 } 4207 6110 }, 4208 6111 "node_modules/debug": { 4209 4209 - "version": "4.4.1", 4210 4210 - "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", 4211 4211 - "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", 6112 6112 + "version": "4.4.3", 6113 6113 + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", 6114 6114 + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", 4212 6115 "license": "MIT", 4213 6116 "dependencies": { 4214 6117 "ms": "^2.1.3" ··· 4302 6205 "node": ">=8" 4303 6206 } 4304 6207 }, 6208 6208 + "node_modules/detect-node-es": { 6209 6209 + "version": "1.1.0", 6210 6210 + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", 6211 6211 + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" 6212 6212 + }, 4305 6213 "node_modules/diff": { 4306 6214 "version": "8.0.2", 4307 6215 "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz", ··· 4331 6239 "dev": true, 4332 6240 "license": "MIT" 4333 6241 }, 6242 6242 + "node_modules/dompurify": { 6243 6243 + "version": "3.3.0", 6244 6244 + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz", 6245 6245 + "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==", 6246 6246 + "license": "(MPL-2.0 OR Apache-2.0)", 6247 6247 + "optionalDependencies": { 6248 6248 + "@types/trusted-types": "^2.0.7" 6249 6249 + } 6250 6250 + }, 6251 6251 + "node_modules/dot-case": { 6252 6252 + "version": "3.0.4", 6253 6253 + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", 6254 6254 + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", 6255 6255 + "dev": true, 6256 6256 + "license": "MIT", 6257 6257 + "dependencies": { 6258 6258 + "no-case": "^3.0.4", 6259 6259 + "tslib": "^2.0.3" 6260 6260 + } 6261 6261 + }, 4334 6262 "node_modules/dunder-proto": { 4335 6263 "version": "1.0.1", 4336 6264 "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", ··· 4376 6304 }, 4377 6305 "funding": { 4378 6306 "url": "https://github.com/fb55/entities?sponsor=1" 6307 6307 + } 6308 6308 + }, 6309 6309 + "node_modules/error-ex": { 6310 6310 + "version": "1.3.4", 6311 6311 + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz", 6312 6312 + "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==", 6313 6313 + "dev": true, 6314 6314 + "license": "MIT", 6315 6315 + "dependencies": { 6316 6316 + "is-arrayish": "^0.2.1" 4379 6317 } 4380 6318 }, 4381 6319 "node_modules/es-abstract": { ··· 5055 6993 "node": ">=12.0.0" 5056 6994 } 5057 6995 }, 6996 6996 + "node_modules/exsolve": { 6997 6997 + "version": "1.0.7", 6998 6998 + "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz", 6999 6999 + "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==", 7000 7000 + "dev": true, 7001 7001 + "license": "MIT" 7002 7002 + }, 5058 7003 "node_modules/fast-deep-equal": { 5059 7004 "version": "3.1.3", 5060 7005 "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", ··· 5286 7231 "url": "https://github.com/sponsors/ljharb" 5287 7232 } 5288 7233 }, 7234 7234 + "node_modules/get-nonce": { 7235 7235 + "version": "1.0.1", 7236 7236 + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", 7237 7237 + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", 7238 7238 + "engines": { 7239 7239 + "node": ">=6" 7240 7240 + } 7241 7241 + }, 5289 7242 "node_modules/get-proto": { 5290 7243 "version": "1.0.1", 5291 7244 "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", ··· 5601 7554 "node": ">=0.4" 5602 7555 } 5603 7556 }, 7557 7557 + "node_modules/iconify-icon": { 7558 7558 + "version": "3.0.1", 7559 7559 + "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.1.tgz", 7560 7560 + "integrity": "sha512-M3/kH3C+e/ufhmQuOSYSb1Ri1ImJ+ZEQYcVRMKnlSc8Nrdoy+iY9YvFnplX8t/3aCRuo5wN4RVPtCSHGnbt8dg==", 7561 7561 + "dev": true, 7562 7562 + "license": "MIT", 7563 7563 + "dependencies": { 7564 7564 + "@iconify/types": "^2.0.0" 7565 7565 + }, 7566 7566 + "funding": { 7567 7567 + "url": "https://github.com/sponsors/cyberalien" 7568 7568 + } 7569 7569 + }, 5604 7570 "node_modules/iconv-lite": { 5605 7571 "version": "0.6.3", 5606 7572 "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", ··· 5643 7609 "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", 5644 7610 "dev": true, 5645 7611 "license": "MIT", 5646 5646 - "peer": true, 5647 7612 "dependencies": { 5648 7613 "parent-module": "^1.0.0", 5649 7614 "resolve-from": "^4.0.0" ··· 5732 7697 "url": "https://github.com/sponsors/ljharb" 5733 7698 } 5734 7699 }, 7700 7700 + "node_modules/is-arrayish": { 7701 7701 + "version": "0.2.1", 7702 7702 + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", 7703 7703 + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", 7704 7704 + "dev": true, 7705 7705 + "license": "MIT" 7706 7706 + }, 5735 7707 "node_modules/is-async-function": { 5736 7708 "version": "2.1.1", 5737 7709 "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz", ··· 6255 8227 "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", 6256 8228 "dev": true, 6257 8229 "license": "MIT", 6258 6258 - "peer": true, 6259 8230 "dependencies": { 6260 8231 "argparse": "^2.0.1" 6261 8232 }, ··· 6322 8293 "dev": true, 6323 8294 "license": "MIT", 6324 8295 "peer": true 8296 8296 + }, 8297 8297 + "node_modules/json-parse-even-better-errors": { 8298 8298 + "version": "2.3.1", 8299 8299 + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", 8300 8300 + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", 8301 8301 + "dev": true, 8302 8302 + "license": "MIT" 6325 8303 }, 6326 8304 "node_modules/json-schema-traverse": { 6327 8305 "version": "0.4.1", ··· 6377 8355 "dependencies": { 6378 8356 "json-buffer": "3.0.1" 6379 8357 } 8358 8358 + }, 8359 8359 + "node_modules/kolorist": { 8360 8360 + "version": "1.8.0", 8361 8361 + "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz", 8362 8362 + "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==", 8363 8363 + "dev": true, 8364 8364 + "license": "MIT" 6380 8365 }, 6381 8366 "node_modules/levn": { 6382 8367 "version": "0.4.1", ··· 6630 8615 "url": "https://opencollective.com/parcel" 6631 8616 } 6632 8617 }, 8618 8618 + "node_modules/lines-and-columns": { 8619 8619 + "version": "1.2.4", 8620 8620 + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", 8621 8621 + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", 8622 8622 + "dev": true, 8623 8623 + "license": "MIT" 8624 8624 + }, 8625 8625 + "node_modules/local-pkg": { 8626 8626 + "version": "1.1.2", 8627 8627 + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz", 8628 8628 + "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==", 8629 8629 + "dev": true, 8630 8630 + "license": "MIT", 8631 8631 + "dependencies": { 8632 8632 + "mlly": "^1.7.4", 8633 8633 + "pkg-types": "^2.3.0", 8634 8634 + "quansync": "^0.2.11" 8635 8635 + }, 8636 8636 + "engines": { 8637 8637 + "node": ">=14" 8638 8638 + }, 8639 8639 + "funding": { 8640 8640 + "url": "https://github.com/sponsors/antfu" 8641 8641 + } 8642 8642 + }, 6633 8643 "node_modules/localforage": { 6634 8644 "version": "1.10.0", 6635 8645 "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz", ··· 6689 8699 "dev": true, 6690 8700 "license": "MIT" 6691 8701 }, 8702 8702 + "node_modules/lower-case": { 8703 8703 + "version": "2.0.2", 8704 8704 + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", 8705 8705 + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", 8706 8706 + "dev": true, 8707 8707 + "license": "MIT", 8708 8708 + "dependencies": { 8709 8709 + "tslib": "^2.0.3" 8710 8710 + } 8711 8711 + }, 6692 8712 "node_modules/lru-cache": { 6693 8713 "version": "5.1.1", 6694 8714 "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", ··· 6709 8729 } 6710 8730 }, 6711 8731 "node_modules/magic-string": { 6712 6712 - "version": "0.30.18", 6713 6713 - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz", 6714 6714 - "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==", 8732 8732 + "version": "0.30.19", 8733 8733 + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz", 8734 8734 + "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==", 6715 8735 "license": "MIT", 6716 8736 "dependencies": { 6717 8737 "@jridgewell/sourcemap-codec": "^1.5.5" ··· 6816 8836 "url": "https://github.com/sponsors/isaacs" 6817 8837 } 6818 8838 }, 8839 8839 + "node_modules/mlly": { 8840 8840 + "version": "1.8.0", 8841 8841 + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz", 8842 8842 + "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==", 8843 8843 + "dev": true, 8844 8844 + "license": "MIT", 8845 8845 + "dependencies": { 8846 8846 + "acorn": "^8.15.0", 8847 8847 + "pathe": "^2.0.3", 8848 8848 + "pkg-types": "^1.3.1", 8849 8849 + "ufo": "^1.6.1" 8850 8850 + } 8851 8851 + }, 8852 8852 + "node_modules/mlly/node_modules/confbox": { 8853 8853 + "version": "0.1.8", 8854 8854 + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz", 8855 8855 + "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==", 8856 8856 + "dev": true, 8857 8857 + "license": "MIT" 8858 8858 + }, 8859 8859 + "node_modules/mlly/node_modules/pkg-types": { 8860 8860 + "version": "1.3.1", 8861 8861 + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz", 8862 8862 + "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==", 8863 8863 + "dev": true, 8864 8864 + "license": "MIT", 8865 8865 + "dependencies": { 8866 8866 + "confbox": "^0.1.8", 8867 8867 + "mlly": "^1.7.4", 8868 8868 + "pathe": "^2.0.1" 8869 8869 + } 8870 8870 + }, 6819 8871 "node_modules/ms": { 6820 8872 "version": "2.1.3", 6821 8873 "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", ··· 6865 8917 "dev": true, 6866 8918 "license": "MIT" 6867 8919 }, 8920 8920 + "node_modules/no-case": { 8921 8921 + "version": "3.0.4", 8922 8922 + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", 8923 8923 + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", 8924 8924 + "dev": true, 8925 8925 + "license": "MIT", 8926 8926 + "dependencies": { 8927 8927 + "lower-case": "^2.0.2", 8928 8928 + "tslib": "^2.0.3" 8929 8929 + } 8930 8930 + }, 6868 8931 "node_modules/node-releases": { 6869 8932 "version": "2.0.19", 6870 8933 "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", ··· 9473 11536 "url": "https://github.com/sponsors/sindresorhus" 9474 11537 } 9475 11538 }, 11539 11539 + "node_modules/package-manager-detector": { 11540 11540 + "version": "1.4.1", 11541 11541 + "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.4.1.tgz", 11542 11542 + "integrity": "sha512-dSMiVLBEA4XaNJ0PRb4N5cV/SEP4BWrWZKBmfF+OUm2pQTiZ6DDkKeWaltwu3JRhLoy59ayIkJ00cx9K9CaYTg==", 11543 11543 + "dev": true, 11544 11544 + "license": "MIT" 11545 11545 + }, 9476 11546 "node_modules/parent-module": { 9477 11547 "version": "1.0.1", 9478 11548 "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", 9479 11549 "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", 9480 11550 "dev": true, 9481 11551 "license": "MIT", 9482 9482 - "peer": true, 9483 11552 "dependencies": { 9484 11553 "callsites": "^3.0.0" 9485 11554 }, ··· 9487 11556 "node": ">=6" 9488 11557 } 9489 11558 }, 11559 11559 + "node_modules/parse-json": { 11560 11560 + "version": "5.2.0", 11561 11561 + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", 11562 11562 + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", 11563 11563 + "dev": true, 11564 11564 + "license": "MIT", 11565 11565 + "dependencies": { 11566 11566 + "@babel/code-frame": "^7.0.0", 11567 11567 + "error-ex": "^1.3.1", 11568 11568 + "json-parse-even-better-errors": "^2.3.0", 11569 11569 + "lines-and-columns": "^1.1.6" 11570 11570 + }, 11571 11571 + "engines": { 11572 11572 + "node": ">=8" 11573 11573 + }, 11574 11574 + "funding": { 11575 11575 + "url": "https://github.com/sponsors/sindresorhus" 11576 11576 + } 11577 11577 + }, 9490 11578 "node_modules/parse5": { 9491 11579 "version": "7.3.0", 9492 11580 "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz", ··· 9535 11623 "dev": true, 9536 11624 "license": "MIT" 9537 11625 }, 11626 11626 + "node_modules/path-type": { 11627 11627 + "version": "4.0.0", 11628 11628 + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", 11629 11629 + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", 11630 11630 + "dev": true, 11631 11631 + "license": "MIT", 11632 11632 + "engines": { 11633 11633 + "node": ">=8" 11634 11634 + } 11635 11635 + }, 9538 11636 "node_modules/pathe": { 9539 11637 "version": "2.0.3", 9540 11638 "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", ··· 9570 11668 "url": "https://github.com/sponsors/jonschlinkert" 9571 11669 } 9572 11670 }, 11671 11671 + "node_modules/pkg-types": { 11672 11672 + "version": "2.3.0", 11673 11673 + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz", 11674 11674 + "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==", 11675 11675 + "dev": true, 11676 11676 + "license": "MIT", 11677 11677 + "dependencies": { 11678 11678 + "confbox": "^0.2.2", 11679 11679 + "exsolve": "^1.0.7", 11680 11680 + "pathe": "^2.0.3" 11681 11681 + } 11682 11682 + }, 9573 11683 "node_modules/player.style": { 9574 11684 "version": "0.1.10", 9575 11685 "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.1.10.tgz", ··· 9692 11802 "node": ">=6" 9693 11803 } 9694 11804 }, 11805 11805 + "node_modules/quansync": { 11806 11806 + "version": "0.2.11", 11807 11807 + "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz", 11808 11808 + "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==", 11809 11809 + "dev": true, 11810 11810 + "funding": [ 11811 11811 + { 11812 11812 + "type": "individual", 11813 11813 + "url": "https://github.com/sponsors/antfu" 11814 11814 + }, 11815 11815 + { 11816 11816 + "type": "individual", 11817 11817 + "url": "https://github.com/sponsors/sxzz" 11818 11818 + } 11819 11819 + ], 11820 11820 + "license": "MIT" 11821 11821 + }, 9695 11822 "node_modules/queue-microtask": { 9696 11823 "version": "1.2.3", 9697 11824 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", ··· 9713 11840 ], 9714 11841 "license": "MIT" 9715 11842 }, 11843 11843 + "node_modules/radix-ui": { 11844 11844 + "version": "1.4.3", 11845 11845 + "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz", 11846 11846 + "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==", 11847 11847 + "dependencies": { 11848 11848 + "@radix-ui/primitive": "1.1.3", 11849 11849 + "@radix-ui/react-accessible-icon": "1.1.7", 11850 11850 + "@radix-ui/react-accordion": "1.2.12", 11851 11851 + "@radix-ui/react-alert-dialog": "1.1.15", 11852 11852 + "@radix-ui/react-arrow": "1.1.7", 11853 11853 + "@radix-ui/react-aspect-ratio": "1.1.7", 11854 11854 + "@radix-ui/react-avatar": "1.1.10", 11855 11855 + "@radix-ui/react-checkbox": "1.3.3", 11856 11856 + "@radix-ui/react-collapsible": "1.1.12", 11857 11857 + "@radix-ui/react-collection": "1.1.7", 11858 11858 + "@radix-ui/react-compose-refs": "1.1.2", 11859 11859 + "@radix-ui/react-context": "1.1.2", 11860 11860 + "@radix-ui/react-context-menu": "2.2.16", 11861 11861 + "@radix-ui/react-dialog": "1.1.15", 11862 11862 + "@radix-ui/react-direction": "1.1.1", 11863 11863 + "@radix-ui/react-dismissable-layer": "1.1.11", 11864 11864 + "@radix-ui/react-dropdown-menu": "2.1.16", 11865 11865 + "@radix-ui/react-focus-guards": "1.1.3", 11866 11866 + "@radix-ui/react-focus-scope": "1.1.7", 11867 11867 + "@radix-ui/react-form": "0.1.8", 11868 11868 + "@radix-ui/react-hover-card": "1.1.15", 11869 11869 + "@radix-ui/react-label": "2.1.7", 11870 11870 + "@radix-ui/react-menu": "2.1.16", 11871 11871 + "@radix-ui/react-menubar": "1.1.16", 11872 11872 + "@radix-ui/react-navigation-menu": "1.2.14", 11873 11873 + "@radix-ui/react-one-time-password-field": "0.1.8", 11874 11874 + "@radix-ui/react-password-toggle-field": "0.1.3", 11875 11875 + "@radix-ui/react-popover": "1.1.15", 11876 11876 + "@radix-ui/react-popper": "1.2.8", 11877 11877 + "@radix-ui/react-portal": "1.1.9", 11878 11878 + "@radix-ui/react-presence": "1.1.5", 11879 11879 + "@radix-ui/react-primitive": "2.1.3", 11880 11880 + "@radix-ui/react-progress": "1.1.7", 11881 11881 + "@radix-ui/react-radio-group": "1.3.8", 11882 11882 + "@radix-ui/react-roving-focus": "1.1.11", 11883 11883 + "@radix-ui/react-scroll-area": "1.2.10", 11884 11884 + "@radix-ui/react-select": "2.2.6", 11885 11885 + "@radix-ui/react-separator": "1.1.7", 11886 11886 + "@radix-ui/react-slider": "1.3.6", 11887 11887 + "@radix-ui/react-slot": "1.2.3", 11888 11888 + "@radix-ui/react-switch": "1.2.6", 11889 11889 + "@radix-ui/react-tabs": "1.1.13", 11890 11890 + "@radix-ui/react-toast": "1.2.15", 11891 11891 + "@radix-ui/react-toggle": "1.1.10", 11892 11892 + "@radix-ui/react-toggle-group": "1.1.11", 11893 11893 + "@radix-ui/react-toolbar": "1.1.11", 11894 11894 + "@radix-ui/react-tooltip": "1.2.8", 11895 11895 + "@radix-ui/react-use-callback-ref": "1.1.1", 11896 11896 + "@radix-ui/react-use-controllable-state": "1.2.2", 11897 11897 + "@radix-ui/react-use-effect-event": "0.0.2", 11898 11898 + "@radix-ui/react-use-escape-keydown": "1.1.1", 11899 11899 + "@radix-ui/react-use-is-hydrated": "0.1.0", 11900 11900 + "@radix-ui/react-use-layout-effect": "1.1.1", 11901 11901 + "@radix-ui/react-use-size": "1.1.1", 11902 11902 + "@radix-ui/react-visually-hidden": "1.2.3" 11903 11903 + }, 11904 11904 + "peerDependencies": { 11905 11905 + "@types/react": "*", 11906 11906 + "@types/react-dom": "*", 11907 11907 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 11908 11908 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 11909 11909 + }, 11910 11910 + "peerDependenciesMeta": { 11911 11911 + "@types/react": { 11912 11912 + "optional": true 11913 11913 + }, 11914 11914 + "@types/react-dom": { 11915 11915 + "optional": true 11916 11916 + } 11917 11917 + } 11918 11918 + }, 9716 11919 "node_modules/react": { 9717 11920 "version": "19.1.1", 9718 11921 "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", ··· 9774 11977 "node": ">=0.10.0" 9775 11978 } 9776 11979 }, 11980 11980 + "node_modules/react-remove-scroll": { 11981 11981 + "version": "2.7.1", 11982 11982 + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", 11983 11983 + "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==", 11984 11984 + "dependencies": { 11985 11985 + "react-remove-scroll-bar": "^2.3.7", 11986 11986 + "react-style-singleton": "^2.2.3", 11987 11987 + "tslib": "^2.1.0", 11988 11988 + "use-callback-ref": "^1.3.3", 11989 11989 + "use-sidecar": "^1.1.3" 11990 11990 + }, 11991 11991 + "engines": { 11992 11992 + "node": ">=10" 11993 11993 + }, 11994 11994 + "peerDependencies": { 11995 11995 + "@types/react": "*", 11996 11996 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 11997 11997 + }, 11998 11998 + "peerDependenciesMeta": { 11999 11999 + "@types/react": { 12000 12000 + "optional": true 12001 12001 + } 12002 12002 + } 12003 12003 + }, 12004 12004 + "node_modules/react-remove-scroll-bar": { 12005 12005 + "version": "2.3.8", 12006 12006 + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz", 12007 12007 + "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==", 12008 12008 + "dependencies": { 12009 12009 + "react-style-singleton": "^2.2.2", 12010 12010 + "tslib": "^2.0.0" 12011 12011 + }, 12012 12012 + "engines": { 12013 12013 + "node": ">=10" 12014 12014 + }, 12015 12015 + "peerDependencies": { 12016 12016 + "@types/react": "*", 12017 12017 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" 12018 12018 + }, 12019 12019 + "peerDependenciesMeta": { 12020 12020 + "@types/react": { 12021 12021 + "optional": true 12022 12022 + } 12023 12023 + } 12024 12024 + }, 12025 12025 + "node_modules/react-style-singleton": { 12026 12026 + "version": "2.2.3", 12027 12027 + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", 12028 12028 + "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==", 12029 12029 + "dependencies": { 12030 12030 + "get-nonce": "^1.0.0", 12031 12031 + "tslib": "^2.0.0" 12032 12032 + }, 12033 12033 + "engines": { 12034 12034 + "node": ">=10" 12035 12035 + }, 12036 12036 + "peerDependencies": { 12037 12037 + "@types/react": "*", 12038 12038 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 12039 12039 + }, 12040 12040 + "peerDependenciesMeta": { 12041 12041 + "@types/react": { 12042 12042 + "optional": true 12043 12043 + } 12044 12044 + } 12045 12045 + }, 9777 12046 "node_modules/readdirp": { 9778 12047 "version": "3.6.0", 9779 12048 "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", ··· 9879 12148 "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", 9880 12149 "dev": true, 9881 12150 "license": "MIT", 9882 9882 - "peer": true, 9883 12151 "engines": { 9884 12152 "node": ">=4" 9885 12153 } ··· 10061 12329 "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", 10062 12330 "license": "MIT" 10063 12331 }, 12332 12332 + "node_modules/scule": { 12333 12333 + "version": "1.3.0", 12334 12334 + "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz", 12335 12335 + "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==", 12336 12336 + "dev": true, 12337 12337 + "license": "MIT" 12338 12338 + }, 10064 12339 "node_modules/semver": { 10065 12340 "version": "6.3.1", 10066 12341 "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", ··· 10248 12523 "dev": true, 10249 12524 "license": "ISC" 10250 12525 }, 12526 12526 + "node_modules/snake-case": { 12527 12527 + "version": "3.0.4", 12528 12528 + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", 12529 12529 + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", 12530 12530 + "dev": true, 12531 12531 + "license": "MIT", 12532 12532 + "dependencies": { 12533 12533 + "dot-case": "^3.0.4", 12534 12534 + "tslib": "^2.0.3" 12535 12535 + } 12536 12536 + }, 10251 12537 "node_modules/solid-js": { 10252 12538 "version": "1.9.9", 10253 12539 "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.9.tgz", ··· 10431 12717 } 10432 12718 }, 10433 12719 "node_modules/strip-literal": { 10434 10434 - "version": "3.0.0", 10435 10435 - "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz", 10436 10436 - "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==", 12720 12720 + "version": "3.1.0", 12721 12721 + "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz", 12722 12722 + "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==", 10437 12723 "dev": true, 10438 12724 "license": "MIT", 10439 12725 "dependencies": { ··· 10483 12769 "url": "https://github.com/sponsors/ljharb" 10484 12770 } 10485 12771 }, 12772 12772 + "node_modules/svg-parser": { 12773 12773 + "version": "2.0.4", 12774 12774 + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", 12775 12775 + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", 12776 12776 + "dev": true, 12777 12777 + "license": "MIT" 12778 12778 + }, 10486 12779 "node_modules/symbol-tree": { 10487 12780 "version": "3.2.4", 10488 12781 "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", ··· 10578 12871 "license": "MIT" 10579 12872 }, 10580 12873 "node_modules/tinyglobby": { 10581 10581 - "version": "0.2.14", 10582 10582 - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", 10583 10583 - "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==", 12874 12874 + "version": "0.2.15", 12875 12875 + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", 12876 12876 + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", 10584 12877 "license": "MIT", 10585 12878 "dependencies": { 10586 10586 - "fdir": "^6.4.4", 10587 10587 - "picomatch": "^4.0.2" 12879 12879 + "fdir": "^6.5.0", 12880 12880 + "picomatch": "^4.0.3" 10588 12881 }, 10589 12882 "engines": { 10590 12883 "node": ">=12.0.0" ··· 10962 13255 "node": "*" 10963 13256 } 10964 13257 }, 13258 13258 + "node_modules/ufo": { 13259 13259 + "version": "1.6.1", 13260 13260 + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz", 13261 13261 + "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==", 13262 13262 + "dev": true, 13263 13263 + "license": "MIT" 13264 13264 + }, 10965 13265 "node_modules/uint8arrays": { 10966 13266 "version": "3.0.0", 10967 13267 "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz", ··· 10997 13297 "devOptional": true, 10998 13298 "license": "MIT" 10999 13299 }, 13300 13300 + "node_modules/unimport": { 13301 13301 + "version": "5.5.0", 13302 13302 + "resolved": "https://registry.npmjs.org/unimport/-/unimport-5.5.0.tgz", 13303 13303 + "integrity": "sha512-/JpWMG9s1nBSlXJAQ8EREFTFy3oy6USFd8T6AoBaw1q2GGcF4R9yp3ofg32UODZlYEO5VD0EWE1RpI9XDWyPYg==", 13304 13304 + "dev": true, 13305 13305 + "license": "MIT", 13306 13306 + "dependencies": { 13307 13307 + "acorn": "^8.15.0", 13308 13308 + "escape-string-regexp": "^5.0.0", 13309 13309 + "estree-walker": "^3.0.3", 13310 13310 + "local-pkg": "^1.1.2", 13311 13311 + "magic-string": "^0.30.19", 13312 13312 + "mlly": "^1.8.0", 13313 13313 + "pathe": "^2.0.3", 13314 13314 + "picomatch": "^4.0.3", 13315 13315 + "pkg-types": "^2.3.0", 13316 13316 + "scule": "^1.3.0", 13317 13317 + "strip-literal": "^3.1.0", 13318 13318 + "tinyglobby": "^0.2.15", 13319 13319 + "unplugin": "^2.3.10", 13320 13320 + "unplugin-utils": "^0.3.0" 13321 13321 + }, 13322 13322 + "engines": { 13323 13323 + "node": ">=18.12.0" 13324 13324 + } 13325 13325 + }, 13326 13326 + "node_modules/unimport/node_modules/escape-string-regexp": { 13327 13327 + "version": "5.0.0", 13328 13328 + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", 13329 13329 + "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==", 13330 13330 + "dev": true, 13331 13331 + "license": "MIT", 13332 13332 + "engines": { 13333 13333 + "node": ">=12" 13334 13334 + }, 13335 13335 + "funding": { 13336 13336 + "url": "https://github.com/sponsors/sindresorhus" 13337 13337 + } 13338 13338 + }, 13339 13339 + "node_modules/unimport/node_modules/picomatch": { 13340 13340 + "version": "4.0.3", 13341 13341 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", 13342 13342 + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", 13343 13343 + "dev": true, 13344 13344 + "license": "MIT", 13345 13345 + "engines": { 13346 13346 + "node": ">=12" 13347 13347 + }, 13348 13348 + "funding": { 13349 13349 + "url": "https://github.com/sponsors/jonschlinkert" 13350 13350 + } 13351 13351 + }, 11000 13352 "node_modules/unplugin": { 11001 11001 - "version": "2.3.9", 11002 11002 - "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.9.tgz", 11003 11003 - "integrity": "sha512-2dcbZq6aprwXTkzptq3k5qm5B8cvpjG9ynPd5fyM2wDJuuF7PeUK64Sxf0d+X1ZyDOeGydbNzMqBSIVlH8GIfA==", 13353 13353 + "version": "2.3.10", 13354 13354 + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz", 13355 13355 + "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==", 11004 13356 "license": "MIT", 11005 13357 "dependencies": { 11006 13358 "@jridgewell/remapping": "^2.3.5", ··· 11012 13364 "node": ">=18.12.0" 11013 13365 } 11014 13366 }, 13367 13367 + "node_modules/unplugin-auto-import": { 13368 13368 + "version": "20.2.0", 13369 13369 + "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-20.2.0.tgz", 13370 13370 + "integrity": "sha512-vfBI/SvD9hJqYNinipVOAj5n8dS8DJXFlCKFR5iLDp2SaQwsfdnfLXgZ+34Kd3YY3YEY9omk8XQg0bwos3Q8ug==", 13371 13371 + "dev": true, 13372 13372 + "license": "MIT", 13373 13373 + "dependencies": { 13374 13374 + "local-pkg": "^1.1.2", 13375 13375 + "magic-string": "^0.30.19", 13376 13376 + "picomatch": "^4.0.3", 13377 13377 + "unimport": "^5.4.0", 13378 13378 + "unplugin": "^2.3.10", 13379 13379 + "unplugin-utils": "^0.3.0" 13380 13380 + }, 13381 13381 + "engines": { 13382 13382 + "node": ">=14" 13383 13383 + }, 13384 13384 + "funding": { 13385 13385 + "url": "https://github.com/sponsors/antfu" 13386 13386 + }, 13387 13387 + "peerDependencies": { 13388 13388 + "@nuxt/kit": "^4.0.0", 13389 13389 + "@vueuse/core": "*" 13390 13390 + }, 13391 13391 + "peerDependenciesMeta": { 13392 13392 + "@nuxt/kit": { 13393 13393 + "optional": true 13394 13394 + }, 13395 13395 + "@vueuse/core": { 13396 13396 + "optional": true 13397 13397 + } 13398 13398 + } 13399 13399 + }, 13400 13400 + "node_modules/unplugin-auto-import/node_modules/picomatch": { 13401 13401 + "version": "4.0.3", 13402 13402 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", 13403 13403 + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", 13404 13404 + "dev": true, 13405 13405 + "license": "MIT", 13406 13406 + "engines": { 13407 13407 + "node": ">=12" 13408 13408 + }, 13409 13409 + "funding": { 13410 13410 + "url": "https://github.com/sponsors/jonschlinkert" 13411 13411 + } 13412 13412 + }, 13413 13413 + "node_modules/unplugin-icons": { 13414 13414 + "version": "22.4.2", 13415 13415 + "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-22.4.2.tgz", 13416 13416 + "integrity": "sha512-Yv15405unO67Chme0Slk0JRA/H2AiAZLK5t7ebt8/ZpTDlBfM4d4En2qD3MX2rzOSkIteQ0syIm3q8MSofeoBA==", 13417 13417 + "dev": true, 13418 13418 + "license": "MIT", 13419 13419 + "dependencies": { 13420 13420 + "@antfu/install-pkg": "^1.1.0", 13421 13421 + "@iconify/utils": "^3.0.2", 13422 13422 + "debug": "^4.4.3", 13423 13423 + "local-pkg": "^1.1.2", 13424 13424 + "unplugin": "^2.3.10" 13425 13425 + }, 13426 13426 + "funding": { 13427 13427 + "url": "https://github.com/sponsors/antfu" 13428 13428 + }, 13429 13429 + "peerDependencies": { 13430 13430 + "@svgr/core": ">=7.0.0", 13431 13431 + "@svgx/core": "^1.0.1", 13432 13432 + "@vue/compiler-sfc": "^3.0.2 || ^2.7.0", 13433 13433 + "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0", 13434 13434 + "vue-template-compiler": "^2.6.12", 13435 13435 + "vue-template-es2015-compiler": "^1.9.0" 13436 13436 + }, 13437 13437 + "peerDependenciesMeta": { 13438 13438 + "@svgr/core": { 13439 13439 + "optional": true 13440 13440 + }, 13441 13441 + "@svgx/core": { 13442 13442 + "optional": true 13443 13443 + }, 13444 13444 + "@vue/compiler-sfc": { 13445 13445 + "optional": true 13446 13446 + }, 13447 13447 + "svelte": { 13448 13448 + "optional": true 13449 13449 + }, 13450 13450 + "vue-template-compiler": { 13451 13451 + "optional": true 13452 13452 + }, 13453 13453 + "vue-template-es2015-compiler": { 13454 13454 + "optional": true 13455 13455 + } 13456 13456 + } 13457 13457 + }, 13458 13458 + "node_modules/unplugin-utils": { 13459 13459 + "version": "0.3.1", 13460 13460 + "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz", 13461 13461 + "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==", 13462 13462 + "dev": true, 13463 13463 + "license": "MIT", 13464 13464 + "dependencies": { 13465 13465 + "pathe": "^2.0.3", 13466 13466 + "picomatch": "^4.0.3" 13467 13467 + }, 13468 13468 + "engines": { 13469 13469 + "node": ">=20.19.0" 13470 13470 + }, 13471 13471 + "funding": { 13472 13472 + "url": "https://github.com/sponsors/sxzz" 13473 13473 + } 13474 13474 + }, 13475 13475 + "node_modules/unplugin-utils/node_modules/picomatch": { 13476 13476 + "version": "4.0.3", 13477 13477 + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", 13478 13478 + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", 13479 13479 + "dev": true, 13480 13480 + "license": "MIT", 13481 13481 + "engines": { 13482 13482 + "node": ">=12" 13483 13483 + }, 13484 13484 + "funding": { 13485 13485 + "url": "https://github.com/sponsors/jonschlinkert" 13486 13486 + } 13487 13487 + }, 11015 13488 "node_modules/unplugin/node_modules/picomatch": { 11016 13489 "version": "4.0.3", 11017 13490 "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", ··· 11063 13536 "peer": true, 11064 13537 "dependencies": { 11065 13538 "punycode": "^2.1.0" 13539 13539 + } 13540 13540 + }, 13541 13541 + "node_modules/use-callback-ref": { 13542 13542 + "version": "1.3.3", 13543 13543 + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz", 13544 13544 + "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==", 13545 13545 + "dependencies": { 13546 13546 + "tslib": "^2.0.0" 13547 13547 + }, 13548 13548 + "engines": { 13549 13549 + "node": ">=10" 13550 13550 + }, 13551 13551 + "peerDependencies": { 13552 13552 + "@types/react": "*", 13553 13553 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 13554 13554 + }, 13555 13555 + "peerDependenciesMeta": { 13556 13556 + "@types/react": { 13557 13557 + "optional": true 13558 13558 + } 13559 13559 + } 13560 13560 + }, 13561 13561 + "node_modules/use-sidecar": { 13562 13562 + "version": "1.1.3", 13563 13563 + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz", 13564 13564 + "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==", 13565 13565 + "dependencies": { 13566 13566 + "detect-node-es": "^1.1.0", 13567 13567 + "tslib": "^2.0.0" 13568 13568 + }, 13569 13569 + "engines": { 13570 13570 + "node": ">=10" 13571 13571 + }, 13572 13572 + "peerDependencies": { 13573 13573 + "@types/react": "*", 13574 13574 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 13575 13575 + }, 13576 13576 + "peerDependenciesMeta": { 13577 13577 + "@types/react": { 13578 13578 + "optional": true 13579 13579 + } 11066 13580 } 11067 13581 }, 11068 13582 "node_modules/use-sync-external-store": {

+14

package.json

··· 12 12 "dependencies": { 13 13 "@atproto/api": "^0.16.6", 14 14 "@atproto/oauth-client-browser": "^0.3.33", 15 15 + "@radix-ui/react-dialog": "^1.1.15", 16 16 + "@radix-ui/react-dropdown-menu": "^2.1.16", 17 17 + "@radix-ui/react-hover-card": "^1.1.15", 18 18 + "@radix-ui/react-slider": "^1.3.6", 15 19 "@tailwindcss/vite": "^4.0.6", 16 20 "@tanstack/query-sync-storage-persister": "^5.85.6", 17 21 "@tanstack/react-devtools": "^0.2.2", ··· 20 24 "@tanstack/react-router": "^1.130.2", 21 25 "@tanstack/react-router-devtools": "^1.131.5", 22 26 "@tanstack/router-plugin": "^1.121.2", 27 27 + "dompurify": "^3.3.0", 23 28 "i": "^0.3.7", 24 29 "idb-keyval": "^6.2.2", 25 30 "jotai": "^2.13.1", 26 31 "npm": "^11.6.2", 32 32 + "radix-ui": "^1.4.3", 27 33 "react": "^19.0.0", 28 34 "react-dom": "^19.0.0", 29 35 "react-player": "^3.3.2", ··· 32 38 }, 33 39 "devDependencies": { 34 40 "@eslint-react/eslint-plugin": "^2.2.1", 41 41 + "@iconify-icon/react": "^3.0.1", 42 42 + "@iconify-json/material-symbols": "^1.2.42", 43 43 + "@iconify-json/mdi": "^1.2.3", 44 44 + "@iconify/json": "^2.2.396", 45 45 + "@svgr/core": "^8.1.0", 46 46 + "@svgr/plugin-jsx": "^8.1.0", 35 47 "@testing-library/dom": "^10.4.0", 36 48 "@testing-library/react": "^16.2.0", 37 49 "@types/node": "^24.3.0", ··· 49 61 "prettier": "^3.6.2", 50 62 "typescript": "^5.7.2", 51 63 "typescript-eslint": "^8.46.1", 64 64 + "unplugin-auto-import": "^20.2.0", 65 65 + "unplugin-icons": "^22.4.2", 52 66 "vite": "^6.3.5", 53 67 "vitest": "^3.0.5", 54 68 "web-vitals": "^4.2.4"

public/screenshot.jpg

This is a binary file and will not be displayed.

public/screenshot.png

This is a binary file and will not be displayed.

+22

src/auto-imports.d.ts

··· 1 1 + /* eslint-disable */ 2 2 + /* prettier-ignore */ 3 3 + // @ts-nocheck 4 4 + // noinspection JSUnusedGlobalSymbols 5 5 + // Generated by unplugin-auto-import 6 6 + // biome-ignore lint: disable 7 7 + export {} 8 8 + declare global { 9 9 + const IconMaterialSymbolsAccountCircle: typeof import('~icons/material-symbols/account-circle.jsx').default 10 10 + const IconMaterialSymbolsAccountCircleOutline: typeof import('~icons/material-symbols/account-circle-outline.jsx').default 11 11 + const IconMaterialSymbolsArrowBack: typeof import('~icons/material-symbols/arrow-back.jsx').default 12 12 + const IconMaterialSymbolsHome: typeof import('~icons/material-symbols/home.jsx').default 13 13 + const IconMaterialSymbolsHomeOutline: typeof import('~icons/material-symbols/home-outline.jsx').default 14 14 + const IconMaterialSymbolsNotifications: typeof import('~icons/material-symbols/notifications.jsx').default 15 15 + const IconMaterialSymbolsNotificationsOutline: typeof import('~icons/material-symbols/notifications-outline.jsx').default 16 16 + const IconMaterialSymbolsSearch: typeof import('~icons/material-symbols/search.jsx').default 17 17 + const IconMaterialSymbolsSettings: typeof import('~icons/material-symbols/settings.jsx').default 18 18 + const IconMaterialSymbolsSettingsOutline: typeof import('~icons/material-symbols/settings-outline.jsx').default 19 19 + const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default 20 20 + const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default 21 21 + const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default 22 22 + }

+292

src/components/Composer.tsx

··· 1 1 + import { AppBskyRichtextFacet, RichText } from "@atproto/api"; 2 2 + import { useAtom } from "jotai"; 3 3 + import { Dialog } from "radix-ui"; 4 4 + import { useEffect, useRef, useState } from "react"; 5 5 + 6 6 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 7 7 + import { composerAtom } from "~/utils/atoms"; 8 8 + import { useQueryPost } from "~/utils/useQuery"; 9 9 + 10 10 + import { ProfileThing } from "./Login"; 11 11 + import { UniversalPostRendererATURILoader } from "./UniversalPostRenderer"; 12 12 + 13 13 + const MAX_POST_LENGTH = 300; 14 14 + 15 15 + export function Composer() { 16 16 + const [composerState, setComposerState] = useAtom(composerAtom); 17 17 + const { agent } = useAuth(); 18 18 + 19 19 + const [postText, setPostText] = useState(""); 20 20 + const [posting, setPosting] = useState(false); 21 21 + const [postSuccess, setPostSuccess] = useState(false); 22 22 + const [postError, setPostError] = useState<string | null>(null); 23 23 + 24 24 + useEffect(() => { 25 25 + setPostText(""); 26 26 + setPosting(false); 27 27 + setPostSuccess(false); 28 28 + setPostError(null); 29 29 + }, [composerState.kind]); 30 30 + 31 31 + const parentUri = 32 32 + composerState.kind === "reply" 33 33 + ? composerState.parent 34 34 + : composerState.kind === "quote" 35 35 + ? composerState.subject 36 36 + : undefined; 37 37 + 38 38 + const { data: parentPost, isLoading: isParentLoading } = 39 39 + useQueryPost(parentUri); 40 40 + 41 41 + async function handlePost() { 42 42 + if (!agent || !postText.trim() || postText.length > MAX_POST_LENGTH) return; 43 43 + 44 44 + setPosting(true); 45 45 + setPostError(null); 46 46 + 47 47 + try { 48 48 + const rt = new RichText({ text: postText }); 49 49 + await rt.detectFacets(agent); 50 50 + 51 51 + if (rt.facets?.length) { 52 52 + rt.facets = rt.facets.filter((item) => { 53 53 + if (item.$type !== "app.bsky.richtext.facet") return true; 54 54 + if (!item.features?.length) return true; 55 55 + 56 56 + item.features = item.features.filter((feature) => { 57 57 + if (feature.$type !== "app.bsky.richtext.facet#mention") return true; 58 58 + const did = feature.$type === "app.bsky.richtext.facet#mention" ? (feature as AppBskyRichtextFacet.Mention)?.did : undefined; 59 59 + return typeof did === "string" && did.startsWith("did:"); 60 60 + }); 61 61 + 62 62 + return item.features.length > 0; 63 63 + }); 64 64 + } 65 65 + 66 66 + const record: Record<string, unknown> = { 67 67 + $type: "app.bsky.feed.post", 68 68 + text: rt.text, 69 69 + facets: rt.facets, 70 70 + createdAt: new Date().toISOString(), 71 71 + }; 72 72 + 73 73 + if (composerState.kind === "reply" && parentPost) { 74 74 + record.reply = { 75 75 + root: parentPost.value?.reply?.root ?? { 76 76 + uri: parentPost.uri, 77 77 + cid: parentPost.cid, 78 78 + }, 79 79 + parent: { 80 80 + uri: parentPost.uri, 81 81 + cid: parentPost.cid, 82 82 + }, 83 83 + }; 84 84 + } 85 85 + 86 86 + if (composerState.kind === "quote" && parentPost) { 87 87 + record.embed = { 88 88 + $type: "app.bsky.embed.record", 89 89 + record: { 90 90 + uri: parentPost.uri, 91 91 + cid: parentPost.cid, 92 92 + }, 93 93 + }; 94 94 + } 95 95 + 96 96 + await agent.com.atproto.repo.createRecord({ 97 97 + collection: "app.bsky.feed.post", 98 98 + repo: agent.assertDid, 99 99 + record, 100 100 + }); 101 101 + 102 102 + setPostSuccess(true); 103 103 + setPostText(""); 104 104 + 105 105 + setTimeout(() => { 106 106 + setPostSuccess(false); 107 107 + setComposerState({ kind: "closed" }); 108 108 + }, 1500); 109 109 + } catch (e: any) { 110 110 + setPostError(e?.message || "Failed to post"); 111 111 + } finally { 112 112 + setPosting(false); 113 113 + } 114 114 + } 115 115 + // if (composerState.kind === "closed") { 116 116 + // return null; 117 117 + // } 118 118 + 119 119 + const getPlaceholder = () => { 120 120 + switch (composerState.kind) { 121 121 + case "reply": 122 122 + return "Post your reply"; 123 123 + case "quote": 124 124 + return "Add a comment..."; 125 125 + case "root": 126 126 + default: 127 127 + return "What's happening?!"; 128 128 + } 129 129 + }; 130 130 + 131 131 + const charsLeft = MAX_POST_LENGTH - postText.length; 132 132 + const isPostButtonDisabled = 133 133 + posting || !postText.trim() || isParentLoading || charsLeft < 0; 134 134 + 135 135 + return ( 136 136 + <Dialog.Root 137 137 + open={composerState.kind !== "closed"} 138 138 + onOpenChange={(open) => { 139 139 + if (!open) setComposerState({ kind: "closed" }); 140 140 + }} 141 141 + > 142 142 + <Dialog.Portal> 143 143 + <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 144 144 + 145 145 + <Dialog.Content className="fixed overflow-y-scroll inset-0 z-50 flex items-start justify-center py-10 sm:py-20"> 146 146 + <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4"> 147 147 + <div className="flex flex-row justify-between p-2"> 148 148 + <Dialog.Close asChild> 149 149 + <button 150 150 + className="h-8 w-8 flex items-center justify-center rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800" 151 151 + disabled={posting} 152 152 + aria-label="Close" 153 153 + > 154 154 + <svg 155 155 + xmlns="http://www.w3.org/2000/svg" 156 156 + width="20" 157 157 + height="20" 158 158 + viewBox="0 0 24 24" 159 159 + fill="none" 160 160 + stroke="currentColor" 161 161 + strokeWidth="2.5" 162 162 + strokeLinecap="round" 163 163 + strokeLinejoin="round" 164 164 + > 165 165 + <line x1="18" y1="6" x2="6" y2="18"></line> 166 166 + <line x1="6" y1="6" x2="18" y2="18"></line> 167 167 + </svg> 168 168 + </button> 169 169 + </Dialog.Close> 170 170 + 171 171 + <div className="flex-1" /> 172 172 + <div className="flex items-center gap-4"> 173 173 + <span 174 174 + className={`text-sm ${charsLeft < 0 ? "text-red-500" : "text-gray-500"}`} 175 175 + > 176 176 + {charsLeft} 177 177 + </span> 178 178 + <button 179 179 + className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-1 px-4 rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 180 180 + onClick={handlePost} 181 181 + disabled={isPostButtonDisabled} 182 182 + > 183 183 + {posting ? "Posting..." : "Post"} 184 184 + </button> 185 185 + </div> 186 186 + </div> 187 187 + 188 188 + {postSuccess ? ( 189 189 + <div className="flex flex-col items-center justify-center py-16"> 190 190 + <span className="text-gray-500 text-6xl mb-4">✓</span> 191 191 + <span className="text-xl font-bold text-black dark:text-white"> 192 192 + Posted! 193 193 + </span> 194 194 + </div> 195 195 + ) : ( 196 196 + <div className="px-4"> 197 197 + {composerState.kind === "reply" && ( 198 198 + <div className="mb-1 -mx-4"> 199 199 + {isParentLoading ? ( 200 200 + <div className="text-sm text-gray-500 animate-pulse"> 201 201 + Loading parent post... 202 202 + </div> 203 203 + ) : parentUri ? ( 204 204 + <UniversalPostRendererATURILoader 205 205 + atUri={parentUri} 206 206 + bottomReplyLine 207 207 + bottomBorder={false} 208 208 + /> 209 209 + ) : ( 210 210 + <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 211 211 + Could not load parent post. 212 212 + </div> 213 213 + )} 214 214 + </div> 215 215 + )} 216 216 + 217 217 + <div className="flex w-full gap-1 flex-col"> 218 218 + <ProfileThing agent={agent} large /> 219 219 + <div className="flex pl-[50px]"> 220 220 + <AutoGrowTextarea 221 221 + className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2" 222 222 + rows={5} 223 223 + placeholder={getPlaceholder()} 224 224 + value={postText} 225 225 + onChange={(e) => setPostText(e.target.value)} 226 226 + disabled={posting} 227 227 + autoFocus 228 228 + /> 229 229 + </div> 230 230 + </div> 231 231 + 232 232 + {composerState.kind === "quote" && ( 233 233 + <div className="mb-4 ml-[50px] rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"> 234 234 + {isParentLoading ? ( 235 235 + <div className="text-sm text-gray-500 animate-pulse"> 236 236 + Loading parent post... 237 237 + </div> 238 238 + ) : parentUri ? ( 239 239 + <UniversalPostRendererATURILoader 240 240 + atUri={parentUri} 241 241 + isQuote 242 242 + /> 243 243 + ) : ( 244 244 + <div className="text-sm text-red-500 rounded-lg border border-red-500/50 p-3"> 245 245 + Could not load parent post. 246 246 + </div> 247 247 + )} 248 248 + </div> 249 249 + )} 250 250 + 251 251 + {postError && ( 252 252 + <div className="text-red-500 text-sm my-2 text-center"> 253 253 + {postError} 254 254 + </div> 255 255 + )} 256 256 + </div> 257 257 + )} 258 258 + </div> 259 259 + </Dialog.Content> 260 260 + </Dialog.Portal> 261 261 + </Dialog.Root> 262 262 + ); 263 263 + } 264 264 + 265 265 + function AutoGrowTextarea({ 266 266 + value, 267 267 + className, 268 268 + onChange, 269 269 + ...props 270 270 + }: React.DetailedHTMLProps< 271 271 + React.TextareaHTMLAttributes<HTMLTextAreaElement>, 272 272 + HTMLTextAreaElement 273 273 + >) { 274 274 + const ref = useRef<HTMLTextAreaElement>(null); 275 275 + 276 276 + useEffect(() => { 277 277 + const el = ref.current; 278 278 + if (!el) return; 279 279 + el.style.height = "auto"; 280 280 + el.style.height = el.scrollHeight + "px"; 281 281 + }, [value]); 282 282 + 283 283 + return ( 284 284 + <textarea 285 285 + ref={ref} 286 286 + className={className} 287 287 + value={value} 288 288 + onChange={onChange} 289 289 + {...props} 290 290 + /> 291 291 + ); 292 292 + }

+33

src/components/Header.tsx

··· 1 1 + import { Link, useRouter } from "@tanstack/react-router"; 2 2 + import { useAtom } from "jotai"; 3 3 + 4 4 + import { isAtTopAtom } from "~/utils/atoms"; 5 5 + 6 6 + export function Header({ 7 7 + backButtonCallback, 8 8 + title 9 9 + }: { 10 10 + backButtonCallback?: () => void; 11 11 + title?: string; 12 12 + }) { 13 13 + const router = useRouter(); 14 14 + const [isAtTop] = useAtom(isAtTopAtom); 15 15 + //const what = router.history. 16 16 + return ( 17 17 + <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}> 18 18 + {backButtonCallback ? (<Link 19 19 + to=".." 20 20 + //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 21 21 + className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 22 22 + onClick={(e) => { 23 23 + e.preventDefault(); 24 24 + backButtonCallback(); 25 25 + }} 26 26 + aria-label="Go back" 27 27 + > 28 28 + <IconMaterialSymbolsArrowBack className="w-6 h-6" /> 29 29 + </Link>) : (<div className="w-[0px]" />)} 30 30 + <span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span> 31 31 + </div> 32 32 + ); 33 33 + }

+150

src/components/Import.tsx

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { useNavigate, type UseNavigateResult } from "@tanstack/react-router"; 3 3 + import { useState } from "react"; 4 4 + 5 5 + /** 6 6 + * Basically the best equivalent to Search that i can do 7 7 + */ 8 8 + export function Import() { 9 9 + const [textInput, setTextInput] = useState<string | undefined>(); 10 10 + const navigate = useNavigate(); 11 11 + 12 12 + const handleEnter = () => { 13 13 + if (!textInput) return; 14 14 + handleImport({ 15 15 + text: textInput, 16 16 + navigate, 17 17 + }); 18 18 + }; 19 19 + 20 20 + return ( 21 21 + <div className="w-full relative"> 22 22 + <IconMaterialSymbolsSearch className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" /> 23 23 + 24 24 + <input 25 25 + type="text" 26 26 + placeholder="Import..." 27 27 + value={textInput} 28 28 + onChange={(e) => setTextInput(e.target.value)} 29 29 + onKeyDown={(e) => { 30 30 + if (e.key === "Enter") handleEnter(); 31 31 + }} 32 32 + className="w-full h-12 pl-12 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 box-border transition" 33 33 + /> 34 34 + </div> 35 35 + ); 36 36 + } 37 37 + 38 38 + function handleImport({ 39 39 + text, 40 40 + navigate, 41 41 + }: { 42 42 + text: string; 43 43 + navigate: UseNavigateResult<string>; 44 44 + }) { 45 45 + const trimmed = text.trim(); 46 46 + // parse text 47 47 + /** 48 48 + * text might be 49 49 + * 1. bsky dot app url (reddwarf link segments might be uri encoded,) 50 50 + * 2. aturi 51 51 + * 3. plain handle 52 52 + * 4. plain did 53 53 + */ 54 54 + 55 55 + // 1. Check if it’s a URL 56 56 + try { 57 57 + const url = new URL(text); 58 58 + const knownHosts = [ 59 59 + "bsky.app", 60 60 + "social.daniela.lol", 61 61 + "deer.social", 62 62 + "reddwarf.whey.party", 63 63 + "reddwarf.app", 64 64 + "main.bsky.dev", 65 65 + "catsky.social", 66 66 + "blacksky.community", 67 67 + "red-dwarf-social-app.whey.party", 68 68 + "zeppelin.social", 69 69 + ]; 70 70 + if (knownHosts.includes(url.hostname)) { 71 71 + // parse path to get URI or handle 72 72 + const path = decodeURIComponent(url.pathname.slice(1)); // remove leading / 73 73 + console.log("BSky URL path:", path); 74 74 + navigate({ 75 75 + to: `/${path}`, 76 76 + }); 77 77 + return; 78 78 + } 79 79 + } catch { 80 80 + // not a URL, continue 81 81 + } 82 82 + 83 83 + // 2. Check if text looks like an at-uri 84 84 + try { 85 85 + if (text.startsWith("at://")) { 86 86 + console.log("AT URI detected:", text); 87 87 + const aturi = new AtUri(text); 88 88 + switch (aturi.collection) { 89 89 + case "app.bsky.feed.post": { 90 90 + navigate({ 91 91 + to: "/profile/$did/post/$rkey", 92 92 + params: { 93 93 + did: aturi.host, 94 94 + rkey: aturi.rkey, 95 95 + }, 96 96 + }); 97 97 + return; 98 98 + } 99 99 + case "app.bsky.actor.profile": { 100 100 + navigate({ 101 101 + to: "/profile/$did", 102 102 + params: { 103 103 + did: aturi.host, 104 104 + }, 105 105 + }); 106 106 + return; 107 107 + } 108 108 + // todo add more handlers as more routes are added. like feeds, lists, etc etc thanks! 109 109 + default: { 110 110 + // continue 111 111 + } 112 112 + } 113 113 + } 114 114 + } catch { 115 115 + // continue 116 116 + } 117 117 + 118 118 + // 3. Plain handle (starts with @) 119 119 + try { 120 120 + if (text.startsWith("@")) { 121 121 + const handle = text.slice(1); 122 122 + console.log("Handle detected:", handle); 123 123 + navigate({ to: "/profile/$did", params: { did: handle } }); 124 124 + return; 125 125 + } 126 126 + } catch { 127 127 + // continue 128 128 + } 129 129 + 130 130 + // 4. Plain DID (starts with did:) 131 131 + try { 132 132 + if (text.startsWith("did:")) { 133 133 + console.log("did detected:", text); 134 134 + navigate({ to: "/profile/$did", params: { did: text } }); 135 135 + return; 136 136 + } 137 137 + } catch { 138 138 + // continue 139 139 + } 140 140 + 141 141 + // if all else fails 142 142 + 143 143 + // try { 144 144 + // // probably a user? 145 145 + // navigate({ to: "/profile/$did", params: { did: text } }); 146 146 + // return; 147 147 + // } catch { 148 148 + // // continue 149 149 + // } 150 150 + }

+36 -9

src/components/InfiniteCustomFeed.tsx

··· 1 1 + import { useQueryClient } from "@tanstack/react-query"; 1 2 import * as React from "react"; 3 3 + 2 4 //import { useInView } from "react-intersection-observer"; 3 5 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 4 6 import { useAuth } from "~/providers/UnifiedAuthProvider"; 5 7 import { 6 6 - useQueryArbitrary, 7 7 - useQueryIdentity, 8 8 useInfiniteQueryFeedSkeleton, 9 9 + // useQueryArbitrary, 10 10 + // useQueryIdentity, 9 11 } from "~/utils/useQuery"; 10 12 11 13 interface InfiniteCustomFeedProps { ··· 36 38 isFetchingNextPage, 37 39 refetch, 38 40 isRefetching, 41 41 + queryKey, 39 42 } = useInfiniteQueryFeedSkeleton({ 40 43 feedUri: feedUri, 41 44 agent: agent ?? undefined, ··· 43 46 pdsUrl: pdsUrl, 44 47 feedServiceDid: feedServiceDid, 45 48 }); 49 49 + const queryClient = useQueryClient(); 50 50 + 46 51 47 52 const handleRefresh = () => { 53 53 + queryClient.removeQueries({queryKey: queryKey}); 54 54 + //queryClient.invalidateQueries(["infinite-feed", feedUri] as const); 48 55 refetch(); 49 56 }; 50 57 58 58 + const allPosts = React.useMemo(() => { 59 59 + const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? []; 60 60 + 61 61 + const seenUris = new Set<string>(); 62 62 + 63 63 + return flattenedPosts.filter((item) => { 64 64 + if (!item?.post) return false; 65 65 + 66 66 + if (seenUris.has(item.post)) { 67 67 + return false; 68 68 + } 69 69 + 70 70 + seenUris.add(item.post); 71 71 + 72 72 + return true; 73 73 + }); 74 74 + }, [data]); 75 75 + 51 76 //const { ref, inView } = useInView(); 52 77 53 78 // React.useEffect(() => { ··· 66 91 ); 67 92 } 68 93 69 69 - const allPosts = 70 70 - data?.pages.flatMap((page) => { 71 71 - if (page) return page.feed; 72 72 - }) ?? []; 94 94 + // const allPosts = 95 95 + // data?.pages.flatMap((page) => { 96 96 + // if (page) return page.feed; 97 97 + // }) ?? []; 73 98 74 99 if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) { 75 100 return ( ··· 112 137 <button 113 138 onClick={handleRefresh} 114 139 disabled={isRefetching} 115 115 - className="sticky lg:bottom-6 bottom-24 ml-4 w-[42px] h-[42px] z-10 bg-gray-500 hover:bg-gray-600 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:bg-gray-400 disabled:cursor-not-allowed" 140 140 + className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed" 116 141 aria-label="Refresh feed" 117 142 > 118 118 - {isRefetching ? <RefreshIcon className="h-6 w-6 animate-spin" /> : <RefreshIcon className="h-6 w-6" />} 143 143 + <RefreshIcon 144 144 + className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} 145 145 + /> 119 146 </button> 120 147 </> 121 148 ); ··· 138 165 d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" 139 166 ></path> 140 167 </svg> 141 141 - ); 168 168 + );

+188 -58

src/components/Login.tsx

··· 1 1 // src/components/Login.tsx 2 2 - import React, { useEffect, useState, useRef } from "react"; 2 2 + import AtpAgent, { Agent } from "@atproto/api"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React, { useEffect, useRef, useState } from "react"; 5 5 + 3 6 import { useAuth } from "~/providers/UnifiedAuthProvider"; 4 4 - import { Agent } from "@atproto/api"; 7 7 + import { imgCDNAtom } from "~/utils/atoms"; 8 8 + import { useQueryIdentity, useQueryProfile } from "~/utils/useQuery"; 5 9 6 10 // --- 1. The Main Component (Orchestrator with `compact` prop) --- 7 7 - export default function Login({ compact = false }: { compact?: boolean }) { 11 11 + export default function Login({ 12 12 + compact = false, 13 13 + popup = false, 14 14 + }: { 15 15 + compact?: boolean; 16 16 + popup?: boolean; 17 17 + }) { 8 18 const { status, agent, logout } = useAuth(); 9 19 10 20 // Loading state can be styled differently based on the prop ··· 14 24 className={ 15 25 compact 16 26 ? "flex items-center justify-center p-1" 17 17 - : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4 flex justify-center items-center h-[280px]" 27 27 + : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]" 18 28 } 19 29 > 20 30 <span ··· 33 43 // Large view 34 44 if (!compact) { 35 45 return ( 36 36 - <div className="p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4"> 46 46 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 37 47 <div className="flex flex-col items-center justify-center text-center"> 38 48 <p className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100"> 39 49 You are logged in! ··· 41 51 <ProfileThing agent={agent} large /> 42 52 <button 43 53 onClick={logout} 44 44 - className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded px-6 py-2 font-semibold text-base transition-colors" 54 54 + className="bg-gray-600 mt-4 hover:bg-gray-700 text-white rounded-full px-6 py-2 font-semibold text-base transition-colors" 45 55 > 46 56 Log out 47 57 </button> ··· 67 77 if (!compact) { 68 78 // Large view renders the form directly in the card 69 79 return ( 70 70 - <div className="p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-6 mx-4"> 80 80 + <div className="p-4 bg-gray-100 dark:bg-gray-900 rounded-xl border-gray-200 dark:border-gray-800 mt-4 mx-4"> 71 81 <UnifiedLoginForm /> 72 82 </div> 73 83 ); 74 84 } 75 85 76 86 // Compact view renders a button that toggles the form in a dropdown 77 77 - return <CompactLoginButton />; 87 87 + return <CompactLoginButton popup={popup} />; 78 88 } 79 89 80 90 // --- 2. The Reusable, Self-Contained Login Form Component --- ··· 83 93 84 94 return ( 85 95 <div> 86 86 - <div className="flex border-b border-gray-200 dark:border-gray-700 mb-4"> 96 96 + <div className="flex bg-gray-300 rounded-full dark:bg-gray-700 mb-4"> 87 97 <TabButton 88 98 label="OAuth" 89 99 active={mode === "oauth"} ··· 103 113 // --- 3. Helper components for layouts, forms, and UI --- 104 114 105 115 // A new component to contain the logic for the compact dropdown 106 106 - const CompactLoginButton = () => { 116 116 + const CompactLoginButton = ({ popup }: { popup?: boolean }) => { 107 117 const [showForm, setShowForm] = useState(false); 108 118 const formRef = useRef<HTMLDivElement>(null); 109 119 ··· 125 135 <div className="relative" ref={formRef}> 126 136 <button 127 137 onClick={() => setShowForm(!showForm)} 128 128 - className="text-sm bg-gray-600 hover:bg-gray-700 text-white rounded px-3 py-1 font-medium transition-colors" 138 138 + className="text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-full px-3 py-1 font-medium transition-colors" 129 139 > 130 140 Log in 131 141 </button> 132 142 {showForm && ( 133 133 - <div className="absolute top-full right-0 mt-2 w-80 bg-white dark:bg-gray-900 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 z-50"> 143 143 + <div 144 144 + className={`absolute ${popup ? `bottom-[calc(100%)]` : `top-full`} right-0 mt-2 w-80 bg-white dark:bg-gray-900 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 z-50`} 145 145 + > 134 146 <UnifiedLoginForm /> 135 147 </div> 136 148 )} ··· 138 150 ); 139 151 }; 140 152 141 141 - const TabButton = ({ label, active, onClick }: { label: string; active: boolean; onClick: () => void; }) => ( 153 153 + const TabButton = ({ 154 154 + label, 155 155 + active, 156 156 + onClick, 157 157 + }: { 158 158 + label: string; 159 159 + active: boolean; 160 160 + onClick: () => void; 161 161 + }) => ( 142 162 <button 143 163 onClick={onClick} 144 144 - className={`px-4 py-2 text-sm font-medium transition-colors ${ 164 164 + className={`px-4 py-2 text-sm font-medium transition-colors rounded-full flex-1 ${ 145 165 active 146 146 - ? "text-gray-600 dark:text-gray-200 border-b-2 border-gray-500" 147 147 - : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" 166 166 + ? "text-gray-50 dark:text-gray-200 border-gray-500 bg-gray-400 dark:bg-gray-500" 167 167 + : "text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200" 148 168 }`} 149 169 > 150 170 {label} ··· 169 189 }; 170 190 return ( 171 191 <form onSubmit={handleSubmit} className="flex flex-col gap-3"> 172 172 - <p className="text-xs text-gray-500 dark:text-gray-400">Sign in with AT. Your password is never shared.</p> 173 173 - <input type="text" placeholder="handle.bsky.social" value={handle} onChange={(e) => setHandle(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" /> 174 174 - <button type="submit" className="bg-gray-600 hover:bg-gray-700 text-white rounded px-4 py-2 font-medium text-sm transition-colors">Log in</button> 192 192 + <p className="text-xs text-gray-500 dark:text-gray-400"> 193 193 + Sign in with AT. Your password is never shared. 194 194 + </p> 195 195 + {/* <input 196 196 + type="text" 197 197 + placeholder="handle.bsky.social" 198 198 + value={handle} 199 199 + onChange={(e) => setHandle(e.target.value)} 200 200 + className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 201 201 + /> */} 202 202 + <div className="flex flex-col gap-3"> 203 203 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 204 204 + <input 205 205 + type="text" 206 206 + placeholder=" " 207 207 + value={handle} 208 208 + onChange={(e) => setHandle(e.target.value)} 209 209 + /> 210 210 + <label>AT Handle</label> 211 211 + </div> 212 212 + <button 213 213 + type="submit" 214 214 + className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors" 215 215 + > 216 216 + Log in 217 217 + </button> 218 218 + </div> 175 219 </form> 176 220 ); 177 221 }; ··· 201 245 202 246 return ( 203 247 <form onSubmit={handleSubmit} className="flex flex-col gap-3"> 204 204 - <p className="text-xs text-red-500 dark:text-red-400">Warning: Less secure. Use an App Password.</p> 205 205 - <input type="text" placeholder="handle.bsky.social" value={user} onChange={(e) => setUser(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" autoComplete="username" /> 206 206 - <input type="password" placeholder="App Password" value={password} onChange={(e) => setPassword(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" autoComplete="current-password" /> 207 207 - <input type="text" placeholder="PDS (e.g., bsky.social)" value={serviceURL} onChange={(e) => setServiceURL(e.target.value)} className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" /> 248 248 + <p className="text-xs text-red-500 dark:text-red-400"> 249 249 + Warning: Less secure. Use an App Password. 250 250 + </p> 251 251 + {/* <input 252 252 + type="text" 253 253 + placeholder="handle.bsky.social" 254 254 + value={user} 255 255 + onChange={(e) => setUser(e.target.value)} 256 256 + className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 257 257 + autoComplete="username" 258 258 + /> 259 259 + <input 260 260 + type="password" 261 261 + placeholder="App Password" 262 262 + value={password} 263 263 + onChange={(e) => setPassword(e.target.value)} 264 264 + className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 265 265 + autoComplete="current-password" 266 266 + /> 267 267 + <input 268 268 + type="text" 269 269 + placeholder="PDS (e.g., bsky.social)" 270 270 + value={serviceURL} 271 271 + onChange={(e) => setServiceURL(e.target.value)} 272 272 + className="px-3 py-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500" 273 273 + /> */} 274 274 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 275 275 + <input 276 276 + type="text" 277 277 + placeholder=" " 278 278 + value={user} 279 279 + onChange={(e) => setUser(e.target.value)} 280 280 + /> 281 281 + <label>AT Handle</label> 282 282 + </div> 283 283 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 284 284 + <input 285 285 + type="text" 286 286 + placeholder=" " 287 287 + value={password} 288 288 + onChange={(e) => setPassword(e.target.value)} 289 289 + /> 290 290 + <label>App Password</label> 291 291 + </div> 292 292 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 293 293 + <input 294 294 + type="text" 295 295 + placeholder=" " 296 296 + value={serviceURL} 297 297 + onChange={(e) => setServiceURL(e.target.value)} 298 298 + /> 299 299 + <label>PDS</label> 300 300 + </div> 208 301 {error && <p className="text-xs text-red-500">{error}</p>} 209 209 - <button type="submit" className="bg-gray-600 hover:bg-gray-700 text-white rounded px-4 py-2 font-medium text-sm transition-colors">Log in</button> 302 302 + <button 303 303 + type="submit" 304 304 + className="bg-gray-600 hover:bg-gray-700 text-white rounded-full px-4 py-2 font-medium text-sm transition-colors" 305 305 + > 306 306 + Log in 307 307 + </button> 210 308 </form> 211 309 ); 212 310 }; 213 311 214 312 // --- Profile Component (now supports a `large` prop for styling) --- 215 215 - export const ProfileThing = ({ agent, large = false }: { agent: Agent | null; large?: boolean }) => { 216 216 - const [profile, setProfile] = useState<any>(null); 313 313 + export const ProfileThing = ({ 314 314 + agent, 315 315 + large = false, 316 316 + }: { 317 317 + agent: Agent | null; 318 318 + large?: boolean; 319 319 + }) => { 320 320 + const did = ((agent as AtpAgent)?.session?.did ?? 321 321 + (agent as AtpAgent)?.assertDid ?? 322 322 + agent?.did) as string | undefined; 323 323 + const { data: identity } = useQueryIdentity(did); 324 324 + const { data: profiledata } = useQueryProfile( 325 325 + `at://${did}/app.bsky.actor.profile/self` 326 326 + ); 327 327 + const profile = profiledata?.value; 217 328 218 218 - useEffect(() => { 219 219 - const fetchUser = async () => { 220 220 - const did = (agent as any)?.session?.did ?? (agent as any)?.assertDid; 221 221 - if (!did) return; 222 222 - try { 223 223 - const res = await agent!.getProfile({ actor: did }); 224 224 - setProfile(res.data); 225 225 - } catch (e) { console.error("Failed to fetch profile", e); } 226 226 - }; 227 227 - if (agent) fetchUser(); 228 228 - }, [agent]); 329 329 + const [imgcdn] = useAtom(imgCDNAtom) 330 330 + 331 331 + function getAvatarUrl(p: typeof profile) { 332 332 + const link = p?.avatar?.ref?.["$link"]; 333 333 + if (!link || !did) return null; 334 334 + return `https://${imgcdn}/img/avatar/plain/${did}/${link}@jpeg`; 335 335 + } 336 336 + 337 337 + if (!profiledata) { 338 338 + return ( 339 339 + // Skeleton loader 340 340 + <div 341 341 + className={`flex items-center gap-2.5 animate-pulse ${large ? "mb-1" : ""}`} 342 342 + > 343 343 + <div 344 344 + className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? "w-10 h-10" : "w-[30px] h-[30px]"}`} 345 345 + /> 346 346 + <div className="flex flex-col gap-2"> 347 347 + <div 348 348 + className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? "h-4 w-28" : "h-3 w-20"}`} 349 349 + /> 350 350 + <div 351 351 + className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? "h-4 w-20" : "h-3 w-16"}`} 352 352 + /> 353 353 + </div> 354 354 + </div> 355 355 + ); 356 356 + } 229 357 230 230 - if (!profile) { 231 231 - return ( // Skeleton loader 232 232 - <div className={`flex items-center gap-2.5 animate-pulse ${large ? 'mb-1' : ''}`}> 233 233 - <div className={`rounded-full bg-gray-300 dark:bg-gray-700 ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} /> 234 234 - <div className="flex flex-col gap-2"> 235 235 - <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-28' : 'h-3 w-20'}`} /> 236 236 - <div className={`bg-gray-300 dark:bg-gray-700 rounded ${large ? 'h-4 w-20' : 'h-3 w-16'}`} /> 237 237 - </div> 238 238 - </div> 239 239 - ); 240 240 - } 241 241 - 242 242 - return ( 243 243 - <div className={`flex flex-row items-center gap-2.5 ${large ? 'mb-1' : ''}`}> 244 244 - <img src={profile?.avatar} alt="avatar" className={`object-cover rounded-full ${large ? 'w-10 h-10' : 'w-[30px] h-[30px]'}`} /> 245 245 - <div className="flex flex-col items-start text-left"> 246 246 - <div className={`font-medium ${large ? 'text-gray-800 dark:text-gray-100 text-md' : 'text-gray-800 dark:text-gray-100 text-sm'}`}>{profile?.displayName}</div> 247 247 - <div className={` ${large ? 'text-gray-500 dark:text-gray-400 text-sm' : 'text-gray-500 dark:text-gray-400 text-xs'}`}>@{profile?.handle}</div> 248 248 - </div> 358 358 + return ( 359 359 + <div 360 360 + className={`flex flex-row items-center gap-2.5 ${large ? "mb-1" : ""}`} 361 361 + > 362 362 + <img 363 363 + src={getAvatarUrl(profile) ?? undefined} 364 364 + alt="avatar" 365 365 + className={`object-cover rounded-full ${large ? "w-10 h-10" : "w-[30px] h-[30px]"}`} 366 366 + /> 367 367 + <div className="flex flex-col items-start text-left"> 368 368 + <div 369 369 + className={`font-medium ${large ? "text-gray-800 dark:text-gray-100 text-md" : "text-gray-800 dark:text-gray-100 text-sm"}`} 370 370 + > 371 371 + {profile?.displayName} 372 372 + </div> 373 373 + <div 374 374 + className={` ${large ? "text-gray-500 dark:text-gray-400 text-sm" : "text-gray-500 dark:text-gray-400 text-xs"}`} 375 375 + > 376 376 + @{identity?.handle} 249 377 </div> 250 250 - ); 251 251 - }; 378 378 + </div> 379 379 + </div> 380 380 + ); 381 381 + };

+6

src/components/Star.tsx

··· 1 1 + import type { SVGProps } from 'react'; 2 2 + import React from 'react'; 3 3 + 4 4 + export function FluentEmojiHighContrastGlowingStar(props: SVGProps<SVGSVGElement>) { 5 5 + return (<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}><g fill="currentColor"><path d="m28.979 17.003l-3.108.214c-.834.06-1.178 1.079-.542 1.608l2.388 1.955c.521.428 1.314.204 1.523-.428l.709-2.127c.219-.632-.292-1.273-.97-1.222M21.75 2.691l-.72 2.9c-.2.78.66 1.41 1.34.98l2.54-1.58c.55-.34.58-1.14.05-1.52l-1.78-1.29a.912.912 0 0 0-1.43.51M6.43 4.995l2.53 1.58c.68.43 1.54-.19 1.35-.98l-.72-2.9a.92.92 0 0 0-1.43-.52l-1.78 1.29c-.53.4-.5 1.19.05 1.53M4.185 20.713l2.29-1.92c.62-.52.29-1.53-.51-1.58l-2.98-.21a.92.92 0 0 0-.94 1.2l.68 2.09c.2.62.97.84 1.46.42m13.61 7.292l-1.12-2.77c-.3-.75-1.36-.75-1.66 0l-1.12 2.77c-.24.6.2 1.26.85 1.26h2.2a.92.92 0 0 0 .85-1.26"></path><path d="m17.565 3.324l1.726 3.72c.326.694.967 1.18 1.717 1.29l4.056.624c1.835.278 2.575 2.53 1.293 3.859L23.268 16a2.28 2.28 0 0 0-.612 1.964l.71 4.374c.307 1.885-1.687 3.293-3.354 2.37l-3.405-1.894a2.25 2.25 0 0 0-2.21 0l-3.404 1.895c-1.668.922-3.661-.486-3.355-2.37l.71-4.375A2.28 2.28 0 0 0 7.736 16l-3.088-3.184c-1.293-1.34-.543-3.581 1.293-3.859l4.055-.625a2.3 2.3 0 0 0 1.717-1.29l1.727-3.719c.819-1.765 3.306-1.765 4.124 0"></path></g></svg>); 6 6 + }

+475 -230

src/components/UniversalPostRenderer.tsx

··· 1 1 import { useNavigate } from "@tanstack/react-router"; 2 2 + import DOMPurify from "dompurify"; 2 3 import { useAtom } from "jotai"; 4 4 + import { DropdownMenu } from "radix-ui"; 5 5 + import { HoverCard } from "radix-ui"; 3 6 import * as React from "react"; 4 7 import { type SVGProps } from "react"; 5 5 - import { createPortal } from "react-dom"; 6 8 7 7 - import { ProfilePostComponent } from "~/routes/profile.$did/post.$rkey"; 8 8 - import { likedPostsAtom } from "~/utils/atoms"; 9 9 + import { 10 10 + composerAtom, 11 11 + constellationURLAtom, 12 12 + imgCDNAtom, 13 13 + likedPostsAtom, 14 14 + } from "~/utils/atoms"; 9 15 import { useHydratedEmbed } from "~/utils/useHydrated"; 10 16 import { 11 17 useQueryConstellation, 12 18 useQueryIdentity, 13 19 useQueryPost, 14 20 useQueryProfile, 21 21 + yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks, 15 22 } from "~/utils/useQuery"; 16 23 17 24 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> { ··· 34 41 ref?: React.Ref<HTMLDivElement>; 35 42 dataIndexPropPass?: number; 36 43 nopics?: boolean; 44 44 + lightboxCallback?: (d: LightboxProps) => void; 45 45 + maxReplies?: number; 46 46 + isQuote?: boolean; 37 47 } 38 48 39 49 // export async function cachedGetRecord({ ··· 142 152 ref, 143 153 dataIndexPropPass, 144 154 nopics, 155 155 + lightboxCallback, 156 156 + maxReplies, 157 157 + isQuote, 145 158 }: UniversalPostRendererATURILoaderProps) { 159 159 + // todo remove this once tree rendering is implemented, use a prop like isTree 160 160 + const TEMPLINEAR = true; 146 161 // /*mass comment*/ console.log("atUri", atUri); 147 162 //const { get, set } = usePersistentStore(); 148 163 //const [record, setRecord] = React.useState<any>(null); ··· 387 402 ); 388 403 }, [links]); 389 404 405 405 + // const { data: repliesData } = useQueryConstellation({ 406 406 + // method: "/links", 407 407 + // target: atUri, 408 408 + // collection: "app.bsky.feed.post", 409 409 + // path: ".reply.parent.uri", 410 410 + // }); 411 411 + 412 412 + const [constellationurl] = useAtom(constellationURLAtom); 413 413 + 414 414 + const infinitequeryresults = useInfiniteQuery({ 415 415 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 416 416 + { 417 417 + constellation: constellationurl, 418 418 + method: "/links", 419 419 + target: atUri, 420 420 + collection: "app.bsky.feed.post", 421 421 + path: ".reply.parent.uri", 422 422 + } 423 423 + ), 424 424 + enabled: !!atUri && !!maxReplies && !isQuote, 425 425 + }); 426 426 + 427 427 + const { 428 428 + data: repliesData, 429 429 + // fetchNextPage, 430 430 + // hasNextPage, 431 431 + // isFetchingNextPage, 432 432 + } = infinitequeryresults; 433 433 + 434 434 + // auto-fetch all pages 435 435 + useEffect(() => { 436 436 + if (!maxReplies || isQuote || TEMPLINEAR) return; 437 437 + if ( 438 438 + infinitequeryresults.hasNextPage && 439 439 + !infinitequeryresults.isFetchingNextPage 440 440 + ) { 441 441 + console.log("Fetching the next page..."); 442 442 + infinitequeryresults.fetchNextPage(); 443 443 + } 444 444 + }, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]); 445 445 + 446 446 + const replyAturis = repliesData 447 447 + ? repliesData.pages.flatMap((page) => 448 448 + page 449 449 + ? page.linking_records.map((record) => { 450 450 + const aturi = `at://${record.did}/${record.collection}/${record.rkey}`; 451 451 + return aturi; 452 452 + }) 453 453 + : [] 454 454 + ) 455 455 + : []; 456 456 + 457 457 + //const [oldestOpsReply, setOldestOpsReply] = useState<string | undefined>(undefined); 458 458 + 459 459 + const { oldestOpsReply, oldestOpsReplyElseNewestNonOpsReply } = (() => { 460 460 + if (isQuote || !replyAturis || replyAturis.length === 0 || !maxReplies) 461 461 + return { 462 462 + oldestOpsReply: undefined, 463 463 + oldestOpsReplyElseNewestNonOpsReply: undefined, 464 464 + }; 465 465 + 466 466 + const opdid = new AtUri( 467 467 + //postQuery?.value.reply?.root.uri ?? postQuery?.uri ?? atUri 468 468 + atUri 469 469 + ).host; 470 470 + 471 471 + const opReplies = replyAturis.filter( 472 472 + (aturi) => new AtUri(aturi).host === opdid 473 473 + ); 474 474 + 475 475 + if (opReplies.length > 0) { 476 476 + const opreply = opReplies[opReplies.length - 1]; 477 477 + //setOldestOpsReply(opreply); 478 478 + return { 479 479 + oldestOpsReply: opreply, 480 480 + oldestOpsReplyElseNewestNonOpsReply: opreply, 481 481 + }; 482 482 + } else { 483 483 + return { 484 484 + oldestOpsReply: undefined, 485 485 + oldestOpsReplyElseNewestNonOpsReply: replyAturis[0], 486 486 + }; 487 487 + } 488 488 + })(); 489 489 + 390 490 // const navigateToProfile = (e: React.MouseEvent) => { 391 491 // e.stopPropagation(); 392 492 // if (resolved?.did) { ··· 402 502 } 403 503 404 504 return ( 405 405 - <UniversalPostRendererRawRecordShim 406 406 - detailed={detailed} 407 407 - postRecord={postQuery} 408 408 - profileRecord={opProfile} 409 409 - aturi={atUri} 410 410 - resolved={resolved} 411 411 - likesCount={likes} 412 412 - repostsCount={reposts} 413 413 - repliesCount={replies} 414 414 - bottomReplyLine={bottomReplyLine} 415 415 - topReplyLine={topReplyLine} 416 416 - bottomBorder={bottomBorder} 417 417 - feedviewpost={feedviewpost} 418 418 - repostedby={repostedby} 419 419 - style={style} 420 420 - ref={ref} 421 421 - dataIndexPropPass={dataIndexPropPass} 422 422 - nopics={nopics} 423 423 - /> 505 505 + <> 506 506 + {/* <span>uprrs {maxReplies} {!!maxReplies&&!!oldestOpsReplyElseNewestNonOpsReply ? "true" : "false"}</span> */} 507 507 + <UniversalPostRendererRawRecordShim 508 508 + detailed={detailed} 509 509 + postRecord={postQuery} 510 510 + profileRecord={opProfile} 511 511 + aturi={atUri} 512 512 + resolved={resolved} 513 513 + likesCount={likes} 514 514 + repostsCount={reposts} 515 515 + repliesCount={replies} 516 516 + bottomReplyLine={ 517 517 + maxReplies && oldestOpsReplyElseNewestNonOpsReply 518 518 + ? true 519 519 + : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 520 520 + ? false 521 521 + : (maxReplies === 0 && (!replies || (!!replies && replies === 0))) ? false : bottomReplyLine 522 522 + } 523 523 + topReplyLine={topReplyLine} 524 524 + //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} 525 525 + bottomBorder={ 526 526 + maxReplies && oldestOpsReplyElseNewestNonOpsReply 527 527 + ? false 528 528 + : maxReplies === 0 529 529 + ? false 530 530 + : bottomBorder 531 531 + } 532 532 + feedviewpost={feedviewpost} 533 533 + repostedby={repostedby} 534 534 + //style={{...style, background: oldestOpsReply === atUri ? "Red" : undefined}} 535 535 + style={style} 536 536 + ref={ref} 537 537 + dataIndexPropPass={dataIndexPropPass} 538 538 + nopics={nopics} 539 539 + lightboxCallback={lightboxCallback} 540 540 + maxReplies={maxReplies} 541 541 + isQuote={isQuote} 542 542 + /> 543 543 + <> 544 544 + {(maxReplies && maxReplies === 0 && replies && replies > 0) ? ( 545 545 + <> 546 546 + {/* <div>hello</div> */} 547 547 + <MoreReplies atUri={atUri} /> 548 548 + </> 549 549 + ) : (<></>)} 550 550 + </> 551 551 + {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 552 552 + <> 553 553 + {/* <span>hello {maxReplies}</span> */} 554 554 + <UniversalPostRendererATURILoader 555 555 + //detailed={detailed} 556 556 + atUri={oldestOpsReplyElseNewestNonOpsReply} 557 557 + bottomReplyLine={(maxReplies ?? 0) > 0} 558 558 + topReplyLine={ 559 559 + (!!(maxReplies && maxReplies - 1 === 0) && 560 560 + !!(replies && replies > 0)) || 561 561 + !!((maxReplies ?? 0) > 1) 562 562 + } 563 563 + bottomBorder={bottomBorder} 564 564 + feedviewpost={feedviewpost} 565 565 + repostedby={repostedby} 566 566 + style={style} 567 567 + ref={ref} 568 568 + dataIndexPropPass={dataIndexPropPass} 569 569 + nopics={nopics} 570 570 + lightboxCallback={lightboxCallback} 571 571 + maxReplies={ 572 572 + maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 573 573 + } 574 574 + /> 575 575 + </> 576 576 + )} 577 577 + </> 424 578 ); 425 579 } 426 580 427 427 - function getAvatarUrl(opProfile: any, did: string) { 581 581 + function MoreReplies({ atUri }: { atUri: string }) { 582 582 + const navigate = useNavigate(); 583 583 + const aturio = new AtUri(atUri); 584 584 + return ( 585 585 + <div 586 586 + onClick={() => 587 587 + navigate({ 588 588 + to: "/profile/$did/post/$rkey", 589 589 + params: { did: aturio.host, rkey: aturio.rkey }, 590 590 + }) 591 591 + } 592 592 + className="border-b border-gray-300 dark:border-gray-800 flex flex-row px-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors" 593 593 + > 594 594 + <div className="w-[42px] h-12 flex flex-col items-center justify-center"> 595 595 + <div 596 596 + style={{ 597 597 + width: 2, 598 598 + height: "100%", 599 599 + backgroundImage: 600 600 + "repeating-linear-gradient(to bottom, var(--color-gray-500) 0, var(--color-gray-500) 4px, transparent 4px, transparent 8px)", 601 601 + opacity: 0.5, 602 602 + }} 603 603 + className="dark:bg-[repeating-linear-gradient(to_bottom,var(--color-gray-500)_0,var(--color-gray-400)_4px,transparent_4px,transparent_8px)]" 604 604 + //className="border-gray-400 dark:border-gray-500" 605 605 + /> 606 606 + </div> 607 607 + 608 608 + <div className="flex items-center pl-3 text-sm text-gray-500 dark:text-gray-400 select-none"> 609 609 + More Replies 610 610 + </div> 611 611 + </div> 612 612 + ); 613 613 + } 614 614 + 615 615 + function getAvatarUrl(opProfile: any, did: string, cdn: string) { 428 616 const link = opProfile?.value?.avatar?.ref?.["$link"]; 429 617 if (!link) return null; 430 430 - return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`; 618 618 + return `https://${cdn}/img/avatar/plain/${did}/${link}@jpeg`; 431 619 } 432 620 433 621 export function UniversalPostRendererRawRecordShim({ ··· 448 636 ref, 449 637 dataIndexPropPass, 450 638 nopics, 639 639 + lightboxCallback, 640 640 + maxReplies, 641 641 + isQuote, 451 642 }: { 452 643 postRecord: any; 453 644 profileRecord: any; ··· 466 657 ref?: React.Ref<HTMLDivElement>; 467 658 dataIndexPropPass?: number; 468 659 nopics?: boolean; 660 660 + lightboxCallback?: (d: LightboxProps) => void; 661 661 + maxReplies?: number; 662 662 + isQuote?: boolean; 469 663 }) { 470 664 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 471 665 const navigate = useNavigate(); ··· 542 736 error: embedError, 543 737 } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did); 544 738 739 739 + const [imgcdn] = useAtom(imgCDNAtom); 740 740 + 545 741 const parsedaturi = new AtUri(aturi); //parseAtUri(aturi); 546 742 743 743 + const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>( 744 744 + () => ({ 745 745 + did: resolved?.did || "", 746 746 + handle: resolved?.handle || "", 747 747 + displayName: profileRecord?.value?.displayName || "", 748 748 + avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "", 749 749 + viewer: undefined, 750 750 + labels: profileRecord?.labels || undefined, 751 751 + verification: undefined, 752 752 + }), 753 753 + [imgcdn, profileRecord, resolved?.did, resolved?.handle] 754 754 + ); 755 755 + 756 756 + const fakeprofileviewdetailed = 757 757 + React.useMemo<AppBskyActorDefs.ProfileViewDetailed>( 758 758 + () => ({ 759 759 + ...fakeprofileviewbasic, 760 760 + $type: "app.bsky.actor.defs#profileViewDetailed", 761 761 + description: profileRecord?.value?.description || undefined, 762 762 + }), 763 763 + [fakeprofileviewbasic, profileRecord?.value?.description] 764 764 + ); 765 765 + 547 766 const fakepost = React.useMemo<AppBskyFeedDefs.PostView>( 548 767 () => ({ 549 768 $type: "app.bsky.feed.defs#postView", 550 769 uri: aturi, 551 770 cid: postRecord?.cid || "", 552 552 - author: { 553 553 - did: resolved?.did || "", 554 554 - handle: resolved?.handle || "", 555 555 - displayName: profileRecord?.value?.displayName || "", 556 556 - avatar: getAvatarUrl(profileRecord, resolved?.did) || "", 557 557 - viewer: undefined, 558 558 - labels: profileRecord?.labels || undefined, 559 559 - verification: undefined, 560 560 - }, 771 771 + author: fakeprofileviewbasic, 561 772 record: postRecord?.value || {}, 562 773 embed: hydratedEmbed ?? undefined, 563 774 replyCount: repliesCount ?? 0, ··· 574 785 postRecord?.cid, 575 786 postRecord?.value, 576 787 postRecord?.labels, 577 577 - resolved?.did, 578 578 - resolved?.handle, 579 579 - profileRecord, 788 788 + fakeprofileviewbasic, 580 789 hydratedEmbed, 581 790 repliesCount, 582 791 repostsCount, ··· 653 862 } 654 863 }} 655 864 post={fakepost} 865 865 + uprrrsauthor={fakeprofileviewdetailed} 656 866 salt={aturi} 657 867 bottomReplyLine={bottomReplyLine} 658 868 topReplyLine={topReplyLine} ··· 664 874 ref={ref} 665 875 dataIndexPropPass={dataIndexPropPass} 666 876 nopics={nopics} 877 877 + lightboxCallback={lightboxCallback} 878 878 + maxReplies={maxReplies} 879 879 + isQuote={isQuote} 667 880 /> 668 881 </> 669 882 ); ··· 702 915 {...props} 703 916 > 704 917 <path 705 705 - fill="oklch(0.704 0.05 28)" 918 918 + fill="var(--color-gray-400)" 706 919 d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z" 707 920 ></path> 708 921 </svg> ··· 719 932 {...props} 720 933 > 721 934 <path 722 722 - fill="oklch(0.704 0.05 28)" 935 935 + fill="var(--color-gray-400)" 723 936 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 724 937 ></path> 725 938 </svg> ··· 770 983 {...props} 771 984 > 772 985 <path 773 773 - fill="oklch(0.704 0.05 28)" 986 986 + fill="var(--color-gray-400)" 774 987 d="m12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3" 775 988 ></path> 776 989 </svg> ··· 787 1000 {...props} 788 1001 > 789 1002 <path 790 790 - fill="oklch(0.704 0.05 28)" 1003 1003 + fill="var(--color-gray-400)" 791 1004 d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3a3 3 0 0 0-3-3a3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66c0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08" 792 1005 ></path> 793 1006 </svg> ··· 804 1017 {...props} 805 1018 > 806 1019 <path 807 807 - fill="oklch(0.704 0.05 28)" 1020 1020 + fill="var(--color-gray-400)" 808 1021 d="M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2" 809 1022 ></path> 810 1023 </svg> ··· 821 1034 {...props} 822 1035 > 823 1036 <path 824 824 - fill="oklch(0.704 0.05 28)" 1037 1037 + fill="var(--color-gray-400)" 825 1038 d="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" 826 1039 ></path> 827 1040 </svg> ··· 855 1068 {...props} 856 1069 > 857 1070 <path 858 858 - fill="oklch(0.704 0.05 28)" 1071 1071 + fill="var(--color-gray-400)" 859 1072 d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11" 860 1073 ></path> 861 1074 </svg> ··· 909 1122 {...props} 910 1123 > 911 1124 <path 912 912 - fill="oklch(0.704 0.05 28)" 1125 1125 + fill="var(--color-gray-400)" 913 1126 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 914 1127 ></path> 915 1128 </svg> ··· 926 1139 {...props} 927 1140 > 928 1141 <path 929 929 - fill="oklch(0.704 0.05 28)" 1142 1142 + fill="var(--color-gray-400)" 930 1143 d="M6 5.75L10.25 10H7v6h6.5l2 2H7a2 2 0 0 1-2-2v-6H1.75zm12 12.5L13.75 14H17V8h-6.5l-2-2H17a2 2 0 0 1 2 2v6h3.25z" 931 1144 ></path> 932 1145 </svg> ··· 954 1167 //import Masonry from "@mui/lab/Masonry"; 955 1168 import { 956 1169 type $Typed, 1170 1170 + AppBskyActorDefs, 957 1171 AppBskyEmbedDefs, 958 1172 AppBskyEmbedExternal, 959 1173 AppBskyEmbedImages, ··· 977 1191 PostView, 978 1192 //ThreadViewPost, 979 1193 } from "@atproto/api/dist/client/types/app/bsky/feed/defs"; 1194 1194 + import { useInfiniteQuery } from "@tanstack/react-query"; 980 1195 import { useEffect, useRef, useState } from "react"; 981 1196 import ReactPlayer from "react-player"; 982 1197 983 1198 import defaultpfp from "~/../public/favicon.png"; 984 1199 import { useAuth } from "~/providers/UnifiedAuthProvider"; 1200 1200 + import { FollowButton, Mutual } from "~/routes/profile.$did"; 1201 1201 + import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 985 1202 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 986 1203 // import type { 987 1204 // ViewRecord, ··· 1089 1306 1090 1307 function UniversalPostRenderer({ 1091 1308 post, 1309 1309 + uprrrsauthor, 1092 1310 //setMainItem, 1093 1311 //isMainItem, 1094 1312 onPostClick, ··· 1109 1327 ref, 1110 1328 dataIndexPropPass, 1111 1329 nopics, 1330 1330 + lightboxCallback, 1331 1331 + maxReplies, 1112 1332 }: { 1113 1333 post: PostView; 1334 1334 + uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed; 1114 1335 // optional for now because i havent ported every use to this yet 1115 1336 // setMainItem?: React.Dispatch< 1116 1337 // React.SetStateAction<AppBskyFeedDefs.FeedViewPost> ··· 1132 1353 ref?: React.Ref<HTMLDivElement>; 1133 1354 dataIndexPropPass?: number; 1134 1355 nopics?: boolean; 1356 1356 + lightboxCallback?: (d: LightboxProps) => void; 1357 1357 + maxReplies?: number; 1135 1358 }) { 1136 1359 const parsed = new AtUri(post.uri); 1137 1360 const navigate = useNavigate(); ··· 1142 1365 const [hasLiked, setHasLiked] = useState<boolean>( 1143 1366 post.uri in likedPosts || post.viewer?.like ? true : false 1144 1367 ); 1368 1368 + const [, setComposerPost] = useAtom(composerAtom); 1145 1369 const { agent } = useAuth(); 1146 1370 const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); 1147 1371 const [retweetUri, setRetweetUri] = useState<string | undefined>( ··· 1202 1426 : undefined; 1203 1427 1204 1428 const emergencySalt = randomString(); 1429 1429 + const fedi = (post.record as { bridgyOriginalText?: string }) 1430 1430 + .bridgyOriginalText; 1205 1431 1206 1432 /* fuck you */ 1207 1433 const isMainItem = false; ··· 1236 1462 paddingLeft: isQuote ? 12 : 16, 1237 1463 paddingRight: isQuote ? 12 : 16, 1238 1464 //paddingTop: 16, 1239 1239 - paddingTop: isRepost ? 10 : isQuote ? 12 : 16, 1465 1465 + paddingTop: isRepost ? 10 : isQuote ? 12 : topReplyLine ? 8 : 16, 1240 1466 //paddingBottom: bottomReplyLine ? 0 : 16, 1241 1467 paddingBottom: 0, 1242 1468 fontFamily: "system-ui, sans-serif", ··· 1245 1471 // dont cursor: "pointer", 1246 1472 borderBottomWidth: bottomBorder ? (isQuote ? 0 : 1) : 0, 1247 1473 }} 1248 1248 - className="border-gray-300 dark:border-gray-600" 1474 1474 + className="border-gray-300 dark:border-gray-800" 1249 1475 > 1250 1476 {isRepost && ( 1251 1477 <div ··· 1277 1503 //left: 16 + (42 / 2), 1278 1504 width: 2, 1279 1505 //height: "100%", 1280 1280 - height: isRepost ? "calc(16px + 1rem - 6px)" : 16 - 6, 1506 1506 + height: isRepost 1507 1507 + ? "calc(16px + 1rem - 6px)" 1508 1508 + : topReplyLine 1509 1509 + ? 8 - 6 1510 1510 + : 16 - 6, 1281 1511 // background: theme.textSecondary, 1282 1512 //opacity: 0.5, 1283 1513 // no flex here ··· 1285 1515 className="bg-gray-500 dark:bg-gray-400" 1286 1516 /> 1287 1517 )} 1288 1288 - <div 1289 1289 - style={{ 1290 1290 - position: "absolute", 1291 1291 - //top: isRepost ? "calc(16px + 1rem)" : 16, 1292 1292 - //left: 16, 1293 1293 - zIndex: 1, 1294 1294 - top: isRepost ? "calc(16px + 1rem)" : isQuote ? 12 : 16, 1295 1295 - left: isQuote ? 12 : 16, 1296 1296 - }} 1297 1297 - onClick={onProfileClick} 1298 1298 - > 1299 1299 - <img 1300 1300 - src={post.author.avatar || defaultpfp} 1301 1301 - alt="avatar" 1302 1302 - // transition={{ 1303 1303 - // type: "spring", 1304 1304 - // stiffness: 260, 1305 1305 - // damping: 20, 1306 1306 - // }} 1307 1307 - style={{ 1308 1308 - borderRadius: "50%", 1309 1309 - marginRight: 12, 1310 1310 - objectFit: "cover", 1311 1311 - //background: theme.border, 1312 1312 - //border: `1px solid ${theme.border}`, 1313 1313 - width: isQuote ? 16 : 42, 1314 1314 - height: isQuote ? 16 : 42, 1315 1315 - }} 1316 1316 - className="border border-gray-300 dark:border-gray-600 bg-gray-300 dark:bg-gray-600" 1317 1317 - /> 1318 1318 - </div> 1518 1518 + <HoverCard.Root> 1519 1519 + <HoverCard.Trigger asChild> 1520 1520 + <div 1521 1521 + className={`absolute`} 1522 1522 + style={{ 1523 1523 + top: isRepost 1524 1524 + ? "calc(16px + 1rem)" 1525 1525 + : isQuote 1526 1526 + ? 12 1527 1527 + : topReplyLine 1528 1528 + ? 8 1529 1529 + : 16, 1530 1530 + left: isQuote ? 12 : 16, 1531 1531 + }} 1532 1532 + onClick={onProfileClick} 1533 1533 + > 1534 1534 + <img 1535 1535 + src={post.author.avatar || defaultpfp} 1536 1536 + alt="avatar" 1537 1537 + className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`} 1538 1538 + style={{ 1539 1539 + width: isQuote ? 16 : 42, 1540 1540 + height: isQuote ? 16 : 42, 1541 1541 + }} 1542 1542 + /> 1543 1543 + </div> 1544 1544 + </HoverCard.Trigger> 1545 1545 + <HoverCard.Portal> 1546 1546 + <HoverCard.Content 1547 1547 + className="rounded-md p-4 w-72 bg-gray-50 dark:bg-gray-900 shadow-lg border border-gray-300 dark:border-gray-800 animate-slide-fade z-50" 1548 1548 + side={"bottom"} 1549 1549 + sideOffset={5} 1550 1550 + onClick={onProfileClick} 1551 1551 + > 1552 1552 + <div className="flex flex-col gap-2"> 1553 1553 + <div className="flex flex-row"> 1554 1554 + <img 1555 1555 + src={post.author.avatar || defaultpfp} 1556 1556 + alt="avatar" 1557 1557 + className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1558 1558 + /> 1559 1559 + <div className=" flex-1 flex flex-row align-middle justify-end"> 1560 1560 + <FollowButton targetdidorhandle={post.author.did} /> 1561 1561 + </div> 1562 1562 + </div> 1563 1563 + <div className="flex flex-col gap-3"> 1564 1564 + <div> 1565 1565 + <div className="text-gray-900 dark:text-gray-100 font-medium text-md"> 1566 1566 + {post.author.displayName || post.author.handle}{" "} 1567 1567 + </div> 1568 1568 + <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1"> 1569 1569 + <Mutual targetdidorhandle={post.author.did} />@{post.author.handle}{" "} 1570 1570 + </div> 1571 1571 + </div> 1572 1572 + {uprrrsauthor?.description && ( 1573 1573 + <div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3"> 1574 1574 + {uprrrsauthor.description} 1575 1575 + </div> 1576 1576 + )} 1577 1577 + {/* <div className="flex gap-4"> 1578 1578 + <div className="flex gap-1"> 1579 1579 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1580 1580 + 0 1581 1581 + </div> 1582 1582 + <div className="text-gray-500 dark:text-gray-400"> 1583 1583 + Following 1584 1584 + </div> 1585 1585 + </div> 1586 1586 + <div className="flex gap-1"> 1587 1587 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1588 1588 + 2,900 1589 1589 + </div> 1590 1590 + <div className="text-gray-500 dark:text-gray-400"> 1591 1591 + Followers 1592 1592 + </div> 1593 1593 + </div> 1594 1594 + </div> */} 1595 1595 + </div> 1596 1596 + </div> 1597 1597 + 1598 1598 + {/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */} 1599 1599 + </HoverCard.Content> 1600 1600 + </HoverCard.Portal> 1601 1601 + </HoverCard.Root> 1602 1602 + 1319 1603 <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}> 1320 1604 <div 1321 1605 style={{ ··· 1329 1613 }} 1330 1614 > 1331 1615 {/* dummy for later use */} 1332 1332 - <div style={{ width: 42, height: 42 + 8, minHeight: 42 + 8 }} /> 1616 1616 + <div style={{ width: 42, height: 42 + 6, minHeight: 42 + 6 }} /> 1333 1617 {/* reply line !!!! bottomReplyLine */} 1334 1618 {bottomReplyLine && ( 1335 1619 <div ··· 1484 1768 }} 1485 1769 className="text-gray-900 dark:text-gray-100" 1486 1770 > 1487 1487 - {renderTextWithFacets({ 1488 1488 - text: (post.record as { text?: string }).text ?? "", 1489 1489 - facets: (post.record.facets as Facet[]) ?? [], 1490 1490 - navigate: navigate, 1491 1491 - })} 1492 1492 - {} 1771 1771 + {fedi ? ( 1772 1772 + <> 1773 1773 + <span 1774 1774 + className="dangerousFediContent" 1775 1775 + dangerouslySetInnerHTML={{ 1776 1776 + __html: DOMPurify.sanitize(fedi), 1777 1777 + }} 1778 1778 + /> 1779 1779 + </> 1780 1780 + ) : ( 1781 1781 + <> 1782 1782 + {renderTextWithFacets({ 1783 1783 + text: (post.record as { text?: string }).text ?? "", 1784 1784 + facets: (post.record.facets as Facet[]) ?? [], 1785 1785 + navigate: navigate, 1786 1786 + })} 1787 1787 + </> 1788 1788 + )} 1493 1789 </div> 1494 1790 {post.embed && depth < 1 ? ( 1495 1791 <PostEmbeds ··· 1500 1796 navigate={navigate} 1501 1797 postid={{ did: post.author.did, rkey: parsed.rkey }} 1502 1798 nopics={nopics} 1799 1799 + lightboxCallback={lightboxCallback} 1503 1800 /> 1504 1801 ) : null} 1505 1802 {post.embed && depth > 0 && ( ··· 1507 1804 hydrate embeds this deep but the connection here is implicit 1508 1805 todo: idk make this a real part of the embed shim so its not implicit */ 1509 1806 <> 1510 1510 - <div className="border-gray-300 dark:border-gray-600 p-3 rounded-xl border italic text-gray-400 text-[14px]"> 1807 1807 + <div className="border-gray-300 dark:border-gray-800 p-3 rounded-xl border italic text-gray-400 text-[14px]"> 1511 1808 (there is an embed here thats too deep to render) 1512 1809 </div> 1513 1810 </> ··· 1530 1827 borderBottomWidth: 1, 1531 1828 marginBottom: 8, 1532 1829 }} // important for height animation 1533 1533 - className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700" 1830 1830 + className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-800 was7" 1534 1831 > 1535 1832 {fullDateTimeFormat(post.indexedAt)} 1536 1833 </div> ··· 1549 1846 }} 1550 1847 className="text-gray-500 dark:text-gray-400" 1551 1848 > 1552 1552 - <span style={btnstyle}> 1553 1553 - <MdiCommentOutline /> 1554 1554 - {post.replyCount} 1555 1555 - </span> 1556 1849 <HitSlopButton 1557 1850 onClick={() => { 1558 1558 - repostOrUnrepostPost(); 1851 1851 + setComposerPost({ kind: "reply", parent: post.uri }); 1559 1852 }} 1560 1853 style={{ 1561 1854 ...btnstyle, 1562 1562 - ...(hasRetweeted ? { color: "#5CEFAA" } : {}), 1563 1855 }} 1564 1856 > 1565 1565 - {hasRetweeted ? <MdiRepeatGreen /> : <MdiRepeat />} 1566 1566 - {(post.repostCount || 0) + (hasRetweeted ? 1 : 0)} 1857 1857 + <MdiCommentOutline /> 1858 1858 + {post.replyCount} 1567 1859 </HitSlopButton> 1860 1860 + <DropdownMenu.Root modal={false}> 1861 1861 + <DropdownMenu.Trigger asChild> 1862 1862 + <div 1863 1863 + style={{ 1864 1864 + ...btnstyle, 1865 1865 + ...(hasRetweeted ? { color: "#5CEFAA" } : {}), 1866 1866 + }} 1867 1867 + aria-label="Repost or quote post" 1868 1868 + > 1869 1869 + {hasRetweeted ? <MdiRepeatGreen /> : <MdiRepeat />} 1870 1870 + {post.repostCount ?? 0} 1871 1871 + </div> 1872 1872 + </DropdownMenu.Trigger> 1873 1873 + 1874 1874 + <DropdownMenu.Portal> 1875 1875 + <DropdownMenu.Content 1876 1876 + align="start" 1877 1877 + sideOffset={5} 1878 1878 + className="bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-32 z-50 overflow-hidden" 1879 1879 + > 1880 1880 + <DropdownMenu.Item 1881 1881 + onSelect={repostOrUnrepostPost} 1882 1882 + className="px-3 py-2 text-sm flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700" 1883 1883 + > 1884 1884 + <MdiRepeat 1885 1885 + className={hasRetweeted ? "text-green-400" : ""} 1886 1886 + /> 1887 1887 + <span>{hasRetweeted ? "Undo Repost" : "Repost"}</span> 1888 1888 + </DropdownMenu.Item> 1889 1889 + 1890 1890 + <DropdownMenu.Item 1891 1891 + onSelect={() => { 1892 1892 + setComposerPost({ 1893 1893 + kind: "quote", 1894 1894 + subject: post.uri, 1895 1895 + }); 1896 1896 + }} 1897 1897 + className="px-3 py-2 text-sm flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700" 1898 1898 + > 1899 1899 + {/* You might want a specific quote icon here */} 1900 1900 + <MdiCommentOutline /> 1901 1901 + <span>Quote</span> 1902 1902 + </DropdownMenu.Item> 1903 1903 + </DropdownMenu.Content> 1904 1904 + </DropdownMenu.Portal> 1905 1905 + </DropdownMenu.Root> 1568 1906 <HitSlopButton 1569 1907 onClick={() => { 1570 1908 likeOrUnlikePost(); ··· 1706 2044 navigate, 1707 2045 postid, 1708 2046 nopics, 2047 2047 + lightboxCallback, 1709 2048 }: { 1710 2049 embed?: Embed; 1711 2050 moderation?: ModerationDecision; ··· 1716 2055 navigate: (_: any) => void; 1717 2056 postid?: { did: string; rkey: string }; 1718 2057 nopics?: boolean; 2058 2058 + lightboxCallback?: (d: LightboxProps) => void; 1719 2059 }) { 1720 1720 - const [lightboxIndex, setLightboxIndex] = useState<number | null>(null); 2060 2060 + //const [lightboxIndex, setLightboxIndex] = useState<number | null>(null); 2061 2061 + function setLightboxIndex(number: number) { 2062 2062 + navigate({ 2063 2063 + to: "/profile/$did/post/$rkey/image/$i", 2064 2064 + params: { 2065 2065 + did: postid?.did, 2066 2066 + rkey: postid?.rkey, 2067 2067 + i: number.toString(), 2068 2068 + }, 2069 2069 + }); 2070 2070 + } 1721 2071 if ( 1722 2072 AppBskyEmbedRecordWithMedia.isView(embed) && 1723 2073 AppBskyEmbedRecord.isViewRecord(embed.record.record) && ··· 1753 2103 navigate={navigate} 1754 2104 postid={postid} 1755 2105 nopics={nopics} 2106 2106 + lightboxCallback={lightboxCallback} 1756 2107 /> 1757 2108 {/* padding empty div of 8px height */} 1758 2109 <div style={{ height: 12 }} /> ··· 1766 2117 //boxShadow: theme.cardShadow, 1767 2118 overflow: "hidden", 1768 2119 }} 1769 1769 - className="shadow border border-gray-200 dark:border-gray-700" 2120 2120 + className="shadow border border-gray-200 dark:border-gray-800 was7" 1770 2121 > 1771 2122 <UniversalPostRenderer 1772 2123 post={post} ··· 1883 2234 //boxShadow: theme.cardShadow, 1884 2235 overflow: "hidden", 1885 2236 }} 1886 1886 - className="shadow border border-gray-200 dark:border-gray-700" 2237 2237 + className="shadow border border-gray-200 dark:border-gray-800 was7" 1887 2238 > 1888 2239 <UniversalPostRenderer 1889 2240 post={post} ··· 1920 2271 1921 2272 // image embed 1922 2273 // = 1923 1923 - if (AppBskyEmbedImages.isView(embed) && !nopics) { 2274 2274 + if (AppBskyEmbedImages.isView(embed)) { 1924 2275 const { images } = embed; 1925 2276 1926 2277 const lightboxImages = images.map((img) => ({ 1927 2278 src: img.fullsize, 1928 2279 alt: img.alt, 1929 2280 })); 2281 2281 + console.log("rendering images"); 2282 2282 + if (lightboxCallback) { 2283 2283 + lightboxCallback({ images: lightboxImages }); 2284 2284 + console.log("rendering images"); 2285 2285 + } 2286 2286 + 2287 2287 + if (nopics) return; 1930 2288 1931 2289 if (images.length > 0) { 1932 2290 // const items = embed.images.map(img => ({ ··· 1956 2314 //border: `1px solid ${theme.border}`, 1957 2315 overflow: "hidden", 1958 2316 }} 1959 1959 - className="border border-gray-200 dark:border-gray-700 bg-gray-200 dark:bg-gray-900" 2317 2317 + className="border border-gray-200 dark:border-gray-800 was7 bg-gray-200 dark:bg-gray-900" 1960 2318 > 1961 1961 - {lightboxIndex !== null && ( 2319 2319 + {/* {lightboxIndex !== null && ( 1962 2320 <Lightbox 1963 2321 images={lightboxImages} 1964 2322 index={lightboxIndex} ··· 1966 2324 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 1967 2325 post={postid} 1968 2326 /> 1969 1969 - )} 2327 2327 + )} */} 1970 2328 <img 1971 2329 src={image.fullsize} 1972 2330 alt={image.alt} ··· 1997 2355 overflow: "hidden", 1998 2356 //border: `1px solid ${theme.border}`, 1999 2357 }} 2000 2000 - className="border border-gray-200 dark:border-gray-700" 2358 2358 + className="border border-gray-200 dark:border-gray-800 was7" 2001 2359 > 2002 2002 - {lightboxIndex !== null && ( 2360 2360 + {/* {lightboxIndex !== null && ( 2003 2361 <Lightbox 2004 2362 images={lightboxImages} 2005 2363 index={lightboxIndex} ··· 2007 2365 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2008 2366 post={postid} 2009 2367 /> 2010 2010 - )} 2368 2368 + )} */} 2011 2369 {images.map((img, i) => ( 2012 2370 <div 2013 2371 key={i} ··· 2047 2405 //border: `1px solid ${theme.border}`, 2048 2406 // height: 240, // fixed height for cropping 2049 2407 }} 2050 2050 - className="border border-gray-200 dark:border-gray-700" 2408 2408 + className="border border-gray-200 dark:border-gray-800 was7" 2051 2409 > 2052 2052 - {lightboxIndex !== null && ( 2410 2410 + {/* {lightboxIndex !== null && ( 2053 2411 <Lightbox 2054 2412 images={lightboxImages} 2055 2413 index={lightboxIndex} ··· 2057 2415 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2058 2416 post={postid} 2059 2417 /> 2060 2060 - )} 2418 2418 + )} */} 2061 2419 {/* Left: 1:1 */} 2062 2420 <div 2063 2421 style={{ flex: 1, aspectRatio: "1 / 1", position: "relative" }} ··· 2132 2490 //border: `1px solid ${theme.border}`, 2133 2491 //aspectRatio: "3 / 2", // overall grid aspect 2134 2492 }} 2135 2135 - className="border border-gray-200 dark:border-gray-700" 2493 2493 + className="border border-gray-200 dark:border-gray-800 was7" 2136 2494 > 2137 2137 - {lightboxIndex !== null && ( 2495 2495 + {/* {lightboxIndex !== null && ( 2138 2496 <Lightbox 2139 2497 images={lightboxImages} 2140 2498 index={lightboxIndex} ··· 2142 2500 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2143 2501 post={postid} 2144 2502 /> 2145 2145 - )} 2503 2503 + )} */} 2146 2504 {images.map((img, i) => ( 2147 2505 <div 2148 2506 key={i} ··· 2233 2591 return <div />; 2234 2592 } 2235 2593 2236 2236 - type LightboxProps = { 2237 2237 - images: { src: string; alt?: string }[]; 2238 2238 - index: number; 2239 2239 - onClose: () => void; 2240 2240 - onNavigate?: (newIndex: number) => void; 2241 2241 - post?: { did: string; rkey: string }; 2242 2242 - }; 2243 2243 - export function Lightbox({ 2244 2244 - images, 2245 2245 - index, 2246 2246 - onClose, 2247 2247 - onNavigate, 2248 2248 - post, 2249 2249 - }: LightboxProps) { 2250 2250 - const image = images[index]; 2251 2251 - 2252 2252 - useEffect(() => { 2253 2253 - function handleKey(e: KeyboardEvent) { 2254 2254 - if (e.key === "Escape") onClose(); 2255 2255 - if (e.key === "ArrowRight" && onNavigate) 2256 2256 - onNavigate((index + 1) % images.length); 2257 2257 - if (e.key === "ArrowLeft" && onNavigate) 2258 2258 - onNavigate((index - 1 + images.length) % images.length); 2259 2259 - } 2260 2260 - window.addEventListener("keydown", handleKey); 2261 2261 - return () => window.removeEventListener("keydown", handleKey); 2262 2262 - }, [index, images.length, onClose, onNavigate]); 2263 2263 - 2264 2264 - return createPortal( 2265 2265 - <> 2266 2266 - {post && ( 2267 2267 - <div 2268 2268 - onClick={(e) => { 2269 2269 - e.stopPropagation(); 2270 2270 - e.nativeEvent.stopImmediatePropagation(); 2271 2271 - }} 2272 2272 - className="lightbox-sidebar overscroll-none disablegutter border-l dark:border-gray-700 border-gray-300 fixed z-50 flex top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white" 2273 2273 - > 2274 2274 - <ProfilePostComponent 2275 2275 - did={post.did} 2276 2276 - rkey={post.rkey} 2277 2277 - nopics={onClose} 2278 2278 - /> 2279 2279 - </div> 2280 2280 - )} 2281 2281 - <div 2282 2282 - className="lightbox fixed inset-0 z-50 flex items-center justify-center bg-black/80 w-screen lg:w-[calc(100vw-350px)] lg:max-w-[calc(100vw-350px)]" 2283 2283 - onClick={(e) => { 2284 2284 - e.stopPropagation(); 2285 2285 - onClose(); 2286 2286 - }} 2287 2287 - > 2288 2288 - <img 2289 2289 - src={image.src} 2290 2290 - alt={image.alt} 2291 2291 - className="max-h-[90%] max-w-[90%] object-contain rounded-lg shadow-lg" 2292 2292 - onClick={(e) => e.stopPropagation()} 2293 2293 - /> 2294 2294 - 2295 2295 - {images.length > 1 && ( 2296 2296 - <> 2297 2297 - <button 2298 2298 - onClick={(e) => { 2299 2299 - e.stopPropagation(); 2300 2300 - onNavigate?.((index - 1 + images.length) % images.length); 2301 2301 - }} 2302 2302 - className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center" 2303 2303 - > 2304 2304 - <svg 2305 2305 - xmlns="http://www.w3.org/2000/svg" 2306 2306 - width={28} 2307 2307 - height={28} 2308 2308 - viewBox="0 0 24 24" 2309 2309 - > 2310 2310 - <g fill="none" fillRule="evenodd"> 2311 2311 - <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path> 2312 2312 - <path 2313 2313 - fill="currentColor" 2314 2314 - d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z" 2315 2315 - ></path> 2316 2316 - </g> 2317 2317 - </svg> 2318 2318 - </button> 2319 2319 - <button 2320 2320 - onClick={(e) => { 2321 2321 - e.stopPropagation(); 2322 2322 - onNavigate?.((index + 1) % images.length); 2323 2323 - }} 2324 2324 - className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center" 2325 2325 - > 2326 2326 - <svg 2327 2327 - xmlns="http://www.w3.org/2000/svg" 2328 2328 - width={28} 2329 2329 - height={28} 2330 2330 - viewBox="0 0 24 24" 2331 2331 - > 2332 2332 - <g fill="none" fillRule="evenodd"> 2333 2333 - <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path> 2334 2334 - <path 2335 2335 - fill="currentColor" 2336 2336 - d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z" 2337 2337 - ></path> 2338 2338 - </g> 2339 2339 - </svg> 2340 2340 - </button> 2341 2341 - </> 2342 2342 - )} 2343 2343 - </div> 2344 2344 - </>, 2345 2345 - document.body 2346 2346 - ); 2347 2347 - } 2348 2348 - 2349 2594 function getDomain(url: string) { 2350 2595 try { 2351 2596 const { hostname } = new URL(url); ··· 2410 2655 return { start, end, feature: f.features[0] }; 2411 2656 }); 2412 2657 } 2413 2413 - function renderTextWithFacets({ 2658 2658 + export function renderTextWithFacets({ 2414 2659 text, 2415 2660 facets, 2416 2661 navigate, ··· 2573 2818 > 2574 2819 <div 2575 2820 style={containerStyle as React.CSSProperties} 2576 2576 - className="border border-gray-200 dark:border-gray-700" 2821 2821 + className="border border-gray-200 dark:border-gray-800 was7" 2577 2822 > 2578 2823 {thumb && ( 2579 2824 <div ··· 2587 2832 marginBottom: 8, 2588 2833 //borderBottom: `1px solid ${theme.border}`, 2589 2834 }} 2590 2590 - className="border-b border-gray-200 dark:border-gray-700" 2835 2835 + className="border-b border-gray-200 dark:border-gray-800 was7" 2591 2836 > 2592 2837 <img 2593 2838 src={thumb} ··· 2713 2958 borderRadius: 12, 2714 2959 //border: `1px solid ${theme.border}`, 2715 2960 }} 2716 2716 - className="border border-gray-200 dark:border-gray-700" 2961 2961 + className="border border-gray-200 dark:border-gray-800 was7" 2717 2962 onClick={async (e) => { 2718 2963 e.stopPropagation(); 2719 2964 setPlaying(true); ··· 2754 2999 100 / (aspect ? aspect.width / aspect.height : 16 / 9) 2755 3000 }%`, // 16:9 = 56.25%, 4:3 = 75% 2756 3001 }} 2757 2757 - className="border border-gray-200 dark:border-gray-700" 3002 3002 + className="border border-gray-200 dark:border-gray-800 was7" 2758 3003 > 2759 3004 <ReactPlayer 2760 3005 src={url}

+54 -9

src/main.tsx

··· 1 1 import "~/styles/app.css"; 2 2 3 3 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"; 4 4 - import { QueryClient, QueryClientProvider, } from "@tanstack/react-query"; 5 5 - import { 6 6 - persistQueryClient, 7 7 - } from "@tanstack/react-query-persist-client"; 8 8 - import { createRouter,RouterProvider } from "@tanstack/react-router"; 4 4 + import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 5 + import { persistQueryClient } from "@tanstack/react-query-persist-client"; 6 6 + import { createRouter, RouterProvider } from "@tanstack/react-router"; 7 7 + import { useSetAtom } from "jotai"; 8 8 + import { useEffect } from "react"; 9 9 //import { StrictMode } from "react"; 10 10 import ReactDOM from "react-dom/client"; 11 11 12 12 import reportWebVitals from "./reportWebVitals.ts"; 13 13 // Import the generated route tree 14 14 import { routeTree } from "./routeTree.gen"; 15 15 + import { isAtTopAtom } from "./utils/atoms.ts"; 15 16 17 17 + //initAtomToCssVar(hueAtom, "--tw-gray-hue") 16 18 17 19 const queryClient = new QueryClient({ 18 20 defaultOptions: { ··· 28 30 persistQueryClient({ 29 31 queryClient, 30 32 persister: localStoragePersister, 31 31 - }) 33 33 + }); 32 34 33 35 // Create a new router instance 34 36 const router = createRouter({ ··· 54 56 root.render( 55 57 // double queries annoys me 56 58 // <StrictMode> 57 57 - <QueryClientProvider client={queryClient}> 58 58 - <RouterProvider router={router} /> 59 59 - </QueryClientProvider> 59 59 + <QueryClientProvider client={queryClient}> 60 60 + <ScrollTopWatcher /> 61 61 + <RouterProvider router={router} /> 62 62 + </QueryClientProvider> 60 63 // </StrictMode> 61 64 ); 62 65 } ··· 65 68 // to log results (for example: reportWebVitals(// /*mass comment*/ console.log)) 66 69 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 67 70 reportWebVitals(); 71 71 + 72 72 + export default function ScrollTopWatcher() { 73 73 + const setIsAtTop = useSetAtom(isAtTopAtom); 74 74 + useEffect(() => { 75 75 + const meta = document.querySelector('meta[name="theme-color"]'); 76 76 + let lastAtTop = window.scrollY === 0; 77 77 + let timeoutId: number | undefined; 78 78 + 79 79 + const setVars = (atTop: boolean) => { 80 80 + const root = document.documentElement; 81 81 + root.style.setProperty("--is-top", atTop ? "1" : "0"); 82 82 + 83 83 + const bg = getComputedStyle(root).getPropertyValue("--header-bg").trim(); 84 84 + if (meta && bg) meta.setAttribute("content", bg); 85 85 + setIsAtTop(atTop); 86 86 + }; 87 87 + 88 88 + const check = () => { 89 89 + const atTop = window.scrollY === 0; 90 90 + if (atTop !== lastAtTop) { 91 91 + lastAtTop = atTop; 92 92 + setVars(atTop); 93 93 + } 94 94 + }; 95 95 + 96 96 + const handleScroll = () => { 97 97 + if (timeoutId) clearTimeout(timeoutId); 98 98 + timeoutId = window.setTimeout(check, 2); 99 99 + }; 100 100 + 101 101 + // initialize 102 102 + setVars(lastAtTop); 103 103 + window.addEventListener("scroll", handleScroll, { passive: true }); 104 104 + 105 105 + return () => { 106 106 + window.removeEventListener("scroll", handleScroll); 107 107 + if (timeoutId) clearTimeout(timeoutId); 108 108 + }; 109 109 + }, []); 110 110 + 111 111 + return null; 112 112 + }

+36 -5

src/routeTree.gen.ts

··· 21 21 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b' 22 22 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a' 23 23 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey' 24 24 + import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i' 24 25 25 26 const SettingsRoute = SettingsRouteImport.update({ 26 27 id: '/settings', ··· 83 84 path: '/profile/$did/post/$rkey', 84 85 getParentRoute: () => rootRouteImport, 85 86 } as any) 87 87 + const ProfileDidPostRkeyImageIRoute = 88 88 + ProfileDidPostRkeyImageIRouteImport.update({ 89 89 + id: '/image/$i', 90 90 + path: '/image/$i', 91 91 + getParentRoute: () => ProfileDidPostRkeyRoute, 92 92 + } as any) 86 93 87 94 export interface FileRoutesByFullPath { 88 95 '/': typeof IndexRoute ··· 94 101 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 95 102 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 96 103 '/profile/$did': typeof ProfileDidIndexRoute 97 97 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 104 104 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 105 105 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 98 106 } 99 107 export interface FileRoutesByTo { 100 108 '/': typeof IndexRoute ··· 106 114 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 107 115 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 108 116 '/profile/$did': typeof ProfileDidIndexRoute 109 109 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 117 117 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 118 118 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 110 119 } 111 120 export interface FileRoutesById { 112 121 __root__: typeof rootRouteImport ··· 121 130 '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 122 131 '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 123 132 '/profile/$did/': typeof ProfileDidIndexRoute 124 124 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 133 133 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 134 134 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 125 135 } 126 136 export interface FileRouteTypes { 127 137 fileRoutesByFullPath: FileRoutesByFullPath ··· 136 146 | '/route-b' 137 147 | '/profile/$did' 138 148 | '/profile/$did/post/$rkey' 149 149 + | '/profile/$did/post/$rkey/image/$i' 139 150 fileRoutesByTo: FileRoutesByTo 140 151 to: 141 152 | '/' ··· 148 159 | '/route-b' 149 160 | '/profile/$did' 150 161 | '/profile/$did/post/$rkey' 162 162 + | '/profile/$did/post/$rkey/image/$i' 151 163 id: 152 164 | '__root__' 153 165 | '/' ··· 162 174 | '/_pathlessLayout/_nested-layout/route-b' 163 175 | '/profile/$did/' 164 176 | '/profile/$did/post/$rkey' 177 177 + | '/profile/$did/post/$rkey/image/$i' 165 178 fileRoutesById: FileRoutesById 166 179 } 167 180 export interface RootRouteChildren { ··· 173 186 SettingsRoute: typeof SettingsRoute 174 187 CallbackIndexRoute: typeof CallbackIndexRoute 175 188 ProfileDidIndexRoute: typeof ProfileDidIndexRoute 176 176 - ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRoute 189 189 + ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren 177 190 } 178 191 179 192 declare module '@tanstack/react-router' { ··· 262 275 preLoaderRoute: typeof ProfileDidPostRkeyRouteImport 263 276 parentRoute: typeof rootRouteImport 264 277 } 278 278 + '/profile/$did/post/$rkey/image/$i': { 279 279 + id: '/profile/$did/post/$rkey/image/$i' 280 280 + path: '/image/$i' 281 281 + fullPath: '/profile/$did/post/$rkey/image/$i' 282 282 + preLoaderRoute: typeof ProfileDidPostRkeyImageIRouteImport 283 283 + parentRoute: typeof ProfileDidPostRkeyRoute 284 284 + } 265 285 } 266 286 } 267 287 ··· 295 315 PathlessLayoutRouteChildren, 296 316 ) 297 317 318 318 + interface ProfileDidPostRkeyRouteChildren { 319 319 + ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute 320 320 + } 321 321 + 322 322 + const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = { 323 323 + ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute, 324 324 + } 325 325 + 326 326 + const ProfileDidPostRkeyRouteWithChildren = 327 327 + ProfileDidPostRkeyRoute._addFileChildren(ProfileDidPostRkeyRouteChildren) 328 328 + 298 329 const rootRouteChildren: RootRouteChildren = { 299 330 IndexRoute: IndexRoute, 300 331 PathlessLayoutRoute: PathlessLayoutRouteWithChildren, ··· 304 335 SettingsRoute: SettingsRoute, 305 336 CallbackIndexRoute: CallbackIndexRoute, 306 337 ProfileDidIndexRoute: ProfileDidIndexRoute, 307 307 - ProfileDidPostRkeyRoute: ProfileDidPostRkeyRoute, 338 338 + ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren, 308 339 } 309 340 export const routeTree = rootRouteImport 310 341 ._addFileChildren(rootRouteChildren)

+549 -450

src/routes/__root.tsx

··· 2 2 3 3 // dont forget to run this 4 4 // npx @tanstack/router-cli generate 5 5 - 6 5 import type { QueryClient } from "@tanstack/react-query"; 7 6 import { 8 7 createRootRouteWithContext, 9 9 - Link, 8 8 + // Link, 10 9 // Outlet, 11 10 Scripts, 12 11 useLocation, 13 12 useNavigate, 14 13 } from "@tanstack/react-router"; 15 14 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; 16 16 - import { type SVGProps, useState } from "react"; 15 15 + import { useAtom } from "jotai"; 17 16 import * as React from "react"; 18 17 import { KeepAliveOutlet, KeepAliveProvider } from "tanstack-router-keepalive"; 19 18 19 19 + import { Composer } from "~/components/Composer"; 20 20 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; 21 21 + import { Import } from "~/components/Import"; 21 22 import Login from "~/components/Login"; 22 23 import { NotFound } from "~/components/NotFound"; 24 24 + import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 23 25 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 26 26 + import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 24 27 import { seo } from "~/utils/seo"; 25 28 26 29 export const Route = createRootRouteWithContext<{ ··· 86 89 } 87 90 88 91 function RootDocument({ children }: { children: React.ReactNode }) { 92 92 + useAtomCssVar(hueAtom, "--tw-gray-hue"); 89 93 const location = useLocation(); 90 94 const navigate = useNavigate(); 91 95 const { agent } = useAuth(); ··· 96 100 agent && 97 101 (location.pathname === `/profile/${agent?.did}` || 98 102 location.pathname === `/profile/${encodeURIComponent(agent?.did ?? "")}`); 103 103 + const isSettings = location.pathname.startsWith("/settings"); 104 104 + const isSearch = location.pathname.startsWith("/search"); 105 105 + const isFeeds = location.pathname.startsWith("/feeds"); 99 106 100 100 - const [postOpen, setPostOpen] = useState(false); 101 101 - const [postText, setPostText] = useState(""); 102 102 - const [posting, setPosting] = useState(false); 103 103 - const [postSuccess, setPostSuccess] = useState(false); 104 104 - const [postError, setPostError] = useState<string | null>(null); 107 107 + const locationEnum: 108 108 + | "feeds" 109 109 + | "search" 110 110 + | "settings" 111 111 + | "notifications" 112 112 + | "profile" 113 113 + | "home" = isFeeds 114 114 + ? "feeds" 115 115 + : isSearch 116 116 + ? "search" 117 117 + : isSettings 118 118 + ? "settings" 119 119 + : isNotifications 120 120 + ? "notifications" 121 121 + : isProfile 122 122 + ? "profile" 123 123 + : "home"; 105 124 106 106 - async function handlePost() { 107 107 - if (!agent) return; 108 108 - setPosting(true); 109 109 - setPostError(null); 110 110 - try { 111 111 - await agent.com.atproto.repo.createRecord({ 112 112 - collection: "app.bsky.feed.post", 113 113 - repo: agent.assertDid, 114 114 - record: { 115 115 - $type: "app.bsky.feed.post", 116 116 - text: postText, 117 117 - createdAt: new Date().toISOString(), 118 118 - }, 119 119 - }); 120 120 - setPostSuccess(true); 121 121 - setPostText(""); 122 122 - setTimeout(() => { 123 123 - setPostSuccess(false); 124 124 - setPostOpen(false); 125 125 - }, 1500); 126 126 - } catch (e: any) { 127 127 - setPostError(e?.message || "Failed to post"); 128 128 - } finally { 129 129 - setPosting(false); 130 130 - } 131 131 - } 125 125 + const [, setComposerPost] = useAtom(composerAtom); 132 126 133 127 return ( 134 128 <> 135 135 - {postOpen && ( 136 136 - <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> 137 137 - <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-full max-w-md relative"> 138 138 - <button 139 139 - className="absolute top-2 right-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" 140 140 - onClick={() => !posting && setPostOpen(false)} 141 141 - disabled={posting} 142 142 - aria-label="Close" 143 143 - > 144 144 - × 145 145 - </button> 146 146 - <h2 className="text-lg font-bold mb-2">Create Post</h2> 147 147 - {postSuccess ? ( 148 148 - <div className="flex flex-col items-center justify-center py-8"> 149 149 - <span className="text-green-500 text-4xl mb-2">✓</span> 150 150 - <span className="text-green-600">Posted!</span> 151 151 - </div> 152 152 - ) : ( 153 153 - <> 154 154 - <textarea 155 155 - className="w-full border rounded p-2 mb-2 dark:bg-gray-800 dark:border-gray-700" 156 156 - rows={4} 157 157 - placeholder="What's on your mind?" 158 158 - value={postText} 159 159 - onChange={(e) => setPostText(e.target.value)} 160 160 - disabled={posting} 161 161 - autoFocus 162 162 - /> 163 163 - {postError && ( 164 164 - <div className="text-red-500 text-sm mb-2">{postError}</div> 165 165 - )} 166 166 - <button 167 167 - className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50" 168 168 - onClick={handlePost} 169 169 - disabled={posting || !postText.trim()} 170 170 - > 171 171 - {posting ? "Posting..." : "Post"} 172 172 - </button> 173 173 - </> 174 174 - )} 175 175 - </div> 176 176 - </div> 177 177 - )} 129 129 + <Composer /> 178 130 179 131 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 180 180 - <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start"> 132 132 + <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start"> 181 133 <div className="flex items-center gap-3 mb-4"> 182 182 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 134 134 + <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 183 135 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 184 136 Red Dwarf{" "} 185 137 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 187 139 </span> */} 188 140 </span> 189 141 </div> 190 190 - <Link 142 142 + <MaterialNavItem 143 143 + InactiveIcon={ 144 144 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 145 145 + } 146 146 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 147 147 + active={locationEnum === "home"} 148 148 + onClickCallbback={() => 149 149 + navigate({ 150 150 + to: "/", 151 151 + //params: { did: agent.assertDid }, 152 152 + }) 153 153 + } 154 154 + text="Home" 155 155 + /> 156 156 + 157 157 + <MaterialNavItem 158 158 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 159 159 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 160 160 + active={locationEnum === "search"} 161 161 + onClickCallbback={() => 162 162 + navigate({ 163 163 + to: "/search", 164 164 + //params: { did: agent.assertDid }, 165 165 + }) 166 166 + } 167 167 + text="Explore" 168 168 + /> 169 169 + <MaterialNavItem 170 170 + InactiveIcon={ 171 171 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 172 172 + } 173 173 + ActiveIcon={ 174 174 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 175 175 + } 176 176 + active={locationEnum === "notifications"} 177 177 + onClickCallbback={() => 178 178 + navigate({ 179 179 + to: "/notifications", 180 180 + //params: { did: agent.assertDid }, 181 181 + }) 182 182 + } 183 183 + text="Notifications" 184 184 + /> 185 185 + <MaterialNavItem 186 186 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 187 187 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 188 188 + active={locationEnum === "feeds"} 189 189 + onClickCallbback={() => 190 190 + navigate({ 191 191 + to: "/feeds", 192 192 + //params: { did: agent.assertDid }, 193 193 + }) 194 194 + } 195 195 + text="Feeds" 196 196 + /> 197 197 + <MaterialNavItem 198 198 + InactiveIcon={ 199 199 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 200 200 + } 201 201 + ActiveIcon={ 202 202 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 203 203 + } 204 204 + active={locationEnum === "profile"} 205 205 + onClickCallbback={() => { 206 206 + if (authed && agent && agent.assertDid) { 207 207 + //window.location.href = `/profile/${agent.assertDid}`; 208 208 + navigate({ 209 209 + to: "/profile/$did", 210 210 + params: { did: agent.assertDid }, 211 211 + }); 212 212 + } 213 213 + }} 214 214 + text="Profile" 215 215 + /> 216 216 + <MaterialNavItem 217 217 + InactiveIcon={ 218 218 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 219 219 + } 220 220 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 221 221 + active={locationEnum === "settings"} 222 222 + onClickCallbback={() => 223 223 + navigate({ 224 224 + to: "/settings", 225 225 + //params: { did: agent.assertDid }, 226 226 + }) 227 227 + } 228 228 + text="Settings" 229 229 + /> 230 230 + <div className="flex flex-row items-center justify-center mt-3"> 231 231 + <MaterialPillButton 232 232 + InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 233 233 + ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 234 234 + //active={true} 235 235 + onClickCallbback={() => setComposerPost({ kind: 'root' })} 236 236 + text="Post" 237 237 + /> 238 238 + </div> 239 239 + {/* <Link 191 240 to="/" 192 241 className={ 193 242 `py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-900 text-xl flex items-center gap-3 ` + 194 243 (isHome ? "font-bold" : "") 195 244 } 196 245 > 197 197 - {isHome ? ( 198 198 - <TablerHomeFilled width={28} height={28} /> 246 246 + {!isHome ? ( 247 247 + <IconMaterialSymbolsHomeOutline width={28} height={28} /> 199 248 ) : ( 200 200 - <TablerHome width={28} height={28} /> 249 249 + <IconMaterialSymbolsHome width={28} height={28} /> 201 250 )} 202 251 <span>Home</span> 203 252 </Link> ··· 208 257 (isNotifications ? "font-bold" : "") 209 258 } 210 259 > 211 211 - {isNotifications ? ( 212 212 - <TablerBellFilled width={28} height={28} /> 260 260 + {!isNotifications ? ( 261 261 + <IconMaterialSymbolsNotificationsOutline width={28} height={28} /> 213 262 ) : ( 214 214 - <TablerBell width={28} height={28} /> 263 263 + <IconMaterialSymbolsNotifications width={28} height={28} /> 215 264 )} 216 265 <span>Notifications</span> 217 266 </Link> ··· 222 271 }`} 223 272 > 224 273 {location.pathname.startsWith("/feeds") ? ( 225 225 - <TablerHashtagFilled width={28} height={28} /> 274 274 + <IconMaterialSymbolsTag width={28} height={28} /> 226 275 ) : ( 227 227 - <TablerHashtag width={28} height={28} /> 276 276 + <IconMaterialSymbolsTag width={28} height={28} /> 228 277 )} 229 278 <span>Feeds</span> 230 279 </Link> ··· 236 285 }`} 237 286 > 238 287 {location.pathname.startsWith("/search") ? ( 239 239 - <TablerSearchFilled width={28} height={28} /> 288 288 + <IconMaterialSymbolsSearch width={28} height={28} /> 240 289 ) : ( 241 241 - <TablerSearch width={28} height={28} /> 290 290 + <IconMaterialSymbolsSearch width={28} height={28} /> 242 291 )} 243 292 <span>Search</span> 244 293 </Link> ··· 257 306 }} 258 307 type="button" 259 308 > 260 260 - <TablerUserCircle width={28} height={28} /> 309 309 + {!isProfile ? ( 310 310 + <IconMaterialSymbolsAccountCircleOutline width={28} height={28} /> 311 311 + ) : ( 312 312 + <IconMaterialSymbolsAccountCircle width={28} height={28} /> 313 313 + )} 261 314 <span>Profile</span> 262 315 </button> 263 316 <Link ··· 266 319 location.pathname.startsWith("/settings") ? "font-bold" : "" 267 320 }`} 268 321 > 269 269 - {location.pathname.startsWith("/settings") ? ( 270 270 - <IonSettingsSharp width={28} height={28} /> 322 322 + {!location.pathname.startsWith("/settings") ? ( 323 323 + <IconMaterialSymbolsSettingsOutline width={28} height={28} /> 271 324 ) : ( 272 272 - <IonSettings width={28} height={28} /> 325 325 + <IconMaterialSymbolsSettings width={28} height={28} /> 273 326 )} 274 327 <span>Settings</span> 275 275 - </Link> 276 276 - <button 328 328 + </Link> */} 329 329 + {/* <button 277 330 className="mt-4 w-full flex items-center justify-center gap-3 py-3 px-0 mb-3 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 text-xl font-bold rounded-full transition-colors shadow" 278 331 onClick={() => setPostOpen(true)} 279 332 type="button" 280 333 > 281 281 - <TablerEdit 334 334 + <IconMdiPencilOutline 282 335 width={24} 283 336 height={24} 284 337 className="text-gray-600 dark:text-gray-400" 285 338 /> 286 339 <span>Post</span> 287 287 - </button> 340 340 + </button> */} 288 341 <div className="flex-1"></div> 289 342 <a 290 343 href="https://tangled.sh/@whey.party/red-dwarf" ··· 315 368 </div> 316 369 </nav> 317 370 318 318 - <button 319 319 - className="lg:hidden fixed bottom-20 right-6 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-blue-600 dark:text-blue-400 rounded-full shadow-lg w-16 h-16 flex items-center justify-center border-4 border-white dark:border-gray-950 transition-all" 320 320 - style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 321 321 - onClick={() => setPostOpen(true)} 322 322 - type="button" 323 323 - aria-label="Create Post" 324 324 - > 325 325 - <TablerEdit 326 326 - width={24} 327 327 - height={24} 328 328 - className="text-gray-600 dark:text-gray-400" 371 371 + <nav className="hidden sm:flex items-center lg:hidden h-screen flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start"> 372 372 + <div className="flex items-center gap-3 mb-4"> 373 373 + <FluentEmojiHighContrastGlowingStar className="h-8 w-8" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 374 374 + </div> 375 375 + <MaterialNavItem 376 376 + small 377 377 + InactiveIcon={ 378 378 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 379 379 + } 380 380 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 381 381 + active={locationEnum === "home"} 382 382 + onClickCallbback={() => 383 383 + navigate({ 384 384 + to: "/", 385 385 + //params: { did: agent.assertDid }, 386 386 + }) 387 387 + } 388 388 + text="Home" 329 389 /> 330 330 - </button> 331 390 332 332 - <main className="w-full max-w-[600px] lg:border-x border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950 pb-16 lg:pb-0"> 333 333 - <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950"> 334 334 - <div className="flex items-center gap-2"> 335 335 - <img 336 336 - src="/redstar.png" 337 337 - alt="Red Dwarf Logo" 338 338 - className="w-6 h-6" 339 339 - /> 340 340 - <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 341 341 - Red Dwarf{" "} 342 342 - {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> 343 343 - lite 344 344 - </span> */} 345 345 - </span> 346 346 - </div> 347 347 - <div className="flex items-center gap-2"> 348 348 - <Login compact={true} /> 349 349 - </div> 391 391 + <MaterialNavItem 392 392 + small 393 393 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 394 394 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 395 395 + active={locationEnum === "search"} 396 396 + onClickCallbback={() => 397 397 + navigate({ 398 398 + to: "/search", 399 399 + //params: { did: agent.assertDid }, 400 400 + }) 401 401 + } 402 402 + text="Explore" 403 403 + /> 404 404 + <MaterialNavItem 405 405 + small 406 406 + InactiveIcon={ 407 407 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 408 408 + } 409 409 + ActiveIcon={ 410 410 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 411 411 + } 412 412 + active={locationEnum === "notifications"} 413 413 + onClickCallbback={() => 414 414 + navigate({ 415 415 + to: "/notifications", 416 416 + //params: { did: agent.assertDid }, 417 417 + }) 418 418 + } 419 419 + text="Notifications" 420 420 + /> 421 421 + <MaterialNavItem 422 422 + small 423 423 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 424 424 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 425 425 + active={locationEnum === "feeds"} 426 426 + onClickCallbback={() => 427 427 + navigate({ 428 428 + to: "/feeds", 429 429 + //params: { did: agent.assertDid }, 430 430 + }) 431 431 + } 432 432 + text="Feeds" 433 433 + /> 434 434 + <MaterialNavItem 435 435 + small 436 436 + InactiveIcon={ 437 437 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 438 438 + } 439 439 + ActiveIcon={ 440 440 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 441 441 + } 442 442 + active={locationEnum === "profile"} 443 443 + onClickCallbback={() => { 444 444 + if (authed && agent && agent.assertDid) { 445 445 + //window.location.href = `/profile/${agent.assertDid}`; 446 446 + navigate({ 447 447 + to: "/profile/$did", 448 448 + params: { did: agent.assertDid }, 449 449 + }); 450 450 + } 451 451 + }} 452 452 + text="Profile" 453 453 + /> 454 454 + <MaterialNavItem 455 455 + small 456 456 + InactiveIcon={ 457 457 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 458 458 + } 459 459 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 460 460 + active={locationEnum === "settings"} 461 461 + onClickCallbback={() => 462 462 + navigate({ 463 463 + to: "/settings", 464 464 + //params: { did: agent.assertDid }, 465 465 + }) 466 466 + } 467 467 + text="Settings" 468 468 + /> 469 469 + <div className="flex flex-row items-center justify-center mt-3"> 470 470 + <MaterialPillButton 471 471 + small 472 472 + InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 473 473 + ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 474 474 + //active={true} 475 475 + onClickCallbback={() => setComposerPost({ kind: 'root' })} 476 476 + text="Post" 477 477 + /> 350 478 </div> 479 479 + </nav> 351 480 481 481 + {agent?.did && ( 482 482 + <button 483 483 + className="lg:hidden fixed bottom-22 right-4 z-50 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-2xl w-14 h-14 flex items-center justify-center transition-all" 484 484 + style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 485 485 + onClick={() => setComposerPost({ kind: 'root' })} 486 486 + type="button" 487 487 + aria-label="Create Post" 488 488 + > 489 489 + <IconMdiPencilOutline 490 490 + width={24} 491 491 + height={24} 492 492 + className="text-gray-600 dark:text-gray-400" 493 493 + /> 494 494 + </button> 495 495 + )} 496 496 + 497 497 + <main className="w-full max-w-[600px] sm:border-x border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 pb-16 lg:pb-0 overflow-x-clip"> 352 498 {children} 353 499 </main> 354 500 355 501 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 502 502 + <div className="px-4 pt-4"><Import /></div> 356 503 <Login /> 357 504 358 505 <div className="flex-1"></div> 359 506 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 360 360 - Red Dwarf is a bluesky client that uses Constellation and direct PDS 361 361 - queries. Skylite would be a self-hosted bluesky "instance". Stay 362 362 - tuned for the release of Skylite. 507 507 + Red Dwarf is a Bluesky client that does not rely on any Bluesky API App Servers. Instead, it uses Microcosm to fetch records directly from each users' PDS (via Slingshot) and connect them using backlinks (via Constellation) 363 508 </p> 364 509 </aside> 365 510 </div> 366 511 367 367 - <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-950 border-t border-gray-200 dark:border-gray-700 z-40"> 368 368 - <div className="flex justify-around items-center py-2"> 369 369 - <Link 370 370 - to="/" 371 371 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 372 372 - isHome 373 373 - ? "text-gray-900 dark:text-gray-100" 374 374 - : "text-gray-600 dark:text-gray-400" 375 375 - }`} 376 376 - > 377 377 - {isHome ? ( 378 378 - <TablerHomeFilled width={24} height={24} /> 379 379 - ) : ( 380 380 - <TablerHome width={24} height={24} /> 381 381 - )} 382 382 - <span className="text-xs mt-1">Home</span> 383 383 - </Link> 384 384 - <Link 385 385 - to="/search" 386 386 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 387 387 - location.pathname.startsWith("/search") 388 388 - ? "text-gray-900 dark:text-gray-100" 389 389 - : "text-gray-600 dark:text-gray-400" 390 390 - }`} 391 391 - > 392 392 - {location.pathname.startsWith("/search") ? ( 393 393 - <TablerSearchFilled width={24} height={24} /> 394 394 - ) : ( 395 395 - <TablerSearch width={24} height={24} /> 396 396 - )} 397 397 - <span className="text-xs mt-1">Search</span> 398 398 - </Link> 399 399 - <Link 400 400 - to="/notifications" 401 401 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 402 402 - isNotifications 403 403 - ? "text-gray-900 dark:text-gray-100" 404 404 - : "text-gray-600 dark:text-gray-400" 405 405 - }`} 406 406 - > 407 407 - {isNotifications ? ( 408 408 - <TablerBellFilled width={24} height={24} /> 409 409 - ) : ( 410 410 - <TablerBell width={24} height={24} /> 411 411 - )} 412 412 - <span className="text-xs mt-1">Notifications</span> 413 413 - </Link> 414 414 - <button 415 415 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 416 416 - isProfile 417 417 - ? "text-gray-900 dark:text-gray-100" 418 418 - : "text-gray-600 dark:text-gray-400" 419 419 - }`} 420 420 - onClick={() => { 421 421 - if (authed && agent && agent.assertDid) { 422 422 - //window.location.href = `/profile/${agent.assertDid}`; 512 512 + {agent?.did ? ( 513 513 + <nav className="sm:hidden fixed bottom-0 left-0 right-0 bg-gray-50 dark:bg-gray-900 border-0 shadow border-gray-200 dark:border-gray-700 z-40"> 514 514 + <div className="flex justify-around items-center p-2"> 515 515 + <MaterialNavItem 516 516 + small 517 517 + InactiveIcon={ 518 518 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 519 519 + } 520 520 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 521 521 + active={locationEnum === "home"} 522 522 + onClickCallbback={() => 523 523 + navigate({ 524 524 + to: "/", 525 525 + //params: { did: agent.assertDid }, 526 526 + }) 527 527 + } 528 528 + text="Home" 529 529 + /> 530 530 + {/* <Link 531 531 + to="/" 532 532 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 533 533 + isHome 534 534 + ? "text-gray-900 dark:text-gray-100" 535 535 + : "text-gray-600 dark:text-gray-400" 536 536 + }`} 537 537 + > 538 538 + {!isHome ? ( 539 539 + <IconMaterialSymbolsHomeOutline width={24} height={24} /> 540 540 + ) : ( 541 541 + <IconMaterialSymbolsHome width={24} height={24} /> 542 542 + )} 543 543 + <span className="text-xs mt-1">Home</span> 544 544 + </Link> */} 545 545 + <MaterialNavItem 546 546 + small 547 547 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 548 548 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 549 549 + active={locationEnum === "search"} 550 550 + onClickCallbback={() => 551 551 + navigate({ 552 552 + to: "/search", 553 553 + //params: { did: agent.assertDid }, 554 554 + }) 555 555 + } 556 556 + text="Explore" 557 557 + /> 558 558 + {/* <Link 559 559 + to="/search" 560 560 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 561 561 + location.pathname.startsWith("/search") 562 562 + ? "text-gray-900 dark:text-gray-100" 563 563 + : "text-gray-600 dark:text-gray-400" 564 564 + }`} 565 565 + > 566 566 + {!location.pathname.startsWith("/search") ? ( 567 567 + <IconMaterialSymbolsSearch width={24} height={24} /> 568 568 + ) : ( 569 569 + <IconMaterialSymbolsSearch width={24} height={24} /> 570 570 + )} 571 571 + <span className="text-xs mt-1">Search</span> 572 572 + </Link> */} 573 573 + <MaterialNavItem 574 574 + small 575 575 + InactiveIcon={ 576 576 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 577 577 + } 578 578 + ActiveIcon={ 579 579 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 580 580 + } 581 581 + active={locationEnum === "notifications"} 582 582 + onClickCallbback={() => 583 583 + navigate({ 584 584 + to: "/notifications", 585 585 + //params: { did: agent.assertDid }, 586 586 + }) 587 587 + } 588 588 + text="Notifications" 589 589 + /> 590 590 + {/* <Link 591 591 + to="/notifications" 592 592 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 593 593 + isNotifications 594 594 + ? "text-gray-900 dark:text-gray-100" 595 595 + : "text-gray-600 dark:text-gray-400" 596 596 + }`} 597 597 + > 598 598 + {!isNotifications ? ( 599 599 + <IconMaterialSymbolsNotificationsOutline 600 600 + width={24} 601 601 + height={24} 602 602 + /> 603 603 + ) : ( 604 604 + <IconMaterialSymbolsNotifications width={24} height={24} /> 605 605 + )} 606 606 + <span className="text-xs mt-1">Notifications</span> 607 607 + </Link> */} 608 608 + <MaterialNavItem 609 609 + small 610 610 + InactiveIcon={ 611 611 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 612 612 + } 613 613 + ActiveIcon={ 614 614 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 615 615 + } 616 616 + active={locationEnum === "profile"} 617 617 + onClickCallbback={() => { 618 618 + if (authed && agent && agent.assertDid) { 619 619 + //window.location.href = `/profile/${agent.assertDid}`; 620 620 + navigate({ 621 621 + to: "/profile/$did", 622 622 + params: { did: agent.assertDid }, 623 623 + }); 624 624 + } 625 625 + }} 626 626 + text="Profile" 627 627 + /> 628 628 + {/* <button 629 629 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 630 630 + isProfile 631 631 + ? "text-gray-900 dark:text-gray-100" 632 632 + : "text-gray-600 dark:text-gray-400" 633 633 + }`} 634 634 + onClick={() => { 635 635 + if (authed && agent && agent.assertDid) { 636 636 + //window.location.href = `/profile/${agent.assertDid}`; 637 637 + navigate({ 638 638 + to: "/profile/$did", 639 639 + params: { did: agent.assertDid }, 640 640 + }); 641 641 + } 642 642 + }} 643 643 + type="button" 644 644 + > 645 645 + <IconMaterialSymbolsAccountCircleOutline width={24} height={24} /> 646 646 + <span className="text-xs mt-1">Profile</span> 647 647 + </button> */} 648 648 + <MaterialNavItem 649 649 + small 650 650 + InactiveIcon={ 651 651 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 652 652 + } 653 653 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 654 654 + active={locationEnum === "settings"} 655 655 + onClickCallbback={() => 423 656 navigate({ 424 424 - to: "/profile/$did", 425 425 - params: { did: agent.assertDid }, 426 426 - }); 657 657 + to: "/settings", 658 658 + //params: { did: agent.assertDid }, 659 659 + }) 427 660 } 428 428 - }} 429 429 - type="button" 430 430 - > 431 431 - <TablerUserCircle width={24} height={24} /> 432 432 - <span className="text-xs mt-1">Profile</span> 433 433 - </button> 434 434 - <Link 435 435 - to="/settings" 436 436 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 437 437 - location.pathname.startsWith("/settings") 438 438 - ? "text-gray-900 dark:text-gray-100" 439 439 - : "text-gray-600 dark:text-gray-400" 440 440 - }`} 441 441 - > 442 442 - {location.pathname.startsWith("/settings") ? ( 443 443 - <IonSettingsSharp width={24} height={24} /> 444 444 - ) : ( 445 445 - <IonSettings width={24} height={24} /> 446 446 - )} 447 447 - <span className="text-xs mt-1">Settings</span> 448 448 - </Link> 661 661 + text="Settings" 662 662 + /> 663 663 + {/* <Link 664 664 + to="/settings" 665 665 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 666 666 + location.pathname.startsWith("/settings") 667 667 + ? "text-gray-900 dark:text-gray-100" 668 668 + : "text-gray-600 dark:text-gray-400" 669 669 + }`} 670 670 + > 671 671 + {!location.pathname.startsWith("/settings") ? ( 672 672 + <IconMaterialSymbolsSettingsOutline width={24} height={24} /> 673 673 + ) : ( 674 674 + <IconMaterialSymbolsSettings width={24} height={24} /> 675 675 + )} 676 676 + <span className="text-xs mt-1">Settings</span> 677 677 + </Link> */} 678 678 + </div> 679 679 + </nav> 680 680 + ) : ( 681 681 + <div className="lg:hidden flex items-center fixed bottom-0 left-0 right-0 justify-between px-4 py-3 border-0 shadow border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 z-10"> 682 682 + <div className="flex items-center gap-2"> 683 683 + <FluentEmojiHighContrastGlowingStar className="h-6 w-6" style={{color: "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))"}} /> 684 684 + <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 685 685 + Red Dwarf{" "} 686 686 + {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> 687 687 + lite 688 688 + </span> */} 689 689 + </span> 690 690 + </div> 691 691 + <div className="flex items-center gap-2"> 692 692 + <Login compact={true} popup={true} /> 693 693 + </div> 449 694 </div> 450 450 - </nav> 695 695 + )} 451 696 452 452 - <TanStackRouterDevtools position="bottom-right" /> 697 697 + <TanStackRouterDevtools position="bottom-left" /> 453 698 <Scripts /> 454 699 </> 455 700 ); 456 701 } 457 457 - export function TablerHashtag(props: SVGProps<SVGSVGElement>) { 458 458 - return ( 459 459 - <svg 460 460 - xmlns="http://www.w3.org/2000/svg" 461 461 - width={24} 462 462 - height={24} 463 463 - viewBox="0 0 24 24" 464 464 - {...props} 465 465 - > 466 466 - <path 467 467 - fill="none" 468 468 - stroke="currentColor" 469 469 - strokeLinecap="round" 470 470 - strokeLinejoin="round" 471 471 - strokeWidth={2} 472 472 - d="M5 9h14M5 15h14M11 4L7 20M17 4l-4 16" 473 473 - ></path> 474 474 - </svg> 475 475 - ); 476 476 - } 477 702 478 478 - export function TablerHashtagFilled(props: SVGProps<SVGSVGElement>) { 479 479 - return ( 480 480 - <svg 481 481 - xmlns="http://www.w3.org/2000/svg" 482 482 - width={24} 483 483 - height={24} 484 484 - viewBox="0 0 24 24" 485 485 - {...props} 486 486 - > 487 487 - <path 488 488 - fill="none" 489 489 - stroke="currentColor" 490 490 - strokeLinecap="round" 491 491 - strokeLinejoin="round" 492 492 - strokeWidth={3} 493 493 - d="M5 9h14M5 15h14M11 4L7 20M17 4l-4 16" 494 494 - ></path> 495 495 - </svg> 496 496 - ); 497 497 - } 498 498 - export function TablerEdit(props: SVGProps<SVGSVGElement>) { 499 499 - return ( 500 500 - <svg 501 501 - xmlns="http://www.w3.org/2000/svg" 502 502 - width={24} 503 503 - height={24} 504 504 - viewBox="0 0 24 24" 505 505 - className="text-white" 506 506 - {...props} 507 507 - > 508 508 - <g 509 509 - fill="none" 510 510 - stroke="currentColor" 511 511 - strokeLinecap="round" 512 512 - strokeLinejoin="round" 513 513 - strokeWidth={2} 703 703 + function MaterialNavItem({ 704 704 + InactiveIcon, 705 705 + ActiveIcon, 706 706 + text, 707 707 + active, 708 708 + onClickCallbback, 709 709 + small, 710 710 + }: { 711 711 + InactiveIcon: React.ReactElement; 712 712 + ActiveIcon: React.ReactElement; 713 713 + text: string; 714 714 + active: boolean; 715 715 + onClickCallbback: () => void; 716 716 + small?: boolean | string; 717 717 + }) { 718 718 + if (small) 719 719 + return ( 720 720 + <button 721 721 + className={`flex flex-col items-center rounded-lg transition-colors ${small} gap-1 ${ 722 722 + active 723 723 + ? "text-gray-900 dark:text-gray-100" 724 724 + : "text-gray-600 dark:text-gray-400" 725 725 + }`} 726 726 + onClick={() => { 727 727 + onClickCallbback(); 728 728 + }} 514 729 > 515 515 - <path d="M16.475 5.408a2.36 2.36 0 1 1 3.34 3.34L7.5 21H3v-4.5z"></path> 516 516 - </g> 517 517 - </svg> 518 518 - ); 519 519 - } 520 520 - export function TablerHome(props: SVGProps<SVGSVGElement>) { 521 521 - return ( 522 522 - <svg 523 523 - xmlns="http://www.w3.org/2000/svg" 524 524 - width={24} 525 525 - height={24} 526 526 - viewBox="0 0 24 24" 527 527 - className="text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 528 528 - {...props} 529 529 - > 530 530 - <g 531 531 - stroke="currentColor" 532 532 - strokeLinecap="round" 533 533 - strokeLinejoin="round" 534 534 - strokeWidth={2} 535 535 - fill="none" 536 536 - > 537 537 - <path d="M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"></path> 538 538 - <path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"></path> 539 539 - </g> 540 540 - </svg> 541 541 - ); 542 542 - } 543 543 - export function TablerHomeFilled(props: SVGProps<SVGSVGElement>) { 544 544 - return ( 545 545 - <svg 546 546 - xmlns="http://www.w3.org/2000/svg" 547 547 - width={24} 548 548 - height={24} 549 549 - viewBox="0 0 24 24" 550 550 - className="text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 551 551 - {...props} 552 552 - > 553 553 - <path 554 554 - fill="currentColor" 555 555 - d="m12.707 2.293l9 9c.63.63.184 1.707-.707 1.707h-1v6a3 3 0 0 1-3 3h-1v-7a3 3 0 0 0-2.824-2.995L13 12h-2a3 3 0 0 0-3 3v7H7a3 3 0 0 1-3-3v-6H3c-.89 0-1.337-1.077-.707-1.707l9-9a1 1 0 0 1 1.414 0M13 14a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883-.993L11 14z" 556 556 - ></path> 557 557 - </svg> 558 558 - ); 559 559 - } 730 730 + <div 731 731 + className={`px-4 py-1 rounded-full flex items-center justify-center ${active ? " bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 hover:dark:bg-gray-700" : "hover:bg-gray-50 hover:dark:bg-gray-900"}`} 732 732 + > 733 733 + {active ? ActiveIcon : InactiveIcon} 734 734 + </div> 735 735 + <span 736 736 + className={`text-[12.8px] text-roboto ${active ? "font-medium" : ""}`} 737 737 + > 738 738 + {text} 739 739 + </span> 740 740 + </button> 741 741 + ); 560 742 561 561 - export function TablerBell(props: SVGProps<SVGSVGElement>) { 562 743 return ( 563 563 - <svg 564 564 - xmlns="http://www.w3.org/2000/svg" 565 565 - width={24} 566 566 - height={24} 567 567 - viewBox="0 0 24 24" 568 568 - {...props} 569 569 - > 570 570 - <path 571 571 - className="text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 572 572 - stroke="currentColor" 573 573 - strokeLinecap="round" 574 574 - strokeLinejoin="round" 575 575 - strokeWidth={2} 576 576 - d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" 577 577 - ></path> 578 578 - </svg> 579 579 - ); 580 580 - } 581 581 - export function TablerBellFilled(props: SVGProps<SVGSVGElement>) { 582 582 - return ( 583 583 - <svg 584 584 - xmlns="http://www.w3.org/2000/svg" 585 585 - width={24} 586 586 - height={24} 587 587 - viewBox="0 0 24 24" 588 588 - className="text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 589 589 - {...props} 590 590 - > 591 591 - <path 592 592 - fill="currentColor" 593 593 - stroke="currentColor" 594 594 - d="M14.235 19c.865 0 1.322 1.024.745 1.668A4 4 0 0 1 12 22a4 4 0 0 1-2.98-1.332c-.552-.616-.158-1.579.634-1.661l.11-.006zM12 2c1.358 0 2.506.903 2.875 2.141l.046.171l.008.043a8.01 8.01 0 0 1 4.024 6.069l.028.287L19 11v2.931l.021.136a3 3 0 0 0 1.143 1.847l.167.117l.162.099c.86.487.56 1.766-.377 1.864L20 18H4c-1.028 0-1.387-1.364-.493-1.87a3 3 0 0 0 1.472-2.063L5 13.924l.001-2.97A8 8 0 0 1 8.822 4.5l.248-.146l.01-.043a3 3 0 0 1 2.562-2.29l.182-.017z" 595 595 - ></path> 596 596 - </svg> 597 597 - ); 598 598 - } 599 599 - 600 600 - export function TablerUserCircle(props: SVGProps<SVGSVGElement>) { 601 601 - return ( 602 602 - <svg 603 603 - xmlns="http://www.w3.org/2000/svg" 604 604 - width={24} 605 605 - height={24} 606 606 - viewBox="0 0 24 24" 607 607 - className="text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 608 608 - {...props} 744 744 + <button 745 745 + className={`flex flex-row h-12 min-h-12 max-h-12 px-4 py-0.5 w-full items-center rounded-full transition-colors flex-1 gap-1 ${ 746 746 + active 747 747 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-800 bg-gray-200 hover:dark:bg-gray-700" 748 748 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-900" 749 749 + }`} 750 750 + onClick={() => { 751 751 + onClickCallbback(); 752 752 + }} 609 753 > 610 610 - <g 611 611 - fill="none" 612 612 - stroke="currentColor" 613 613 - strokeLinecap="round" 614 614 - strokeLinejoin="round" 615 615 - strokeWidth={2} 754 754 + <div className={`mr-4 ${active ? " " : " "}`}> 755 755 + {active ? ActiveIcon : InactiveIcon} 756 756 + </div> 757 757 + <span 758 758 + className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`} 616 759 > 617 617 - <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"></path> 618 618 - <path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"></path> 619 619 - </g> 620 620 - </svg> 621 621 - ); 622 622 - } 623 623 - 624 624 - export function TablerSearch(props: SVGProps<SVGSVGElement>) { 625 625 - return ( 626 626 - <svg 627 627 - xmlns="http://www.w3.org/2000/svg" 628 628 - width={24} 629 629 - height={24} 630 630 - viewBox="0 0 24 24" 631 631 - //className="text-gray-400 dark:text-gray-500" 632 632 - {...props} 633 633 - > 634 634 - <g 635 635 - fill="none" 636 636 - stroke="currentColor" 637 637 - strokeLinecap="round" 638 638 - strokeLinejoin="round" 639 639 - strokeWidth={2} 640 640 - > 641 641 - <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0"></path> 642 642 - <path d="m21 21l-6-6"></path> 643 643 - </g> 644 644 - </svg> 645 645 - ); 646 646 - } 647 647 - export function TablerSearchFilled(props: SVGProps<SVGSVGElement>) { 648 648 - return ( 649 649 - <svg 650 650 - xmlns="http://www.w3.org/2000/svg" 651 651 - width={24} 652 652 - height={24} 653 653 - viewBox="0 0 24 24" 654 654 - //className="text-gray-400 dark:text-gray-500" 655 655 - {...props} 656 656 - > 657 657 - <g 658 658 - fill="none" 659 659 - stroke="currentColor" 660 660 - strokeLinecap="round" 661 661 - strokeLinejoin="round" 662 662 - strokeWidth={3} 663 663 - > 664 664 - <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0"></path> 665 665 - <path d="m21 21l-6-6"></path> 666 666 - </g> 667 667 - </svg> 760 760 + {text} 761 761 + </span> 762 762 + </button> 668 763 ); 669 764 } 670 765 671 671 - export function IonSettings(props: SVGProps<SVGSVGElement>) { 672 672 - return ( 673 673 - <svg 674 674 - xmlns="http://www.w3.org/2000/svg" 675 675 - width={24} 676 676 - height={24} 677 677 - viewBox="0 0 512 512" 678 678 - {...props} 679 679 - > 680 680 - <path 681 681 - fill="none" 682 682 - stroke="currentColor" 683 683 - strokeLinecap="round" 684 684 - strokeLinejoin="round" 685 685 - strokeWidth={32} 686 686 - d="M262.29 192.31a64 64 0 1 0 57.4 57.4a64.13 64.13 0 0 0-57.4-57.4M416.39 256a154 154 0 0 1-1.53 20.79l45.21 35.46a10.81 10.81 0 0 1 2.45 13.75l-42.77 74a10.81 10.81 0 0 1-13.14 4.59l-44.9-18.08a16.11 16.11 0 0 0-15.17 1.75A164.5 164.5 0 0 1 325 400.8a15.94 15.94 0 0 0-8.82 12.14l-6.73 47.89a11.08 11.08 0 0 1-10.68 9.17h-85.54a11.11 11.11 0 0 1-10.69-8.87l-6.72-47.82a16.07 16.07 0 0 0-9-12.22a155 155 0 0 1-21.46-12.57a16 16 0 0 0-15.11-1.71l-44.89 18.07a10.81 10.81 0 0 1-13.14-4.58l-42.77-74a10.8 10.8 0 0 1 2.45-13.75l38.21-30a16.05 16.05 0 0 0 6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 0 0-6.07-13.94l-38.19-30A10.81 10.81 0 0 1 49.48 186l42.77-74a10.81 10.81 0 0 1 13.14-4.59l44.9 18.08a16.11 16.11 0 0 0 15.17-1.75A164.5 164.5 0 0 1 187 111.2a15.94 15.94 0 0 0 8.82-12.14l6.73-47.89A11.08 11.08 0 0 1 213.23 42h85.54a11.11 11.11 0 0 1 10.69 8.87l6.72 47.82a16.07 16.07 0 0 0 9 12.22a155 155 0 0 1 21.46 12.57a16 16 0 0 0 15.11 1.71l44.89-18.07a10.81 10.81 0 0 1 13.14 4.58l42.77 74a10.8 10.8 0 0 1-2.45 13.75l-38.21 30a16.05 16.05 0 0 0-6.05 14.08c.33 4.14.55 8.3.55 12.47" 687 687 - ></path> 688 688 - </svg> 689 689 - ); 690 690 - } 691 691 - export function IonSettingsSharp(props: SVGProps<SVGSVGElement>) { 766 766 + function MaterialPillButton({ 767 767 + InactiveIcon, 768 768 + ActiveIcon, 769 769 + text, 770 770 + //active, 771 771 + onClickCallbback, 772 772 + small, 773 773 + }: { 774 774 + InactiveIcon: React.ReactElement; 775 775 + ActiveIcon: React.ReactElement; 776 776 + text: string; 777 777 + //active: boolean; 778 778 + onClickCallbback: () => void; 779 779 + small?: boolean | string; 780 780 + }) { 781 781 + const active = false; 692 782 return ( 693 693 - <svg 694 694 - xmlns="http://www.w3.org/2000/svg" 695 695 - width={24} 696 696 - height={24} 697 697 - viewBox="0 0 512 512" 698 698 - {...props} 783 783 + <button 784 784 + className={`flex border border-gray-400 dark:border-gray-400 flex-row h-12 min-h-12 max-h-12 ${small ? "p-3 w-12" : "px-4 py-0.5"} items-center rounded-full transition-colors gap-1 ${ 785 785 + active 786 786 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 787 787 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 788 788 + }`} 789 789 + onClick={() => { 790 790 + onClickCallbback(); 791 791 + }} 699 792 > 700 700 - <path 701 701 - fill="currentColor" 702 702 - d="M256 176a80 80 0 1 0 80 80a80.24 80.24 0 0 0-80-80m172.72 80a165.5 165.5 0 0 1-1.64 22.34l48.69 38.12a11.59 11.59 0 0 1 2.63 14.78l-46.06 79.52a11.64 11.64 0 0 1-14.14 4.93l-57.25-23a176.6 176.6 0 0 1-38.82 22.67l-8.56 60.78a11.93 11.93 0 0 1-11.51 9.86h-92.12a12 12 0 0 1-11.51-9.53l-8.56-60.78A169.3 169.3 0 0 1 151.05 393L93.8 416a11.64 11.64 0 0 1-14.14-4.92L33.6 331.57a11.59 11.59 0 0 1 2.63-14.78l48.69-38.12A175 175 0 0 1 83.28 256a165.5 165.5 0 0 1 1.64-22.34l-48.69-38.12a11.59 11.59 0 0 1-2.63-14.78l46.06-79.52a11.64 11.64 0 0 1 14.14-4.93l57.25 23a176.6 176.6 0 0 1 38.82-22.67l8.56-60.78A11.93 11.93 0 0 1 209.94 26h92.12a12 12 0 0 1 11.51 9.53l8.56 60.78A169.3 169.3 0 0 1 361 119l57.2-23a11.64 11.64 0 0 1 14.14 4.92l46.06 79.52a11.59 11.59 0 0 1-2.63 14.78l-48.69 38.12a175 175 0 0 1 1.64 22.66" 703 703 - ></path> 704 704 - </svg> 793 793 + <div className={`${!small && "mr-2"} ${active ? " " : " "}`}> 794 794 + {active ? ActiveIcon : InactiveIcon} 795 795 + </div> 796 796 + {!small && ( 797 797 + <span 798 798 + className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`} 799 799 + > 800 800 + {text} 801 801 + </span> 802 802 + )} 803 803 + </button> 705 804 ); 706 805 }

+28 -13

src/routes/index.tsx

··· 3 3 import * as React from "react"; 4 4 import { useEffect, useLayoutEffect } from "react"; 5 5 6 6 + import { Header } from "~/components/Header"; 6 7 import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed"; 7 8 import { useAuth } from "~/providers/UnifiedAuthProvider"; 8 9 import { 9 10 agentAtom, 10 11 authedAtom, 11 12 feedScrollPositionsAtom, 13 13 + isAtTopAtom, 12 14 selectedFeedUriAtom, 13 15 store, 14 16 } from "~/utils/atoms"; ··· 349 351 authed && agent && identity?.pds && feedServiceDid; 350 352 const isReadyForUnauthedFeed = !authed && selectedFeed; 351 353 354 354 + 355 355 + const [isAtTop] = useAtom(isAtTopAtom); 356 356 + 352 357 return ( 353 358 <div 354 359 className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`} 355 360 > 356 356 - <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin"> 357 357 - {savedFeeds.length > 0 ? ( 358 358 - savedFeeds.map((item: any, idx: number) => { 361 361 + {savedFeeds.length > 0 ? ( 362 362 + <div className={`flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] ${!isAtTop && "shadow-sm"} sm:shadow-none sm:bg-white sm:dark:bg-gray-950 z-10 border-0 sm:border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin`}> 363 363 + {savedFeeds.map((item: any, idx: number) => { 359 364 const label = item.value.split("/").pop() || item.value; 360 365 const isActive = selectedFeed === item.value; 361 366 return ( ··· 363 368 key={item.value || idx} 364 369 className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 365 370 isActive 366 366 - ? "bg-gray-500 text-white" 367 367 - : item.pinned 368 368 - ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 369 369 - : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 371 371 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 372 372 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 373 373 + // ? "bg-gray-500 text-white" 374 374 + // : item.pinned 375 375 + // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 376 376 + // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 370 377 }`} 371 378 onClick={() => setSelectedFeed(item.value)} 372 379 title={item.value} 373 380 > 374 381 {label} 375 382 {item.pinned && ( 376 376 - <span className="ml-1 text-xs text-gray-700 dark:text-gray-200"> 383 383 + <span 384 384 + className={`ml-1 text-xs ${ 385 385 + isActive 386 386 + ? "text-gray-900 dark:text-gray-100" 387 387 + : "text-gray-600 dark:text-gray-400" 388 388 + }`} 389 389 + > 377 390 ★ 378 391 </span> 379 392 )} 380 393 </button> 381 394 ); 382 382 - }) 383 383 - ) : ( 384 384 - <span className="text-xl font-bold ml-2">Home</span> 385 385 - )} 386 386 - </div> 395 395 + })} 396 396 + </div> 397 397 + ) : ( 398 398 + // <span className="text-xl font-bold ml-2">Home</span> 399 399 + <Header title="Home" /> 400 400 + )} 387 401 {/* {isFeedLoading && <div className="p-4 text-gray-500">Loading...</div>} 388 402 {feedError && <div className="p-4 text-red-500">{feedError.message}</div>} 389 403 {!isFeedLoading && !feedError && feed.length === 0 && ( ··· 404 418 405 419 {isReadyForAuthedFeed || isReadyForUnauthedFeed ? ( 406 420 <InfiniteCustomFeed 421 421 + key={selectedFeed!} 407 422 feedUri={selectedFeed!} 408 423 pdsUrl={identity?.pds} 409 424 feedServiceDid={feedServiceDid}

+7 -3

src/routes/notifications.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 + import { useAtom } from "jotai"; 2 3 import React, { useEffect, useRef,useState } from "react"; 3 4 4 5 import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 + import { constellationURLAtom } from "~/utils/atoms"; 5 7 6 8 const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour 7 9 ··· 70 72 } 71 73 } 72 74 75 75 + const [constellationURL] = useAtom(constellationURLAtom) 76 76 + 73 77 useEffect(() => { 74 78 if (!did) return; 75 79 setLoading(true); 76 80 setError(null); 77 81 const urls = [ 78 78 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`, 79 79 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`, 80 80 - `https://constellation.microcosm.blue/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`, 82 82 + `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet%23mention].did`, 83 83 + `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.feed.post&path=.facets[].features[app.bsky.richtext.facet%23mention].did`, 84 84 + `https://${constellationURL}/links?target=${encodeURIComponent(did)}&collection=app.bsky.graph.follow&path=.subject`, 81 85 ]; 82 86 let ignore = false; 83 87 Promise.all(

+207 -58

src/routes/profile.$did/index.tsx

··· 1 1 + import { RichText } from "@atproto/api"; 1 2 import { useQueryClient } from "@tanstack/react-query"; 2 2 - import { createFileRoute, Link } from "@tanstack/react-router"; 3 3 - import React from "react"; 3 3 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import React, { type ReactNode, useEffect, useState } from "react"; 4 6 5 5 - import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 7 7 + import { Header } from "~/components/Header"; 8 8 + import { 9 9 + renderTextWithFacets, 10 10 + UniversalPostRendererATURILoader, 11 11 + } from "~/components/UniversalPostRenderer"; 6 12 import { useAuth } from "~/providers/UnifiedAuthProvider"; 7 7 - import { toggleFollow, useGetFollowState } from "~/utils/followState"; 13 13 + import { aturiListServiceAtom, imgCDNAtom } from "~/utils/atoms"; 8 14 import { 9 9 - useInfiniteQueryAuthorFeed, 15 15 + toggleFollow, 16 16 + useGetFollowState, 17 17 + useGetOneToOneState, 18 18 + } from "~/utils/followState"; 19 19 + import { 20 20 + useInfiniteQueryAturiList, 10 21 useQueryIdentity, 11 22 useQueryProfile, 12 23 } from "~/utils/useQuery"; ··· 18 29 function ProfileComponent() { 19 30 // booo bad this is not always the did it might be a handle, use identity.did instead 20 31 const { did } = Route.useParams(); 32 32 + //const navigate = useNavigate(); 21 33 const queryClient = useQueryClient(); 22 22 - const { agent } = useAuth(); 23 34 const { 24 35 data: identity, 25 36 isLoading: isIdentityLoading, 26 37 error: identityError, 27 38 } = useQueryIdentity(did); 28 39 29 29 - const followRecords = useGetFollowState({ 30 30 - target: identity?.did || did, 31 31 - user: agent?.did, 32 32 - }); 33 33 - 34 40 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 35 41 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; 36 36 - const pdsUrl = identity?.pds; 42 42 + //const pdsUrl = identity?.pds; 37 43 38 44 const profileUri = resolvedDid 39 45 ? `at://${resolvedDid}/app.bsky.actor.profile/self` ··· 41 47 const { data: profileRecord } = useQueryProfile(profileUri); 42 48 const profile = profileRecord?.value; 43 49 50 50 + const [aturilistservice] = useAtom(aturiListServiceAtom); 51 51 + 44 52 const { 45 53 data: postsData, 46 54 fetchNextPage, 47 55 hasNextPage, 48 56 isFetchingNextPage, 49 57 isLoading: arePostsLoading, 50 50 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 58 58 + } = useInfiniteQueryAturiList({ 59 59 + aturilistservice: aturilistservice, 60 60 + did: resolvedDid, 61 61 + collection: "app.bsky.feed.post", 62 62 + reverse: true 63 63 + }); 51 64 52 65 React.useEffect(() => { 53 66 if (postsData) { 54 67 postsData.pages.forEach((page) => { 55 55 - page.records.forEach((record) => { 68 68 + page.forEach((record) => { 56 69 if (!queryClient.getQueryData(["post", record.uri])) { 57 70 queryClient.setQueryData(["post", record.uri], record); 58 71 } ··· 62 75 }, [postsData, queryClient]); 63 76 64 77 const posts = React.useMemo( 65 65 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 78 78 + () => postsData?.pages.flatMap((page) => page) ?? [], 66 79 [postsData] 67 80 ); 68 81 82 82 + const [imgcdn] = useAtom(imgCDNAtom); 83 83 + 69 84 function getAvatarUrl(p: typeof profile) { 70 85 const link = p?.avatar?.ref?.["$link"]; 71 86 if (!link || !resolvedDid) return null; 72 72 - return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 87 87 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 73 88 } 74 89 function getBannerUrl(p: typeof profile) { 75 90 const link = p?.banner?.ref?.["$link"]; 76 91 if (!link || !resolvedDid) return null; 77 77 - return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`; 92 92 + return `https://${imgcdn}/img/banner/plain/${resolvedDid}/${link}@jpeg`; 78 93 } 79 94 80 95 const displayName = ··· 104 119 105 120 return ( 106 121 <> 107 107 - <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700"> 122 122 + <Header 123 123 + title={`Profile`} 124 124 + backButtonCallback={() => { 125 125 + if (window.history.length > 1) { 126 126 + window.history.back(); 127 127 + } else { 128 128 + window.location.assign("/"); 129 129 + } 130 130 + }} 131 131 + /> 132 132 + {/* <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700"> 108 133 <Link 109 134 to=".." 110 135 className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" ··· 121 146 ← 122 147 </Link> 123 148 <span className="text-xl font-bold ml-2">Profile</span> 124 124 - </div> 149 149 + </div> */} 125 150 126 151 {/* Profile Header */} 127 152 <div className="w-full max-w-2xl mx-auto overflow-hidden relative bg-gray-100 dark:bg-gray-900"> ··· 151 176 also delay the backfill to be on demand because it would be pretty intense 152 177 also save it persistently 153 178 */} 154 154 - {identity?.did !== agent?.did ? ( 155 155 - <> 156 156 - {!(followRecords?.length && followRecords?.length > 0) ? ( 157 157 - <button 158 158 - onClick={() => 159 159 - toggleFollow({ 160 160 - agent: agent || undefined, 161 161 - targetDid: identity?.did, 162 162 - followRecords: followRecords, 163 163 - queryClient: queryClient, 164 164 - }) 165 165 - } 166 166 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 167 167 - > 168 168 - Follow 169 169 - </button> 170 170 - ) : ( 171 171 - <button 172 172 - onClick={() => 173 173 - toggleFollow({ 174 174 - agent: agent || undefined, 175 175 - targetDid: identity?.did, 176 176 - followRecords: followRecords, 177 177 - queryClient: queryClient, 178 178 - }) 179 179 - } 180 180 - className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 181 181 - > 182 182 - Unfollow 183 183 - </button> 184 184 - )} 185 185 - </> 186 186 - ) : ( 187 187 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 188 188 - Edit Profile 189 189 - </button> 190 190 - )} 179 179 + <FollowButton targetdidorhandle={did} /> 191 180 <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 192 181 ... {/* todo: icon */} 193 182 </button> ··· 196 185 {/* Info Card */} 197 186 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 198 187 <div className="font-bold text-2xl">{displayName}</div> 199 199 - <div className="text-gray-500 dark:text-gray-400 text-base mb-3"> 188 188 + <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1"> 189 189 + <Mutual targetdidorhandle={did} /> 200 190 {handle} 201 191 </div> 202 192 {description && ( 203 193 <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]"> 204 204 - {description} 194 194 + {/* {description} */} 195 195 + <RichTextRenderer key={did} description={description} /> 205 196 </div> 206 197 )} 207 198 </div> ··· 244 235 </> 245 236 ); 246 237 } 238 238 + 239 239 + export function FollowButton({ 240 240 + targetdidorhandle, 241 241 + }: { 242 242 + targetdidorhandle: string; 243 243 + }) { 244 244 + const { agent } = useAuth(); 245 245 + const { data: identity } = useQueryIdentity(targetdidorhandle); 246 246 + const queryClient = useQueryClient(); 247 247 + 248 248 + const followRecords = useGetFollowState({ 249 249 + target: identity?.did ?? targetdidorhandle, 250 250 + user: agent?.did, 251 251 + }); 252 252 + 253 253 + return ( 254 254 + <> 255 255 + {identity?.did !== agent?.did ? ( 256 256 + <> 257 257 + {!(followRecords?.length && followRecords?.length > 0) ? ( 258 258 + <button 259 259 + onClick={(e) => { 260 260 + e.stopPropagation(); 261 261 + toggleFollow({ 262 262 + agent: agent || undefined, 263 263 + targetDid: identity?.did, 264 264 + followRecords: followRecords, 265 265 + queryClient: queryClient, 266 266 + }); 267 267 + }} 268 268 + className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]" 269 269 + > 270 270 + Follow 271 271 + </button> 272 272 + ) : ( 273 273 + <button 274 274 + onClick={(e) => { 275 275 + e.stopPropagation(); 276 276 + toggleFollow({ 277 277 + agent: agent || undefined, 278 278 + targetDid: identity?.did, 279 279 + followRecords: followRecords, 280 280 + queryClient: queryClient, 281 281 + }); 282 282 + }} 283 283 + className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]" 284 284 + > 285 285 + Unfollow 286 286 + </button> 287 287 + )} 288 288 + </> 289 289 + ) : ( 290 290 + <button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"> 291 291 + Edit Profile 292 292 + </button> 293 293 + )} 294 294 + </> 295 295 + ); 296 296 + } 297 297 + 298 298 + export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 299 299 + const { agent } = useAuth(); 300 300 + const { data: identity } = useQueryIdentity(targetdidorhandle); 301 301 + 302 302 + const theyFollowYouRes = useGetOneToOneState( 303 303 + agent?.did 304 304 + ? { 305 305 + target: agent?.did, 306 306 + user: identity?.did ?? targetdidorhandle, 307 307 + collection: "app.bsky.graph.follow", 308 308 + path: ".subject", 309 309 + } 310 310 + : undefined 311 311 + ); 312 312 + 313 313 + const youFollowThemRes = useGetFollowState({ 314 314 + target: identity?.did ?? targetdidorhandle, 315 315 + user: agent?.did, 316 316 + }); 317 317 + 318 318 + const theyFollowYou: boolean = 319 319 + !!theyFollowYouRes?.length && theyFollowYouRes.length > 0; 320 320 + const youFollowThem: boolean = 321 321 + !!youFollowThemRes?.length && youFollowThemRes.length > 0; 322 322 + 323 323 + return ( 324 324 + <> 325 325 + {/* if not self */} 326 326 + {identity?.did !== agent?.did ? ( 327 327 + <> 328 328 + {theyFollowYou ? ( 329 329 + <> 330 330 + {youFollowThem ? ( 331 331 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 332 332 + mutuals 333 333 + </div> 334 334 + ) : ( 335 335 + <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center"> 336 336 + follows you 337 337 + </div> 338 338 + )} 339 339 + </> 340 340 + ) : ( 341 341 + <></> 342 342 + )} 343 343 + </> 344 344 + ) : ( 345 345 + // lmao can someone be mutuals with themselves ?? 346 346 + <></> 347 347 + )} 348 348 + </> 349 349 + ); 350 350 + } 351 351 + 352 352 + export function RichTextRenderer({ description }: { description: string }) { 353 353 + const [richDescription, setRichDescription] = useState<string | ReactNode[]>( 354 354 + description 355 355 + ); 356 356 + const { agent } = useAuth(); 357 357 + const navigate = useNavigate(); 358 358 + 359 359 + useEffect(() => { 360 360 + let mounted = true; 361 361 + 362 362 + // setRichDescription(description); 363 363 + 364 364 + async function processRichText() { 365 365 + try { 366 366 + if (!agent?.did) return; 367 367 + const rt = new RichText({ text: description }); 368 368 + await rt.detectFacets(agent); 369 369 + 370 370 + if (!mounted) return; 371 371 + 372 372 + if (rt.facets) { 373 373 + setRichDescription( 374 374 + renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }) 375 375 + ); 376 376 + } else { 377 377 + setRichDescription(rt.text); 378 378 + } 379 379 + } catch (error) { 380 380 + console.error("Failed to detect facets:", error); 381 381 + if (mounted) { 382 382 + setRichDescription(description); 383 383 + } 384 384 + } 385 385 + } 386 386 + 387 387 + processRichText(); 388 388 + 389 389 + return () => { 390 390 + mounted = false; 391 391 + }; 392 392 + }, [description, agent, navigate]); 393 393 + 394 394 + return <>{richDescription}</>; 395 395 + }

+165

src/routes/profile.$did/post.$rkey.image.$i.tsx

··· 1 1 + import { 2 2 + createFileRoute, 3 3 + useNavigate, 4 4 + type UseNavigateResult, 5 5 + } from "@tanstack/react-router"; 6 6 + import { useEffect, useState } from "react"; 7 7 + import { createPortal } from "react-dom"; 8 8 + 9 9 + import { ProfilePostComponent } from "./post.$rkey"; 10 10 + 11 11 + export const Route = createFileRoute("/profile/$did/post/$rkey/image/$i")({ 12 12 + component: Lightbox, 13 13 + }); 14 14 + 15 15 + export type LightboxProps = { 16 16 + images: { src: string; alt?: string }[]; 17 17 + }; 18 18 + 19 19 + function nextprev({ 20 20 + index, 21 21 + images, 22 22 + navigate, 23 23 + did, 24 24 + rkey, 25 25 + prev, 26 26 + }: { 27 27 + index?: number; 28 28 + images?: LightboxProps["images"]; 29 29 + navigate: UseNavigateResult<string>; 30 30 + did: string; 31 31 + rkey: string; 32 32 + prev?: boolean; 33 33 + }) { 34 34 + const len = images?.length ?? 0; 35 35 + if (len === 0) return; 36 36 + 37 37 + const nextIndex = ((index ?? 0) + (prev ? -1 : 1) + len) % len; 38 38 + 39 39 + navigate({ 40 40 + to: "/profile/$did/post/$rkey/image/$i", 41 41 + params: { 42 42 + did, 43 43 + rkey, 44 44 + i: nextIndex.toString(), 45 45 + }, 46 46 + replace: true, 47 47 + }); 48 48 + } 49 49 + 50 50 + export function Lightbox() { 51 51 + console.log("hey the $i route is loaded w!!!"); 52 52 + const { did, rkey, i } = Route.useParams(); 53 53 + const [images, setImages] = useState<LightboxProps["images"] | undefined>( 54 54 + undefined 55 55 + ); 56 56 + const index = Number(i); 57 57 + const navigate = useNavigate(); 58 58 + const post = true; 59 59 + const image = images?.[index] ?? undefined; 60 60 + 61 61 + function lightboxCallback(d: LightboxProps) { 62 62 + console.log("callback actually called!"); 63 63 + setImages(d.images); 64 64 + } 65 65 + 66 66 + useEffect(() => { 67 67 + function handleKey(e: KeyboardEvent) { 68 68 + if (e.key === "Escape") window.history.back(); 69 69 + if (e.key === "ArrowRight") 70 70 + nextprev({ index, images, navigate, did, rkey }); 71 71 + //onNavigate((index + 1) % images.length); 72 72 + if (e.key === "ArrowLeft") 73 73 + nextprev({ index, images, navigate, did, rkey, prev: true }); 74 74 + //onNavigate((index - 1 + images.length) % images.length); 75 75 + } 76 76 + window.addEventListener("keydown", handleKey); 77 77 + return () => window.removeEventListener("keydown", handleKey); 78 78 + }, [index, navigate, did, rkey, images]); 79 79 + 80 80 + return createPortal( 81 81 + <> 82 82 + {post && ( 83 83 + <div 84 84 + onClick={(e) => { 85 85 + e.stopPropagation(); 86 86 + e.nativeEvent.stopImmediatePropagation(); 87 87 + }} 88 88 + className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white" 89 89 + > 90 90 + <ProfilePostComponent 91 91 + key={`/profile/${did}/post/${rkey}`} 92 92 + did={did} 93 93 + rkey={rkey} 94 94 + nopics 95 95 + lightboxCallback={lightboxCallback} 96 96 + /> 97 97 + </div> 98 98 + )} 99 99 + <div 100 100 + className="lightbox fixed inset-0 z-50 flex items-center justify-center bg-black/80 w-screen lg:w-[calc(100vw-350px)] lg:max-w-[calc(100vw-350px)]" 101 101 + onClick={(e) => { 102 102 + e.stopPropagation(); 103 103 + window.history.back(); 104 104 + }} 105 105 + > 106 106 + <img 107 107 + src={image?.src} 108 108 + alt={image?.alt} 109 109 + className="max-h-[90%] max-w-[90%] object-contain rounded-lg shadow-lg" 110 110 + onClick={(e) => e.stopPropagation()} 111 111 + /> 112 112 + 113 113 + {(images?.length ?? 0) > 1 && ( 114 114 + <> 115 115 + <button 116 116 + onClick={(e) => { 117 117 + e.stopPropagation(); 118 118 + nextprev({ index, images, navigate, did, rkey, prev: true }); 119 119 + }} 120 120 + className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center" 121 121 + > 122 122 + <svg 123 123 + xmlns="http://www.w3.org/2000/svg" 124 124 + width={28} 125 125 + height={28} 126 126 + viewBox="0 0 24 24" 127 127 + > 128 128 + <g fill="none" fillRule="evenodd"> 129 129 + <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path> 130 130 + <path 131 131 + fill="currentColor" 132 132 + d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z" 133 133 + ></path> 134 134 + </g> 135 135 + </svg> 136 136 + </button> 137 137 + <button 138 138 + onClick={(e) => { 139 139 + e.stopPropagation(); 140 140 + nextprev({ index, images, navigate, did, rkey }); 141 141 + }} 142 142 + className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center" 143 143 + > 144 144 + <svg 145 145 + xmlns="http://www.w3.org/2000/svg" 146 146 + width={28} 147 147 + height={28} 148 148 + viewBox="0 0 24 24" 149 149 + > 150 150 + <g fill="none" fillRule="evenodd"> 151 151 + <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path> 152 152 + <path 153 153 + fill="currentColor" 154 154 + d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z" 155 155 + ></path> 156 156 + </g> 157 157 + </svg> 158 158 + </button> 159 159 + </> 160 160 + )} 161 161 + </div> 162 162 + </>, 163 163 + document.body 164 164 + ); 165 165 + }

+229 -80

src/routes/profile.$did/post.$rkey.tsx

··· 1 1 - import { useQueryClient } from "@tanstack/react-query"; 2 2 - import { createFileRoute } from "@tanstack/react-router"; 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query"; 3 3 + import { createFileRoute, Outlet } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 3 5 import React, { useLayoutEffect } from "react"; 4 6 7 7 + import { Header } from "~/components/Header"; 5 8 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 9 9 + import { constellationURLAtom, slingshotURLAtom } from "~/utils/atoms"; 6 10 //import { usePersistentStore } from '~/providers/PersistentStoreProvider'; 7 11 import { 8 12 constructPostQuery, 13 13 + type linksAllResponse, 14 14 + type linksRecordsResponse, 9 15 useQueryConstellation, 10 16 useQueryIdentity, 11 17 useQueryPost, 18 18 + yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks, 12 19 } from "~/utils/useQuery"; 20 20 + 21 21 + import type { LightboxProps } from "./post.$rkey.image.$i"; 13 22 14 23 //const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour 15 24 ··· 36 45 did, 37 46 rkey, 38 47 nopics, 48 48 + lightboxCallback, 39 49 }: { 40 50 did: string; 41 51 rkey: string; 42 42 - nopics?: () => void; 52 52 + nopics?: boolean; 53 53 + lightboxCallback?: (d: LightboxProps) => void; 43 54 }) { 44 55 //const { get, set } = usePersistentStore(); 45 56 const queryClient = useQueryClient(); ··· 187 198 () => 188 199 resolvedDid 189 200 ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` 190 190 - : "", 201 201 + : undefined, 191 202 [resolvedDid, rkey] 192 203 ); 193 204 194 205 const { data: mainPost } = useQueryPost(atUri); 195 206 196 196 - const { data: repliesData } = useQueryConstellation({ 197 197 - method: "/links", 207 207 + console.log("atUri",atUri) 208 208 + 209 209 + const opdid = React.useMemo( 210 210 + () => 211 211 + atUri 212 212 + ? new AtUri(atUri).host 213 213 + : undefined, 214 214 + [atUri] 215 215 + ); 216 216 + 217 217 + // @ts-expect-error i hate overloads 218 218 + const { data: links } = useQueryConstellation(atUri?{ 219 219 + method: "/links/all", 198 220 target: atUri, 199 199 - collection: "app.bsky.feed.post", 200 200 - path: ".reply.parent.uri", 221 221 + } : { 222 222 + method: "undefined", 223 223 + target: "" 224 224 + })as { data: linksAllResponse | undefined }; 225 225 + 226 226 + //const [likes, setLikes] = React.useState<number | null>(null); 227 227 + //const [reposts, setReposts] = React.useState<number | null>(null); 228 228 + const [replyCount, setReplyCount] = React.useState<number | null>(null); 229 229 + 230 230 + React.useEffect(() => { 231 231 + // /*mass comment*/ console.log(JSON.stringify(links, null, 2)); 232 232 + // setLikes( 233 233 + // links 234 234 + // ? links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0 235 235 + // : null 236 236 + // ); 237 237 + // setReposts( 238 238 + // links 239 239 + // ? links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0 240 240 + // : null 241 241 + // ); 242 242 + setReplyCount( 243 243 + links 244 244 + ? links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"] 245 245 + ?.records || 0 246 246 + : null 247 247 + ); 248 248 + }, [links]); 249 249 + 250 250 + const { data: opreplies } = useQueryConstellation( 251 251 + !!opdid && replyCount && replyCount >= 25 252 252 + ? { 253 253 + method: "/links", 254 254 + target: atUri, 255 255 + // @ts-expect-error overloading sucks so much 256 256 + collection: "app.bsky.feed.post", 257 257 + path: ".reply.parent.uri", 258 258 + //cursor?: string; 259 259 + dids: [opdid], 260 260 + } 261 261 + : { 262 262 + method: "undefined", 263 263 + target: "", 264 264 + } 265 265 + ) as { data: linksRecordsResponse | undefined }; 266 266 + 267 267 + const opReplyAturis = 268 268 + opreplies?.linking_records.map( 269 269 + (r) => `at://${r.did}/${r.collection}/${r.rkey}`, 270 270 + ) ?? []; 271 271 + 272 272 + 273 273 + // const { data: repliesData } = useQueryConstellation({ 274 274 + // method: "/links", 275 275 + // target: atUri, 276 276 + // collection: "app.bsky.feed.post", 277 277 + // path: ".reply.parent.uri", 278 278 + // }); 279 279 + // const replies = repliesData?.linking_records.slice(0, 50) ?? []; 280 280 + const [constellationurl] = useAtom(constellationURLAtom) 281 281 + 282 282 + const infinitequeryresults = useInfiniteQuery({ 283 283 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 284 284 + { 285 285 + constellation: constellationurl, 286 286 + method: "/links", 287 287 + target: atUri, 288 288 + collection: "app.bsky.feed.post", 289 289 + path: ".reply.parent.uri", 290 290 + } 291 291 + ), 292 292 + enabled: !!atUri, 201 293 }); 202 202 - const replies = repliesData?.linking_records.slice(0, 50) ?? []; 294 294 + 295 295 + const { 296 296 + data: infiniteRepliesData, 297 297 + fetchNextPage, 298 298 + hasNextPage, 299 299 + isFetchingNextPage, 300 300 + } = infinitequeryresults; 301 301 + 302 302 + // // auto-fetch all pages 303 303 + // useEffect(() => { 304 304 + // if ( 305 305 + // infinitequeryresults.hasNextPage && 306 306 + // !infinitequeryresults.isFetchingNextPage 307 307 + // ) { 308 308 + // console.log("Fetching the next page..."); 309 309 + // infinitequeryresults.fetchNextPage(); 310 310 + // } 311 311 + // }, [infinitequeryresults]); 312 312 + 313 313 + // const replyAturis = repliesData 314 314 + // ? repliesData.pages.flatMap((page) => 315 315 + // page 316 316 + // ? page.linking_records.map((record) => { 317 317 + // const aturi = `at://${record.did}/${record.collection}/${record.rkey}`; 318 318 + // return aturi; 319 319 + // }) 320 320 + // : [] 321 321 + // ) 322 322 + // : []; 323 323 + 324 324 + const replyAturis = React.useMemo(() => { 325 325 + // Get all replies from the standard infinite query 326 326 + const allReplies = 327 327 + infiniteRepliesData?.pages.flatMap( 328 328 + (page) => 329 329 + page?.linking_records.map( 330 330 + (r) => `at://${r.did}/${r.collection}/${r.rkey}`, 331 331 + ) ?? [], 332 332 + ) ?? []; 333 333 + 334 334 + if (replyCount && (replyCount < 25)) { 335 335 + // If count is low, just use the standard list and find the oldest OP reply to move to the top 336 336 + const opdidFromUri = atUri ? new AtUri(atUri).host : undefined; 337 337 + const oldestOpsIndex = allReplies.findIndex( 338 338 + (aturi) => new AtUri(aturi).host === opdidFromUri, 339 339 + ); 340 340 + if (oldestOpsIndex > 0) { 341 341 + const [oldestOpsReply] = allReplies.splice(oldestOpsIndex, 1); 342 342 + allReplies.unshift(oldestOpsReply); 343 343 + } 344 344 + return allReplies; 345 345 + } else { 346 346 + // If count is high, prioritize OP replies from the special query 347 347 + // and filter them out from the main list to avoid duplication. 348 348 + const opReplySet = new Set(opReplyAturis); 349 349 + const otherReplies = allReplies.filter((uri) => !opReplySet.has(uri)); 350 350 + return [...opReplyAturis, ...otherReplies]; 351 351 + } 352 352 + }, [infiniteRepliesData, opReplyAturis, replyCount, atUri]); 353 353 + 354 354 + // Find oldest OP reply 355 355 + const oldestOpsIndex = replyAturis.findIndex( 356 356 + (aturi) => new AtUri(aturi).host === opdid 357 357 + ); 358 358 + 359 359 + // Reorder: move oldest OP reply to the front 360 360 + if (oldestOpsIndex > 0) { 361 361 + const [oldestOpsReply] = replyAturis.splice(oldestOpsIndex, 1); 362 362 + replyAturis.unshift(oldestOpsReply); 363 363 + } 203 364 204 365 const [parents, setParents] = React.useState<any[]>([]); 205 366 const [parentsLoading, setParentsLoading] = React.useState(false); 206 367 207 368 const mainPostRef = React.useRef<HTMLDivElement>(null); 208 208 - const userHasScrolled = React.useRef(false); 369 369 + const hasPerformedInitialLayout = React.useRef(false); 370 370 + 371 371 + const [layoutReady, setLayoutReady] = React.useState(false); 372 372 + 373 373 + useLayoutEffect(() => { 374 374 + if (parents.length > 0 && !layoutReady && mainPostRef.current) { 375 375 + const mainPostElement = mainPostRef.current; 376 376 + 377 377 + if (window.scrollY === 0 && !hasPerformedInitialLayout.current) { 378 378 + const elementTop = mainPostElement.getBoundingClientRect().top; 379 379 + const headerOffset = 70; 209 380 210 210 - const scrollAnchor = React.useRef<{ top: number } | null>(null); 381 381 + const targetScrollY = elementTop - headerOffset; 211 382 212 212 - React.useEffect(() => { 213 213 - const onScroll = () => { 214 214 - if (window.scrollY > 50) { 215 215 - userHasScrolled.current = true; 383 383 + window.scrollBy(0, targetScrollY); 216 384 217 217 - window.removeEventListener("scroll", onScroll); 385 385 + hasPerformedInitialLayout.current = true; 218 386 } 219 219 - }; 220 220 - 221 221 - if (!userHasScrolled.current) { 222 222 - window.addEventListener("scroll", onScroll, { passive: true }); 387 387 + 388 388 + // todo idk what to do with this 389 389 + // eslint-disable-next-line react-hooks/set-state-in-effect 390 390 + setLayoutReady(true); 223 391 } 224 224 - return () => window.removeEventListener("scroll", onScroll); 225 225 - }, []); 392 392 + }, [parents, layoutReady]); 226 393 227 227 - useLayoutEffect(() => { 228 228 - if (parentsLoading && mainPostRef.current && !userHasScrolled.current) { 229 229 - scrollAnchor.current = { 230 230 - top: mainPostRef.current.getBoundingClientRect().top, 231 231 - }; 394 394 + 395 395 + const [slingshoturl] = useAtom(slingshotURLAtom) 396 396 + 397 397 + React.useEffect(() => { 398 398 + if (parentsLoading) { 399 399 + setLayoutReady(false); 232 400 } 233 233 - }, [parentsLoading]); 234 401 235 235 - useLayoutEffect(() => { 236 236 - if ( 237 237 - scrollAnchor.current && 238 238 - mainPostRef.current && 239 239 - !userHasScrolled.current 240 240 - ) { 241 241 - const newTop = mainPostRef.current.getBoundingClientRect().top; 242 242 - const topDiff = newTop - scrollAnchor.current.top; 243 243 - if (topDiff > 0) { 244 244 - window.scrollBy(0, topDiff); 245 245 - } 246 246 - scrollAnchor.current = null; 402 402 + if (!mainPost?.value?.reply?.parent?.uri && !parentsLoading) { 403 403 + setLayoutReady(true); 404 404 + hasPerformedInitialLayout.current = true; 247 405 } 248 248 - }, [parents]); 406 406 + }, [parentsLoading, mainPost]); 249 407 250 408 React.useEffect(() => { 251 409 if (!mainPost?.value?.reply?.parent?.uri) { ··· 264 422 while (currentParentUri && safetyCounter < MAX_PARENTS) { 265 423 try { 266 424 const parentPost = await queryClient.fetchQuery( 267 267 - constructPostQuery(currentParentUri) 425 425 + constructPostQuery(currentParentUri, slingshoturl) 268 426 ); 269 427 if (!parentPost) break; 270 428 parentChain.push(parentPost); ··· 296 454 297 455 return ( 298 456 <> 299 299 - <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700"> 300 300 - {!nopics ? ( 301 301 - <button 302 302 - //to=".." 303 303 - className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 304 304 - onClick={(e) => { 305 305 - e.preventDefault(); 306 306 - if (window.history.length > 1) { 307 307 - window.history.back(); 308 308 - } else { 309 309 - window.location.assign("/"); 310 310 - } 311 311 - }} 312 312 - aria-label="Go back" 313 313 - > 314 314 - ← 315 315 - </button> 316 316 - ) : ( 317 317 - <button 318 318 - //to=".." 319 319 - className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 320 320 - onClick={(e) => { 321 321 - e.preventDefault(); 322 322 - nopics(); 323 323 - }} 324 324 - aria-label="Go back" 325 325 - > 326 326 - ← 327 327 - </button> 328 328 - )} 329 329 - <span className="text-xl font-bold ml-2">Post</span> 330 330 - </div> 457 457 + <Outlet /> 458 458 + <Header 459 459 + title={`Post`} 460 460 + backButtonCallback={() => { 461 461 + if (window.history.length > 1) { 462 462 + window.history.back(); 463 463 + } else { 464 464 + window.location.assign("/"); 465 465 + } 466 466 + }} 467 467 + /> 331 468 332 469 {parentsLoading && ( 333 470 <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> ··· 359 496 detailed={true} 360 497 topReplyLine={parentsLoading || parents.length > 0} 361 498 nopics={!!nopics} 499 499 + lightboxCallback={lightboxCallback} 362 500 /> 363 501 </div> 364 502 <div ··· 366 504 maxWidth: 600, 367 505 //margin: "0px auto 0", 368 506 padding: 0, 369 369 - minHeight: "100dvh", 507 507 + minHeight: "80dvh", 508 508 + paddingBottom: "20dvh", 370 509 }} 371 510 > 372 511 <div ··· 380 519 Replies 381 520 </div> 382 521 <div style={{ display: "flex", flexDirection: "column", gap: 0 }}> 383 383 - {replies.length > 0 && 384 384 - replies.map((reply) => { 385 385 - const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 522 522 + {replyAturis.length > 0 && 523 523 + replyAturis.map((reply) => { 524 524 + //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 386 525 return ( 387 526 <UniversalPostRendererATURILoader 388 388 - key={replyAtUri} 389 389 - atUri={replyAtUri} 527 527 + key={reply} 528 528 + atUri={reply} 529 529 + maxReplies={4} 390 530 /> 391 531 ); 392 532 })} 533 533 + {hasNextPage && ( 534 534 + <button 535 535 + onClick={() => fetchNextPage()} 536 536 + disabled={isFetchingNextPage} 537 537 + className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold disabled:opacity-50" 538 538 + > 539 539 + {isFetchingNextPage ? "Loading..." : "Load More"} 540 540 + </button> 541 541 + )} 393 542 </div> 394 543 </div> 395 544 </>

+50 -1

src/routes/search.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 + import { Header } from "~/components/Header"; 4 4 + import { Import } from "~/components/Import"; 5 5 + 3 6 export const Route = createFileRoute("/search")({ 4 7 component: Search, 5 8 }); 6 9 7 10 export function Search() { 8 8 - return <div className="p-6">Search page (coming soon)</div>; 11 11 + return ( 12 12 + <> 13 13 + <Header 14 14 + title="Explore" 15 15 + backButtonCallback={() => { 16 16 + if (window.history.length > 1) { 17 17 + window.history.back(); 18 18 + } else { 19 19 + window.location.assign("/"); 20 20 + } 21 21 + }} 22 22 + /> 23 23 + <div className=" flex flex-col items-center mt-4 mx-4 gap-4"> 24 24 + <Import /> 25 25 + <div className="flex flex-col"> 26 26 + <p className="text-gray-600 dark:text-gray-400"> 27 27 + Sorry we dont have search. But instead, you can load some of these 28 28 + types of content into Red Dwarf: 29 29 + </p> 30 30 + <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400"> 31 31 + <li> 32 32 + Bluesky URLs from supported clients (like{" "} 33 33 + <code className="text-sm">bsky.app</code> or{" "} 34 34 + <code className="text-sm">deer.social</code>). 35 35 + </li> 36 36 + <li> 37 37 + AT-URIs (e.g.,{" "} 38 38 + <code className="text-sm">at://did:example/collection/item</code> 39 39 + ). 40 40 + </li> 41 41 + <li> 42 42 + Plain handles (like{" "} 43 43 + <code className="text-sm">@username.bsky.social</code>). 44 44 + </li> 45 45 + <li> 46 46 + Direct DIDs (Decentralized Identifiers, starting with{" "} 47 47 + <code className="text-sm">did:</code>). 48 48 + </li> 49 49 + </ul> 50 50 + <p className="mt-2 text-gray-600 dark:text-gray-400"> 51 51 + Simply paste one of these into the import field above and press 52 52 + Enter to load the content. 53 53 + </p> 54 54 + </div> 55 55 + </div> 56 56 + </> 57 57 + ); 9 58 }

+189 -1

src/routes/settings.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 + import { useAtom } from "jotai"; 3 3 + import { Slider } from "radix-ui"; 4 4 + 5 5 + import { Header } from "~/components/Header"; 6 6 + import Login from "~/components/Login"; 7 7 + import { 8 8 + aturiListServiceAtom, 9 9 + constellationURLAtom, 10 10 + defaultaturilistservice, 11 11 + defaultconstellationURL, 12 12 + defaulthue, 13 13 + defaultImgCDN, 14 14 + defaultslingshotURL, 15 15 + defaultVideoCDN, 16 16 + hueAtom, 17 17 + imgCDNAtom, 18 18 + slingshotURLAtom, 19 19 + videoCDNAtom, 20 20 + } from "~/utils/atoms"; 2 21 3 22 export const Route = createFileRoute("/settings")({ 4 23 component: Settings, 5 24 }); 6 25 7 26 export function Settings() { 8 8 - return <div className="p-6">Settings page (coming soon)</div>; 27 27 + return ( 28 28 + <> 29 29 + <Header 30 30 + title="Settings" 31 31 + backButtonCallback={() => { 32 32 + if (window.history.length > 1) { 33 33 + window.history.back(); 34 34 + } else { 35 35 + window.location.assign("/"); 36 36 + } 37 37 + }} 38 38 + /> 39 39 + <div className="lg:hidden"> 40 40 + <Login /> 41 41 + </div> 42 42 + <div className="h-4" /> 43 43 + <TextInputSetting 44 44 + atom={constellationURLAtom} 45 45 + title={"Constellation"} 46 46 + description={ 47 47 + "Customize the Constellation instance to be used by Red Dwarf" 48 48 + } 49 49 + init={defaultconstellationURL} 50 50 + /> 51 51 + <TextInputSetting 52 52 + atom={slingshotURLAtom} 53 53 + title={"Slingshot"} 54 54 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 55 55 + init={defaultslingshotURL} 56 56 + /> 57 57 + <TextInputSetting 58 58 + atom={aturiListServiceAtom} 59 59 + title={"AtUriListService"} 60 60 + description={"Customize the AtUriListService instance to be used by Red Dwarf"} 61 61 + init={defaultaturilistservice} 62 62 + /> 63 63 + <TextInputSetting 64 64 + atom={imgCDNAtom} 65 65 + title={"Image CDN"} 66 66 + description={ 67 67 + "Customize the Constellation instance to be used by Red Dwarf" 68 68 + } 69 69 + init={defaultImgCDN} 70 70 + /> 71 71 + <TextInputSetting 72 72 + atom={videoCDNAtom} 73 73 + title={"Video CDN"} 74 74 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 75 75 + init={defaultVideoCDN} 76 76 + /> 77 77 + 78 78 + <Hue /> 79 79 + <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm"> 80 80 + please restart/refresh the app if changes arent applying correctly 81 81 + </p> 82 82 + </> 83 83 + ); 9 84 } 85 85 + function Hue() { 86 86 + const [hue, setHue] = useAtom(hueAtom); 87 87 + return ( 88 88 + <div className="flex flex-col px-4 mt-4 "> 89 89 + <span className="z-10">Hue</span> 90 90 + <div className="flex flex-row items-center gap-4"> 91 91 + <SliderComponent 92 92 + atom={hueAtom} 93 93 + max={360} 94 94 + /> 95 95 + <button 96 96 + onClick={() => setHue(defaulthue ?? 28)} 97 97 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 98 98 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 99 99 + > 100 100 + Reset 101 101 + </button> 102 102 + </div> 103 103 + </div> 104 104 + ); 105 105 + } 106 106 + 107 107 + export function TextInputSetting({ 108 108 + atom, 109 109 + title, 110 110 + description, 111 111 + init, 112 112 + }: { 113 113 + atom: typeof constellationURLAtom; 114 114 + title?: string; 115 115 + description?: string; 116 116 + init?: string; 117 117 + }) { 118 118 + const [value, setValue] = useAtom(atom); 119 119 + return ( 120 120 + <div className="flex flex-col gap-2 px-4 py-2"> 121 121 + {/* <div> 122 122 + {title && ( 123 123 + <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100"> 124 124 + {title} 125 125 + </h3> 126 126 + )} 127 127 + {description && ( 128 128 + <p className="text-sm text-gray-500 dark:text-gray-400"> 129 129 + {description} 130 130 + </p> 131 131 + )} 132 132 + </div> */} 133 133 + 134 134 + <div className="flex flex-row gap-2 items-center"> 135 135 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 136 136 + <input 137 137 + type="text" 138 138 + placeholder=" " 139 139 + value={value} 140 140 + onChange={(e) => setValue(e.target.value)} 141 141 + /> 142 142 + <label>{title}</label> 143 143 + </div> 144 144 + {/* <input 145 145 + type="text" 146 146 + value={value} 147 147 + onChange={(e) => setValue(e.target.value)} 148 148 + className="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 149 149 + text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 150 150 + focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600" 151 151 + placeholder="Enter value..." 152 152 + /> */} 153 153 + <button 154 154 + onClick={() => setValue(init ?? "")} 155 155 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 156 156 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 157 157 + > 158 158 + Reset 159 159 + </button> 160 160 + </div> 161 161 + </div> 162 162 + ); 163 163 + } 164 164 + 165 165 + 166 166 + interface SliderProps { 167 167 + atom: typeof hueAtom; 168 168 + min?: number; 169 169 + max?: number; 170 170 + step?: number; 171 171 + } 172 172 + 173 173 + export const SliderComponent: React.FC<SliderProps> = ({ 174 174 + atom, 175 175 + min = 0, 176 176 + max = 100, 177 177 + step = 1, 178 178 + }) => { 179 179 + 180 180 + const [value, setValue] = useAtom(atom) 181 181 + 182 182 + return ( 183 183 + <Slider.Root 184 184 + className="relative flex items-center w-full h-4" 185 185 + value={[value]} 186 186 + min={min} 187 187 + max={max} 188 188 + step={step} 189 189 + onValueChange={(v: number[]) => setValue(v[0])} 190 190 + > 191 191 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 192 192 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 193 193 + </Slider.Track> 194 194 + <Slider.Thumb className="shadow-[0_0_0_8px_var(--color-white)] dark:shadow-[0_0_0_8px_var(--color-gray-950)] block w-[3px] h-12 bg-gray-500 dark:bg-gray-400 rounded-md focus:outline-none" /> 195 195 + </Slider.Root> 196 196 + ); 197 197 + };

+168 -11

src/styles/app.css

··· 1 1 + @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap'); 1 2 @import "tailwindcss"; 2 3 3 4 /* @theme { ··· 14 15 --color-gray-950: oklch(0.129 0.050 222.000); 15 16 } */ 16 17 18 18 + :root { 19 19 + --safe-hue: var(--tw-gray-hue, 28) 20 20 + } 21 21 + 17 22 @theme { 18 18 - --color-gray-50: oklch(0.984 0.012 28); 19 19 - --color-gray-100: oklch(0.968 0.017 28); 20 20 - --color-gray-200: oklch(0.929 0.025 28); 21 21 - --color-gray-300: oklch(0.869 0.035 28); 22 22 - --color-gray-400: oklch(0.704 0.05 28); 23 23 - --color-gray-500: oklch(0.554 0.06 28); 24 24 - --color-gray-600: oklch(0.446 0.058 28); 25 25 - --color-gray-700: oklch(0.372 0.058 28); 26 26 - --color-gray-800: oklch(0.279 0.055 28); 27 27 - --color-gray-900: oklch(0.208 0.055 28); 28 28 - --color-gray-950: oklch(0.129 0.055 28); 23 23 + --color-gray-50: oklch(0.984 0.012 var(--safe-hue)); 24 24 + --color-gray-100: oklch(0.968 0.017 var(--safe-hue)); 25 25 + --color-gray-200: oklch(0.929 0.025 var(--safe-hue)); 26 26 + --color-gray-300: oklch(0.869 0.035 var(--safe-hue)); 27 27 + --color-gray-400: oklch(0.704 0.05 var(--safe-hue)); 28 28 + --color-gray-500: oklch(0.554 0.06 var(--safe-hue)); 29 29 + --color-gray-600: oklch(0.446 0.058 var(--safe-hue)); 30 30 + --color-gray-700: oklch(0.372 0.058 var(--safe-hue)); 31 31 + --color-gray-800: oklch(0.279 0.055 var(--safe-hue)); 32 32 + --color-gray-900: oklch(0.208 0.055 var(--safe-hue)); 33 33 + --color-gray-950: oklch(0.129 0.055 var(--safe-hue)); 29 34 } 30 35 31 36 @layer base { ··· 71 76 .scroll-none { 72 77 scrollbar-width: none; 73 78 } 79 79 + 80 80 + .dangerousFediContent { 81 81 + & a[href]{ 82 82 + text-decoration: none; 83 83 + color: rgb(29, 122, 242); 84 84 + word-break: break-all; 85 85 + } 86 86 + } 87 87 + 88 88 + .font-inter { 89 89 + font-family: "Inter", sans-serif; 90 90 + } 91 91 + .font-roboto { 92 92 + font-family: "Roboto", sans-serif; 93 93 + } 94 94 + 95 95 + :root { 96 96 + --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50)); 97 97 + --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900)); 98 98 + } 99 99 + 100 100 + :root { 101 101 + --header-bg: var(--header-bg-light); 102 102 + } 103 103 + @media (prefers-color-scheme: dark) { 104 104 + :root { 105 105 + --header-bg: var(--header-bg-dark); 106 106 + } 107 107 + } 108 108 + 109 109 + :root { 110 110 + --shadow-opacity: calc(1 - var(--is-top)); 111 111 + --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15)); 112 112 + } 113 113 + 114 114 + 115 115 + /* m3 input */ 116 116 + :root { 117 117 + --m3input-radius: 6px; 118 118 + --m3input-border-width: .0625rem; 119 119 + --m3input-font-size: 16px; 120 120 + --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1); 121 121 + /* light theme */ 122 122 + --m3input-bg: var(--color-gray-50); 123 123 + --m3input-border-color: var(--color-gray-400); 124 124 + --m3input-label-color: var(--color-gray-500); 125 125 + --m3input-text-color: var(--color-gray-900); 126 126 + --m3input-focus-color: var(--color-gray-600); 127 127 + } 128 128 + 129 129 + @media (prefers-color-scheme: dark) { 130 130 + :root { 131 131 + --m3input-bg: var(--color-gray-950); 132 132 + --m3input-border-color: var(--color-gray-700); 133 133 + --m3input-label-color: var(--color-gray-400); 134 134 + --m3input-text-color: var(--color-gray-50); 135 135 + --m3input-focus-color: var(--color-gray-400); 136 136 + } 137 137 + } 138 138 + 139 139 + /* reset page *//* 140 140 + html, 141 141 + body { 142 142 + background: var(--m3input-bg); 143 143 + margin: 0; 144 144 + padding: 1rem; 145 145 + color: var(--m3input-text-color); 146 146 + font-family: system-ui, sans-serif; 147 147 + font-size: var(--m3input-font-size); 148 148 + }*/ 149 149 + 150 150 + /* base wrapper */ 151 151 + .m3input-field.m3input-label.m3input-border { 152 152 + position: relative; 153 153 + display: inline-block; 154 154 + width: 100%; 155 155 + /*max-width: 400px;*/ 156 156 + } 157 157 + 158 158 + /* size variants */ 159 159 + .m3input-field.size-sm { 160 160 + --m3input-h: 40px; 161 161 + } 162 162 + 163 163 + .m3input-field.size-md { 164 164 + --m3input-h: 48px; 165 165 + } 166 166 + 167 167 + .m3input-field.size-lg { 168 168 + --m3input-h: 56px; 169 169 + } 170 170 + 171 171 + .m3input-field.size-xl { 172 172 + --m3input-h: 64px; 173 173 + } 174 174 + 175 175 + .m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) { 176 176 + --m3input-h: 48px; 177 177 + } 178 178 + 179 179 + /* outlined input */ 180 180 + .m3input-field.m3input-label.m3input-border input { 181 181 + width: 100%; 182 182 + height: var(--m3input-h); 183 183 + border: var(--m3input-border-width) solid var(--m3input-border-color); 184 184 + border-radius: var(--m3input-radius); 185 185 + background: var(--m3input-bg); 186 186 + color: var(--m3input-text-color); 187 187 + font-size: var(--m3input-font-size); 188 188 + padding: 0 12px; 189 189 + box-sizing: border-box; 190 190 + outline: none; 191 191 + transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition); 192 192 + } 193 193 + 194 194 + /* focus ring */ 195 195 + .m3input-field.m3input-label.m3input-border input:focus { 196 196 + border-color: var(--m3input-focus-color); 197 197 + /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 198 198 + } 199 199 + 200 200 + /* label */ 201 201 + .m3input-field.m3input-label.m3input-border label { 202 202 + position: absolute; 203 203 + left: 12px; 204 204 + top: 50%; 205 205 + transform: translateY(-50%); 206 206 + background: var(--m3input-bg); 207 207 + padding: 0 .25em; 208 208 + color: var(--m3input-label-color); 209 209 + pointer-events: none; 210 210 + transition: all var(--m3input-transition); 211 211 + } 212 212 + 213 213 + /* float on focus or when filled */ 214 214 + .m3input-field.m3input-label.m3input-border input:focus+label, 215 215 + .m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label { 216 216 + top: 0; 217 217 + transform: translateY(-50%) scale(.78); 218 218 + left: 0; 219 219 + color: var(--m3input-focus-color); 220 220 + } 221 221 + 222 222 + /* placeholder trick */ 223 223 + .m3input-field.m3input-label.m3input-border input::placeholder { 224 224 + color: transparent; 225 225 + } 226 226 + 227 227 + /* radix i love you but like cmon man */ 228 228 + body[data-scroll-locked]{ 229 229 + margin-left: var(--removed-body-scroll-bar-size) !important; 230 230 + }

+64 -6

src/utils/atoms.ts

··· 1 1 import type Agent from "@atproto/api"; 2 2 - import { atom, createStore } from "jotai"; 3 3 - import { atomWithStorage } from 'jotai/utils'; 2 2 + import { atom, createStore, useAtomValue } from "jotai"; 3 3 + import { atomWithStorage } from "jotai/utils"; 4 4 + import { useEffect } from "react"; 4 5 5 6 export const store = createStore(); 6 7 7 8 export const selectedFeedUriAtom = atomWithStorage<string | null>( 8 8 - 'selectedFeedUri', 9 9 + "selectedFeedUri", 9 10 null 10 11 ); 11 12 12 13 //export const feedScrollPositionsAtom = atom<Record<string, number>>({}); 13 14 14 15 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>( 15 15 - 'feedscrollpositions', 16 16 + "feedscrollpositions", 16 17 {} 17 18 ); 18 19 19 20 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 20 20 - 'likedPosts', 21 21 + "likedPosts", 21 22 {} 22 23 ); 23 24 24 24 - export const agentAtom = atom<Agent|null>(null); 25 25 + export const defaultconstellationURL = "constellation.microcosm.blue"; 26 26 + export const constellationURLAtom = atomWithStorage<string>( 27 27 + "constellationURL", 28 28 + defaultconstellationURL 29 29 + ); 30 30 + export const defaultslingshotURL = "slingshot.microcosm.blue"; 31 31 + export const slingshotURLAtom = atomWithStorage<string>( 32 32 + "slingshotURL", 33 33 + defaultslingshotURL 34 34 + ); 35 35 + export const defaultaturilistservice = "aturilistservice.reddwarf.app"; 36 36 + export const aturiListServiceAtom = atomWithStorage<string>( 37 37 + "aturilistservice", 38 38 + defaultaturilistservice 39 39 + ); 40 40 + export const defaultImgCDN = "cdn.bsky.app"; 41 41 + export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN); 42 42 + export const defaultVideoCDN = "video.bsky.app"; 43 43 + export const videoCDNAtom = atomWithStorage<string>( 44 44 + "videocdnurl", 45 45 + defaultVideoCDN 46 46 + ); 47 47 + 48 48 + export const defaulthue = 28; 49 49 + export const hueAtom = atomWithStorage<number>("hue", defaulthue); 50 50 + 51 51 + export const isAtTopAtom = atom<boolean>(true); 52 52 + 53 53 + type ComposerState = 54 54 + | { kind: "closed" } 55 55 + | { kind: "root" } 56 56 + | { kind: "reply"; parent: string } 57 57 + | { kind: "quote"; subject: string }; 58 58 + export const composerAtom = atom<ComposerState>({ kind: "closed" }); 59 59 + 60 60 + export const agentAtom = atom<Agent | null>(null); 25 61 export const authedAtom = atom<boolean>(false); 62 62 + 63 63 + export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) { 64 64 + const value = useAtomValue(atom); 65 65 + 66 66 + useEffect(() => { 67 67 + document.documentElement.style.setProperty(cssVar, value.toString()); 68 68 + }, [value, cssVar]); 69 69 + 70 70 + useEffect(() => { 71 71 + document.documentElement.style.setProperty(cssVar, value.toString()); 72 72 + }, []); 73 73 + } 74 74 + 75 75 + hueAtom.onMount = (setAtom) => { 76 76 + const stored = localStorage.getItem("hue"); 77 77 + if (stored != null) setAtom(Number(stored)); 78 78 + }; 79 79 + // export function initAtomToCssVar(atom: typeof hueAtom, cssVar: string) { 80 80 + // const initial = store.get(atom); 81 81 + // console.log("atom get ", initial); 82 82 + // document.documentElement.style.setProperty(cssVar, initial.toString()); 83 83 + // }

+37 -3

src/utils/followState.ts

··· 1 1 - import { AtUri, type Agent } from "@atproto/api"; 2 2 - import { useQueryConstellation, type linksRecordsResponse } from "./useQuery"; 1 1 + import { type Agent,AtUri } from "@atproto/api"; 2 2 + import { TID } from "@atproto/common-web"; 3 3 import type { QueryClient } from "@tanstack/react-query"; 4 4 - import { TID } from "@atproto/common-web"; 4 4 + 5 5 + import { type linksRecordsResponse,useQueryConstellation } from "./useQuery"; 5 6 6 7 export function useGetFollowState({ 7 8 target, ··· 127 128 }; 128 129 }); 129 130 } 131 131 + 132 132 + 133 133 + 134 134 + export function useGetOneToOneState(params?: { 135 135 + target: string; 136 136 + user: string; 137 137 + collection: string; 138 138 + path: string; 139 139 + }): string[] | undefined { 140 140 + const { data: arbitrarydata } = useQueryConstellation( 141 141 + params && params.user 142 142 + ? { 143 143 + method: "/links", 144 144 + target: params.target, 145 145 + // @ts-expect-error overloading sucks so much 146 146 + collection: params.collection, 147 147 + path: params.path, 148 148 + dids: [params.user], 149 149 + } 150 150 + : { method: "undefined", target: "whatever" } 151 151 + // overloading sucks so much 152 152 + ) as { data: linksRecordsResponse | undefined }; 153 153 + if (!params || !params.user) return undefined; 154 154 + const data = arbitrarydata?.linking_records.slice(0, 50) ?? []; 155 155 + 156 156 + if (data.length > 0) { 157 157 + return data.map((linksRecord) => { 158 158 + return `at://${linksRecord.did}/${linksRecord.collection}/${linksRecord.rkey}`; 159 159 + }); 160 160 + } 161 161 + 162 162 + return undefined; 163 163 + }

+53 -23

src/utils/useHydrated.ts

··· 9 9 AppBskyFeedPost, 10 10 AtUri, 11 11 } from "@atproto/api"; 12 12 + import { useAtom } from "jotai"; 12 13 import { useMemo } from "react"; 13 14 14 14 - import { useQueryIdentity,useQueryPost, useQueryProfile } from "./useQuery"; 15 15 + import { imgCDNAtom, videoCDNAtom } from "./atoms"; 16 16 + import { useQueryIdentity, useQueryPost, useQueryProfile } from "./useQuery"; 15 17 16 16 - type QueryResultData<T extends (...args: any) => any> = ReturnType<T> extends 17 17 - | { data: infer D } 18 18 - | undefined 19 19 - ? D 20 20 - : never; 18 18 + type QueryResultData<T extends (...args: any) => any> = 19 19 + ReturnType<T> extends { data: infer D } | undefined ? D : never; 21 20 22 21 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> { 23 22 return obj as $Typed<T>; ··· 26 25 export function hydrateEmbedImages( 27 26 embed: AppBskyEmbedImages.Main, 28 27 did: string, 28 28 + cdn: string 29 29 ): $Typed<AppBskyEmbedImages.View> { 30 30 return asTyped({ 31 31 $type: "app.bsky.embed.images#view" as const, ··· 34 34 const link = img.image.ref?.["$link"]; 35 35 if (!link) return null; 36 36 return { 37 37 - thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`, 38 38 - fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`, 37 37 + thumb: `https://${cdn}/img/feed_thumbnail/plain/${did}/${link}@jpeg`, 38 38 + fullsize: `https://${cdn}/img/feed_fullsize/plain/${did}/${link}@jpeg`, 39 39 alt: img.alt || "", 40 40 aspectRatio: img.aspectRatio, 41 41 }; ··· 47 47 export function hydrateEmbedExternal( 48 48 embed: AppBskyEmbedExternal.Main, 49 49 did: string, 50 50 + cdn: string 50 51 ): $Typed<AppBskyEmbedExternal.View> { 51 52 return asTyped({ 52 53 $type: "app.bsky.embed.external#view" as const, ··· 55 56 title: embed.external.title, 56 57 description: embed.external.description, 57 58 thumb: embed.external.thumb?.ref?.$link 58 58 - ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg` 59 59 + ? `https://${cdn}/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg` 59 60 : undefined, 60 61 }, 61 62 }); ··· 64 65 export function hydrateEmbedVideo( 65 66 embed: AppBskyEmbedVideo.Main, 66 67 did: string, 68 68 + videocdn: string 67 69 ): $Typed<AppBskyEmbedVideo.View> { 68 70 const videoLink = embed.video.ref.$link; 69 71 return asTyped({ 70 72 $type: "app.bsky.embed.video#view" as const, 71 71 - playlist: `https://video.bsky.app/watch/${did}/${videoLink}/playlist.m3u8`, 72 72 - thumbnail: `https://video.bsky.app/watch/${did}/${videoLink}/thumbnail.jpg`, 73 73 + playlist: `https://${videocdn}/watch/${did}/${videoLink}/playlist.m3u8`, 74 74 + thumbnail: `https://${videocdn}/watch/${did}/${videoLink}/thumbnail.jpg`, 73 75 aspectRatio: embed.aspectRatio, 74 76 cid: videoLink, 75 77 }); ··· 80 82 quotedPost: QueryResultData<typeof useQueryPost>, 81 83 quotedProfile: QueryResultData<typeof useQueryProfile>, 82 84 quotedIdentity: QueryResultData<typeof useQueryIdentity>, 85 85 + cdn: string 83 86 ): $Typed<AppBskyEmbedRecord.View> | undefined { 84 87 if (!quotedPost || !quotedProfile || !quotedIdentity) { 85 88 return undefined; ··· 91 94 handle: quotedIdentity.handle, 92 95 displayName: quotedProfile.value.displayName ?? quotedIdentity.handle, 93 96 avatar: quotedProfile.value.avatar?.ref?.$link 94 94 - ? `https://cdn.bsky.app/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg` 97 97 + ? `https://${cdn}/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg` 95 98 : undefined, 96 99 viewer: {}, 97 100 labels: [], ··· 122 125 quotedPost: QueryResultData<typeof useQueryPost>, 123 126 quotedProfile: QueryResultData<typeof useQueryProfile>, 124 127 quotedIdentity: QueryResultData<typeof useQueryIdentity>, 128 128 + cdn: string 125 129 ): $Typed<AppBskyEmbedRecordWithMedia.View> | undefined { 126 130 const hydratedRecord = hydrateEmbedRecord( 127 131 embed.record, 128 132 quotedPost, 129 133 quotedProfile, 130 134 quotedIdentity, 135 135 + cdn 131 136 ); 132 137 133 138 if (!hydratedRecord) return undefined; ··· 148 153 149 154 export function useHydratedEmbed( 150 155 embed: AppBskyFeedPost.Record["embed"], 151 151 - postAuthorDid: string | undefined, 156 156 + postAuthorDid: string | undefined 152 157 ) { 153 158 const recordInfo = useMemo(() => { 154 159 if (AppBskyEmbedRecordWithMedia.isMain(embed)) { ··· 181 186 error: profileError, 182 187 } = useQueryProfile(profileUri); 183 188 189 189 + const [imgcdn] = useAtom(imgCDNAtom); 190 190 + const [videocdn] = useAtom(videoCDNAtom); 191 191 + 184 192 const queryidentityresult = useQueryIdentity(quotedAuthorDid); 185 193 186 194 const hydratedEmbed: HydratedEmbedView | undefined = (() => { 187 195 if (!embed || !postAuthorDid) return undefined; 188 196 189 189 - if (isRecordType && (!usequerypostresults?.data || !quotedProfile || !queryidentityresult?.data)) { 197 197 + if ( 198 198 + isRecordType && 199 199 + (!usequerypostresults?.data || 200 200 + !quotedProfile || 201 201 + !queryidentityresult?.data) 202 202 + ) { 190 203 return undefined; 191 204 } 192 205 193 206 try { 194 207 if (AppBskyEmbedImages.isMain(embed)) { 195 195 - return hydrateEmbedImages(embed, postAuthorDid); 208 208 + return hydrateEmbedImages(embed, postAuthorDid, imgcdn); 196 209 } else if (AppBskyEmbedExternal.isMain(embed)) { 197 197 - return hydrateEmbedExternal(embed, postAuthorDid); 210 210 + return hydrateEmbedExternal(embed, postAuthorDid, imgcdn); 198 211 } else if (AppBskyEmbedVideo.isMain(embed)) { 199 199 - return hydrateEmbedVideo(embed, postAuthorDid); 212 212 + return hydrateEmbedVideo(embed, postAuthorDid, videocdn); 200 213 } else if (AppBskyEmbedRecord.isMain(embed)) { 201 214 return hydrateEmbedRecord( 202 215 embed, 203 216 usequerypostresults?.data, 204 217 quotedProfile, 205 218 queryidentityresult?.data, 219 219 + imgcdn 206 220 ); 207 221 } else if (AppBskyEmbedRecordWithMedia.isMain(embed)) { 208 222 let hydratedMedia: ··· 212 226 | undefined; 213 227 214 228 if (AppBskyEmbedImages.isMain(embed.media)) { 215 215 - hydratedMedia = hydrateEmbedImages(embed.media, postAuthorDid); 229 229 + hydratedMedia = hydrateEmbedImages( 230 230 + embed.media, 231 231 + postAuthorDid, 232 232 + imgcdn 233 233 + ); 216 234 } else if (AppBskyEmbedExternal.isMain(embed.media)) { 217 217 - hydratedMedia = hydrateEmbedExternal(embed.media, postAuthorDid); 235 235 + hydratedMedia = hydrateEmbedExternal( 236 236 + embed.media, 237 237 + postAuthorDid, 238 238 + imgcdn 239 239 + ); 218 240 } else if (AppBskyEmbedVideo.isMain(embed.media)) { 219 219 - hydratedMedia = hydrateEmbedVideo(embed.media, postAuthorDid); 241 241 + hydratedMedia = hydrateEmbedVideo( 242 242 + embed.media, 243 243 + postAuthorDid, 244 244 + videocdn 245 245 + ); 220 246 } 221 247 222 248 if (hydratedMedia) { ··· 226 252 usequerypostresults?.data, 227 253 quotedProfile, 228 254 queryidentityresult?.data, 255 255 + imgcdn 229 256 ); 230 257 } 231 258 } ··· 236 263 })(); 237 264 238 265 const isLoading = isRecordType 239 239 - ? usequerypostresults?.isLoading || isLoadingProfile || queryidentityresult?.isLoading 266 266 + ? usequerypostresults?.isLoading || 267 267 + isLoadingProfile || 268 268 + queryidentityresult?.isLoading 240 269 : false; 241 270 242 242 - const error = usequerypostresults?.error || profileError || queryidentityresult?.error; 271 271 + const error = 272 272 + usequerypostresults?.error || profileError || queryidentityresult?.error; 243 273 244 274 return { data: hydratedEmbed, isLoading, error }; 245 245 - } 275 275 + }

+161 -17

src/utils/useQuery.ts

··· 1 1 import * as ATPAPI from "@atproto/api"; 2 2 import { 3 3 + infiniteQueryOptions, 3 4 type QueryFunctionContext, 4 5 queryOptions, 5 6 useInfiniteQuery, 6 7 useQuery, 7 8 type UseQueryResult} from "@tanstack/react-query"; 9 9 + import { useAtom } from "jotai"; 8 10 9 9 - export function constructIdentityQuery(didorhandle?: string) { 11 11 + import { constellationURLAtom, slingshotURLAtom } from "./atoms"; 12 12 + 13 13 + export function constructIdentityQuery(didorhandle?: string, slingshoturl?: string) { 10 14 return queryOptions({ 11 15 queryKey: ["identity", didorhandle], 12 16 queryFn: async () => { 13 17 if (!didorhandle) return undefined as undefined 14 18 const res = await fetch( 15 15 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 19 19 + `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 16 20 ); 17 21 if (!res.ok) throw new Error("Failed to fetch post"); 18 22 try { ··· 54 58 Error 55 59 > 56 60 export function useQueryIdentity(didorhandle?: string) { 57 57 - return useQuery(constructIdentityQuery(didorhandle)); 61 61 + const [slingshoturl] = useAtom(slingshotURLAtom) 62 62 + return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 58 63 } 59 64 60 60 - export function constructPostQuery(uri?: string) { 65 65 + export function constructPostQuery(uri?: string, slingshoturl?: string) { 61 66 return queryOptions({ 62 67 queryKey: ["post", uri], 63 68 queryFn: async () => { 64 69 if (!uri) return undefined as undefined 65 70 const res = await fetch( 66 66 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 71 71 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 67 72 ); 68 73 let data: any; 69 74 try { ··· 117 122 Error 118 123 > 119 124 export function useQueryPost(uri?: string) { 120 120 - return useQuery(constructPostQuery(uri)); 125 125 + const [slingshoturl] = useAtom(slingshotURLAtom) 126 126 + return useQuery(constructPostQuery(uri, slingshoturl)); 121 127 } 122 128 123 123 - export function constructProfileQuery(uri?: string) { 129 129 + export function constructProfileQuery(uri?: string, slingshoturl?: string) { 124 130 return queryOptions({ 125 131 queryKey: ["profile", uri], 126 132 queryFn: async () => { 127 133 if (!uri) return undefined as undefined 128 134 const res = await fetch( 129 129 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 135 135 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 130 136 ); 131 137 let data: any; 132 138 try { ··· 180 186 Error 181 187 > 182 188 export function useQueryProfile(uri?: string) { 183 183 - return useQuery(constructProfileQuery(uri)); 189 189 + const [slingshoturl] = useAtom(slingshotURLAtom) 190 190 + return useQuery(constructProfileQuery(uri, slingshoturl)); 184 191 } 185 192 186 193 // export function constructConstellationQuery( ··· 216 223 // target: string 217 224 // ): QueryOptions<linksAllResponse, Error>; 218 225 export function constructConstellationQuery(query?:{ 226 226 + constellation: string, 219 227 method: 220 228 | "/links" 221 229 | "/links/distinct-dids" ··· 249 257 const cursor = query.cursor 250 258 const dids = query?.dids 251 259 const res = await fetch( 252 252 - `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 260 260 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}${dids ? dids.map((did) => `&did=${encodeURIComponent(did)}`).join("") : ""}` 253 261 ); 254 262 if (!res.ok) throw new Error("Failed to fetch post"); 255 263 try { ··· 338 346 > 339 347 | undefined { 340 348 //if (!query) return; 349 349 + const [constellationurl] = useAtom(constellationURLAtom) 341 350 return useQuery( 342 342 - constructConstellationQuery(query) 351 351 + constructConstellationQuery(query && {constellation: constellationurl, ...query}) 343 352 ); 344 353 } 345 354 ··· 361 370 type linksCountResponse = { 362 371 total: string; 363 372 }; 364 364 - type linksAllResponse = { 373 373 + export type linksAllResponse = { 365 374 links: Record< 366 375 string, 367 376 Record< ··· 444 453 445 454 446 455 447 447 - export function constructArbitraryQuery(uri?: string) { 456 456 + export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 448 457 return queryOptions({ 449 458 queryKey: ["arbitrary", uri], 450 459 queryFn: async () => { 451 460 if (!uri) return undefined as undefined 452 461 const res = await fetch( 453 453 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 462 462 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 454 463 ); 455 464 let data: any; 456 465 try { ··· 503 512 Error 504 513 >; 505 514 export function useQueryArbitrary(uri?: string) { 506 506 - return useQuery(constructArbitraryQuery(uri)); 515 515 + const [slingshoturl] = useAtom(slingshotURLAtom) 516 516 + return useQuery(constructArbitraryQuery(uri, slingshoturl)); 507 517 } 508 518 509 519 export function constructFallbackNothingQuery(){ ··· 555 565 }); 556 566 } 557 567 568 568 + export const ATURI_PAGE_LIMIT = 100; 569 569 + 570 570 + export interface AturiDirectoryAturisItem { 571 571 + uri: string; 572 572 + cid: string; 573 573 + rkey: string; 574 574 + } 575 575 + 576 576 + export type AturiDirectoryAturis = AturiDirectoryAturisItem[]; 577 577 + 578 578 + export function constructAturiListQuery(aturilistservice: string, did: string, collection: string, reverse?: boolean) { 579 579 + return queryOptions({ 580 580 + // A unique key for this query, including all parameters that affect the data. 581 581 + queryKey: ["aturiList", did, collection, { reverse }], 582 582 + 583 583 + // The function that fetches the data. 584 584 + queryFn: async ({ pageParam }: QueryFunctionContext) => { 585 585 + const cursor = pageParam as string | undefined; 586 586 + 587 587 + // Use URLSearchParams for safe and clean URL construction. 588 588 + const params = new URLSearchParams({ 589 589 + did, 590 590 + collection, 591 591 + }); 592 592 + 593 593 + if (cursor) { 594 594 + params.set("cursor", cursor); 595 595 + } 596 596 + 597 597 + // Add the reverse parameter if it's true 598 598 + if (reverse) { 599 599 + params.set("reverse", "true"); 600 600 + } 601 601 + 602 602 + const url = `https://${aturilistservice}/aturis?${params.toString()}`; 603 603 + 604 604 + const res = await fetch(url); 605 605 + if (!res.ok) { 606 606 + // You can add more specific error handling here 607 607 + throw new Error(`Failed to fetch AT-URI list for ${did}`); 608 608 + } 609 609 + 610 610 + return res.json() as Promise<AturiDirectoryAturis>; 611 611 + }, 612 612 + }); 613 613 + } 614 614 + 615 615 + export function useInfiniteQueryAturiList({aturilistservice, did, collection, reverse}:{aturilistservice: string, did: string | undefined, collection: string | undefined, reverse?: boolean}) { 616 616 + // We only enable the query if both `did` and `collection` are provided. 617 617 + const isEnabled = !!did && !!collection; 618 618 + 619 619 + const { queryKey, queryFn } = constructAturiListQuery(aturilistservice, did!, collection!, reverse); 620 620 + 621 621 + return useInfiniteQuery({ 622 622 + queryKey, 623 623 + queryFn, 624 624 + initialPageParam: undefined as never, // ???? what is this shit 625 625 + 626 626 + // @ts-expect-error i wouldve used as null | undefined, anyways 627 627 + getNextPageParam: (lastPage: AturiDirectoryAturis) => { 628 628 + // If the last page returned no records, we're at the end. 629 629 + if (!lastPage || lastPage.length === 0) { 630 630 + return undefined; 631 631 + } 632 632 + 633 633 + // If the number of records is less than our page limit, it must be the last page. 634 634 + if (lastPage.length < ATURI_PAGE_LIMIT) { 635 635 + return undefined; 636 636 + } 637 637 + 638 638 + // The cursor for the next page is the `rkey` of the last item we received. 639 639 + const lastItem = lastPage[lastPage.length - 1]; 640 640 + return lastItem.rkey; 641 641 + }, 642 642 + 643 643 + enabled: isEnabled, 644 644 + }); 645 645 + } 646 646 + 647 647 + 558 648 type FeedSkeletonPage = ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 559 649 560 650 export function constructInfiniteFeedSkeletonQuery(options: { ··· 605 695 }) { 606 696 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 607 697 608 608 - return useInfiniteQuery({ 698 698 + return {...useInfiniteQuery({ 609 699 queryKey, 610 700 queryFn, 611 701 initialPageParam: undefined as never, ··· 613 703 staleTime: Infinity, 614 704 refetchOnWindowFocus: false, 615 705 enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 616 616 - }); 706 706 + }), queryKey: queryKey}; 707 707 + } 708 708 + 709 709 + 710 710 + export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 711 711 + constellation: string, 712 712 + method: '/links' 713 713 + target?: string 714 714 + collection: string 715 715 + path: string 716 716 + }) { 717 717 + console.log( 718 718 + 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 719 719 + query, 720 720 + ) 721 721 + 722 722 + return infiniteQueryOptions({ 723 723 + enabled: !!query?.target, 724 724 + queryKey: [ 725 725 + 'reddwarf_constellation', 726 726 + query?.method, 727 727 + query?.target, 728 728 + query?.collection, 729 729 + query?.path, 730 730 + ] as const, 731 731 + 732 732 + queryFn: async ({pageParam}: {pageParam?: string}) => { 733 733 + if (!query || !query?.target) return undefined 734 734 + 735 735 + const method = query.method 736 736 + const target = query.target 737 737 + const collection = query.collection 738 738 + const path = query.path 739 739 + const cursor = pageParam 740 740 + 741 741 + const res = await fetch( 742 742 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 743 743 + collection ? `&collection=${encodeURIComponent(collection)}` : '' 744 744 + }${path ? `&path=${encodeURIComponent(path)}` : ''}${ 745 745 + cursor ? `&cursor=${encodeURIComponent(cursor)}` : '' 746 746 + }`, 747 747 + ) 748 748 + 749 749 + if (!res.ok) throw new Error('Failed to fetch') 750 750 + 751 751 + return (await res.json()) as linksRecordsResponse 752 752 + }, 753 753 + 754 754 + getNextPageParam: lastPage => { 755 755 + return (lastPage as any)?.cursor ?? undefined 756 756 + }, 757 757 + initialPageParam: undefined, 758 758 + staleTime: 5 * 60 * 1000, 759 759 + gcTime: 5 * 60 * 1000, 760 760 + }) 617 761 }

+1 -1

tsconfig.json

··· 5 5 "jsx": "react-jsx", 6 6 "module": "ESNext", 7 7 "lib": ["ES2022", "DOM", "DOM.Iterable"], 8 8 - "types": ["vite/client"], 8 8 + "types": ["vite/client", "unplugin-icons/types/react"], 9 9 10 10 /* Bundler mode */ 11 11 "moduleResolution": "bundler",

+22 -1

vite.config.ts

··· 3 3 import tailwindcss from "@tailwindcss/vite"; 4 4 import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; 5 5 import viteReact from "@vitejs/plugin-react"; 6 6 + import AutoImport from 'unplugin-auto-import/vite' 7 7 + import IconsResolver from 'unplugin-icons/resolver' 8 8 + import Icons from 'unplugin-icons/vite' 6 9 import { defineConfig } from "vite"; 7 10 8 11 import { generateMetadataPlugin } from "./oauthdev.mts"; 9 12 10 10 - const PROD_URL = "https://reddwarf.whey.party" 13 13 + const PROD_URL = "https://reddwarf.app" 11 14 const DEV_URL = "https://local3768forumtest.whey.party" 12 15 13 16 function shp(url: string): string { ··· 28 31 }, 29 32 }), 30 33 tailwindcss(), 34 34 + AutoImport({ 35 35 + include: [ 36 36 + /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx 37 37 + ], 38 38 + resolvers: [ 39 39 + IconsResolver({ 40 40 + prefix: 'Icon', 41 41 + extension: 'jsx', 42 42 + enabledCollections: ['mdi','material-symbols'], 43 43 + }), 44 44 + ], 45 45 + dts: 'src/auto-imports.d.ts', 46 46 + }), 47 47 + Icons({ 48 48 + //autoInstall: true, 49 49 + compiler: 'jsx', 50 50 + jsx: 'react' 51 51 + }), 31 52 ], 32 53 // test: { 33 54 // globals: true,