diff options
| -rw-r--r-- | src/app/(main)/page.tsx | 21 | ||||
| -rw-r--r-- | src/app/components/sidebar.tsx | 2 | ||||
| -rw-r--r-- | src/app/context/auth.tsx | 1 | ||||
| -rw-r--r-- | src/app/page.styles.ts | 15 |
4 files changed, 23 insertions, 16 deletions
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 45af528..41e8088 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -28,6 +28,7 @@ import { CardInfo, CardTitle, CardSub, + CardTag, EmptyState, TypingGlobalStyle, } from "../page.styles"; @@ -40,11 +41,12 @@ interface ChartRecord { lrc: string; media: string; offset: number; + category: string; } export default function TypingPage() { - const { user, signOut } = useAuth(); + const { user } = useAuth(); const [charts, setCharts] = useState<ChartRecord[]>([]); const [search, setSearch] = useState(""); @@ -59,8 +61,9 @@ export default function TypingPage() { const filtered = normalizedSearch ? charts.filter( (item) => - item.title.toLowerCase().includes(normalizedSearch) || - item.artist.toLowerCase().includes(normalizedSearch), + item.title.includes(normalizedSearch) || + item.artist.includes(normalizedSearch) || + item.category.includes(normalizedSearch) ) : charts; @@ -91,16 +94,9 @@ export default function TypingPage() { </SearchBox> </NavCenter> - <NavRight> + <NavRight>f {user ? ( - <> - <span style={{ fontSize: 13, color: "#b0b3bd", padding: "0 6px", maxWidth: 140, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> - {user.username || user.name} - </span> - <NavCtaLink href="#" onClick={(e) => { e.preventDefault(); signOut(); }}> - Sign out - </NavCtaLink> - </> + null ) : ( <NavCtaLink href="/signin">Sign in</NavCtaLink> )} @@ -130,6 +126,7 @@ export default function TypingPage() { <CardInfo> <CardTitle>{item.title}</CardTitle> <CardSub>{item.artist}</CardSub> + <CardTag>{item.category}</CardTag> </CardInfo> </CardMeta> </Card> diff --git a/src/app/components/sidebar.tsx b/src/app/components/sidebar.tsx index 0185048..37a9176 100644 --- a/src/app/components/sidebar.tsx +++ b/src/app/components/sidebar.tsx @@ -167,7 +167,7 @@ export function Sidebar() { <Footer> {user ? ( <> - <Username $collapsed={collapsed}>{user.username || user.name}</Username> + <Username $collapsed={collapsed}>{user.name}</Username> <AuthButton $collapsed={collapsed} onClick={signOut}> <LogOut size={16} /> <Label $collapsed={collapsed}>Sign out</Label> diff --git a/src/app/context/auth.tsx b/src/app/context/auth.tsx index 934198e..da1ab04 100644 --- a/src/app/context/auth.tsx +++ b/src/app/context/auth.tsx @@ -48,7 +48,6 @@ export function AuthProvider({ children }: { children: React.ReactNode }) { const normalizedUsername = username.trim(); await pb.collection("users").create({ email, - username: normalizedUsername, name: normalizedUsername, password, passwordConfirm, diff --git a/src/app/page.styles.ts b/src/app/page.styles.ts index 468566a..d3bad8b 100644 --- a/src/app/page.styles.ts +++ b/src/app/page.styles.ts @@ -9,7 +9,6 @@ import { NavCtaLink as BaseNavCtaLink, } from "./styles/shared"; -// ── Base components (previously in the old app/page.styles.ts) ─────────────── const BaseNavLeft = styled.div` display: flex; @@ -206,6 +205,12 @@ const BaseCardSub = styled.span` line-height: 1.3; `; +const BaseCardTag = styled.span` + font-size: 10px; + color: #909090; + line-height: 1.3; +`; + const BaseEmptyState = styled.div` grid-column: 1 / -1; padding: 48px 0; @@ -214,7 +219,6 @@ const BaseEmptyState = styled.div` color: #909090; `; -// ── Dark-themed exports ─────────────────────────────────────────────────────── export { GridContainer as BaseGridContainer }; @@ -327,6 +331,13 @@ export const CardSub = styled(BaseCardSub)` color: #9aa0ad; `; +export const CardTag = styled(BaseCardTag)` + display: inline-block; + color: #b8bcc7; + font-size: 10px; + white-space: nowrap; +`; + export const EmptyState = styled(BaseEmptyState)` color: #9aa0ad; `; |