working to improve the clap format

src/app/api/media/[mediaId]/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse, NextRequest } from "next/server"
 
 import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType";
 
 export async function GET(req: NextRequest) {
   const mediaId = req.url.split("/").pop() || ""

src/app/api/video/[videoId]/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse, NextRequest } from "next/server"
 
 import { getVideo } from "@/app/server/actions/ai-tube-hf/getVideo"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType";
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType";
 
 /**
  * @deprecated

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { Roboto } from 'next/font/google'
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils/cn'
 
 import './globals.css'
 import Head from 'next/head'

src/app/main.tsx

@@ -1,20 +1,22 @@
 "use client"
 
+import { useEffect } from "react"
+import { usePathname, useRouter } from "next/navigation"
+
+import { ChannelInfo, MediaInfo } from "@/types/general"
+import { getCollectionKey } from "@/lib/business/getCollectionKey"
+
 import { useStore } from "./state/useStore"
 import { HomeView } from "./views/home-view"
 import { PublicChannelsView } from "./views/public-channels-view"
 import { PublicChannelView } from "./views/public-channel-view"
 import { UserChannelView } from "./views/user-channel-view"
-import { PublicVideoView } from "./views/public-video-view"
 import { UserAccountView } from "./views/user-account-view"
 import { NotFoundView } from "./views/not-found-view"
-import { ChannelInfo, MediaInfo } from "@/types/general"
-import { useEffect } from "react"
-import { usePathname, useRouter } from "next/navigation"
-import { TubeLayout } from "./interface/tube-layout"
+import { TubeLayout } from "../components/interface/tube-layout"
 import { PublicMusicVideosView } from "./views/public-music-videos-view"
-import { getCollectionKey } from "@/lib/getCollectionKey"
-import { PublicVideoEmbedView } from "./views/public-video-embed-view"
+import { PublicMediaEmbedView } from "./views/public-media-embed-view"
+import { PublicMediaView } from "./views/public-media-view"
 
 // this is where we transition from the server-side space
 // and the client-side space
@@ -139,12 +141,12 @@ export function Main({
   return (
     <TubeLayout>
       {view === "home" && <HomeView />}
-      {view === "public_video_embed" && <PublicVideoEmbedView />}
-      {view === "public_video" && <PublicVideoView />}
+      {view === "public_media_embed" && <PublicMediaEmbedView />}
+      {view === "public_media" && <PublicMediaView />}
       {view === "public_music_videos" && <PublicMusicVideosView />}
       {view === "public_channels" && <PublicChannelsView />}
       {view === "public_channel" && <PublicChannelView />}
-      {/*view === "user_videos" && <UserVideosView />*/}
+      {/*view === "user_medias" && <UserMediasView />*/}
       {view === "user_channel" && <UserChannelView />}
       {view === "user_account" && <UserAccountView />}
       {view === "not_found" && <NotFoundView />}

src/app/server/actions/ai-tube-hf/deleteFileFromDataset.ts

@@ -1,4 +1,4 @@
-import { deleteFile } from "@/huggingface/hub/src"
+import { deleteFile } from "@/lib/huggingface/hub/src"
 
 import { getCredentials } from "./getCredentials"
 

src/app/server/actions/ai-tube-hf/downloadClapProject.ts

@@ -1,10 +1,10 @@
 import { v4 as uuidv4 } from "uuid"
-import { Credentials } from "@/huggingface/hub/src"
+import { Credentials } from "@/lib/huggingface/hub/src"
 
-import { ClapProject } from "@/clap/types"
+import { ClapProject } from "@/lib/clap/types"
 import { ChannelInfo, MediaInfo, VideoRequest } from "@/types/general"
 import { defaultVideoModel } from "@/app/config"
-import { parseClap } from "@/clap/parseClap"
+import { parseClap } from "@/lib/clap/parseClap"
 
 import { parseVideoModelName } from "../utils/parseVideoModelName"
 import { computeOrientationProjectionWidthHeight } from "../utils/computeOrientationProjectionWidthHeight"

