+2 -1

.gitignore

··· 7 7 .env 8 8 .nitro 9 9 .tanstack 10 10 - public/client-metadata.json 10 10 + public/client-metadata.json 11 11 + public/resolvers.json

+10 -1

README.md

··· 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 15 15 16 16 run dev with `npm run dev` (port 3768) and build with `npm run build` (the output is the `dist` folder) 17 17 + 18 18 + 19 19 + 20 20 + you probably dont need to change these 21 21 + ```ts 22 22 + const PROD_HANDLE_RESOLVER_PDS = "https://pds-nd.whey.party" 23 23 + const DEV_HANDLE_RESOLVER_PDS = "https://bsky.social" 24 24 + ``` 25 25 + if you do want to change these, i recommend changing both of these to your own PDS url. i separate the prod and dev urls so that you can change it as needed. here i separated it because if the prod resolver and prod url shares the same domain itll error and prevent logins 17 26 18 27 ## useQuery 19 28 Red Dwarf has been upgraded from its original bespoke caching system to Tanstack Query (react query). this migration was done to achieve a more robust and maintainable approach to data fetching and caching and state synchronization. ive seen serious performance gains from this switch!

+62 -30

oauthdev.mts

··· 1 1 - import fs from 'fs'; 2 2 - import path from 'path'; 1 1 + import fs from "fs"; 2 2 + import path from "path"; 3 3 //import { generateClientMetadata } from './src/helpers/oauthClient' 4 4 export const generateClientMetadata = (appOrigin: string) => { 5 5 - const callbackPath = '/callback'; 5 5 + const callbackPath = "/callback"; 6 6 7 7 return { 8 8 - "client_id": `${appOrigin}/client-metadata.json`, 9 9 - "client_name": "ForumTest", 10 10 - "client_uri": appOrigin, 11 11 - "logo_uri": `${appOrigin}/logo192.png`, 12 12 - "tos_uri": `${appOrigin}/terms-of-service`, 13 13 - "policy_uri": `${appOrigin}/privacy-policy`, 14 14 - "redirect_uris": [`${appOrigin}${callbackPath}`] as [string, ...string[]], 15 15 - "scope": "atproto transition:generic", 16 16 - "grant_types": ["authorization_code", "refresh_token"] as ["authorization_code", "refresh_token"], 17 17 - "response_types": ["code"] as ["code"], 18 18 - "token_endpoint_auth_method": "none" as "none", 19 19 - "application_type": "web" as "web", 20 20 - "dpop_bound_access_tokens": true 21 21 - }; 22 22 - } 23 23 - 8 8 + client_id: `${appOrigin}/client-metadata.json`, 9 9 + client_name: "ForumTest", 10 10 + client_uri: appOrigin, 11 11 + logo_uri: `${appOrigin}/logo192.png`, 12 12 + tos_uri: `${appOrigin}/terms-of-service`, 13 13 + policy_uri: `${appOrigin}/privacy-policy`, 14 14 + redirect_uris: [`${appOrigin}${callbackPath}`] as [string, ...string[]], 15 15 + scope: "atproto transition:generic", 16 16 + grant_types: ["authorization_code", "refresh_token"] as [ 17 17 + "authorization_code", 18 18 + "refresh_token", 19 19 + ], 20 20 + response_types: ["code"] as ["code"], 21 21 + token_endpoint_auth_method: "none" as "none", 22 22 + application_type: "web" as "web", 23 23 + dpop_bound_access_tokens: true, 24 24 + }; 25 25 + }; 24 26 25 25 - export function generateMetadataPlugin({prod, dev}:{prod: string, dev: string}) { 27 27 + export function generateMetadataPlugin({ 28 28 + prod, 29 29 + dev, 30 30 + prodResolver = "https://bsky.social", 31 31 + devResolver = prodResolver, 32 32 + }: { 33 33 + prod: string; 34 34 + dev: string; 35 35 + prodResolver?: string; 36 36 + devResolver?: string; 37 37 + }) { 26 38 return { 27 27 - name: 'vite-plugin-generate-metadata', 39 39 + name: "vite-plugin-generate-metadata", 28 40 config(_config: any, { mode }: any) { 29 29 - let appOrigin; 30 30 - if (mode === 'production') { 31 31 - appOrigin = prod 32 32 - if (!appOrigin || !appOrigin.startsWith('https://')) { 33 33 - throw new Error('VITE_APP_ORIGIN environment variable must be set to a valid HTTPS URL for production build.'); 41 41 + console.log('💡 vite mode =', mode) 42 42 + let appOrigin, resolver; 43 43 + if (mode === "production") { 44 44 + appOrigin = prod; 45 45 + resolver = prodResolver; 46 46 + if (!appOrigin || !appOrigin.startsWith("https://")) { 47 47 + throw new Error( 48 48 + "VITE_APP_ORIGIN environment variable must be set to a valid HTTPS URL for production build." 49 49 + ); 34 50 } 35 51 } else { 36 52 appOrigin = dev; 53 53 + resolver = devResolver; 37 54 } 38 38 - 39 39 - 55 55 + 40 56 const metadata = generateClientMetadata(appOrigin); 41 41 - const outputPath = path.resolve(process.cwd(), 'public', 'client-metadata.json'); 57 57 + const outputPath = path.resolve( 58 58 + process.cwd(), 59 59 + "public", 60 60 + "client-metadata.json" 61 61 + ); 42 62 43 63 fs.writeFileSync(outputPath, JSON.stringify(metadata, null, 2)); 44 64 65 65 + const resolvers = { 66 66 + resolver: resolver, 67 67 + }; 68 68 + const resolverOutPath = path.resolve( 69 69 + process.cwd(), 70 70 + "public", 71 71 + "resolvers.json" 72 72 + ); 73 73 + 74 74 + fs.writeFileSync(resolverOutPath, JSON.stringify(resolvers, null, 2)); 75 75 + 76 76 + 45 77 // /*mass comment*/ console.log(`✅ Generated client-metadata.json for ${appOrigin}`); 46 78 }, 47 79 }; 48 48 - } 80 80 + }

+1796 -41

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", 32 32 + "sonner": "^2.0.7", 26 33 "tailwindcss": "^4.0.6", 27 34 "tanstack-router-keepalive": "^1.0.0" 28 35 }, ··· 31 38 "@iconify-icon/react": "^3.0.1", 32 39 "@iconify-json/material-symbols": "^1.2.42", 33 40 "@iconify-json/mdi": "^1.2.3", 41 41 + "@iconify/json": "^2.2.396", 34 42 "@svgr/core": "^8.1.0", 35 43 "@svgr/plugin-jsx": "^8.1.0", 36 44 "@testing-library/dom": "^10.4.0", ··· 369 377 "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz", 370 378 "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", 371 379 "license": "MIT", 372 372 - "peer": true, 373 380 "dependencies": { 374 381 "@ampproject/remapping": "^2.2.0", 375 382 "@babel/code-frame": "^7.27.1", ··· 877 884 } 878 885 ], 879 886 "license": "MIT", 880 880 - "peer": true, 881 887 "engines": { 882 888 "node": ">=18" 883 889 }, ··· 901 907 } 902 908 ], 903 909 "license": "MIT", 904 904 - "peer": true, 905 910 "engines": { 906 911 "node": ">=18" 907 912 } ··· 1490 1495 "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==", 1491 1496 "dev": true, 1492 1497 "license": "Apache-2.0", 1498 1498 + "peer": true, 1493 1499 "dependencies": { 1494 1500 "@eslint/object-schema": "^2.1.6", 1495 1501 "debug": "^4.3.1", ··· 1505 1511 "integrity": "sha512-WUFvV4WoIwW8Bv0KeKCIIEgdSiFOsulyN0xrMu+7z43q/hkOLXjvb5u7UC9jDxvRzcrbEmuZBX5yJZz1741jog==", 1506 1512 "dev": true, 1507 1513 "license": "Apache-2.0", 1514 1514 + "peer": true, 1508 1515 "dependencies": { 1509 1516 "@eslint/core": "^0.16.0" 1510 1517 }, ··· 1518 1525 "integrity": "sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==", 1519 1526 "dev": true, 1520 1527 "license": "Apache-2.0", 1528 1528 + "peer": true, 1521 1529 "dependencies": { 1522 1530 "@types/json-schema": "^7.0.15" 1523 1531 }, ··· 1531 1539 "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==", 1532 1540 "dev": true, 1533 1541 "license": "MIT", 1542 1542 + "peer": true, 1534 1543 "dependencies": { 1535 1544 "ajv": "^6.12.4", 1536 1545 "debug": "^4.3.2", ··· 1555 1564 "integrity": "sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==", 1556 1565 "dev": true, 1557 1566 "license": "MIT", 1567 1567 + "peer": true, 1558 1568 "engines": { 1559 1569 "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 1560 1570 }, ··· 1568 1578 "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==", 1569 1579 "dev": true, 1570 1580 "license": "Apache-2.0", 1581 1581 + "peer": true, 1571 1582 "engines": { 1572 1583 "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 1573 1584 } ··· 1578 1589 "integrity": "sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==", 1579 1590 "dev": true, 1580 1591 "license": "Apache-2.0", 1592 1592 + "peer": true, 1581 1593 "dependencies": { 1582 1594 "@eslint/core": "^0.16.0", 1583 1595 "levn": "^0.4.1" ··· 1586 1598 "node": "^18.18.0 || ^20.9.0 || >=21.1.0" 1587 1599 } 1588 1600 }, 1601 1601 + "node_modules/@floating-ui/core": { 1602 1602 + "version": "1.7.3", 1603 1603 + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", 1604 1604 + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", 1605 1605 + "dependencies": { 1606 1606 + "@floating-ui/utils": "^0.2.10" 1607 1607 + } 1608 1608 + }, 1609 1609 + "node_modules/@floating-ui/dom": { 1610 1610 + "version": "1.7.4", 1611 1611 + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", 1612 1612 + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", 1613 1613 + "dependencies": { 1614 1614 + "@floating-ui/core": "^1.7.3", 1615 1615 + "@floating-ui/utils": "^0.2.10" 1616 1616 + } 1617 1617 + }, 1618 1618 + "node_modules/@floating-ui/react-dom": { 1619 1619 + "version": "2.1.6", 1620 1620 + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", 1621 1621 + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", 1622 1622 + "dependencies": { 1623 1623 + "@floating-ui/dom": "^1.7.4" 1624 1624 + }, 1625 1625 + "peerDependencies": { 1626 1626 + "react": ">=16.8.0", 1627 1627 + "react-dom": ">=16.8.0" 1628 1628 + } 1629 1629 + }, 1630 1630 + "node_modules/@floating-ui/utils": { 1631 1631 + "version": "0.2.10", 1632 1632 + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", 1633 1633 + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==" 1634 1634 + }, 1589 1635 "node_modules/@humanfs/core": { 1590 1636 "version": "0.19.1", 1591 1637 "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", 1592 1638 "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==", 1593 1639 "dev": true, 1594 1640 "license": "Apache-2.0", 1641 1641 + "peer": true, 1595 1642 "engines": { 1596 1643 "node": ">=18.18.0" 1597 1644 } ··· 1602 1649 "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==", 1603 1650 "dev": true, 1604 1651 "license": "Apache-2.0", 1652 1652 + "peer": true, 1605 1653 "dependencies": { 1606 1654 "@humanfs/core": "^0.19.1", 1607 1655 "@humanwhocodes/retry": "^0.4.0" ··· 1616 1664 "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", 1617 1665 "dev": true, 1618 1666 "license": "Apache-2.0", 1667 1667 + "peer": true, 1619 1668 "engines": { 1620 1669 "node": ">=12.22" 1621 1670 }, ··· 1630 1679 "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==", 1631 1680 "dev": true, 1632 1681 "license": "Apache-2.0", 1682 1682 + "peer": true, 1633 1683 "engines": { 1634 1684 "node": ">=18.18" 1635 1685 }, ··· 1674 1724 "@iconify/types": "*" 1675 1725 } 1676 1726 }, 1727 1727 + "node_modules/@iconify/json": { 1728 1728 + "version": "2.2.396", 1729 1729 + "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.396.tgz", 1730 1730 + "integrity": "sha512-tijg77JFuYIt32S9N8p7La8C0zp9zKZsX6UP8ip5GVB1F6Mp3pZA5Vc5eAquTY50NoDJX58U6z4Qn3d6Wyossg==", 1731 1731 + "dev": true, 1732 1732 + "license": "MIT", 1733 1733 + "dependencies": { 1734 1734 + "@iconify/types": "*", 1735 1735 + "pathe": "^2.0.0" 1736 1736 + } 1737 1737 + }, 1677 1738 "node_modules/@iconify/types": { 1678 1739 "version": "2.0.0", 1679 1740 "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", ··· 1874 1935 "node": ">= 8" 1875 1936 } 1876 1937 }, 1938 1938 + "node_modules/@radix-ui/number": { 1939 1939 + "version": "1.1.1", 1940 1940 + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz", 1941 1941 + "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==" 1942 1942 + }, 1943 1943 + "node_modules/@radix-ui/primitive": { 1944 1944 + "version": "1.1.3", 1945 1945 + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", 1946 1946 + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==" 1947 1947 + }, 1948 1948 + "node_modules/@radix-ui/react-accessible-icon": { 1949 1949 + "version": "1.1.7", 1950 1950 + "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz", 1951 1951 + "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==", 1952 1952 + "dependencies": { 1953 1953 + "@radix-ui/react-visually-hidden": "1.2.3" 1954 1954 + }, 1955 1955 + "peerDependencies": { 1956 1956 + "@types/react": "*", 1957 1957 + "@types/react-dom": "*", 1958 1958 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 1959 1959 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 1960 1960 + }, 1961 1961 + "peerDependenciesMeta": { 1962 1962 + "@types/react": { 1963 1963 + "optional": true 1964 1964 + }, 1965 1965 + "@types/react-dom": { 1966 1966 + "optional": true 1967 1967 + } 1968 1968 + } 1969 1969 + }, 1970 1970 + "node_modules/@radix-ui/react-accordion": { 1971 1971 + "version": "1.2.12", 1972 1972 + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz", 1973 1973 + "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==", 1974 1974 + "dependencies": { 1975 1975 + "@radix-ui/primitive": "1.1.3", 1976 1976 + "@radix-ui/react-collapsible": "1.1.12", 1977 1977 + "@radix-ui/react-collection": "1.1.7", 1978 1978 + "@radix-ui/react-compose-refs": "1.1.2", 1979 1979 + "@radix-ui/react-context": "1.1.2", 1980 1980 + "@radix-ui/react-direction": "1.1.1", 1981 1981 + "@radix-ui/react-id": "1.1.1", 1982 1982 + "@radix-ui/react-primitive": "2.1.3", 1983 1983 + "@radix-ui/react-use-controllable-state": "1.2.2" 1984 1984 + }, 1985 1985 + "peerDependencies": { 1986 1986 + "@types/react": "*", 1987 1987 + "@types/react-dom": "*", 1988 1988 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 1989 1989 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 1990 1990 + }, 1991 1991 + "peerDependenciesMeta": { 1992 1992 + "@types/react": { 1993 1993 + "optional": true 1994 1994 + }, 1995 1995 + "@types/react-dom": { 1996 1996 + "optional": true 1997 1997 + } 1998 1998 + } 1999 1999 + }, 2000 2000 + "node_modules/@radix-ui/react-alert-dialog": { 2001 2001 + "version": "1.1.15", 2002 2002 + "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz", 2003 2003 + "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==", 2004 2004 + "dependencies": { 2005 2005 + "@radix-ui/primitive": "1.1.3", 2006 2006 + "@radix-ui/react-compose-refs": "1.1.2", 2007 2007 + "@radix-ui/react-context": "1.1.2", 2008 2008 + "@radix-ui/react-dialog": "1.1.15", 2009 2009 + "@radix-ui/react-primitive": "2.1.3", 2010 2010 + "@radix-ui/react-slot": "1.2.3" 2011 2011 + }, 2012 2012 + "peerDependencies": { 2013 2013 + "@types/react": "*", 2014 2014 + "@types/react-dom": "*", 2015 2015 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2016 2016 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2017 2017 + }, 2018 2018 + "peerDependenciesMeta": { 2019 2019 + "@types/react": { 2020 2020 + "optional": true 2021 2021 + }, 2022 2022 + "@types/react-dom": { 2023 2023 + "optional": true 2024 2024 + } 2025 2025 + } 2026 2026 + }, 2027 2027 + "node_modules/@radix-ui/react-arrow": { 2028 2028 + "version": "1.1.7", 2029 2029 + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz", 2030 2030 + "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==", 2031 2031 + "dependencies": { 2032 2032 + "@radix-ui/react-primitive": "2.1.3" 2033 2033 + }, 2034 2034 + "peerDependencies": { 2035 2035 + "@types/react": "*", 2036 2036 + "@types/react-dom": "*", 2037 2037 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2038 2038 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2039 2039 + }, 2040 2040 + "peerDependenciesMeta": { 2041 2041 + "@types/react": { 2042 2042 + "optional": true 2043 2043 + }, 2044 2044 + "@types/react-dom": { 2045 2045 + "optional": true 2046 2046 + } 2047 2047 + } 2048 2048 + }, 2049 2049 + "node_modules/@radix-ui/react-aspect-ratio": { 2050 2050 + "version": "1.1.7", 2051 2051 + "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz", 2052 2052 + "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==", 2053 2053 + "dependencies": { 2054 2054 + "@radix-ui/react-primitive": "2.1.3" 2055 2055 + }, 2056 2056 + "peerDependencies": { 2057 2057 + "@types/react": "*", 2058 2058 + "@types/react-dom": "*", 2059 2059 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2060 2060 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2061 2061 + }, 2062 2062 + "peerDependenciesMeta": { 2063 2063 + "@types/react": { 2064 2064 + "optional": true 2065 2065 + }, 2066 2066 + "@types/react-dom": { 2067 2067 + "optional": true 2068 2068 + } 2069 2069 + } 2070 2070 + }, 2071 2071 + "node_modules/@radix-ui/react-avatar": { 2072 2072 + "version": "1.1.10", 2073 2073 + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz", 2074 2074 + "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==", 2075 2075 + "dependencies": { 2076 2076 + "@radix-ui/react-context": "1.1.2", 2077 2077 + "@radix-ui/react-primitive": "2.1.3", 2078 2078 + "@radix-ui/react-use-callback-ref": "1.1.1", 2079 2079 + "@radix-ui/react-use-is-hydrated": "0.1.0", 2080 2080 + "@radix-ui/react-use-layout-effect": "1.1.1" 2081 2081 + }, 2082 2082 + "peerDependencies": { 2083 2083 + "@types/react": "*", 2084 2084 + "@types/react-dom": "*", 2085 2085 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2086 2086 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2087 2087 + }, 2088 2088 + "peerDependenciesMeta": { 2089 2089 + "@types/react": { 2090 2090 + "optional": true 2091 2091 + }, 2092 2092 + "@types/react-dom": { 2093 2093 + "optional": true 2094 2094 + } 2095 2095 + } 2096 2096 + }, 2097 2097 + "node_modules/@radix-ui/react-checkbox": { 2098 2098 + "version": "1.3.3", 2099 2099 + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", 2100 2100 + "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==", 2101 2101 + "dependencies": { 2102 2102 + "@radix-ui/primitive": "1.1.3", 2103 2103 + "@radix-ui/react-compose-refs": "1.1.2", 2104 2104 + "@radix-ui/react-context": "1.1.2", 2105 2105 + "@radix-ui/react-presence": "1.1.5", 2106 2106 + "@radix-ui/react-primitive": "2.1.3", 2107 2107 + "@radix-ui/react-use-controllable-state": "1.2.2", 2108 2108 + "@radix-ui/react-use-previous": "1.1.1", 2109 2109 + "@radix-ui/react-use-size": "1.1.1" 2110 2110 + }, 2111 2111 + "peerDependencies": { 2112 2112 + "@types/react": "*", 2113 2113 + "@types/react-dom": "*", 2114 2114 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2115 2115 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2116 2116 + }, 2117 2117 + "peerDependenciesMeta": { 2118 2118 + "@types/react": { 2119 2119 + "optional": true 2120 2120 + }, 2121 2121 + "@types/react-dom": { 2122 2122 + "optional": true 2123 2123 + } 2124 2124 + } 2125 2125 + }, 2126 2126 + "node_modules/@radix-ui/react-collapsible": { 2127 2127 + "version": "1.1.12", 2128 2128 + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz", 2129 2129 + "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==", 2130 2130 + "dependencies": { 2131 2131 + "@radix-ui/primitive": "1.1.3", 2132 2132 + "@radix-ui/react-compose-refs": "1.1.2", 2133 2133 + "@radix-ui/react-context": "1.1.2", 2134 2134 + "@radix-ui/react-id": "1.1.1", 2135 2135 + "@radix-ui/react-presence": "1.1.5", 2136 2136 + "@radix-ui/react-primitive": "2.1.3", 2137 2137 + "@radix-ui/react-use-controllable-state": "1.2.2", 2138 2138 + "@radix-ui/react-use-layout-effect": "1.1.1" 2139 2139 + }, 2140 2140 + "peerDependencies": { 2141 2141 + "@types/react": "*", 2142 2142 + "@types/react-dom": "*", 2143 2143 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2144 2144 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2145 2145 + }, 2146 2146 + "peerDependenciesMeta": { 2147 2147 + "@types/react": { 2148 2148 + "optional": true 2149 2149 + }, 2150 2150 + "@types/react-dom": { 2151 2151 + "optional": true 2152 2152 + } 2153 2153 + } 2154 2154 + }, 2155 2155 + "node_modules/@radix-ui/react-collection": { 2156 2156 + "version": "1.1.7", 2157 2157 + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz", 2158 2158 + "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==", 2159 2159 + "dependencies": { 2160 2160 + "@radix-ui/react-compose-refs": "1.1.2", 2161 2161 + "@radix-ui/react-context": "1.1.2", 2162 2162 + "@radix-ui/react-primitive": "2.1.3", 2163 2163 + "@radix-ui/react-slot": "1.2.3" 2164 2164 + }, 2165 2165 + "peerDependencies": { 2166 2166 + "@types/react": "*", 2167 2167 + "@types/react-dom": "*", 2168 2168 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2169 2169 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2170 2170 + }, 2171 2171 + "peerDependenciesMeta": { 2172 2172 + "@types/react": { 2173 2173 + "optional": true 2174 2174 + }, 2175 2175 + "@types/react-dom": { 2176 2176 + "optional": true 2177 2177 + } 2178 2178 + } 2179 2179 + }, 2180 2180 + "node_modules/@radix-ui/react-compose-refs": { 2181 2181 + "version": "1.1.2", 2182 2182 + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", 2183 2183 + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", 2184 2184 + "peerDependencies": { 2185 2185 + "@types/react": "*", 2186 2186 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2187 2187 + }, 2188 2188 + "peerDependenciesMeta": { 2189 2189 + "@types/react": { 2190 2190 + "optional": true 2191 2191 + } 2192 2192 + } 2193 2193 + }, 2194 2194 + "node_modules/@radix-ui/react-context": { 2195 2195 + "version": "1.1.2", 2196 2196 + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz", 2197 2197 + "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==", 2198 2198 + "peerDependencies": { 2199 2199 + "@types/react": "*", 2200 2200 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2201 2201 + }, 2202 2202 + "peerDependenciesMeta": { 2203 2203 + "@types/react": { 2204 2204 + "optional": true 2205 2205 + } 2206 2206 + } 2207 2207 + }, 2208 2208 + "node_modules/@radix-ui/react-context-menu": { 2209 2209 + "version": "2.2.16", 2210 2210 + "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz", 2211 2211 + "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==", 2212 2212 + "dependencies": { 2213 2213 + "@radix-ui/primitive": "1.1.3", 2214 2214 + "@radix-ui/react-context": "1.1.2", 2215 2215 + "@radix-ui/react-menu": "2.1.16", 2216 2216 + "@radix-ui/react-primitive": "2.1.3", 2217 2217 + "@radix-ui/react-use-callback-ref": "1.1.1", 2218 2218 + "@radix-ui/react-use-controllable-state": "1.2.2" 2219 2219 + }, 2220 2220 + "peerDependencies": { 2221 2221 + "@types/react": "*", 2222 2222 + "@types/react-dom": "*", 2223 2223 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2224 2224 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2225 2225 + }, 2226 2226 + "peerDependenciesMeta": { 2227 2227 + "@types/react": { 2228 2228 + "optional": true 2229 2229 + }, 2230 2230 + "@types/react-dom": { 2231 2231 + "optional": true 2232 2232 + } 2233 2233 + } 2234 2234 + }, 2235 2235 + "node_modules/@radix-ui/react-dialog": { 2236 2236 + "version": "1.1.15", 2237 2237 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz", 2238 2238 + "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==", 2239 2239 + "dependencies": { 2240 2240 + "@radix-ui/primitive": "1.1.3", 2241 2241 + "@radix-ui/react-compose-refs": "1.1.2", 2242 2242 + "@radix-ui/react-context": "1.1.2", 2243 2243 + "@radix-ui/react-dismissable-layer": "1.1.11", 2244 2244 + "@radix-ui/react-focus-guards": "1.1.3", 2245 2245 + "@radix-ui/react-focus-scope": "1.1.7", 2246 2246 + "@radix-ui/react-id": "1.1.1", 2247 2247 + "@radix-ui/react-portal": "1.1.9", 2248 2248 + "@radix-ui/react-presence": "1.1.5", 2249 2249 + "@radix-ui/react-primitive": "2.1.3", 2250 2250 + "@radix-ui/react-slot": "1.2.3", 2251 2251 + "@radix-ui/react-use-controllable-state": "1.2.2", 2252 2252 + "aria-hidden": "^1.2.4", 2253 2253 + "react-remove-scroll": "^2.6.3" 2254 2254 + }, 2255 2255 + "peerDependencies": { 2256 2256 + "@types/react": "*", 2257 2257 + "@types/react-dom": "*", 2258 2258 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2259 2259 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2260 2260 + }, 2261 2261 + "peerDependenciesMeta": { 2262 2262 + "@types/react": { 2263 2263 + "optional": true 2264 2264 + }, 2265 2265 + "@types/react-dom": { 2266 2266 + "optional": true 2267 2267 + } 2268 2268 + } 2269 2269 + }, 2270 2270 + "node_modules/@radix-ui/react-direction": { 2271 2271 + "version": "1.1.1", 2272 2272 + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz", 2273 2273 + "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==", 2274 2274 + "peerDependencies": { 2275 2275 + "@types/react": "*", 2276 2276 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2277 2277 + }, 2278 2278 + "peerDependenciesMeta": { 2279 2279 + "@types/react": { 2280 2280 + "optional": true 2281 2281 + } 2282 2282 + } 2283 2283 + }, 2284 2284 + "node_modules/@radix-ui/react-dismissable-layer": { 2285 2285 + "version": "1.1.11", 2286 2286 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz", 2287 2287 + "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==", 2288 2288 + "dependencies": { 2289 2289 + "@radix-ui/primitive": "1.1.3", 2290 2290 + "@radix-ui/react-compose-refs": "1.1.2", 2291 2291 + "@radix-ui/react-primitive": "2.1.3", 2292 2292 + "@radix-ui/react-use-callback-ref": "1.1.1", 2293 2293 + "@radix-ui/react-use-escape-keydown": "1.1.1" 2294 2294 + }, 2295 2295 + "peerDependencies": { 2296 2296 + "@types/react": "*", 2297 2297 + "@types/react-dom": "*", 2298 2298 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2299 2299 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2300 2300 + }, 2301 2301 + "peerDependenciesMeta": { 2302 2302 + "@types/react": { 2303 2303 + "optional": true 2304 2304 + }, 2305 2305 + "@types/react-dom": { 2306 2306 + "optional": true 2307 2307 + } 2308 2308 + } 2309 2309 + }, 2310 2310 + "node_modules/@radix-ui/react-dropdown-menu": { 2311 2311 + "version": "2.1.16", 2312 2312 + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz", 2313 2313 + "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==", 2314 2314 + "dependencies": { 2315 2315 + "@radix-ui/primitive": "1.1.3", 2316 2316 + "@radix-ui/react-compose-refs": "1.1.2", 2317 2317 + "@radix-ui/react-context": "1.1.2", 2318 2318 + "@radix-ui/react-id": "1.1.1", 2319 2319 + "@radix-ui/react-menu": "2.1.16", 2320 2320 + "@radix-ui/react-primitive": "2.1.3", 2321 2321 + "@radix-ui/react-use-controllable-state": "1.2.2" 2322 2322 + }, 2323 2323 + "peerDependencies": { 2324 2324 + "@types/react": "*", 2325 2325 + "@types/react-dom": "*", 2326 2326 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2327 2327 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2328 2328 + }, 2329 2329 + "peerDependenciesMeta": { 2330 2330 + "@types/react": { 2331 2331 + "optional": true 2332 2332 + }, 2333 2333 + "@types/react-dom": { 2334 2334 + "optional": true 2335 2335 + } 2336 2336 + } 2337 2337 + }, 2338 2338 + "node_modules/@radix-ui/react-focus-guards": { 2339 2339 + "version": "1.1.3", 2340 2340 + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz", 2341 2341 + "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==", 2342 2342 + "peerDependencies": { 2343 2343 + "@types/react": "*", 2344 2344 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2345 2345 + }, 2346 2346 + "peerDependenciesMeta": { 2347 2347 + "@types/react": { 2348 2348 + "optional": true 2349 2349 + } 2350 2350 + } 2351 2351 + }, 2352 2352 + "node_modules/@radix-ui/react-focus-scope": { 2353 2353 + "version": "1.1.7", 2354 2354 + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz", 2355 2355 + "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==", 2356 2356 + "dependencies": { 2357 2357 + "@radix-ui/react-compose-refs": "1.1.2", 2358 2358 + "@radix-ui/react-primitive": "2.1.3", 2359 2359 + "@radix-ui/react-use-callback-ref": "1.1.1" 2360 2360 + }, 2361 2361 + "peerDependencies": { 2362 2362 + "@types/react": "*", 2363 2363 + "@types/react-dom": "*", 2364 2364 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2365 2365 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2366 2366 + }, 2367 2367 + "peerDependenciesMeta": { 2368 2368 + "@types/react": { 2369 2369 + "optional": true 2370 2370 + }, 2371 2371 + "@types/react-dom": { 2372 2372 + "optional": true 2373 2373 + } 2374 2374 + } 2375 2375 + }, 2376 2376 + "node_modules/@radix-ui/react-form": { 2377 2377 + "version": "0.1.8", 2378 2378 + "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz", 2379 2379 + "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==", 2380 2380 + "dependencies": { 2381 2381 + "@radix-ui/primitive": "1.1.3", 2382 2382 + "@radix-ui/react-compose-refs": "1.1.2", 2383 2383 + "@radix-ui/react-context": "1.1.2", 2384 2384 + "@radix-ui/react-id": "1.1.1", 2385 2385 + "@radix-ui/react-label": "2.1.7", 2386 2386 + "@radix-ui/react-primitive": "2.1.3" 2387 2387 + }, 2388 2388 + "peerDependencies": { 2389 2389 + "@types/react": "*", 2390 2390 + "@types/react-dom": "*", 2391 2391 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2392 2392 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2393 2393 + }, 2394 2394 + "peerDependenciesMeta": { 2395 2395 + "@types/react": { 2396 2396 + "optional": true 2397 2397 + }, 2398 2398 + "@types/react-dom": { 2399 2399 + "optional": true 2400 2400 + } 2401 2401 + } 2402 2402 + }, 2403 2403 + "node_modules/@radix-ui/react-hover-card": { 2404 2404 + "version": "1.1.15", 2405 2405 + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz", 2406 2406 + "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==", 2407 2407 + "license": "MIT", 2408 2408 + "dependencies": { 2409 2409 + "@radix-ui/primitive": "1.1.3", 2410 2410 + "@radix-ui/react-compose-refs": "1.1.2", 2411 2411 + "@radix-ui/react-context": "1.1.2", 2412 2412 + "@radix-ui/react-dismissable-layer": "1.1.11", 2413 2413 + "@radix-ui/react-popper": "1.2.8", 2414 2414 + "@radix-ui/react-portal": "1.1.9", 2415 2415 + "@radix-ui/react-presence": "1.1.5", 2416 2416 + "@radix-ui/react-primitive": "2.1.3", 2417 2417 + "@radix-ui/react-use-controllable-state": "1.2.2" 2418 2418 + }, 2419 2419 + "peerDependencies": { 2420 2420 + "@types/react": "*", 2421 2421 + "@types/react-dom": "*", 2422 2422 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2423 2423 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2424 2424 + }, 2425 2425 + "peerDependenciesMeta": { 2426 2426 + "@types/react": { 2427 2427 + "optional": true 2428 2428 + }, 2429 2429 + "@types/react-dom": { 2430 2430 + "optional": true 2431 2431 + } 2432 2432 + } 2433 2433 + }, 2434 2434 + "node_modules/@radix-ui/react-id": { 2435 2435 + "version": "1.1.1", 2436 2436 + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz", 2437 2437 + "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==", 2438 2438 + "dependencies": { 2439 2439 + "@radix-ui/react-use-layout-effect": "1.1.1" 2440 2440 + }, 2441 2441 + "peerDependencies": { 2442 2442 + "@types/react": "*", 2443 2443 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2444 2444 + }, 2445 2445 + "peerDependenciesMeta": { 2446 2446 + "@types/react": { 2447 2447 + "optional": true 2448 2448 + } 2449 2449 + } 2450 2450 + }, 2451 2451 + "node_modules/@radix-ui/react-label": { 2452 2452 + "version": "2.1.7", 2453 2453 + "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz", 2454 2454 + "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==", 2455 2455 + "dependencies": { 2456 2456 + "@radix-ui/react-primitive": "2.1.3" 2457 2457 + }, 2458 2458 + "peerDependencies": { 2459 2459 + "@types/react": "*", 2460 2460 + "@types/react-dom": "*", 2461 2461 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2462 2462 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2463 2463 + }, 2464 2464 + "peerDependenciesMeta": { 2465 2465 + "@types/react": { 2466 2466 + "optional": true 2467 2467 + }, 2468 2468 + "@types/react-dom": { 2469 2469 + "optional": true 2470 2470 + } 2471 2471 + } 2472 2472 + }, 2473 2473 + "node_modules/@radix-ui/react-menu": { 2474 2474 + "version": "2.1.16", 2475 2475 + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz", 2476 2476 + "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==", 2477 2477 + "dependencies": { 2478 2478 + "@radix-ui/primitive": "1.1.3", 2479 2479 + "@radix-ui/react-collection": "1.1.7", 2480 2480 + "@radix-ui/react-compose-refs": "1.1.2", 2481 2481 + "@radix-ui/react-context": "1.1.2", 2482 2482 + "@radix-ui/react-direction": "1.1.1", 2483 2483 + "@radix-ui/react-dismissable-layer": "1.1.11", 2484 2484 + "@radix-ui/react-focus-guards": "1.1.3", 2485 2485 + "@radix-ui/react-focus-scope": "1.1.7", 2486 2486 + "@radix-ui/react-id": "1.1.1", 2487 2487 + "@radix-ui/react-popper": "1.2.8", 2488 2488 + "@radix-ui/react-portal": "1.1.9", 2489 2489 + "@radix-ui/react-presence": "1.1.5", 2490 2490 + "@radix-ui/react-primitive": "2.1.3", 2491 2491 + "@radix-ui/react-roving-focus": "1.1.11", 2492 2492 + "@radix-ui/react-slot": "1.2.3", 2493 2493 + "@radix-ui/react-use-callback-ref": "1.1.1", 2494 2494 + "aria-hidden": "^1.2.4", 2495 2495 + "react-remove-scroll": "^2.6.3" 2496 2496 + }, 2497 2497 + "peerDependencies": { 2498 2498 + "@types/react": "*", 2499 2499 + "@types/react-dom": "*", 2500 2500 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2501 2501 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2502 2502 + }, 2503 2503 + "peerDependenciesMeta": { 2504 2504 + "@types/react": { 2505 2505 + "optional": true 2506 2506 + }, 2507 2507 + "@types/react-dom": { 2508 2508 + "optional": true 2509 2509 + } 2510 2510 + } 2511 2511 + }, 2512 2512 + "node_modules/@radix-ui/react-menubar": { 2513 2513 + "version": "1.1.16", 2514 2514 + "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz", 2515 2515 + "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==", 2516 2516 + "dependencies": { 2517 2517 + "@radix-ui/primitive": "1.1.3", 2518 2518 + "@radix-ui/react-collection": "1.1.7", 2519 2519 + "@radix-ui/react-compose-refs": "1.1.2", 2520 2520 + "@radix-ui/react-context": "1.1.2", 2521 2521 + "@radix-ui/react-direction": "1.1.1", 2522 2522 + "@radix-ui/react-id": "1.1.1", 2523 2523 + "@radix-ui/react-menu": "2.1.16", 2524 2524 + "@radix-ui/react-primitive": "2.1.3", 2525 2525 + "@radix-ui/react-roving-focus": "1.1.11", 2526 2526 + "@radix-ui/react-use-controllable-state": "1.2.2" 2527 2527 + }, 2528 2528 + "peerDependencies": { 2529 2529 + "@types/react": "*", 2530 2530 + "@types/react-dom": "*", 2531 2531 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2532 2532 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2533 2533 + }, 2534 2534 + "peerDependenciesMeta": { 2535 2535 + "@types/react": { 2536 2536 + "optional": true 2537 2537 + }, 2538 2538 + "@types/react-dom": { 2539 2539 + "optional": true 2540 2540 + } 2541 2541 + } 2542 2542 + }, 2543 2543 + "node_modules/@radix-ui/react-navigation-menu": { 2544 2544 + "version": "1.2.14", 2545 2545 + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz", 2546 2546 + "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==", 2547 2547 + "dependencies": { 2548 2548 + "@radix-ui/primitive": "1.1.3", 2549 2549 + "@radix-ui/react-collection": "1.1.7", 2550 2550 + "@radix-ui/react-compose-refs": "1.1.2", 2551 2551 + "@radix-ui/react-context": "1.1.2", 2552 2552 + "@radix-ui/react-direction": "1.1.1", 2553 2553 + "@radix-ui/react-dismissable-layer": "1.1.11", 2554 2554 + "@radix-ui/react-id": "1.1.1", 2555 2555 + "@radix-ui/react-presence": "1.1.5", 2556 2556 + "@radix-ui/react-primitive": "2.1.3", 2557 2557 + "@radix-ui/react-use-callback-ref": "1.1.1", 2558 2558 + "@radix-ui/react-use-controllable-state": "1.2.2", 2559 2559 + "@radix-ui/react-use-layout-effect": "1.1.1", 2560 2560 + "@radix-ui/react-use-previous": "1.1.1", 2561 2561 + "@radix-ui/react-visually-hidden": "1.2.3" 2562 2562 + }, 2563 2563 + "peerDependencies": { 2564 2564 + "@types/react": "*", 2565 2565 + "@types/react-dom": "*", 2566 2566 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2567 2567 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2568 2568 + }, 2569 2569 + "peerDependenciesMeta": { 2570 2570 + "@types/react": { 2571 2571 + "optional": true 2572 2572 + }, 2573 2573 + "@types/react-dom": { 2574 2574 + "optional": true 2575 2575 + } 2576 2576 + } 2577 2577 + }, 2578 2578 + "node_modules/@radix-ui/react-one-time-password-field": { 2579 2579 + "version": "0.1.8", 2580 2580 + "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz", 2581 2581 + "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==", 2582 2582 + "dependencies": { 2583 2583 + "@radix-ui/number": "1.1.1", 2584 2584 + "@radix-ui/primitive": "1.1.3", 2585 2585 + "@radix-ui/react-collection": "1.1.7", 2586 2586 + "@radix-ui/react-compose-refs": "1.1.2", 2587 2587 + "@radix-ui/react-context": "1.1.2", 2588 2588 + "@radix-ui/react-direction": "1.1.1", 2589 2589 + "@radix-ui/react-primitive": "2.1.3", 2590 2590 + "@radix-ui/react-roving-focus": "1.1.11", 2591 2591 + "@radix-ui/react-use-controllable-state": "1.2.2", 2592 2592 + "@radix-ui/react-use-effect-event": "0.0.2", 2593 2593 + "@radix-ui/react-use-is-hydrated": "0.1.0", 2594 2594 + "@radix-ui/react-use-layout-effect": "1.1.1" 2595 2595 + }, 2596 2596 + "peerDependencies": { 2597 2597 + "@types/react": "*", 2598 2598 + "@types/react-dom": "*", 2599 2599 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2600 2600 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2601 2601 + }, 2602 2602 + "peerDependenciesMeta": { 2603 2603 + "@types/react": { 2604 2604 + "optional": true 2605 2605 + }, 2606 2606 + "@types/react-dom": { 2607 2607 + "optional": true 2608 2608 + } 2609 2609 + } 2610 2610 + }, 2611 2611 + "node_modules/@radix-ui/react-password-toggle-field": { 2612 2612 + "version": "0.1.3", 2613 2613 + "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz", 2614 2614 + "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==", 2615 2615 + "dependencies": { 2616 2616 + "@radix-ui/primitive": "1.1.3", 2617 2617 + "@radix-ui/react-compose-refs": "1.1.2", 2618 2618 + "@radix-ui/react-context": "1.1.2", 2619 2619 + "@radix-ui/react-id": "1.1.1", 2620 2620 + "@radix-ui/react-primitive": "2.1.3", 2621 2621 + "@radix-ui/react-use-controllable-state": "1.2.2", 2622 2622 + "@radix-ui/react-use-effect-event": "0.0.2", 2623 2623 + "@radix-ui/react-use-is-hydrated": "0.1.0" 2624 2624 + }, 2625 2625 + "peerDependencies": { 2626 2626 + "@types/react": "*", 2627 2627 + "@types/react-dom": "*", 2628 2628 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2629 2629 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2630 2630 + }, 2631 2631 + "peerDependenciesMeta": { 2632 2632 + "@types/react": { 2633 2633 + "optional": true 2634 2634 + }, 2635 2635 + "@types/react-dom": { 2636 2636 + "optional": true 2637 2637 + } 2638 2638 + } 2639 2639 + }, 2640 2640 + "node_modules/@radix-ui/react-popover": { 2641 2641 + "version": "1.1.15", 2642 2642 + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz", 2643 2643 + "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==", 2644 2644 + "dependencies": { 2645 2645 + "@radix-ui/primitive": "1.1.3", 2646 2646 + "@radix-ui/react-compose-refs": "1.1.2", 2647 2647 + "@radix-ui/react-context": "1.1.2", 2648 2648 + "@radix-ui/react-dismissable-layer": "1.1.11", 2649 2649 + "@radix-ui/react-focus-guards": "1.1.3", 2650 2650 + "@radix-ui/react-focus-scope": "1.1.7", 2651 2651 + "@radix-ui/react-id": "1.1.1", 2652 2652 + "@radix-ui/react-popper": "1.2.8", 2653 2653 + "@radix-ui/react-portal": "1.1.9", 2654 2654 + "@radix-ui/react-presence": "1.1.5", 2655 2655 + "@radix-ui/react-primitive": "2.1.3", 2656 2656 + "@radix-ui/react-slot": "1.2.3", 2657 2657 + "@radix-ui/react-use-controllable-state": "1.2.2", 2658 2658 + "aria-hidden": "^1.2.4", 2659 2659 + "react-remove-scroll": "^2.6.3" 2660 2660 + }, 2661 2661 + "peerDependencies": { 2662 2662 + "@types/react": "*", 2663 2663 + "@types/react-dom": "*", 2664 2664 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2665 2665 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2666 2666 + }, 2667 2667 + "peerDependenciesMeta": { 2668 2668 + "@types/react": { 2669 2669 + "optional": true 2670 2670 + }, 2671 2671 + "@types/react-dom": { 2672 2672 + "optional": true 2673 2673 + } 2674 2674 + } 2675 2675 + }, 2676 2676 + "node_modules/@radix-ui/react-popper": { 2677 2677 + "version": "1.2.8", 2678 2678 + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz", 2679 2679 + "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==", 2680 2680 + "dependencies": { 2681 2681 + "@floating-ui/react-dom": "^2.0.0", 2682 2682 + "@radix-ui/react-arrow": "1.1.7", 2683 2683 + "@radix-ui/react-compose-refs": "1.1.2", 2684 2684 + "@radix-ui/react-context": "1.1.2", 2685 2685 + "@radix-ui/react-primitive": "2.1.3", 2686 2686 + "@radix-ui/react-use-callback-ref": "1.1.1", 2687 2687 + "@radix-ui/react-use-layout-effect": "1.1.1", 2688 2688 + "@radix-ui/react-use-rect": "1.1.1", 2689 2689 + "@radix-ui/react-use-size": "1.1.1", 2690 2690 + "@radix-ui/rect": "1.1.1" 2691 2691 + }, 2692 2692 + "peerDependencies": { 2693 2693 + "@types/react": "*", 2694 2694 + "@types/react-dom": "*", 2695 2695 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2696 2696 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2697 2697 + }, 2698 2698 + "peerDependenciesMeta": { 2699 2699 + "@types/react": { 2700 2700 + "optional": true 2701 2701 + }, 2702 2702 + "@types/react-dom": { 2703 2703 + "optional": true 2704 2704 + } 2705 2705 + } 2706 2706 + }, 2707 2707 + "node_modules/@radix-ui/react-portal": { 2708 2708 + "version": "1.1.9", 2709 2709 + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz", 2710 2710 + "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==", 2711 2711 + "dependencies": { 2712 2712 + "@radix-ui/react-primitive": "2.1.3", 2713 2713 + "@radix-ui/react-use-layout-effect": "1.1.1" 2714 2714 + }, 2715 2715 + "peerDependencies": { 2716 2716 + "@types/react": "*", 2717 2717 + "@types/react-dom": "*", 2718 2718 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2719 2719 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2720 2720 + }, 2721 2721 + "peerDependenciesMeta": { 2722 2722 + "@types/react": { 2723 2723 + "optional": true 2724 2724 + }, 2725 2725 + "@types/react-dom": { 2726 2726 + "optional": true 2727 2727 + } 2728 2728 + } 2729 2729 + }, 2730 2730 + "node_modules/@radix-ui/react-presence": { 2731 2731 + "version": "1.1.5", 2732 2732 + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", 2733 2733 + "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==", 2734 2734 + "dependencies": { 2735 2735 + "@radix-ui/react-compose-refs": "1.1.2", 2736 2736 + "@radix-ui/react-use-layout-effect": "1.1.1" 2737 2737 + }, 2738 2738 + "peerDependencies": { 2739 2739 + "@types/react": "*", 2740 2740 + "@types/react-dom": "*", 2741 2741 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2742 2742 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2743 2743 + }, 2744 2744 + "peerDependenciesMeta": { 2745 2745 + "@types/react": { 2746 2746 + "optional": true 2747 2747 + }, 2748 2748 + "@types/react-dom": { 2749 2749 + "optional": true 2750 2750 + } 2751 2751 + } 2752 2752 + }, 2753 2753 + "node_modules/@radix-ui/react-primitive": { 2754 2754 + "version": "2.1.3", 2755 2755 + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz", 2756 2756 + "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==", 2757 2757 + "dependencies": { 2758 2758 + "@radix-ui/react-slot": "1.2.3" 2759 2759 + }, 2760 2760 + "peerDependencies": { 2761 2761 + "@types/react": "*", 2762 2762 + "@types/react-dom": "*", 2763 2763 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2764 2764 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2765 2765 + }, 2766 2766 + "peerDependenciesMeta": { 2767 2767 + "@types/react": { 2768 2768 + "optional": true 2769 2769 + }, 2770 2770 + "@types/react-dom": { 2771 2771 + "optional": true 2772 2772 + } 2773 2773 + } 2774 2774 + }, 2775 2775 + "node_modules/@radix-ui/react-progress": { 2776 2776 + "version": "1.1.7", 2777 2777 + "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz", 2778 2778 + "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==", 2779 2779 + "dependencies": { 2780 2780 + "@radix-ui/react-context": "1.1.2", 2781 2781 + "@radix-ui/react-primitive": "2.1.3" 2782 2782 + }, 2783 2783 + "peerDependencies": { 2784 2784 + "@types/react": "*", 2785 2785 + "@types/react-dom": "*", 2786 2786 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2787 2787 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2788 2788 + }, 2789 2789 + "peerDependenciesMeta": { 2790 2790 + "@types/react": { 2791 2791 + "optional": true 2792 2792 + }, 2793 2793 + "@types/react-dom": { 2794 2794 + "optional": true 2795 2795 + } 2796 2796 + } 2797 2797 + }, 2798 2798 + "node_modules/@radix-ui/react-radio-group": { 2799 2799 + "version": "1.3.8", 2800 2800 + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz", 2801 2801 + "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==", 2802 2802 + "dependencies": { 2803 2803 + "@radix-ui/primitive": "1.1.3", 2804 2804 + "@radix-ui/react-compose-refs": "1.1.2", 2805 2805 + "@radix-ui/react-context": "1.1.2", 2806 2806 + "@radix-ui/react-direction": "1.1.1", 2807 2807 + "@radix-ui/react-presence": "1.1.5", 2808 2808 + "@radix-ui/react-primitive": "2.1.3", 2809 2809 + "@radix-ui/react-roving-focus": "1.1.11", 2810 2810 + "@radix-ui/react-use-controllable-state": "1.2.2", 2811 2811 + "@radix-ui/react-use-previous": "1.1.1", 2812 2812 + "@radix-ui/react-use-size": "1.1.1" 2813 2813 + }, 2814 2814 + "peerDependencies": { 2815 2815 + "@types/react": "*", 2816 2816 + "@types/react-dom": "*", 2817 2817 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2818 2818 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2819 2819 + }, 2820 2820 + "peerDependenciesMeta": { 2821 2821 + "@types/react": { 2822 2822 + "optional": true 2823 2823 + }, 2824 2824 + "@types/react-dom": { 2825 2825 + "optional": true 2826 2826 + } 2827 2827 + } 2828 2828 + }, 2829 2829 + "node_modules/@radix-ui/react-roving-focus": { 2830 2830 + "version": "1.1.11", 2831 2831 + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz", 2832 2832 + "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==", 2833 2833 + "dependencies": { 2834 2834 + "@radix-ui/primitive": "1.1.3", 2835 2835 + "@radix-ui/react-collection": "1.1.7", 2836 2836 + "@radix-ui/react-compose-refs": "1.1.2", 2837 2837 + "@radix-ui/react-context": "1.1.2", 2838 2838 + "@radix-ui/react-direction": "1.1.1", 2839 2839 + "@radix-ui/react-id": "1.1.1", 2840 2840 + "@radix-ui/react-primitive": "2.1.3", 2841 2841 + "@radix-ui/react-use-callback-ref": "1.1.1", 2842 2842 + "@radix-ui/react-use-controllable-state": "1.2.2" 2843 2843 + }, 2844 2844 + "peerDependencies": { 2845 2845 + "@types/react": "*", 2846 2846 + "@types/react-dom": "*", 2847 2847 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2848 2848 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2849 2849 + }, 2850 2850 + "peerDependenciesMeta": { 2851 2851 + "@types/react": { 2852 2852 + "optional": true 2853 2853 + }, 2854 2854 + "@types/react-dom": { 2855 2855 + "optional": true 2856 2856 + } 2857 2857 + } 2858 2858 + }, 2859 2859 + "node_modules/@radix-ui/react-scroll-area": { 2860 2860 + "version": "1.2.10", 2861 2861 + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz", 2862 2862 + "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==", 2863 2863 + "dependencies": { 2864 2864 + "@radix-ui/number": "1.1.1", 2865 2865 + "@radix-ui/primitive": "1.1.3", 2866 2866 + "@radix-ui/react-compose-refs": "1.1.2", 2867 2867 + "@radix-ui/react-context": "1.1.2", 2868 2868 + "@radix-ui/react-direction": "1.1.1", 2869 2869 + "@radix-ui/react-presence": "1.1.5", 2870 2870 + "@radix-ui/react-primitive": "2.1.3", 2871 2871 + "@radix-ui/react-use-callback-ref": "1.1.1", 2872 2872 + "@radix-ui/react-use-layout-effect": "1.1.1" 2873 2873 + }, 2874 2874 + "peerDependencies": { 2875 2875 + "@types/react": "*", 2876 2876 + "@types/react-dom": "*", 2877 2877 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2878 2878 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2879 2879 + }, 2880 2880 + "peerDependenciesMeta": { 2881 2881 + "@types/react": { 2882 2882 + "optional": true 2883 2883 + }, 2884 2884 + "@types/react-dom": { 2885 2885 + "optional": true 2886 2886 + } 2887 2887 + } 2888 2888 + }, 2889 2889 + "node_modules/@radix-ui/react-select": { 2890 2890 + "version": "2.2.6", 2891 2891 + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", 2892 2892 + "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==", 2893 2893 + "dependencies": { 2894 2894 + "@radix-ui/number": "1.1.1", 2895 2895 + "@radix-ui/primitive": "1.1.3", 2896 2896 + "@radix-ui/react-collection": "1.1.7", 2897 2897 + "@radix-ui/react-compose-refs": "1.1.2", 2898 2898 + "@radix-ui/react-context": "1.1.2", 2899 2899 + "@radix-ui/react-direction": "1.1.1", 2900 2900 + "@radix-ui/react-dismissable-layer": "1.1.11", 2901 2901 + "@radix-ui/react-focus-guards": "1.1.3", 2902 2902 + "@radix-ui/react-focus-scope": "1.1.7", 2903 2903 + "@radix-ui/react-id": "1.1.1", 2904 2904 + "@radix-ui/react-popper": "1.2.8", 2905 2905 + "@radix-ui/react-portal": "1.1.9", 2906 2906 + "@radix-ui/react-primitive": "2.1.3", 2907 2907 + "@radix-ui/react-slot": "1.2.3", 2908 2908 + "@radix-ui/react-use-callback-ref": "1.1.1", 2909 2909 + "@radix-ui/react-use-controllable-state": "1.2.2", 2910 2910 + "@radix-ui/react-use-layout-effect": "1.1.1", 2911 2911 + "@radix-ui/react-use-previous": "1.1.1", 2912 2912 + "@radix-ui/react-visually-hidden": "1.2.3", 2913 2913 + "aria-hidden": "^1.2.4", 2914 2914 + "react-remove-scroll": "^2.6.3" 2915 2915 + }, 2916 2916 + "peerDependencies": { 2917 2917 + "@types/react": "*", 2918 2918 + "@types/react-dom": "*", 2919 2919 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2920 2920 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2921 2921 + }, 2922 2922 + "peerDependenciesMeta": { 2923 2923 + "@types/react": { 2924 2924 + "optional": true 2925 2925 + }, 2926 2926 + "@types/react-dom": { 2927 2927 + "optional": true 2928 2928 + } 2929 2929 + } 2930 2930 + }, 2931 2931 + "node_modules/@radix-ui/react-separator": { 2932 2932 + "version": "1.1.7", 2933 2933 + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz", 2934 2934 + "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==", 2935 2935 + "dependencies": { 2936 2936 + "@radix-ui/react-primitive": "2.1.3" 2937 2937 + }, 2938 2938 + "peerDependencies": { 2939 2939 + "@types/react": "*", 2940 2940 + "@types/react-dom": "*", 2941 2941 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2942 2942 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2943 2943 + }, 2944 2944 + "peerDependenciesMeta": { 2945 2945 + "@types/react": { 2946 2946 + "optional": true 2947 2947 + }, 2948 2948 + "@types/react-dom": { 2949 2949 + "optional": true 2950 2950 + } 2951 2951 + } 2952 2952 + }, 2953 2953 + "node_modules/@radix-ui/react-slider": { 2954 2954 + "version": "1.3.6", 2955 2955 + "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz", 2956 2956 + "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==", 2957 2957 + "dependencies": { 2958 2958 + "@radix-ui/number": "1.1.1", 2959 2959 + "@radix-ui/primitive": "1.1.3", 2960 2960 + "@radix-ui/react-collection": "1.1.7", 2961 2961 + "@radix-ui/react-compose-refs": "1.1.2", 2962 2962 + "@radix-ui/react-context": "1.1.2", 2963 2963 + "@radix-ui/react-direction": "1.1.1", 2964 2964 + "@radix-ui/react-primitive": "2.1.3", 2965 2965 + "@radix-ui/react-use-controllable-state": "1.2.2", 2966 2966 + "@radix-ui/react-use-layout-effect": "1.1.1", 2967 2967 + "@radix-ui/react-use-previous": "1.1.1", 2968 2968 + "@radix-ui/react-use-size": "1.1.1" 2969 2969 + }, 2970 2970 + "peerDependencies": { 2971 2971 + "@types/react": "*", 2972 2972 + "@types/react-dom": "*", 2973 2973 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 2974 2974 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2975 2975 + }, 2976 2976 + "peerDependenciesMeta": { 2977 2977 + "@types/react": { 2978 2978 + "optional": true 2979 2979 + }, 2980 2980 + "@types/react-dom": { 2981 2981 + "optional": true 2982 2982 + } 2983 2983 + } 2984 2984 + }, 2985 2985 + "node_modules/@radix-ui/react-slot": { 2986 2986 + "version": "1.2.3", 2987 2987 + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", 2988 2988 + "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==", 2989 2989 + "dependencies": { 2990 2990 + "@radix-ui/react-compose-refs": "1.1.2" 2991 2991 + }, 2992 2992 + "peerDependencies": { 2993 2993 + "@types/react": "*", 2994 2994 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 2995 2995 + }, 2996 2996 + "peerDependenciesMeta": { 2997 2997 + "@types/react": { 2998 2998 + "optional": true 2999 2999 + } 3000 3000 + } 3001 3001 + }, 3002 3002 + "node_modules/@radix-ui/react-switch": { 3003 3003 + "version": "1.2.6", 3004 3004 + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz", 3005 3005 + "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==", 3006 3006 + "dependencies": { 3007 3007 + "@radix-ui/primitive": "1.1.3", 3008 3008 + "@radix-ui/react-compose-refs": "1.1.2", 3009 3009 + "@radix-ui/react-context": "1.1.2", 3010 3010 + "@radix-ui/react-primitive": "2.1.3", 3011 3011 + "@radix-ui/react-use-controllable-state": "1.2.2", 3012 3012 + "@radix-ui/react-use-previous": "1.1.1", 3013 3013 + "@radix-ui/react-use-size": "1.1.1" 3014 3014 + }, 3015 3015 + "peerDependencies": { 3016 3016 + "@types/react": "*", 3017 3017 + "@types/react-dom": "*", 3018 3018 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3019 3019 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3020 3020 + }, 3021 3021 + "peerDependenciesMeta": { 3022 3022 + "@types/react": { 3023 3023 + "optional": true 3024 3024 + }, 3025 3025 + "@types/react-dom": { 3026 3026 + "optional": true 3027 3027 + } 3028 3028 + } 3029 3029 + }, 3030 3030 + "node_modules/@radix-ui/react-tabs": { 3031 3031 + "version": "1.1.13", 3032 3032 + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", 3033 3033 + "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==", 3034 3034 + "dependencies": { 3035 3035 + "@radix-ui/primitive": "1.1.3", 3036 3036 + "@radix-ui/react-context": "1.1.2", 3037 3037 + "@radix-ui/react-direction": "1.1.1", 3038 3038 + "@radix-ui/react-id": "1.1.1", 3039 3039 + "@radix-ui/react-presence": "1.1.5", 3040 3040 + "@radix-ui/react-primitive": "2.1.3", 3041 3041 + "@radix-ui/react-roving-focus": "1.1.11", 3042 3042 + "@radix-ui/react-use-controllable-state": "1.2.2" 3043 3043 + }, 3044 3044 + "peerDependencies": { 3045 3045 + "@types/react": "*", 3046 3046 + "@types/react-dom": "*", 3047 3047 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3048 3048 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3049 3049 + }, 3050 3050 + "peerDependenciesMeta": { 3051 3051 + "@types/react": { 3052 3052 + "optional": true 3053 3053 + }, 3054 3054 + "@types/react-dom": { 3055 3055 + "optional": true 3056 3056 + } 3057 3057 + } 3058 3058 + }, 3059 3059 + "node_modules/@radix-ui/react-toast": { 3060 3060 + "version": "1.2.15", 3061 3061 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz", 3062 3062 + "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==", 3063 3063 + "dependencies": { 3064 3064 + "@radix-ui/primitive": "1.1.3", 3065 3065 + "@radix-ui/react-collection": "1.1.7", 3066 3066 + "@radix-ui/react-compose-refs": "1.1.2", 3067 3067 + "@radix-ui/react-context": "1.1.2", 3068 3068 + "@radix-ui/react-dismissable-layer": "1.1.11", 3069 3069 + "@radix-ui/react-portal": "1.1.9", 3070 3070 + "@radix-ui/react-presence": "1.1.5", 3071 3071 + "@radix-ui/react-primitive": "2.1.3", 3072 3072 + "@radix-ui/react-use-callback-ref": "1.1.1", 3073 3073 + "@radix-ui/react-use-controllable-state": "1.2.2", 3074 3074 + "@radix-ui/react-use-layout-effect": "1.1.1", 3075 3075 + "@radix-ui/react-visually-hidden": "1.2.3" 3076 3076 + }, 3077 3077 + "peerDependencies": { 3078 3078 + "@types/react": "*", 3079 3079 + "@types/react-dom": "*", 3080 3080 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3081 3081 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3082 3082 + }, 3083 3083 + "peerDependenciesMeta": { 3084 3084 + "@types/react": { 3085 3085 + "optional": true 3086 3086 + }, 3087 3087 + "@types/react-dom": { 3088 3088 + "optional": true 3089 3089 + } 3090 3090 + } 3091 3091 + }, 3092 3092 + "node_modules/@radix-ui/react-toggle": { 3093 3093 + "version": "1.1.10", 3094 3094 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz", 3095 3095 + "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==", 3096 3096 + "dependencies": { 3097 3097 + "@radix-ui/primitive": "1.1.3", 3098 3098 + "@radix-ui/react-primitive": "2.1.3", 3099 3099 + "@radix-ui/react-use-controllable-state": "1.2.2" 3100 3100 + }, 3101 3101 + "peerDependencies": { 3102 3102 + "@types/react": "*", 3103 3103 + "@types/react-dom": "*", 3104 3104 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3105 3105 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3106 3106 + }, 3107 3107 + "peerDependenciesMeta": { 3108 3108 + "@types/react": { 3109 3109 + "optional": true 3110 3110 + }, 3111 3111 + "@types/react-dom": { 3112 3112 + "optional": true 3113 3113 + } 3114 3114 + } 3115 3115 + }, 3116 3116 + "node_modules/@radix-ui/react-toggle-group": { 3117 3117 + "version": "1.1.11", 3118 3118 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz", 3119 3119 + "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==", 3120 3120 + "dependencies": { 3121 3121 + "@radix-ui/primitive": "1.1.3", 3122 3122 + "@radix-ui/react-context": "1.1.2", 3123 3123 + "@radix-ui/react-direction": "1.1.1", 3124 3124 + "@radix-ui/react-primitive": "2.1.3", 3125 3125 + "@radix-ui/react-roving-focus": "1.1.11", 3126 3126 + "@radix-ui/react-toggle": "1.1.10", 3127 3127 + "@radix-ui/react-use-controllable-state": "1.2.2" 3128 3128 + }, 3129 3129 + "peerDependencies": { 3130 3130 + "@types/react": "*", 3131 3131 + "@types/react-dom": "*", 3132 3132 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3133 3133 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3134 3134 + }, 3135 3135 + "peerDependenciesMeta": { 3136 3136 + "@types/react": { 3137 3137 + "optional": true 3138 3138 + }, 3139 3139 + "@types/react-dom": { 3140 3140 + "optional": true 3141 3141 + } 3142 3142 + } 3143 3143 + }, 3144 3144 + "node_modules/@radix-ui/react-toolbar": { 3145 3145 + "version": "1.1.11", 3146 3146 + "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz", 3147 3147 + "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==", 3148 3148 + "dependencies": { 3149 3149 + "@radix-ui/primitive": "1.1.3", 3150 3150 + "@radix-ui/react-context": "1.1.2", 3151 3151 + "@radix-ui/react-direction": "1.1.1", 3152 3152 + "@radix-ui/react-primitive": "2.1.3", 3153 3153 + "@radix-ui/react-roving-focus": "1.1.11", 3154 3154 + "@radix-ui/react-separator": "1.1.7", 3155 3155 + "@radix-ui/react-toggle-group": "1.1.11" 3156 3156 + }, 3157 3157 + "peerDependencies": { 3158 3158 + "@types/react": "*", 3159 3159 + "@types/react-dom": "*", 3160 3160 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3161 3161 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3162 3162 + }, 3163 3163 + "peerDependenciesMeta": { 3164 3164 + "@types/react": { 3165 3165 + "optional": true 3166 3166 + }, 3167 3167 + "@types/react-dom": { 3168 3168 + "optional": true 3169 3169 + } 3170 3170 + } 3171 3171 + }, 3172 3172 + "node_modules/@radix-ui/react-tooltip": { 3173 3173 + "version": "1.2.8", 3174 3174 + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz", 3175 3175 + "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==", 3176 3176 + "dependencies": { 3177 3177 + "@radix-ui/primitive": "1.1.3", 3178 3178 + "@radix-ui/react-compose-refs": "1.1.2", 3179 3179 + "@radix-ui/react-context": "1.1.2", 3180 3180 + "@radix-ui/react-dismissable-layer": "1.1.11", 3181 3181 + "@radix-ui/react-id": "1.1.1", 3182 3182 + "@radix-ui/react-popper": "1.2.8", 3183 3183 + "@radix-ui/react-portal": "1.1.9", 3184 3184 + "@radix-ui/react-presence": "1.1.5", 3185 3185 + "@radix-ui/react-primitive": "2.1.3", 3186 3186 + "@radix-ui/react-slot": "1.2.3", 3187 3187 + "@radix-ui/react-use-controllable-state": "1.2.2", 3188 3188 + "@radix-ui/react-visually-hidden": "1.2.3" 3189 3189 + }, 3190 3190 + "peerDependencies": { 3191 3191 + "@types/react": "*", 3192 3192 + "@types/react-dom": "*", 3193 3193 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3194 3194 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3195 3195 + }, 3196 3196 + "peerDependenciesMeta": { 3197 3197 + "@types/react": { 3198 3198 + "optional": true 3199 3199 + }, 3200 3200 + "@types/react-dom": { 3201 3201 + "optional": true 3202 3202 + } 3203 3203 + } 3204 3204 + }, 3205 3205 + "node_modules/@radix-ui/react-use-callback-ref": { 3206 3206 + "version": "1.1.1", 3207 3207 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", 3208 3208 + "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==", 3209 3209 + "peerDependencies": { 3210 3210 + "@types/react": "*", 3211 3211 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3212 3212 + }, 3213 3213 + "peerDependenciesMeta": { 3214 3214 + "@types/react": { 3215 3215 + "optional": true 3216 3216 + } 3217 3217 + } 3218 3218 + }, 3219 3219 + "node_modules/@radix-ui/react-use-controllable-state": { 3220 3220 + "version": "1.2.2", 3221 3221 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz", 3222 3222 + "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==", 3223 3223 + "dependencies": { 3224 3224 + "@radix-ui/react-use-effect-event": "0.0.2", 3225 3225 + "@radix-ui/react-use-layout-effect": "1.1.1" 3226 3226 + }, 3227 3227 + "peerDependencies": { 3228 3228 + "@types/react": "*", 3229 3229 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3230 3230 + }, 3231 3231 + "peerDependenciesMeta": { 3232 3232 + "@types/react": { 3233 3233 + "optional": true 3234 3234 + } 3235 3235 + } 3236 3236 + }, 3237 3237 + "node_modules/@radix-ui/react-use-effect-event": { 3238 3238 + "version": "0.0.2", 3239 3239 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz", 3240 3240 + "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==", 3241 3241 + "dependencies": { 3242 3242 + "@radix-ui/react-use-layout-effect": "1.1.1" 3243 3243 + }, 3244 3244 + "peerDependencies": { 3245 3245 + "@types/react": "*", 3246 3246 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3247 3247 + }, 3248 3248 + "peerDependenciesMeta": { 3249 3249 + "@types/react": { 3250 3250 + "optional": true 3251 3251 + } 3252 3252 + } 3253 3253 + }, 3254 3254 + "node_modules/@radix-ui/react-use-escape-keydown": { 3255 3255 + "version": "1.1.1", 3256 3256 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz", 3257 3257 + "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==", 3258 3258 + "dependencies": { 3259 3259 + "@radix-ui/react-use-callback-ref": "1.1.1" 3260 3260 + }, 3261 3261 + "peerDependencies": { 3262 3262 + "@types/react": "*", 3263 3263 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3264 3264 + }, 3265 3265 + "peerDependenciesMeta": { 3266 3266 + "@types/react": { 3267 3267 + "optional": true 3268 3268 + } 3269 3269 + } 3270 3270 + }, 3271 3271 + "node_modules/@radix-ui/react-use-is-hydrated": { 3272 3272 + "version": "0.1.0", 3273 3273 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz", 3274 3274 + "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==", 3275 3275 + "dependencies": { 3276 3276 + "use-sync-external-store": "^1.5.0" 3277 3277 + }, 3278 3278 + "peerDependencies": { 3279 3279 + "@types/react": "*", 3280 3280 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3281 3281 + }, 3282 3282 + "peerDependenciesMeta": { 3283 3283 + "@types/react": { 3284 3284 + "optional": true 3285 3285 + } 3286 3286 + } 3287 3287 + }, 3288 3288 + "node_modules/@radix-ui/react-use-layout-effect": { 3289 3289 + "version": "1.1.1", 3290 3290 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz", 3291 3291 + "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==", 3292 3292 + "peerDependencies": { 3293 3293 + "@types/react": "*", 3294 3294 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3295 3295 + }, 3296 3296 + "peerDependenciesMeta": { 3297 3297 + "@types/react": { 3298 3298 + "optional": true 3299 3299 + } 3300 3300 + } 3301 3301 + }, 3302 3302 + "node_modules/@radix-ui/react-use-previous": { 3303 3303 + "version": "1.1.1", 3304 3304 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz", 3305 3305 + "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==", 3306 3306 + "peerDependencies": { 3307 3307 + "@types/react": "*", 3308 3308 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3309 3309 + }, 3310 3310 + "peerDependenciesMeta": { 3311 3311 + "@types/react": { 3312 3312 + "optional": true 3313 3313 + } 3314 3314 + } 3315 3315 + }, 3316 3316 + "node_modules/@radix-ui/react-use-rect": { 3317 3317 + "version": "1.1.1", 3318 3318 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz", 3319 3319 + "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==", 3320 3320 + "dependencies": { 3321 3321 + "@radix-ui/rect": "1.1.1" 3322 3322 + }, 3323 3323 + "peerDependencies": { 3324 3324 + "@types/react": "*", 3325 3325 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3326 3326 + }, 3327 3327 + "peerDependenciesMeta": { 3328 3328 + "@types/react": { 3329 3329 + "optional": true 3330 3330 + } 3331 3331 + } 3332 3332 + }, 3333 3333 + "node_modules/@radix-ui/react-use-size": { 3334 3334 + "version": "1.1.1", 3335 3335 + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz", 3336 3336 + "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==", 3337 3337 + "dependencies": { 3338 3338 + "@radix-ui/react-use-layout-effect": "1.1.1" 3339 3339 + }, 3340 3340 + "peerDependencies": { 3341 3341 + "@types/react": "*", 3342 3342 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3343 3343 + }, 3344 3344 + "peerDependenciesMeta": { 3345 3345 + "@types/react": { 3346 3346 + "optional": true 3347 3347 + } 3348 3348 + } 3349 3349 + }, 3350 3350 + "node_modules/@radix-ui/react-visually-hidden": { 3351 3351 + "version": "1.2.3", 3352 3352 + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz", 3353 3353 + "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==", 3354 3354 + "dependencies": { 3355 3355 + "@radix-ui/react-primitive": "2.1.3" 3356 3356 + }, 3357 3357 + "peerDependencies": { 3358 3358 + "@types/react": "*", 3359 3359 + "@types/react-dom": "*", 3360 3360 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 3361 3361 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 3362 3362 + }, 3363 3363 + "peerDependenciesMeta": { 3364 3364 + "@types/react": { 3365 3365 + "optional": true 3366 3366 + }, 3367 3367 + "@types/react-dom": { 3368 3368 + "optional": true 3369 3369 + } 3370 3370 + } 3371 3371 + }, 3372 3372 + "node_modules/@radix-ui/rect": { 3373 3373 + "version": "1.1.1", 3374 3374 + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz", 3375 3375 + "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==" 3376 3376 + }, 1877 3377 "node_modules/@rolldown/pluginutils": { 1878 3378 "version": "1.0.0-beta.27", 1879 3379 "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", ··· 2357 3857 "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", 2358 3858 "dev": true, 2359 3859 "license": "MIT", 2360 2360 - "peer": true, 2361 3860 "dependencies": { 2362 3861 "@babel/core": "^7.21.3", 2363 3862 "@svgr/babel-preset": "8.1.0", ··· 2832 4331 "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.6.tgz", 2833 4332 "integrity": "sha512-VUAag4ERjh+qlmg0wNivQIVCZUrYndqYu3/wPCVZd4r0E+1IqotbeyGTc+ICroL/PqbpSaGZg02zSWYfcvxbdA==", 2834 4333 "license": "MIT", 2835 2835 - "peer": true, 2836 4334 "dependencies": { 2837 4335 "@tanstack/query-core": "5.85.6" 2838 4336 }, ··· 2866 4364 "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.131.28.tgz", 2867 4365 "integrity": "sha512-vWExhrqHJuT9v+6/2DCQ4pVvPaYoLazMNw8WXiLNuzBXh1FuEoIGaW3jw3DEP0OJCmMiWtTi34NzQnakkQZlQg==", 2868 4366 "license": "MIT", 2869 2869 - "peer": true, 2870 4367 "dependencies": { 2871 4368 "@tanstack/history": "1.131.2", 2872 4369 "@tanstack/react-store": "^0.7.0", ··· 2931 4428 "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.131.28.tgz", 2932 4429 "integrity": "sha512-f+vdfr3WKSS/BcqgI5s4vZg9xYb7NkvIolkaMELrbz3l+khkw1aTjx8wqCHRY4dqwIAxq+iZBZtMWXA7pztGJg==", 2933 4430 "license": "MIT", 2934 2934 - "peer": true, 2935 4431 "dependencies": { 2936 4432 "@tanstack/history": "1.131.2", 2937 4433 "@tanstack/store": "^0.7.0", ··· 3104 4600 "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", 3105 4601 "dev": true, 3106 4602 "license": "MIT", 3107 3107 - "peer": true, 3108 4603 "dependencies": { 3109 4604 "@babel/code-frame": "^7.10.4", 3110 4605 "@babel/runtime": "^7.12.5", ··· 3227 4722 "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", 3228 4723 "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", 3229 4724 "dev": true, 3230 3230 - "license": "MIT" 4725 4725 + "license": "MIT", 4726 4726 + "peer": true 3231 4727 }, 3232 4728 "node_modules/@types/node": { 3233 4729 "version": "24.3.0", ··· 3235 4731 "integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==", 3236 4732 "devOptional": true, 3237 4733 "license": "MIT", 3238 3238 - "peer": true, 3239 4734 "dependencies": { 3240 4735 "undici-types": "~7.10.0" 3241 4736 } ··· 3245 4740 "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", 3246 4741 "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", 3247 4742 "license": "MIT", 3248 3248 - "peer": true, 3249 4743 "dependencies": { 3250 4744 "csstype": "^3.0.2" 3251 4745 } ··· 3255 4749 "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", 3256 4750 "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", 3257 4751 "license": "MIT", 3258 3258 - "peer": true, 3259 4752 "peerDependencies": { 3260 4753 "@types/react": "^19.0.0" 3261 4754 } 3262 4755 }, 4756 4756 + "node_modules/@types/trusted-types": { 4757 4757 + "version": "2.0.7", 4758 4758 + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", 4759 4759 + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", 4760 4760 + "license": "MIT", 4761 4761 + "optional": true 4762 4762 + }, 3263 4763 "node_modules/@typescript-eslint/eslint-plugin": { 3264 4764 "version": "8.46.1", 3265 4765 "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.1.tgz", 3266 4766 "integrity": "sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==", 3267 4767 "dev": true, 3268 4768 "license": "MIT", 3269 3269 - "peer": true, 3270 4769 "dependencies": { 3271 4770 "@eslint-community/regexpp": "^4.10.0", 3272 4771 "@typescript-eslint/scope-manager": "8.46.1", ··· 3307 4806 "integrity": "sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==", 3308 4807 "dev": true, 3309 4808 "license": "MIT", 3310 3310 - "peer": true, 3311 4809 "dependencies": { 3312 4810 "@typescript-eslint/scope-manager": "8.46.1", 3313 4811 "@typescript-eslint/types": "8.46.1", ··· 3690 5188 "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", 3691 5189 "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", 3692 5190 "license": "MIT", 3693 3693 - "peer": true, 3694 5191 "bin": { 3695 5192 "acorn": "bin/acorn" 3696 5193 }, ··· 3704 5201 "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", 3705 5202 "dev": true, 3706 5203 "license": "MIT", 5204 5204 + "peer": true, 3707 5205 "peerDependencies": { 3708 5206 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" 3709 5207 } ··· 3724 5222 "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", 3725 5223 "dev": true, 3726 5224 "license": "MIT", 5225 5225 + "peer": true, 3727 5226 "dependencies": { 3728 5227 "fast-deep-equal": "^3.1.1", 3729 5228 "fast-json-stable-stringify": "^2.0.0", ··· 3787 5286 "dev": true, 3788 5287 "license": "Python-2.0" 3789 5288 }, 5289 5289 + "node_modules/aria-hidden": { 5290 5290 + "version": "1.2.6", 5291 5291 + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz", 5292 5292 + "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==", 5293 5293 + "dependencies": { 5294 5294 + "tslib": "^2.0.0" 5295 5295 + }, 5296 5296 + "engines": { 5297 5297 + "node": ">=10" 5298 5298 + } 5299 5299 + }, 3790 5300 "node_modules/aria-query": { 3791 5301 "version": "5.3.0", 3792 5302 "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", ··· 4118 5628 } 4119 5629 ], 4120 5630 "license": "MIT", 4121 4121 - "peer": true, 4122 5631 "dependencies": { 4123 5632 "caniuse-lite": "^1.0.30001737", 4124 5633 "electron-to-chromium": "^1.5.211", ··· 4276 5785 "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", 4277 5786 "dev": true, 4278 5787 "license": "MIT", 5788 5788 + "peer": true, 4279 5789 "dependencies": { 4280 5790 "ansi-styles": "^4.1.0", 4281 5791 "supports-color": "^7.1.0" ··· 4293 5803 "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", 4294 5804 "dev": true, 4295 5805 "license": "MIT", 5806 5806 + "peer": true, 4296 5807 "dependencies": { 4297 5808 "color-convert": "^2.0.1" 4298 5809 }, ··· 4373 5884 "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", 4374 5885 "dev": true, 4375 5886 "license": "MIT", 5887 5887 + "peer": true, 4376 5888 "dependencies": { 4377 5889 "color-name": "~1.1.4" 4378 5890 }, ··· 4385 5897 "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", 4386 5898 "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", 4387 5899 "dev": true, 4388 4388 - "license": "MIT" 5900 5900 + "license": "MIT", 5901 5901 + "peer": true 4389 5902 }, 4390 5903 "node_modules/compare-versions": { 4391 5904 "version": "6.1.1", ··· 4464 5977 "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", 4465 5978 "dev": true, 4466 5979 "license": "MIT", 5980 5980 + "peer": true, 4467 5981 "dependencies": { 4468 5982 "path-key": "^3.1.0", 4469 5983 "shebang-command": "^2.0.0", ··· 4491 6005 "version": "3.1.3", 4492 6006 "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", 4493 6007 "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", 4494 4494 - "license": "MIT", 4495 4495 - "peer": true 6008 6008 + "license": "MIT" 4496 6009 }, 4497 6010 "node_modules/custom-media-element": { 4498 6011 "version": "1.4.5", ··· 4635 6148 "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", 4636 6149 "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", 4637 6150 "dev": true, 4638 4638 - "license": "MIT" 6151 6151 + "license": "MIT", 6152 6152 + "peer": true 4639 6153 }, 4640 6154 "node_modules/define-data-property": { 4641 6155 "version": "1.1.4", ··· 4692 6206 "node": ">=8" 4693 6207 } 4694 6208 }, 6209 6209 + "node_modules/detect-node-es": { 6210 6210 + "version": "1.1.0", 6211 6211 + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", 6212 6212 + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" 6213 6213 + }, 4695 6214 "node_modules/diff": { 4696 6215 "version": "8.0.2", 4697 6216 "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz", ··· 4721 6240 "dev": true, 4722 6241 "license": "MIT" 4723 6242 }, 6243 6243 + "node_modules/dompurify": { 6244 6244 + "version": "3.3.0", 6245 6245 + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz", 6246 6246 + "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==", 6247 6247 + "license": "(MPL-2.0 OR Apache-2.0)", 6248 6248 + "optionalDependencies": { 6249 6249 + "@types/trusted-types": "^2.0.7" 6250 6250 + } 6251 6251 + }, 4724 6252 "node_modules/dot-case": { 4725 6253 "version": "3.0.4", 4726 6254 "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", ··· 5029 6557 "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", 5030 6558 "dev": true, 5031 6559 "license": "MIT", 6560 6560 + "peer": true, 5032 6561 "engines": { 5033 6562 "node": ">=10" 5034 6563 }, ··· 5320 6849 "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==", 5321 6850 "dev": true, 5322 6851 "license": "BSD-2-Clause", 6852 6852 + "peer": true, 5323 6853 "dependencies": { 5324 6854 "esrecurse": "^4.3.0", 5325 6855 "estraverse": "^5.2.0" ··· 5350 6880 "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", 5351 6881 "dev": true, 5352 6882 "license": "ISC", 6883 6883 + "peer": true, 5353 6884 "dependencies": { 5354 6885 "is-glob": "^4.0.3" 5355 6886 }, ··· 5363 6894 "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==", 5364 6895 "dev": true, 5365 6896 "license": "BSD-2-Clause", 6897 6897 + "peer": true, 5366 6898 "dependencies": { 5367 6899 "acorn": "^8.15.0", 5368 6900 "acorn-jsx": "^5.3.2", ··· 5394 6926 "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", 5395 6927 "dev": true, 5396 6928 "license": "BSD-3-Clause", 6929 6929 + "peer": true, 5397 6930 "dependencies": { 5398 6931 "estraverse": "^5.1.0" 5399 6932 }, ··· 5407 6940 "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", 5408 6941 "dev": true, 5409 6942 "license": "BSD-2-Clause", 6943 6943 + "peer": true, 5410 6944 "dependencies": { 5411 6945 "estraverse": "^5.2.0" 5412 6946 }, ··· 5495 7029 "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", 5496 7030 "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", 5497 7031 "dev": true, 5498 5498 - "license": "MIT" 7032 7032 + "license": "MIT", 7033 7033 + "peer": true 5499 7034 }, 5500 7035 "node_modules/fast-levenshtein": { 5501 7036 "version": "2.0.6", 5502 7037 "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", 5503 7038 "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", 5504 7039 "dev": true, 5505 5505 - "license": "MIT" 7040 7040 + "license": "MIT", 7041 7041 + "peer": true 5506 7042 }, 5507 7043 "node_modules/fastq": { 5508 7044 "version": "1.19.1", ··· 5520 7056 "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", 5521 7057 "dev": true, 5522 7058 "license": "MIT", 7059 7059 + "peer": true, 5523 7060 "dependencies": { 5524 7061 "flat-cache": "^4.0.0" 5525 7062 }, ··· 5545 7082 "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", 5546 7083 "dev": true, 5547 7084 "license": "MIT", 7085 7085 + "peer": true, 5548 7086 "dependencies": { 5549 7087 "locate-path": "^6.0.0", 5550 7088 "path-exists": "^4.0.0" ··· 5562 7100 "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", 5563 7101 "dev": true, 5564 7102 "license": "MIT", 7103 7103 + "peer": true, 5565 7104 "dependencies": { 5566 7105 "flatted": "^3.2.9", 5567 7106 "keyv": "^4.5.4" ··· 5575 7114 "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", 5576 7115 "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", 5577 7116 "dev": true, 5578 5578 - "license": "ISC" 7117 7117 + "license": "ISC", 7118 7118 + "peer": true 5579 7119 }, 5580 7120 "node_modules/for-each": { 5581 7121 "version": "0.3.5", ··· 5690 7230 }, 5691 7231 "funding": { 5692 7232 "url": "https://github.com/sponsors/ljharb" 7233 7233 + } 7234 7234 + }, 7235 7235 + "node_modules/get-nonce": { 7236 7236 + "version": "1.0.1", 7237 7237 + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", 7238 7238 + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", 7239 7239 + "engines": { 7240 7240 + "node": ">=6" 5693 7241 } 5694 7242 }, 5695 7243 "node_modules/get-proto": { ··· 5754 7302 "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", 5755 7303 "dev": true, 5756 7304 "license": "MIT", 7305 7305 + "peer": true, 5757 7306 "engines": { 5758 7307 "node": ">=18" 5759 7308 }, ··· 5831 7380 "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", 5832 7381 "dev": true, 5833 7382 "license": "MIT", 7383 7383 + "peer": true, 5834 7384 "engines": { 5835 7385 "node": ">=8" 5836 7386 } ··· 6043 7593 "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", 6044 7594 "dev": true, 6045 7595 "license": "MIT", 7596 7596 + "peer": true, 6046 7597 "engines": { 6047 7598 "node": ">= 4" 6048 7599 } ··· 6085 7636 "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", 6086 7637 "dev": true, 6087 7638 "license": "MIT", 7639 7639 + "peer": true, 6088 7640 "engines": { 6089 7641 "node": ">=0.8.19" 6090 7642 } ··· 6590 8142 "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", 6591 8143 "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", 6592 8144 "dev": true, 6593 6593 - "license": "ISC" 8145 8145 + "license": "ISC", 8146 8146 + "peer": true 6594 8147 }, 6595 8148 "node_modules/iso-datestring-validator": { 6596 8149 "version": "2.2.2", ··· 6688 8241 "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==", 6689 8242 "dev": true, 6690 8243 "license": "MIT", 6691 6691 - "peer": true, 6692 8244 "dependencies": { 6693 8245 "cssstyle": "^4.2.1", 6694 8246 "data-urls": "^5.0.0", ··· 6740 8292 "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", 6741 8293 "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", 6742 8294 "dev": true, 6743 6743 - "license": "MIT" 8295 8295 + "license": "MIT", 8296 8296 + "peer": true 6744 8297 }, 6745 8298 "node_modules/json-parse-even-better-errors": { 6746 8299 "version": "2.3.1", ··· 6754 8307 "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", 6755 8308 "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", 6756 8309 "dev": true, 6757 6757 - "license": "MIT" 8310 8310 + "license": "MIT", 8311 8311 + "peer": true 6758 8312 }, 6759 8313 "node_modules/json-stable-stringify-without-jsonify": { 6760 8314 "version": "1.0.1", 6761 8315 "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", 6762 8316 "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", 6763 8317 "dev": true, 6764 6764 - "license": "MIT" 8318 8318 + "license": "MIT", 8319 8319 + "peer": true 6765 8320 }, 6766 8321 "node_modules/json5": { 6767 8322 "version": "2.2.3", ··· 6797 8352 "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", 6798 8353 "dev": true, 6799 8354 "license": "MIT", 8355 8355 + "peer": true, 6800 8356 "dependencies": { 6801 8357 "json-buffer": "3.0.1" 6802 8358 } ··· 6814 8370 "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", 6815 8371 "dev": true, 6816 8372 "license": "MIT", 8373 8373 + "peer": true, 6817 8374 "dependencies": { 6818 8375 "prelude-ls": "^1.2.1", 6819 8376 "type-check": "~0.4.0" ··· 7099 8656 "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", 7100 8657 "dev": true, 7101 8658 "license": "MIT", 8659 8659 + "peer": true, 7102 8660 "dependencies": { 7103 8661 "p-locate": "^5.0.0" 7104 8662 }, ··· 7120 8678 "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", 7121 8679 "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", 7122 8680 "dev": true, 7123 7123 - "license": "MIT" 8681 8681 + "license": "MIT", 8682 8682 + "peer": true 7124 8683 }, 7125 8684 "node_modules/loose-envify": { 7126 8685 "version": "1.4.0", ··· 9580 11139 "version": "4.0.3", 9581 11140 "inBundle": true, 9582 11141 "license": "MIT", 9583 9583 - "peer": true, 9584 11142 "engines": { 9585 11143 "node": ">=12" 9586 11144 }, ··· 9914 11472 "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", 9915 11473 "dev": true, 9916 11474 "license": "MIT", 11475 11475 + "peer": true, 9917 11476 "dependencies": { 9918 11477 "deep-is": "^0.1.3", 9919 11478 "fast-levenshtein": "^2.0.6", ··· 9950 11509 "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", 9951 11510 "dev": true, 9952 11511 "license": "MIT", 11512 11512 + "peer": true, 9953 11513 "dependencies": { 9954 11514 "yocto-queue": "^0.1.0" 9955 11515 }, ··· 9966 11526 "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", 9967 11527 "dev": true, 9968 11528 "license": "MIT", 11529 11529 + "peer": true, 9969 11530 "dependencies": { 9970 11531 "p-limit": "^3.0.2" 9971 11532 }, ··· 10040 11601 "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", 10041 11602 "dev": true, 10042 11603 "license": "MIT", 11604 11604 + "peer": true, 10043 11605 "engines": { 10044 11606 "node": ">=8" 10045 11607 } ··· 10050 11612 "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", 10051 11613 "dev": true, 10052 11614 "license": "MIT", 11615 11615 + "peer": true, 10053 11616 "engines": { 10054 11617 "node": ">=8" 10055 11618 } ··· 10178 11741 "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", 10179 11742 "dev": true, 10180 11743 "license": "MIT", 11744 11744 + "peer": true, 10181 11745 "engines": { 10182 11746 "node": ">= 0.8.0" 10183 11747 } ··· 10277 11841 ], 10278 11842 "license": "MIT" 10279 11843 }, 11844 11844 + "node_modules/radix-ui": { 11845 11845 + "version": "1.4.3", 11846 11846 + "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz", 11847 11847 + "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==", 11848 11848 + "dependencies": { 11849 11849 + "@radix-ui/primitive": "1.1.3", 11850 11850 + "@radix-ui/react-accessible-icon": "1.1.7", 11851 11851 + "@radix-ui/react-accordion": "1.2.12", 11852 11852 + "@radix-ui/react-alert-dialog": "1.1.15", 11853 11853 + "@radix-ui/react-arrow": "1.1.7", 11854 11854 + "@radix-ui/react-aspect-ratio": "1.1.7", 11855 11855 + "@radix-ui/react-avatar": "1.1.10", 11856 11856 + "@radix-ui/react-checkbox": "1.3.3", 11857 11857 + "@radix-ui/react-collapsible": "1.1.12", 11858 11858 + "@radix-ui/react-collection": "1.1.7", 11859 11859 + "@radix-ui/react-compose-refs": "1.1.2", 11860 11860 + "@radix-ui/react-context": "1.1.2", 11861 11861 + "@radix-ui/react-context-menu": "2.2.16", 11862 11862 + "@radix-ui/react-dialog": "1.1.15", 11863 11863 + "@radix-ui/react-direction": "1.1.1", 11864 11864 + "@radix-ui/react-dismissable-layer": "1.1.11", 11865 11865 + "@radix-ui/react-dropdown-menu": "2.1.16", 11866 11866 + "@radix-ui/react-focus-guards": "1.1.3", 11867 11867 + "@radix-ui/react-focus-scope": "1.1.7", 11868 11868 + "@radix-ui/react-form": "0.1.8", 11869 11869 + "@radix-ui/react-hover-card": "1.1.15", 11870 11870 + "@radix-ui/react-label": "2.1.7", 11871 11871 + "@radix-ui/react-menu": "2.1.16", 11872 11872 + "@radix-ui/react-menubar": "1.1.16", 11873 11873 + "@radix-ui/react-navigation-menu": "1.2.14", 11874 11874 + "@radix-ui/react-one-time-password-field": "0.1.8", 11875 11875 + "@radix-ui/react-password-toggle-field": "0.1.3", 11876 11876 + "@radix-ui/react-popover": "1.1.15", 11877 11877 + "@radix-ui/react-popper": "1.2.8", 11878 11878 + "@radix-ui/react-portal": "1.1.9", 11879 11879 + "@radix-ui/react-presence": "1.1.5", 11880 11880 + "@radix-ui/react-primitive": "2.1.3", 11881 11881 + "@radix-ui/react-progress": "1.1.7", 11882 11882 + "@radix-ui/react-radio-group": "1.3.8", 11883 11883 + "@radix-ui/react-roving-focus": "1.1.11", 11884 11884 + "@radix-ui/react-scroll-area": "1.2.10", 11885 11885 + "@radix-ui/react-select": "2.2.6", 11886 11886 + "@radix-ui/react-separator": "1.1.7", 11887 11887 + "@radix-ui/react-slider": "1.3.6", 11888 11888 + "@radix-ui/react-slot": "1.2.3", 11889 11889 + "@radix-ui/react-switch": "1.2.6", 11890 11890 + "@radix-ui/react-tabs": "1.1.13", 11891 11891 + "@radix-ui/react-toast": "1.2.15", 11892 11892 + "@radix-ui/react-toggle": "1.1.10", 11893 11893 + "@radix-ui/react-toggle-group": "1.1.11", 11894 11894 + "@radix-ui/react-toolbar": "1.1.11", 11895 11895 + "@radix-ui/react-tooltip": "1.2.8", 11896 11896 + "@radix-ui/react-use-callback-ref": "1.1.1", 11897 11897 + "@radix-ui/react-use-controllable-state": "1.2.2", 11898 11898 + "@radix-ui/react-use-effect-event": "0.0.2", 11899 11899 + "@radix-ui/react-use-escape-keydown": "1.1.1", 11900 11900 + "@radix-ui/react-use-is-hydrated": "0.1.0", 11901 11901 + "@radix-ui/react-use-layout-effect": "1.1.1", 11902 11902 + "@radix-ui/react-use-size": "1.1.1", 11903 11903 + "@radix-ui/react-visually-hidden": "1.2.3" 11904 11904 + }, 11905 11905 + "peerDependencies": { 11906 11906 + "@types/react": "*", 11907 11907 + "@types/react-dom": "*", 11908 11908 + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", 11909 11909 + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" 11910 11910 + }, 11911 11911 + "peerDependenciesMeta": { 11912 11912 + "@types/react": { 11913 11913 + "optional": true 11914 11914 + }, 11915 11915 + "@types/react-dom": { 11916 11916 + "optional": true 11917 11917 + } 11918 11918 + } 11919 11919 + }, 10280 11920 "node_modules/react": { 10281 11921 "version": "19.1.1", 10282 11922 "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", 10283 11923 "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", 10284 11924 "license": "MIT", 10285 10285 - "peer": true, 10286 11925 "engines": { 10287 11926 "node": ">=0.10.0" 10288 11927 } ··· 10292 11931 "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", 10293 11932 "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", 10294 11933 "license": "MIT", 10295 10295 - "peer": true, 10296 11934 "dependencies": { 10297 11935 "scheduler": "^0.26.0" 10298 11936 }, ··· 10340 11978 "node": ">=0.10.0" 10341 11979 } 10342 11980 }, 11981 11981 + "node_modules/react-remove-scroll": { 11982 11982 + "version": "2.7.1", 11983 11983 + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", 11984 11984 + "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==", 11985 11985 + "dependencies": { 11986 11986 + "react-remove-scroll-bar": "^2.3.7", 11987 11987 + "react-style-singleton": "^2.2.3", 11988 11988 + "tslib": "^2.1.0", 11989 11989 + "use-callback-ref": "^1.3.3", 11990 11990 + "use-sidecar": "^1.1.3" 11991 11991 + }, 11992 11992 + "engines": { 11993 11993 + "node": ">=10" 11994 11994 + }, 11995 11995 + "peerDependencies": { 11996 11996 + "@types/react": "*", 11997 11997 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 11998 11998 + }, 11999 11999 + "peerDependenciesMeta": { 12000 12000 + "@types/react": { 12001 12001 + "optional": true 12002 12002 + } 12003 12003 + } 12004 12004 + }, 12005 12005 + "node_modules/react-remove-scroll-bar": { 12006 12006 + "version": "2.3.8", 12007 12007 + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz", 12008 12008 + "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==", 12009 12009 + "dependencies": { 12010 12010 + "react-style-singleton": "^2.2.2", 12011 12011 + "tslib": "^2.0.0" 12012 12012 + }, 12013 12013 + "engines": { 12014 12014 + "node": ">=10" 12015 12015 + }, 12016 12016 + "peerDependencies": { 12017 12017 + "@types/react": "*", 12018 12018 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" 12019 12019 + }, 12020 12020 + "peerDependenciesMeta": { 12021 12021 + "@types/react": { 12022 12022 + "optional": true 12023 12023 + } 12024 12024 + } 12025 12025 + }, 12026 12026 + "node_modules/react-style-singleton": { 12027 12027 + "version": "2.2.3", 12028 12028 + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", 12029 12029 + "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==", 12030 12030 + "dependencies": { 12031 12031 + "get-nonce": "^1.0.0", 12032 12032 + "tslib": "^2.0.0" 12033 12033 + }, 12034 12034 + "engines": { 12035 12035 + "node": ">=10" 12036 12036 + }, 12037 12037 + "peerDependencies": { 12038 12038 + "@types/react": "*", 12039 12039 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 12040 12040 + }, 12041 12041 + "peerDependenciesMeta": { 12042 12042 + "@types/react": { 12043 12043 + "optional": true 12044 12044 + } 12045 12045 + } 12046 12046 + }, 10343 12047 "node_modules/readdirp": { 10344 12048 "version": "3.6.0", 10345 12049 "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", ··· 10647 12351 "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.3.2.tgz", 10648 12352 "integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==", 10649 12353 "license": "MIT", 10650 10650 - "peer": true, 10651 12354 "engines": { 10652 12355 "node": ">=10" 10653 12356 } ··· 10719 12422 "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", 10720 12423 "dev": true, 10721 12424 "license": "MIT", 12425 12425 + "peer": true, 10722 12426 "dependencies": { 10723 12427 "shebang-regex": "^3.0.0" 10724 12428 }, ··· 10732 12436 "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", 10733 12437 "dev": true, 10734 12438 "license": "MIT", 12439 12439 + "peer": true, 10735 12440 "engines": { 10736 12441 "node": ">=8" 10737 12442 } ··· 10835 12540 "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.9.tgz", 10836 12541 "integrity": "sha512-A0ZBPJQldAeGCTW0YRYJmt7RCeh5rbFfPZ2aOttgYnctHE7HgKeHCBB/PVc2P7eOfmNXqMFFFoYYdm3S4dcbkA==", 10837 12542 "license": "MIT", 10838 10838 - "peer": true, 10839 12543 "dependencies": { 10840 12544 "csstype": "^3.1.0", 10841 12545 "seroval": "~1.3.0", 10842 12546 "seroval-plugins": "~1.3.0" 10843 12547 } 10844 12548 }, 12549 12549 + "node_modules/sonner": { 12550 12550 + "version": "2.0.7", 12551 12551 + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", 12552 12552 + "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==", 12553 12553 + "peerDependencies": { 12554 12554 + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", 12555 12555 + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" 12556 12556 + } 12557 12557 + }, 10845 12558 "node_modules/source-map": { 10846 12559 "version": "0.7.6", 10847 12560 "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz", ··· 11005 12718 "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", 11006 12719 "dev": true, 11007 12720 "license": "MIT", 12721 12721 + "peer": true, 11008 12722 "engines": { 11009 12723 "node": ">=8" 11010 12724 }, ··· 11044 12758 "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", 11045 12759 "dev": true, 11046 12760 "license": "MIT", 12761 12761 + "peer": true, 11047 12762 "dependencies": { 11048 12763 "has-flag": "^4.0.0" 11049 12764 }, ··· 11143 12858 "version": "1.3.3", 11144 12859 "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", 11145 12860 "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", 11146 11146 - "license": "MIT", 11147 11147 - "peer": true 12861 12861 + "license": "MIT" 11148 12862 }, 11149 12863 "node_modules/tiny-warning": { 11150 12864 "version": "1.0.3", ··· 11204 12918 "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", 11205 12919 "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", 11206 12920 "license": "MIT", 11207 11207 - "peer": true, 11208 12921 "engines": { 11209 12922 "node": ">=12" 11210 12923 }, ··· 11402 13115 "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", 11403 13116 "dev": true, 11404 13117 "license": "MIT", 13118 13118 + "peer": true, 11405 13119 "dependencies": { 11406 13120 "prelude-ls": "^1.2.1" 11407 13121 }, ··· 11493 13207 "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", 11494 13208 "dev": true, 11495 13209 "license": "Apache-2.0", 11496 11496 - "peer": true, 11497 13210 "bin": { 11498 13211 "tsc": "bin/tsc", 11499 13212 "tsserver": "bin/tsserver" ··· 11830 13543 "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", 11831 13544 "dev": true, 11832 13545 "license": "BSD-2-Clause", 13546 13546 + "peer": true, 11833 13547 "dependencies": { 11834 13548 "punycode": "^2.1.0" 11835 13549 } 11836 13550 }, 13551 13551 + "node_modules/use-callback-ref": { 13552 13552 + "version": "1.3.3", 13553 13553 + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz", 13554 13554 + "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==", 13555 13555 + "dependencies": { 13556 13556 + "tslib": "^2.0.0" 13557 13557 + }, 13558 13558 + "engines": { 13559 13559 + "node": ">=10" 13560 13560 + }, 13561 13561 + "peerDependencies": { 13562 13562 + "@types/react": "*", 13563 13563 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 13564 13564 + }, 13565 13565 + "peerDependenciesMeta": { 13566 13566 + "@types/react": { 13567 13567 + "optional": true 13568 13568 + } 13569 13569 + } 13570 13570 + }, 13571 13571 + "node_modules/use-sidecar": { 13572 13572 + "version": "1.1.3", 13573 13573 + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz", 13574 13574 + "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==", 13575 13575 + "dependencies": { 13576 13576 + "detect-node-es": "^1.1.0", 13577 13577 + "tslib": "^2.0.0" 13578 13578 + }, 13579 13579 + "engines": { 13580 13580 + "node": ">=10" 13581 13581 + }, 13582 13582 + "peerDependencies": { 13583 13583 + "@types/react": "*", 13584 13584 + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" 13585 13585 + }, 13586 13586 + "peerDependenciesMeta": { 13587 13587 + "@types/react": { 13588 13588 + "optional": true 13589 13589 + } 13590 13590 + } 13591 13591 + }, 11837 13592 "node_modules/use-sync-external-store": { 11838 13593 "version": "1.5.0", 11839 13594 "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz", ··· 11857 13612 "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", 11858 13613 "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", 11859 13614 "license": "MIT", 11860 11860 - "peer": true, 11861 13615 "dependencies": { 11862 13616 "esbuild": "^0.25.0", 11863 13617 "fdir": "^6.4.4", ··· 11972 13726 "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", 11973 13727 "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", 11974 13728 "license": "MIT", 11975 11975 - "peer": true, 11976 13729 "engines": { 11977 13730 "node": ">=12" 11978 13731 }, ··· 12154 13907 "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", 12155 13908 "dev": true, 12156 13909 "license": "ISC", 13910 13910 + "peer": true, 12157 13911 "dependencies": { 12158 13912 "isexe": "^2.0.0" 12159 13913 }, ··· 12285 14039 "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", 12286 14040 "dev": true, 12287 14041 "license": "MIT", 14042 14042 + "peer": true, 12288 14043 "engines": { 12289 14044 "node": ">=0.10.0" 12290 14045 } ··· 12339 14094 "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", 12340 14095 "dev": true, 12341 14096 "license": "MIT", 14097 14097 + "peer": true, 12342 14098 "engines": { 12343 14099 "node": ">=10" 12344 14100 }, ··· 12357 14113 "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", 12358 14114 "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", 12359 14115 "license": "MIT", 12360 12360 - "peer": true, 12361 14116 "funding": { 12362 14117 "url": "https://github.com/sponsors/colinhacks" 12363 14118 }

+8

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", 36 36 + "sonner": "^2.0.7", 30 37 "tailwindcss": "^4.0.6", 31 38 "tanstack-router-keepalive": "^1.0.0" 32 39 }, ··· 35 42 "@iconify-icon/react": "^3.0.1", 36 43 "@iconify-json/material-symbols": "^1.2.42", 37 44 "@iconify-json/mdi": "^1.2.3", 45 45 + "@iconify/json": "^2.2.396", 38 46 "@svgr/core": "^8.1.0", 39 47 "@svgr/plugin-jsx": "^8.1.0", 40 48 "@testing-library/dom": "^10.4.0",

+7

src/auto-imports.d.ts

··· 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 11 12 const IconMaterialSymbolsHome: typeof import('~icons/material-symbols/home.jsx').default 12 13 const IconMaterialSymbolsHomeOutline: typeof import('~icons/material-symbols/home-outline.jsx').default 13 14 const IconMaterialSymbolsNotifications: typeof import('~icons/material-symbols/notifications.jsx').default ··· 17 18 const IconMaterialSymbolsSettingsOutline: typeof import('~icons/material-symbols/settings-outline.jsx').default 18 19 const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default 19 20 const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default 21 21 + const IconMdiAccountPlus: typeof import('~icons/mdi/account-plus.jsx').default 22 22 + const IconMdiCheck: typeof import('~icons/mdi/check.jsx').default 23 23 + const IconMdiClose: typeof import('~icons/mdi/close.jsx').default 24 24 + const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default 20 25 const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default 26 26 + const IconMdiShield: typeof import('~icons/mdi/shield.jsx').default 27 27 + const IconMdiShieldOutline: typeof import('~icons/mdi/shield-outline.jsx').default 21 28 }

+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 disablegutter inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 144 144 + 145 145 + <Dialog.Content className="fixed gutter overflow-y-scroll inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]"> 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 + }

+35

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 + bottomBorderDisabled, 10 10 + }: { 11 11 + backButtonCallback?: () => void; 12 12 + title?: string; 13 13 + bottomBorderDisabled?: boolean; 14 14 + }) { 15 15 + const router = useRouter(); 16 16 + const [isAtTop] = useAtom(isAtTopAtom); 17 17 + //const what = router.history. 18 18 + return ( 19 19 + <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 ${!bottomBorderDisabled && "sm:border-b"} ${!isAtTop && !bottomBorderDisabled && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}> 20 20 + {backButtonCallback ? (<Link 21 21 + to=".." 22 22 + //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 23 23 + className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" 24 24 + onClick={(e) => { 25 25 + e.preventDefault(); 26 26 + backButtonCallback(); 27 27 + }} 28 28 + aria-label="Go back" 29 29 + > 30 30 + <IconMaterialSymbolsArrowBack className="w-6 h-6" /> 31 31 + </Link>) : (<div className="w-[0px]" />)} 32 32 + <span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span> 33 33 + </div> 34 34 + ); 35 35 + }

+184

src/components/Import.tsx

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

+42 -10

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 { 12 14 feedUri: string; 13 15 pdsUrl?: string; 14 16 feedServiceDid?: string; 17 17 + authedOverride?: boolean; 18 18 + unauthedfeedurl?: string; 15 19 } 16 20 17 21 export function InfiniteCustomFeed({ 18 22 feedUri, 19 23 pdsUrl, 20 24 feedServiceDid, 25 25 + authedOverride, 26 26 + unauthedfeedurl, 21 27 }: InfiniteCustomFeedProps) { 22 28 const { agent } = useAuth(); 23 23 - const authed = !!agent?.did; 29 29 + const authed = authedOverride || !!agent?.did; 24 30 25 31 // const identityresultmaybe = useQueryIdentity(agent?.did); 26 32 // const identity = identityresultmaybe?.data; ··· 36 42 isFetchingNextPage, 37 43 refetch, 38 44 isRefetching, 45 45 + queryKey, 39 46 } = useInfiniteQueryFeedSkeleton({ 40 47 feedUri: feedUri, 41 48 agent: agent ?? undefined, 42 49 isAuthed: authed ?? false, 43 50 pdsUrl: pdsUrl, 44 51 feedServiceDid: feedServiceDid, 52 52 + unauthedfeedurl: unauthedfeedurl, 45 53 }); 54 54 + const queryClient = useQueryClient(); 55 55 + 46 56 47 57 const handleRefresh = () => { 58 58 + queryClient.removeQueries({queryKey: queryKey}); 59 59 + //queryClient.invalidateQueries(["infinite-feed", feedUri] as const); 48 60 refetch(); 49 61 }; 50 62 63 63 + const allPosts = React.useMemo(() => { 64 64 + const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? []; 65 65 + 66 66 + const seenUris = new Set<string>(); 67 67 + 68 68 + return flattenedPosts.filter((item) => { 69 69 + if (!item?.post) return false; 70 70 + 71 71 + if (seenUris.has(item.post)) { 72 72 + return false; 73 73 + } 74 74 + 75 75 + seenUris.add(item.post); 76 76 + 77 77 + return true; 78 78 + }); 79 79 + }, [data]); 80 80 + 51 81 //const { ref, inView } = useInView(); 52 82 53 83 // React.useEffect(() => { ··· 66 96 ); 67 97 } 68 98 69 69 - const allPosts = 70 70 - data?.pages.flatMap((page) => { 71 71 - if (page) return page.feed; 72 72 - }) ?? []; 99 99 + // const allPosts = 100 100 + // data?.pages.flatMap((page) => { 101 101 + // if (page) return page.feed; 102 102 + // }) ?? []; 73 103 74 104 if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) { 75 105 return ( ··· 112 142 <button 113 143 onClick={handleRefresh} 114 144 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" 145 145 + 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 146 aria-label="Refresh feed" 117 147 > 118 118 - {isRefetching ? <RefreshIcon className="h-6 w-6 animate-spin" /> : <RefreshIcon className="h-6 w-6" />} 148 148 + <RefreshIcon 149 149 + className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} 150 150 + /> 119 151 </button> 120 152 </> 121 153 ); ··· 138 170 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 171 ></path> 140 172 </svg> 141 141 - ); 173 173 + );

+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 + };

+124

src/components/ReusableTabRoute.tsx

··· 1 1 + import * as TabsPrimitive from "@radix-ui/react-tabs"; 2 2 + import { useAtom } from "jotai"; 3 3 + import { useEffect, useLayoutEffect } from "react"; 4 4 + 5 5 + import { isAtTopAtom, reusableTabRouteScrollAtom } from "~/utils/atoms"; 6 6 + 7 7 + /** 8 8 + * Please wrap your Route in a div, do not return a top-level fragment, 9 9 + * it will break navigation scroll restoration 10 10 + */ 11 11 + export function ReusableTabRoute({ 12 12 + route, 13 13 + tabs, 14 14 + }: { 15 15 + route: string; 16 16 + tabs: Record<string, React.ReactNode>; 17 17 + }) { 18 18 + const [reusableTabState, setReusableTabState] = useAtom( 19 19 + reusableTabRouteScrollAtom 20 20 + ); 21 21 + const [isAtTop] = useAtom(isAtTopAtom); 22 22 + 23 23 + const routeState = reusableTabState?.[route] ?? { 24 24 + activeTab: Object.keys(tabs)[0], 25 25 + scrollPositions: {}, 26 26 + }; 27 27 + const activeTab = routeState.activeTab; 28 28 + 29 29 + const handleValueChange = (newTab: string) => { 30 30 + setReusableTabState((prev) => { 31 31 + const current = prev?.[route] ?? routeState; 32 32 + return { 33 33 + ...prev, 34 34 + [route]: { 35 35 + ...current, 36 36 + scrollPositions: { 37 37 + ...current.scrollPositions, 38 38 + [current.activeTab]: window.scrollY, 39 39 + }, 40 40 + activeTab: newTab, 41 41 + }, 42 42 + }; 43 43 + }); 44 44 + }; 45 45 + 46 46 + // // todo, warning experimental, usually this doesnt work, 47 47 + // // like at all, and i usually do this for each tab 48 48 + // useLayoutEffect(() => { 49 49 + // const savedScroll = routeState.scrollPositions[activeTab] ?? 0; 50 50 + // window.scrollTo({ top: savedScroll }); 51 51 + // // eslint-disable-next-line react-hooks/exhaustive-deps 52 52 + // }, [activeTab, route]); 53 53 + 54 54 + useLayoutEffect(() => { 55 55 + return () => { 56 56 + setReusableTabState((prev) => { 57 57 + const current = prev?.[route] ?? routeState; 58 58 + return { 59 59 + ...prev, 60 60 + [route]: { 61 61 + ...current, 62 62 + scrollPositions: { 63 63 + ...current.scrollPositions, 64 64 + [current.activeTab]: window.scrollY, 65 65 + }, 66 66 + }, 67 67 + }; 68 68 + }); 69 69 + }; 70 70 + // eslint-disable-next-line react-hooks/exhaustive-deps 71 71 + }, []); 72 72 + 73 73 + return ( 74 74 + <TabsPrimitive.Root 75 75 + value={activeTab} 76 76 + onValueChange={handleValueChange} 77 77 + className={`w-full`} 78 78 + > 79 79 + <TabsPrimitive.List 80 80 + className={`flex sticky top-[52px] bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-[9] 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`} 81 81 + > 82 82 + {Object.entries(tabs).map(([key]) => ( 83 83 + <TabsPrimitive.Trigger key={key} value={key} className="m3tab"> 84 84 + {key} 85 85 + </TabsPrimitive.Trigger> 86 86 + ))} 87 87 + </TabsPrimitive.List> 88 88 + 89 89 + {Object.entries(tabs).map(([key, node]) => ( 90 90 + <TabsPrimitive.Content key={key} value={key} className="flex-1 min-h-[80dvh]"> 91 91 + {activeTab === key && node} 92 92 + </TabsPrimitive.Content> 93 93 + ))} 94 94 + </TabsPrimitive.Root> 95 95 + ); 96 96 + } 97 97 + 98 98 + export function useReusableTabScrollRestore(route: string) { 99 99 + const [reusableTabState] = useAtom( 100 100 + reusableTabRouteScrollAtom 101 101 + ); 102 102 + 103 103 + const routeState = reusableTabState?.[route]; 104 104 + const activeTab = routeState?.activeTab; 105 105 + 106 106 + useEffect(() => { 107 107 + const savedScroll = activeTab ? routeState?.scrollPositions[activeTab] ?? 0 : 0; 108 108 + //window.scrollTo(0, savedScroll); 109 109 + window.scrollTo({ top: savedScroll }); 110 110 + // eslint-disable-next-line react-hooks/exhaustive-deps 111 111 + }, []); 112 112 + } 113 113 + 114 114 + 115 115 + /* 116 116 + 117 117 + const [notifState] = useAtom(notificationsScrollAtom); 118 118 + const activeTab = notifState.activeTab; 119 119 + useEffect(() => { 120 120 + const savedY = notifState.scrollPositions[activeTab] ?? 0; 121 121 + window.scrollTo(0, savedY); 122 122 + }, [activeTab, notifState.scrollPositions]); 123 123 + 124 124 + */

+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 + }

+670 -279

src/components/UniversalPostRenderer.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 1 2 import { useNavigate } from "@tanstack/react-router"; 3 3 + import DOMPurify from "dompurify"; 2 4 import { useAtom } from "jotai"; 5 5 + import { DropdownMenu } from "radix-ui"; 6 6 + import { HoverCard } from "radix-ui"; 3 7 import * as React from "react"; 4 8 import { type SVGProps } from "react"; 5 5 - import { createPortal } from "react-dom"; 6 9 7 7 - import { ProfilePostComponent } from "~/routes/profile.$did/post.$rkey"; 8 8 - import { likedPostsAtom } from "~/utils/atoms"; 10 10 + import { 11 11 + composerAtom, 12 12 + constellationURLAtom, 13 13 + enableBridgyTextAtom, 14 14 + enableWafrnTextAtom, 15 15 + imgCDNAtom, 16 16 + } from "~/utils/atoms"; 9 17 import { useHydratedEmbed } from "~/utils/useHydrated"; 10 18 import { 11 19 useQueryConstellation, 12 20 useQueryIdentity, 13 21 useQueryPost, 14 22 useQueryProfile, 23 23 + yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks, 15 24 } from "~/utils/useQuery"; 16 25 17 26 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> { ··· 31 40 feedviewpost?: boolean; 32 41 repostedby?: string; 33 42 style?: React.CSSProperties; 34 34 - ref?: React.Ref<HTMLDivElement>; 43 43 + ref?: React.RefObject<HTMLDivElement>; 35 44 dataIndexPropPass?: number; 36 45 nopics?: boolean; 46 46 + concise?: boolean; 47 47 + lightboxCallback?: (d: LightboxProps) => void; 48 48 + maxReplies?: number; 49 49 + isQuote?: boolean; 50 50 + filterNoReplies?: boolean; 51 51 + filterMustHaveMedia?: boolean; 52 52 + filterMustBeReply?: boolean; 37 53 } 38 54 39 55 // export async function cachedGetRecord({ ··· 142 158 ref, 143 159 dataIndexPropPass, 144 160 nopics, 161 161 + concise, 162 162 + lightboxCallback, 163 163 + maxReplies, 164 164 + isQuote, 165 165 + filterNoReplies, 166 166 + filterMustHaveMedia, 167 167 + filterMustBeReply, 145 168 }: UniversalPostRendererATURILoaderProps) { 169 169 + // todo remove this once tree rendering is implemented, use a prop like isTree 170 170 + const TEMPLINEAR = true; 146 171 // /*mass comment*/ console.log("atUri", atUri); 147 172 //const { get, set } = usePersistentStore(); 148 173 //const [record, setRecord] = React.useState<any>(null); ··· 387 412 ); 388 413 }, [links]); 389 414 415 415 + // const { data: repliesData } = useQueryConstellation({ 416 416 + // method: "/links", 417 417 + // target: atUri, 418 418 + // collection: "app.bsky.feed.post", 419 419 + // path: ".reply.parent.uri", 420 420 + // }); 421 421 + 422 422 + const [constellationurl] = useAtom(constellationURLAtom); 423 423 + 424 424 + const infinitequeryresults = useInfiniteQuery({ 425 425 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 426 426 + { 427 427 + constellation: constellationurl, 428 428 + method: "/links", 429 429 + target: atUri, 430 430 + collection: "app.bsky.feed.post", 431 431 + path: ".reply.parent.uri", 432 432 + } 433 433 + ), 434 434 + enabled: !!atUri && !!maxReplies && !isQuote, 435 435 + }); 436 436 + 437 437 + const { 438 438 + data: repliesData, 439 439 + // fetchNextPage, 440 440 + // hasNextPage, 441 441 + // isFetchingNextPage, 442 442 + } = infinitequeryresults; 443 443 + 444 444 + // auto-fetch all pages 445 445 + useEffect(() => { 446 446 + if (!maxReplies || isQuote || TEMPLINEAR) return; 447 447 + if ( 448 448 + infinitequeryresults.hasNextPage && 449 449 + !infinitequeryresults.isFetchingNextPage 450 450 + ) { 451 451 + console.log("Fetching the next page..."); 452 452 + infinitequeryresults.fetchNextPage(); 453 453 + } 454 454 + }, [TEMPLINEAR, infinitequeryresults, isQuote, maxReplies]); 455 455 + 456 456 + const replyAturis = repliesData 457 457 + ? repliesData.pages.flatMap((page) => 458 458 + page 459 459 + ? page.linking_records.map((record) => { 460 460 + const aturi = `at://${record.did}/${record.collection}/${record.rkey}`; 461 461 + return aturi; 462 462 + }) 463 463 + : [] 464 464 + ) 465 465 + : []; 466 466 + 467 467 + //const [oldestOpsReply, setOldestOpsReply] = useState<string | undefined>(undefined); 468 468 + 469 469 + const { oldestOpsReply, oldestOpsReplyElseNewestNonOpsReply } = (() => { 470 470 + if (isQuote || !replyAturis || replyAturis.length === 0 || !maxReplies) 471 471 + return { 472 472 + oldestOpsReply: undefined, 473 473 + oldestOpsReplyElseNewestNonOpsReply: undefined, 474 474 + }; 475 475 + 476 476 + const opdid = new AtUri( 477 477 + //postQuery?.value.reply?.root.uri ?? postQuery?.uri ?? atUri 478 478 + atUri 479 479 + ).host; 480 480 + 481 481 + const opReplies = replyAturis.filter( 482 482 + (aturi) => new AtUri(aturi).host === opdid 483 483 + ); 484 484 + 485 485 + if (opReplies.length > 0) { 486 486 + const opreply = opReplies[opReplies.length - 1]; 487 487 + //setOldestOpsReply(opreply); 488 488 + return { 489 489 + oldestOpsReply: opreply, 490 490 + oldestOpsReplyElseNewestNonOpsReply: opreply, 491 491 + }; 492 492 + } else { 493 493 + return { 494 494 + oldestOpsReply: undefined, 495 495 + oldestOpsReplyElseNewestNonOpsReply: replyAturis[0], 496 496 + }; 497 497 + } 498 498 + })(); 499 499 + 390 500 // const navigateToProfile = (e: React.MouseEvent) => { 391 501 // e.stopPropagation(); 392 502 // if (resolved?.did) { ··· 402 512 } 403 513 404 514 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 - /> 515 515 + <> 516 516 + {/* <span>uprrs {maxReplies} {!!maxReplies&&!!oldestOpsReplyElseNewestNonOpsReply ? "true" : "false"}</span> */} 517 517 + <UniversalPostRendererRawRecordShim 518 518 + detailed={detailed} 519 519 + postRecord={postQuery} 520 520 + profileRecord={opProfile} 521 521 + aturi={atUri} 522 522 + resolved={resolved} 523 523 + likesCount={likes} 524 524 + repostsCount={reposts} 525 525 + repliesCount={replies} 526 526 + bottomReplyLine={ 527 527 + maxReplies && oldestOpsReplyElseNewestNonOpsReply 528 528 + ? true 529 529 + : maxReplies && !oldestOpsReplyElseNewestNonOpsReply 530 530 + ? false 531 531 + : maxReplies === 0 && (!replies || (!!replies && replies === 0)) 532 532 + ? false 533 533 + : bottomReplyLine 534 534 + } 535 535 + topReplyLine={topReplyLine} 536 536 + //bottomBorder={maxReplies&&oldestOpsReplyElseNewestNonOpsReply ? false : bottomBorder} 537 537 + bottomBorder={ 538 538 + maxReplies && oldestOpsReplyElseNewestNonOpsReply 539 539 + ? false 540 540 + : maxReplies === 0 541 541 + ? false 542 542 + : bottomBorder 543 543 + } 544 544 + feedviewpost={feedviewpost} 545 545 + repostedby={repostedby} 546 546 + //style={{...style, background: oldestOpsReply === atUri ? "Red" : undefined}} 547 547 + style={style} 548 548 + ref={ref} 549 549 + dataIndexPropPass={dataIndexPropPass} 550 550 + nopics={nopics} 551 551 + concise={concise} 552 552 + lightboxCallback={lightboxCallback} 553 553 + maxReplies={maxReplies} 554 554 + isQuote={isQuote} 555 555 + filterNoReplies={filterNoReplies} 556 556 + filterMustHaveMedia={filterMustHaveMedia} 557 557 + filterMustBeReply={filterMustBeReply} 558 558 + /> 559 559 + <> 560 560 + {maxReplies && maxReplies === 0 && replies && replies > 0 ? ( 561 561 + <> 562 562 + {/* <div>hello</div> */} 563 563 + <MoreReplies atUri={atUri} /> 564 564 + </> 565 565 + ) : ( 566 566 + <></> 567 567 + )} 568 568 + </> 569 569 + {!isQuote && oldestOpsReplyElseNewestNonOpsReply && ( 570 570 + <> 571 571 + {/* <span>hello {maxReplies}</span> */} 572 572 + <UniversalPostRendererATURILoader 573 573 + //detailed={detailed} 574 574 + atUri={oldestOpsReplyElseNewestNonOpsReply} 575 575 + bottomReplyLine={(maxReplies ?? 0) > 0} 576 576 + topReplyLine={ 577 577 + (!!(maxReplies && maxReplies - 1 === 0) && 578 578 + !!(replies && replies > 0)) || 579 579 + !!((maxReplies ?? 0) > 1) 580 580 + } 581 581 + bottomBorder={bottomBorder} 582 582 + feedviewpost={feedviewpost} 583 583 + repostedby={repostedby} 584 584 + style={style} 585 585 + ref={ref} 586 586 + dataIndexPropPass={dataIndexPropPass} 587 587 + nopics={nopics} 588 588 + concise={concise} 589 589 + lightboxCallback={lightboxCallback} 590 590 + maxReplies={ 591 591 + maxReplies && maxReplies > 0 ? maxReplies - 1 : undefined 592 592 + } 593 593 + /> 594 594 + </> 595 595 + )} 596 596 + </> 597 597 + ); 598 598 + } 599 599 + 600 600 + function MoreReplies({ atUri }: { atUri: string }) { 601 601 + const navigate = useNavigate(); 602 602 + const aturio = new AtUri(atUri); 603 603 + return ( 604 604 + <div 605 605 + onClick={() => 606 606 + navigate({ 607 607 + to: "/profile/$did/post/$rkey", 608 608 + params: { did: aturio.host, rkey: aturio.rkey }, 609 609 + }) 610 610 + } 611 611 + 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" 612 612 + > 613 613 + <div className="w-[42px] h-12 flex flex-col items-center justify-center"> 614 614 + <div 615 615 + style={{ 616 616 + width: 2, 617 617 + height: "100%", 618 618 + backgroundImage: 619 619 + "repeating-linear-gradient(to bottom, var(--color-gray-500) 0, var(--color-gray-500) 4px, transparent 4px, transparent 8px)", 620 620 + opacity: 0.5, 621 621 + }} 622 622 + className="dark:bg-[repeating-linear-gradient(to_bottom,var(--color-gray-500)_0,var(--color-gray-400)_4px,transparent_4px,transparent_8px)]" 623 623 + //className="border-gray-400 dark:border-gray-500" 624 624 + /> 625 625 + </div> 626 626 + 627 627 + <div className="flex items-center pl-3 text-sm text-gray-500 dark:text-gray-400 select-none"> 628 628 + More Replies 629 629 + </div> 630 630 + </div> 424 631 ); 425 632 } 426 633 427 427 - function getAvatarUrl(opProfile: any, did: string) { 634 634 + function getAvatarUrl(opProfile: any, did: string, cdn: string) { 428 635 const link = opProfile?.value?.avatar?.ref?.["$link"]; 429 636 if (!link) return null; 430 430 - return `https://cdn.bsky.app/img/avatar/plain/${did}/${link}@jpeg`; 637 637 + return `https://${cdn}/img/avatar/plain/${did}/${link}@jpeg`; 431 638 } 432 639 433 640 export function UniversalPostRendererRawRecordShim({ ··· 448 655 ref, 449 656 dataIndexPropPass, 450 657 nopics, 658 658 + concise, 659 659 + lightboxCallback, 660 660 + maxReplies, 661 661 + isQuote, 662 662 + filterNoReplies, 663 663 + filterMustHaveMedia, 664 664 + filterMustBeReply, 451 665 }: { 452 666 postRecord: any; 453 667 profileRecord: any; ··· 463 677 feedviewpost?: boolean; 464 678 repostedby?: string; 465 679 style?: React.CSSProperties; 466 466 - ref?: React.Ref<HTMLDivElement>; 680 680 + ref?: React.RefObject<HTMLDivElement>; 467 681 dataIndexPropPass?: number; 468 682 nopics?: boolean; 683 683 + concise?: boolean; 684 684 + lightboxCallback?: (d: LightboxProps) => void; 685 685 + maxReplies?: number; 686 686 + isQuote?: boolean; 687 687 + filterNoReplies?: boolean; 688 688 + filterMustHaveMedia?: boolean; 689 689 + filterMustBeReply?: boolean; 469 690 }) { 470 691 // /*mass comment*/ console.log(`received aturi: ${aturi} of post content: ${postRecord}`); 471 692 const navigate = useNavigate(); ··· 536 757 // run(); 537 758 // }, [postRecord, resolved?.did]); 538 759 760 760 + const hasEmbed = (postRecord?.value as ATPAPI.AppBskyFeedPost.Record)?.embed; 761 761 + const hasImages = hasEmbed?.$type === "app.bsky.embed.images"; 762 762 + const hasVideo = hasEmbed?.$type === "app.bsky.embed.video"; 763 763 + const isquotewithmedia = hasEmbed?.$type === "app.bsky.embed.recordWithMedia"; 764 764 + const isQuotewithImages = 765 765 + isquotewithmedia && 766 766 + (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === 767 767 + "app.bsky.embed.images"; 768 768 + const isQuotewithVideo = 769 769 + isquotewithmedia && 770 770 + (hasEmbed as ATPAPI.AppBskyEmbedRecordWithMedia.Main)?.media?.$type === 771 771 + "app.bsky.embed.video"; 772 772 + 773 773 + const hasMedia = 774 774 + hasEmbed && 775 775 + (hasImages || hasVideo || isQuotewithImages || isQuotewithVideo); 776 776 + 539 777 const { 540 778 data: hydratedEmbed, 541 779 isLoading: isEmbedLoading, 542 780 error: embedError, 543 781 } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did); 782 782 + 783 783 + const [imgcdn] = useAtom(imgCDNAtom); 544 784 545 785 const parsedaturi = new AtUri(aturi); //parseAtUri(aturi); 546 786 787 787 + const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>( 788 788 + () => ({ 789 789 + did: resolved?.did || "", 790 790 + handle: resolved?.handle || "", 791 791 + displayName: profileRecord?.value?.displayName || "", 792 792 + avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "", 793 793 + viewer: undefined, 794 794 + labels: profileRecord?.labels || undefined, 795 795 + verification: undefined, 796 796 + }), 797 797 + [imgcdn, profileRecord, resolved?.did, resolved?.handle] 798 798 + ); 799 799 + 800 800 + const fakeprofileviewdetailed = 801 801 + React.useMemo<AppBskyActorDefs.ProfileViewDetailed>( 802 802 + () => ({ 803 803 + ...fakeprofileviewbasic, 804 804 + $type: "app.bsky.actor.defs#profileViewDetailed", 805 805 + description: profileRecord?.value?.description || undefined, 806 806 + }), 807 807 + [fakeprofileviewbasic, profileRecord?.value?.description] 808 808 + ); 809 809 + 547 810 const fakepost = React.useMemo<AppBskyFeedDefs.PostView>( 548 811 () => ({ 549 812 $type: "app.bsky.feed.defs#postView", 550 813 uri: aturi, 551 814 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 - }, 815 815 + author: fakeprofileviewbasic, 561 816 record: postRecord?.value || {}, 562 817 embed: hydratedEmbed ?? undefined, 563 818 replyCount: repliesCount ?? 0, ··· 574 829 postRecord?.cid, 575 830 postRecord?.value, 576 831 postRecord?.labels, 577 577 - resolved?.did, 578 578 - resolved?.handle, 579 579 - profileRecord, 832 832 + fakeprofileviewbasic, 580 833 hydratedEmbed, 581 834 repliesCount, 582 835 repostsCount, ··· 615 868 // }, [fakepost, get, set]); 616 869 const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent 617 870 ?.uri; 618 618 - const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined; 871 871 + const feedviewpostreplydid = 872 872 + thereply && !filterNoReplies ? new AtUri(thereply).host : undefined; 619 873 const replyhookvalue = useQueryIdentity( 620 874 feedviewpost ? feedviewpostreplydid : undefined 621 875 ); ··· 626 880 repostedby ? aturirepostbydid : undefined 627 881 ); 628 882 const feedviewpostrepostedbyhandle = repostedbyhookvalue?.data?.handle; 883 883 + 884 884 + if (filterNoReplies && thereply) return null; 885 885 + 886 886 + if (filterMustHaveMedia && !hasMedia) return null; 887 887 + 888 888 + if (filterMustBeReply && !thereply) return null; 889 889 + 629 890 return ( 630 891 <> 631 892 {/* <p> 632 893 {postRecord?.value?.embed.$type + " " + JSON.stringify(hydratedEmbed)} 633 894 </p> */} 895 895 + {/* <span>filtermustbereply is {filterMustBeReply ? "true" : "false"}</span> 896 896 + <span>thereply is {thereply ? "true" : "false"}</span> */} 634 897 <UniversalPostRenderer 635 898 expanded={detailed} 636 899 onPostClick={() => ··· 653 916 } 654 917 }} 655 918 post={fakepost} 919 919 + uprrrsauthor={fakeprofileviewdetailed} 656 920 salt={aturi} 657 921 bottomReplyLine={bottomReplyLine} 658 922 topReplyLine={topReplyLine} ··· 664 928 ref={ref} 665 929 dataIndexPropPass={dataIndexPropPass} 666 930 nopics={nopics} 931 931 + concise={concise} 932 932 + lightboxCallback={lightboxCallback} 933 933 + maxReplies={maxReplies} 934 934 + isQuote={isQuote} 667 935 /> 668 936 </> 669 937 ); ··· 702 970 {...props} 703 971 > 704 972 <path 705 705 - fill="oklch(0.704 0.05 28)" 973 973 + fill="var(--color-gray-400)" 706 974 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 975 ></path> 708 976 </svg> ··· 719 987 {...props} 720 988 > 721 989 <path 722 722 - fill="oklch(0.704 0.05 28)" 990 990 + fill="var(--color-gray-400)" 723 991 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 724 992 ></path> 725 993 </svg> ··· 770 1038 {...props} 771 1039 > 772 1040 <path 773 773 - fill="oklch(0.704 0.05 28)" 1041 1041 + fill="var(--color-gray-400)" 774 1042 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 1043 ></path> 776 1044 </svg> ··· 787 1055 {...props} 788 1056 > 789 1057 <path 790 790 - fill="oklch(0.704 0.05 28)" 1058 1058 + fill="var(--color-gray-400)" 791 1059 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 1060 ></path> 793 1061 </svg> ··· 804 1072 {...props} 805 1073 > 806 1074 <path 807 807 - fill="oklch(0.704 0.05 28)" 1075 1075 + fill="var(--color-gray-400)" 808 1076 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 1077 ></path> 810 1078 </svg> ··· 821 1089 {...props} 822 1090 > 823 1091 <path 824 824 - fill="oklch(0.704 0.05 28)" 1092 1092 + fill="var(--color-gray-400)" 825 1093 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 1094 ></path> 827 1095 </svg> ··· 855 1123 {...props} 856 1124 > 857 1125 <path 858 858 - fill="oklch(0.704 0.05 28)" 1126 1126 + fill="var(--color-gray-400)" 859 1127 d="M10 9V5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11" 860 1128 ></path> 861 1129 </svg> ··· 909 1177 {...props} 910 1178 > 911 1179 <path 912 912 - fill="oklch(0.704 0.05 28)" 1180 1180 + fill="var(--color-gray-400)" 913 1181 d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2z" 914 1182 ></path> 915 1183 </svg> ··· 926 1194 {...props} 927 1195 > 928 1196 <path 929 929 - fill="oklch(0.704 0.05 28)" 1197 1197 + fill="var(--color-gray-400)" 930 1198 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 1199 ></path> 932 1200 </svg> ··· 954 1222 //import Masonry from "@mui/lab/Masonry"; 955 1223 import { 956 1224 type $Typed, 1225 1225 + AppBskyActorDefs, 957 1226 AppBskyEmbedDefs, 958 1227 AppBskyEmbedExternal, 959 1228 AppBskyEmbedImages, ··· 977 1246 PostView, 978 1247 //ThreadViewPost, 979 1248 } from "@atproto/api/dist/client/types/app/bsky/feed/defs"; 1249 1249 + import { useInfiniteQuery } from "@tanstack/react-query"; 980 1250 import { useEffect, useRef, useState } from "react"; 981 1251 import ReactPlayer from "react-player"; 982 1252 983 1253 import defaultpfp from "~/../public/favicon.png"; 984 1254 import { useAuth } from "~/providers/UnifiedAuthProvider"; 1255 1255 + import { renderSnack } from "~/routes/__root"; 1256 1256 + import { 1257 1257 + FeedItemRenderAturiLoader, 1258 1258 + FollowButton, 1259 1259 + Mutual, 1260 1260 + } from "~/routes/profile.$did"; 1261 1261 + import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i"; 1262 1262 + import { useFastLike } from "~/utils/likeMutationQueue"; 985 1263 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed"; 986 1264 // import type { 987 1265 // ViewRecord, ··· 1089 1367 1090 1368 function UniversalPostRenderer({ 1091 1369 post, 1370 1370 + uprrrsauthor, 1092 1371 //setMainItem, 1093 1372 //isMainItem, 1094 1373 onPostClick, ··· 1109 1388 ref, 1110 1389 dataIndexPropPass, 1111 1390 nopics, 1391 1391 + concise, 1392 1392 + lightboxCallback, 1393 1393 + maxReplies, 1112 1394 }: { 1113 1395 post: PostView; 1396 1396 + uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed; 1114 1397 // optional for now because i havent ported every use to this yet 1115 1398 // setMainItem?: React.Dispatch< 1116 1399 // React.SetStateAction<AppBskyFeedDefs.FeedViewPost> ··· 1129 1412 depth?: number; 1130 1413 repostedby?: string; 1131 1414 style?: React.CSSProperties; 1132 1132 - ref?: React.Ref<HTMLDivElement>; 1415 1415 + ref?: React.RefObject<HTMLDivElement>; 1133 1416 dataIndexPropPass?: number; 1134 1417 nopics?: boolean; 1418 1418 + concise?: boolean; 1419 1419 + lightboxCallback?: (d: LightboxProps) => void; 1420 1420 + maxReplies?: number; 1135 1421 }) { 1136 1422 const parsed = new AtUri(post.uri); 1137 1423 const navigate = useNavigate(); 1138 1138 - const [likedPosts, setLikedPosts] = useAtom(likedPostsAtom); 1139 1424 const [hasRetweeted, setHasRetweeted] = useState<boolean>( 1140 1425 post.viewer?.repost ? true : false 1141 1426 ); 1142 1142 - const [hasLiked, setHasLiked] = useState<boolean>( 1143 1143 - post.uri in likedPosts || post.viewer?.like ? true : false 1144 1144 - ); 1427 1427 + const [, setComposerPost] = useAtom(composerAtom); 1145 1428 const { agent } = useAuth(); 1146 1146 - const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like); 1147 1429 const [retweetUri, setRetweetUri] = useState<string | undefined>( 1148 1430 post.viewer?.repost 1149 1431 ); 1150 1150 - 1151 1151 - const likeOrUnlikePost = async () => { 1152 1152 - const newLikedPosts = { ...likedPosts }; 1153 1153 - if (!agent) { 1154 1154 - console.error("Agent is null or undefined"); 1155 1155 - return; 1156 1156 - } 1157 1157 - if (hasLiked) { 1158 1158 - if (post.uri in likedPosts) { 1159 1159 - const likeUri = likedPosts[post.uri]; 1160 1160 - setLikeUri(likeUri); 1161 1161 - } 1162 1162 - if (likeUri) { 1163 1163 - await agent.deleteLike(likeUri); 1164 1164 - setHasLiked(false); 1165 1165 - delete newLikedPosts[post.uri]; 1166 1166 - } 1167 1167 - } else { 1168 1168 - const { uri } = await agent.like(post.uri, post.cid); 1169 1169 - setLikeUri(uri); 1170 1170 - setHasLiked(true); 1171 1171 - newLikedPosts[post.uri] = uri; 1172 1172 - } 1173 1173 - setLikedPosts(newLikedPosts); 1174 1174 - }; 1432 1432 + const { liked, toggle, backfill } = useFastLike(post.uri, post.cid); 1433 1433 + // const bovref = useBackfillOnView(post.uri, post.cid); 1434 1434 + // React.useLayoutEffect(()=>{ 1435 1435 + // if (expanded && !isQuote) { 1436 1436 + // backfill(); 1437 1437 + // } 1438 1438 + // },[backfill, expanded, isQuote]) 1175 1439 1176 1440 const repostOrUnrepostPost = async () => { 1177 1441 if (!agent) { ··· 1203 1467 1204 1468 const emergencySalt = randomString(); 1205 1469 1470 1470 + const [showBridgyText] = useAtom(enableBridgyTextAtom); 1471 1471 + const [showWafrnText] = useAtom(enableWafrnTextAtom); 1472 1472 + 1473 1473 + const unfedibridgy = (post.record as { bridgyOriginalText?: string }) 1474 1474 + .bridgyOriginalText; 1475 1475 + const unfediwafrnPartial = (post.record as { fullText?: string }).fullText; 1476 1476 + const unfediwafrnTags = (post.record as { fullTags?: string }).fullTags; 1477 1477 + const unfediwafrnUnHost = (post.record as { fediverseId?: string }) 1478 1478 + .fediverseId; 1479 1479 + 1480 1480 + const undfediwafrnHost = unfediwafrnUnHost 1481 1481 + ? new URL(unfediwafrnUnHost).hostname 1482 1482 + : undefined; 1483 1483 + 1484 1484 + const tags = unfediwafrnTags 1485 1485 + ? unfediwafrnTags 1486 1486 + .split("\n") 1487 1487 + .map((t) => t.trim()) 1488 1488 + .filter(Boolean) 1489 1489 + : undefined; 1490 1490 + 1491 1491 + const links = tags 1492 1492 + ? tags 1493 1493 + .map((tag) => { 1494 1494 + const encoded = encodeURIComponent(tag); 1495 1495 + return `<a href="https://${undfediwafrnHost}/search/${encoded}" target="_blank">#${tag.replaceAll(" ", "-")}</a>`; 1496 1496 + }) 1497 1497 + .join("<br>") 1498 1498 + : ""; 1499 1499 + 1500 1500 + const unfediwafrn = unfediwafrnPartial 1501 1501 + ? unfediwafrnPartial + (links ? `<br>${links}` : "") 1502 1502 + : undefined; 1503 1503 + 1504 1504 + const fedi = 1505 1505 + (showBridgyText ? unfedibridgy : undefined) ?? 1506 1506 + (showWafrnText ? unfediwafrn : undefined); 1507 1507 + 1206 1508 /* fuck you */ 1207 1509 const isMainItem = false; 1208 1510 const setMainItem = (any: any) => {}; 1209 1511 // eslint-disable-next-line react-hooks/refs 1210 1210 - console.log("Received ref in UniversalPostRenderer:", ref); 1512 1512 + //console.log("Received ref in UniversalPostRenderer:", usedref); 1211 1513 return ( 1212 1514 <div ref={ref} style={style} data-index={dataIndexPropPass}> 1213 1515 <div ··· 1236 1538 paddingLeft: isQuote ? 12 : 16, 1237 1539 paddingRight: isQuote ? 12 : 16, 1238 1540 //paddingTop: 16, 1239 1239 - paddingTop: isRepost ? 10 : isQuote ? 12 : 16, 1541 1541 + paddingTop: isRepost ? 10 : isQuote ? 12 : topReplyLine ? 8 : 16, 1240 1542 //paddingBottom: bottomReplyLine ? 0 : 16, 1241 1543 paddingBottom: 0, 1242 1544 fontFamily: "system-ui, sans-serif", ··· 1245 1547 // dont cursor: "pointer", 1246 1548 borderBottomWidth: bottomBorder ? (isQuote ? 0 : 1) : 0, 1247 1549 }} 1248 1248 - className="border-gray-300 dark:border-gray-600" 1550 1550 + className="border-gray-300 dark:border-gray-800" 1249 1551 > 1250 1552 {isRepost && ( 1251 1553 <div ··· 1277 1579 //left: 16 + (42 / 2), 1278 1580 width: 2, 1279 1581 //height: "100%", 1280 1280 - height: isRepost ? "calc(16px + 1rem - 6px)" : 16 - 6, 1582 1582 + height: isRepost 1583 1583 + ? "calc(16px + 1rem - 6px)" 1584 1584 + : topReplyLine 1585 1585 + ? 8 - 6 1586 1586 + : 16 - 6, 1281 1587 // background: theme.textSecondary, 1282 1588 //opacity: 0.5, 1283 1589 // no flex here ··· 1285 1591 className="bg-gray-500 dark:bg-gray-400" 1286 1592 /> 1287 1593 )} 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> 1594 1594 + <HoverCard.Root> 1595 1595 + <HoverCard.Trigger asChild> 1596 1596 + <div 1597 1597 + className={`absolute`} 1598 1598 + style={{ 1599 1599 + top: isRepost 1600 1600 + ? "calc(16px + 1rem)" 1601 1601 + : isQuote 1602 1602 + ? 12 1603 1603 + : topReplyLine 1604 1604 + ? 8 1605 1605 + : 16, 1606 1606 + left: isQuote ? 12 : 16, 1607 1607 + }} 1608 1608 + onClick={onProfileClick} 1609 1609 + > 1610 1610 + <img 1611 1611 + src={post.author.avatar || defaultpfp} 1612 1612 + alt="avatar" 1613 1613 + className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`} 1614 1614 + style={{ 1615 1615 + width: isQuote ? 16 : 42, 1616 1616 + height: isQuote ? 16 : 42, 1617 1617 + }} 1618 1618 + /> 1619 1619 + </div> 1620 1620 + </HoverCard.Trigger> 1621 1621 + <HoverCard.Portal> 1622 1622 + <HoverCard.Content 1623 1623 + 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" 1624 1624 + side={"bottom"} 1625 1625 + sideOffset={5} 1626 1626 + onClick={onProfileClick} 1627 1627 + > 1628 1628 + <div className="flex flex-col gap-2"> 1629 1629 + <div className="flex flex-row"> 1630 1630 + <img 1631 1631 + src={post.author.avatar || defaultpfp} 1632 1632 + alt="avatar" 1633 1633 + className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600" 1634 1634 + /> 1635 1635 + <div className=" flex-1 flex flex-row align-middle justify-end"> 1636 1636 + <FollowButton targetdidorhandle={post.author.did} /> 1637 1637 + </div> 1638 1638 + </div> 1639 1639 + <div className="flex flex-col gap-3"> 1640 1640 + <div> 1641 1641 + <div className="text-gray-900 dark:text-gray-100 font-medium text-md"> 1642 1642 + {post.author.displayName || post.author.handle}{" "} 1643 1643 + </div> 1644 1644 + <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1"> 1645 1645 + <Mutual targetdidorhandle={post.author.did} />@ 1646 1646 + {post.author.handle}{" "} 1647 1647 + </div> 1648 1648 + </div> 1649 1649 + {uprrrsauthor?.description && ( 1650 1650 + <div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3"> 1651 1651 + {uprrrsauthor.description} 1652 1652 + </div> 1653 1653 + )} 1654 1654 + {/* <div className="flex gap-4"> 1655 1655 + <div className="flex gap-1"> 1656 1656 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1657 1657 + 0 1658 1658 + </div> 1659 1659 + <div className="text-gray-500 dark:text-gray-400"> 1660 1660 + Following 1661 1661 + </div> 1662 1662 + </div> 1663 1663 + <div className="flex gap-1"> 1664 1664 + <div className="font-medium text-gray-900 dark:text-gray-100"> 1665 1665 + 2,900 1666 1666 + </div> 1667 1667 + <div className="text-gray-500 dark:text-gray-400"> 1668 1668 + Followers 1669 1669 + </div> 1670 1670 + </div> 1671 1671 + </div> */} 1672 1672 + </div> 1673 1673 + </div> 1674 1674 + 1675 1675 + {/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */} 1676 1676 + </HoverCard.Content> 1677 1677 + </HoverCard.Portal> 1678 1678 + </HoverCard.Root> 1679 1679 + 1319 1680 <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}> 1320 1681 <div 1321 1682 style={{ ··· 1329 1690 }} 1330 1691 > 1331 1692 {/* dummy for later use */} 1332 1332 - <div style={{ width: 42, height: 42 + 8, minHeight: 42 + 8 }} /> 1693 1693 + <div style={{ width: 42, height: 42 + 6, minHeight: 42 + 6 }} /> 1333 1694 {/* reply line !!!! bottomReplyLine */} 1334 1695 {bottomReplyLine && ( 1335 1696 <div ··· 1475 1836 <div 1476 1837 style={{ 1477 1838 fontSize: 16, 1478 1478 - marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8, 1839 1839 + marginBottom: !post.embed || concise ? 0 : 8, 1479 1840 whiteSpace: "pre-wrap", 1480 1841 textAlign: "left", 1481 1842 overflowWrap: "anywhere", 1482 1843 wordBreak: "break-word", 1483 1483 - //color: theme.text, 1844 1844 + ...(concise && { 1845 1845 + display: "-webkit-box", 1846 1846 + WebkitBoxOrient: "vertical", 1847 1847 + WebkitLineClamp: 2, 1848 1848 + overflow: "hidden", 1849 1849 + }), 1484 1850 }} 1485 1851 className="text-gray-900 dark:text-gray-100" 1486 1852 > 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 - {} 1853 1853 + {fedi ? ( 1854 1854 + <> 1855 1855 + <span 1856 1856 + className="dangerousFediContent" 1857 1857 + dangerouslySetInnerHTML={{ 1858 1858 + __html: DOMPurify.sanitize(fedi), 1859 1859 + }} 1860 1860 + /> 1861 1861 + </> 1862 1862 + ) : ( 1863 1863 + <> 1864 1864 + {renderTextWithFacets({ 1865 1865 + text: (post.record as { text?: string }).text ?? "", 1866 1866 + facets: (post.record.facets as Facet[]) ?? [], 1867 1867 + navigate: navigate, 1868 1868 + })} 1869 1869 + </> 1870 1870 + )} 1493 1871 </div> 1494 1494 - {post.embed && depth < 1 ? ( 1872 1872 + {post.embed && depth < 1 && !concise ? ( 1495 1873 <PostEmbeds 1496 1874 embed={post.embed} 1497 1875 //moderation={moderation} ··· 1500 1878 navigate={navigate} 1501 1879 postid={{ did: post.author.did, rkey: parsed.rkey }} 1502 1880 nopics={nopics} 1881 1881 + lightboxCallback={lightboxCallback} 1503 1882 /> 1504 1883 ) : null} 1505 1884 {post.embed && depth > 0 && ( ··· 1507 1886 hydrate embeds this deep but the connection here is implicit 1508 1887 todo: idk make this a real part of the embed shim so its not implicit */ 1509 1888 <> 1510 1510 - <div className="border-gray-300 dark:border-gray-600 p-3 rounded-xl border italic text-gray-400 text-[14px]"> 1889 1889 + <div className="border-gray-300 dark:border-gray-800 p-3 rounded-xl border italic text-gray-400 text-[14px]"> 1511 1890 (there is an embed here thats too deep to render) 1512 1891 </div> 1513 1892 </> 1514 1893 )} 1515 1515 - <div style={{ paddingTop: post.embed && depth < 1 ? 4 : 0 }}> 1894 1894 + <div 1895 1895 + style={{ 1896 1896 + paddingTop: post.embed && !concise && depth < 1 ? 4 : 0, 1897 1897 + }} 1898 1898 + > 1516 1899 <> 1517 1900 {expanded && ( 1518 1901 <div ··· 1530 1913 borderBottomWidth: 1, 1531 1914 marginBottom: 8, 1532 1915 }} // important for height animation 1533 1533 - className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700" 1916 1916 + className="text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-800 was7" 1534 1917 > 1535 1918 {fullDateTimeFormat(post.indexedAt)} 1536 1919 </div> ··· 1549 1932 }} 1550 1933 className="text-gray-500 dark:text-gray-400" 1551 1934 > 1552 1552 - <span style={btnstyle}> 1553 1553 - <MdiCommentOutline /> 1554 1554 - {post.replyCount} 1555 1555 - </span> 1556 1935 <HitSlopButton 1557 1936 onClick={() => { 1558 1558 - repostOrUnrepostPost(); 1937 1937 + setComposerPost({ kind: "reply", parent: post.uri }); 1559 1938 }} 1560 1939 style={{ 1561 1940 ...btnstyle, 1562 1562 - ...(hasRetweeted ? { color: "#5CEFAA" } : {}), 1563 1941 }} 1564 1942 > 1565 1565 - {hasRetweeted ? <MdiRepeatGreen /> : <MdiRepeat />} 1566 1566 - {(post.repostCount || 0) + (hasRetweeted ? 1 : 0)} 1943 1943 + <MdiCommentOutline /> 1944 1944 + {post.replyCount} 1567 1945 </HitSlopButton> 1946 1946 + <DropdownMenu.Root modal={false}> 1947 1947 + <DropdownMenu.Trigger asChild> 1948 1948 + <div 1949 1949 + style={{ 1950 1950 + ...btnstyle, 1951 1951 + ...(hasRetweeted ? { color: "#5CEFAA" } : {}), 1952 1952 + }} 1953 1953 + aria-label="Repost or quote post" 1954 1954 + > 1955 1955 + {hasRetweeted ? <MdiRepeatGreen /> : <MdiRepeat />} 1956 1956 + {post.repostCount ?? 0} 1957 1957 + </div> 1958 1958 + </DropdownMenu.Trigger> 1959 1959 + 1960 1960 + <DropdownMenu.Portal> 1961 1961 + <DropdownMenu.Content 1962 1962 + align="start" 1963 1963 + sideOffset={5} 1964 1964 + 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" 1965 1965 + > 1966 1966 + <DropdownMenu.Item 1967 1967 + onSelect={repostOrUnrepostPost} 1968 1968 + 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" 1969 1969 + > 1970 1970 + <MdiRepeat 1971 1971 + className={hasRetweeted ? "text-green-400" : ""} 1972 1972 + /> 1973 1973 + <span>{hasRetweeted ? "Undo Repost" : "Repost"}</span> 1974 1974 + </DropdownMenu.Item> 1975 1975 + 1976 1976 + <DropdownMenu.Item 1977 1977 + onSelect={() => { 1978 1978 + setComposerPost({ 1979 1979 + kind: "quote", 1980 1980 + subject: post.uri, 1981 1981 + }); 1982 1982 + }} 1983 1983 + 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" 1984 1984 + > 1985 1985 + {/* You might want a specific quote icon here */} 1986 1986 + <MdiCommentOutline /> 1987 1987 + <span>Quote</span> 1988 1988 + </DropdownMenu.Item> 1989 1989 + </DropdownMenu.Content> 1990 1990 + </DropdownMenu.Portal> 1991 1991 + </DropdownMenu.Root> 1568 1992 <HitSlopButton 1569 1993 onClick={() => { 1570 1570 - likeOrUnlikePost(); 1994 1994 + toggle(); 1571 1995 }} 1572 1996 style={{ 1573 1997 ...btnstyle, 1574 1574 - ...(hasLiked ? { color: "#EC4899" } : {}), 1998 1998 + ...(liked ? { color: "#EC4899" } : {}), 1575 1999 }} 1576 2000 > 1577 1577 - {hasLiked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 1578 1578 - {(post.likeCount || 0) + (hasLiked ? 1 : 0)} 2001 2001 + {liked ? <MdiCardsHeart /> : <MdiCardsHeartOutline />} 2002 2002 + {(post.likeCount || 0) + (liked ? 1 : 0)} 1579 2003 </HitSlopButton> 1580 2004 <div style={{ display: "flex", gap: 8 }}> 1581 2005 <HitSlopButton ··· 1589 2013 "/post/" + 1590 2014 post.uri.split("/").pop() 1591 2015 ); 2016 2016 + renderSnack({ 2017 2017 + title: "Copied to clipboard!", 2018 2018 + }); 1592 2019 } catch (_e) { 1593 2020 // idk 2021 2021 + renderSnack({ 2022 2022 + title: "Failed to copy link", 2023 2023 + }); 1594 2024 } 1595 2025 }} 1596 2026 style={{ ··· 1599 2029 > 1600 2030 <MdiShareVariant /> 1601 2031 </HitSlopButton> 1602 1602 - <span style={btnstyle}> 1603 1603 - <MdiMoreHoriz /> 1604 1604 - </span> 2032 2032 + <HitSlopButton 2033 2033 + onClick={() => { 2034 2034 + renderSnack({ 2035 2035 + title: "Not implemented yet...", 2036 2036 + }); 2037 2037 + }} 2038 2038 + > 2039 2039 + <span style={btnstyle}> 2040 2040 + <MdiMoreHoriz /> 2041 2041 + </span> 2042 2042 + </HitSlopButton> 1605 2043 </div> 1606 2044 </div> 1607 2045 )} ··· 1706 2144 navigate, 1707 2145 postid, 1708 2146 nopics, 2147 2147 + lightboxCallback, 1709 2148 }: { 1710 2149 embed?: Embed; 1711 2150 moderation?: ModerationDecision; ··· 1716 2155 navigate: (_: any) => void; 1717 2156 postid?: { did: string; rkey: string }; 1718 2157 nopics?: boolean; 2158 2158 + lightboxCallback?: (d: LightboxProps) => void; 1719 2159 }) { 1720 1720 - const [lightboxIndex, setLightboxIndex] = useState<number | null>(null); 2160 2160 + //const [lightboxIndex, setLightboxIndex] = useState<number | null>(null); 2161 2161 + function setLightboxIndex(number: number) { 2162 2162 + navigate({ 2163 2163 + to: "/profile/$did/post/$rkey/image/$i", 2164 2164 + params: { 2165 2165 + did: postid?.did, 2166 2166 + rkey: postid?.rkey, 2167 2167 + i: number.toString(), 2168 2168 + }, 2169 2169 + }); 2170 2170 + } 1721 2171 if ( 1722 2172 AppBskyEmbedRecordWithMedia.isView(embed) && 1723 2173 AppBskyEmbedRecord.isViewRecord(embed.record.record) && ··· 1753 2203 navigate={navigate} 1754 2204 postid={postid} 1755 2205 nopics={nopics} 2206 2206 + lightboxCallback={lightboxCallback} 1756 2207 /> 1757 2208 {/* padding empty div of 8px height */} 1758 2209 <div style={{ height: 12 }} /> ··· 1766 2217 //boxShadow: theme.cardShadow, 1767 2218 overflow: "hidden", 1768 2219 }} 1769 1769 - className="shadow border border-gray-200 dark:border-gray-700" 2220 2220 + className="shadow border border-gray-200 dark:border-gray-800 was7" 1770 2221 > 1771 2222 <UniversalPostRenderer 1772 2223 post={post} ··· 1814 2265 } 1815 2266 1816 2267 if (AppBskyEmbedRecord.isView(embed)) { 2268 2268 + // hey im really lazy and im gonna do it the bad way 2269 2269 + const reallybaduri = (embed?.record as any)?.uri as string | undefined; 2270 2270 + const reallybadaturi = reallybaduri ? new AtUri(reallybaduri) : undefined; 2271 2271 + 1817 2272 // custom feed embed (i.e. generator view) 1818 2273 if (AppBskyFeedDefs.isGeneratorView(embed.record)) { 1819 2274 // stopgap sorry ··· 1823 2278 // <MaybeFeedCard view={embed.record} /> 1824 2279 // </div> 1825 2280 // ) 2281 2281 + } else if ( 2282 2282 + !!reallybaduri && 2283 2283 + !!reallybadaturi && 2284 2284 + reallybadaturi.collection === "app.bsky.feed.generator" 2285 2285 + ) { 2286 2286 + return ( 2287 2287 + <div className="rounded-xl border"> 2288 2288 + <FeedItemRenderAturiLoader aturi={reallybaduri} disableBottomBorder /> 2289 2289 + </div> 2290 2290 + ); 1826 2291 } 1827 2292 1828 2293 // list embed ··· 1834 2299 // <MaybeListCard view={embed.record} /> 1835 2300 // </div> 1836 2301 // ) 2302 2302 + } else if ( 2303 2303 + !!reallybaduri && 2304 2304 + !!reallybadaturi && 2305 2305 + reallybadaturi.collection === "app.bsky.graph.list" 2306 2306 + ) { 2307 2307 + return ( 2308 2308 + <div className="rounded-xl border"> 2309 2309 + <FeedItemRenderAturiLoader 2310 2310 + aturi={reallybaduri} 2311 2311 + disableBottomBorder 2312 2312 + listmode 2313 2313 + disablePropagation 2314 2314 + /> 2315 2315 + </div> 2316 2316 + ); 1837 2317 } 1838 2318 1839 2319 // starter pack embed ··· 1845 2325 // <StarterPackCard starterPack={embed.record} /> 1846 2326 // </div> 1847 2327 // ) 2328 2328 + } else if ( 2329 2329 + !!reallybaduri && 2330 2330 + !!reallybadaturi && 2331 2331 + reallybadaturi.collection === "app.bsky.graph.starterpack" 2332 2332 + ) { 2333 2333 + return ( 2334 2334 + <div className="rounded-xl border"> 2335 2335 + <FeedItemRenderAturiLoader 2336 2336 + aturi={reallybaduri} 2337 2337 + disableBottomBorder 2338 2338 + listmode 2339 2339 + disablePropagation 2340 2340 + /> 2341 2341 + </div> 2342 2342 + ); 1848 2343 } 1849 2344 1850 2345 // quote post ··· 1883 2378 //boxShadow: theme.cardShadow, 1884 2379 overflow: "hidden", 1885 2380 }} 1886 1886 - className="shadow border border-gray-200 dark:border-gray-700" 2381 2381 + className="shadow border border-gray-200 dark:border-gray-800 was7" 1887 2382 > 1888 2383 <UniversalPostRenderer 1889 2384 post={post} ··· 1904 2399 </div> 1905 2400 ); 1906 2401 } else { 2402 2402 + console.log("what the hell is a ", embed); 1907 2403 return <>sorry</>; 1908 2404 } 1909 2405 //return <QuotePostRenderer record={embed.record} moderation={moderation} />; ··· 1920 2416 1921 2417 // image embed 1922 2418 // = 1923 1923 - if (AppBskyEmbedImages.isView(embed) && !nopics) { 2419 2419 + if (AppBskyEmbedImages.isView(embed)) { 1924 2420 const { images } = embed; 1925 2421 1926 2422 const lightboxImages = images.map((img) => ({ 1927 2423 src: img.fullsize, 1928 2424 alt: img.alt, 1929 2425 })); 2426 2426 + console.log("rendering images"); 2427 2427 + if (lightboxCallback) { 2428 2428 + lightboxCallback({ images: lightboxImages }); 2429 2429 + console.log("rendering images"); 2430 2430 + } 2431 2431 + 2432 2432 + if (nopics) return; 1930 2433 1931 2434 if (images.length > 0) { 1932 2435 // const items = embed.images.map(img => ({ ··· 1956 2459 //border: `1px solid ${theme.border}`, 1957 2460 overflow: "hidden", 1958 2461 }} 1959 1959 - className="border border-gray-200 dark:border-gray-700 bg-gray-200 dark:bg-gray-900" 2462 2462 + className="border border-gray-200 dark:border-gray-800 was7 bg-gray-200 dark:bg-gray-900" 1960 2463 > 1961 1961 - {lightboxIndex !== null && ( 2464 2464 + {/* {lightboxIndex !== null && ( 1962 2465 <Lightbox 1963 2466 images={lightboxImages} 1964 2467 index={lightboxIndex} ··· 1966 2469 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 1967 2470 post={postid} 1968 2471 /> 1969 1969 - )} 2472 2472 + )} */} 1970 2473 <img 1971 2474 src={image.fullsize} 1972 2475 alt={image.alt} ··· 1997 2500 overflow: "hidden", 1998 2501 //border: `1px solid ${theme.border}`, 1999 2502 }} 2000 2000 - className="border border-gray-200 dark:border-gray-700" 2503 2503 + className="border border-gray-200 dark:border-gray-800 was7" 2001 2504 > 2002 2002 - {lightboxIndex !== null && ( 2505 2505 + {/* {lightboxIndex !== null && ( 2003 2506 <Lightbox 2004 2507 images={lightboxImages} 2005 2508 index={lightboxIndex} ··· 2007 2510 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2008 2511 post={postid} 2009 2512 /> 2010 2010 - )} 2513 2513 + )} */} 2011 2514 {images.map((img, i) => ( 2012 2515 <div 2013 2516 key={i} ··· 2047 2550 //border: `1px solid ${theme.border}`, 2048 2551 // height: 240, // fixed height for cropping 2049 2552 }} 2050 2050 - className="border border-gray-200 dark:border-gray-700" 2553 2553 + className="border border-gray-200 dark:border-gray-800 was7" 2051 2554 > 2052 2052 - {lightboxIndex !== null && ( 2555 2555 + {/* {lightboxIndex !== null && ( 2053 2556 <Lightbox 2054 2557 images={lightboxImages} 2055 2558 index={lightboxIndex} ··· 2057 2560 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2058 2561 post={postid} 2059 2562 /> 2060 2060 - )} 2563 2563 + )} */} 2061 2564 {/* Left: 1:1 */} 2062 2565 <div 2063 2566 style={{ flex: 1, aspectRatio: "1 / 1", position: "relative" }} ··· 2132 2635 //border: `1px solid ${theme.border}`, 2133 2636 //aspectRatio: "3 / 2", // overall grid aspect 2134 2637 }} 2135 2135 - className="border border-gray-200 dark:border-gray-700" 2638 2638 + className="border border-gray-200 dark:border-gray-800 was7" 2136 2639 > 2137 2137 - {lightboxIndex !== null && ( 2640 2640 + {/* {lightboxIndex !== null && ( 2138 2641 <Lightbox 2139 2642 images={lightboxImages} 2140 2643 index={lightboxIndex} ··· 2142 2645 onNavigate={(newIndex) => setLightboxIndex(newIndex)} 2143 2646 post={postid} 2144 2647 /> 2145 2145 - )} 2648 2648 + )} */} 2146 2649 {images.map((img, i) => ( 2147 2650 <div 2148 2651 key={i} ··· 2206 2709 // = 2207 2710 if (AppBskyEmbedVideo.isView(embed)) { 2208 2711 // hls playlist 2712 2712 + if (nopics) return; 2209 2713 const playlist = embed.playlist; 2210 2714 return ( 2211 2715 <SmartHLSPlayer ··· 2233 2737 return <div />; 2234 2738 } 2235 2739 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 2740 function getDomain(url: string) { 2350 2741 try { 2351 2742 const { hostname } = new URL(url); ··· 2410 2801 return { start, end, feature: f.features[0] }; 2411 2802 }); 2412 2803 } 2413 2413 - function renderTextWithFacets({ 2804 2804 + export function renderTextWithFacets({ 2414 2805 text, 2415 2806 facets, 2416 2807 navigate, ··· 2442 2833 className="link" 2443 2834 style={{ 2444 2835 textDecoration: "none", 2445 2445 - color: "rgb(29, 122, 242)", 2836 2836 + color: "var(--link-text-color)", 2446 2837 wordBreak: "break-all", 2447 2838 }} 2448 2839 target="_blank" ··· 2462 2853 result.push( 2463 2854 <span 2464 2855 key={start} 2465 2465 - style={{ color: "rgb(29, 122, 242)" }} 2856 2856 + style={{ color: "var(--link-text-color)" }} 2466 2857 className=" cursor-pointer" 2467 2858 onClick={(e) => { 2468 2859 e.stopPropagation(); ··· 2480 2871 result.push( 2481 2872 <span 2482 2873 key={start} 2483 2483 - style={{ color: "rgb(29, 122, 242)" }} 2874 2874 + style={{ color: "var(--link-text-color)" }} 2484 2875 onClick={(e) => { 2485 2876 e.stopPropagation(); 2486 2877 }} ··· 2573 2964 > 2574 2965 <div 2575 2966 style={containerStyle as React.CSSProperties} 2576 2576 - className="border border-gray-200 dark:border-gray-700" 2967 2967 + className="border border-gray-200 dark:border-gray-800 was7" 2577 2968 > 2578 2969 {thumb && ( 2579 2970 <div ··· 2587 2978 marginBottom: 8, 2588 2979 //borderBottom: `1px solid ${theme.border}`, 2589 2980 }} 2590 2590 - className="border-b border-gray-200 dark:border-gray-700" 2981 2981 + className="border-b border-gray-200 dark:border-gray-800 was7" 2591 2982 > 2592 2983 <img 2593 2984 src={thumb} ··· 2713 3104 borderRadius: 12, 2714 3105 //border: `1px solid ${theme.border}`, 2715 3106 }} 2716 2716 - className="border border-gray-200 dark:border-gray-700" 3107 3107 + className="border border-gray-200 dark:border-gray-800 was7" 2717 3108 onClick={async (e) => { 2718 3109 e.stopPropagation(); 2719 3110 setPlaying(true); ··· 2754 3145 100 / (aspect ? aspect.width / aspect.height : 16 / 9) 2755 3146 }%`, // 16:9 = 56.25%, 4:3 = 75% 2756 3147 }} 2757 2757 - className="border border-gray-200 dark:border-gray-700" 3148 3148 + className="border border-gray-200 dark:border-gray-800 was7" 2758 3149 > 2759 3150 <ReactPlayer 2760 3151 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 + }

+163

src/providers/LikeMutationQueueProvider.tsx

··· 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { TID } from "@atproto/common-web"; 3 3 + import { useQueryClient } from "@tanstack/react-query"; 4 4 + import { useAtom } from "jotai"; 5 5 + import React, { createContext, use, useCallback, useEffect, useRef } from "react"; 6 6 + 7 7 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 8 8 + import { renderSnack } from "~/routes/__root"; 9 9 + import { constellationURLAtom, internalLikedPostsAtom } from "~/utils/atoms"; 10 10 + import { constructArbitraryQuery, constructConstellationQuery, type linksRecordsResponse } from "~/utils/useQuery"; 11 11 + 12 12 + export type LikeRecord = { uri: string; target: string; cid: string }; 13 13 + export type LikeMutation = { type: 'like'; target: string; cid: string }; 14 14 + export type UnlikeMutation = { type: 'unlike'; likeRecordUri: string; target: string, originalRecord: LikeRecord }; 15 15 + export type Mutation = LikeMutation | UnlikeMutation; 16 16 + 17 17 + interface LikeMutationQueueContextType { 18 18 + fastState: (target: string) => LikeRecord | null | undefined; 19 19 + fastToggle: (target:string, cid:string) => void; 20 20 + backfillState: (target: string, user: string) => Promise<void>; 21 21 + } 22 22 + 23 23 + const LikeMutationQueueContext = createContext<LikeMutationQueueContextType | undefined>(undefined); 24 24 + 25 25 + export function LikeMutationQueueProvider({ children }: { children: React.ReactNode }) { 26 26 + const { agent } = useAuth(); 27 27 + const queryClient = useQueryClient(); 28 28 + const [likedPosts, setLikedPosts] = useAtom(internalLikedPostsAtom); 29 29 + const [constellationurl] = useAtom(constellationURLAtom); 30 30 + 31 31 + const likedPostsRef = useRef(likedPosts); 32 32 + useEffect(() => { 33 33 + likedPostsRef.current = likedPosts; 34 34 + }, [likedPosts]); 35 35 + 36 36 + const queueRef = useRef<Mutation[]>([]); 37 37 + const runningRef = useRef(false); 38 38 + 39 39 + const fastState = (target: string) => likedPosts[target]; 40 40 + 41 41 + const setFastState = useCallback( 42 42 + (target: string, record: LikeRecord | null) => 43 43 + setLikedPosts((prev) => ({ ...prev, [target]: record })), 44 44 + [setLikedPosts] 45 45 + ); 46 46 + 47 47 + const enqueue = (mutation: Mutation) => queueRef.current.push(mutation); 48 48 + 49 49 + const fastToggle = useCallback((target: string, cid: string) => { 50 50 + const likedRecord = likedPostsRef.current[target]; 51 51 + 52 52 + if (likedRecord) { 53 53 + setFastState(target, null); 54 54 + if (likedRecord.uri !== 'pending') { 55 55 + enqueue({ type: "unlike", likeRecordUri: likedRecord.uri, target, originalRecord: likedRecord }); 56 56 + } 57 57 + } else { 58 58 + setFastState(target, { uri: "pending", target, cid }); 59 59 + enqueue({ type: "like", target, cid }); 60 60 + } 61 61 + }, [setFastState]); 62 62 + 63 63 + /** 64 64 + * 65 65 + * @deprecated dont use it yet, will cause infinite rerenders 66 66 + */ 67 67 + const backfillState = async (target: string, user: string) => { 68 68 + const query = constructConstellationQuery({ 69 69 + constellation: constellationurl, 70 70 + method: "/links", 71 71 + target, 72 72 + collection: "app.bsky.feed.like", 73 73 + path: ".subject.uri", 74 74 + dids: [user], 75 75 + }); 76 76 + const data = await queryClient.fetchQuery(query); 77 77 + const likes = (data as linksRecordsResponse)?.linking_records?.slice(0, 50) ?? []; 78 78 + const found = likes.find((r) => r.did === user); 79 79 + if (found) { 80 80 + const uri = `at://${found.did}/${found.collection}/${found.rkey}`; 81 81 + const ciddata = await queryClient.fetchQuery( 82 82 + constructArbitraryQuery(uri) 83 83 + ); 84 84 + if (ciddata?.cid) 85 85 + setFastState(target, { uri, target, cid: ciddata?.cid }); 86 86 + } else { 87 87 + setFastState(target, null); 88 88 + } 89 89 + }; 90 90 + 91 91 + 92 92 + useEffect(() => { 93 93 + if (!agent?.did) return; 94 94 + 95 95 + const processQueue = async () => { 96 96 + if (runningRef.current || queueRef.current.length === 0) return; 97 97 + runningRef.current = true; 98 98 + 99 99 + while (queueRef.current.length > 0) { 100 100 + const mutation = queueRef.current.shift()!; 101 101 + try { 102 102 + if (mutation.type === "like") { 103 103 + const newRecord = { 104 104 + repo: agent.did!, 105 105 + collection: "app.bsky.feed.like", 106 106 + rkey: TID.next().toString(), 107 107 + record: { 108 108 + $type: "app.bsky.feed.like", 109 109 + subject: { uri: mutation.target, cid: mutation.cid }, 110 110 + createdAt: new Date().toISOString(), 111 111 + }, 112 112 + }; 113 113 + const response = await agent.com.atproto.repo.createRecord(newRecord); 114 114 + if (!response.success) throw new Error("createRecord failed"); 115 115 + 116 116 + const uri = `at://${agent.did}/${newRecord.collection}/${newRecord.rkey}`; 117 117 + setFastState(mutation.target, { 118 118 + uri, 119 119 + target: mutation.target, 120 120 + cid: mutation.cid, 121 121 + }); 122 122 + } else if (mutation.type === "unlike") { 123 123 + const aturi = new AtUri(mutation.likeRecordUri); 124 124 + await agent.com.atproto.repo.deleteRecord({ repo: agent.did!, collection: aturi.collection, rkey: aturi.rkey }); 125 125 + setFastState(mutation.target, null); 126 126 + } 127 127 + } catch (err) { 128 128 + console.error("Like mutation failed, reverting:", err); 129 129 + renderSnack({ 130 130 + title: 'Like Mutation Failed', 131 131 + description: 'Please try again.', 132 132 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 133 133 + }) 134 134 + if (mutation.type === 'like') { 135 135 + setFastState(mutation.target, null); 136 136 + } else if (mutation.type === 'unlike') { 137 137 + setFastState(mutation.target, mutation.originalRecord); 138 138 + } 139 139 + } 140 140 + } 141 141 + runningRef.current = false; 142 142 + }; 143 143 + 144 144 + const interval = setInterval(processQueue, 1000); 145 145 + return () => clearInterval(interval); 146 146 + }, [agent, setFastState]); 147 147 + 148 148 + const value = { fastState, fastToggle, backfillState }; 149 149 + 150 150 + return ( 151 151 + <LikeMutationQueueContext value={value}> 152 152 + {children} 153 153 + </LikeMutationQueueContext> 154 154 + ); 155 155 + } 156 156 + 157 157 + export function useLikeMutationQueue() { 158 158 + const context = use(LikeMutationQueueContext); 159 159 + if (context === undefined) { 160 160 + throw new Error('useLikeMutationQueue must be used within a LikeMutationQueueProvider'); 161 161 + } 162 162 + return context; 163 163 + }

+26 -23

src/providers/UnifiedAuthProvider.tsx

··· 1 1 - // src/providers/UnifiedAuthProvider.tsx 2 2 - // Import both Agent and the (soon to be deprecated) AtpAgent 3 1 import { Agent, AtpAgent, type AtpSessionData } from "@atproto/api"; 4 2 import { 5 3 type OAuthSession, ··· 7 5 TokenRefreshError, 8 6 TokenRevokedError, 9 7 } from "@atproto/oauth-client-browser"; 8 8 + import { useAtom } from "jotai"; 10 9 import React, { 11 10 createContext, 12 11 use, ··· 15 14 useState, 16 15 } from "react"; 17 16 18 18 - import { oauthClient } from "../utils/oauthClient"; // Adjust path if needed 17 17 + import { quickAuthAtom } from "~/utils/atoms"; 18 18 + 19 19 + import { oauthClient } from "../utils/oauthClient"; 19 20 20 20 - // Define the unified status and authentication method 21 21 type AuthStatus = "loading" | "signedIn" | "signedOut"; 22 22 type AuthMethod = "password" | "oauth" | null; 23 23 24 24 interface AuthContextValue { 25 25 - agent: Agent | null; // The agent is typed as the base class `Agent` 25 25 + agent: Agent | null; 26 26 status: AuthStatus; 27 27 authMethod: AuthMethod; 28 28 loginWithPassword: ( ··· 41 41 }: { 42 42 children: React.ReactNode; 43 43 }) => { 44 44 - // The state is typed as the base class `Agent`, which accepts both `Agent` and `AtpAgent` instances. 45 44 const [agent, setAgent] = useState<Agent | null>(null); 46 45 const [status, setStatus] = useState<AuthStatus>("loading"); 47 46 const [authMethod, setAuthMethod] = useState<AuthMethod>(null); 48 47 const [oauthSession, setOauthSession] = useState<OAuthSession | null>(null); 48 48 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 49 49 50 50 - // Unified Initialization Logic 51 50 const initialize = useCallback(async () => { 52 52 - // --- 1. Try OAuth initialization first --- 53 51 try { 54 52 const oauthResult = await oauthClient.init(); 55 53 if (oauthResult) { 56 54 // /*mass comment*/ console.log("OAuth session restored."); 57 57 - const apiAgent = new Agent(oauthResult.session); // Standard Agent 55 55 + const apiAgent = new Agent(oauthResult.session); 58 56 setAgent(apiAgent); 59 57 setOauthSession(oauthResult.session); 60 58 setAuthMethod("oauth"); 61 59 setStatus("signedIn"); 62 62 - return; // Success 60 60 + setQuickAuth(apiAgent?.did || null); 61 61 + return; 63 62 } 64 63 } catch (e) { 65 64 console.error("OAuth init failed, checking password session.", e); 65 65 + if (!quickAuth) { 66 66 + // quickAuth restoration. if last used method is oauth we immediately call for oauth redo 67 67 + // (and set a persistent atom somewhere to not retry again if it failed) 68 68 + } 66 69 } 67 70 68 68 - // --- 2. If no OAuth, try password-based session using AtpAgent --- 69 71 try { 70 72 const service = localStorage.getItem("service"); 71 73 const sessionString = localStorage.getItem("sess"); 72 74 73 75 if (service && sessionString) { 74 76 // /*mass comment*/ console.log("Resuming password-based session using AtpAgent..."); 75 75 - // Use the original, working AtpAgent logic 76 77 const apiAgent = new AtpAgent({ service }); 77 78 const session: AtpSessionData = JSON.parse(sessionString); 78 79 await apiAgent.resumeSession(session); 79 80 80 81 // /*mass comment*/ console.log("Password-based session resumed successfully."); 81 81 - setAgent(apiAgent); // This works because AtpAgent is a subclass of Agent 82 82 + setAgent(apiAgent); 82 83 setAuthMethod("password"); 83 84 setStatus("signedIn"); 84 84 - return; // Success 85 85 + setQuickAuth(apiAgent?.did || null); 86 86 + return; 85 87 } 86 88 } catch (e) { 87 89 console.error("Failed to resume password-based session.", e); ··· 89 91 localStorage.removeItem("service"); 90 92 } 91 93 92 92 - // --- 3. If neither worked, user is signed out --- 93 94 // /*mass comment*/ console.log("No active session found."); 94 95 setStatus("signedOut"); 95 96 setAgent(null); 96 97 setAuthMethod(null); 97 97 - }, []); 98 98 + // do we want to null it here? 99 99 + setQuickAuth(null); 100 100 + }, [quickAuth, setQuickAuth]); 98 101 99 102 useEffect(() => { 100 103 const handleOAuthSessionDeleted = ( ··· 105 108 setOauthSession(null); 106 109 setAuthMethod(null); 107 110 setStatus("signedOut"); 111 111 + setQuickAuth(null); 108 112 }; 109 113 110 114 oauthClient.addEventListener("deleted", handleOAuthSessionDeleted as EventListener); ··· 113 117 return () => { 114 118 oauthClient.removeEventListener("deleted", handleOAuthSessionDeleted as EventListener); 115 119 }; 116 116 - }, [initialize]); 120 120 + }, [initialize, setQuickAuth]); 117 121 118 118 - // --- Login Methods --- 119 122 const loginWithPassword = async ( 120 123 user: string, 121 124 password: string, ··· 125 128 setStatus("loading"); 126 129 try { 127 130 let sessionData: AtpSessionData | undefined; 128 128 - // Use the AtpAgent for its simple login and session persistence 129 131 const apiAgent = new AtpAgent({ 130 132 service, 131 133 persistSession: (_evt, sess) => { ··· 137 139 if (sessionData) { 138 140 localStorage.setItem("service", service); 139 141 localStorage.setItem("sess", JSON.stringify(sessionData)); 140 140 - setAgent(apiAgent); // Store the AtpAgent instance in our state 142 142 + setAgent(apiAgent); 141 143 setAuthMethod("password"); 142 144 setStatus("signedIn"); 145 145 + setQuickAuth(apiAgent?.did || null); 143 146 // /*mass comment*/ console.log("Successfully logged in with password."); 144 147 } else { 145 148 throw new Error("Session data not persisted after login."); ··· 147 150 } catch (e) { 148 151 console.error("Password login failed:", e); 149 152 setStatus("signedOut"); 153 153 + setQuickAuth(null); 150 154 throw e; 151 155 } 152 156 }; ··· 161 165 } 162 166 }, [status]); 163 167 164 164 - // --- Unified Logout --- 165 168 const logout = useCallback(async () => { 166 169 if (status !== "signedIn" || !agent) return; 167 170 setStatus("loading"); ··· 173 176 } else if (authMethod === "password") { 174 177 localStorage.removeItem("service"); 175 178 localStorage.removeItem("sess"); 176 176 - // AtpAgent has its own logout methods 177 179 await (agent as AtpAgent).com.atproto.server.deleteSession(); 178 180 // /*mass comment*/ console.log("Password-based session deleted."); 179 181 } ··· 184 186 setAuthMethod(null); 185 187 setOauthSession(null); 186 188 setStatus("signedOut"); 189 189 + setQuickAuth(null); 187 190 } 188 188 - }, [status, authMethod, agent, oauthSession]); 191 191 + }, [status, agent, authMethod, oauthSession, setQuickAuth]); 189 192 190 193 return ( 191 194 <AuthContext

+186 -5

src/routeTree.gen.ts

··· 12 12 import { Route as SettingsRouteImport } from './routes/settings' 13 13 import { Route as SearchRouteImport } from './routes/search' 14 14 import { Route as NotificationsRouteImport } from './routes/notifications' 15 15 + import { Route as ModerationRouteImport } from './routes/moderation' 15 16 import { Route as FeedsRouteImport } from './routes/feeds' 16 17 import { Route as PathlessLayoutRouteImport } from './routes/_pathlessLayout' 17 18 import { Route as IndexRouteImport } from './routes/index' 18 19 import { Route as CallbackIndexRouteImport } from './routes/callback/index' 19 20 import { Route as PathlessLayoutNestedLayoutRouteImport } from './routes/_pathlessLayout/_nested-layout' 20 21 import { Route as ProfileDidIndexRouteImport } from './routes/profile.$did/index' 22 22 + import { Route as ProfileDidFollowsRouteImport } from './routes/profile.$did/follows' 23 23 + import { Route as ProfileDidFollowersRouteImport } from './routes/profile.$did/followers' 21 24 import { Route as PathlessLayoutNestedLayoutRouteBRouteImport } from './routes/_pathlessLayout/_nested-layout/route-b' 22 25 import { Route as PathlessLayoutNestedLayoutRouteARouteImport } from './routes/_pathlessLayout/_nested-layout/route-a' 23 26 import { Route as ProfileDidPostRkeyRouteImport } from './routes/profile.$did/post.$rkey' 27 27 + import { Route as ProfileDidFeedRkeyRouteImport } from './routes/profile.$did/feed.$rkey' 28 28 + import { Route as ProfileDidPostRkeyRepostedByRouteImport } from './routes/profile.$did/post.$rkey.reposted-by' 29 29 + import { Route as ProfileDidPostRkeyQuotesRouteImport } from './routes/profile.$did/post.$rkey.quotes' 30 30 + import { Route as ProfileDidPostRkeyLikedByRouteImport } from './routes/profile.$did/post.$rkey.liked-by' 31 31 + import { Route as ProfileDidPostRkeyImageIRouteImport } from './routes/profile.$did/post.$rkey.image.$i' 24 32 25 33 const SettingsRoute = SettingsRouteImport.update({ 26 34 id: '/settings', ··· 37 45 path: '/notifications', 38 46 getParentRoute: () => rootRouteImport, 39 47 } as any) 48 48 + const ModerationRoute = ModerationRouteImport.update({ 49 49 + id: '/moderation', 50 50 + path: '/moderation', 51 51 + getParentRoute: () => rootRouteImport, 52 52 + } as any) 40 53 const FeedsRoute = FeedsRouteImport.update({ 41 54 id: '/feeds', 42 55 path: '/feeds', ··· 66 79 path: '/profile/$did/', 67 80 getParentRoute: () => rootRouteImport, 68 81 } as any) 82 82 + const ProfileDidFollowsRoute = ProfileDidFollowsRouteImport.update({ 83 83 + id: '/profile/$did/follows', 84 84 + path: '/profile/$did/follows', 85 85 + getParentRoute: () => rootRouteImport, 86 86 + } as any) 87 87 + const ProfileDidFollowersRoute = ProfileDidFollowersRouteImport.update({ 88 88 + id: '/profile/$did/followers', 89 89 + path: '/profile/$did/followers', 90 90 + getParentRoute: () => rootRouteImport, 91 91 + } as any) 69 92 const PathlessLayoutNestedLayoutRouteBRoute = 70 93 PathlessLayoutNestedLayoutRouteBRouteImport.update({ 71 94 id: '/route-b', ··· 83 106 path: '/profile/$did/post/$rkey', 84 107 getParentRoute: () => rootRouteImport, 85 108 } as any) 109 109 + const ProfileDidFeedRkeyRoute = ProfileDidFeedRkeyRouteImport.update({ 110 110 + id: '/profile/$did/feed/$rkey', 111 111 + path: '/profile/$did/feed/$rkey', 112 112 + getParentRoute: () => rootRouteImport, 113 113 + } as any) 114 114 + const ProfileDidPostRkeyRepostedByRoute = 115 115 + ProfileDidPostRkeyRepostedByRouteImport.update({ 116 116 + id: '/reposted-by', 117 117 + path: '/reposted-by', 118 118 + getParentRoute: () => ProfileDidPostRkeyRoute, 119 119 + } as any) 120 120 + const ProfileDidPostRkeyQuotesRoute = 121 121 + ProfileDidPostRkeyQuotesRouteImport.update({ 122 122 + id: '/quotes', 123 123 + path: '/quotes', 124 124 + getParentRoute: () => ProfileDidPostRkeyRoute, 125 125 + } as any) 126 126 + const ProfileDidPostRkeyLikedByRoute = 127 127 + ProfileDidPostRkeyLikedByRouteImport.update({ 128 128 + id: '/liked-by', 129 129 + path: '/liked-by', 130 130 + getParentRoute: () => ProfileDidPostRkeyRoute, 131 131 + } as any) 132 132 + const ProfileDidPostRkeyImageIRoute = 133 133 + ProfileDidPostRkeyImageIRouteImport.update({ 134 134 + id: '/image/$i', 135 135 + path: '/image/$i', 136 136 + getParentRoute: () => ProfileDidPostRkeyRoute, 137 137 + } as any) 86 138 87 139 export interface FileRoutesByFullPath { 88 140 '/': typeof IndexRoute 89 141 '/feeds': typeof FeedsRoute 142 142 + '/moderation': typeof ModerationRoute 90 143 '/notifications': typeof NotificationsRoute 91 144 '/search': typeof SearchRoute 92 145 '/settings': typeof SettingsRoute 93 146 '/callback': typeof CallbackIndexRoute 94 147 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 95 148 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 149 149 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 150 150 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 96 151 '/profile/$did': typeof ProfileDidIndexRoute 97 97 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 152 152 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 153 153 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 154 154 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 155 155 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 156 156 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 157 157 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 98 158 } 99 159 export interface FileRoutesByTo { 100 160 '/': typeof IndexRoute 101 161 '/feeds': typeof FeedsRoute 162 162 + '/moderation': typeof ModerationRoute 102 163 '/notifications': typeof NotificationsRoute 103 164 '/search': typeof SearchRoute 104 165 '/settings': typeof SettingsRoute 105 166 '/callback': typeof CallbackIndexRoute 106 167 '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 107 168 '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 169 169 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 170 170 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 108 171 '/profile/$did': typeof ProfileDidIndexRoute 109 109 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 172 172 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 173 173 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 174 174 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 175 175 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 176 176 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 177 177 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 110 178 } 111 179 export interface FileRoutesById { 112 180 __root__: typeof rootRouteImport 113 181 '/': typeof IndexRoute 114 182 '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren 115 183 '/feeds': typeof FeedsRoute 184 184 + '/moderation': typeof ModerationRoute 116 185 '/notifications': typeof NotificationsRoute 117 186 '/search': typeof SearchRoute 118 187 '/settings': typeof SettingsRoute ··· 120 189 '/callback/': typeof CallbackIndexRoute 121 190 '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute 122 191 '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute 192 192 + '/profile/$did/followers': typeof ProfileDidFollowersRoute 193 193 + '/profile/$did/follows': typeof ProfileDidFollowsRoute 123 194 '/profile/$did/': typeof ProfileDidIndexRoute 124 124 - '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRoute 195 195 + '/profile/$did/feed/$rkey': typeof ProfileDidFeedRkeyRoute 196 196 + '/profile/$did/post/$rkey': typeof ProfileDidPostRkeyRouteWithChildren 197 197 + '/profile/$did/post/$rkey/liked-by': typeof ProfileDidPostRkeyLikedByRoute 198 198 + '/profile/$did/post/$rkey/quotes': typeof ProfileDidPostRkeyQuotesRoute 199 199 + '/profile/$did/post/$rkey/reposted-by': typeof ProfileDidPostRkeyRepostedByRoute 200 200 + '/profile/$did/post/$rkey/image/$i': typeof ProfileDidPostRkeyImageIRoute 125 201 } 126 202 export interface FileRouteTypes { 127 203 fileRoutesByFullPath: FileRoutesByFullPath 128 204 fullPaths: 129 205 | '/' 130 206 | '/feeds' 207 207 + | '/moderation' 131 208 | '/notifications' 132 209 | '/search' 133 210 | '/settings' 134 211 | '/callback' 135 212 | '/route-a' 136 213 | '/route-b' 214 214 + | '/profile/$did/followers' 215 215 + | '/profile/$did/follows' 137 216 | '/profile/$did' 217 217 + | '/profile/$did/feed/$rkey' 138 218 | '/profile/$did/post/$rkey' 219 219 + | '/profile/$did/post/$rkey/liked-by' 220 220 + | '/profile/$did/post/$rkey/quotes' 221 221 + | '/profile/$did/post/$rkey/reposted-by' 222 222 + | '/profile/$did/post/$rkey/image/$i' 139 223 fileRoutesByTo: FileRoutesByTo 140 224 to: 141 225 | '/' 142 226 | '/feeds' 227 227 + | '/moderation' 143 228 | '/notifications' 144 229 | '/search' 145 230 | '/settings' 146 231 | '/callback' 147 232 | '/route-a' 148 233 | '/route-b' 234 234 + | '/profile/$did/followers' 235 235 + | '/profile/$did/follows' 149 236 | '/profile/$did' 237 237 + | '/profile/$did/feed/$rkey' 150 238 | '/profile/$did/post/$rkey' 239 239 + | '/profile/$did/post/$rkey/liked-by' 240 240 + | '/profile/$did/post/$rkey/quotes' 241 241 + | '/profile/$did/post/$rkey/reposted-by' 242 242 + | '/profile/$did/post/$rkey/image/$i' 151 243 id: 152 244 | '__root__' 153 245 | '/' 154 246 | '/_pathlessLayout' 155 247 | '/feeds' 248 248 + | '/moderation' 156 249 | '/notifications' 157 250 | '/search' 158 251 | '/settings' ··· 160 253 | '/callback/' 161 254 | '/_pathlessLayout/_nested-layout/route-a' 162 255 | '/_pathlessLayout/_nested-layout/route-b' 256 256 + | '/profile/$did/followers' 257 257 + | '/profile/$did/follows' 163 258 | '/profile/$did/' 259 259 + | '/profile/$did/feed/$rkey' 164 260 | '/profile/$did/post/$rkey' 261 261 + | '/profile/$did/post/$rkey/liked-by' 262 262 + | '/profile/$did/post/$rkey/quotes' 263 263 + | '/profile/$did/post/$rkey/reposted-by' 264 264 + | '/profile/$did/post/$rkey/image/$i' 165 265 fileRoutesById: FileRoutesById 166 266 } 167 267 export interface RootRouteChildren { 168 268 IndexRoute: typeof IndexRoute 169 269 PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren 170 270 FeedsRoute: typeof FeedsRoute 271 271 + ModerationRoute: typeof ModerationRoute 171 272 NotificationsRoute: typeof NotificationsRoute 172 273 SearchRoute: typeof SearchRoute 173 274 SettingsRoute: typeof SettingsRoute 174 275 CallbackIndexRoute: typeof CallbackIndexRoute 276 276 + ProfileDidFollowersRoute: typeof ProfileDidFollowersRoute 277 277 + ProfileDidFollowsRoute: typeof ProfileDidFollowsRoute 175 278 ProfileDidIndexRoute: typeof ProfileDidIndexRoute 176 176 - ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRoute 279 279 + ProfileDidFeedRkeyRoute: typeof ProfileDidFeedRkeyRoute 280 280 + ProfileDidPostRkeyRoute: typeof ProfileDidPostRkeyRouteWithChildren 177 281 } 178 282 179 283 declare module '@tanstack/react-router' { ··· 197 301 path: '/notifications' 198 302 fullPath: '/notifications' 199 303 preLoaderRoute: typeof NotificationsRouteImport 304 304 + parentRoute: typeof rootRouteImport 305 305 + } 306 306 + '/moderation': { 307 307 + id: '/moderation' 308 308 + path: '/moderation' 309 309 + fullPath: '/moderation' 310 310 + preLoaderRoute: typeof ModerationRouteImport 200 311 parentRoute: typeof rootRouteImport 201 312 } 202 313 '/feeds': { ··· 241 352 preLoaderRoute: typeof ProfileDidIndexRouteImport 242 353 parentRoute: typeof rootRouteImport 243 354 } 355 355 + '/profile/$did/follows': { 356 356 + id: '/profile/$did/follows' 357 357 + path: '/profile/$did/follows' 358 358 + fullPath: '/profile/$did/follows' 359 359 + preLoaderRoute: typeof ProfileDidFollowsRouteImport 360 360 + parentRoute: typeof rootRouteImport 361 361 + } 362 362 + '/profile/$did/followers': { 363 363 + id: '/profile/$did/followers' 364 364 + path: '/profile/$did/followers' 365 365 + fullPath: '/profile/$did/followers' 366 366 + preLoaderRoute: typeof ProfileDidFollowersRouteImport 367 367 + parentRoute: typeof rootRouteImport 368 368 + } 244 369 '/_pathlessLayout/_nested-layout/route-b': { 245 370 id: '/_pathlessLayout/_nested-layout/route-b' 246 371 path: '/route-b' ··· 262 387 preLoaderRoute: typeof ProfileDidPostRkeyRouteImport 263 388 parentRoute: typeof rootRouteImport 264 389 } 390 390 + '/profile/$did/feed/$rkey': { 391 391 + id: '/profile/$did/feed/$rkey' 392 392 + path: '/profile/$did/feed/$rkey' 393 393 + fullPath: '/profile/$did/feed/$rkey' 394 394 + preLoaderRoute: typeof ProfileDidFeedRkeyRouteImport 395 395 + parentRoute: typeof rootRouteImport 396 396 + } 397 397 + '/profile/$did/post/$rkey/reposted-by': { 398 398 + id: '/profile/$did/post/$rkey/reposted-by' 399 399 + path: '/reposted-by' 400 400 + fullPath: '/profile/$did/post/$rkey/reposted-by' 401 401 + preLoaderRoute: typeof ProfileDidPostRkeyRepostedByRouteImport 402 402 + parentRoute: typeof ProfileDidPostRkeyRoute 403 403 + } 404 404 + '/profile/$did/post/$rkey/quotes': { 405 405 + id: '/profile/$did/post/$rkey/quotes' 406 406 + path: '/quotes' 407 407 + fullPath: '/profile/$did/post/$rkey/quotes' 408 408 + preLoaderRoute: typeof ProfileDidPostRkeyQuotesRouteImport 409 409 + parentRoute: typeof ProfileDidPostRkeyRoute 410 410 + } 411 411 + '/profile/$did/post/$rkey/liked-by': { 412 412 + id: '/profile/$did/post/$rkey/liked-by' 413 413 + path: '/liked-by' 414 414 + fullPath: '/profile/$did/post/$rkey/liked-by' 415 415 + preLoaderRoute: typeof ProfileDidPostRkeyLikedByRouteImport 416 416 + parentRoute: typeof ProfileDidPostRkeyRoute 417 417 + } 418 418 + '/profile/$did/post/$rkey/image/$i': { 419 419 + id: '/profile/$did/post/$rkey/image/$i' 420 420 + path: '/image/$i' 421 421 + fullPath: '/profile/$did/post/$rkey/image/$i' 422 422 + preLoaderRoute: typeof ProfileDidPostRkeyImageIRouteImport 423 423 + parentRoute: typeof ProfileDidPostRkeyRoute 424 424 + } 265 425 } 266 426 } 267 427 ··· 295 455 PathlessLayoutRouteChildren, 296 456 ) 297 457 458 458 + interface ProfileDidPostRkeyRouteChildren { 459 459 + ProfileDidPostRkeyLikedByRoute: typeof ProfileDidPostRkeyLikedByRoute 460 460 + ProfileDidPostRkeyQuotesRoute: typeof ProfileDidPostRkeyQuotesRoute 461 461 + ProfileDidPostRkeyRepostedByRoute: typeof ProfileDidPostRkeyRepostedByRoute 462 462 + ProfileDidPostRkeyImageIRoute: typeof ProfileDidPostRkeyImageIRoute 463 463 + } 464 464 + 465 465 + const ProfileDidPostRkeyRouteChildren: ProfileDidPostRkeyRouteChildren = { 466 466 + ProfileDidPostRkeyLikedByRoute: ProfileDidPostRkeyLikedByRoute, 467 467 + ProfileDidPostRkeyQuotesRoute: ProfileDidPostRkeyQuotesRoute, 468 468 + ProfileDidPostRkeyRepostedByRoute: ProfileDidPostRkeyRepostedByRoute, 469 469 + ProfileDidPostRkeyImageIRoute: ProfileDidPostRkeyImageIRoute, 470 470 + } 471 471 + 472 472 + const ProfileDidPostRkeyRouteWithChildren = 473 473 + ProfileDidPostRkeyRoute._addFileChildren(ProfileDidPostRkeyRouteChildren) 474 474 + 298 475 const rootRouteChildren: RootRouteChildren = { 299 476 IndexRoute: IndexRoute, 300 477 PathlessLayoutRoute: PathlessLayoutRouteWithChildren, 301 478 FeedsRoute: FeedsRoute, 479 479 + ModerationRoute: ModerationRoute, 302 480 NotificationsRoute: NotificationsRoute, 303 481 SearchRoute: SearchRoute, 304 482 SettingsRoute: SettingsRoute, 305 483 CallbackIndexRoute: CallbackIndexRoute, 484 484 + ProfileDidFollowersRoute: ProfileDidFollowersRoute, 485 485 + ProfileDidFollowsRoute: ProfileDidFollowsRoute, 306 486 ProfileDidIndexRoute: ProfileDidIndexRoute, 307 307 - ProfileDidPostRkeyRoute: ProfileDidPostRkeyRoute, 487 487 + ProfileDidFeedRkeyRoute: ProfileDidFeedRkeyRoute, 488 488 + ProfileDidPostRkeyRoute: ProfileDidPostRkeyRouteWithChildren, 308 489 } 309 490 export const routeTree = rootRouteImport 310 491 ._addFileChildren(rootRouteChildren)

+711 -204

src/routes/__root.tsx

··· 5 5 import type { QueryClient } from "@tanstack/react-query"; 6 6 import { 7 7 createRootRouteWithContext, 8 8 - Link, 8 8 + // Link, 9 9 // Outlet, 10 10 Scripts, 11 11 useLocation, 12 12 useNavigate, 13 13 } from "@tanstack/react-router"; 14 14 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; 15 15 - import { useState } from "react"; 15 15 + import { useAtom } from "jotai"; 16 16 import * as React from "react"; 17 17 + import { toast as sonnerToast } from "sonner"; 18 18 + import { Toaster } from "sonner"; 17 19 import { KeepAliveOutlet, KeepAliveProvider } from "tanstack-router-keepalive"; 18 20 21 21 + import { Composer } from "~/components/Composer"; 19 22 import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; 23 23 + import { Import } from "~/components/Import"; 20 24 import Login from "~/components/Login"; 21 25 import { NotFound } from "~/components/NotFound"; 26 26 + import { FluentEmojiHighContrastGlowingStar } from "~/components/Star"; 27 27 + import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider"; 22 28 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 29 29 + import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; 23 30 import { seo } from "~/utils/seo"; 24 31 25 32 export const Route = createRootRouteWithContext<{ ··· 75 82 function RootComponent() { 76 83 return ( 77 84 <UnifiedAuthProvider> 78 78 - <RootDocument> 79 79 - <KeepAliveProvider> 80 80 - <KeepAliveOutlet /> 81 81 - </KeepAliveProvider> 82 82 - </RootDocument> 85 85 + <LikeMutationQueueProvider> 86 86 + <RootDocument> 87 87 + <KeepAliveProvider> 88 88 + <AppToaster /> 89 89 + <KeepAliveOutlet /> 90 90 + </KeepAliveProvider> 91 91 + </RootDocument> 92 92 + </LikeMutationQueueProvider> 83 93 </UnifiedAuthProvider> 84 94 ); 85 95 } 86 96 97 97 + export function AppToaster() { 98 98 + return ( 99 99 + <Toaster 100 100 + position="bottom-center" 101 101 + toastOptions={{ 102 102 + duration: 4000, 103 103 + }} 104 104 + /> 105 105 + ); 106 106 + } 107 107 + 108 108 + export function renderSnack({ 109 109 + title, 110 110 + description, 111 111 + button, 112 112 + }: Omit<ToastProps, "id">) { 113 113 + return sonnerToast.custom((id) => ( 114 114 + <Snack 115 115 + id={id} 116 116 + title={title} 117 117 + description={description} 118 118 + button={ 119 119 + button?.label 120 120 + ? { 121 121 + label: button?.label, 122 122 + onClick: () => { 123 123 + button?.onClick?.(); 124 124 + }, 125 125 + } 126 126 + : undefined 127 127 + } 128 128 + /> 129 129 + )); 130 130 + } 131 131 + 132 132 + function Snack(props: ToastProps) { 133 133 + const { title, description, button, id } = props; 134 134 + 135 135 + return ( 136 136 + <div 137 137 + role="status" 138 138 + aria-live="polite" 139 139 + className=" 140 140 + w-full md:max-w-[520px] 141 141 + flex items-center justify-between 142 142 + rounded-md 143 143 + px-4 py-3 144 144 + shadow-sm 145 145 + dark:bg-gray-300 dark:text-gray-900 146 146 + bg-gray-700 text-gray-100 147 147 + ring-1 dark:ring-gray-200 ring-gray-800 148 148 + " 149 149 + > 150 150 + <div className="flex-1 min-w-0"> 151 151 + <p className="text-sm font-medium truncate">{title}</p> 152 152 + {description ? ( 153 153 + <p className="mt-1 text-sm dark:text-gray-600 text-gray-300 truncate"> 154 154 + {description} 155 155 + </p> 156 156 + ) : null} 157 157 + </div> 158 158 + 159 159 + {button ? ( 160 160 + <div className="ml-4 flex-shrink-0"> 161 161 + <button 162 162 + className=" 163 163 + text-sm font-medium 164 164 + px-3 py-1 rounded-md 165 165 + bg-gray-200 text-gray-900 166 166 + hover:bg-gray-300 167 167 + dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 168 168 + focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-700 169 169 + " 170 170 + onClick={() => { 171 171 + button.onClick(); 172 172 + sonnerToast.dismiss(id); 173 173 + }} 174 174 + > 175 175 + {button.label} 176 176 + </button> 177 177 + </div> 178 178 + ) : null} 179 179 + <button className=" ml-4" 180 180 + onClick={() => { 181 181 + sonnerToast.dismiss(id); 182 182 + }} 183 183 + > 184 184 + <IconMdiClose /> 185 185 + </button> 186 186 + </div> 187 187 + ); 188 188 + } 189 189 + 190 190 + /* Types */ 191 191 + interface ToastProps { 192 192 + id: string | number; 193 193 + title: string; 194 194 + description?: string; 195 195 + button?: { 196 196 + label: string; 197 197 + onClick: () => void; 198 198 + }; 199 199 + } 200 200 + 87 201 function RootDocument({ children }: { children: React.ReactNode }) { 202 202 + useAtomCssVar(hueAtom, "--tw-gray-hue"); 88 203 const location = useLocation(); 89 204 const navigate = useNavigate(); 90 205 const { agent } = useAuth(); ··· 95 210 agent && 96 211 (location.pathname === `/profile/${agent?.did}` || 97 212 location.pathname === `/profile/${encodeURIComponent(agent?.did ?? "")}`); 213 213 + const isSettings = location.pathname.startsWith("/settings"); 214 214 + const isSearch = location.pathname.startsWith("/search"); 215 215 + const isFeeds = location.pathname.startsWith("/feeds"); 216 216 + const isModeration = location.pathname.startsWith("/moderation"); 98 217 99 99 - const [postOpen, setPostOpen] = useState(false); 100 100 - const [postText, setPostText] = useState(""); 101 101 - const [posting, setPosting] = useState(false); 102 102 - const [postSuccess, setPostSuccess] = useState(false); 103 103 - const [postError, setPostError] = useState<string | null>(null); 218 218 + const locationEnum: 219 219 + | "feeds" 220 220 + | "search" 221 221 + | "settings" 222 222 + | "notifications" 223 223 + | "profile" 224 224 + | "moderation" 225 225 + | "home" = isFeeds 226 226 + ? "feeds" 227 227 + : isSearch 228 228 + ? "search" 229 229 + : isSettings 230 230 + ? "settings" 231 231 + : isNotifications 232 232 + ? "notifications" 233 233 + : isProfile 234 234 + ? "profile" 235 235 + : isModeration 236 236 + ? "moderation" 237 237 + : "home"; 104 238 105 105 - async function handlePost() { 106 106 - if (!agent) return; 107 107 - setPosting(true); 108 108 - setPostError(null); 109 109 - try { 110 110 - await agent.com.atproto.repo.createRecord({ 111 111 - collection: "app.bsky.feed.post", 112 112 - repo: agent.assertDid, 113 113 - record: { 114 114 - $type: "app.bsky.feed.post", 115 115 - text: postText, 116 116 - createdAt: new Date().toISOString(), 117 117 - }, 118 118 - }); 119 119 - setPostSuccess(true); 120 120 - setPostText(""); 121 121 - setTimeout(() => { 122 122 - setPostSuccess(false); 123 123 - setPostOpen(false); 124 124 - }, 1500); 125 125 - } catch (e: any) { 126 126 - setPostError(e?.message || "Failed to post"); 127 127 - } finally { 128 128 - setPosting(false); 129 129 - } 130 130 - } 239 239 + const [, setComposerPost] = useAtom(composerAtom); 131 240 132 241 return ( 133 242 <> 134 134 - {postOpen && ( 135 135 - <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> 136 136 - <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-full max-w-md relative"> 137 137 - <button 138 138 - className="absolute top-2 right-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" 139 139 - onClick={() => !posting && setPostOpen(false)} 140 140 - disabled={posting} 141 141 - aria-label="Close" 142 142 - > 143 143 - × 144 144 - </button> 145 145 - <h2 className="text-lg font-bold mb-2">Create Post</h2> 146 146 - {postSuccess ? ( 147 147 - <div className="flex flex-col items-center justify-center py-8"> 148 148 - <span className="text-green-500 text-4xl mb-2">✓</span> 149 149 - <span className="text-green-600">Posted!</span> 150 150 - </div> 151 151 - ) : ( 152 152 - <> 153 153 - <textarea 154 154 - className="w-full border rounded p-2 mb-2 dark:bg-gray-800 dark:border-gray-700" 155 155 - rows={4} 156 156 - placeholder="What's on your mind?" 157 157 - value={postText} 158 158 - onChange={(e) => setPostText(e.target.value)} 159 159 - disabled={posting} 160 160 - autoFocus 161 161 - /> 162 162 - {postError && ( 163 163 - <div className="text-red-500 text-sm mb-2">{postError}</div> 164 164 - )} 165 165 - <button 166 166 - className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50" 167 167 - onClick={handlePost} 168 168 - disabled={posting || !postText.trim()} 169 169 - > 170 170 - {posting ? "Posting..." : "Post"} 171 171 - </button> 172 172 - </> 173 173 - )} 174 174 - </div> 175 175 - </div> 176 176 - )} 243 243 + <Composer /> 177 244 178 245 <div className="min-h-screen flex justify-center bg-gray-50 dark:bg-gray-950"> 179 179 - <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-2 p-4 dark:border-gray-800 sticky top-0 self-start"> 246 246 + <nav className="hidden lg:flex h-screen w-[250px] flex-col gap-0 p-4 dark:border-gray-800 sticky top-0 self-start"> 180 247 <div className="flex items-center gap-3 mb-4"> 181 181 - <img src="/redstar.png" alt="Red Dwarf Logo" className="w-8 h-8" /> 248 248 + <FluentEmojiHighContrastGlowingStar 249 249 + className="h-8 w-8" 250 250 + style={{ 251 251 + color: 252 252 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 253 253 + }} 254 254 + /> 182 255 <span className="font-extrabold text-2xl tracking-tight text-gray-900 dark:text-gray-100"> 183 256 Red Dwarf{" "} 184 257 {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> ··· 186 259 </span> */} 187 260 </span> 188 261 </div> 189 189 - <Link 262 262 + <MaterialNavItem 263 263 + InactiveIcon={ 264 264 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 265 265 + } 266 266 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 267 267 + active={locationEnum === "home"} 268 268 + onClickCallbback={() => 269 269 + navigate({ 270 270 + to: "/", 271 271 + //params: { did: agent.assertDid }, 272 272 + }) 273 273 + } 274 274 + text="Home" 275 275 + /> 276 276 + 277 277 + <MaterialNavItem 278 278 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 279 279 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 280 280 + active={locationEnum === "search"} 281 281 + onClickCallbback={() => 282 282 + navigate({ 283 283 + to: "/search", 284 284 + //params: { did: agent.assertDid }, 285 285 + }) 286 286 + } 287 287 + text="Explore" 288 288 + /> 289 289 + <MaterialNavItem 290 290 + InactiveIcon={ 291 291 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 292 292 + } 293 293 + ActiveIcon={ 294 294 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 295 295 + } 296 296 + active={locationEnum === "notifications"} 297 297 + onClickCallbback={() => 298 298 + navigate({ 299 299 + to: "/notifications", 300 300 + //params: { did: agent.assertDid }, 301 301 + }) 302 302 + } 303 303 + text="Notifications" 304 304 + /> 305 305 + <MaterialNavItem 306 306 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 307 307 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 308 308 + active={locationEnum === "feeds"} 309 309 + onClickCallbback={() => 310 310 + navigate({ 311 311 + to: "/feeds", 312 312 + //params: { did: agent.assertDid }, 313 313 + }) 314 314 + } 315 315 + text="Feeds" 316 316 + /> 317 317 + <MaterialNavItem 318 318 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 319 319 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 320 320 + active={locationEnum === "moderation"} 321 321 + onClickCallbback={() => 322 322 + navigate({ 323 323 + to: "/moderation", 324 324 + //params: { did: agent.assertDid }, 325 325 + }) 326 326 + } 327 327 + text="Moderation" 328 328 + /> 329 329 + <MaterialNavItem 330 330 + InactiveIcon={ 331 331 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 332 332 + } 333 333 + ActiveIcon={ 334 334 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 335 335 + } 336 336 + active={locationEnum === "profile"} 337 337 + onClickCallbback={() => { 338 338 + if (authed && agent && agent.assertDid) { 339 339 + //window.location.href = `/profile/${agent.assertDid}`; 340 340 + navigate({ 341 341 + to: "/profile/$did", 342 342 + params: { did: agent.assertDid }, 343 343 + }); 344 344 + } 345 345 + }} 346 346 + text="Profile" 347 347 + /> 348 348 + <MaterialNavItem 349 349 + InactiveIcon={ 350 350 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 351 351 + } 352 352 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 353 353 + active={locationEnum === "settings"} 354 354 + onClickCallbback={() => 355 355 + navigate({ 356 356 + to: "/settings", 357 357 + //params: { did: agent.assertDid }, 358 358 + }) 359 359 + } 360 360 + text="Settings" 361 361 + /> 362 362 + <div className="flex flex-row items-center justify-center mt-3"> 363 363 + <MaterialPillButton 364 364 + InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 365 365 + ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 366 366 + //active={true} 367 367 + onClickCallbback={() => setComposerPost({ kind: "root" })} 368 368 + text="Post" 369 369 + /> 370 370 + </div> 371 371 + {/* <Link 190 372 to="/" 191 373 className={ 192 374 `py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-900 text-xl flex items-center gap-3 ` + ··· 260 442 <IconMaterialSymbolsAccountCircleOutline width={28} height={28} /> 261 443 ) : ( 262 444 <IconMaterialSymbolsAccountCircle width={28} height={28} /> 263 263 - ) 264 264 - } 445 445 + )} 265 446 <span>Profile</span> 266 447 </button> 267 448 <Link ··· 276 457 <IconMaterialSymbolsSettings width={28} height={28} /> 277 458 )} 278 459 <span>Settings</span> 279 279 - </Link> 280 280 - <button 460 460 + </Link> */} 461 461 + {/* <button 281 462 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" 282 463 onClick={() => setPostOpen(true)} 283 464 type="button" ··· 288 469 className="text-gray-600 dark:text-gray-400" 289 470 /> 290 471 <span>Post</span> 291 291 - </button> 472 472 + </button> */} 292 473 <div className="flex-1"></div> 293 474 <a 294 475 href="https://tangled.sh/@whey.party/red-dwarf" ··· 319 500 </div> 320 501 </nav> 321 502 322 322 - <button 323 323 - 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" 324 324 - style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 325 325 - onClick={() => setPostOpen(true)} 326 326 - type="button" 327 327 - aria-label="Create Post" 328 328 - > 329 329 - <IconMdiPencilOutline 330 330 - width={24} 331 331 - height={24} 332 332 - className="text-gray-600 dark:text-gray-400" 503 503 + <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"> 504 504 + <div className="flex items-center gap-3 mb-4"> 505 505 + <FluentEmojiHighContrastGlowingStar 506 506 + className="h-8 w-8" 507 507 + style={{ 508 508 + color: 509 509 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 510 510 + }} 511 511 + /> 512 512 + </div> 513 513 + <MaterialNavItem 514 514 + small 515 515 + InactiveIcon={ 516 516 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 517 517 + } 518 518 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 519 519 + active={locationEnum === "home"} 520 520 + onClickCallbback={() => 521 521 + navigate({ 522 522 + to: "/", 523 523 + //params: { did: agent.assertDid }, 524 524 + }) 525 525 + } 526 526 + text="Home" 333 527 /> 334 334 - </button> 335 528 336 336 - <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"> 337 337 - <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"> 338 338 - <div className="flex items-center gap-2"> 339 339 - <img 340 340 - src="/redstar.png" 341 341 - alt="Red Dwarf Logo" 342 342 - className="w-6 h-6" 343 343 - /> 344 344 - <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 345 345 - Red Dwarf{" "} 346 346 - {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> 347 347 - lite 348 348 - </span> */} 349 349 - </span> 350 350 - </div> 351 351 - <div className="flex items-center gap-2"> 352 352 - <Login compact={true} /> 353 353 - </div> 529 529 + <MaterialNavItem 530 530 + small 531 531 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 532 532 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 533 533 + active={locationEnum === "search"} 534 534 + onClickCallbback={() => 535 535 + navigate({ 536 536 + to: "/search", 537 537 + //params: { did: agent.assertDid }, 538 538 + }) 539 539 + } 540 540 + text="Explore" 541 541 + /> 542 542 + <MaterialNavItem 543 543 + small 544 544 + InactiveIcon={ 545 545 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 546 546 + } 547 547 + ActiveIcon={ 548 548 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 549 549 + } 550 550 + active={locationEnum === "notifications"} 551 551 + onClickCallbback={() => 552 552 + navigate({ 553 553 + to: "/notifications", 554 554 + //params: { did: agent.assertDid }, 555 555 + }) 556 556 + } 557 557 + text="Notifications" 558 558 + /> 559 559 + <MaterialNavItem 560 560 + small 561 561 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 562 562 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 563 563 + active={locationEnum === "feeds"} 564 564 + onClickCallbback={() => 565 565 + navigate({ 566 566 + to: "/feeds", 567 567 + //params: { did: agent.assertDid }, 568 568 + }) 569 569 + } 570 570 + text="Feeds" 571 571 + /> 572 572 + <MaterialNavItem 573 573 + small 574 574 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 575 575 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 576 576 + active={locationEnum === "moderation"} 577 577 + onClickCallbback={() => 578 578 + navigate({ 579 579 + to: "/moderation", 580 580 + //params: { did: agent.assertDid }, 581 581 + }) 582 582 + } 583 583 + text="Moderation" 584 584 + /> 585 585 + <MaterialNavItem 586 586 + small 587 587 + InactiveIcon={ 588 588 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 589 589 + } 590 590 + ActiveIcon={ 591 591 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 592 592 + } 593 593 + active={locationEnum === "profile"} 594 594 + onClickCallbback={() => { 595 595 + if (authed && agent && agent.assertDid) { 596 596 + //window.location.href = `/profile/${agent.assertDid}`; 597 597 + navigate({ 598 598 + to: "/profile/$did", 599 599 + params: { did: agent.assertDid }, 600 600 + }); 601 601 + } 602 602 + }} 603 603 + text="Profile" 604 604 + /> 605 605 + <MaterialNavItem 606 606 + small 607 607 + InactiveIcon={ 608 608 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 609 609 + } 610 610 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 611 611 + active={locationEnum === "settings"} 612 612 + onClickCallbback={() => 613 613 + navigate({ 614 614 + to: "/settings", 615 615 + //params: { did: agent.assertDid }, 616 616 + }) 617 617 + } 618 618 + text="Settings" 619 619 + /> 620 620 + <div className="flex flex-row items-center justify-center mt-3"> 621 621 + <MaterialPillButton 622 622 + small 623 623 + InactiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 624 624 + ActiveIcon={<IconMdiPencilOutline className="w-6 h-6" />} 625 625 + //active={true} 626 626 + onClickCallbback={() => setComposerPost({ kind: "root" })} 627 627 + text="Post" 628 628 + /> 354 629 </div> 630 630 + </nav> 355 631 632 632 + {agent?.did && ( 633 633 + <button 634 634 + 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" 635 635 + style={{ boxShadow: "0 4px 24px 0 rgba(0,0,0,0.12)" }} 636 636 + onClick={() => setComposerPost({ kind: "root" })} 637 637 + type="button" 638 638 + aria-label="Create Post" 639 639 + > 640 640 + <IconMdiPencilOutline 641 641 + width={24} 642 642 + height={24} 643 643 + className="text-gray-600 dark:text-gray-400" 644 644 + /> 645 645 + </button> 646 646 + )} 647 647 + 648 648 + <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"> 356 649 {children} 357 650 </main> 358 651 359 652 <aside className="hidden lg:flex h-screen w-[250px] sticky top-0 self-start flex-col"> 653 653 + <div className="px-4 pt-4"> 654 654 + <Import /> 655 655 + </div> 360 656 <Login /> 361 657 362 658 <div className="flex-1"></div> 363 659 <p className="text-xs text-gray-400 dark:text-gray-500 text-justify mx-4 mb-4"> 364 364 - Red Dwarf is a bluesky client that uses Constellation and direct PDS 365 365 - queries. Skylite would be a self-hosted bluesky "instance". Stay 366 366 - tuned for the release of Skylite. 660 660 + Red Dwarf is a Bluesky client that does not rely on any Bluesky API 661 661 + App Servers. Instead, it uses Microcosm to fetch records directly 662 662 + from each users' PDS (via Slingshot) and connect them using 663 663 + backlinks (via Constellation) 367 664 </p> 368 665 </aside> 369 666 </div> 370 667 371 371 - <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"> 372 372 - <div className="flex justify-around items-center py-2"> 373 373 - <Link 374 374 - to="/" 375 375 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 376 376 - isHome 377 377 - ? "text-gray-900 dark:text-gray-100" 378 378 - : "text-gray-600 dark:text-gray-400" 379 379 - }`} 380 380 - > 381 381 - {!isHome ? ( 382 382 - <IconMaterialSymbolsHomeOutline width={24} height={24} /> 383 383 - ) : ( 384 384 - <IconMaterialSymbolsHome width={24} height={24} /> 385 385 - )} 386 386 - <span className="text-xs mt-1">Home</span> 387 387 - </Link> 388 388 - <Link 389 389 - to="/search" 390 390 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 391 391 - location.pathname.startsWith("/search") 392 392 - ? "text-gray-900 dark:text-gray-100" 393 393 - : "text-gray-600 dark:text-gray-400" 394 394 - }`} 395 395 - > 396 396 - {!location.pathname.startsWith("/search") ? ( 397 397 - <IconMaterialSymbolsSearch width={24} height={24} /> 398 398 - ) : ( 399 399 - <IconMaterialSymbolsSearch width={24} height={24} /> 400 400 - )} 401 401 - <span className="text-xs mt-1">Search</span> 402 402 - </Link> 403 403 - <Link 404 404 - to="/notifications" 405 405 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 406 406 - isNotifications 407 407 - ? "text-gray-900 dark:text-gray-100" 408 408 - : "text-gray-600 dark:text-gray-400" 409 409 - }`} 410 410 - > 411 411 - {!isNotifications ? ( 412 412 - <IconMaterialSymbolsNotificationsOutline width={24} height={24} /> 413 413 - ) : ( 414 414 - <IconMaterialSymbolsNotifications width={24} height={24} /> 415 415 - )} 416 416 - <span className="text-xs mt-1">Notifications</span> 417 417 - </Link> 418 418 - <button 419 419 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 420 420 - isProfile 421 421 - ? "text-gray-900 dark:text-gray-100" 422 422 - : "text-gray-600 dark:text-gray-400" 423 423 - }`} 424 424 - onClick={() => { 425 425 - if (authed && agent && agent.assertDid) { 426 426 - //window.location.href = `/profile/${agent.assertDid}`; 668 668 + {agent?.did ? ( 669 669 + <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"> 670 670 + <div className="flex justify-around items-center p-2"> 671 671 + <MaterialNavItem 672 672 + small 673 673 + InactiveIcon={ 674 674 + <IconMaterialSymbolsHomeOutline className="w-6 h-6" /> 675 675 + } 676 676 + ActiveIcon={<IconMaterialSymbolsHome className="w-6 h-6" />} 677 677 + active={locationEnum === "home"} 678 678 + onClickCallbback={() => 679 679 + navigate({ 680 680 + to: "/", 681 681 + //params: { did: agent.assertDid }, 682 682 + }) 683 683 + } 684 684 + text="Home" 685 685 + /> 686 686 + {/* <Link 687 687 + to="/" 688 688 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 689 689 + isHome 690 690 + ? "text-gray-900 dark:text-gray-100" 691 691 + : "text-gray-600 dark:text-gray-400" 692 692 + }`} 693 693 + > 694 694 + {!isHome ? ( 695 695 + <IconMaterialSymbolsHomeOutline width={24} height={24} /> 696 696 + ) : ( 697 697 + <IconMaterialSymbolsHome width={24} height={24} /> 698 698 + )} 699 699 + <span className="text-xs mt-1">Home</span> 700 700 + </Link> */} 701 701 + <MaterialNavItem 702 702 + small 703 703 + InactiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 704 704 + ActiveIcon={<IconMaterialSymbolsSearch className="w-6 h-6" />} 705 705 + active={locationEnum === "search"} 706 706 + onClickCallbback={() => 707 707 + navigate({ 708 708 + to: "/search", 709 709 + //params: { did: agent.assertDid }, 710 710 + }) 711 711 + } 712 712 + text="Explore" 713 713 + /> 714 714 + {/* <Link 715 715 + to="/search" 716 716 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 717 717 + location.pathname.startsWith("/search") 718 718 + ? "text-gray-900 dark:text-gray-100" 719 719 + : "text-gray-600 dark:text-gray-400" 720 720 + }`} 721 721 + > 722 722 + {!location.pathname.startsWith("/search") ? ( 723 723 + <IconMaterialSymbolsSearch width={24} height={24} /> 724 724 + ) : ( 725 725 + <IconMaterialSymbolsSearch width={24} height={24} /> 726 726 + )} 727 727 + <span className="text-xs mt-1">Search</span> 728 728 + </Link> */} 729 729 + <MaterialNavItem 730 730 + small 731 731 + InactiveIcon={ 732 732 + <IconMaterialSymbolsNotificationsOutline className="w-6 h-6" /> 733 733 + } 734 734 + ActiveIcon={ 735 735 + <IconMaterialSymbolsNotifications className="w-6 h-6" /> 736 736 + } 737 737 + active={locationEnum === "notifications"} 738 738 + onClickCallbback={() => 739 739 + navigate({ 740 740 + to: "/notifications", 741 741 + //params: { did: agent.assertDid }, 742 742 + }) 743 743 + } 744 744 + text="Notifications" 745 745 + /> 746 746 + {/* <Link 747 747 + to="/notifications" 748 748 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 749 749 + isNotifications 750 750 + ? "text-gray-900 dark:text-gray-100" 751 751 + : "text-gray-600 dark:text-gray-400" 752 752 + }`} 753 753 + > 754 754 + {!isNotifications ? ( 755 755 + <IconMaterialSymbolsNotificationsOutline 756 756 + width={24} 757 757 + height={24} 758 758 + /> 759 759 + ) : ( 760 760 + <IconMaterialSymbolsNotifications width={24} height={24} /> 761 761 + )} 762 762 + <span className="text-xs mt-1">Notifications</span> 763 763 + </Link> */} 764 764 + <MaterialNavItem 765 765 + small 766 766 + InactiveIcon={ 767 767 + <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" /> 768 768 + } 769 769 + ActiveIcon={ 770 770 + <IconMaterialSymbolsAccountCircle className="w-6 h-6" /> 771 771 + } 772 772 + active={locationEnum === "profile"} 773 773 + onClickCallbback={() => { 774 774 + if (authed && agent && agent.assertDid) { 775 775 + //window.location.href = `/profile/${agent.assertDid}`; 776 776 + navigate({ 777 777 + to: "/profile/$did", 778 778 + params: { did: agent.assertDid }, 779 779 + }); 780 780 + } 781 781 + }} 782 782 + text="Profile" 783 783 + /> 784 784 + {/* <button 785 785 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 786 786 + isProfile 787 787 + ? "text-gray-900 dark:text-gray-100" 788 788 + : "text-gray-600 dark:text-gray-400" 789 789 + }`} 790 790 + onClick={() => { 791 791 + if (authed && agent && agent.assertDid) { 792 792 + //window.location.href = `/profile/${agent.assertDid}`; 793 793 + navigate({ 794 794 + to: "/profile/$did", 795 795 + params: { did: agent.assertDid }, 796 796 + }); 797 797 + } 798 798 + }} 799 799 + type="button" 800 800 + > 801 801 + <IconMaterialSymbolsAccountCircleOutline width={24} height={24} /> 802 802 + <span className="text-xs mt-1">Profile</span> 803 803 + </button> */} 804 804 + <MaterialNavItem 805 805 + small 806 806 + InactiveIcon={ 807 807 + <IconMaterialSymbolsSettingsOutline className="w-6 h-6" /> 808 808 + } 809 809 + ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />} 810 810 + active={locationEnum === "settings" || locationEnum === "feeds" || locationEnum === "moderation"} 811 811 + onClickCallbback={() => 427 812 navigate({ 428 428 - to: "/profile/$did", 429 429 - params: { did: agent.assertDid }, 430 430 - }); 813 813 + to: "/settings", 814 814 + //params: { did: agent.assertDid }, 815 815 + }) 431 816 } 432 432 - }} 433 433 - type="button" 434 434 - > 435 435 - <IconMaterialSymbolsAccountCircleOutline width={24} height={24} /> 436 436 - <span className="text-xs mt-1">Profile</span> 437 437 - </button> 438 438 - <Link 439 439 - to="/settings" 440 440 - className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 441 441 - location.pathname.startsWith("/settings") 442 442 - ? "text-gray-900 dark:text-gray-100" 443 443 - : "text-gray-600 dark:text-gray-400" 444 444 - }`} 445 445 - > 446 446 - {!location.pathname.startsWith("/settings") ? ( 447 447 - <IconMaterialSymbolsSettingsOutline width={24} height={24} /> 448 448 - ) : ( 449 449 - <IconMaterialSymbolsSettings width={24} height={24} /> 450 450 - )} 451 451 - <span className="text-xs mt-1">Settings</span> 452 452 - </Link> 817 817 + text="Settings" 818 818 + /> 819 819 + {/* <Link 820 820 + to="/settings" 821 821 + className={`flex flex-col items-center py-2 px-3 rounded-lg transition-colors flex-1 ${ 822 822 + location.pathname.startsWith("/settings") 823 823 + ? "text-gray-900 dark:text-gray-100" 824 824 + : "text-gray-600 dark:text-gray-400" 825 825 + }`} 826 826 + > 827 827 + {!location.pathname.startsWith("/settings") ? ( 828 828 + <IconMaterialSymbolsSettingsOutline width={24} height={24} /> 829 829 + ) : ( 830 830 + <IconMaterialSymbolsSettings width={24} height={24} /> 831 831 + )} 832 832 + <span className="text-xs mt-1">Settings</span> 833 833 + </Link> */} 834 834 + </div> 835 835 + </nav> 836 836 + ) : ( 837 837 + <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"> 838 838 + <div className="flex items-center gap-2"> 839 839 + <FluentEmojiHighContrastGlowingStar 840 840 + className="h-6 w-6" 841 841 + style={{ 842 842 + color: 843 843 + "oklch(0.6616 0.2249 calc(25.88 + (var(--safe-hue) - 28))", 844 844 + }} 845 845 + /> 846 846 + <span className="font-bold text-lg text-gray-900 dark:text-gray-100"> 847 847 + Red Dwarf{" "} 848 848 + {/* <span className="text-gray-500 dark:text-gray-400 text-sm"> 849 849 + lite 850 850 + </span> */} 851 851 + </span> 852 852 + </div> 853 853 + <div className="flex items-center gap-2"> 854 854 + <Login compact={true} popup={true} /> 855 855 + </div> 453 856 </div> 454 454 - </nav> 857 857 + )} 455 858 456 456 - <TanStackRouterDevtools position="bottom-right" /> 859 859 + <TanStackRouterDevtools position="bottom-left" /> 457 860 <Scripts /> 458 861 </> 459 862 ); 460 863 } 864 864 + 865 865 + export function MaterialNavItem({ 866 866 + InactiveIcon, 867 867 + ActiveIcon, 868 868 + text, 869 869 + active, 870 870 + onClickCallbback, 871 871 + small, 872 872 + }: { 873 873 + InactiveIcon: React.ReactElement; 874 874 + ActiveIcon: React.ReactElement; 875 875 + text: string; 876 876 + active: boolean; 877 877 + onClickCallbback: () => void; 878 878 + small?: boolean | string; 879 879 + }) { 880 880 + if (small) 881 881 + return ( 882 882 + <button 883 883 + className={`flex flex-col items-center rounded-lg transition-colors ${small} gap-1 ${ 884 884 + active 885 885 + ? "text-gray-900 dark:text-gray-100" 886 886 + : "text-gray-600 dark:text-gray-400" 887 887 + }`} 888 888 + onClick={() => { 889 889 + onClickCallbback(); 890 890 + }} 891 891 + > 892 892 + <div 893 893 + 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"}`} 894 894 + > 895 895 + {active ? ActiveIcon : InactiveIcon} 896 896 + </div> 897 897 + <span 898 898 + className={`text-[12.8px] text-roboto ${active ? "font-medium" : ""}`} 899 899 + > 900 900 + {text} 901 901 + </span> 902 902 + </button> 903 903 + ); 904 904 + 905 905 + return ( 906 906 + <button 907 907 + 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 ${ 908 908 + active 909 909 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-800 bg-gray-200 hover:dark:bg-gray-700" 910 910 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-900" 911 911 + }`} 912 912 + onClick={() => { 913 913 + onClickCallbback(); 914 914 + }} 915 915 + > 916 916 + <div className={`mr-4 ${active ? " " : " "}`}> 917 917 + {active ? ActiveIcon : InactiveIcon} 918 918 + </div> 919 919 + <span 920 920 + className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`} 921 921 + > 922 922 + {text} 923 923 + </span> 924 924 + </button> 925 925 + ); 926 926 + } 927 927 + 928 928 + function MaterialPillButton({ 929 929 + InactiveIcon, 930 930 + ActiveIcon, 931 931 + text, 932 932 + //active, 933 933 + onClickCallbback, 934 934 + small, 935 935 + }: { 936 936 + InactiveIcon: React.ReactElement; 937 937 + ActiveIcon: React.ReactElement; 938 938 + text: string; 939 939 + //active: boolean; 940 940 + onClickCallbback: () => void; 941 941 + small?: boolean | string; 942 942 + }) { 943 943 + const active = false; 944 944 + return ( 945 945 + <button 946 946 + 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 ${ 947 947 + active 948 948 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 949 949 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 950 950 + }`} 951 951 + onClick={() => { 952 952 + onClickCallbback(); 953 953 + }} 954 954 + > 955 955 + <div className={`${!small && "mr-2"} ${active ? " " : " "}`}> 956 956 + {active ? ActiveIcon : InactiveIcon} 957 957 + </div> 958 958 + {!small && ( 959 959 + <span 960 960 + className={`text-[17px] text-roboto ${active ? "font-medium" : ""}`} 961 961 + > 962 962 + {text} 963 963 + </span> 964 964 + )} 965 965 + </button> 966 966 + ); 967 967 + }

+18 -1

src/routes/feeds.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 + import { Header } from "~/components/Header"; 4 4 + 3 5 export const Route = createFileRoute("/feeds")({ 4 6 component: Feeds, 5 7 }); 6 8 7 9 export function Feeds() { 8 8 - return <div className="p-6">Feeds page (coming soon)</div>; 10 10 + return ( 11 11 + <div className=""> 12 12 + <Header 13 13 + title={`Feeds`} 14 14 + backButtonCallback={() => { 15 15 + if (window.history.length > 1) { 16 16 + window.history.back(); 17 17 + } else { 18 18 + window.location.assign("/"); 19 19 + } 20 20 + }} 21 21 + bottomBorderDisabled={true} 22 22 + /> 23 23 + Feeds page (coming soon) 24 24 + </div> 25 25 + ); 9 26 }

+95 -70

src/routes/index.tsx

··· 1 1 import { createFileRoute } from "@tanstack/react-router"; 2 2 import { useAtom } from "jotai"; 3 3 import * as React from "react"; 4 4 - import { useEffect, useLayoutEffect } from "react"; 4 4 + import { useLayoutEffect, useState } 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 9 - agentAtom, 10 10 - authedAtom, 11 10 feedScrollPositionsAtom, 11 11 + isAtTopAtom, 12 12 + quickAuthAtom, 12 13 selectedFeedUriAtom, 13 13 - store, 14 14 } from "~/utils/atoms"; 15 15 //import { usePersistentStore } from "~/providers/PersistentStoreProvider"; 16 16 import { ··· 105 105 } = useAuth(); 106 106 const authed = !!agent?.did; 107 107 108 108 - useEffect(() => { 109 109 - if (agent?.did) { 110 110 - store.set(authedAtom, true); 111 111 - } else { 112 112 - store.set(authedAtom, false); 113 113 - } 114 114 - }, [status, agent, authed]); 115 115 - useEffect(() => { 116 116 - if (agent) { 117 117 - // eslint-disable-next-line @typescript-eslint/ban-ts-comment 118 118 - // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 119 119 - store.set(agentAtom, agent); 120 120 - } else { 121 121 - store.set(agentAtom, null); 122 122 - } 123 123 - }, [status, agent, authed]); 108 108 + // i dont remember why this is even here 109 109 + // useEffect(() => { 110 110 + // if (agent?.did) { 111 111 + // store.set(authedAtom, true); 112 112 + // } else { 113 113 + // store.set(authedAtom, false); 114 114 + // } 115 115 + // }, [status, agent, authed]); 116 116 + // useEffect(() => { 117 117 + // if (agent) { 118 118 + // // eslint-disable-next-line @typescript-eslint/ban-ts-comment 119 119 + // // @ts-ignore is it just me or is the type really weird here it should be Agent not AtpAgent 120 120 + // store.set(agentAtom, agent); 121 121 + // } else { 122 122 + // store.set(agentAtom, null); 123 123 + // } 124 124 + // }, [status, agent, authed]); 124 125 125 126 //const { get, set } = usePersistentStore(); 126 127 // const [feed, setFeed] = React.useState<any[]>([]); ··· 160 161 161 162 // const savedFeeds = savedFeedsPref?.items || []; 162 163 163 163 - const identityresultmaybe = useQueryIdentity(agent?.did); 164 164 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 165 165 + const isAuthRestoring = quickAuth ? status === "loading" : false; 166 166 + 167 167 + const identityresultmaybe = useQueryIdentity(!isAuthRestoring ? agent?.did : undefined); 164 168 const identity = identityresultmaybe?.data; 165 169 166 170 const prefsresultmaybe = useQueryPreferences({ 167 167 - agent: agent ?? undefined, 168 168 - pdsUrl: identity?.pds, 171 171 + agent: !isAuthRestoring ? (agent ?? undefined) : undefined, 172 172 + pdsUrl: !isAuthRestoring ? (identity?.pds) : undefined, 169 173 }); 170 174 const prefs = prefsresultmaybe?.data; 171 175 ··· 176 180 return savedFeedsPref?.items || []; 177 181 }, [prefs]); 178 182 179 179 - const [persistentSelectedFeed, setPersistentSelectedFeed] = 180 180 - useAtom(selectedFeedUriAtom); // React.useState<string | null>(null); 181 181 - const [unauthedSelectedFeed, setUnauthedSelectedFeed] = React.useState( 182 182 - persistentSelectedFeed 183 183 - ); // React.useState<string | null>(null); 183 183 + const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom); 184 184 + const [unauthedSelectedFeed, setUnauthedSelectedFeed] = useState(persistentSelectedFeed); 184 185 const selectedFeed = agent?.did 185 186 ? persistentSelectedFeed 186 187 : unauthedSelectedFeed; ··· 304 305 }, [scrollPositions]); 305 306 306 307 useLayoutEffect(() => { 308 308 + if (isAuthRestoring) return; 307 309 const savedPosition = scrollPositions[selectedFeed ?? "null"] ?? 0; 308 310 309 311 window.scrollTo({ top: savedPosition, behavior: "instant" }); 310 312 // eslint-disable-next-line react-hooks/exhaustive-deps 311 311 - }, [selectedFeed]); 313 313 + }, [selectedFeed, isAuthRestoring]); 312 314 313 315 useLayoutEffect(() => { 314 314 - if (!selectedFeed) return; 316 316 + if (!selectedFeed || isAuthRestoring) return; 315 317 316 318 const handleScroll = () => { 317 319 scrollPositionsRef.current = { ··· 326 328 327 329 setScrollPositions(scrollPositionsRef.current); 328 330 }; 329 329 - }, [selectedFeed, setScrollPositions]); 331 331 + }, [isAuthRestoring, selectedFeed, setScrollPositions]); 330 332 331 331 - const feedGengetrecordquery = useQueryArbitrary(selectedFeed ?? undefined); 332 332 - const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did; 333 333 + const feedGengetrecordquery = useQueryArbitrary(!isAuthRestoring ? selectedFeed ?? undefined : undefined); 334 334 + const feedServiceDid = !isAuthRestoring ? (feedGengetrecordquery?.data?.value as any)?.did as string | undefined : undefined; 333 335 334 336 // const { 335 337 // data: feedData, ··· 345 347 346 348 // const feed = feedData?.feed || []; 347 349 348 348 - const isReadyForAuthedFeed = 349 349 - authed && agent && identity?.pds && feedServiceDid; 350 350 - const isReadyForUnauthedFeed = !authed && selectedFeed; 350 350 + const isReadyForAuthedFeed = !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid; 351 351 + const isReadyForUnauthedFeed = !isAuthRestoring && !authed && selectedFeed; 352 352 + 353 353 + 354 354 + const [isAtTop] = useAtom(isAtTopAtom); 351 355 352 356 return ( 353 357 <div 354 358 className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"}`} 355 359 > 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) => { 359 359 - const label = item.value.split("/").pop() || item.value; 360 360 - const isActive = selectedFeed === item.value; 361 361 - return ( 362 362 - <button 363 363 - key={item.value || idx} 364 364 - className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 365 365 - 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" 370 370 - }`} 371 371 - onClick={() => setSelectedFeed(item.value)} 372 372 - title={item.value} 373 373 - > 374 374 - {label} 375 375 - {item.pinned && ( 376 376 - <span className="ml-1 text-xs text-gray-700 dark:text-gray-200"> 377 377 - ★ 378 378 - </span> 379 379 - )} 380 380 - </button> 381 381 - ); 382 382 - }) 383 383 - ) : ( 384 384 - <span className="text-xl font-bold ml-2">Home</span> 385 385 - )} 386 386 - </div> 360 360 + {!isAuthRestoring && savedFeeds.length > 0 ? ( 361 361 + <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`}> 362 362 + {savedFeeds.map((item: any, idx: number) => {return <FeedTabOnTop key={item} item={item} idx={idx} />})} 363 363 + </div> 364 364 + ) : ( 365 365 + // <span className="text-xl font-bold ml-2">Home</span> 366 366 + <Header title="Home" /> 367 367 + )} 387 368 {/* {isFeedLoading && <div className="p-4 text-gray-500">Loading...</div>} 388 369 {feedError && <div className="p-4 text-red-500">{feedError.message}</div>} 389 370 {!isFeedLoading && !feedError && feed.length === 0 && ( ··· 396 377 /> 397 378 ))} */} 398 379 399 399 - {authed && (!identity?.pds || !feedServiceDid) && ( 380 380 + {isAuthRestoring || authed && (!identity?.pds || !feedServiceDid) && ( 400 381 <div className="p-4 text-center text-gray-500"> 401 382 Preparing your feed... 402 383 </div> 403 384 )} 404 385 405 405 - {isReadyForAuthedFeed || isReadyForUnauthedFeed ? ( 386 386 + {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? ( 406 387 <InfiniteCustomFeed 388 388 + key={selectedFeed!} 407 389 feedUri={selectedFeed!} 408 390 pdsUrl={identity?.pds} 409 391 feedServiceDid={feedServiceDid} 410 392 /> 411 393 ) : ( 412 394 <div className="p-4 text-center text-gray-500"> 413 413 - Select a feed to get started. 395 395 + Loading....... 414 396 </div> 415 397 )} 416 398 {/* {false && restoringScrollPosition && ( ··· 421 403 </div> 422 404 ); 423 405 } 406 406 + 407 407 + 408 408 + // todo please use types this is dangerous very dangerous. 409 409 + // todo fix this whenever proper preferences is handled 410 410 + function FeedTabOnTop({item, idx}:{item: any, idx: number}) { 411 411 + const [persistentSelectedFeed, setPersistentSelectedFeed] = useAtom(selectedFeedUriAtom); 412 412 + const selectedFeed = persistentSelectedFeed 413 413 + const setSelectedFeed = setPersistentSelectedFeed 414 414 + const rkey = item.value.split("/").pop() || item.value; 415 415 + const isActive = selectedFeed === item.value; 416 416 + const { data: feedrecord } = useQueryArbitrary(item.value) 417 417 + const label = feedrecord?.value?.displayName || rkey 418 418 + return ( 419 419 + <button 420 420 + key={item.value || idx} 421 421 + className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${ 422 422 + isActive 423 423 + ? "text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:bg-gray-700 bg-gray-200 hover:dark:bg-gray-600" 424 424 + : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800" 425 425 + // ? "bg-gray-500 text-white" 426 426 + // : item.pinned 427 427 + // ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200" 428 428 + // : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200" 429 429 + }`} 430 430 + onClick={() => setSelectedFeed(item.value)} 431 431 + title={item.value} 432 432 + > 433 433 + {label} 434 434 + {item.pinned && ( 435 435 + <span 436 436 + className={`ml-1 text-xs ${ 437 437 + isActive 438 438 + ? "text-gray-900 dark:text-gray-100" 439 439 + : "text-gray-600 dark:text-gray-400" 440 440 + }`} 441 441 + > 442 442 + ★ 443 443 + </span> 444 444 + )} 445 445 + </button> 446 446 + ); 447 447 + } 448 448 + 424 449 // not even used lmaooo 425 450 426 451 // export async function cachedResolveDIDWEBDOC({

+269

src/routes/moderation.tsx

··· 1 1 + import * as ATPAPI from "@atproto/api"; 2 2 + import { 3 3 + isAdultContentPref, 4 4 + isBskyAppStatePref, 5 5 + isContentLabelPref, 6 6 + isFeedViewPref, 7 7 + isLabelersPref, 8 8 + isMutedWordsPref, 9 9 + isSavedFeedsPref, 10 10 + } from "@atproto/api/dist/client/types/app/bsky/actor/defs"; 11 11 + import { createFileRoute } from "@tanstack/react-router"; 12 12 + import { useAtom } from "jotai"; 13 13 + import { Switch } from "radix-ui"; 14 14 + 15 15 + import { Header } from "~/components/Header"; 16 16 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 17 17 + import { quickAuthAtom } from "~/utils/atoms"; 18 18 + import { useQueryIdentity, useQueryPreferences } from "~/utils/useQuery"; 19 19 + 20 20 + import { renderSnack } from "./__root"; 21 21 + import { NotificationItem } from "./notifications"; 22 22 + import { SettingHeading } from "./settings"; 23 23 + 24 24 + export const Route = createFileRoute("/moderation")({ 25 25 + component: RouteComponent, 26 26 + }); 27 27 + 28 28 + function RouteComponent() { 29 29 + const { agent } = useAuth(); 30 30 + 31 31 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 32 32 + const isAuthRestoring = quickAuth ? status === "loading" : false; 33 33 + 34 34 + const identityresultmaybe = useQueryIdentity( 35 35 + !isAuthRestoring ? agent?.did : undefined 36 36 + ); 37 37 + const identity = identityresultmaybe?.data; 38 38 + 39 39 + const prefsresultmaybe = useQueryPreferences({ 40 40 + agent: !isAuthRestoring ? (agent ?? undefined) : undefined, 41 41 + pdsUrl: !isAuthRestoring ? identity?.pds : undefined, 42 42 + }); 43 43 + const rawprefs = prefsresultmaybe?.data?.preferences as 44 44 + | ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"] 45 45 + | undefined; 46 46 + 47 47 + //console.log(JSON.stringify(prefs, null, 2)) 48 48 + 49 49 + const parsedPref = parsePreferences(rawprefs); 50 50 + 51 51 + return ( 52 52 + <div> 53 53 + <Header 54 54 + title={`Moderation`} 55 55 + backButtonCallback={() => { 56 56 + if (window.history.length > 1) { 57 57 + window.history.back(); 58 58 + } else { 59 59 + window.location.assign("/"); 60 60 + } 61 61 + }} 62 62 + bottomBorderDisabled={true} 63 63 + /> 64 64 + {/* <SettingHeading title="Moderation Tools" /> 65 65 + <p> 66 66 + todo: add all these: 67 67 + <br /> 68 68 + - Interaction settings 69 69 + <br /> 70 70 + - Muted words & tags 71 71 + <br /> 72 72 + - Moderation lists 73 73 + <br /> 74 74 + - Muted accounts 75 75 + <br /> 76 76 + - Blocked accounts 77 77 + <br /> 78 78 + - Verification settings 79 79 + <br /> 80 80 + </p> */} 81 81 + <SettingHeading title="Content Filters" /> 82 82 + <div> 83 83 + <div className="flex items-center gap-4 px-4 py-2 border-b"> 84 84 + <label 85 85 + htmlFor={`switch-${"hardcoded"}`} 86 86 + className="flex flex-row flex-1" 87 87 + > 88 88 + <div className="flex flex-col"> 89 89 + <span className="text-md">{"Adult Content"}</span> 90 90 + <span className="text-sm text-gray-500 dark:text-gray-400"> 91 91 + {"Enable adult content"} 92 92 + </span> 93 93 + </div> 94 94 + </label> 95 95 + 96 96 + <Switch.Root 97 97 + id={`switch-${"hardcoded"}`} 98 98 + checked={parsedPref?.adultContentEnabled} 99 99 + onCheckedChange={(v) => { 100 100 + renderSnack({ 101 101 + title: "Sorry... Modifying preferences is not implemented yet", 102 102 + description: "You can use another app to change preferences", 103 103 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 104 104 + }); 105 105 + }} 106 106 + className="m3switch root" 107 107 + > 108 108 + <Switch.Thumb className="m3switch thumb " /> 109 109 + </Switch.Root> 110 110 + </div> 111 111 + <div className=""> 112 112 + {Object.entries(parsedPref?.contentLabelPrefs ?? {}).map( 113 113 + ([label, visibility]) => ( 114 114 + <div 115 115 + key={label} 116 116 + className="flex justify-between border-b py-2 px-4" 117 117 + > 118 118 + <label 119 119 + htmlFor={`switch-${"hardcoded"}`} 120 120 + className="flex flex-row flex-1" 121 121 + > 122 122 + <div className="flex flex-col"> 123 123 + <span className="text-md">{label}</span> 124 124 + <span className="text-sm text-gray-500 dark:text-gray-400"> 125 125 + {"uknown labeler"} 126 126 + </span> 127 127 + </div> 128 128 + </label> 129 129 + {/* <span className="text-md text-gray-500 dark:text-gray-400"> 130 130 + {visibility} 131 131 + </span> */} 132 132 + <TripleToggle 133 133 + value={visibility as "ignore" | "warn" | "hide"} 134 134 + /> 135 135 + </div> 136 136 + ) 137 137 + )} 138 138 + </div> 139 139 + </div> 140 140 + <SettingHeading title="Advanced" /> 141 141 + {parsedPref?.labelers.map((labeler) => { 142 142 + return ( 143 143 + <NotificationItem 144 144 + key={labeler} 145 145 + notification={labeler} 146 146 + labeler={true} 147 147 + /> 148 148 + ); 149 149 + })} 150 150 + </div> 151 151 + ); 152 152 + } 153 153 + 154 154 + export function TripleToggle({ 155 155 + value, 156 156 + onChange, 157 157 + }: { 158 158 + value: "ignore" | "warn" | "hide"; 159 159 + onChange?: (newValue: "ignore" | "warn" | "hide") => void; 160 160 + }) { 161 161 + const options: Array<"ignore" | "warn" | "hide"> = ["ignore", "warn", "hide"]; 162 162 + return ( 163 163 + <div className="flex rounded-full bg-gray-200 dark:bg-gray-800 p-1 text-sm"> 164 164 + {options.map((opt) => { 165 165 + const isActive = opt === value; 166 166 + return ( 167 167 + <button 168 168 + key={opt} 169 169 + onClick={() => { 170 170 + renderSnack({ 171 171 + title: "Sorry... Modifying preferences is not implemented yet", 172 172 + description: "You can use another app to change preferences", 173 173 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 174 174 + }); 175 175 + onChange?.(opt); 176 176 + }} 177 177 + className={`flex-1 px-3 py-1.5 rounded-full transition-colors ${ 178 178 + isActive 179 179 + ? "bg-gray-400 dark:bg-gray-600 text-white" 180 180 + : "text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700" 181 181 + }`} 182 182 + > 183 183 + {" "} 184 184 + {opt.charAt(0).toUpperCase() + opt.slice(1)} 185 185 + </button> 186 186 + ); 187 187 + })} 188 188 + </div> 189 189 + ); 190 190 + } 191 191 + 192 192 + type PrefItem = 193 193 + ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"][number]; 194 194 + 195 195 + export interface NormalizedPreferences { 196 196 + contentLabelPrefs: Record<string, string>; 197 197 + mutedWords: string[]; 198 198 + feedViewPrefs: Record<string, any>; 199 199 + labelers: string[]; 200 200 + adultContentEnabled: boolean; 201 201 + savedFeeds: { 202 202 + pinned: string[]; 203 203 + saved: string[]; 204 204 + }; 205 205 + nuxs: string[]; 206 206 + } 207 207 + 208 208 + export function parsePreferences( 209 209 + prefs?: PrefItem[] 210 210 + ): NormalizedPreferences | undefined { 211 211 + if (!prefs) return undefined; 212 212 + const normalized: NormalizedPreferences = { 213 213 + contentLabelPrefs: {}, 214 214 + mutedWords: [], 215 215 + feedViewPrefs: {}, 216 216 + labelers: [], 217 217 + adultContentEnabled: false, 218 218 + savedFeeds: { pinned: [], saved: [] }, 219 219 + nuxs: [], 220 220 + }; 221 221 + 222 222 + for (const pref of prefs) { 223 223 + switch (pref.$type) { 224 224 + case "app.bsky.actor.defs#contentLabelPref": 225 225 + if (!isContentLabelPref(pref)) break; 226 226 + normalized.contentLabelPrefs[pref.label] = pref.visibility; 227 227 + break; 228 228 + 229 229 + case "app.bsky.actor.defs#mutedWordsPref": 230 230 + if (!isMutedWordsPref(pref)) break; 231 231 + for (const item of pref.items ?? []) { 232 232 + normalized.mutedWords.push(item.value); 233 233 + } 234 234 + break; 235 235 + 236 236 + case "app.bsky.actor.defs#feedViewPref": 237 237 + if (!isFeedViewPref(pref)) break; 238 238 + normalized.feedViewPrefs[pref.feed] = pref; 239 239 + break; 240 240 + 241 241 + case "app.bsky.actor.defs#labelersPref": 242 242 + if (!isLabelersPref(pref)) break; 243 243 + normalized.labelers.push(...(pref.labelers?.map((l) => l.did) ?? [])); 244 244 + break; 245 245 + 246 246 + case "app.bsky.actor.defs#adultContentPref": 247 247 + if (!isAdultContentPref(pref)) break; 248 248 + normalized.adultContentEnabled = !!pref.enabled; 249 249 + break; 250 250 + 251 251 + case "app.bsky.actor.defs#savedFeedsPref": 252 252 + if (!isSavedFeedsPref(pref)) break; 253 253 + normalized.savedFeeds.pinned.push(...(pref.pinned ?? [])); 254 254 + normalized.savedFeeds.saved.push(...(pref.saved ?? [])); 255 255 + break; 256 256 + 257 257 + case "app.bsky.actor.defs#bskyAppStatePref": 258 258 + if (!isBskyAppStatePref(pref)) break; 259 259 + normalized.nuxs.push(...(pref.nuxs?.map((n) => n.id) ?? [])); 260 260 + break; 261 261 + 262 262 + default: 263 263 + // unknown pref type — just ignore for now 264 264 + break; 265 265 + } 266 266 + } 267 267 + 268 268 + return normalized; 269 269 + }

+644 -152

src/routes/notifications.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 2 2 - import React, { useEffect, useRef,useState } from "react"; 1 1 + import { AtUri } from "@atproto/api"; 2 2 + import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query"; 3 3 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import * as React from "react"; 3 6 7 7 + import defaultpfp from "~/../public/favicon.png"; 8 8 + import { Header } from "~/components/Header"; 9 9 + import { 10 10 + ReusableTabRoute, 11 11 + useReusableTabScrollRestore, 12 12 + } from "~/components/ReusableTabRoute"; 13 13 + import { 14 14 + MdiCardsHeartOutline, 15 15 + MdiCommentOutline, 16 16 + MdiRepeat, 17 17 + UniversalPostRendererATURILoader, 18 18 + } from "~/components/UniversalPostRenderer"; 4 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 20 20 + import { 21 21 + constellationURLAtom, 22 22 + enableBitesAtom, 23 23 + imgCDNAtom, 24 24 + postInteractionsFiltersAtom, 25 25 + } from "~/utils/atoms"; 26 26 + import { 27 27 + useInfiniteQueryAuthorFeed, 28 28 + useQueryConstellation, 29 29 + useQueryIdentity, 30 30 + useQueryProfile, 31 31 + yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks, 32 32 + } from "~/utils/useQuery"; 5 33 6 6 - const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour 34 34 + import { FollowButton, Mutual } from "./profile.$did"; 35 35 + 36 36 + export function NotificationsComponent() { 37 37 + return ( 38 38 + <div className=""> 39 39 + <Header 40 40 + title={`Notifications`} 41 41 + backButtonCallback={() => { 42 42 + if (window.history.length > 1) { 43 43 + window.history.back(); 44 44 + } else { 45 45 + window.location.assign("/"); 46 46 + } 47 47 + }} 48 48 + bottomBorderDisabled={true} 49 49 + /> 50 50 + <NotificationsTabs /> 51 51 + </div> 52 52 + ); 53 53 + } 7 54 8 55 export const Route = createFileRoute("/notifications")({ 9 56 component: NotificationsComponent, 10 57 }); 11 58 12 12 - function NotificationsComponent() { 13 13 - // /*mass comment*/ console.log("NotificationsComponent render"); 14 14 - const { agent, status } = useAuth(); 15 15 - const authed = !!agent?.did; 16 16 - const authLoading = status === "loading"; 17 17 - const [did, setDid] = useState<string | null>(null); 18 18 - const [resolving, setResolving] = useState(false); 19 19 - const [error, setError] = useState<string | null>(null); 20 20 - const [responses, setResponses] = useState<any[]>([null, null, null]); 21 21 - const [loading, setLoading] = useState(false); 22 22 - const inputRef = useRef<HTMLInputElement>(null); 59 59 + export default function NotificationsTabs() { 60 60 + const [bitesEnabled] = useAtom(enableBitesAtom); 61 61 + return ( 62 62 + <ReusableTabRoute 63 63 + route={`Notifications`} 64 64 + tabs={{ 65 65 + Mentions: <MentionsTab />, 66 66 + Follows: <FollowsTab />, 67 67 + "Post Interactions": <PostInteractionsTab />, 68 68 + ...bitesEnabled ? { 69 69 + Bites: <BitesTab />, 70 70 + } : {} 71 71 + }} 72 72 + /> 73 73 + ); 74 74 + } 75 75 + 76 76 + function MentionsTab() { 77 77 + const { agent } = useAuth(); 78 78 + const [constellationurl] = useAtom(constellationURLAtom); 79 79 + const infinitequeryresults = useInfiniteQuery({ 80 80 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 81 81 + { 82 82 + constellation: constellationurl, 83 83 + method: "/links", 84 84 + target: agent?.did, 85 85 + collection: "app.bsky.feed.post", 86 86 + path: ".facets[app.bsky.richtext.facet].features[app.bsky.richtext.facet#mention].did", 87 87 + } 88 88 + ), 89 89 + enabled: !!agent?.did, 90 90 + }); 91 91 + 92 92 + const { 93 93 + data: infiniteMentionsData, 94 94 + fetchNextPage, 95 95 + hasNextPage, 96 96 + isFetchingNextPage, 97 97 + isLoading, 98 98 + isError, 99 99 + error, 100 100 + } = infinitequeryresults; 101 101 + 102 102 + const mentionsAturis = React.useMemo(() => { 103 103 + // Get all replies from the standard infinite query 104 104 + return ( 105 105 + infiniteMentionsData?.pages.flatMap( 106 106 + (page) => 107 107 + page?.linking_records.map( 108 108 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 109 109 + ) ?? [] 110 110 + ) ?? [] 111 111 + ); 112 112 + }, [infiniteMentionsData]); 23 113 24 24 - useEffect(() => { 25 25 - if (authLoading) return; 26 26 - if (authed && agent && agent.assertDid) { 27 27 - setDid(agent.assertDid); 28 28 - } 29 29 - }, [authed, agent, authLoading]); 114 114 + useReusableTabScrollRestore("Notifications"); 30 115 31 31 - async function handleSubmit() { 32 32 - // /*mass comment*/ console.log("handleSubmit called"); 33 33 - setError(null); 34 34 - setResponses([null, null, null]); 35 35 - const value = inputRef.current?.value?.trim() || ""; 36 36 - if (!value) return; 37 37 - if (value.startsWith("did:")) { 38 38 - setDid(value); 39 39 - setError(null); 40 40 - return; 41 41 - } 42 42 - setResolving(true); 43 43 - const cacheKey = `handleDid:${value}`; 44 44 - const now = Date.now(); 45 45 - const cached = undefined // await get(cacheKey); 46 46 - // if ( 47 47 - // cached && 48 48 - // cached.value && 49 49 - // cached.time && 50 50 - // now - cached.time < HANDLE_DID_CACHE_TIMEOUT 51 51 - // ) { 52 52 - // try { 53 53 - // const data = JSON.parse(cached.value); 54 54 - // setDid(data.did); 55 55 - // setResolving(false); 56 56 - // return; 57 57 - // } catch {} 58 58 - // } 59 59 - try { 60 60 - const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(value)}`; 61 61 - const res = await fetch(url); 62 62 - if (!res.ok) throw new Error("Failed to resolve handle"); 63 63 - const data = await res.json(); 64 64 - //set(cacheKey, JSON.stringify(data)); 65 65 - setDid(data.did); 66 66 - } catch (e: any) { 67 67 - setError("Failed to resolve handle: " + (e?.message || e)); 68 68 - } finally { 69 69 - setResolving(false); 70 70 - } 71 71 - } 116 116 + if (isLoading) return <LoadingState text="Loading mentions..." />; 117 117 + if (isError) return <ErrorState error={error} />; 118 118 + 119 119 + if (!mentionsAturis?.length) return <EmptyState text="No mentions yet." />; 120 120 + 121 121 + return ( 122 122 + <> 123 123 + {mentionsAturis.map((m) => ( 124 124 + <UniversalPostRendererATURILoader key={m} atUri={m} /> 125 125 + ))} 72 126 73 73 - useEffect(() => { 74 74 - if (!did) return; 75 75 - setLoading(true); 76 76 - setError(null); 77 77 - 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`, 81 81 - ]; 82 82 - let ignore = false; 83 83 - Promise.all( 84 84 - urls.map(async (url) => { 85 85 - try { 86 86 - const r = await fetch(url); 87 87 - if (!r.ok) throw new Error("Failed to fetch"); 88 88 - const text = await r.text(); 89 89 - if (!text) return null; 90 90 - try { 91 91 - return JSON.parse(text); 92 92 - } catch { 93 93 - return null; 127 127 + {hasNextPage && ( 128 128 + <button 129 129 + onClick={() => fetchNextPage()} 130 130 + disabled={isFetchingNextPage} 131 131 + 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" 132 132 + > 133 133 + {isFetchingNextPage ? "Loading..." : "Load More"} 134 134 + </button> 135 135 + )} 136 136 + </> 137 137 + ); 138 138 + } 139 139 + 140 140 + export function FollowsTab({did}:{did?:string}) { 141 141 + const { agent } = useAuth(); 142 142 + const userdidunsafe = did ?? agent?.did; 143 143 + const { data: identity} = useQueryIdentity(userdidunsafe); 144 144 + const userdid = identity?.did; 145 145 + 146 146 + const [constellationurl] = useAtom(constellationURLAtom); 147 147 + const infinitequeryresults = useInfiniteQuery({ 148 148 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 149 149 + { 150 150 + constellation: constellationurl, 151 151 + method: "/links", 152 152 + target: userdid, 153 153 + collection: "app.bsky.graph.follow", 154 154 + path: ".subject", 155 155 + } 156 156 + ), 157 157 + enabled: !!userdid, 158 158 + }); 159 159 + 160 160 + const { 161 161 + data: infiniteFollowsData, 162 162 + fetchNextPage, 163 163 + hasNextPage, 164 164 + isFetchingNextPage, 165 165 + isLoading, 166 166 + isError, 167 167 + error, 168 168 + } = infinitequeryresults; 169 169 + 170 170 + const followsAturis = React.useMemo(() => { 171 171 + // Get all replies from the standard infinite query 172 172 + return ( 173 173 + infiniteFollowsData?.pages.flatMap( 174 174 + (page) => 175 175 + page?.linking_records.map( 176 176 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 177 177 + ) ?? [] 178 178 + ) ?? [] 179 179 + ); 180 180 + }, [infiniteFollowsData]); 181 181 + 182 182 + useReusableTabScrollRestore("Notifications"); 183 183 + 184 184 + if (isLoading) return <LoadingState text="Loading follows..." />; 185 185 + if (isError) return <ErrorState error={error} />; 186 186 + 187 187 + if (!followsAturis?.length) return <EmptyState text="No follows yet." />; 188 188 + 189 189 + return ( 190 190 + <> 191 191 + {followsAturis.map((m) => ( 192 192 + <NotificationItem key={m} notification={m} /> 193 193 + ))} 194 194 + 195 195 + {hasNextPage && ( 196 196 + <button 197 197 + onClick={() => fetchNextPage()} 198 198 + disabled={isFetchingNextPage} 199 199 + 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" 200 200 + > 201 201 + {isFetchingNextPage ? "Loading..." : "Load More"} 202 202 + </button> 203 203 + )} 204 204 + </> 205 205 + ); 206 206 + } 207 207 + 208 208 + 209 209 + export function BitesTab({did}:{did?:string}) { 210 210 + const { agent } = useAuth(); 211 211 + const userdidunsafe = did ?? agent?.did; 212 212 + const { data: identity} = useQueryIdentity(userdidunsafe); 213 213 + const userdid = identity?.did; 214 214 + 215 215 + const [constellationurl] = useAtom(constellationURLAtom); 216 216 + const infinitequeryresults = useInfiniteQuery({ 217 217 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 218 218 + { 219 219 + constellation: constellationurl, 220 220 + method: "/links", 221 221 + target: "at://"+userdid, 222 222 + collection: "net.wafrn.feed.bite", 223 223 + path: ".subject", 224 224 + staleMult: 0 // safe fun 225 225 + } 226 226 + ), 227 227 + enabled: !!userdid, 228 228 + }); 229 229 + 230 230 + const { 231 231 + data: infiniteFollowsData, 232 232 + fetchNextPage, 233 233 + hasNextPage, 234 234 + isFetchingNextPage, 235 235 + isLoading, 236 236 + isError, 237 237 + error, 238 238 + } = infinitequeryresults; 239 239 + 240 240 + const followsAturis = React.useMemo(() => { 241 241 + // Get all replies from the standard infinite query 242 242 + return ( 243 243 + infiniteFollowsData?.pages.flatMap( 244 244 + (page) => 245 245 + page?.linking_records.map( 246 246 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 247 247 + ) ?? [] 248 248 + ) ?? [] 249 249 + ); 250 250 + }, [infiniteFollowsData]); 251 251 + 252 252 + useReusableTabScrollRestore("Notifications"); 253 253 + 254 254 + if (isLoading) return <LoadingState text="Loading bites..." />; 255 255 + if (isError) return <ErrorState error={error} />; 256 256 + 257 257 + if (!followsAturis?.length) return <EmptyState text="No bites yet." />; 258 258 + 259 259 + return ( 260 260 + <> 261 261 + {followsAturis.map((m) => ( 262 262 + <NotificationItem key={m} notification={m} /> 263 263 + ))} 264 264 + 265 265 + {hasNextPage && ( 266 266 + <button 267 267 + onClick={() => fetchNextPage()} 268 268 + disabled={isFetchingNextPage} 269 269 + 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" 270 270 + > 271 271 + {isFetchingNextPage ? "Loading..." : "Load More"} 272 272 + </button> 273 273 + )} 274 274 + </> 275 275 + ); 276 276 + } 277 277 + 278 278 + function PostInteractionsTab() { 279 279 + const { agent } = useAuth(); 280 280 + const { data: identity } = useQueryIdentity(agent?.did); 281 281 + const queryClient = useQueryClient(); 282 282 + const { 283 283 + data: postsData, 284 284 + fetchNextPage, 285 285 + hasNextPage, 286 286 + isFetchingNextPage, 287 287 + isLoading: arePostsLoading, 288 288 + } = useInfiniteQueryAuthorFeed(agent?.did, identity?.pds); 289 289 + 290 290 + React.useEffect(() => { 291 291 + if (postsData) { 292 292 + postsData.pages.forEach((page) => { 293 293 + page.records.forEach((record) => { 294 294 + if (!queryClient.getQueryData(["post", record.uri])) { 295 295 + queryClient.setQueryData(["post", record.uri], record); 94 296 } 95 95 - } catch (e: any) { 96 96 - return { error: e?.message || String(e) }; 97 97 - } 98 98 - }) 99 99 - ) 100 100 - .then((results) => { 101 101 - if (!ignore) setResponses(results); 102 102 - }) 103 103 - .catch((e) => { 104 104 - if (!ignore) 105 105 - setError("Failed to fetch notifications: " + (e?.message || e)); 106 106 - }) 107 107 - .finally(() => { 108 108 - if (!ignore) setLoading(false); 297 297 + }); 109 298 }); 110 110 - return () => { 111 111 - ignore = true; 112 112 - }; 113 113 - }, [did]); 299 299 + } 300 300 + }, [postsData, queryClient]); 301 301 + 302 302 + const posts = React.useMemo( 303 303 + () => postsData?.pages.flatMap((page) => page.records) ?? [], 304 304 + [postsData] 305 305 + ); 306 306 + 307 307 + useReusableTabScrollRestore("Notifications"); 308 308 + 309 309 + const [filters] = useAtom(postInteractionsFiltersAtom); 310 310 + const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts); 114 311 115 312 return ( 116 116 - <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800"> 117 117 - <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-800"> 118 118 - <span className="text-xl font-bold ml-2">Notifications</span> 119 119 - {!authed && ( 120 120 - <div className="flex items-center gap-2"> 121 121 - <input 122 122 - type="text" 123 123 - placeholder="Enter handle or DID" 124 124 - ref={inputRef} 125 125 - className="ml-4 px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100" 126 126 - style={{ minWidth: 220 }} 127 127 - disabled={resolving} 128 128 - /> 129 129 - <button 130 130 - type="button" 131 131 - className="px-3 py-1 rounded bg-blue-600 text-white font-semibold disabled:opacity-50" 132 132 - disabled={resolving} 133 133 - onClick={handleSubmit} 134 134 - > 135 135 - {resolving ? "Resolving..." : "Submit"} 136 136 - </button> 137 137 - </div> 138 138 - )} 313 313 + <> 314 314 + <PostInteractionsFilterChipBar /> 315 315 + {!empty && posts.map((m) => ( 316 316 + <PostInteractionsItem key={m.uri} uri={m.uri} /> 317 317 + ))} 318 318 + 319 319 + {hasNextPage && ( 320 320 + <button 321 321 + onClick={() => fetchNextPage()} 322 322 + disabled={isFetchingNextPage} 323 323 + 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" 324 324 + > 325 325 + {isFetchingNextPage ? "Loading..." : "Load More"} 326 326 + </button> 327 327 + )} 328 328 + </> 329 329 + ); 330 330 + } 331 331 + 332 332 + function PostInteractionsFilterChipBar() { 333 333 + const [filters, setFilters] = useAtom(postInteractionsFiltersAtom); 334 334 + // const empty = (!filters.likes && !filters.quotes && !filters.replies && !filters.reposts); 335 335 + 336 336 + // useEffect(() => { 337 337 + // if (empty) { 338 338 + // setFilters((prev) => ({ 339 339 + // ...prev, 340 340 + // likes: true, 341 341 + // })); 342 342 + // } 343 343 + // }, [ 344 344 + // empty, 345 345 + // setFilters, 346 346 + // ]); 347 347 + 348 348 + const toggle = (key: keyof typeof filters) => { 349 349 + setFilters((prev) => ({ 350 350 + ...prev, 351 351 + [key]: !prev[key], 352 352 + })); 353 353 + }; 354 354 + 355 355 + return ( 356 356 + <div className="flex flex-row flex-wrap gap-2 px-4 pt-4"> 357 357 + <Chip 358 358 + state={filters.likes} 359 359 + text="Likes" 360 360 + onClick={() => toggle("likes")} 361 361 + /> 362 362 + <Chip 363 363 + state={filters.reposts} 364 364 + text="Reposts" 365 365 + onClick={() => toggle("reposts")} 366 366 + /> 367 367 + <Chip 368 368 + state={filters.replies} 369 369 + text="Replies" 370 370 + onClick={() => toggle("replies")} 371 371 + /> 372 372 + <Chip 373 373 + state={filters.quotes} 374 374 + text="Quotes" 375 375 + onClick={() => toggle("quotes")} 376 376 + /> 377 377 + <Chip 378 378 + state={filters.showAll} 379 379 + text="Show All Metrics" 380 380 + onClick={() => toggle("showAll")} 381 381 + /> 382 382 + </div> 383 383 + ); 384 384 + } 385 385 + 386 386 + export function Chip({ 387 387 + state, 388 388 + text, 389 389 + onClick, 390 390 + }: { 391 391 + state: boolean; 392 392 + text: string; 393 393 + onClick: React.MouseEventHandler<HTMLButtonElement>; 394 394 + }) { 395 395 + return ( 396 396 + <button 397 397 + onClick={onClick} 398 398 + className={`relative inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-all 399 399 + ${ 400 400 + state 401 401 + ? "bg-primary/20 text-primary bg-gray-200 dark:bg-gray-800 border border-transparent" 402 402 + : "bg-surface-container-low text-on-surface-variant border border-outline" 403 403 + } 404 404 + hover:bg-primary/30 active:scale-[0.97] 405 405 + dark:border-outline-variant 406 406 + `} 407 407 + > 408 408 + {state && ( 409 409 + <IconMdiCheck 410 410 + className="mr-1.5 inline-block w-4 h-4 rounded-full bg-primary" 411 411 + aria-hidden 412 412 + /> 413 413 + )} 414 414 + {text} 415 415 + </button> 416 416 + ); 417 417 + } 418 418 + 419 419 + function PostInteractionsItem({ uri }: { uri: string }) { 420 420 + const [filters] = useAtom(postInteractionsFiltersAtom); 421 421 + const { data: links } = useQueryConstellation({ 422 422 + method: "/links/all", 423 423 + target: uri, 424 424 + }); 425 425 + 426 426 + const likes = 427 427 + links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0; 428 428 + const replies = 429 429 + links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]?.records || 0; 430 430 + const reposts = 431 431 + links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0; 432 432 + const quotes1 = 433 433 + links?.links?.["app.bsky.feed.post"]?.[".embed.record.uri"]?.records || 0; 434 434 + const quotes2 = 435 435 + links?.links?.["app.bsky.feed.post"]?.[".embed.record.record.uri"] 436 436 + ?.records || 0; 437 437 + const quotes = quotes1 + quotes2; 438 438 + 439 439 + const all = likes + replies + reposts + quotes; 440 440 + 441 441 + //const failLikes = filters.likes && likes < 1; 442 442 + //const failReposts = filters.reposts && reposts < 1; 443 443 + //const failReplies = filters.replies && replies < 1; 444 444 + //const failQuotes = filters.quotes && quotes < 1; 445 445 + 446 446 + const showLikes = filters.showAll || filters.likes 447 447 + const showReposts = filters.showAll || filters.reposts 448 448 + const showReplies = filters.showAll || filters.replies 449 449 + const showQuotes = filters.showAll || filters.quotes 450 450 + 451 451 + //const showNone = !showLikes && !showReposts && !showReplies && !showQuotes; 452 452 + 453 453 + //const fail = failLikes || failReposts || failReplies || failQuotes || showNone; 454 454 + 455 455 + const matchesLikes = filters.likes && likes > 0; 456 456 + const matchesReposts = filters.reposts && reposts > 0; 457 457 + const matchesReplies = filters.replies && replies > 0; 458 458 + const matchesQuotes = filters.quotes && quotes > 0; 459 459 + 460 460 + const matchesAnything = 461 461 + // filters.showAll || 462 462 + matchesLikes || 463 463 + matchesReposts || 464 464 + matchesReplies || 465 465 + matchesQuotes; 466 466 + 467 467 + if (!matchesAnything) return null; 468 468 + 469 469 + //if (fail) return; 470 470 + 471 471 + return ( 472 472 + <div className="flex flex-col"> 473 473 + {/* <span>fail likes {failLikes ? "true" : "false"}</span> 474 474 + <span>fail repost {failReposts ? "true" : "false"}</span> 475 475 + <span>fail reply {failReplies ? "true" : "false"}</span> 476 476 + <span>fail qupte {failQuotes ? "true" : "false"}</span> */} 477 477 + <div className="border rounded-xl mx-4 mt-4 overflow-hidden"> 478 478 + <UniversalPostRendererATURILoader 479 479 + isQuote 480 480 + key={uri} 481 481 + atUri={uri} 482 482 + nopics={true} 483 483 + concise={true} 484 484 + /> 485 485 + <div className="flex flex-col divide-x"> 486 486 + {showLikes &&(<InteractionsButton 487 487 + type={"like"} 488 488 + uri={uri} 489 489 + count={likes} 490 490 + />)} 491 491 + {showReposts && (<InteractionsButton 492 492 + type={"repost"} 493 493 + uri={uri} 494 494 + count={reposts} 495 495 + />)} 496 496 + {showReplies && (<InteractionsButton 497 497 + type={"reply"} 498 498 + uri={uri} 499 499 + count={replies} 500 500 + />)} 501 501 + {showQuotes && (<InteractionsButton 502 502 + type={"quote"} 503 503 + uri={uri} 504 504 + count={quotes} 505 505 + />)} 506 506 + {!all && ( 507 507 + <div className="text-center text-gray-500 dark:text-gray-400 pb-3 pt-2 border-t"> 508 508 + No interactions yet. 509 509 + </div> 510 510 + )} 511 511 + </div> 139 512 </div> 140 140 - {error && <div className="p-4 text-red-500">{error}</div>} 141 141 - {loading && ( 142 142 - <div className="p-4 text-gray-500">Loading notifications...</div> 513 513 + </div> 514 514 + ); 515 515 + } 516 516 + 517 517 + function InteractionsButton({ 518 518 + type, 519 519 + uri, 520 520 + count, 521 521 + }: { 522 522 + type: "reply" | "repost" | "like" | "quote"; 523 523 + uri: string; 524 524 + count: number; 525 525 + }) { 526 526 + if (!count) return <></>; 527 527 + const aturi = new AtUri(uri); 528 528 + return ( 529 529 + <Link 530 530 + to={ 531 531 + `/profile/$did/post/$rkey` + 532 532 + (type === "like" 533 533 + ? "/liked-by" 534 534 + : type === "repost" 535 535 + ? "/reposted-by" 536 536 + : type === "quote" 537 537 + ? "/quotes" 538 538 + : "") 539 539 + } 540 540 + params={{ 541 541 + did: aturi.host, 542 542 + rkey: aturi.rkey, 543 543 + }} 544 544 + className="flex-1 border-t py-2 px-4 flex flex-row items-center gap-2 transition-colors hover:bg-gray-100 hover:dark:bg-gray-800" 545 545 + > 546 546 + {type === "like" ? ( 547 547 + <MdiCardsHeartOutline height={22} width={22} /> 548 548 + ) : type === "repost" ? ( 549 549 + <MdiRepeat height={22} width={22} /> 550 550 + ) : type === "reply" ? ( 551 551 + <MdiCommentOutline height={22} width={22} /> 552 552 + ) : type === "quote" ? ( 553 553 + <IconMdiMessageReplyTextOutline 554 554 + height={22} 555 555 + width={22} 556 556 + className=" text-gray-400" 557 557 + /> 558 558 + ) : ( 559 559 + <></> 560 560 + )} 561 561 + {type === "like" 562 562 + ? "likes" 563 563 + : type === "reply" 564 564 + ? "replies" 565 565 + : type === "quote" 566 566 + ? "quotes" 567 567 + : type === "repost" 568 568 + ? "reposts" 569 569 + : ""} 570 570 + <div className="flex-1" /> {count} 571 571 + </Link> 572 572 + ); 573 573 + } 574 574 + 575 575 + export function NotificationItem({ notification, labeler }: { notification: string, labeler?: boolean }) { 576 576 + const aturi = new AtUri(notification); 577 577 + const bite = aturi.collection === "net.wafrn.feed.bite"; 578 578 + const navigate = useNavigate(); 579 579 + const { data: identity } = useQueryIdentity(aturi.host); 580 580 + const resolvedDid = identity?.did; 581 581 + const profileUri = resolvedDid 582 582 + ? `at://${resolvedDid}/app.bsky.actor.profile/self` 583 583 + : undefined; 584 584 + const { data: profileRecord } = useQueryProfile(profileUri); 585 585 + const profile = profileRecord?.value; 586 586 + 587 587 + const [imgcdn] = useAtom(imgCDNAtom); 588 588 + 589 589 + function getAvatarUrl(p: typeof profile) { 590 590 + const link = p?.avatar?.ref?.["$link"]; 591 591 + if (!link || !resolvedDid) return null; 592 592 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 593 593 + } 594 594 + 595 595 + const avatar = getAvatarUrl(profile); 596 596 + 597 597 + return ( 598 598 + <div 599 599 + className="flex items-center p-4 cursor-pointer gap-3 justify-around border-b flex-row" 600 600 + onClick={() => 601 601 + aturi && 602 602 + navigate({ 603 603 + to: "/profile/$did", 604 604 + params: { did: aturi.host }, 605 605 + }) 606 606 + } 607 607 + > 608 608 + {/* <div> 609 609 + {aturi.collection === "app.bsky.graph.follow" ? ( 610 610 + <IconMdiAccountPlus /> 611 611 + ) : aturi.collection === "app.bsky.feed.like" ? ( 612 612 + <MdiCardsHeart /> 613 613 + ) : ( 614 614 + <></> 615 615 + )} 616 616 + </div> */} 617 617 + {profile ? ( 618 618 + <img 619 619 + src={avatar || defaultpfp} 620 620 + alt={identity?.handle} 621 621 + className={`w-10 h-10 ${labeler ? "rounded-md" : "rounded-full"}`} 622 622 + /> 623 623 + ) : ( 624 624 + <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" /> 143 625 )} 144 144 - {!loading && 145 145 - !error && 146 146 - responses.map((resp, i) => ( 147 147 - <div key={i} className="p-4"> 148 148 - <div className="font-bold mb-2">Query {i + 1}</div> 149 149 - {!resp || 150 150 - (typeof resp === "object" && Object.keys(resp).length === 0) || 151 151 - (Array.isArray(resp) && resp.length === 0) ? ( 152 152 - <div className="text-gray-500">No notifications found.</div> 153 153 - ) : ( 154 154 - <pre 155 155 - style={{ 156 156 - background: "#222", 157 157 - color: "#eee", 158 158 - borderRadius: 8, 159 159 - padding: 12, 160 160 - fontSize: 13, 161 161 - overflowX: "auto", 162 162 - }} 163 163 - > 164 164 - {JSON.stringify(resp, null, 2)} 165 165 - </pre> 166 166 - )} 167 167 - </div> 168 168 - ))} 169 169 - {/* <div className="p-4"> yo this project sucks, ill remake it some other time, like cmon inputting anything into the textbox makes it break. ive warned you</div> */} 626 626 + <div className="flex flex-col min-w-0"> 627 627 + <div className="flex flex-row gap-2 overflow-hidden text-ellipsis whitespace-nowrap min-w-0"> 628 628 + <span className="font-medium text-gray-900 dark:text-gray-100 truncate"> 629 629 + {profile?.displayName || identity?.handle || "Someone"} 630 630 + </span> 631 631 + <span className="text-gray-700 dark:text-gray-400 truncate"> 632 632 + @{identity?.handle} 633 633 + </span> 634 634 + </div> 635 635 + <div className="flex flex-row gap-2"> 636 636 + {identity?.did && <Mutual targetdidorhandle={identity?.did} />} 637 637 + {/* <span className="text-sm text-gray-600 dark:text-gray-400"> 638 638 + followed you 639 639 + </span> */} 640 640 + </div> 641 641 + </div> 642 642 + <div className="flex-1" /> 643 643 + {identity?.did && <FollowButton targetdidorhandle={identity?.did} />} 170 644 </div> 171 645 ); 172 646 } 647 647 + 648 648 + export const EmptyState = ({ text }: { text: string }) => ( 649 649 + <div className="py-10 text-center text-gray-500 dark:text-gray-400"> 650 650 + {text} 651 651 + </div> 652 652 + ); 653 653 + 654 654 + export const LoadingState = ({ text }: { text: string }) => ( 655 655 + <div className="py-10 text-center text-gray-500 dark:text-gray-400 italic"> 656 656 + {text} 657 657 + </div> 658 658 + ); 659 659 + 660 660 + export const ErrorState = ({ error }: { error: unknown }) => ( 661 661 + <div className="py-10 text-center text-red-600 dark:text-red-400"> 662 662 + Error: {(error as Error)?.message || "Something went wrong."} 663 663 + </div> 664 664 + );

+91

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

··· 1 1 + import * as ATPAPI from "@atproto/api"; 2 2 + import { AtUri } from "@atproto/api"; 3 3 + import { createFileRoute } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed"; 8 8 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 9 9 + import { quickAuthAtom } from "~/utils/atoms"; 10 10 + import { useQueryArbitrary, useQueryIdentity } from "~/utils/useQuery"; 11 11 + 12 12 + export const Route = createFileRoute("/profile/$did/feed/$rkey")({ 13 13 + component: FeedRoute, 14 14 + }); 15 15 + 16 16 + // todo: scroll restoration 17 17 + function FeedRoute() { 18 18 + const { did, rkey } = Route.useParams(); 19 19 + const { agent, status } = useAuth(); 20 20 + const { data: identitydata } = useQueryIdentity(did); 21 21 + const { data: identity } = useQueryIdentity(agent?.did); 22 22 + const uri = `at://${identitydata?.did || did}/app.bsky.feed.generator/${rkey}`; 23 23 + const aturi = new AtUri(uri); 24 24 + const { data: feeddata } = useQueryArbitrary(uri); 25 25 + 26 26 + const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom); 27 27 + const isAuthRestoring = quickAuth ? status === "loading" : false; 28 28 + 29 29 + const authed = status === "signedIn"; 30 30 + 31 31 + const feedServiceDid = !isAuthRestoring 32 32 + ? ((feeddata?.value as any)?.did as string | undefined) 33 33 + : undefined; 34 34 + 35 35 + // const { 36 36 + // data: feedData, 37 37 + // isLoading: isFeedLoading, 38 38 + // error: feedError, 39 39 + // } = useQueryFeedSkeleton({ 40 40 + // feedUri: selectedFeed!, 41 41 + // agent: agent ?? undefined, 42 42 + // isAuthed: authed ?? false, 43 43 + // pdsUrl: identity?.pds, 44 44 + // feedServiceDid: feedServiceDid, 45 45 + // }); 46 46 + 47 47 + // const feed = feedData?.feed || []; 48 48 + 49 49 + const isReadyForAuthedFeed = 50 50 + !isAuthRestoring && authed && agent && identity?.pds && feedServiceDid; 51 51 + const isReadyForUnauthedFeed = !isAuthRestoring && !authed; 52 52 + 53 53 + const feed: ATPAPI.AppBskyFeedGenerator.Record | undefined = feeddata?.value; 54 54 + 55 55 + const web = feedServiceDid?.replace(/^did:web:/, "") || ""; 56 56 + 57 57 + return ( 58 58 + <> 59 59 + <Header 60 60 + title={feed?.displayName || aturi.rkey} 61 61 + backButtonCallback={() => { 62 62 + if (window.history.length > 1) { 63 63 + window.history.back(); 64 64 + } else { 65 65 + window.location.assign("/"); 66 66 + } 67 67 + }} 68 68 + /> 69 69 + 70 70 + {isAuthRestoring || 71 71 + (authed && (!identity?.pds || !feedServiceDid) && ( 72 72 + <div className="p-4 text-center text-gray-500"> 73 73 + Preparing your feed... 74 74 + </div> 75 75 + ))} 76 76 + 77 77 + {!isAuthRestoring && (isReadyForAuthedFeed || isReadyForUnauthedFeed) ? ( 78 78 + <InfiniteCustomFeed 79 79 + key={uri} 80 80 + feedUri={uri} 81 81 + pdsUrl={identity?.pds} 82 82 + feedServiceDid={feedServiceDid} 83 83 + authedOverride={!authed && true || undefined} 84 84 + unauthedfeedurl={!authed && web || undefined} 85 85 + /> 86 86 + ) : ( 87 87 + <div className="p-4 text-center text-gray-500">Loading.......</div> 88 88 + )} 89 89 + </> 90 90 + ); 91 91 + }

+30

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

··· 1 1 + import { createFileRoute } from "@tanstack/react-router"; 2 2 + 3 3 + import { Header } from "~/components/Header"; 4 4 + 5 5 + import { FollowsTab } from "../notifications"; 6 6 + 7 7 + export const Route = createFileRoute("/profile/$did/followers")({ 8 8 + component: RouteComponent, 9 9 + }); 10 10 + 11 11 + // todo: scroll restoration 12 12 + function RouteComponent() { 13 13 + const params = Route.useParams(); 14 14 + 15 15 + return ( 16 16 + <div> 17 17 + <Header 18 18 + title={"Followers"} 19 19 + backButtonCallback={() => { 20 20 + if (window.history.length > 1) { 21 21 + window.history.back(); 22 22 + } else { 23 23 + window.location.assign("/"); 24 24 + } 25 25 + }} 26 26 + /> 27 27 + <FollowsTab did={params.did} /> 28 28 + </div> 29 29 + ); 30 30 + }

+79

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

··· 1 1 + import * as ATPAPI from "@atproto/api" 2 2 + import { createFileRoute } from '@tanstack/react-router' 3 3 + import React from 'react'; 4 4 + 5 5 + import { Header } from '~/components/Header'; 6 6 + import { useReusableTabScrollRestore } from '~/components/ReusableTabRoute'; 7 7 + import { useInfiniteQueryAuthorFeed, useQueryIdentity } from '~/utils/useQuery'; 8 8 + 9 9 + import { EmptyState, ErrorState, LoadingState, NotificationItem } from '../notifications'; 10 10 + 11 11 + export const Route = createFileRoute('/profile/$did/follows')({ 12 12 + component: RouteComponent, 13 13 + }) 14 14 + 15 15 + // todo: scroll restoration 16 16 + function RouteComponent() { 17 17 + const params = Route.useParams(); 18 18 + return ( 19 19 + <div> 20 20 + <Header 21 21 + title={"Follows"} 22 22 + backButtonCallback={() => { 23 23 + if (window.history.length > 1) { 24 24 + window.history.back(); 25 25 + } else { 26 26 + window.location.assign("/"); 27 27 + } 28 28 + }} 29 29 + /> 30 30 + <Follows did={params.did}/> 31 31 + </div> 32 32 + ); 33 33 + } 34 34 + 35 35 + function Follows({did}:{did:string}) { 36 36 + const {data: identity} = useQueryIdentity(did); 37 37 + const infinitequeryresults = useInfiniteQueryAuthorFeed(identity?.did, identity?.pds, "app.bsky.graph.follow"); 38 38 + 39 39 + const { 40 40 + data: infiniteFollowsData, 41 41 + fetchNextPage, 42 42 + hasNextPage, 43 43 + isFetchingNextPage, 44 44 + isLoading, 45 45 + isError, 46 46 + error, 47 47 + } = infinitequeryresults; 48 48 + 49 49 + const followsAturis = React.useMemo( 50 50 + () => infiniteFollowsData?.pages.flatMap((page) => page.records) ?? [], 51 51 + [infiniteFollowsData] 52 52 + ); 53 53 + 54 54 + useReusableTabScrollRestore("Notifications"); 55 55 + 56 56 + if (isLoading) return <LoadingState text="Loading follows..." />; 57 57 + if (isError) return <ErrorState error={error} />; 58 58 + 59 59 + if (!followsAturis?.length) return <EmptyState text="No follows yet." />; 60 60 + 61 61 + return ( 62 62 + <> 63 63 + {followsAturis.map((m) => { 64 64 + const record = m.value as unknown as ATPAPI.AppBskyGraphFollow.Record; 65 65 + return <NotificationItem key={record.subject} notification={record.subject} /> 66 66 + })} 67 67 + 68 68 + {hasNextPage && ( 69 69 + <button 70 70 + onClick={() => fetchNextPage()} 71 71 + disabled={isFetchingNextPage} 72 72 + 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" 73 73 + > 74 74 + {isFetchingNextPage ? "Loading..." : "Load More"} 75 75 + </button> 76 76 + )} 77 77 + </> 78 78 + ); 79 79 + }

+1018 -127

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

··· 1 1 + import { Agent, RichText } from "@atproto/api"; 2 2 + import * as ATPAPI from "@atproto/api"; 3 3 + import { TID } from "@atproto/common-web"; 1 4 import { useQueryClient } from "@tanstack/react-query"; 2 2 - import { createFileRoute, Link } from "@tanstack/react-router"; 3 3 - import React from "react"; 5 5 + import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; 6 6 + import { useAtom } from "jotai"; 7 7 + import React, { type ReactNode, useEffect, useState } from "react"; 4 8 5 5 - import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 9 9 + import defaultpfp from "~/../public/favicon.png"; 10 10 + import { Header } from "~/components/Header"; 11 11 + import { 12 12 + ReusableTabRoute, 13 13 + useReusableTabScrollRestore, 14 14 + } from "~/components/ReusableTabRoute"; 15 15 + import { 16 16 + renderTextWithFacets, 17 17 + UniversalPostRendererATURILoader, 18 18 + } from "~/components/UniversalPostRenderer"; 6 19 import { useAuth } from "~/providers/UnifiedAuthProvider"; 7 7 - import { toggleFollow, useGetFollowState } from "~/utils/followState"; 20 20 + import { enableBitesAtom, imgCDNAtom, profileChipsAtom } from "~/utils/atoms"; 21 21 + import { 22 22 + toggleFollow, 23 23 + useGetFollowState, 24 24 + useGetOneToOneState, 25 25 + } from "~/utils/followState"; 26 26 + import { useFastSetLikesFromFeed } from "~/utils/likeMutationQueue"; 8 27 import { 9 28 useInfiniteQueryAuthorFeed, 29 29 + useQueryArbitrary, 30 30 + useQueryConstellation, 31 31 + useQueryConstellationLinksCountDistinctDids, 10 32 useQueryIdentity, 11 33 useQueryProfile, 12 34 } from "~/utils/useQuery"; 35 35 + import IconMdiShieldOutline from "~icons/mdi/shield-outline.jsx"; 36 36 + 37 37 + import { renderSnack } from "../__root"; 38 38 + import { Chip } from "../notifications"; 13 39 14 40 export const Route = createFileRoute("/profile/$did/")({ 15 41 component: ProfileComponent, ··· 18 44 function ProfileComponent() { 19 45 // booo bad this is not always the did it might be a handle, use identity.did instead 20 46 const { did } = Route.useParams(); 21 21 - const queryClient = useQueryClient(); 22 47 const { agent } = useAuth(); 48 48 + const navigate = useNavigate(); 49 49 + const queryClient = useQueryClient(); 23 50 const { 24 51 data: identity, 25 52 isLoading: isIdentityLoading, 26 53 error: identityError, 27 54 } = useQueryIdentity(did); 28 55 29 29 - const followRecords = useGetFollowState({ 30 30 - target: identity?.did || did, 31 31 - user: agent?.did, 32 32 - }); 56 56 + // i was gonna check the did doc but useQueryIdentity doesnt return that info (slingshot minidoc) 57 57 + // so instead we should query the labeler profile 58 58 + 59 59 + const { data: labelerProfile } = useQueryArbitrary( 60 60 + identity?.did 61 61 + ? `at://${identity?.did}/app.bsky.labeler.service/self` 62 62 + : undefined 63 63 + ); 64 64 + 65 65 + const isLabeler = !!labelerProfile?.cid; 66 66 + const labelerRecord = isLabeler 67 67 + ? (labelerProfile?.value as ATPAPI.AppBskyLabelerService.Record) 68 68 + : undefined; 33 69 34 70 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 35 71 const resolvedHandle = did.startsWith("did:") ? identity?.handle : did; ··· 41 77 const { data: profileRecord } = useQueryProfile(profileUri); 42 78 const profile = profileRecord?.value; 43 79 44 44 - const { 45 45 - data: postsData, 46 46 - fetchNextPage, 47 47 - hasNextPage, 48 48 - isFetchingNextPage, 49 49 - isLoading: arePostsLoading, 50 50 - } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl); 51 51 - 52 52 - React.useEffect(() => { 53 53 - if (postsData) { 54 54 - postsData.pages.forEach((page) => { 55 55 - page.records.forEach((record) => { 56 56 - if (!queryClient.getQueryData(["post", record.uri])) { 57 57 - queryClient.setQueryData(["post", record.uri], record); 58 58 - } 59 59 - }); 60 60 - }); 61 61 - } 62 62 - }, [postsData, queryClient]); 63 63 - 64 64 - const posts = React.useMemo( 65 65 - () => postsData?.pages.flatMap((page) => page.records) ?? [], 66 66 - [postsData] 67 67 - ); 80 80 + const [imgcdn] = useAtom(imgCDNAtom); 68 81 69 82 function getAvatarUrl(p: typeof profile) { 70 83 const link = p?.avatar?.ref?.["$link"]; 71 84 if (!link || !resolvedDid) return null; 72 72 - return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 85 85 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 73 86 } 74 87 function getBannerUrl(p: typeof profile) { 75 88 const link = p?.banner?.ref?.["$link"]; 76 89 if (!link || !resolvedDid) return null; 77 77 - return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`; 90 90 + return `https://${imgcdn}/img/banner/plain/${resolvedDid}/${link}@jpeg`; 78 91 } 79 92 80 93 const displayName = ··· 82 95 const handle = resolvedHandle ? `@${resolvedHandle}` : resolvedDid || did; 83 96 const description = profile?.description || ""; 84 97 85 85 - if (isIdentityLoading) { 86 86 - return ( 87 87 - <div className="p-4 text-center text-gray-500">Resolving profile...</div> 88 88 - ); 89 89 - } 98 98 + const isReady = !!resolvedDid && !isIdentityLoading && !!profileRecord; 90 99 91 91 - if (identityError) { 92 92 - return ( 93 93 - <div className="p-4 text-center text-red-500"> 94 94 - Error: {identityError.message} 95 95 - </div> 96 96 - ); 97 97 - } 100 100 + const resultwhateversure = useQueryConstellationLinksCountDistinctDids( 101 101 + resolvedDid 102 102 + ? { 103 103 + method: "/links/count/distinct-dids", 104 104 + collection: "app.bsky.graph.follow", 105 105 + target: resolvedDid, 106 106 + path: ".subject", 107 107 + } 108 108 + : undefined 109 109 + ); 98 110 99 99 - if (!resolvedDid) { 100 100 - return ( 101 101 - <div className="p-4 text-center text-gray-500">Profile not found.</div> 102 102 - ); 103 103 - } 111 111 + const followercount = resultwhateversure?.data?.total; 104 112 105 113 return ( 106 106 - <> 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"> 114 114 + <div className=""> 115 115 + <Header 116 116 + title={`Profile`} 117 117 + backButtonCallback={() => { 118 118 + if (window.history.length > 1) { 119 119 + window.history.back(); 120 120 + } else { 121 121 + window.location.assign("/"); 122 122 + } 123 123 + }} 124 124 + bottomBorderDisabled={true} 125 125 + /> 126 126 + {/* <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 127 <Link 109 128 to=".." 110 129 className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg" ··· 121 140 ← 122 141 </Link> 123 142 <span className="text-xl font-bold ml-2">Profile</span> 124 124 - </div> 143 143 + </div> */} 125 144 126 145 {/* Profile Header */} 127 146 <div className="w-full max-w-2xl mx-auto overflow-hidden relative bg-gray-100 dark:bg-gray-900"> ··· 137 156 138 157 {/* Avatar (PFP) */} 139 158 <div className="absolute left-[16px] top-[100px] "> 140 140 - <img 141 141 - src={getAvatarUrl(profile) || "/favicon.png"} 142 142 - alt="avatar" 143 143 - className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700" 144 144 - /> 159 159 + {!getAvatarUrl(profile) && isLabeler ? ( 160 160 + <div 161 161 + className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} items-center justify-center flex object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`} 162 162 + > 163 163 + <IconMdiShieldOutline className="w-20 h-20" /> 164 164 + </div> 165 165 + ) : ( 166 166 + <img 167 167 + src={getAvatarUrl(profile) || "/favicon.png"} 168 168 + alt="avatar" 169 169 + className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`} 170 170 + /> 171 171 + )} 145 172 </div> 146 173 147 174 <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5"> 175 175 + <BiteButton targetdidorhandle={did} /> 148 176 {/* 149 177 todo: full follow and unfollow backfill (along with partial likes backfill, 150 178 just enough for it to be useful) 151 179 also delay the backfill to be on demand because it would be pretty intense 152 180 also save it persistently 153 181 */} 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 - )} 191 191 - <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"> 182 182 + <FollowButton targetdidorhandle={did} /> 183 183 + <button 184 184 + className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]" 185 185 + onClick={(e) => { 186 186 + renderSnack({ 187 187 + title: "Not Implemented Yet", 188 188 + description: "Sorry...", 189 189 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 190 190 + }); 191 191 + }} 192 192 + > 192 193 ... {/* todo: icon */} 193 194 </button> 194 195 </div> ··· 196 197 {/* Info Card */} 197 198 <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100"> 198 199 <div className="font-bold text-2xl">{displayName}</div> 199 199 - <div className="text-gray-500 dark:text-gray-400 text-base mb-3"> 200 200 + <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1"> 201 201 + <Mutual targetdidorhandle={did} /> 200 202 {handle} 201 203 </div> 204 204 + <div className="flex flex-row gap-2 text-md text-gray-500 dark:text-gray-400 mb-2"> 205 205 + <Link to="/profile/$did/followers" params={{ did: did }}> 206 206 + {followercount && ( 207 207 + <span className="mr-1 text-gray-900 dark:text-gray-200 font-medium"> 208 208 + {followercount} 209 209 + </span> 210 210 + )} 211 211 + Followers 212 212 + </Link> 213 213 + - 214 214 + <Link to="/profile/$did/follows" params={{ did: did }}> 215 215 + Follows 216 216 + </Link> 217 217 + </div> 202 218 {description && ( 203 219 <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} 220 220 + {/* {description} */} 221 221 + <RichTextRenderer key={did} description={description} /> 205 222 </div> 206 223 )} 207 224 </div> 208 225 </div> 209 226 210 210 - {/* Posts Section */} 211 211 - <div className="max-w-2xl mx-auto"> 212 212 - <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 213 213 - Posts 227 227 + {/* this should not be rendered until its ready (the top profile layout is stable) */} 228 228 + {isReady ? ( 229 229 + <ReusableTabRoute 230 230 + route={`Profile` + did} 231 231 + tabs={{ 232 232 + ...(isLabeler 233 233 + ? { 234 234 + Labels: <LabelsTab did={did} labelerRecord={labelerRecord} />, 235 235 + } 236 236 + : {}), 237 237 + ...{ 238 238 + Posts: <PostsTab did={did} />, 239 239 + Reposts: <RepostsTab did={did} />, 240 240 + Feeds: <FeedsTab did={did} />, 241 241 + Lists: <ListsTab did={did} />, 242 242 + }, 243 243 + ...(identity?.did === agent?.did 244 244 + ? { Likes: <SelfLikesTab did={did} /> } 245 245 + : {}), 246 246 + }} 247 247 + /> 248 248 + ) : isIdentityLoading ? ( 249 249 + <div className="p-4 text-center text-gray-500"> 250 250 + Resolving profile... 251 251 + </div> 252 252 + ) : identityError ? ( 253 253 + <div className="p-4 text-center text-red-500"> 254 254 + Error: {identityError.message} 255 255 + </div> 256 256 + ) : !resolvedDid ? ( 257 257 + <div className="p-4 text-center text-gray-500">Profile not found.</div> 258 258 + ) : ( 259 259 + <div className="p-4 text-center text-gray-500"> 260 260 + Loading profile content... 214 261 </div> 215 215 - <div> 216 216 - {posts.map((post) => ( 262 262 + )} 263 263 + </div> 264 264 + ); 265 265 + } 266 266 + 267 267 + export type ProfilePostsFilter = { 268 268 + posts: boolean; 269 269 + replies: boolean; 270 270 + mediaOnly: boolean; 271 271 + }; 272 272 + export const defaultProfilePostsFilter: ProfilePostsFilter = { 273 273 + posts: true, 274 274 + replies: true, 275 275 + mediaOnly: false, 276 276 + }; 277 277 + 278 278 + function ProfilePostsFilterChipBar({ 279 279 + filters, 280 280 + toggle, 281 281 + }: { 282 282 + filters: ProfilePostsFilter | null; 283 283 + toggle: (key: keyof ProfilePostsFilter) => void; 284 284 + }) { 285 285 + const empty = !filters?.replies && !filters?.posts; 286 286 + const almostEmpty = !filters?.replies && filters?.posts; 287 287 + 288 288 + useEffect(() => { 289 289 + if (empty) { 290 290 + toggle("posts"); 291 291 + } 292 292 + }, [empty, toggle]); 293 293 + 294 294 + return ( 295 295 + <div className="flex flex-row flex-wrap gap-2 px-4 pt-4"> 296 296 + <Chip 297 297 + state={filters?.posts ?? true} 298 298 + text="Posts" 299 299 + onClick={() => (almostEmpty ? null : toggle("posts"))} 300 300 + /> 301 301 + <Chip 302 302 + state={filters?.replies ?? true} 303 303 + text="Replies" 304 304 + onClick={() => toggle("replies")} 305 305 + /> 306 306 + <Chip 307 307 + state={filters?.mediaOnly ?? false} 308 308 + text="Media Only" 309 309 + onClick={() => toggle("mediaOnly")} 310 310 + /> 311 311 + </div> 312 312 + ); 313 313 + } 314 314 + 315 315 + function PostsTab({ did }: { did: string }) { 316 316 + // todo: this needs to be a (non-persisted is fine) atom to survive navigation 317 317 + const [filterses, setFilterses] = useAtom(profileChipsAtom); 318 318 + const filters = filterses?.[did]; 319 319 + const setFilters = (obj: ProfilePostsFilter) => { 320 320 + setFilterses((prev) => { 321 321 + return { 322 322 + ...prev, 323 323 + [did]: obj, 324 324 + }; 325 325 + }); 326 326 + }; 327 327 + useEffect(() => { 328 328 + if (!filters) { 329 329 + setFilters(defaultProfilePostsFilter); 330 330 + } 331 331 + }); 332 332 + useReusableTabScrollRestore(`Profile` + did); 333 333 + const queryClient = useQueryClient(); 334 334 + const { 335 335 + data: identity, 336 336 + isLoading: isIdentityLoading, 337 337 + error: identityError, 338 338 + } = useQueryIdentity(did); 339 339 + 340 340 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 341 341 + 342 342 + const { 343 343 + data: postsData, 344 344 + fetchNextPage, 345 345 + hasNextPage, 346 346 + isFetchingNextPage, 347 347 + isLoading: arePostsLoading, 348 348 + } = useInfiniteQueryAuthorFeed(resolvedDid, identity?.pds); 349 349 + 350 350 + React.useEffect(() => { 351 351 + if (postsData) { 352 352 + postsData.pages.forEach((page) => { 353 353 + page.records.forEach((record) => { 354 354 + if (!queryClient.getQueryData(["post", record.uri])) { 355 355 + queryClient.setQueryData(["post", record.uri], record); 356 356 + } 357 357 + }); 358 358 + }); 359 359 + } 360 360 + }, [postsData, queryClient]); 361 361 + 362 362 + const posts = React.useMemo( 363 363 + () => postsData?.pages.flatMap((page) => page.records) ?? [], 364 364 + [postsData] 365 365 + ); 366 366 + 367 367 + const toggle = (key: keyof ProfilePostsFilter) => { 368 368 + setFilterses((prev) => { 369 369 + const existing = prev[did] ?? { 370 370 + posts: false, 371 371 + replies: false, 372 372 + mediaOnly: false, 373 373 + }; // default 374 374 + 375 375 + return { 376 376 + ...prev, 377 377 + [did]: { 378 378 + ...existing, 379 379 + [key]: !existing[key], // safely negate 380 380 + }, 381 381 + }; 382 382 + }); 383 383 + }; 384 384 + 385 385 + return ( 386 386 + <> 387 387 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 388 388 + Posts 389 389 + </div> */} 390 390 + <ProfilePostsFilterChipBar filters={filters} toggle={toggle} /> 391 391 + <div> 392 392 + {posts.map((post) => ( 393 393 + <UniversalPostRendererATURILoader 394 394 + key={post.uri} 395 395 + atUri={post.uri} 396 396 + feedviewpost={true} 397 397 + filterNoReplies={!filters?.replies} 398 398 + filterMustHaveMedia={filters?.mediaOnly} 399 399 + filterMustBeReply={!filters?.posts} 400 400 + /> 401 401 + ))} 402 402 + </div> 403 403 + 404 404 + {/* Loading and "Load More" states */} 405 405 + {arePostsLoading && posts.length === 0 && ( 406 406 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 407 407 + )} 408 408 + {isFetchingNextPage && ( 409 409 + <div className="p-4 text-center text-gray-500">Loading more...</div> 410 410 + )} 411 411 + {hasNextPage && !isFetchingNextPage && ( 412 412 + <button 413 413 + onClick={() => fetchNextPage()} 414 414 + 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" 415 415 + > 416 416 + Load More Posts 417 417 + </button> 418 418 + )} 419 419 + {posts.length === 0 && !arePostsLoading && ( 420 420 + <div className="p-4 text-center text-gray-500">No posts found.</div> 421 421 + )} 422 422 + </> 423 423 + ); 424 424 + } 425 425 + 426 426 + function RepostsTab({ did }: { did: string }) { 427 427 + useReusableTabScrollRestore(`Profile` + did); 428 428 + const { 429 429 + data: identity, 430 430 + isLoading: isIdentityLoading, 431 431 + error: identityError, 432 432 + } = useQueryIdentity(did); 433 433 + 434 434 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 435 435 + 436 436 + const { 437 437 + data: repostsData, 438 438 + fetchNextPage, 439 439 + hasNextPage, 440 440 + isFetchingNextPage, 441 441 + isLoading: arePostsLoading, 442 442 + } = useInfiniteQueryAuthorFeed( 443 443 + resolvedDid, 444 444 + identity?.pds, 445 445 + "app.bsky.feed.repost" 446 446 + ); 447 447 + 448 448 + const reposts = React.useMemo( 449 449 + () => repostsData?.pages.flatMap((page) => page.records) ?? [], 450 450 + [repostsData] 451 451 + ); 452 452 + 453 453 + return ( 454 454 + <> 455 455 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 456 456 + Reposts 457 457 + </div> 458 458 + <div> 459 459 + {reposts.map((repost) => { 460 460 + if ( 461 461 + !repost || 462 462 + !repost?.value || 463 463 + !repost?.value?.subject || 464 464 + // @ts-expect-error blehhhhh 465 465 + !repost?.value?.subject?.uri 466 466 + ) 467 467 + return; 468 468 + const repostRecord = 469 469 + repost.value as unknown as ATPAPI.AppBskyFeedRepost.Record; 470 470 + return ( 217 471 <UniversalPostRendererATURILoader 218 218 - key={post.uri} 219 219 - atUri={post.uri} 472 472 + key={repostRecord.subject.uri} 473 473 + atUri={repostRecord.subject.uri} 220 474 feedviewpost={true} 475 475 + repostedby={repost.uri} 221 476 /> 222 222 - ))} 223 223 - </div> 477 477 + ); 478 478 + })} 479 479 + </div> 480 480 + 481 481 + {/* Loading and "Load More" states */} 482 482 + {arePostsLoading && reposts.length === 0 && ( 483 483 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 484 484 + )} 485 485 + {isFetchingNextPage && ( 486 486 + <div className="p-4 text-center text-gray-500">Loading more...</div> 487 487 + )} 488 488 + {hasNextPage && !isFetchingNextPage && ( 489 489 + <button 490 490 + onClick={() => fetchNextPage()} 491 491 + 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" 492 492 + > 493 493 + Load More Posts 494 494 + </button> 495 495 + )} 496 496 + {reposts.length === 0 && !arePostsLoading && ( 497 497 + <div className="p-4 text-center text-gray-500">No posts found.</div> 498 498 + )} 499 499 + </> 500 500 + ); 501 501 + } 502 502 + 503 503 + function FeedsTab({ did }: { did: string }) { 504 504 + useReusableTabScrollRestore(`Profile` + did); 505 505 + const { 506 506 + data: identity, 507 507 + isLoading: isIdentityLoading, 508 508 + error: identityError, 509 509 + } = useQueryIdentity(did); 510 510 + 511 511 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 512 512 + 513 513 + const { 514 514 + data: feedsData, 515 515 + fetchNextPage, 516 516 + hasNextPage, 517 517 + isFetchingNextPage, 518 518 + isLoading: arePostsLoading, 519 519 + } = useInfiniteQueryAuthorFeed( 520 520 + resolvedDid, 521 521 + identity?.pds, 522 522 + "app.bsky.feed.generator" 523 523 + ); 524 524 + 525 525 + const feeds = React.useMemo( 526 526 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 527 527 + [feedsData] 528 528 + ); 529 529 + 530 530 + return ( 531 531 + <> 532 532 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 533 533 + Feeds 534 534 + </div> 535 535 + <div> 536 536 + {feeds.map((feed) => { 537 537 + if (!feed || !feed?.value) return; 538 538 + const feedGenRecord = 539 539 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 540 540 + return <FeedItemRender feed={feed as any} key={feed.uri} />; 541 541 + })} 542 542 + </div> 543 543 + 544 544 + {/* Loading and "Load More" states */} 545 545 + {arePostsLoading && feeds.length === 0 && ( 546 546 + <div className="p-4 text-center text-gray-500">Loading feeds...</div> 547 547 + )} 548 548 + {isFetchingNextPage && ( 549 549 + <div className="p-4 text-center text-gray-500">Loading more...</div> 550 550 + )} 551 551 + {hasNextPage && !isFetchingNextPage && ( 552 552 + <button 553 553 + onClick={() => fetchNextPage()} 554 554 + 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" 555 555 + > 556 556 + Load More Feeds 557 557 + </button> 558 558 + )} 559 559 + {feeds.length === 0 && !arePostsLoading && ( 560 560 + <div className="p-4 text-center text-gray-500">No feeds found.</div> 561 561 + )} 562 562 + </> 563 563 + ); 564 564 + } 565 565 + 566 566 + function LabelsTab({ 567 567 + did, 568 568 + labelerRecord, 569 569 + }: { 570 570 + did: string; 571 571 + labelerRecord?: ATPAPI.AppBskyLabelerService.Record; 572 572 + }) { 573 573 + useReusableTabScrollRestore(`Profile` + did); 574 574 + const { agent } = useAuth(); 575 575 + // const { 576 576 + // data: identity, 577 577 + // isLoading: isIdentityLoading, 578 578 + // error: identityError, 579 579 + // } = useQueryIdentity(did); 224 580 225 225 - {/* Loading and "Load More" states */} 226 226 - {arePostsLoading && posts.length === 0 && ( 227 227 - <div className="p-4 text-center text-gray-500">Loading posts...</div> 228 228 - )} 229 229 - {isFetchingNextPage && ( 230 230 - <div className="p-4 text-center text-gray-500">Loading more...</div> 231 231 - )} 232 232 - {hasNextPage && !isFetchingNextPage && ( 233 233 - <button 234 234 - onClick={() => fetchNextPage()} 235 235 - 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" 581 581 + // const resolvedDid = did.startsWith("did:") ? did : identity?.did; 582 582 + 583 583 + const labelMap = new Map( 584 584 + labelerRecord?.policies?.labelValueDefinitions?.map((def) => { 585 585 + const locale = def.locales.find((l) => l.lang === "en") ?? def.locales[0]; 586 586 + return [ 587 587 + def.identifier, 588 588 + { 589 589 + name: locale?.name, 590 590 + description: locale?.description, 591 591 + blur: def.blurs, 592 592 + severity: def.severity, 593 593 + adultOnly: def.adultOnly, 594 594 + defaultSetting: def.defaultSetting, 595 595 + }, 596 596 + ]; 597 597 + }) 598 598 + ); 599 599 + 600 600 + return ( 601 601 + <> 602 602 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 603 603 + Labels 604 604 + </div> 605 605 + <div> 606 606 + {[...labelMap.entries()].map(([key, item]) => ( 607 607 + <div 608 608 + key={key} 609 609 + className="border-gray-300 dark:border-gray-700 border-b px-4 py-4" 236 610 > 237 237 - Load More Posts 238 238 - </button> 239 239 - )} 240 240 - {posts.length === 0 && !arePostsLoading && ( 241 241 - <div className="p-4 text-center text-gray-500">No posts found.</div> 242 242 - )} 611 611 + <div className="font-semibold text-lg">{item.name}</div> 612 612 + <div className="text-sm text-gray-500 dark:text-gray-400"> 613 613 + {item.description} 614 614 + </div> 615 615 + <div className="mt-1 text-xs text-gray-400"> 616 616 + {item.blur && <span>Blur: {item.blur} </span>} 617 617 + {item.severity && <span>• Severity: {item.severity} </span>} 618 618 + {item.adultOnly && <span>• 18+ only</span>} 619 619 + </div> 620 620 + </div> 621 621 + ))} 243 622 </div> 623 623 + 624 624 + {/* Loading and "Load More" states */} 625 625 + {!labelerRecord && ( 626 626 + <div className="p-4 text-center text-gray-500">Loading labels...</div> 627 627 + )} 628 628 + {/* {!labelerRecord && ( 629 629 + <div className="p-4 text-center text-gray-500">Loading more...</div> 630 630 + )} */} 631 631 + {/* {hasNextPage && !isFetchingNextPage && ( 632 632 + <button 633 633 + onClick={() => fetchNextPage()} 634 634 + 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" 635 635 + > 636 636 + Load More Feeds 637 637 + </button> 638 638 + )} 639 639 + {feeds.length === 0 && !arePostsLoading && ( 640 640 + <div className="p-4 text-center text-gray-500">No feeds found.</div> 641 641 + )} */} 244 642 </> 245 643 ); 246 644 } 645 645 + 646 646 + export function FeedItemRenderAturiLoader({ 647 647 + aturi, 648 648 + listmode, 649 649 + disableBottomBorder, 650 650 + disablePropagation, 651 651 + }: { 652 652 + aturi: string; 653 653 + listmode?: boolean; 654 654 + disableBottomBorder?: boolean; 655 655 + disablePropagation?: boolean; 656 656 + }) { 657 657 + const { data: record } = useQueryArbitrary(aturi); 658 658 + 659 659 + if (!record) return; 660 660 + return ( 661 661 + <FeedItemRender 662 662 + listmode={listmode} 663 663 + feed={record} 664 664 + disableBottomBorder={disableBottomBorder} 665 665 + disablePropagation={disablePropagation} 666 666 + /> 667 667 + ); 668 668 + } 669 669 + 670 670 + export function FeedItemRender({ 671 671 + feed, 672 672 + listmode, 673 673 + disableBottomBorder, 674 674 + disablePropagation, 675 675 + }: { 676 676 + feed: { uri: string; cid: string; value: any }; 677 677 + listmode?: boolean; 678 678 + disableBottomBorder?: boolean; 679 679 + disablePropagation?: boolean; 680 680 + }) { 681 681 + const name = listmode 682 682 + ? (feed.value?.name as string) 683 683 + : (feed.value?.displayName as string); 684 684 + const aturi = new ATPAPI.AtUri(feed.uri); 685 685 + const { data: identity } = useQueryIdentity(aturi.host); 686 686 + const resolvedDid = identity?.did; 687 687 + const [imgcdn] = useAtom(imgCDNAtom); 688 688 + 689 689 + function getAvatarThumbnailUrl(f: typeof feed) { 690 690 + const link = f?.value.avatar?.ref?.["$link"]; 691 691 + if (!link || !resolvedDid) return null; 692 692 + return `https://${imgcdn}/img/avatar/plain/${resolvedDid}/${link}@jpeg`; 693 693 + } 694 694 + 695 695 + const { data: likes } = useQueryConstellation( 696 696 + // @ts-expect-error overloads sucks 697 697 + !listmode 698 698 + ? { 699 699 + target: feed.uri, 700 700 + method: "/links/count", 701 701 + collection: "app.bsky.feed.like", 702 702 + path: ".subject.uri", 703 703 + } 704 704 + : undefined 705 705 + ); 706 706 + 707 707 + return ( 708 708 + <Link 709 709 + className={`px-4 py-4 ${!disableBottomBorder && "border-b"} flex flex-col gap-1`} 710 710 + to="/profile/$did/feed/$rkey" 711 711 + params={{ did: aturi.host, rkey: aturi.rkey }} 712 712 + onClick={(e) => { 713 713 + e.stopPropagation(); 714 714 + }} 715 715 + > 716 716 + <div className="flex flex-row gap-3"> 717 717 + <div className="min-w-10 min-h-10"> 718 718 + <img 719 719 + src={getAvatarThumbnailUrl(feed) || defaultpfp} 720 720 + className="h-10 w-10 rounded border" 721 721 + /> 722 722 + </div> 723 723 + <div className="flex flex-col"> 724 724 + <span className="">{name}</span> 725 725 + <span 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"> 726 726 + {feed.value.did || aturi.rkey} 727 727 + </span> 728 728 + </div> 729 729 + <div className="flex-1" /> 730 730 + {/* <div className="button bg-red-500 rounded-full min-w-[60px]" /> */} 731 731 + </div> 732 732 + <span className=" text-sm">{feed.value?.description}</span> 733 733 + {!listmode && ( 734 734 + <span className=" text-sm dark:text-gray-400 text-gray-500"> 735 735 + Liked by {((likes as unknown as any)?.total as number) || 0} users 736 736 + </span> 737 737 + )} 738 738 + </Link> 739 739 + ); 740 740 + } 741 741 + 742 742 + function ListsTab({ did }: { did: string }) { 743 743 + useReusableTabScrollRestore(`Profile` + did); 744 744 + const { 745 745 + data: identity, 746 746 + isLoading: isIdentityLoading, 747 747 + error: identityError, 748 748 + } = useQueryIdentity(did); 749 749 + 750 750 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 751 751 + 752 752 + const { 753 753 + data: feedsData, 754 754 + fetchNextPage, 755 755 + hasNextPage, 756 756 + isFetchingNextPage, 757 757 + isLoading: arePostsLoading, 758 758 + } = useInfiniteQueryAuthorFeed( 759 759 + resolvedDid, 760 760 + identity?.pds, 761 761 + "app.bsky.graph.list" 762 762 + ); 763 763 + 764 764 + const feeds = React.useMemo( 765 765 + () => feedsData?.pages.flatMap((page) => page.records) ?? [], 766 766 + [feedsData] 767 767 + ); 768 768 + 769 769 + return ( 770 770 + <> 771 771 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 772 772 + Feeds 773 773 + </div> 774 774 + <div> 775 775 + {feeds.map((feed) => { 776 776 + if (!feed || !feed?.value) return; 777 777 + const feedGenRecord = 778 778 + feed.value as unknown as ATPAPI.AppBskyFeedGenerator.Record; 779 779 + return ( 780 780 + <FeedItemRender listmode={true} feed={feed as any} key={feed.uri} /> 781 781 + ); 782 782 + })} 783 783 + </div> 784 784 + 785 785 + {/* Loading and "Load More" states */} 786 786 + {arePostsLoading && feeds.length === 0 && ( 787 787 + <div className="p-4 text-center text-gray-500">Loading lists...</div> 788 788 + )} 789 789 + {isFetchingNextPage && ( 790 790 + <div className="p-4 text-center text-gray-500">Loading more...</div> 791 791 + )} 792 792 + {hasNextPage && !isFetchingNextPage && ( 793 793 + <button 794 794 + onClick={() => fetchNextPage()} 795 795 + 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" 796 796 + > 797 797 + Load More Lists 798 798 + </button> 799 799 + )} 800 800 + {feeds.length === 0 && !arePostsLoading && ( 801 801 + <div className="p-4 text-center text-gray-500">No lists found.</div> 802 802 + )} 803 803 + </> 804 804 + ); 805 805 + } 806 806 + 807 807 + function SelfLikesTab({ did }: { did: string }) { 808 808 + useReusableTabScrollRestore(`Profile` + did); 809 809 + const { 810 810 + data: identity, 811 811 + isLoading: isIdentityLoading, 812 812 + error: identityError, 813 813 + } = useQueryIdentity(did); 814 814 + 815 815 + const resolvedDid = did.startsWith("did:") ? did : identity?.did; 816 816 + 817 817 + const { 818 818 + data: likesData, 819 819 + fetchNextPage, 820 820 + hasNextPage, 821 821 + isFetchingNextPage, 822 822 + isLoading: arePostsLoading, 823 823 + } = useInfiniteQueryAuthorFeed( 824 824 + resolvedDid, 825 825 + identity?.pds, 826 826 + "app.bsky.feed.like" 827 827 + ); 828 828 + 829 829 + const likes = React.useMemo( 830 830 + () => likesData?.pages.flatMap((page) => page.records) ?? [], 831 831 + [likesData] 832 832 + ); 833 833 + 834 834 + const { setFastState } = useFastSetLikesFromFeed(); 835 835 + const seededRef = React.useRef(new Set<string>()); 836 836 + 837 837 + useEffect(() => { 838 838 + for (const like of likes) { 839 839 + if (!seededRef.current.has(like.uri)) { 840 840 + seededRef.current.add(like.uri); 841 841 + const record = like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 842 842 + setFastState(record.subject.uri, { 843 843 + target: record.subject.uri, 844 844 + uri: like.uri, 845 845 + cid: like.cid, 846 846 + }); 847 847 + } 848 848 + } 849 849 + }, [likes, setFastState]); 850 850 + 851 851 + return ( 852 852 + <> 853 853 + <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 854 854 + Likes 855 855 + </div> 856 856 + <div> 857 857 + {likes.map((like) => { 858 858 + if ( 859 859 + !like || 860 860 + !like?.value || 861 861 + !like?.value?.subject || 862 862 + // @ts-expect-error blehhhhh 863 863 + !like?.value?.subject?.uri 864 864 + ) 865 865 + return; 866 866 + const likeRecord = 867 867 + like.value as unknown as ATPAPI.AppBskyFeedLike.Record; 868 868 + return ( 869 869 + <UniversalPostRendererATURILoader 870 870 + key={likeRecord.subject.uri} 871 871 + atUri={likeRecord.subject.uri} 872 872 + feedviewpost={true} 873 873 + /> 874 874 + ); 875 875 + })} 876 876 + </div> 877 877 + 878 878 + {/* Loading and "Load More" states */} 879 879 + {arePostsLoading && likes.length === 0 && ( 880 880 + <div className="p-4 text-center text-gray-500">Loading likes...</div> 881 881 + )} 882 882 + {isFetchingNextPage && ( 883 883 + <div className="p-4 text-center text-gray-500">Loading more...</div> 884 884 + )} 885 885 + {hasNextPage && !isFetchingNextPage && ( 886 886 + <button 887 887 + onClick={() => fetchNextPage()} 888 888 + 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" 889 889 + > 890 890 + Load More Likes 891 891 + </button> 892 892 + )} 893 893 + {likes.length === 0 && !arePostsLoading && ( 894 894 + <div className="p-4 text-center text-gray-500">No likes found.</div> 895 895 + )} 896 896 + </> 897 897 + ); 898 898 + } 899 899 + 900 900 + export function FollowButton({ 901 901 + targetdidorhandle, 902 902 + }: { 903 903 + targetdidorhandle: string; 904 904 + }) { 905 905 + const { agent } = useAuth(); 906 906 + const { data: identity } = useQueryIdentity(targetdidorhandle); 907 907 + const queryClient = useQueryClient(); 908 908 + 909 909 + const followRecords = useGetFollowState({ 910 910 + target: identity?.did ?? targetdidorhandle, 911 911 + user: agent?.did, 912 912 + }); 913 913 + 914 914 + return ( 915 915 + <> 916 916 + {identity?.did !== agent?.did ? ( 917 917 + <> 918 918 + {!(followRecords?.length && followRecords?.length > 0) ? ( 919 919 + <button 920 920 + onClick={(e) => { 921 921 + e.stopPropagation(); 922 922 + toggleFollow({ 923 923 + agent: agent || undefined, 924 924 + targetDid: identity?.did, 925 925 + followRecords: followRecords, 926 926 + queryClient: queryClient, 927 927 + }); 928 928 + }} 929 929 + 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]" 930 930 + > 931 931 + Follow 932 932 + </button> 933 933 + ) : ( 934 934 + <button 935 935 + onClick={(e) => { 936 936 + e.stopPropagation(); 937 937 + toggleFollow({ 938 938 + agent: agent || undefined, 939 939 + targetDid: identity?.did, 940 940 + followRecords: followRecords, 941 941 + queryClient: queryClient, 942 942 + }); 943 943 + }} 944 944 + 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]" 945 945 + > 946 946 + Unfollow 947 947 + </button> 948 948 + )} 949 949 + </> 950 950 + ) : ( 951 951 + <button 952 952 + 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]" 953 953 + onClick={(e) => { 954 954 + renderSnack({ 955 955 + title: "Not Implemented Yet", 956 956 + description: "Sorry...", 957 957 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 958 958 + }); 959 959 + }} 960 960 + > 961 961 + Edit Profile 962 962 + </button> 963 963 + )} 964 964 + </> 965 965 + ); 966 966 + } 967 967 + 968 968 + export function BiteButton({ 969 969 + targetdidorhandle, 970 970 + }: { 971 971 + targetdidorhandle: string; 972 972 + }) { 973 973 + const { agent } = useAuth(); 974 974 + const { data: identity } = useQueryIdentity(targetdidorhandle); 975 975 + const [show] = useAtom(enableBitesAtom); 976 976 + 977 977 + if (!show) return; 978 978 + 979 979 + return ( 980 980 + <> 981 981 + <button 982 982 + onClick={async (e) => { 983 983 + e.stopPropagation(); 984 984 + await sendBite({ 985 985 + agent: agent || undefined, 986 986 + targetDid: identity?.did, 987 987 + }); 988 988 + }} 989 989 + 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]" 990 990 + > 991 991 + Bite 992 992 + </button> 993 993 + </> 994 994 + ); 995 995 + } 996 996 + 997 997 + async function sendBite({ 998 998 + agent, 999 999 + targetDid, 1000 1000 + }: { 1001 1001 + agent?: Agent; 1002 1002 + targetDid?: string; 1003 1003 + }) { 1004 1004 + if (!agent?.did || !targetDid) { 1005 1005 + renderSnack({ 1006 1006 + title: "Bite Failed", 1007 1007 + description: "You must be logged-in to bite someone.", 1008 1008 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 1009 1009 + }); 1010 1010 + return; 1011 1011 + } 1012 1012 + const newRecord = { 1013 1013 + repo: agent.did, 1014 1014 + collection: "net.wafrn.feed.bite", 1015 1015 + rkey: TID.next().toString(), 1016 1016 + record: { 1017 1017 + $type: "net.wafrn.feed.bite", 1018 1018 + subject: "at://" + targetDid, 1019 1019 + createdAt: new Date().toISOString(), 1020 1020 + }, 1021 1021 + }; 1022 1022 + 1023 1023 + try { 1024 1024 + await agent.com.atproto.repo.createRecord(newRecord); 1025 1025 + renderSnack({ 1026 1026 + title: "Bite Sent", 1027 1027 + description: "Your bite was delivered.", 1028 1028 + //button: { label: 'Undo', onClick: () => console.log('Undo clicked') }, 1029 1029 + }); 1030 1030 + } catch (err) { 1031 1031 + console.error("Bite failed:", err); 1032 1032 + renderSnack({ 1033 1033 + title: "Bite Failed", 1034 1034 + description: "Your bite failed to be delivered.", 1035 1035 + //button: { label: 'Try Again', onClick: () => console.log('whatever') }, 1036 1036 + }); 1037 1037 + } 1038 1038 + } 1039 1039 + 1040 1040 + export function Mutual({ targetdidorhandle }: { targetdidorhandle: string }) { 1041 1041 + const { agent } = useAuth(); 1042 1042 + const { data: identity } = useQueryIdentity(targetdidorhandle); 1043 1043 + 1044 1044 + const theyFollowYouRes = useGetOneToOneState( 1045 1045 + agent?.did 1046 1046 + ? { 1047 1047 + target: agent?.did, 1048 1048 + user: identity?.did ?? targetdidorhandle, 1049 1049 + collection: "app.bsky.graph.follow", 1050 1050 + path: ".subject", 1051 1051 + } 1052 1052 + : undefined 1053 1053 + ); 1054 1054 + 1055 1055 + const youFollowThemRes = useGetFollowState({ 1056 1056 + target: identity?.did ?? targetdidorhandle, 1057 1057 + user: agent?.did, 1058 1058 + }); 1059 1059 + 1060 1060 + const theyFollowYou: boolean = 1061 1061 + !!theyFollowYouRes?.length && theyFollowYouRes.length > 0; 1062 1062 + const youFollowThem: boolean = 1063 1063 + !!youFollowThemRes?.length && youFollowThemRes.length > 0; 1064 1064 + 1065 1065 + return ( 1066 1066 + <> 1067 1067 + {/* if not self */} 1068 1068 + {identity?.did !== agent?.did ? ( 1069 1069 + <> 1070 1070 + {theyFollowYou ? ( 1071 1071 + <> 1072 1072 + {youFollowThem ? ( 1073 1073 + <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"> 1074 1074 + mutuals 1075 1075 + </div> 1076 1076 + ) : ( 1077 1077 + <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"> 1078 1078 + follows you 1079 1079 + </div> 1080 1080 + )} 1081 1081 + </> 1082 1082 + ) : ( 1083 1083 + <></> 1084 1084 + )} 1085 1085 + </> 1086 1086 + ) : ( 1087 1087 + // lmao can someone be mutuals with themselves ?? 1088 1088 + <></> 1089 1089 + )} 1090 1090 + </> 1091 1091 + ); 1092 1092 + } 1093 1093 + 1094 1094 + export function RichTextRenderer({ description }: { description: string }) { 1095 1095 + const [richDescription, setRichDescription] = useState<string | ReactNode[]>( 1096 1096 + description 1097 1097 + ); 1098 1098 + const { agent } = useAuth(); 1099 1099 + const navigate = useNavigate(); 1100 1100 + 1101 1101 + useEffect(() => { 1102 1102 + let mounted = true; 1103 1103 + 1104 1104 + // setRichDescription(description); 1105 1105 + 1106 1106 + async function processRichText() { 1107 1107 + try { 1108 1108 + if (!agent?.did) return; 1109 1109 + const rt = new RichText({ text: description }); 1110 1110 + await rt.detectFacets(agent); 1111 1111 + 1112 1112 + if (!mounted) return; 1113 1113 + 1114 1114 + if (rt.facets) { 1115 1115 + setRichDescription( 1116 1116 + renderTextWithFacets({ text: rt.text, facets: rt.facets, navigate }) 1117 1117 + ); 1118 1118 + } else { 1119 1119 + setRichDescription(rt.text); 1120 1120 + } 1121 1121 + } catch (error) { 1122 1122 + console.error("Failed to detect facets:", error); 1123 1123 + if (mounted) { 1124 1124 + setRichDescription(description); 1125 1125 + } 1126 1126 + } 1127 1127 + } 1128 1128 + 1129 1129 + processRichText(); 1130 1130 + 1131 1131 + return () => { 1132 1132 + mounted = false; 1133 1133 + }; 1134 1134 + }, [description, agent, navigate]); 1135 1135 + 1136 1136 + return <>{richDescription}</>; 1137 1137 + }

+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 disablescroll 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 + }

+100

src/routes/profile.$did/post.$rkey.liked-by.tsx

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { constellationURLAtom } from "~/utils/atoms"; 8 8 + import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 9 9 + 10 10 + import { 11 11 + EmptyState, 12 12 + ErrorState, 13 13 + LoadingState, 14 14 + NotificationItem, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/liked-by")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresults = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.like", 34 34 + path: ".subject.uri", 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + 40 40 + const { 41 41 + data: infiniteLikesData, 42 42 + fetchNextPage, 43 43 + hasNextPage, 44 44 + isFetchingNextPage, 45 45 + isLoading, 46 46 + isError, 47 47 + error, 48 48 + } = infinitequeryresults; 49 49 + 50 50 + const likesAturis = React.useMemo(() => { 51 51 + // Get all replies from the standard infinite query 52 52 + return ( 53 53 + infiniteLikesData?.pages.flatMap( 54 54 + (page) => 55 55 + page?.linking_records.map( 56 56 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 57 57 + ) ?? [] 58 58 + ) ?? [] 59 59 + ); 60 60 + }, [infiniteLikesData]); 61 61 + 62 62 + return ( 63 63 + <> 64 64 + <Header 65 65 + title={`Liked By`} 66 66 + backButtonCallback={() => { 67 67 + if (window.history.length > 1) { 68 68 + window.history.back(); 69 69 + } else { 70 70 + window.location.assign("/"); 71 71 + } 72 72 + }} 73 73 + /> 74 74 + 75 75 + <> 76 76 + {(() => { 77 77 + if (isLoading) return <LoadingState text="Loading likes..." />; 78 78 + if (isError) return <ErrorState error={error} />; 79 79 + 80 80 + if (!likesAturis?.length) 81 81 + return <EmptyState text="No likes yet." />; 82 82 + })()} 83 83 + </> 84 84 + 85 85 + {likesAturis.map((m) => ( 86 86 + <NotificationItem key={m} notification={m} /> 87 87 + ))} 88 88 + 89 89 + {hasNextPage && ( 90 90 + <button 91 91 + onClick={() => fetchNextPage()} 92 92 + disabled={isFetchingNextPage} 93 93 + 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" 94 94 + > 95 95 + {isFetchingNextPage ? "Loading..." : "Load More"} 96 96 + </button> 97 97 + )} 98 98 + </> 99 99 + ); 100 100 + }

+141

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

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 8 8 + import { constellationURLAtom } from "~/utils/atoms"; 9 9 + import { type linksRecord,useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 10 10 + 11 11 + import { 12 12 + EmptyState, 13 13 + ErrorState, 14 14 + LoadingState, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/quotes")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresultsWithoutMedia = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.post", 34 34 + path: ".embed.record.uri", // embed.record.record.uri and embed.record.uri 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + const infinitequeryresultsWithMedia = useInfiniteQuery({ 40 40 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 41 41 + { 42 42 + constellation: constellationurl, 43 43 + method: "/links", 44 44 + target: atUri, 45 45 + collection: "app.bsky.feed.post", 46 46 + path: ".embed.record.record.uri", // embed.record.record.uri and embed.record.uri 47 47 + } 48 48 + ), 49 49 + enabled: !!atUri, 50 50 + }); 51 51 + 52 52 + const { 53 53 + data: infiniteQuotesDataWithoutMedia, 54 54 + fetchNextPage: fetchNextPageWithoutMedia, 55 55 + hasNextPage: hasNextPageWithoutMedia, 56 56 + isFetchingNextPage: isFetchingNextPageWithoutMedia, 57 57 + isLoading: isLoadingWithoutMedia, 58 58 + isError: isErrorWithoutMedia, 59 59 + error: errorWithoutMedia, 60 60 + } = infinitequeryresultsWithoutMedia; 61 61 + const { 62 62 + data: infiniteQuotesDataWithMedia, 63 63 + fetchNextPage: fetchNextPageWithMedia, 64 64 + hasNextPage: hasNextPageWithMedia, 65 65 + isFetchingNextPage: isFetchingNextPageWithMedia, 66 66 + isLoading: isLoadingWithMedia, 67 67 + isError: isErrorWithMedia, 68 68 + error: errorWithMedia, 69 69 + } = infinitequeryresultsWithMedia; 70 70 + 71 71 + const fetchNextPage = async () => { 72 72 + await Promise.all([ 73 73 + hasNextPageWithMedia && fetchNextPageWithMedia(), 74 74 + hasNextPageWithoutMedia && fetchNextPageWithoutMedia(), 75 75 + ]); 76 76 + }; 77 77 + 78 78 + const hasNextPage = hasNextPageWithMedia || hasNextPageWithoutMedia; 79 79 + const isFetchingNextPage = isFetchingNextPageWithMedia || isFetchingNextPageWithoutMedia; 80 80 + const isLoading = isLoadingWithMedia || isLoadingWithoutMedia; 81 81 + 82 82 + const allQuotes = React.useMemo(() => { 83 83 + const withPages = infiniteQuotesDataWithMedia?.pages ?? []; 84 84 + const withoutPages = infiniteQuotesDataWithoutMedia?.pages ?? []; 85 85 + const maxLen = Math.max(withPages.length, withoutPages.length); 86 86 + const merged: linksRecord[] = []; 87 87 + 88 88 + for (let i = 0; i < maxLen; i++) { 89 89 + const a = withPages[i]?.linking_records ?? []; 90 90 + const b = withoutPages[i]?.linking_records ?? []; 91 91 + const mergedPage = [...a, ...b].sort((b, a) => a.rkey.localeCompare(b.rkey)); 92 92 + merged.push(...mergedPage); 93 93 + } 94 94 + 95 95 + return merged; 96 96 + }, [infiniteQuotesDataWithMedia?.pages, infiniteQuotesDataWithoutMedia?.pages]); 97 97 + 98 98 + const quotesAturis = React.useMemo(() => { 99 99 + return allQuotes.flatMap((r) => `at://${r.did}/${r.collection}/${r.rkey}`); 100 100 + }, [allQuotes]); 101 101 + 102 102 + return ( 103 103 + <> 104 104 + <Header 105 105 + title={`Quotes`} 106 106 + backButtonCallback={() => { 107 107 + if (window.history.length > 1) { 108 108 + window.history.back(); 109 109 + } else { 110 110 + window.location.assign("/"); 111 111 + } 112 112 + }} 113 113 + /> 114 114 + 115 115 + <> 116 116 + {(() => { 117 117 + if (isLoading) return <LoadingState text="Loading quotes..." />; 118 118 + if (isErrorWithMedia) return <ErrorState error={errorWithMedia} />; 119 119 + if (isErrorWithoutMedia) return <ErrorState error={errorWithoutMedia} />; 120 120 + 121 121 + if (!quotesAturis?.length) 122 122 + return <EmptyState text="No quotes yet." />; 123 123 + })()} 124 124 + </> 125 125 + 126 126 + {quotesAturis.map((m) => ( 127 127 + <UniversalPostRendererATURILoader key={m} atUri={m} /> 128 128 + ))} 129 129 + 130 130 + {hasNextPage && ( 131 131 + <button 132 132 + onClick={() => fetchNextPage()} 133 133 + disabled={isFetchingNextPage} 134 134 + 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" 135 135 + > 136 136 + {isFetchingNextPage ? "Loading..." : "Load More"} 137 137 + </button> 138 138 + )} 139 139 + </> 140 140 + ); 141 141 + }

+100

src/routes/profile.$did/post.$rkey.reposted-by.tsx

··· 1 1 + import { useInfiniteQuery } from "@tanstack/react-query"; 2 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 + import { useAtom } from "jotai"; 4 4 + import React from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import { constellationURLAtom } from "~/utils/atoms"; 8 8 + import { useQueryIdentity, yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks } from "~/utils/useQuery"; 9 9 + 10 10 + import { 11 11 + EmptyState, 12 12 + ErrorState, 13 13 + LoadingState, 14 14 + NotificationItem, 15 15 + } from "../notifications"; 16 16 + 17 17 + export const Route = createFileRoute("/profile/$did/post/$rkey/reposted-by")({ 18 18 + component: RouteComponent, 19 19 + }); 20 20 + 21 21 + function RouteComponent() { 22 22 + const { did, rkey } = Route.useParams(); 23 23 + const { data: identity } = useQueryIdentity(did); 24 24 + const atUri = identity?.did && rkey ? `at://${decodeURIComponent(identity.did)}/app.bsky.feed.post/${rkey}` : ''; 25 25 + 26 26 + const [constellationurl] = useAtom(constellationURLAtom); 27 27 + const infinitequeryresults = useInfiniteQuery({ 28 28 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 29 29 + { 30 30 + constellation: constellationurl, 31 31 + method: "/links", 32 32 + target: atUri, 33 33 + collection: "app.bsky.feed.repost", 34 34 + path: ".subject.uri", 35 35 + } 36 36 + ), 37 37 + enabled: !!atUri, 38 38 + }); 39 39 + 40 40 + const { 41 41 + data: infiniteRepostsData, 42 42 + fetchNextPage, 43 43 + hasNextPage, 44 44 + isFetchingNextPage, 45 45 + isLoading, 46 46 + isError, 47 47 + error, 48 48 + } = infinitequeryresults; 49 49 + 50 50 + const repostsAturis = React.useMemo(() => { 51 51 + // Get all replies from the standard infinite query 52 52 + return ( 53 53 + infiniteRepostsData?.pages.flatMap( 54 54 + (page) => 55 55 + page?.linking_records.map( 56 56 + (r) => `at://${r.did}/${r.collection}/${r.rkey}` 57 57 + ) ?? [] 58 58 + ) ?? [] 59 59 + ); 60 60 + }, [infiniteRepostsData]); 61 61 + 62 62 + return ( 63 63 + <> 64 64 + <Header 65 65 + title={`Reposted By`} 66 66 + backButtonCallback={() => { 67 67 + if (window.history.length > 1) { 68 68 + window.history.back(); 69 69 + } else { 70 70 + window.location.assign("/"); 71 71 + } 72 72 + }} 73 73 + /> 74 74 + 75 75 + <> 76 76 + {(() => { 77 77 + if (isLoading) return <LoadingState text="Loading reposts..." />; 78 78 + if (isError) return <ErrorState error={error} />; 79 79 + 80 80 + if (!repostsAturis?.length) 81 81 + return <EmptyState text="No reposts yet." />; 82 82 + })()} 83 83 + </> 84 84 + 85 85 + {repostsAturis.map((m) => ( 86 86 + <NotificationItem key={m} notification={m} /> 87 87 + ))} 88 88 + 89 89 + {hasNextPage && ( 90 90 + <button 91 91 + onClick={() => fetchNextPage()} 92 92 + disabled={isFetchingNextPage} 93 93 + 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" 94 94 + > 95 95 + {isFetchingNextPage ? "Loading..." : "Load More"} 96 96 + </button> 97 97 + )} 98 98 + </> 99 99 + ); 100 100 + }

+292 -137

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, useMatchRoute } 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 }) { 55 55 + const matchRoute = useMatchRoute() 56 56 + const showMainPostRoute = !!matchRoute({ to: '/profile/$did/post/$rkey' }) || !!matchRoute({ to: '/profile/$did/post/$rkey/image/$i' }) 57 57 + 44 58 //const { get, set } = usePersistentStore(); 45 59 const queryClient = useQueryClient(); 46 60 // const [resolvedDid, setResolvedDid] = React.useState<string | null>(null); ··· 179 193 data: identity, 180 194 isLoading: isIdentityLoading, 181 195 error: identityError, 182 182 - } = useQueryIdentity(did); 196 196 + } = useQueryIdentity(showMainPostRoute ? did : undefined); 183 197 184 198 const resolvedDid = did.startsWith("did:") ? did : identity?.did; 185 199 186 200 const atUri = React.useMemo( 187 201 () => 188 188 - resolvedDid 202 202 + resolvedDid && showMainPostRoute 189 203 ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` 190 190 - : "", 191 191 - [resolvedDid, rkey] 204 204 + : undefined, 205 205 + [resolvedDid, rkey, showMainPostRoute] 192 206 ); 193 207 194 194 - const { data: mainPost } = useQueryPost(atUri); 208 208 + const { data: mainPost } = useQueryPost(showMainPostRoute ? atUri : undefined); 195 209 196 196 - const { data: repliesData } = useQueryConstellation({ 197 197 - method: "/links", 210 210 + console.log("atUri",atUri) 211 211 + 212 212 + const opdid = React.useMemo( 213 213 + () => 214 214 + atUri 215 215 + ? new AtUri(atUri).host 216 216 + : undefined, 217 217 + [atUri] 218 218 + ); 219 219 + 220 220 + // @ts-expect-error i hate overloads 221 221 + const { data: links } = useQueryConstellation(atUri&&showMainPostRoute?{ 222 222 + method: "/links/all", 198 223 target: atUri, 199 199 - collection: "app.bsky.feed.post", 200 200 - path: ".reply.parent.uri", 224 224 + } : { 225 225 + method: "undefined", 226 226 + target: "" 227 227 + })as { data: linksAllResponse | undefined }; 228 228 + 229 229 + //const [likes, setLikes] = React.useState<number | null>(null); 230 230 + //const [reposts, setReposts] = React.useState<number | null>(null); 231 231 + const [replyCount, setReplyCount] = React.useState<number | null>(null); 232 232 + 233 233 + React.useEffect(() => { 234 234 + // /*mass comment*/ console.log(JSON.stringify(links, null, 2)); 235 235 + // setLikes( 236 236 + // links 237 237 + // ? links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0 238 238 + // : null 239 239 + // ); 240 240 + // setReposts( 241 241 + // links 242 242 + // ? links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0 243 243 + // : null 244 244 + // ); 245 245 + setReplyCount( 246 246 + links 247 247 + ? links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"] 248 248 + ?.records || 0 249 249 + : null 250 250 + ); 251 251 + }, [links]); 252 252 + 253 253 + const { data: opreplies } = useQueryConstellation( 254 254 + showMainPostRoute && !!opdid && replyCount && replyCount >= 25 255 255 + ? { 256 256 + method: "/links", 257 257 + target: atUri, 258 258 + // @ts-expect-error overloading sucks so much 259 259 + collection: "app.bsky.feed.post", 260 260 + path: ".reply.parent.uri", 261 261 + //cursor?: string; 262 262 + dids: [opdid], 263 263 + } 264 264 + : { 265 265 + method: "undefined", 266 266 + target: "", 267 267 + } 268 268 + ) as { data: linksRecordsResponse | undefined }; 269 269 + 270 270 + const opReplyAturis = 271 271 + opreplies?.linking_records.map( 272 272 + (r) => `at://${r.did}/${r.collection}/${r.rkey}`, 273 273 + ) ?? []; 274 274 + 275 275 + 276 276 + // const { data: repliesData } = useQueryConstellation({ 277 277 + // method: "/links", 278 278 + // target: atUri, 279 279 + // collection: "app.bsky.feed.post", 280 280 + // path: ".reply.parent.uri", 281 281 + // }); 282 282 + // const replies = repliesData?.linking_records.slice(0, 50) ?? []; 283 283 + const [constellationurl] = useAtom(constellationURLAtom) 284 284 + 285 285 + const infinitequeryresults = useInfiniteQuery({ 286 286 + ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks( 287 287 + { 288 288 + constellation: constellationurl, 289 289 + method: "/links", 290 290 + target: atUri, 291 291 + collection: "app.bsky.feed.post", 292 292 + path: ".reply.parent.uri", 293 293 + } 294 294 + ), 295 295 + enabled: !!atUri && showMainPostRoute, 201 296 }); 202 202 - const replies = repliesData?.linking_records.slice(0, 50) ?? []; 297 297 + 298 298 + const { 299 299 + data: infiniteRepliesData, 300 300 + fetchNextPage, 301 301 + hasNextPage, 302 302 + isFetchingNextPage, 303 303 + } = infinitequeryresults; 304 304 + 305 305 + // // auto-fetch all pages 306 306 + // useEffect(() => { 307 307 + // if ( 308 308 + // infinitequeryresults.hasNextPage && 309 309 + // !infinitequeryresults.isFetchingNextPage 310 310 + // ) { 311 311 + // console.log("Fetching the next page..."); 312 312 + // infinitequeryresults.fetchNextPage(); 313 313 + // } 314 314 + // }, [infinitequeryresults]); 315 315 + 316 316 + // const replyAturis = repliesData 317 317 + // ? repliesData.pages.flatMap((page) => 318 318 + // page 319 319 + // ? page.linking_records.map((record) => { 320 320 + // const aturi = `at://${record.did}/${record.collection}/${record.rkey}`; 321 321 + // return aturi; 322 322 + // }) 323 323 + // : [] 324 324 + // ) 325 325 + // : []; 326 326 + 327 327 + const replyAturis = React.useMemo(() => { 328 328 + // Get all replies from the standard infinite query 329 329 + const allReplies = 330 330 + infiniteRepliesData?.pages.flatMap( 331 331 + (page) => 332 332 + page?.linking_records.map( 333 333 + (r) => `at://${r.did}/${r.collection}/${r.rkey}`, 334 334 + ) ?? [], 335 335 + ) ?? []; 336 336 + 337 337 + if (replyCount && (replyCount < 25)) { 338 338 + // If count is low, just use the standard list and find the oldest OP reply to move to the top 339 339 + const opdidFromUri = atUri ? new AtUri(atUri).host : undefined; 340 340 + const oldestOpsIndex = allReplies.findIndex( 341 341 + (aturi) => new AtUri(aturi).host === opdidFromUri, 342 342 + ); 343 343 + if (oldestOpsIndex > 0) { 344 344 + const [oldestOpsReply] = allReplies.splice(oldestOpsIndex, 1); 345 345 + allReplies.unshift(oldestOpsReply); 346 346 + } 347 347 + return allReplies; 348 348 + } else { 349 349 + // If count is high, prioritize OP replies from the special query 350 350 + // and filter them out from the main list to avoid duplication. 351 351 + const opReplySet = new Set(opReplyAturis); 352 352 + const otherReplies = allReplies.filter((uri) => !opReplySet.has(uri)); 353 353 + return [...opReplyAturis, ...otherReplies]; 354 354 + } 355 355 + }, [infiniteRepliesData, opReplyAturis, replyCount, atUri]); 356 356 + 357 357 + // Find oldest OP reply 358 358 + const oldestOpsIndex = replyAturis.findIndex( 359 359 + (aturi) => new AtUri(aturi).host === opdid 360 360 + ); 361 361 + 362 362 + // Reorder: move oldest OP reply to the front 363 363 + if (oldestOpsIndex > 0) { 364 364 + const [oldestOpsReply] = replyAturis.splice(oldestOpsIndex, 1); 365 365 + replyAturis.unshift(oldestOpsReply); 366 366 + } 203 367 204 368 const [parents, setParents] = React.useState<any[]>([]); 205 369 const [parentsLoading, setParentsLoading] = React.useState(false); 206 370 207 371 const mainPostRef = React.useRef<HTMLDivElement>(null); 208 208 - const userHasScrolled = React.useRef(false); 372 372 + const hasPerformedInitialLayout = React.useRef(false); 209 373 210 210 - const scrollAnchor = React.useRef<{ top: number } | null>(null); 374 374 + const [layoutReady, setLayoutReady] = React.useState(false); 211 375 212 212 - React.useEffect(() => { 213 213 - const onScroll = () => { 214 214 - if (window.scrollY > 50) { 215 215 - userHasScrolled.current = true; 376 376 + useLayoutEffect(() => { 377 377 + if (!showMainPostRoute) return 378 378 + if (parents.length > 0 && !layoutReady && mainPostRef.current) { 379 379 + const mainPostElement = mainPostRef.current; 216 380 217 217 - window.removeEventListener("scroll", onScroll); 381 381 + if (window.scrollY === 0 && !hasPerformedInitialLayout.current) { 382 382 + const elementTop = mainPostElement.getBoundingClientRect().top; 383 383 + const headerOffset = 70; 384 384 + 385 385 + const targetScrollY = elementTop - headerOffset; 386 386 + 387 387 + window.scrollBy(0, targetScrollY); 388 388 + 389 389 + hasPerformedInitialLayout.current = true; 218 390 } 219 219 - }; 220 220 - 221 221 - if (!userHasScrolled.current) { 222 222 - window.addEventListener("scroll", onScroll, { passive: true }); 391 391 + 392 392 + // todo idk what to do with this 393 393 + // eslint-disable-next-line react-hooks/set-state-in-effect 394 394 + setLayoutReady(true); 223 395 } 224 224 - return () => window.removeEventListener("scroll", onScroll); 225 225 - }, []); 396 396 + }, [parents, layoutReady, showMainPostRoute]); 226 397 227 227 - useLayoutEffect(() => { 228 228 - if (parentsLoading && mainPostRef.current && !userHasScrolled.current) { 229 229 - scrollAnchor.current = { 230 230 - top: mainPostRef.current.getBoundingClientRect().top, 231 231 - }; 398 398 + 399 399 + const [slingshoturl] = useAtom(slingshotURLAtom) 400 400 + 401 401 + React.useEffect(() => { 402 402 + if (parentsLoading || !showMainPostRoute) { 403 403 + setLayoutReady(false); 232 404 } 233 233 - }, [parentsLoading]); 234 405 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; 406 406 + if (!mainPost?.value?.reply?.parent?.uri && !parentsLoading) { 407 407 + setLayoutReady(true); 408 408 + hasPerformedInitialLayout.current = true; 247 409 } 248 248 - }, [parents]); 410 410 + }, [parentsLoading, mainPost, showMainPostRoute]); 249 411 250 412 React.useEffect(() => { 251 413 if (!mainPost?.value?.reply?.parent?.uri) { ··· 264 426 while (currentParentUri && safetyCounter < MAX_PARENTS) { 265 427 try { 266 428 const parentPost = await queryClient.fetchQuery( 267 267 - constructPostQuery(currentParentUri) 429 429 + constructPostQuery(currentParentUri, slingshoturl) 268 430 ); 269 431 if (!parentPost) break; 270 432 parentChain.push(parentPost); ··· 286 448 return () => { 287 449 ignore = true; 288 450 }; 289 289 - }, [mainPost, queryClient]); 451 451 + }, [mainPost, queryClient, slingshoturl]); 290 452 291 291 - if (!did || !rkey) return <div>Invalid post URI</div>; 292 292 - if (isIdentityLoading) return <div>Resolving handle...</div>; 293 293 - if (identityError) 453 453 + if ((!did || !rkey) && showMainPostRoute) return <div>Invalid post URI</div>; 454 454 + if (isIdentityLoading && showMainPostRoute) return <div>Resolving handle...</div>; 455 455 + if (identityError && showMainPostRoute) 294 456 return <div style={{ color: "red" }}>{identityError.message}</div>; 295 295 - if (!atUri) return <div>Could not construct post URI.</div>; 457 457 + if (!atUri && showMainPostRoute) return <div>Could not construct post URI.</div>; 296 458 297 459 return ( 298 460 <> 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> 461 461 + <Outlet /> 462 462 + {showMainPostRoute && (<> 463 463 + <Header 464 464 + title={`Post`} 465 465 + backButtonCallback={() => { 466 466 + if (window.history.length > 1) { 467 467 + window.history.back(); 468 468 + } else { 469 469 + window.location.assign("/"); 470 470 + } 471 471 + }} 472 472 + /> 331 473 332 332 - {parentsLoading && ( 333 333 - <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> 334 334 - <div className="ml-4 w-[42px] flex justify-center"> 335 335 - <div 336 336 - style={{ width: 2, height: "100%", opacity: 0.5 }} 337 337 - className="bg-gray-500 dark:bg-gray-400" 338 338 - ></div> 474 474 + {parentsLoading && ( 475 475 + <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row"> 476 476 + <div className="ml-4 w-[42px] flex justify-center"> 477 477 + <div 478 478 + style={{ width: 2, height: "100%", opacity: 0.5 }} 479 479 + className="bg-gray-500 dark:bg-gray-400" 480 480 + ></div> 481 481 + </div> 482 482 + Loading conversation... 339 483 </div> 340 340 - Loading conversation... 484 484 + )} 485 485 + 486 486 + {/* we should use the reply lines here thats provided by UPR*/} 487 487 + <div style={{ maxWidth: 600, padding: 0 }}> 488 488 + {parents.map((parent, index) => ( 489 489 + <UniversalPostRendererATURILoader 490 490 + key={parent.uri} 491 491 + atUri={parent.uri} 492 492 + topReplyLine={index > 0} 493 493 + bottomReplyLine={true} 494 494 + bottomBorder={false} 495 495 + /> 496 496 + ))} 341 497 </div> 342 342 - )} 343 343 - 344 344 - {/* we should use the reply lines here thats provided by UPR*/} 345 345 - <div style={{ maxWidth: 600, padding: 0 }}> 346 346 - {parents.map((parent, index) => ( 498 498 + <div ref={mainPostRef}> 347 499 <UniversalPostRendererATURILoader 348 348 - key={parent.uri} 349 349 - atUri={parent.uri} 350 350 - topReplyLine={index > 0} 351 351 - bottomReplyLine={true} 352 352 - bottomBorder={false} 500 500 + atUri={atUri!} 501 501 + detailed={true} 502 502 + topReplyLine={parentsLoading || parents.length > 0} 503 503 + nopics={!!nopics} 504 504 + lightboxCallback={lightboxCallback} 353 505 /> 354 354 - ))} 355 355 - </div> 356 356 - <div ref={mainPostRef}> 357 357 - <UniversalPostRendererATURILoader 358 358 - atUri={atUri} 359 359 - detailed={true} 360 360 - topReplyLine={parentsLoading || parents.length > 0} 361 361 - nopics={!!nopics} 362 362 - /> 363 363 - </div> 364 364 - <div 365 365 - style={{ 366 366 - maxWidth: 600, 367 367 - //margin: "0px auto 0", 368 368 - padding: 0, 369 369 - minHeight: "100dvh", 370 370 - }} 371 371 - > 506 506 + </div> 372 507 <div 373 373 - className="text-gray-500 dark:text-gray-400 text-sm font-bold" 374 508 style={{ 375 375 - fontSize: 18, 376 376 - margin: "12px 16px 12px 16px", 377 377 - fontWeight: 600, 509 509 + maxWidth: 600, 510 510 + //margin: "0px auto 0", 511 511 + padding: 0, 512 512 + minHeight: "80dvh", 513 513 + paddingBottom: "20dvh", 378 514 }} 379 515 > 380 380 - Replies 381 381 - </div> 382 382 - <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}`; 386 386 - return ( 387 387 - <UniversalPostRendererATURILoader 388 388 - key={replyAtUri} 389 389 - atUri={replyAtUri} 390 390 - /> 391 391 - ); 392 392 - })} 516 516 + <div 517 517 + className="text-gray-500 dark:text-gray-400 text-sm font-bold" 518 518 + style={{ 519 519 + fontSize: 18, 520 520 + margin: "12px 16px 12px 16px", 521 521 + fontWeight: 600, 522 522 + }} 523 523 + > 524 524 + Replies 525 525 + </div> 526 526 + <div style={{ display: "flex", flexDirection: "column", gap: 0 }}> 527 527 + {replyAturis.length > 0 && 528 528 + replyAturis.map((reply) => { 529 529 + //const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`; 530 530 + return ( 531 531 + <UniversalPostRendererATURILoader 532 532 + key={reply} 533 533 + atUri={reply} 534 534 + maxReplies={4} 535 535 + /> 536 536 + ); 537 537 + })} 538 538 + {hasNextPage && ( 539 539 + <button 540 540 + onClick={() => fetchNextPage()} 541 541 + disabled={isFetchingNextPage} 542 542 + 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" 543 543 + > 544 544 + {isFetchingNextPage ? "Loading..." : "Load More"} 545 545 + </button> 546 546 + )} 547 547 + </div> 393 548 </div> 394 394 - </div> 549 549 + </>)} 395 550 </> 396 551 ); 397 552 }

+259 -2

src/routes/search.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 1 1 + import type { Agent } from "@atproto/api"; 2 2 + import { useQueryClient } from "@tanstack/react-query"; 3 3 + import { createFileRoute, useSearch } from "@tanstack/react-router"; 4 4 + import { useAtom } from "jotai"; 5 5 + import { useEffect,useMemo } from "react"; 6 6 + 7 7 + import { Header } from "~/components/Header"; 8 8 + import { Import } from "~/components/Import"; 9 9 + import { 10 10 + ReusableTabRoute, 11 11 + useReusableTabScrollRestore, 12 12 + } from "~/components/ReusableTabRoute"; 13 13 + import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer"; 14 14 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 15 15 + import { lycanURLAtom } from "~/utils/atoms"; 16 16 + import { 17 17 + constructLycanRequestIndexQuery, 18 18 + useInfiniteQueryLycanSearch, 19 19 + useQueryIdentity, 20 20 + useQueryLycanStatus, 21 21 + } from "~/utils/useQuery"; 22 22 + 23 23 + import { renderSnack } from "./__root"; 24 24 + import { SliderPrimitive } from "./settings"; 2 25 3 26 export const Route = createFileRoute("/search")({ 4 27 component: Search, 5 28 }); 6 29 7 30 export function Search() { 8 8 - return <div className="p-6">Search page (coming soon)</div>; 31 31 + const queryClient = useQueryClient(); 32 32 + const { agent, status } = useAuth(); 33 33 + const { data: identity } = useQueryIdentity(agent?.did); 34 34 + const [lycandomain] = useAtom(lycanURLAtom); 35 35 + const lycanExists = lycandomain !== ""; 36 36 + const { data: lycanstatusdata, refetch } = useQueryLycanStatus(); 37 37 + const lycanIndexed = lycanstatusdata?.status === "finished" || false; 38 38 + const lycanIndexing = lycanstatusdata?.status === "in_progress" || false; 39 39 + const lycanIndexingProgress = lycanIndexing 40 40 + ? lycanstatusdata?.progress 41 41 + : undefined; 42 42 + 43 43 + const authed = status === "signedIn"; 44 44 + 45 45 + const lycanReady = lycanExists && lycanIndexed && authed; 46 46 + 47 47 + const { q }: { q: string } = useSearch({ from: "/search" }); 48 48 + 49 49 + // auto-refetch Lycan status until ready 50 50 + useEffect(() => { 51 51 + if (!lycanExists || !authed) return; 52 52 + if (lycanReady) return; 53 53 + 54 54 + const interval = setInterval(() => { 55 55 + refetch(); 56 56 + }, 3000); 57 57 + 58 58 + return () => clearInterval(interval); 59 59 + }, [lycanExists, authed, lycanReady, refetch]); 60 60 + 61 61 + const maintext = !lycanExists 62 62 + ? "Sorry we dont have search. But instead, you can load some of these types of content into Red Dwarf:" 63 63 + : authed 64 64 + ? lycanReady 65 65 + ? "Lycan Search is enabled and ready! Type to search posts you've interacted with in the past. You can also load some of these types of content into Red Dwarf:" 66 66 + : "Sorry, while Lycan Search is enabled, you are not indexed. Index below please. You can load some of these types of content into Red Dwarf:" 67 67 + : "Sorry, while Lycan Search is enabled, you are unauthed. Please log in to use Lycan. You can load some of these types of content into Red Dwarf:"; 68 68 + 69 69 + async function index(opts: { 70 70 + agent?: Agent; 71 71 + isAuthed: boolean; 72 72 + pdsUrl?: string; 73 73 + feedServiceDid?: string; 74 74 + }) { 75 75 + renderSnack({ 76 76 + title: "Registering account...", 77 77 + }); 78 78 + try { 79 79 + const response = await queryClient.fetchQuery( 80 80 + constructLycanRequestIndexQuery(opts) 81 81 + ); 82 82 + if ( 83 83 + response?.message !== "Import has already started" && 84 84 + response?.message !== "Import has been scheduled" 85 85 + ) { 86 86 + renderSnack({ 87 87 + title: "Registration failed!", 88 88 + description: "Unknown server error (2)", 89 89 + }); 90 90 + } else { 91 91 + renderSnack({ 92 92 + title: "Succesfully sent registration request!", 93 93 + description: "Please wait for the server to index your account", 94 94 + }); 95 95 + refetch(); 96 96 + } 97 97 + } catch { 98 98 + renderSnack({ 99 99 + title: "Registration failed!", 100 100 + description: "Unknown server error (1)", 101 101 + }); 102 102 + } 103 103 + } 104 104 + 105 105 + return ( 106 106 + <> 107 107 + <Header 108 108 + title="Explore" 109 109 + backButtonCallback={() => { 110 110 + if (window.history.length > 1) { 111 111 + window.history.back(); 112 112 + } else { 113 113 + window.location.assign("/"); 114 114 + } 115 115 + }} 116 116 + /> 117 117 + <div className=" flex flex-col items-center mt-4 mx-4 gap-4"> 118 118 + <Import optionaltextstring={q} /> 119 119 + <div className="flex flex-col"> 120 120 + <p className="text-gray-600 dark:text-gray-400">{maintext}</p> 121 121 + <ul className="list-disc list-inside mt-2 text-gray-600 dark:text-gray-400"> 122 122 + <li> 123 123 + Bluesky URLs (from supported clients) (like{" "} 124 124 + <code className="text-sm">bsky.app</code> or{" "} 125 125 + <code className="text-sm">deer.social</code>). 126 126 + </li> 127 127 + <li> 128 128 + AT-URIs (e.g.,{" "} 129 129 + <code className="text-sm">at://did:example/collection/item</code> 130 130 + ). 131 131 + </li> 132 132 + <li> 133 133 + User Handles (like{" "} 134 134 + <code className="text-sm">@username.bsky.social</code>). 135 135 + </li> 136 136 + <li> 137 137 + DIDs (Decentralized Identifiers, starting with{" "} 138 138 + <code className="text-sm">did:</code>). 139 139 + </li> 140 140 + </ul> 141 141 + <p className="mt-2 text-gray-600 dark:text-gray-400"> 142 142 + Simply paste one of these into the import field above and press 143 143 + Enter to load the content. 144 144 + </p> 145 145 + 146 146 + {lycanExists && authed && !lycanReady ? ( 147 147 + !lycanIndexing ? ( 148 148 + <div className="mt-4 mx-auto"> 149 149 + <button 150 150 + onClick={() => 151 151 + index({ 152 152 + agent: agent || undefined, 153 153 + isAuthed: status === "signedIn", 154 154 + pdsUrl: identity?.pds, 155 155 + feedServiceDid: "did:web:" + lycandomain, 156 156 + }) 157 157 + } 158 158 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 159 159 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 160 160 + > 161 161 + Index my Account 162 162 + </button> 163 163 + </div> 164 164 + ) : ( 165 165 + <div className="mt-4 gap-2 flex flex-col"> 166 166 + <span>indexing...</span> 167 167 + <SliderPrimitive 168 168 + value={lycanIndexingProgress || 0} 169 169 + min={0} 170 170 + max={1} 171 171 + /> 172 172 + </div> 173 173 + ) 174 174 + ) : ( 175 175 + <></> 176 176 + )} 177 177 + </div> 178 178 + </div> 179 179 + {q ? <SearchTabs query={q} /> : <></>} 180 180 + </> 181 181 + ); 182 182 + } 183 183 + 184 184 + function SearchTabs({ query }: { query: string }) { 185 185 + return ( 186 186 + <div> 187 187 + <ReusableTabRoute 188 188 + route={`search` + query} 189 189 + tabs={{ 190 190 + Likes: <LycanTab query={query} type={"likes"} key={"likes"} />, 191 191 + Reposts: <LycanTab query={query} type={"reposts"} key={"reposts"} />, 192 192 + Quotes: <LycanTab query={query} type={"quotes"} key={"quotes"} />, 193 193 + Pins: <LycanTab query={query} type={"pins"} key={"pins"} />, 194 194 + }} 195 195 + /> 196 196 + </div> 197 197 + ); 198 198 + } 199 199 + 200 200 + function LycanTab({ 201 201 + query, 202 202 + type, 203 203 + }: { 204 204 + query: string; 205 205 + type: "likes" | "pins" | "reposts" | "quotes"; 206 206 + }) { 207 207 + useReusableTabScrollRestore("search" + query); 208 208 + 209 209 + const { 210 210 + data: postsData, 211 211 + fetchNextPage, 212 212 + hasNextPage, 213 213 + isFetchingNextPage, 214 214 + isLoading: arePostsLoading, 215 215 + } = useInfiniteQueryLycanSearch({ query: query, type: type }); 216 216 + 217 217 + const posts = useMemo( 218 218 + () => 219 219 + postsData?.pages.flatMap((page) => { 220 220 + if (page) { 221 221 + return page.posts; 222 222 + } else { 223 223 + return []; 224 224 + } 225 225 + }) ?? [], 226 226 + [postsData] 227 227 + ); 228 228 + 229 229 + return ( 230 230 + <> 231 231 + {/* <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4"> 232 232 + Posts 233 233 + </div> */} 234 234 + <div> 235 235 + {posts.map((post) => ( 236 236 + <UniversalPostRendererATURILoader 237 237 + key={post} 238 238 + atUri={post} 239 239 + feedviewpost={true} 240 240 + /> 241 241 + ))} 242 242 + </div> 243 243 + 244 244 + {/* Loading and "Load More" states */} 245 245 + {arePostsLoading && posts.length === 0 && ( 246 246 + <div className="p-4 text-center text-gray-500">Loading posts...</div> 247 247 + )} 248 248 + {isFetchingNextPage && ( 249 249 + <div className="p-4 text-center text-gray-500">Loading more...</div> 250 250 + )} 251 251 + {hasNextPage && !isFetchingNextPage && ( 252 252 + <button 253 253 + onClick={() => fetchNextPage()} 254 254 + 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" 255 255 + > 256 256 + Load More Posts 257 257 + </button> 258 258 + )} 259 259 + {posts.length === 0 && !arePostsLoading && ( 260 260 + <div className="p-4 text-center text-gray-500">No posts found.</div> 261 261 + )} 262 262 + </> 263 263 + ); 264 264 + 265 265 + return <></>; 9 266 }

+353 -2

src/routes/settings.tsx

··· 1 1 - import { createFileRoute } from "@tanstack/react-router"; 1 1 + import { createFileRoute, useNavigate } from "@tanstack/react-router"; 2 2 + import { useAtom, useAtomValue, useSetAtom } from "jotai"; 3 3 + import { Slider, Switch } from "radix-ui"; 4 4 + import { useEffect, useState } from "react"; 5 5 + 6 6 + import { Header } from "~/components/Header"; 7 7 + import Login from "~/components/Login"; 8 8 + import { 9 9 + constellationURLAtom, 10 10 + defaultconstellationURL, 11 11 + defaulthue, 12 12 + defaultImgCDN, 13 13 + defaultLycanURL, 14 14 + defaultslingshotURL, 15 15 + defaultVideoCDN, 16 16 + enableBitesAtom, 17 17 + enableBridgyTextAtom, 18 18 + enableWafrnTextAtom, 19 19 + hueAtom, 20 20 + imgCDNAtom, 21 21 + lycanURLAtom, 22 22 + slingshotURLAtom, 23 23 + videoCDNAtom, 24 24 + } from "~/utils/atoms"; 25 25 + 26 26 + import { MaterialNavItem } from "./__root"; 2 27 3 28 export const Route = createFileRoute("/settings")({ 4 29 component: Settings, 5 30 }); 6 31 7 32 export function Settings() { 8 8 - return <div className="p-6">Settings page (coming soon)</div>; 33 33 + const navigate = useNavigate(); 34 34 + return ( 35 35 + <> 36 36 + <Header 37 37 + title="Settings" 38 38 + backButtonCallback={() => { 39 39 + if (window.history.length > 1) { 40 40 + window.history.back(); 41 41 + } else { 42 42 + window.location.assign("/"); 43 43 + } 44 44 + }} 45 45 + /> 46 46 + <div className="lg:hidden"> 47 47 + <Login /> 48 48 + </div> 49 49 + <div className="sm:hidden flex flex-col justify-around mt-4"> 50 50 + <SettingHeading title="Other Pages" top /> 51 51 + <MaterialNavItem 52 52 + InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 53 53 + ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />} 54 54 + active={false} 55 55 + onClickCallbback={() => 56 56 + navigate({ 57 57 + to: "/feeds", 58 58 + //params: { did: agent.assertDid }, 59 59 + }) 60 60 + } 61 61 + text="Feeds" 62 62 + /> 63 63 + <MaterialNavItem 64 64 + InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />} 65 65 + ActiveIcon={<IconMdiShield className="w-6 h-6" />} 66 66 + active={false} 67 67 + onClickCallbback={() => 68 68 + navigate({ 69 69 + to: "/moderation", 70 70 + //params: { did: agent.assertDid }, 71 71 + }) 72 72 + } 73 73 + text="Moderation" 74 74 + /> 75 75 + </div> 76 76 + <div className="h-4" /> 77 77 + 78 78 + <SettingHeading title="Personalization" top /> 79 79 + <Hue /> 80 80 + 81 81 + <SettingHeading title="Network Configuration" /> 82 82 + <div className="flex flex-col px-4 pb-2"> 83 83 + <span className="text-md">Service Endpoints</span> 84 84 + <span className="text-sm text-gray-500 dark:text-gray-400"> 85 85 + Customize the servers to be used by the app 86 86 + </span> 87 87 + </div> 88 88 + <TextInputSetting 89 89 + atom={constellationURLAtom} 90 90 + title={"Constellation"} 91 91 + description={ 92 92 + "Customize the Constellation instance to be used by Red Dwarf" 93 93 + } 94 94 + init={defaultconstellationURL} 95 95 + /> 96 96 + <TextInputSetting 97 97 + atom={slingshotURLAtom} 98 98 + title={"Slingshot"} 99 99 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 100 100 + init={defaultslingshotURL} 101 101 + /> 102 102 + <TextInputSetting 103 103 + atom={imgCDNAtom} 104 104 + title={"Image CDN"} 105 105 + description={ 106 106 + "Customize the Constellation instance to be used by Red Dwarf" 107 107 + } 108 108 + init={defaultImgCDN} 109 109 + /> 110 110 + <TextInputSetting 111 111 + atom={videoCDNAtom} 112 112 + title={"Video CDN"} 113 113 + description={"Customize the Slingshot instance to be used by Red Dwarf"} 114 114 + init={defaultVideoCDN} 115 115 + /> 116 116 + <TextInputSetting 117 117 + atom={lycanURLAtom} 118 118 + title={"Lycan Search"} 119 119 + description={"Enable text search across posts you've interacted with"} 120 120 + init={defaultLycanURL} 121 121 + /> 122 122 + 123 123 + <SettingHeading title="Experimental" /> 124 124 + <SwitchSetting 125 125 + atom={enableBitesAtom} 126 126 + title={"Bites"} 127 127 + description={"Enable Wafrn Bites to bite and be bitten by other people"} 128 128 + //init={false} 129 129 + /> 130 130 + <div className="h-4" /> 131 131 + <SwitchSetting 132 132 + atom={enableBridgyTextAtom} 133 133 + title={"Bridgy Text"} 134 134 + description={ 135 135 + "Show the original text of posts bridged from the Fediverse" 136 136 + } 137 137 + //init={false} 138 138 + /> 139 139 + <div className="h-4" /> 140 140 + <SwitchSetting 141 141 + atom={enableWafrnTextAtom} 142 142 + title={"Wafrn Text"} 143 143 + description={"Show the original text of posts from Wafrn instances"} 144 144 + //init={false} 145 145 + /> 146 146 + <p className="text-gray-500 dark:text-gray-400 py-4 px-4 text-sm border rounded-xl mx-4 mt-8 mb-4"> 147 147 + Notice: Please restart/refresh the app if changes arent applying 148 148 + correctly 149 149 + </p> 150 150 + </> 151 151 + ); 152 152 + } 153 153 + 154 154 + export function SettingHeading({ 155 155 + title, 156 156 + top, 157 157 + }: { 158 158 + title: string; 159 159 + top?: boolean; 160 160 + }) { 161 161 + return ( 162 162 + <div 163 163 + className="px-4" 164 164 + style={{ marginTop: top ? 0 : 18, paddingBottom: 12 }} 165 165 + > 166 166 + <span className=" text-sm font-medium text-gray-500 dark:text-gray-400"> 167 167 + {title} 168 168 + </span> 169 169 + </div> 170 170 + ); 171 171 + } 172 172 + 173 173 + export function SwitchSetting({ 174 174 + atom, 175 175 + title, 176 176 + description, 177 177 + }: { 178 178 + atom: typeof enableBitesAtom; 179 179 + title?: string; 180 180 + description?: string; 181 181 + }) { 182 182 + const value = useAtomValue(atom); 183 183 + const setValue = useSetAtom(atom); 184 184 + 185 185 + const [hydrated, setHydrated] = useState(false); 186 186 + // eslint-disable-next-line react-hooks/set-state-in-effect 187 187 + useEffect(() => setHydrated(true), []); 188 188 + 189 189 + if (!hydrated) { 190 190 + // Avoid rendering Switch until we know storage is loaded 191 191 + return null; 192 192 + } 193 193 + 194 194 + return ( 195 195 + <div className="flex items-center gap-4 px-4 "> 196 196 + <label htmlFor={`switch-${title}`} className="flex flex-row flex-1"> 197 197 + <div className="flex flex-col"> 198 198 + <span className="text-md">{title}</span> 199 199 + <span className="text-sm text-gray-500 dark:text-gray-400"> 200 200 + {description} 201 201 + </span> 202 202 + </div> 203 203 + </label> 204 204 + 205 205 + <Switch.Root 206 206 + id={`switch-${title}`} 207 207 + checked={value} 208 208 + onCheckedChange={(v) => setValue(v)} 209 209 + className="m3switch root" 210 210 + > 211 211 + <Switch.Thumb className="m3switch thumb " /> 212 212 + </Switch.Root> 213 213 + </div> 214 214 + ); 215 215 + } 216 216 + 217 217 + function Hue() { 218 218 + const [hue, setHue] = useAtom(hueAtom); 219 219 + return ( 220 220 + <div className="flex flex-col px-4"> 221 221 + <span className="z-[2] text-md">Hue</span> 222 222 + <span className="z-[2] text-sm text-gray-500 dark:text-gray-400"> 223 223 + Change the colors of the app 224 224 + </span> 225 225 + <div className="z-[1] flex flex-row items-center gap-4"> 226 226 + <SliderComponent atom={hueAtom} max={360} /> 227 227 + <button 228 228 + onClick={() => setHue(defaulthue ?? 28)} 229 229 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 230 230 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 231 231 + > 232 232 + Reset 233 233 + </button> 234 234 + </div> 235 235 + </div> 236 236 + ); 237 237 + } 238 238 + 239 239 + export function TextInputSetting({ 240 240 + atom, 241 241 + title, 242 242 + description, 243 243 + init, 244 244 + }: { 245 245 + atom: typeof constellationURLAtom; 246 246 + title?: string; 247 247 + description?: string; 248 248 + init?: string; 249 249 + }) { 250 250 + const [value, setValue] = useAtom(atom); 251 251 + return ( 252 252 + <div className="flex flex-col gap-2 px-4 py-2"> 253 253 + {/* <div> 254 254 + {title && ( 255 255 + <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100"> 256 256 + {title} 257 257 + </h3> 258 258 + )} 259 259 + {description && ( 260 260 + <p className="text-sm text-gray-500 dark:text-gray-400"> 261 261 + {description} 262 262 + </p> 263 263 + )} 264 264 + </div> */} 265 265 + 266 266 + <div className="flex flex-row gap-2 items-center"> 267 267 + <div className="m3input-field m3input-label m3input-border size-md flex-1"> 268 268 + <input 269 269 + type="text" 270 270 + placeholder=" " 271 271 + value={value} 272 272 + onChange={(e) => setValue(e.target.value)} 273 273 + /> 274 274 + <label>{title}</label> 275 275 + </div> 276 276 + {/* <input 277 277 + type="text" 278 278 + value={value} 279 279 + onChange={(e) => setValue(e.target.value)} 280 280 + className="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 281 281 + text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400 282 282 + focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600" 283 283 + placeholder="Enter value..." 284 284 + /> */} 285 285 + <button 286 286 + onClick={() => setValue(init ?? "")} 287 287 + className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 288 288 + text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition" 289 289 + > 290 290 + Reset 291 291 + </button> 292 292 + </div> 293 293 + </div> 294 294 + ); 9 295 } 296 296 + 297 297 + interface SliderProps { 298 298 + atom: typeof hueAtom; 299 299 + min?: number; 300 300 + max?: number; 301 301 + step?: number; 302 302 + } 303 303 + 304 304 + export const SliderComponent: React.FC<SliderProps> = ({ 305 305 + atom, 306 306 + min = 0, 307 307 + max = 100, 308 308 + step = 1, 309 309 + }) => { 310 310 + const [value, setValue] = useAtom(atom); 311 311 + 312 312 + return ( 313 313 + <Slider.Root 314 314 + className="relative flex items-center w-full h-4" 315 315 + value={[value]} 316 316 + min={min} 317 317 + max={max} 318 318 + step={step} 319 319 + onValueChange={(v: number[]) => setValue(v[0])} 320 320 + > 321 321 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 322 322 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 323 323 + </Slider.Track> 324 324 + <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" /> 325 325 + </Slider.Root> 326 326 + ); 327 327 + }; 328 328 + 329 329 + 330 330 + interface SliderPProps { 331 331 + value: number; 332 332 + min?: number; 333 333 + max?: number; 334 334 + step?: number; 335 335 + } 336 336 + 337 337 + 338 338 + export const SliderPrimitive: React.FC<SliderPProps> = ({ 339 339 + value, 340 340 + min = 0, 341 341 + max = 100, 342 342 + step = 1, 343 343 + }) => { 344 344 + 345 345 + return ( 346 346 + <Slider.Root 347 347 + className="relative flex items-center w-full h-4" 348 348 + value={[value]} 349 349 + min={min} 350 350 + max={max} 351 351 + step={step} 352 352 + onValueChange={(v: number[]) => {}} 353 353 + > 354 354 + <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 355 355 + <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> 356 356 + </Slider.Track> 357 357 + <Slider.Thumb className=" hidden 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" /> 358 358 + </Slider.Root> 359 359 + ); 360 360 + };

+317 -13

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)); 34 34 + } 35 35 + 36 36 + :root { 37 37 + --link-text-color: oklch(0.5962 0.1987 var(--safe-hue)); 38 38 + /* max chroma!!! use fallback*/ 39 39 + /*--link-text-color: oklch(0.6 0.37 var(--safe-hue));*/ 29 40 } 30 41 31 42 @layer base { ··· 45 56 .using-mouse * { 46 57 outline: none !important; 47 58 } 59 59 + } 60 60 + 61 61 + .gutter{ 62 62 + scrollbar-gutter: stable both-edges; 48 63 } 49 64 50 65 @media (width >= 64rem /* 1024px */) { ··· 52 67 body:not(:has(.disablegutter)) { 53 68 scrollbar-gutter: stable both-edges !important; 54 69 } 55 55 - html:has(.disablegutter), 56 56 - body:has(.disablegutter) { 70 70 + html:has(.disablescroll), 71 71 + body:has(.disablescroll) { 57 72 scrollbar-width: none; 58 73 overflow-y: hidden; 59 74 } ··· 71 86 .scroll-none { 72 87 scrollbar-width: none; 73 88 } 89 89 + 90 90 + .dangerousFediContent { 91 91 + & a[href]{ 92 92 + text-decoration: none; 93 93 + color: var(--link-text-color); 94 94 + word-break: break-all; 95 95 + } 96 96 + } 97 97 + 98 98 + .font-inter { 99 99 + font-family: "Inter", sans-serif; 100 100 + } 101 101 + .font-roboto { 102 102 + font-family: "Roboto", sans-serif; 103 103 + } 104 104 + 105 105 + :root { 106 106 + --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50)); 107 107 + --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900)); 108 108 + } 109 109 + 110 110 + :root { 111 111 + --header-bg: var(--header-bg-light); 112 112 + } 113 113 + @media (prefers-color-scheme: dark) { 114 114 + :root { 115 115 + --header-bg: var(--header-bg-dark); 116 116 + } 117 117 + } 118 118 + 119 119 + :root { 120 120 + --shadow-opacity: calc(1 - var(--is-top)); 121 121 + --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15)); 122 122 + } 123 123 + 124 124 + 125 125 + /* m3 input */ 126 126 + :root { 127 127 + --m3input-radius: 6px; 128 128 + --m3input-border-width: .0625rem; 129 129 + --m3input-font-size: 16px; 130 130 + --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1); 131 131 + /* light theme */ 132 132 + --m3input-bg: var(--color-gray-50); 133 133 + --m3input-border-color: var(--color-gray-400); 134 134 + --m3input-label-color: var(--color-gray-500); 135 135 + --m3input-text-color: var(--color-gray-900); 136 136 + --m3input-focus-color: var(--color-gray-600); 137 137 + } 138 138 + 139 139 + @media (prefers-color-scheme: dark) { 140 140 + :root { 141 141 + --m3input-bg: var(--color-gray-950); 142 142 + --m3input-border-color: var(--color-gray-700); 143 143 + --m3input-label-color: var(--color-gray-400); 144 144 + --m3input-text-color: var(--color-gray-50); 145 145 + --m3input-focus-color: var(--color-gray-400); 146 146 + } 147 147 + } 148 148 + 149 149 + /* reset page *//* 150 150 + html, 151 151 + body { 152 152 + background: var(--m3input-bg); 153 153 + margin: 0; 154 154 + padding: 1rem; 155 155 + color: var(--m3input-text-color); 156 156 + font-family: system-ui, sans-serif; 157 157 + font-size: var(--m3input-font-size); 158 158 + }*/ 159 159 + 160 160 + /* base wrapper */ 161 161 + .m3input-field.m3input-label.m3input-border { 162 162 + position: relative; 163 163 + display: inline-block; 164 164 + width: 100%; 165 165 + /*max-width: 400px;*/ 166 166 + } 167 167 + 168 168 + /* size variants */ 169 169 + .m3input-field.size-sm { 170 170 + --m3input-h: 40px; 171 171 + } 172 172 + 173 173 + .m3input-field.size-md { 174 174 + --m3input-h: 48px; 175 175 + } 176 176 + 177 177 + .m3input-field.size-lg { 178 178 + --m3input-h: 56px; 179 179 + } 180 180 + 181 181 + .m3input-field.size-xl { 182 182 + --m3input-h: 64px; 183 183 + } 184 184 + 185 185 + .m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) { 186 186 + --m3input-h: 48px; 187 187 + } 188 188 + 189 189 + /* outlined input */ 190 190 + .m3input-field.m3input-label.m3input-border input { 191 191 + width: 100%; 192 192 + height: var(--m3input-h); 193 193 + border: var(--m3input-border-width) solid var(--m3input-border-color); 194 194 + border-radius: var(--m3input-radius); 195 195 + background: var(--m3input-bg); 196 196 + color: var(--m3input-text-color); 197 197 + font-size: var(--m3input-font-size); 198 198 + padding: 0 12px; 199 199 + box-sizing: border-box; 200 200 + outline: none; 201 201 + transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition); 202 202 + } 203 203 + 204 204 + /* focus ring */ 205 205 + .m3input-field.m3input-label.m3input-border input:focus { 206 206 + /*border-color: var(--m3input-focus-color);*/ 207 207 + border-color: var(--m3input-focus-color); 208 208 + box-shadow: 0 0 0 1px var(--m3input-focus-color); 209 209 + /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/ 210 210 + } 211 211 + 212 212 + /* label */ 213 213 + .m3input-field.m3input-label.m3input-border label { 214 214 + position: absolute; 215 215 + left: 12px; 216 216 + top: 50%; 217 217 + transform: translateY(-50%); 218 218 + background: var(--m3input-bg); 219 219 + padding: 0 .25em; 220 220 + color: var(--m3input-label-color); 221 221 + pointer-events: none; 222 222 + transition: all var(--m3input-transition); 223 223 + } 224 224 + 225 225 + /* float on focus or when filled */ 226 226 + .m3input-field.m3input-label.m3input-border input:focus+label, 227 227 + .m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label { 228 228 + top: 0; 229 229 + transform: translateY(-50%) scale(.78); 230 230 + left: 0; 231 231 + color: var(--m3input-focus-color); 232 232 + } 233 233 + 234 234 + /* placeholder trick */ 235 235 + .m3input-field.m3input-label.m3input-border input::placeholder { 236 236 + color: transparent; 237 237 + } 238 238 + 239 239 + /* radix i love you but like cmon man */ 240 240 + body[data-scroll-locked]{ 241 241 + margin-left: var(--removed-body-scroll-bar-size) !important; 242 242 + } 243 243 + 244 244 + /* radix tabs */ 245 245 + 246 246 + .m3tab[data-radix-collection-item] { 247 247 + flex: 1; 248 248 + display: flex; 249 249 + padding: 12px 8px; 250 250 + align-items: center; 251 251 + justify-content: center; 252 252 + color: var(--color-gray-500); 253 253 + font-weight: 500; 254 254 + &:hover { 255 255 + background-color: var(--color-gray-100); 256 256 + cursor: pointer; 257 257 + } 258 258 + &[aria-selected="true"] { 259 259 + color: var(--color-gray-950); 260 260 + &::before{ 261 261 + content: ""; 262 262 + position: absolute; 263 263 + width: min(80px, 80%); 264 264 + border-radius: 99px 99px 0px 0px ; 265 265 + height: 3px; 266 266 + bottom: 0; 267 267 + background-color: var(--color-gray-400); 268 268 + } 269 269 + } 270 270 + } 271 271 + 272 272 + @media (prefers-color-scheme: dark) { 273 273 + .m3tab[data-radix-collection-item] { 274 274 + color: var(--color-gray-400); 275 275 + &:hover { 276 276 + background-color: var(--color-gray-900); 277 277 + cursor: pointer; 278 278 + } 279 279 + &[aria-selected="true"] { 280 280 + color: var(--color-gray-50); 281 281 + &::before{ 282 282 + background-color: var(--color-gray-500); 283 283 + } 284 284 + } 285 285 + } 286 286 + } 287 287 + 288 288 + :root{ 289 289 + --thumb-size: 2rem; 290 290 + --root-size: 3.25rem; 291 291 + 292 292 + --switch-off-border: var(--color-gray-400); 293 293 + --switch-off-bg: var(--color-gray-200); 294 294 + --switch-off-thumb: var(--color-gray-400); 295 295 + 296 296 + 297 297 + --switch-on-bg: var(--color-gray-500); 298 298 + --switch-on-thumb: var(--color-gray-50); 299 299 + 300 300 + } 301 301 + @media (prefers-color-scheme: dark) { 302 302 + :root { 303 303 + --switch-off-border: var(--color-gray-500); 304 304 + --switch-off-bg: var(--color-gray-800); 305 305 + --switch-off-thumb: var(--color-gray-500); 306 306 + 307 307 + 308 308 + --switch-on-bg: var(--color-gray-400); 309 309 + --switch-on-thumb: var(--color-gray-700); 310 310 + } 311 311 + } 312 312 + 313 313 + .m3switch.root{ 314 314 + /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/ 315 315 + /*width: 40px; 316 316 + height: 24px;*/ 317 317 + 318 318 + inline-size: var(--root-size); 319 319 + block-size: 2rem; 320 320 + border-radius: 99999px; 321 321 + 322 322 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; 323 323 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 324 324 + transition-duration: var(--default-transition-duration); /* 150ms */ 325 325 + 326 326 + .m3switch.thumb{ 327 327 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 328 328 + 329 329 + height: var(--thumb-size); 330 330 + width: var(--thumb-size); 331 331 + display: inline-block; 332 332 + border-radius: 9999px; 333 333 + 334 334 + transform-origin: center; 335 335 + 336 336 + transition-property: transform, translate, scale, rotate; 337 337 + transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ 338 338 + transition-duration: var(--default-transition-duration); /* 150ms */ 339 339 + 340 340 + } 341 341 + 342 342 + &[aria-checked="true"] { 343 343 + box-shadow: inset 0px 0px 0px 1.8px transparent; 344 344 + background-color: var(--switch-on-bg); 345 345 + 346 346 + .m3switch.thumb{ 347 347 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 348 348 + 349 349 + background-color: var(--switch-on-thumb); 350 350 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72); 351 351 + &:active { 352 352 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 353 353 + } 354 354 + 355 355 + } 356 356 + &:active .m3switch.thumb{ 357 357 + transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); 358 358 + } 359 359 + } 360 360 + 361 361 + &[aria-checked="false"] { 362 362 + box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border); 363 363 + background-color: var(--switch-off-bg); 364 364 + .m3switch.thumb{ 365 365 + /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ 366 366 + 367 367 + background-color: var(--switch-off-thumb); 368 368 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5); 369 369 + &:active { 370 370 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 371 371 + } 372 372 + } 373 373 + &:active .m3switch.thumb{ 374 374 + transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); 375 375 + } 376 376 + } 377 377 + }

+138 -8

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'; 1 1 + import { atom, createStore, useAtomValue } from "jotai"; 2 2 + import { atomWithStorage } from "jotai/utils"; 3 3 + import { useEffect } from "react"; 4 4 + 5 5 + import { type ProfilePostsFilter } from "~/routes/profile.$did"; 4 6 5 7 export const store = createStore(); 6 8 9 9 + export const quickAuthAtom = atomWithStorage<string | null>( 10 10 + "quickAuth", 11 11 + null 12 12 + ); 13 13 + 7 14 export const selectedFeedUriAtom = atomWithStorage<string | null>( 8 8 - 'selectedFeedUri', 15 15 + "selectedFeedUri", 9 16 null 10 17 ); 11 18 12 19 //export const feedScrollPositionsAtom = atom<Record<string, number>>({}); 13 20 14 21 export const feedScrollPositionsAtom = atomWithStorage<Record<string, number>>( 15 15 - 'feedscrollpositions', 22 22 + "feedscrollpositions", 16 23 {} 17 24 ); 18 25 26 26 + type TabRouteScrollState = { 27 27 + activeTab: string; 28 28 + scrollPositions: Record<string, number>; 29 29 + }; 30 30 + /** 31 31 + * @deprecated should be safe to remove i think 32 32 + */ 33 33 + export const notificationsScrollAtom = atom<TabRouteScrollState>({ 34 34 + activeTab: "mentions", 35 35 + scrollPositions: {}, 36 36 + }); 37 37 + 38 38 + export type InteractionFilter = { 39 39 + likes: boolean; 40 40 + reposts: boolean; 41 41 + quotes: boolean; 42 42 + replies: boolean; 43 43 + showAll: boolean; 44 44 + }; 45 45 + const defaultFilters: InteractionFilter = { 46 46 + likes: true, 47 47 + reposts: true, 48 48 + quotes: true, 49 49 + replies: true, 50 50 + showAll: false, 51 51 + }; 52 52 + export const postInteractionsFiltersAtom = atomWithStorage<InteractionFilter>( 53 53 + "postInteractionsFilters", 54 54 + defaultFilters 55 55 + ); 56 56 + 57 57 + export const reusableTabRouteScrollAtom = atom<Record<string, TabRouteScrollState | undefined> | undefined>({}); 58 58 + 19 59 export const likedPostsAtom = atomWithStorage<Record<string, string>>( 20 20 - 'likedPosts', 60 60 + "likedPosts", 21 61 {} 22 62 ); 23 63 24 24 - export const agentAtom = atom<Agent|null>(null); 25 25 - export const authedAtom = atom<boolean>(false); 64 64 + export type LikeRecord = { 65 65 + uri: string; // at://did/collection/rkey 66 66 + target: string; 67 67 + cid: string; 68 68 + }; 69 69 + 70 70 + export const internalLikedPostsAtom = atomWithStorage<Record<string, LikeRecord | null>>( 71 71 + "internal-liked-posts", 72 72 + {} 73 73 + ); 74 74 + 75 75 + export const profileChipsAtom = atom<Record<string, ProfilePostsFilter | null>>({}) 76 76 + 77 77 + export const defaultconstellationURL = "constellation.microcosm.blue"; 78 78 + export const constellationURLAtom = atomWithStorage<string>( 79 79 + "constellationURL", 80 80 + defaultconstellationURL 81 81 + ); 82 82 + export const defaultslingshotURL = "slingshot.microcosm.blue"; 83 83 + export const slingshotURLAtom = atomWithStorage<string>( 84 84 + "slingshotURL", 85 85 + defaultslingshotURL 86 86 + ); 87 87 + export const defaultImgCDN = "cdn.bsky.app"; 88 88 + export const imgCDNAtom = atomWithStorage<string>("imgcdnurl", defaultImgCDN); 89 89 + export const defaultVideoCDN = "video.bsky.app"; 90 90 + export const videoCDNAtom = atomWithStorage<string>( 91 91 + "videocdnurl", 92 92 + defaultVideoCDN 93 93 + ); 94 94 + 95 95 + export const defaultLycanURL = ""; 96 96 + export const lycanURLAtom = atomWithStorage<string>( 97 97 + "lycanURL", 98 98 + defaultLycanURL 99 99 + ); 100 100 + 101 101 + export const defaulthue = 28; 102 102 + export const hueAtom = atomWithStorage<number>("hue", defaulthue); 103 103 + 104 104 + export const isAtTopAtom = atom<boolean>(true); 105 105 + 106 106 + type ComposerState = 107 107 + | { kind: "closed" } 108 108 + | { kind: "root" } 109 109 + | { kind: "reply"; parent: string } 110 110 + | { kind: "quote"; subject: string }; 111 111 + export const composerAtom = atom<ComposerState>({ kind: "closed" }); 112 112 + 113 113 + //export const agentAtom = atom<Agent | null>(null); 114 114 + //export const authedAtom = atom<boolean>(false); 115 115 + 116 116 + export function useAtomCssVar(atom: typeof hueAtom, cssVar: string) { 117 117 + const value = useAtomValue(atom); 118 118 + 119 119 + useEffect(() => { 120 120 + document.documentElement.style.setProperty(cssVar, value.toString()); 121 121 + }, [value, cssVar]); 122 122 + 123 123 + useEffect(() => { 124 124 + document.documentElement.style.setProperty(cssVar, value.toString()); 125 125 + }, []); 126 126 + } 127 127 + 128 128 + hueAtom.onMount = (setAtom) => { 129 129 + const stored = localStorage.getItem("hue"); 130 130 + if (stored != null) setAtom(Number(stored)); 131 131 + }; 132 132 + // export function initAtomToCssVar(atom: typeof hueAtom, cssVar: string) { 133 133 + // const initial = store.get(atom); 134 134 + // console.log("atom get ", initial); 135 135 + // document.documentElement.style.setProperty(cssVar, initial.toString()); 136 136 + // } 137 137 + 138 138 + 139 139 + 140 140 + // fun stuff 141 141 + 142 142 + export const enableBitesAtom = atomWithStorage<boolean>( 143 143 + "enableBitesAtom", 144 144 + false 145 145 + ); 146 146 + 147 147 + export const enableBridgyTextAtom = atomWithStorage<boolean>( 148 148 + "enableBridgyTextAtom", 149 149 + false 150 150 + ); 151 151 + 152 152 + export const enableWafrnTextAtom = atomWithStorage<boolean>( 153 153 + "enableWafrnTextAtom", 154 154 + false 155 155 + );

+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 + }

+34

src/utils/likeMutationQueue.ts

··· 1 1 + import { useAtom } from "jotai"; 2 2 + import { useCallback } from "react"; 3 3 + 4 4 + import { type LikeRecord,useLikeMutationQueue as useLikeMutationQueueFromProvider } from "~/providers/LikeMutationQueueProvider"; 5 5 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 6 6 + 7 7 + import { internalLikedPostsAtom } from "./atoms"; 8 8 + 9 9 + export function useFastLike(target: string, cid: string) { 10 10 + const { agent } = useAuth(); 11 11 + const { fastState, fastToggle, backfillState } = useLikeMutationQueueFromProvider(); 12 12 + 13 13 + const liked = fastState(target); 14 14 + const toggle = () => fastToggle(target, cid); 15 15 + /** 16 16 + * 17 17 + * @deprecated dont use it yet, will cause infinite rerenders 18 18 + */ 19 19 + const backfill = () => agent?.did && backfillState(target, agent.did); 20 20 + 21 21 + return { liked, toggle, backfill }; 22 22 + } 23 23 + 24 24 + export function useFastSetLikesFromFeed() { 25 25 + const [_, setLikedPosts] = useAtom(internalLikedPostsAtom); 26 26 + 27 27 + const setFastState = useCallback( 28 28 + (target: string, record: LikeRecord | null) => 29 29 + setLikedPosts((prev) => ({ ...prev, [target]: record })), 30 30 + [setLikedPosts] 31 31 + ); 32 32 + 33 33 + return { setFastState }; 34 34 + }

+2 -2

src/utils/oauthClient.ts

··· 1 1 import { BrowserOAuthClient, type ClientMetadata } from '@atproto/oauth-client-browser'; 2 2 3 3 - // i tried making this https://pds-nd.whey.party but cors is annoying as fuck 4 4 - const handleResolverPDS = 'https://bsky.social'; 3 3 + import resolvers from '../../public/resolvers.json' with { type: 'json' }; 4 4 + const handleResolverPDS = resolvers.resolver || 'https://bsky.social'; 5 5 6 6 // eslint-disable-next-line @typescript-eslint/ban-ts-comment 7 7 // @ts-ignore this should be fine ? the vite plugin should generate this before errors

+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 + }

+452 -137

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 7 - type UseQueryResult} from "@tanstack/react-query"; 8 8 + type UseQueryResult, 9 9 + } from "@tanstack/react-query"; 10 10 + import { useAtom } from "jotai"; 8 11 9 9 - export function constructIdentityQuery(didorhandle?: string) { 12 12 + import { useAuth } from "~/providers/UnifiedAuthProvider"; 13 13 + 14 14 + import { constellationURLAtom, lycanURLAtom, slingshotURLAtom } from "./atoms"; 15 15 + 16 16 + export function constructIdentityQuery( 17 17 + didorhandle?: string, 18 18 + slingshoturl?: string 19 19 + ) { 10 20 return queryOptions({ 11 21 queryKey: ["identity", didorhandle], 12 22 queryFn: async () => { 13 13 - if (!didorhandle) return undefined as undefined 23 23 + if (!didorhandle) return undefined as undefined; 14 24 const res = await fetch( 15 15 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 25 25 + `https://${slingshoturl}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}` 16 26 ); 17 27 if (!res.ok) throw new Error("Failed to fetch post"); 18 28 try { ··· 27 37 } 28 38 }, 29 39 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 30 30 - gcTime: /*0//*/5 * 60 * 1000, 40 40 + gcTime: /*0//*/ 5 * 60 * 1000, 31 41 }); 32 42 } 33 43 export function useQueryIdentity(didorhandle: string): UseQueryResult< ··· 39 49 }, 40 50 Error 41 51 >; 42 42 - export function useQueryIdentity(): UseQueryResult< 43 43 - undefined, 44 44 - Error 45 45 - > 46 46 - export function useQueryIdentity(didorhandle?: string): 47 47 - UseQueryResult< 48 48 - { 49 49 - did: string; 50 50 - handle: string; 51 51 - pds: string; 52 52 - signing_key: string; 53 53 - } | undefined, 54 54 - Error 55 55 - > 52 52 + export function useQueryIdentity(): UseQueryResult<undefined, Error>; 53 53 + export function useQueryIdentity(didorhandle?: string): UseQueryResult< 54 54 + | { 55 55 + did: string; 56 56 + handle: string; 57 57 + pds: string; 58 58 + signing_key: string; 59 59 + } 60 60 + | undefined, 61 61 + Error 62 62 + >; 56 63 export function useQueryIdentity(didorhandle?: string) { 57 57 - return useQuery(constructIdentityQuery(didorhandle)); 64 64 + const [slingshoturl] = useAtom(slingshotURLAtom); 65 65 + return useQuery(constructIdentityQuery(didorhandle, slingshoturl)); 58 66 } 59 67 60 60 - export function constructPostQuery(uri?: string) { 68 68 + export function constructPostQuery(uri?: string, slingshoturl?: string) { 61 69 return queryOptions({ 62 70 queryKey: ["post", uri], 63 71 queryFn: async () => { 64 64 - if (!uri) return undefined as undefined 72 72 + if (!uri) return undefined as undefined; 65 73 const res = await fetch( 66 66 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 74 74 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 67 75 ); 68 76 let data: any; 69 77 try { ··· 72 80 return undefined; 73 81 } 74 82 if (res.status === 400) return undefined; 75 75 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 83 83 + if ( 84 84 + data?.error === "InvalidRequest" && 85 85 + data.message?.includes("Could not find repo") 86 86 + ) { 76 87 return undefined; // cache “not found” 77 88 } 78 89 try { 79 90 if (!res.ok) throw new Error("Failed to fetch post"); 80 80 - return (data) as { 91 91 + return data as { 81 92 uri: string; 82 93 cid: string; 83 94 value: any; ··· 92 103 return failureCount < 2; 93 104 }, 94 105 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 95 95 - gcTime: /*0//*/5 * 60 * 1000, 106 106 + gcTime: /*0//*/ 5 * 60 * 1000, 96 107 }); 97 108 } 98 109 export function useQueryPost(uri: string): UseQueryResult< ··· 103 114 }, 104 115 Error 105 116 >; 106 106 - export function useQueryPost(): UseQueryResult< 107 107 - undefined, 108 108 - Error 109 109 - > 110 110 - export function useQueryPost(uri?: string): 111 111 - UseQueryResult< 112 112 - { 113 113 - uri: string; 114 114 - cid: string; 115 115 - value: ATPAPI.AppBskyFeedPost.Record; 116 116 - } | undefined, 117 117 - Error 118 118 - > 117 117 + export function useQueryPost(): UseQueryResult<undefined, Error>; 118 118 + export function useQueryPost(uri?: string): UseQueryResult< 119 119 + | { 120 120 + uri: string; 121 121 + cid: string; 122 122 + value: ATPAPI.AppBskyFeedPost.Record; 123 123 + } 124 124 + | undefined, 125 125 + Error 126 126 + >; 119 127 export function useQueryPost(uri?: string) { 120 120 - return useQuery(constructPostQuery(uri)); 128 128 + const [slingshoturl] = useAtom(slingshotURLAtom); 129 129 + return useQuery(constructPostQuery(uri, slingshoturl)); 121 130 } 122 131 123 123 - export function constructProfileQuery(uri?: string) { 132 132 + export function constructProfileQuery(uri?: string, slingshoturl?: string) { 124 133 return queryOptions({ 125 134 queryKey: ["profile", uri], 126 135 queryFn: async () => { 127 127 - if (!uri) return undefined as undefined 136 136 + if (!uri) return undefined as undefined; 128 137 const res = await fetch( 129 129 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 138 138 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 130 139 ); 131 140 let data: any; 132 141 try { ··· 135 144 return undefined; 136 145 } 137 146 if (res.status === 400) return undefined; 138 138 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 147 147 + if ( 148 148 + data?.error === "InvalidRequest" && 149 149 + data.message?.includes("Could not find repo") 150 150 + ) { 139 151 return undefined; // cache “not found” 140 152 } 141 153 try { 142 154 if (!res.ok) throw new Error("Failed to fetch post"); 143 143 - return (data) as { 155 155 + return data as { 144 156 uri: string; 145 157 cid: string; 146 158 value: any; ··· 155 167 return failureCount < 2; 156 168 }, 157 169 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 158 158 - gcTime: /*0//*/5 * 60 * 1000, 170 170 + gcTime: /*0//*/ 5 * 60 * 1000, 159 171 }); 160 172 } 161 173 export function useQueryProfile(uri: string): UseQueryResult< ··· 166 178 }, 167 179 Error 168 180 >; 169 169 - export function useQueryProfile(): UseQueryResult< 170 170 - undefined, 171 171 - Error 172 172 - >; 173 173 - export function useQueryProfile(uri?: string): 174 174 - UseQueryResult< 175 175 - { 181 181 + export function useQueryProfile(): UseQueryResult<undefined, Error>; 182 182 + export function useQueryProfile(uri?: string): UseQueryResult< 183 183 + | { 176 184 uri: string; 177 185 cid: string; 178 186 value: ATPAPI.AppBskyActorProfile.Record; 179 179 - } | undefined, 180 180 - Error 181 181 - > 187 187 + } 188 188 + | undefined, 189 189 + Error 190 190 + >; 182 191 export function useQueryProfile(uri?: string) { 183 183 - return useQuery(constructProfileQuery(uri)); 192 192 + const [slingshoturl] = useAtom(slingshotURLAtom); 193 193 + return useQuery(constructProfileQuery(uri, slingshoturl)); 184 194 } 185 195 186 196 // export function constructConstellationQuery( ··· 215 225 // method: "/links/all", 216 226 // target: string 217 227 // ): QueryOptions<linksAllResponse, Error>; 218 218 - export function constructConstellationQuery(query?:{ 228 228 + export function constructConstellationQuery(query?: { 229 229 + constellation: string; 219 230 method: 220 231 | "/links" 221 232 | "/links/distinct-dids" 222 233 | "/links/count" 223 234 | "/links/count/distinct-dids" 224 235 | "/links/all" 225 225 - | "undefined", 226 226 - target: string, 227 227 - collection?: string, 228 228 - path?: string, 229 229 - cursor?: string, 230 230 - dids?: string[] 231 231 - } 232 232 - ) { 236 236 + | "undefined"; 237 237 + target: string; 238 238 + collection?: string; 239 239 + path?: string; 240 240 + cursor?: string; 241 241 + dids?: string[]; 242 242 + }) { 233 243 // : QueryOptions< 234 244 // | linksRecordsResponse 235 245 // | linksDidsResponse ··· 239 249 // Error 240 250 // > 241 251 return queryOptions({ 242 242 - queryKey: ["constellation", query?.method, query?.target, query?.collection, query?.path, query?.cursor, query?.dids] as const, 252 252 + queryKey: [ 253 253 + "constellation", 254 254 + query?.method, 255 255 + query?.target, 256 256 + query?.collection, 257 257 + query?.path, 258 258 + query?.cursor, 259 259 + query?.dids, 260 260 + ] as const, 243 261 queryFn: async () => { 244 244 - if (!query || query.method === "undefined") return undefined as undefined 245 245 - const method = query.method 246 246 - const target = query.target 247 247 - const collection = query?.collection 248 248 - const path = query?.path 249 249 - const cursor = query.cursor 250 250 - const dids = query?.dids 262 262 + if (!query || query.method === "undefined") return undefined as undefined; 263 263 + const method = query.method; 264 264 + const target = query.target; 265 265 + const collection = query?.collection; 266 266 + const path = query?.path; 267 267 + const cursor = query.cursor; 268 268 + const dids = query?.dids; 251 269 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("") : ""}` 270 270 + `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 271 ); 254 272 if (!res.ok) throw new Error("Failed to fetch post"); 255 273 try { ··· 273 291 }, 274 292 // enforce short lifespan 275 293 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 276 276 - gcTime: /*0//*/5 * 60 * 1000, 294 294 + gcTime: /*0//*/ 5 * 60 * 1000, 277 295 }); 278 296 } 297 297 + // todo do more of these instead of overloads since overloads sucks so much apparently 298 298 + export function useQueryConstellationLinksCountDistinctDids(query?: { 299 299 + method: "/links/count/distinct-dids"; 300 300 + target: string; 301 301 + collection: string; 302 302 + path: string; 303 303 + cursor?: string; 304 304 + }): UseQueryResult<linksCountResponse, Error> | undefined { 305 305 + //if (!query) return; 306 306 + const [constellationurl] = useAtom(constellationURLAtom); 307 307 + const queryres = useQuery( 308 308 + constructConstellationQuery( 309 309 + query && { constellation: constellationurl, ...query } 310 310 + ) 311 311 + ) as unknown as UseQueryResult<linksCountResponse, Error>; 312 312 + if (!query) { 313 313 + return undefined as undefined; 314 314 + } 315 315 + return queryres as UseQueryResult<linksCountResponse, Error>; 316 316 + } 317 317 + 279 318 export function useQueryConstellation(query: { 280 319 method: "/links"; 281 320 target: string; ··· 338 377 > 339 378 | undefined { 340 379 //if (!query) return; 380 380 + const [constellationurl] = useAtom(constellationURLAtom); 341 381 return useQuery( 342 342 - constructConstellationQuery(query) 382 382 + constructConstellationQuery( 383 383 + query && { constellation: constellationurl, ...query } 384 384 + ) 343 385 ); 344 386 } 345 387 346 346 - type linksRecord = { 388 388 + export type linksRecord = { 347 389 did: string; 348 390 collection: string; 349 391 rkey: string; ··· 361 403 type linksCountResponse = { 362 404 total: string; 363 405 }; 364 364 - type linksAllResponse = { 406 406 + export type linksAllResponse = { 365 407 links: Record< 366 408 string, 367 409 Record< ··· 383 425 }) { 384 426 return queryOptions({ 385 427 // The query key includes all dependencies to ensure it refetches when they change 386 386 - queryKey: ["feedSkeleton", options?.feedUri, { isAuthed: options?.isAuthed, did: options?.agent?.did }], 428 428 + queryKey: [ 429 429 + "feedSkeleton", 430 430 + options?.feedUri, 431 431 + { isAuthed: options?.isAuthed, did: options?.agent?.did }, 432 432 + ], 387 433 queryFn: async () => { 388 388 - if (!options) return undefined as undefined 434 434 + if (!options) return undefined as undefined; 389 435 const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 390 436 if (isAuthed) { 391 437 // Authenticated flow 392 438 if (!agent || !pdsUrl || !feedServiceDid) { 393 393 - throw new Error("Missing required info for authenticated feed fetch."); 439 439 + throw new Error( 440 440 + "Missing required info for authenticated feed fetch." 441 441 + ); 394 442 } 395 443 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 396 444 const res = await agent.fetchHandler(url, { ··· 400 448 "Content-Type": "application/json", 401 449 }, 402 450 }); 403 403 - if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 451 451 + if (!res.ok) 452 452 + throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 404 453 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 405 454 } else { 406 455 // Unauthenticated flow (using a public PDS/AppView) 407 456 const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`; 408 457 const res = await fetch(url); 409 409 - if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`); 458 458 + if (!res.ok) 459 459 + throw new Error(`Public feed fetch failed: ${res.statusText}`); 410 460 return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema; 411 461 } 412 462 }, ··· 424 474 return useQuery(constructFeedSkeletonQuery(options)); 425 475 } 426 476 427 427 - export function constructPreferencesQuery(agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined) { 477 477 + export function constructPreferencesQuery( 478 478 + agent?: ATPAPI.Agent | undefined, 479 479 + pdsUrl?: string | undefined 480 480 + ) { 428 481 return queryOptions({ 429 429 - queryKey: ['preferences', agent?.did], 482 482 + queryKey: ["preferences", agent?.did], 430 483 queryFn: async () => { 431 484 if (!agent || !pdsUrl) throw new Error("Agent or PDS URL not available"); 432 485 const url = `${pdsUrl}/xrpc/app.bsky.actor.getPreferences`; ··· 437 490 }); 438 491 } 439 492 export function useQueryPreferences(options: { 440 440 - agent?: ATPAPI.Agent | undefined, pdsUrl?: string | undefined 493 493 + agent?: ATPAPI.Agent | undefined; 494 494 + pdsUrl?: string | undefined; 441 495 }) { 442 496 return useQuery(constructPreferencesQuery(options.agent, options.pdsUrl)); 443 497 } 444 498 445 445 - 446 446 - 447 447 - export function constructArbitraryQuery(uri?: string) { 499 499 + export function constructArbitraryQuery(uri?: string, slingshoturl?: string) { 448 500 return queryOptions({ 449 501 queryKey: ["arbitrary", uri], 450 502 queryFn: async () => { 451 451 - if (!uri) return undefined as undefined 503 503 + if (!uri) return undefined as undefined; 452 504 const res = await fetch( 453 453 - `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 505 505 + `https://${slingshoturl}/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}` 454 506 ); 455 507 let data: any; 456 508 try { ··· 459 511 return undefined; 460 512 } 461 513 if (res.status === 400) return undefined; 462 462 - if (data?.error === "InvalidRequest" && data.message?.includes("Could not find repo")) { 514 514 + if ( 515 515 + data?.error === "InvalidRequest" && 516 516 + data.message?.includes("Could not find repo") 517 517 + ) { 463 518 return undefined; // cache “not found” 464 519 } 465 520 try { 466 521 if (!res.ok) throw new Error("Failed to fetch post"); 467 467 - return (data) as { 522 522 + return data as { 468 523 uri: string; 469 524 cid: string; 470 525 value: any; ··· 479 534 return failureCount < 2; 480 535 }, 481 536 staleTime: /*0,//*/ 5 * 60 * 1000, // 5 minutes 482 482 - gcTime: /*0//*/5 * 60 * 1000, 537 537 + gcTime: /*0//*/ 5 * 60 * 1000, 483 538 }); 484 539 } 485 540 export function useQueryArbitrary(uri: string): UseQueryResult< ··· 490 545 }, 491 546 Error 492 547 >; 493 493 - export function useQueryArbitrary(): UseQueryResult< 494 494 - undefined, 495 495 - Error 496 496 - >; 548 548 + export function useQueryArbitrary(): UseQueryResult<undefined, Error>; 497 549 export function useQueryArbitrary(uri?: string): UseQueryResult< 498 498 - { 499 499 - uri: string; 500 500 - cid: string; 501 501 - value: any; 502 502 - } | undefined, 550 550 + | { 551 551 + uri: string; 552 552 + cid: string; 553 553 + value: any; 554 554 + } 555 555 + | undefined, 503 556 Error 504 557 >; 505 558 export function useQueryArbitrary(uri?: string) { 506 506 - return useQuery(constructArbitraryQuery(uri)); 559 559 + const [slingshoturl] = useAtom(slingshotURLAtom); 560 560 + return useQuery(constructArbitraryQuery(uri, slingshoturl)); 507 561 } 508 562 509 509 - export function constructFallbackNothingQuery(){ 563 563 + export function constructFallbackNothingQuery() { 510 564 return queryOptions({ 511 565 queryKey: ["nothing"], 512 566 queryFn: async () => { 513 513 - return undefined 567 567 + return undefined; 514 568 }, 515 569 }); 516 570 } ··· 524 578 }[]; 525 579 }; 526 580 527 527 - export function constructAuthorFeedQuery(did: string, pdsUrl: string) { 581 581 + export function constructAuthorFeedQuery( 582 582 + did: string, 583 583 + pdsUrl: string, 584 584 + collection: string = "app.bsky.feed.post" 585 585 + ) { 528 586 return queryOptions({ 529 529 - queryKey: ['authorFeed', did], 587 587 + queryKey: ["authorFeed", did, collection], 530 588 queryFn: async ({ pageParam }: QueryFunctionContext) => { 531 589 const limit = 25; 532 532 - 590 590 + 533 591 const cursor = pageParam as string | undefined; 534 534 - const cursorParam = cursor ? `&cursor=${cursor}` : ''; 535 535 - 536 536 - const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=app.bsky.feed.post&limit=${limit}${cursorParam}`; 537 537 - 592 592 + const cursorParam = cursor ? `&cursor=${cursor}` : ""; 593 593 + 594 594 + const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=${collection}&limit=${limit}${cursorParam}`; 595 595 + 538 596 const res = await fetch(url); 539 597 if (!res.ok) throw new Error("Failed to fetch author's posts"); 540 540 - 598 598 + 541 599 return res.json() as Promise<ListRecordsResponse>; 542 600 }, 543 601 }); 544 602 } 545 603 546 546 - export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined) { 547 547 - const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!); 548 548 - 604 604 + export function useInfiniteQueryAuthorFeed( 605 605 + did: string | undefined, 606 606 + pdsUrl: string | undefined, 607 607 + collection?: string 608 608 + ) { 609 609 + const { queryKey, queryFn } = constructAuthorFeedQuery( 610 610 + did!, 611 611 + pdsUrl!, 612 612 + collection 613 613 + ); 614 614 + 549 615 return useInfiniteQuery({ 550 616 queryKey, 551 617 queryFn, ··· 563 629 isAuthed: boolean; 564 630 pdsUrl?: string; 565 631 feedServiceDid?: string; 632 632 + // todo the hell is a unauthedfeedurl 633 633 + unauthedfeedurl?: string; 566 634 }) { 567 567 - const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options; 568 568 - 635 635 + const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid, unauthedfeedurl } = 636 636 + options; 637 637 + 569 638 return queryOptions({ 570 639 queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }], 571 571 - 572 572 - queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 640 640 + 641 641 + queryFn: async ({ 642 642 + pageParam, 643 643 + }: QueryFunctionContext): Promise<FeedSkeletonPage> => { 573 644 const cursorParam = pageParam ? `&cursor=${pageParam}` : ""; 574 574 - 575 575 - if (isAuthed) { 645 645 + 646 646 + if (isAuthed && !unauthedfeedurl) { 576 647 if (!agent || !pdsUrl || !feedServiceDid) { 577 577 - throw new Error("Missing required info for authenticated feed fetch."); 648 648 + throw new Error( 649 649 + "Missing required info for authenticated feed fetch." 650 650 + ); 578 651 } 579 652 const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 580 653 const res = await agent.fetchHandler(url, { ··· 584 657 "Content-Type": "application/json", 585 658 }, 586 659 }); 587 587 - if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 660 660 + if (!res.ok) 661 661 + throw new Error(`Authenticated feed fetch failed: ${res.statusText}`); 588 662 return (await res.json()) as FeedSkeletonPage; 589 663 } else { 590 590 - const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 664 664 + const url = `https://${unauthedfeedurl ? unauthedfeedurl : "discover.bsky.app"}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`; 591 665 const res = await fetch(url); 592 592 - if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`); 666 666 + if (!res.ok) 667 667 + throw new Error(`Public feed fetch failed: ${res.statusText}`); 593 668 return (await res.json()) as FeedSkeletonPage; 594 669 } 595 670 }, ··· 602 677 isAuthed: boolean; 603 678 pdsUrl?: string; 604 679 feedServiceDid?: string; 680 680 + unauthedfeedurl?: string; 605 681 }) { 606 682 const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options); 607 607 - 608 608 - return useInfiniteQuery({ 609 609 - queryKey, 610 610 - queryFn, 683 683 + 684 684 + return { 685 685 + ...useInfiniteQuery({ 686 686 + queryKey, 687 687 + queryFn, 688 688 + initialPageParam: undefined as never, 689 689 + getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 690 690 + staleTime: Infinity, 691 691 + refetchOnWindowFocus: false, 692 692 + enabled: 693 693 + !!options.feedUri && 694 694 + (options.isAuthed 695 695 + ? ((!!options.agent && !!options.pdsUrl) || 696 696 + !!options.unauthedfeedurl) && 697 697 + !!options.feedServiceDid 698 698 + : true), 699 699 + }), 700 700 + queryKey: queryKey, 701 701 + }; 702 702 + } 703 703 + 704 704 + export function yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(query?: { 705 705 + constellation: string; 706 706 + method: "/links"; 707 707 + target?: string; 708 708 + collection: string; 709 709 + path: string; 710 710 + staleMult?: number; 711 711 + }) { 712 712 + const safemult = query?.staleMult ?? 1; 713 713 + // console.log( 714 714 + // 'yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks', 715 715 + // query, 716 716 + // ) 717 717 + 718 718 + return infiniteQueryOptions({ 719 719 + enabled: !!query?.target, 720 720 + queryKey: [ 721 721 + "reddwarf_constellation", 722 722 + query?.method, 723 723 + query?.target, 724 724 + query?.collection, 725 725 + query?.path, 726 726 + ] as const, 727 727 + 728 728 + queryFn: async ({ pageParam }: { pageParam?: string }) => { 729 729 + if (!query || !query?.target) return undefined; 730 730 + 731 731 + const method = query.method; 732 732 + const target = query.target; 733 733 + const collection = query.collection; 734 734 + const path = query.path; 735 735 + const cursor = pageParam; 736 736 + 737 737 + const res = await fetch( 738 738 + `https://${query.constellation}${method}?target=${encodeURIComponent(target)}${ 739 739 + collection ? `&collection=${encodeURIComponent(collection)}` : "" 740 740 + }${path ? `&path=${encodeURIComponent(path)}` : ""}${ 741 741 + cursor ? `&cursor=${encodeURIComponent(cursor)}` : "" 742 742 + }` 743 743 + ); 744 744 + 745 745 + if (!res.ok) throw new Error("Failed to fetch"); 746 746 + 747 747 + return (await res.json()) as linksRecordsResponse; 748 748 + }, 749 749 + 750 750 + getNextPageParam: (lastPage) => { 751 751 + return (lastPage as any)?.cursor ?? undefined; 752 752 + }, 753 753 + initialPageParam: undefined, 754 754 + staleTime: 5 * 60 * 1000 * safemult, 755 755 + gcTime: 5 * 60 * 1000 * safemult, 756 756 + }); 757 757 + } 758 758 + 759 759 + export function useQueryLycanStatus() { 760 760 + const [lycanurl] = useAtom(lycanURLAtom); 761 761 + const { agent, status } = useAuth(); 762 762 + const { data: identity } = useQueryIdentity(agent?.did); 763 763 + return useQuery( 764 764 + constructLycanStatusCheckQuery({ 765 765 + agent: agent || undefined, 766 766 + isAuthed: status === "signedIn", 767 767 + pdsUrl: identity?.pds, 768 768 + feedServiceDid: "did:web:"+lycanurl, 769 769 + }) 770 770 + ); 771 771 + } 772 772 + 773 773 + export function constructLycanStatusCheckQuery(options: { 774 774 + agent?: ATPAPI.Agent; 775 775 + isAuthed: boolean; 776 776 + pdsUrl?: string; 777 777 + feedServiceDid?: string; 778 778 + }) { 779 779 + const { agent, isAuthed, pdsUrl, feedServiceDid } = options; 780 780 + 781 781 + return queryOptions({ 782 782 + queryKey: ["lycanStatus", { isAuthed, did: agent?.did }], 783 783 + 784 784 + queryFn: async () => { 785 785 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 786 786 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.getImportStatus`; 787 787 + const res = await agent.fetchHandler(url, { 788 788 + method: "GET", 789 789 + headers: { 790 790 + "atproto-proxy": `${feedServiceDid}#lycan`, 791 791 + "Content-Type": "application/json", 792 792 + }, 793 793 + }); 794 794 + if (!res.ok) 795 795 + throw new Error( 796 796 + `Authenticated lycan status fetch failed: ${res.statusText}` 797 797 + ); 798 798 + return (await res.json()) as statuschek; 799 799 + } 800 800 + return undefined; 801 801 + }, 802 802 + }); 803 803 + } 804 804 + 805 805 + type statuschek = { 806 806 + [key: string]: unknown; 807 807 + error?: "MethodNotImplemented"; 808 808 + message?: "Method Not Implemented"; 809 809 + status?: "finished" | "in_progress"; 810 810 + position?: string, 811 811 + progress?: number, 812 812 + 813 813 + }; 814 814 + 815 815 + //{"status":"in_progress","position":"2025-08-30T06:53:18Z","progress":0.0878319661441268} 816 816 + type importtype = { 817 817 + message?: "Import has already started" | "Import has been scheduled" 818 818 + } 819 819 + 820 820 + export function constructLycanRequestIndexQuery(options: { 821 821 + agent?: ATPAPI.Agent; 822 822 + isAuthed: boolean; 823 823 + pdsUrl?: string; 824 824 + feedServiceDid?: string; 825 825 + }) { 826 826 + const { agent, isAuthed, pdsUrl, feedServiceDid } = options; 827 827 + 828 828 + return queryOptions({ 829 829 + queryKey: ["lycanIndex", { isAuthed, did: agent?.did }], 830 830 + 831 831 + queryFn: async () => { 832 832 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 833 833 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.startImport`; 834 834 + const res = await agent.fetchHandler(url, { 835 835 + method: "POST", 836 836 + headers: { 837 837 + "atproto-proxy": `${feedServiceDid}#lycan`, 838 838 + "Content-Type": "application/json", 839 839 + }, 840 840 + }); 841 841 + if (!res.ok) 842 842 + throw new Error( 843 843 + `Authenticated lycan status fetch failed: ${res.statusText}` 844 844 + ); 845 845 + return await res.json() as importtype; 846 846 + } 847 847 + return undefined; 848 848 + }, 849 849 + }); 850 850 + } 851 851 + 852 852 + type LycanSearchPage = { 853 853 + terms: string[]; 854 854 + posts: string[]; 855 855 + cursor?: string; 856 856 + }; 857 857 + 858 858 + 859 859 + export function useInfiniteQueryLycanSearch(options: { query: string, type: "likes" | "pins" | "reposts" | "quotes"}) { 860 860 + 861 861 + 862 862 + const [lycanurl] = useAtom(lycanURLAtom); 863 863 + const { agent, status } = useAuth(); 864 864 + const { data: identity } = useQueryIdentity(agent?.did); 865 865 + 866 866 + const { queryKey, queryFn } = constructLycanSearchQuery({ 867 867 + agent: agent || undefined, 868 868 + isAuthed: status === "signedIn", 869 869 + pdsUrl: identity?.pds, 870 870 + feedServiceDid: "did:web:"+lycanurl, 871 871 + query: options.query, 872 872 + type: options.type, 873 873 + }) 874 874 + 875 875 + return { 876 876 + ...useInfiniteQuery({ 877 877 + queryKey, 878 878 + queryFn, 879 879 + initialPageParam: undefined as never, 880 880 + getNextPageParam: (lastPage) => lastPage?.cursor as null | undefined, 881 881 + //staleTime: Infinity, 882 882 + refetchOnWindowFocus: false, 883 883 + // enabled: 884 884 + // !!options.feedUri && 885 885 + // (options.isAuthed 886 886 + // ? ((!!options.agent && !!options.pdsUrl) || 887 887 + // !!options.unauthedfeedurl) && 888 888 + // !!options.feedServiceDid 889 889 + // : true), 890 890 + }), 891 891 + queryKey: queryKey, 892 892 + }; 893 893 + } 894 894 + 895 895 + 896 896 + export function constructLycanSearchQuery(options: { 897 897 + agent?: ATPAPI.Agent; 898 898 + isAuthed: boolean; 899 899 + pdsUrl?: string; 900 900 + feedServiceDid?: string; 901 901 + type: "likes" | "pins" | "reposts" | "quotes"; 902 902 + query: string; 903 903 + }) { 904 904 + const { agent, isAuthed, pdsUrl, feedServiceDid, type, query } = options; 905 905 + 906 906 + return infiniteQueryOptions({ 907 907 + queryKey: ["lycanSearch", query, type, { isAuthed, did: agent?.did }], 908 908 + 909 909 + queryFn: async ({ 910 910 + pageParam, 911 911 + }: QueryFunctionContext): Promise<LycanSearchPage | undefined> => { 912 912 + if (isAuthed && agent && pdsUrl && feedServiceDid) { 913 913 + const url = `${pdsUrl}/xrpc/blue.feeds.lycan.searchPosts?query=${query}&collection=${type}${pageParam ? `&cursor=${pageParam}` : ""}`; 914 914 + const res = await agent.fetchHandler(url, { 915 915 + method: "GET", 916 916 + headers: { 917 917 + "atproto-proxy": `${feedServiceDid}#lycan`, 918 918 + "Content-Type": "application/json", 919 919 + }, 920 920 + }); 921 921 + if (!res.ok) 922 922 + throw new Error( 923 923 + `Authenticated lycan status fetch failed: ${res.statusText}` 924 924 + ); 925 925 + return (await res.json()) as LycanSearchPage; 926 926 + } 927 927 + return undefined; 928 928 + }, 611 929 initialPageParam: undefined as never, 612 612 - getNextPageParam: (lastPage) => lastPage.cursor as null | undefined, 613 613 - staleTime: Infinity, 614 614 - refetchOnWindowFocus: false, 615 615 - enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true), 930 930 + getNextPageParam: (lastPage) => lastPage?.cursor as null | undefined, 616 931 }); 617 617 - } 932 932 + }

+8 -2

vite.config.ts

··· 10 10 11 11 import { generateMetadataPlugin } from "./oauthdev.mts"; 12 12 13 13 - const PROD_URL = "https://reddwarf.whey.party" 13 13 + const PROD_URL = "https://reddwarf.app" 14 14 const DEV_URL = "https://local3768forumtest.whey.party" 15 15 + 16 16 + const PROD_HANDLE_RESOLVER_PDS = "https://pds-nd.whey.party" 17 17 + const DEV_HANDLE_RESOLVER_PDS = "https://bsky.social" 15 18 16 19 function shp(url: string): string { 17 20 return url.replace(/^https?:\/\//, ''); ··· 23 26 generateMetadataPlugin({ 24 27 prod: PROD_URL, 25 28 dev: DEV_URL, 29 29 + prodResolver: PROD_HANDLE_RESOLVER_PDS, 30 30 + devResolver: DEV_HANDLE_RESOLVER_PDS, 26 31 }), 27 32 TanStackRouterVite({ autoCodeSplitting: true }), 28 33 viteReact({ ··· 39 44 IconsResolver({ 40 45 prefix: 'Icon', 41 46 extension: 'jsx', 47 47 + enabledCollections: ['mdi','material-symbols'], 42 48 }), 43 49 ], 44 50 dts: 'src/auto-imports.d.ts', 45 51 }), 46 52 Icons({ 47 47 - autoInstall: true, 53 53 + //autoInstall: true, 48 54 compiler: 'jsx', 49 55 jsx: 'react' 50 56 }),