diff --git a/app/globals.css b/app/globals.css index 6b8508af..696d0810 100644 --- a/app/globals.css +++ b/app/globals.css @@ -52,6 +52,15 @@ html.dark { --bg-subtle: rgba(255,255,255,0.04); } +.catppuccin-file-icon { + display: block; + flex-shrink: 0; + background: center / contain no-repeat var(--catppuccin-icon-light); +} +html.dark .catppuccin-file-icon { + background-image: var(--catppuccin-icon-dark); +} + /* Theme toggle: circular wipe via View Transitions API. Disable the UA cross-fade; the actual clip-path animation is driven by Element.animate() in hooks/useTheme.ts after transition.ready resolves. */ diff --git a/components/FileIcons.tsx b/components/FileIcons.tsx index 6ce7a9a6..b46d21a9 100644 --- a/components/FileIcons.tsx +++ b/components/FileIcons.tsx @@ -1,249 +1,126 @@ -// Flat monochrome file & folder icons — all use currentColor / var(--text-dim) +import type { CSSProperties } from "react"; + interface IconProps { size?: number; } -const DIM = "var(--text-dim)"; +type CatppuccinIconName = + | "_file" + | "_folder" + | "_folder_open" + | "bash" + | "config" + | "css" + | "database" + | "docker" + | "env" + | "git" + | "graphql" + | "html" + | "javascript" + | "javascript-react" + | "json" + | "lock" + | "npm-lock" + | "bun-lock" + | "next" + | "eslint" + | "markdown" + | "ms-word" + | "pdf" + | "python" + | "rust" + | "sass" + | "terraform" + | "toml" + | "typescript" + | "typescript-react" + | "yaml" + | "go"; -// ── Folder ──────────────────────────────────────────────────────────────── +const CATPPUCCIN_ICONS_ROOT = "/icons/catppuccin"; -export function FolderIcon({ size = 14, open = false }: IconProps & { open?: boolean }) { - if (open) { - return ( - - - - - ); - } - return ( - - - - ); -} - -// ── Generic file (fallback) ──────────────────────────────────────────────── +function CatppuccinIcon({ name, size = 14 }: IconProps & { name: CatppuccinIconName }) { + const style = { + width: size, + height: size, + "--catppuccin-icon-light": `url(${CATPPUCCIN_ICONS_ROOT}/latte/${name}.svg)`, + "--catppuccin-icon-dark": `url(${CATPPUCCIN_ICONS_ROOT}/mocha/${name}.svg)`, + } as CSSProperties; -export function GenericFileIcon({ size = 14 }: IconProps) { return ( - - - - +