A decentralized music tracking and discovery platform built on AT Protocol 🎵

Replace Link with anchor and tweak UI styles

Remove @tanstack/react-router Link; use <a> with href derived from
row.uri (strip "app.rocksky." host). Uppercase table headers,
adjust opacity to 85%, and format listeners with thousand separators.

+12 -20
+12 -20
apps/web/src/pages/charts/weekly/Weekly.tsx
··· 1 import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic"; 2 import { useTopArtistsQuery } from "../../../hooks/useLibrary"; 3 - import { Link } from "@tanstack/react-router"; 4 import Artist from "../../../components/Icons/Artist"; 5 import { getLastDays } from "../../../lib/date"; 6 import dayjs from "dayjs"; ··· 53 style: { 54 backgroundColor: "var(--color-background) !important", 55 color: "var(--color-text) !important", 56 - opacity: "90%", 57 }, 58 }, 59 TableBodyRow: { ··· 76 }, 77 }} 78 > 79 - <TableBuilderColumn header="Artist"> 80 {(row: ArtistRow) => ( 81 <div className="flex flex-row items-center"> 82 <div> ··· 84 {row.index + 1} 85 </div> 86 </div> 87 - <Link 88 - to="/$did/artist/$rkey" 89 - params={{ 90 - did: row.uri?.split("at://")[1]?.split("/")[0] || "", 91 - rkey: row.uri?.split("/").pop() || "", 92 - }} 93 > 94 {!!row.picture && ( 95 <img ··· 106 </div> 107 </div> 108 )} 109 - </Link> 110 <div> 111 - <Link 112 - to="/$did/artist/$rkey" 113 - params={{ 114 - did: row.uri?.split("at://")[1]?.split("/")[0] || "", 115 - rkey: row.uri?.split("/").pop() || "", 116 - }} 117 className="no-underline !text-[var(--color-text)]" 118 > 119 {row.name} 120 - </Link> 121 </div> 122 </div> 123 )} 124 </TableBuilderColumn> 125 - <TableBuilderColumn header="Listeners"> 126 {(row: ArtistRow) => ( 127 <div className="flex flex-row items-center"> 128 - {numeral(row.uniqueListeners).format("0.0")} 129 </div> 130 )} 131 </TableBuilderColumn> 132 - <TableBuilderColumn header="Scrobbles"> 133 {(row: ArtistRow) => ( 134 <div className="flex flex-row items-center"> 135 {numeral(row.scrobbles).format("0,0")}
··· 1 import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic"; 2 import { useTopArtistsQuery } from "../../../hooks/useLibrary"; 3 import Artist from "../../../components/Icons/Artist"; 4 import { getLastDays } from "../../../lib/date"; 5 import dayjs from "dayjs"; ··· 52 style: { 53 backgroundColor: "var(--color-background) !important", 54 color: "var(--color-text) !important", 55 + opacity: "85%", 56 }, 57 }, 58 TableBodyRow: { ··· 75 }, 76 }} 77 > 78 + <TableBuilderColumn header="ARTIST"> 79 {(row: ArtistRow) => ( 80 <div className="flex flex-row items-center"> 81 <div> ··· 83 {row.index + 1} 84 </div> 85 </div> 86 + <a 87 + href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`} 88 + className="no-underline !text-[var(--color-text)]" 89 > 90 {!!row.picture && ( 91 <img ··· 102 </div> 103 </div> 104 )} 105 + </a> 106 <div> 107 + <a 108 + href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`} 109 className="no-underline !text-[var(--color-text)]" 110 > 111 {row.name} 112 + </a> 113 </div> 114 </div> 115 )} 116 </TableBuilderColumn> 117 + <TableBuilderColumn header="LISTENERS"> 118 {(row: ArtistRow) => ( 119 <div className="flex flex-row items-center"> 120 + {numeral(row.uniqueListeners).format("0,0")} 121 </div> 122 )} 123 </TableBuilderColumn> 124 + <TableBuilderColumn header="SCROBBLES"> 125 {(row: ArtistRow) => ( 126 <div className="flex flex-row items-center"> 127 {numeral(row.scrobbles).format("0,0")}