src/app/server/actions/ai-tube-hf/downloadFileAsBlob.ts

@@ -1,4 +1,4 @@
-import { downloadFile } from "@/huggingface/hub/src"
+import { downloadFile } from "@/lib/huggingface/hub/src"
 import { getCredentials } from "./getCredentials"
 
 export async function downloadFileAsBlob({

src/app/server/actions/ai-tube-hf/downloadFileAsText.ts

@@ -1,4 +1,4 @@
-import { downloadFile } from "@/huggingface/hub/src"
+import { downloadFile } from "@/lib/huggingface/hub/src"
 import { getCredentials } from "./getCredentials"
 
 export async function downloadFileAsText({

src/app/server/actions/ai-tube-hf/getCredentials.ts

@@ -1,7 +1,7 @@
 
 // safe way to get the credentials
 
-import { Credentials, WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 
 import { adminCredentials, adminUsername } from "../config"
 

src/app/server/actions/ai-tube-hf/getPrivateChannels.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { Credentials, listDatasets, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, listDatasets, whoAmI } from "@/lib/huggingface/hub/src"
 import { ChannelInfo } from "@/types/general"
 
 import { adminCredentials } from "../config"

src/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel.ts

@@ -2,7 +2,7 @@
 
 import { ChannelInfo, VideoRequest } from "@/types/general"
 import { getCredentials } from "./getCredentials"
-import { listFiles } from "@/huggingface/hub/src"
+import { listFiles } from "@/lib/huggingface/hub/src"
 import { parsePromptFileName } from "../utils/parsePromptFileName"
 import { downloadFileAsText } from "./downloadFileAsText"
 import { parseDatasetPrompt } from "../utils/parseDatasetPrompt"

src/app/server/actions/ai-tube-hf/parseChannel.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, downloadFile, whoAmI } from "@/lib/huggingface/hub/src"
 import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
 import { ChannelInfo, VideoGenerationModel, VideoOrientation } from "@/types/general"
 

src/app/server/actions/ai-tube-hf/uploadVideoRequestToDataset.ts

@@ -2,7 +2,7 @@
 
 import { Blob } from "buffer"
 
-import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
+import { Credentials, uploadFile, whoAmI } from "@/lib/huggingface/hub/src"
 import { ChannelInfo, VideoGenerationModel, MediaInfo, VideoOrientation, VideoRequest } from "@/types/general"
 import { formatPromptFileName } from "../utils/formatPromptFileName"
 import { computeOrientationProjectionWidthHeight } from "../utils/computeOrientationProjectionWidthHeight"

src/app/server/actions/comments.ts

@@ -3,7 +3,7 @@
 import { v4 as uuidv4 } from "uuid"
 
 import { CommentInfo, StoredCommentInfo } from "@/types/general"
-import { stripHtml } from "@/lib/stripHtml"
+import { stripHtml } from "@/lib/utils/stripHtml"
 import { getCurrentUser, getUsers } from "./users"
 import { redis } from "./redis"
 

src/app/server/actions/config.ts

@@ -1,5 +1,5 @@
 
-import { Credentials } from "@/huggingface/hub/src"
+import { Credentials } from "@/lib/huggingface/hub/src"
 
 export const adminApiKey = `${process.env.ADMIN_HUGGING_FACE_API_TOKEN || ""}`
 export const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`

src/app/server/actions/stats.ts

@@ -1,7 +1,7 @@
 "use server"
 
 import { developerMode } from "@/app/config"
-import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 import { MediaRating } from "@/types/general"
 import { redis } from "./redis";
 

src/app/server/actions/users.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+import { WhoAmIUser, whoAmI } from "@/lib/huggingface/hub/src"
 import {  UserInfo } from "@/types/general"
 import { adminApiKey } from "./config"
 import { redis } from "./redis"

src/app/server/actions/utils/censorship.ts

@@ -3,7 +3,7 @@
 // for some naked anime stuff or whatever
 // I also want to avoid a PR scandal due to some bad user generated content
 
-import { computeSecretFingerprint } from "@/lib/computeSecretFingerprint"
+import { computeSecretFingerprint } from "@/lib/utils/computeSecretFingerprint"
 
 // those keywords have been generated by looking at the logs of the panorama and the AI Comic Factory
 // those are real requests some users tried to attempt.. :|

src/app/state/useStore.ts

@@ -105,8 +105,8 @@ export const useStore = create<{
   setPathname: (pathname: string) => {
     const routes: Record<string, InterfaceView> = {
       "/": "home",
-      "/watch": "public_video",
-      "/embed": "public_video_embed",
+      "/watch": "public_media",
+      "/embed": "public_media_embed",
       "/music": "public_music_videos",
       "/channels": "public_channels",
       "/channel": "public_channel",

src/app/views/home-view/index.tsx

@@ -3,10 +3,10 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
-import { VideoList } from "@/app/interface/video-list"
+import { VideoList } from "@/components/interface/video-list"
 import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
 import { extendVideosWithStats } from "@/app/server/actions/ai-tube-hf/extendVideosWithStats"
 
@@ -34,7 +34,7 @@ export function HomeView() {
   }, [currentTag])
 
   const handleSelect = (video: MediaInfo) => {
-    setView("public_video")
+    setView("public_media")
     setPublicVideo(video)
   }
 

src/app/views/not-found-view/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export function NotFoundView() {
   return (

src/app/views/public-channel-view/index.tsx

@@ -3,9 +3,9 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { VideoList } from "@/app/interface/video-list"
-import { DefaultAvatar } from "@/app/interface/default-avatar"
+import { cn } from "@/lib/utils/cn"
+import { VideoList } from "@/components/interface/video-list"
+import { DefaultAvatar } from "@/components/interface/default-avatar"
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()

src/app/views/public-channels-view/index.tsx

@@ -3,9 +3,9 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
-import { ChannelList } from "@/app/interface/channel-list"
+import { ChannelList } from "@/components/interface/channel-list"
 
 export function PublicChannelsView() {
   const [_isPending, startTransition] = useTransition()

src/app/views/{public-video-embed-view → public-media-embed-view}/index.tsx

@@ -3,12 +3,12 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { MediaPlayer } from "@/app/interface/media-player"
+import { cn } from "@/lib/utils/cn"
+import { MediaPlayer } from "@/components/interface/media-player"
 
 import { countNewMediaView } from "@/app/server/actions/stats"
 
-export function PublicVideoEmbedView() {
+export function PublicMediaEmbedView() {
   const [_pending, startTransition] = useTransition()
 
   // current time in the media

src/app/views/{public-video-view → public-media-view}/index.tsx

@@ -11,30 +11,29 @@ import { BiCameraMovie } from "react-icons/bi"
 import { useLocalStorage } from "usehooks-ts"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
-import { ActionButton, actionButtonClassName } from "@/app/interface/action-button"
-import { RecommendedVideos } from "@/app/interface/recommended-videos"
+import { ActionButton, actionButtonClassName } from "@/components/interface/action-button"
+import { RecommendedVideos } from "@/components/interface/recommended-videos"
 import { isCertifiedUser } from "@/app/certification"
 import { countNewMediaView } from "@/app/server/actions/stats"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
-import { DefaultAvatar } from "@/app/interface/default-avatar"
-import { LikeButton } from "@/app/interface/like-button"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
+import { DefaultAvatar } from "@/components/interface/default-avatar"
+import { LikeButton } from "@/components/interface/like-button"
 
 import { ReportModal } from "../report-modal"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
-import { CommentList } from "@/app/interface/comment-list"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
+import { CommentList } from "@/components/interface/comment-list"
 import { Input } from "@/components/ui/input"
 
 import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 import { getComments, submitComment } from "@/app/server/actions/comments"
 import { useCurrentUser } from "@/app/state/useCurrentUser"
-import { parseMediaProjectionType } from "@/lib/parseMediaProjectionType"
-import { MediaPlayer } from "@/app/interface/media-player"
+import { parseMediaProjectionType } from "@/lib/utils/parseMediaProjectionType"
+import { MediaPlayer } from "@/components/interface/media-player"
 
-// TODO: rename to PublicMediaView
-export function PublicVideoView() {
+export function PublicMediaView() {
   const [_pending, startTransition] = useTransition()
 
   const [commentDraft, setCommentDraft] = useState("")

src/app/views/public-music-videos-view/index.tsx

@@ -3,12 +3,12 @@
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
-import { TrackList } from "@/app/interface/track-list"
-import { PlaylistControl } from "@/app/interface/playlist-control"
-import { usePlaylist } from "@/lib/usePlaylist"
+import { TrackList } from "@/components/interface/track-list"
+import { PlaylistControl } from "@/components/interface/playlist-control"
+import { usePlaylist } from "@/lib/hooks/usePlaylist"
 
 export function PublicMusicVideosView() {
   const [_isPending, startTransition] = useTransition()

src/app/views/report-modal/index.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
 
 import { ChannelInfo, MediaInfo } from "@/types/general"
-import { ActionButton } from "@/app/interface/action-button"
+import { ActionButton } from "@/components/interface/action-button"
 
 // modal to report a media or channel
 export function ReportModal({

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

@@ -3,8 +3,8 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
-import { ChannelList } from "@/app/interface/channel-list"
+import { cn } from "@/lib/utils/cn"
+import { ChannelList } from "@/components/interface/channel-list"
 
 import { getPrivateChannels } from "@/app/server/actions/ai-tube-hf/getPrivateChannels"
 import { useCurrentUser } from "@/app/state/useCurrentUser"

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

@@ -3,7 +3,7 @@
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { VideoGenerationModel, MediaInfo } from "@/types/general"
 
 import { useLocalStorage } from "usehooks-ts"
@@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { submitVideoRequest } from "@/app/server/actions/submitVideoRequest"
-import { PendingVideoList } from "@/app/interface/pending-video-list"
+import { PendingVideoList } from "@/components/interface/pending-video-list"
 import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 import { parseVideoModelName } from "@/app/server/actions/utils/parseVideoModelName"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

src/{app → components}/interface/about/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { AiOutlineQuestionCircle } from "react-icons/ai"
 
 export function About() {

src/{app → components}/interface/action-button/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export const actionButtonClassName = cn(
   `flex flex-row space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-3 lg:pr-4 h-8 lg:h-9`,

src/{app → components}/interface/channel-card/index.tsx

@@ -3,11 +3,11 @@ import { useState } from "react"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 import { IoAdd } from "react-icons/io5"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { ChannelInfo } from "@/types/general"
 import { isCertifiedUser } from "@/app/certification"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export function ChannelCard({
   channel,

src/{app → components}/interface/channel-list/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { ChannelInfo } from "@/types/general"
 
 import { ChannelCard } from "../channel-card"

src/{app → components}/interface/collection-card/index.tsx

@@ -4,14 +4,14 @@ import { useState } from "react"
 import Link from "next/link"
 import { RiCheckboxCircleFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CollectionInfo } from "@/types/general"
-import { formatDuration } from "@/lib/formatDuration"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatDuration } from "@/lib/formatters/formatDuration"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { isCertifiedUser } from "@/app/certification"
-import { transparentImage } from "@/lib/transparentImage"
+import { transparentImage } from "@/lib/utils/transparentImage"
 import { DefaultAvatar } from "../default-avatar"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export function CollectionCard({
   collection,

src/{app → components}/interface/collection-list/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CollectionInfo } from "@/types/general"
 
 import { CollectionCard } from "../collection-card"

src/{app → components}/interface/comment-card/index.tsx

@@ -1,8 +1,8 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CommentInfo } from "@/types/general"
 import { useEffect, useState } from "react"
 import { DefaultAvatar } from "../default-avatar"
-import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
 import { CommentWithTimeSeeks } from "./time-seeker"
 
 export function CommentCard({

src/{app → components}/interface/comment-list/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { CommentInfo } from "@/types/general"
 import { CommentCard } from "../comment-card"
 

src/{app → components}/interface/equirectangular-video-player/index.tsx

@@ -2,7 +2,7 @@
 
 import AutoSizer from "react-virtualized-auto-sizer"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 
 import { VideoSphereViewer } from "./viewer"

src/{app → components}/interface/equirectangular-video-player/viewer.tsx

@@ -14,7 +14,7 @@ import { VideoPlugin } from "@photo-sphere-viewer/video-plugin"
 import "@photo-sphere-viewer/settings-plugin/index.css"
 import "@photo-sphere-viewer/video-plugin/index.css"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { MediaInfo } from "@/types/general"
 
 export function VideoSphereViewer({

src/components/interface/latent-engine/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from "react"
+import { useLatentEngine } from "./useLatentEngine"
+import { mockClap } from "@/lib/clap/mockClap"
+import { Gsplat } from "../gsplat"
+
+export type LatentEngineStatus =
+  | "idle"
+  | "loading"
+  | "loaded"
+  | "failed"
+
+export function LatentEngine({
+  url,
+  width,
+  height,
+  className = "" }: {
+  url: string
+  width?: number
+  height?: number
+  className?: string
+}) {
+  const le = useLatentEngine()
+
+  useEffect(() => {
+    if (!le.loaded) {
+      console.log("let's load an experience")
+      le.load(mockClap())
+    }
+  }, [le.loaded])
+
+  return (
+    <div style={{ width, height }} className={className}>
+      {/* <Gsplat /> */}
+    </div>
+  );
+}

src/components/interface/latent-engine/useLatentEngine.ts

@@ -0,0 +1,26 @@
+"use client"
+
+import { create } from "zustand"
+
+import { ClapProject } from "@/lib/clap/types"
+import { newClap } from "@/lib/clap/newClap"
+
+export type LatentEngineStore = {
+  clap: ClapProject
+  loaded: boolean
+  load: (clap: ClapProject) => void
+}
+
+export const useLatentEngine = create<LatentEngineStore>((set, get) => ({
+  clap: newClap(),
+  loaded: false,
+
+  // TODO: add a loader for either a Clap or a LatentScript
+
+  load: (clap: ClapProject) => {
+    set({
+      clap,
+      loaded: true
+    })
+  },
+}))

src/{app → components}/interface/left-menu/index.tsx

@@ -9,7 +9,7 @@ import { CgProfile } from "react-icons/cg"
 import { MdOutlinePlayCircleOutline } from "react-icons/md";
 
 import { useStore } from "@/app/state/useStore"
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 import { showBetaFeatures } from "@/app/config"
 
 import { MenuItem } from "./menu-item"
@@ -89,8 +89,8 @@ export function LeftMenu() {
       )}>
         {/*<MenuItem
           icon={<MdVideoLibrary className="h-6 w-6" />}
-          selected={view === "user_videos"}
-          onClick={() => setView("user_videos")}
+          selected={view === "user_medias"}
+          onClick={() => setView("user_medias")}
           >
           My Videos
         </MenuItem>

src/{app → components}/interface/left-menu/menu-item/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils/cn"
 
 export function MenuItem({
   icon = null,

src/{app → components}/interface/like-button/generic.tsx

@@ -3,8 +3,8 @@ import { RiThumbUpFill } from "react-icons/ri"
 import { RiThumbDownLine } from "react-icons/ri"
 import { RiThumbDownFill } from "react-icons/ri"
 
-import { cn } from "@/lib/utils"
-import { formatLargeNumber } from "@/lib/formatLargeNumber"
+import { cn } from "@/lib/utils/cn"
+import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
 
 export const likeButtonClassName = cn(
   `flex flex-row`,