wip

src/app/account/page.tsx

@@ -0,0 +1,6 @@
+
+import { Main } from "../main"
+
+export default async function AccountPage() {
+  return (<Main />)
+}

src/app/channel/page.tsx

@@ -1,5 +1,7 @@
 import { Main } from "../main"
+import { getChannel } from "../server/actions/ai-tube-hf/getChannel"
 
 export default async function ChannelPage() {
+  // const channel = await getChannel({ channelId, neverThrow: true })
   return (<Main />)
 }

src/app/channels/page.tsx

@@ -1,8 +1,3 @@
-import { useEffect, useState, useTransition } from "react"
-import Head from "next/head"
-import Script from "next/script"
-import { Metadata, ResolvingMetadata } from "next"
-
 
 import { Main } from "../main"
 

src/app/interface/channel-card/index.tsx

@@ -1,6 +1,10 @@
+import { useState } from "react"
+
 import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
 
+const defaultChannelThumbnail = "/huggingface-avatar.jpeg"
+
 export function ChannelCard({
   channel,
   onClick,
@@ -10,6 +14,17 @@ export function ChannelCard({
   onClick?: (channel: ChannelInfo) => void
   className?: string
  }) {
+  const [channelThumbnail, setChannelThumbnail] = useState(channel.thumbnail)
+
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail !== defaultChannelThumbnail) {
+        setChannelThumbnail(defaultChannelThumbnail)
+      }
+    } catch (err) {
+      
+    }
+  }
 
   return (
   <div
@@ -37,7 +52,10 @@ export function ChannelCard({
           `w-26 h-26`
         )}
       >
-        <img src={channel.thumbnail} />
+        <img
+          src={channelThumbnail}
+          onError={handleBadChannelThumbnail}
+        />
       </div>
 
       <div className={cn(

src/app/interface/channel-list/index.tsx

@@ -29,7 +29,7 @@ export function ChannelList({
     <div
       className={cn(
         layout === "grid"
-          ? `grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
+          ? `grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7`
           : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
         className,
       )}

src/app/interface/left-menu/index.tsx

@@ -35,8 +35,6 @@ export function LeftMenu() {
           <MenuItem
             icon={<RiHome8Line className="h-6 w-6" />}
             selected={view === "home"}
-            // </Link>onClick={() => setView("home")}
-            // onClick={() => setCurrentVideo(undefiend)}
             >
             Discover
           </MenuItem>
@@ -45,7 +43,6 @@ export function LeftMenu() {
           <MenuItem
             icon={<GrChannel className="h-5 w-5" />}
             selected={view === "public_channels"}
-            // onClick={() => setView("public_channels")}
             >
             Channels
           </MenuItem>
@@ -63,13 +60,14 @@ export function LeftMenu() {
           My Videos
         </MenuItem>
       */}
-        {showBetaFeatures && <MenuItem
-          icon={<CgProfile className="h-6 w-6" />}
-          selected={view === "user_channels"}
-          onClick={() => setView("user_channels")}
-          >
-          Account
-        </MenuItem>}
+        <Link href="/account">
+          <MenuItem
+            icon={<CgProfile className="h-6 w-6" />}
+            selected={view === "user_channels"}
+            >
+            Account
+          </MenuItem>
+        </Link>
       </div>
     </div>
     )

src/app/main.tsx

@@ -54,6 +54,8 @@ export function Main({
   }, [videoId])
 
 
+  // this is critical: it sync the current route (coming from server-side)
+  // with the zustand state manager
   useEffect(() => {
     setPathname(pathname)
   }, [pathname])

src/app/state/useStore.ts

@@ -61,9 +61,10 @@ export const useStore = create<{
     const routes: Record<string, InterfaceView> = {
       "/": "home",
       "/watch": "public_video",
-      "/channels": "public_channels"
+      "/channels": "public_channels",
+      "/account": "user_account"
     }
-    console.log("setPathname: ", pathname)
+
     set({ view: routes[pathname] || "not_found" })
   },
 

src/app/views/user-account-view/index.tsx

@@ -18,6 +18,12 @@ export function UserAccountView() {
     <div className={cn(
       `flex flex-col space-y-4`
     )}>
+      {/*
+      <div className="flex flex-col space-y-2 max-w-4xl">
+        <p>Do you want your model to be featured?</p>
+        <p>If it's free and open-source, tell me about it, I might be able to add it!</p>
+      </div>
+      */}
       <div className="flex flex-col space-y-2 max-w-4xl">
         <div className="flex flex-row space-x-2 items-center">
           <label className="flex w-64">Hugging Face token:</label>
@@ -36,8 +42,11 @@ export function UserAccountView() {
         </p>
       </div>
       {huggingfaceApiKey
-        ? <p>You are ready to go!</p>
-        : <p>Please setup your account (see above) to get started</p>}
+        ? <><p>You are ready to go for the beta!</p>
+          <p>Please contact HF user <span className="text-xs font-mono bg-neutral-600 rounded-lg py-1 px-1.5">@jbilcke-hf</span> to learn how to create your own channel!</p></>
+        : <><p>This project is in beta, you will be invited to contact HF user <span className="text-xs font-mono bg-neutral-600 rounded-lg py-1 px-1.5">@jbilcke-hf</span> to get started.</p>
+          <p>But you can already setup your account (see above) to get started.</p></>}
+      
     </div>
   )
 }

src/types.ts

@@ -427,6 +427,7 @@ export type AppQueryProps = {
   params: { id: string }
   searchParams: {
     v?: string | string[],
+    c?: string | string[],
     [key: string]: string | string[] | undefined
   }
 }