show song category on main pageHEADmain

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;
 `;