@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/file-icon.tsx

@@ -0,0 +1,588 @@
+import type { Component, JSX } from "solid-js"
+import { createMemo, createUniqueId, splitProps, Show } from "solid-js"
+import sprite from "./file-icons/sprite.svg"
+import type { IconName } from "./file-icons/types"
+
+export type FileIconProps = JSX.GSVGAttributes<SVGSVGElement> & {
+  node: { path: string; type: "file" | "directory" }
+  expanded?: boolean
+  mono?: boolean
+}
+
+export const FileIcon: Component<FileIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"])
+  const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
+  const id = `file-icon-mono-${createUniqueId()}`
+  return (
+    <svg
+      data-component="file-icon"
+      {...rest}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Show when={local.mono} fallback={<use href={`${sprite}#${name()}`} />}>
+        <defs>
+          <mask id={id} mask-type="alpha">
+            <use href={`${sprite}#${name()}`} />
+          </mask>
+        </defs>
+        <rect width="100%" height="100%" fill="currentColor" mask={`url(#${id})`} />
+      </Show>
+    </svg>
+  )
+}
+
+type IconMaps = {
+  fileNames: Record<string, IconName>
+  fileExtensions: Record<string, IconName>
+  folderNames: Record<string, IconName>
+  defaults: {
+    file: IconName
+    folder: IconName
+    folderOpen: IconName
+  }
+}
+
+const ICON_MAPS: IconMaps = {
+  fileNames: {
+    // Documentation files
+    "readme.md": "Readme",
+    "changelog.md": "Changelog",
+    "contributing.md": "Contributing",
+    "conduct.md": "Conduct",
+    license: "Certificate",
+    authors: "Authors",
+    credits: "Credits",
+    install: "Installation",
+
+    // Node.js files
+    "package.json": "Nodejs",
+    "package-lock.json": "Nodejs",
+    "yarn.lock": "Yarn",
+    "pnpm-lock.yaml": "Pnpm",
+    "bun.lock": "Bun",
+    "bun.lockb": "Bun",
+    "bunfig.toml": "Bun",
+    ".nvmrc": "Nodejs",
+    ".node-version": "Nodejs",
+
+    // Docker files
+    dockerfile: "Docker",
+    "docker-compose.yml": "Docker",
+    "docker-compose.yaml": "Docker",
+    ".dockerignore": "Docker",
+
+    // Config files
+    "jest.config.js": "Jest",
+    "jest.config.ts": "Jest",
+    "jest.config.mjs": "Jest",
+    "vitest.config.js": "Vitest",
+    "vitest.config.ts": "Vitest",
+    "tailwind.config.js": "Tailwindcss",
+    "tailwind.config.ts": "Tailwindcss",
+    "turbo.json": "Turborepo",
+    "tsconfig.json": "Tsconfig",
+    "jsconfig.json": "Jsconfig",
+    ".eslintrc": "Eslint",
+    ".eslintrc.js": "Eslint",
+    ".eslintrc.json": "Eslint",
+    ".prettierrc": "Prettier",
+    ".prettierrc.js": "Prettier",
+    ".prettierrc.json": "Prettier",
+    "vite.config.js": "Vite",
+    "vite.config.ts": "Vite",
+    "webpack.config.js": "Webpack",
+    "rollup.config.js": "Rollup",
+    "astro.config.mjs": "AstroConfig",
+    "astro.config.js": "AstroConfig",
+    "next.config.js": "Next",
+    "next.config.mjs": "Next",
+    "nuxt.config.js": "Nuxt",
+    "nuxt.config.ts": "Nuxt",
+    "svelte.config.js": "Svelte",
+    "gatsby-config.js": "Gatsby",
+    "remix.config.js": "Remix",
+    "prisma.schema": "Prisma",
+    ".gitignore": "Git",
+    ".gitattributes": "Git",
+    makefile: "Makefile",
+    cmake: "Cmake",
+    "cargo.toml": "Rust",
+    "go.mod": "GoMod",
+    "go.sum": "GoMod",
+    "requirements.txt": "Python",
+    "pyproject.toml": "Python",
+    pipfile: "Python",
+    "poetry.lock": "Poetry",
+    gemfile: "Gemfile",
+    rakefile: "Ruby",
+    "composer.json": "Php",
+    "build.gradle": "Gradle",
+    "pom.xml": "Maven",
+    "deno.json": "Deno",
+    "deno.jsonc": "Deno",
+    "vercel.json": "Vercel",
+    "netlify.toml": "Netlify",
+    ".env": "Tune",
+    ".env.local": "Tune",
+    ".env.development": "Tune",
+    ".env.production": "Tune",
+    ".env.example": "Tune",
+    ".editorconfig": "Editorconfig",
+    "robots.txt": "Robots",
+    "favicon.ico": "Favicon",
+    browserlist: "Browserlist",
+    ".babelrc": "Babel",
+    "babel.config.js": "Babel",
+    "gulpfile.js": "Gulp",
+    "gruntfile.js": "Grunt",
+    "capacitor.config.json": "Capacitor",
+    "ionic.config.json": "Ionic",
+    "angular.json": "Angular",
+    ".storybook": "Storybook",
+    "storybook.config.js": "Storybook",
+    "cypress.config.js": "Cypress",
+    "playwright.config.js": "Playwright",
+    "puppeteer.config.js": "Puppeteer",
+    "wrangler.toml": "Wrangler",
+    "firebase.json": "Firebase",
+    supabase: "Supabase",
+    terraform: "Terraform",
+    kubernetes: "Kubernetes",
+    ".gitpod.yml": "Gitpod",
+    ".devcontainer": "Vscode",
+    "travis.yml": "Travis",
+    "appveyor.yml": "Appveyor",
+    ".circleci": "Circleci",
+    "renovate.json": "Renovate",
+    "dependabot.yml": "Dependabot",
+    "lerna.json": "Lerna",
+    "nx.json": "Nx",
+  },
+  fileExtensions: {
+    // Test files
+    "spec.ts": "TestTs",
+    "test.ts": "TestTs",
+    "spec.tsx": "TestJsx",
+    "test.tsx": "TestJsx",
+    "spec.js": "TestJs",
+    "test.js": "TestJs",
+    "spec.jsx": "TestJsx",
+    "test.jsx": "TestJsx",
+
+    // JavaScript/TypeScript
+    "js.map": "JavascriptMap",
+    "d.ts": "TypescriptDef",
+    ts: "Typescript",
+    tsx: "React_ts",
+    js: "Javascript",
+    jsx: "React",
+    mjs: "Javascript",
+    cjs: "Javascript",
+
+    // Web languages
+    html: "Html",
+    htm: "Html",
+    css: "Css",
+    scss: "Sass",
+    sass: "Sass",
+    less: "Less",
+    styl: "Stylus",
+
+    // Data formats
+    json: "Json",
+    xml: "Xml",
+    yml: "Yaml",
+    yaml: "Yaml",
+    toml: "Toml",
+    hjson: "Hjson",
+
+    // Documentation
+    md: "Markdown",
+    mdx: "Mdx",
+    tex: "Tex",
+
+    // Programming languages
+    py: "Python",
+    pyx: "Python",
+    pyw: "Python",
+    rs: "Rust",
+    go: "Go",
+    java: "Java",
+    kt: "Kotlin",
+    scala: "Scala",
+    php: "Php",
+    rb: "Ruby",
+    cs: "Csharp",
+    vb: "Visualstudio",
+    cpp: "Cpp",
+    cc: "Cpp",
+    cxx: "Cpp",
+    c: "C",
+    h: "H",
+    hpp: "Hpp",
+    swift: "Swift",
+    m: "ObjectiveC",
+    mm: "ObjectiveCpp",
+    dart: "Dart",
+    lua: "Lua",
+    pl: "Perl",
+    r: "R",
+    jl: "Julia",
+    hs: "Haskell",
+    elm: "Elm",
+    ml: "Ocaml",
+    clj: "Clojure",
+    cljs: "Clojure",
+    erl: "Erlang",
+    ex: "Elixir",
+    exs: "Elixir",
+    nim: "Nim",
+    zig: "Zig",
+    v: "Vlang",
+    odin: "Odin",
+    gleam: "Gleam",
+    grain: "Grain",
+    roc: "Rocket",
+    fs: "Fsharp",
+
+    // Shell scripts
+    sh: "Console",
+    bash: "Console",
+    zsh: "Console",
+    fish: "Console",
+    ps1: "Powershell",
+
+    // Config/build files
+    cfg: "Settings",
+    ini: "Settings",
+    conf: "Settings",
+    properties: "Settings",
+
+    // Media files
+    svg: "Svg",
+    png: "Image",
+    jpg: "Image",
+    jpeg: "Image",
+    gif: "Image",
+    webp: "Image",
+    bmp: "Image",
+    ico: "Favicon",
+    mp4: "Video",
+    mov: "Video",
+    avi: "Video",
+    webm: "Video",
+    mp3: "Audio",
+    wav: "Audio",
+    flac: "Audio",
+
+    // Archive files
+    zip: "Zip",
+    tar: "Zip",
+    gz: "Zip",
+    rar: "Zip",
+    "7z": "Zip",
+
+    // Document files
+    pdf: "Pdf",
+    doc: "Word",
+    docx: "Word",
+    ppt: "Powerpoint",
+    pptx: "Powerpoint",
+    xls: "Document",
+    xlsx: "Document",
+
+    // Database files
+    sql: "Database",
+    db: "Database",
+    sqlite: "Database",
+
+    // Other
+    env: "Tune",
+    log: "Log",
+    lock: "Lock",
+    key: "Key",
+    pem: "Certificate",
+    crt: "Certificate",
+    proto: "Proto",
+    graphql: "Graphql",
+    gql: "Graphql",
+    wasm: "Webassembly",
+    dockerfile: "Docker",
+  },
+  folderNames: {
+    // Source code
+    src: "FolderSrc",
+    source: "FolderSrc",
+    lib: "FolderLib",
+    libs: "FolderLib",
+
+    // Testing
+    test: "FolderTest",
+    tests: "FolderTest",
+    testing: "FolderTest",
+    spec: "FolderTest",
+    specs: "FolderTest",
+    __tests__: "FolderTest",
+    e2e: "FolderTest",
+    integration: "FolderTest",
+    unit: "FolderTest",
+    cypress: "FolderCypress",
+
+    // Dependencies
+    node_modules: "FolderNode",
+    vendor: "FolderPackages",
+    packages: "FolderPackages",
+    deps: "FolderPackages",
+
+    // Build/dist
+    build: "FolderBuildkite",
+    dist: "FolderDist",
+    out: "FolderDist",
+    output: "FolderDist",
+    target: "FolderTarget",
+
+    // Configuration
+    config: "FolderConfig",
+    configs: "FolderConfig",
+    configuration: "FolderConfig",
+    settings: "FolderConfig",
+    env: "FolderEnvironment",
+    environments: "FolderEnvironment",
+
+    // Docker
+    docker: "FolderDocker",
+    dockerfiles: "FolderDocker",
+    containers: "FolderDocker",
+
+    // Documentation
+    docs: "FolderDocs",
+    doc: "FolderDocs",
+    documentation: "FolderDocs",
+    readme: "FolderDocs",
+
+    // Public/assets
+    public: "FolderPublic",
+    static: "FolderPublic",
+    assets: "FolderImages",
+    images: "FolderImages",
+    img: "FolderImages",
+    icons: "FolderImages",
+    media: "FolderImages",
+    fonts: "FolderFont",
+    styles: "FolderCss",
+    stylesheets: "FolderCss",
+    css: "FolderCss",
+    sass: "FolderSass",
+    scss: "FolderSass",
+    less: "FolderLess",
+
+    // Scripts
+    scripts: "FolderScripts",
+    script: "FolderScripts",
+    tools: "FolderTools",
+    utils: "FolderUtils",
+    utilities: "FolderUtils",
+    helpers: "FolderHelper",
+
+    // Framework specific
+    components: "FolderComponents",
+    component: "FolderComponents",
+    views: "FolderViews",
+    view: "FolderViews",
+    layouts: "FolderLayout",
+    layout: "FolderLayout",
+    templates: "FolderTemplate",
+    template: "FolderTemplate",
+    hooks: "FolderHook",
+    hook: "FolderHook",
+    store: "FolderStore",
+    stores: "FolderStore",
+    state: "FolderNgrxStore",
+    reducers: "FolderReduxReducer",
+    reducer: "FolderReduxReducer",
+    services: "FolderApi",
+    service: "FolderApi",
+    api: "FolderApi",
+    apis: "FolderApi",
+    routes: "FolderRoutes",
+    route: "FolderRoutes",
+    routing: "FolderRoutes",
+    middleware: "FolderMiddleware",
+    middlewares: "FolderMiddleware",
+    controllers: "FolderController",
+    controller: "FolderController",
+    models: "FolderDatabase",
+    model: "FolderDatabase",
+    schemas: "FolderDatabase",
+    schema: "FolderDatabase",
+    migrations: "FolderDatabase",
+    migration: "FolderDatabase",
+    seeders: "FolderSeeders",
+    seeder: "FolderSeeders",
+
+    // TypeScript
+    types: "FolderTypescript",
+    typing: "FolderTypescript",
+    typings: "FolderTypescript",
+    "@types": "FolderTypescript",
+    interfaces: "FolderInterface",
+    interface: "FolderInterface",
+
+    // Mobile
+    android: "FolderAndroid",
+    ios: "FolderIos",
+    mobile: "FolderMobile",
+    flutter: "FolderFlutter",
+
+    // Infrastructure
+    kubernetes: "FolderKubernetes",
+    k8s: "FolderKubernetes",
+    terraform: "FolderTerraform",
+    aws: "FolderAws",
+    azure: "FolderAzurePipelines",
+    firebase: "FolderFirebase",
+    supabase: "FolderSupabase",
+    vercel: "FolderVercel",
+    netlify: "FolderNetlify",
+
+    // CI/CD
+    ".github": "FolderGithub",
+    ".gitlab": "FolderGitlab",
+    ".circleci": "FolderCircleci",
+    ci: "FolderCi",
+    ".ci": "FolderCi",
+    workflows: "FolderGhWorkflows",
+
+    // Git
+    ".git": "FolderGit",
+
+    // Development tools
+    ".vscode": "FolderVscode",
+    ".idea": "FolderIntellij",
+    ".cursor": "FolderCursor",
+    ".devcontainer": "FolderContainer",
+    ".storybook": "FolderStorybook",
+
+    // Localization
+    i18n: "FolderI18n",
+    locales: "FolderI18n",
+    locale: "FolderI18n",
+    lang: "FolderI18n",
+    languages: "FolderI18n",
+
+    // Other common patterns
+    temp: "FolderTemp",
+    tmp: "FolderTemp",
+    logs: "FolderLog",
+    log: "FolderLog",
+    backup: "FolderBackup",
+    backups: "FolderBackup",
+    examples: "FolderExamples",
+    example: "FolderExamples",
+    demo: "FolderExamples",
+    demos: "FolderExamples",
+    samples: "FolderExamples",
+    sample: "FolderExamples",
+    fixtures: "FolderTest",
+    mocks: "FolderMock",
+    mock: "FolderMock",
+    data: "FolderDatabase",
+    database: "FolderDatabase",
+    db: "FolderDatabase",
+    sql: "FolderDatabase",
+    prisma: "FolderPrisma",
+    drizzle: "FolderDrizzle",
+
+    // Security
+    security: "FolderSecure",
+    auth: "FolderSecure",
+    authentication: "FolderSecure",
+    authorization: "FolderSecure",
+    keys: "FolderKeys",
+    certs: "FolderKeys",
+    certificates: "FolderKeys",
+
+    // Content
+    content: "FolderContent",
+    posts: "FolderContent",
+    articles: "FolderContent",
+    blog: "FolderContent",
+
+    // Functions
+    functions: "FolderFunctions",
+    function: "FolderFunctions",
+    lambda: "FolderFunctions",
+    lambdas: "FolderFunctions",
+    serverless: "FolderServerless",
+
+    // Jobs/tasks
+    jobs: "FolderJob",
+    job: "FolderJob",
+    tasks: "FolderTasks",
+    task: "FolderTasks",
+    cron: "FolderTasks",
+    queue: "FolderQueue",
+    queues: "FolderQueue",
+
+    // Desktop platforms
+    desktop: "FolderDesktop",
+    windows: "FolderWindows",
+    macos: "FolderMacos",
+    linux: "FolderLinux",
+  },
+  defaults: {
+    file: "Document",
+    folder: "Folder",
+    folderOpen: "FolderOpen",
+  },
+}
+
+const toOpenVariant = (icon: IconName): IconName => {
+  if (!icon.startsWith("Folder")) return icon
+  if (icon.endsWith("_light")) return icon.replace("_light", "Open_light") as IconName
+  if (!icon.endsWith("Open")) return (icon + "Open") as IconName
+  return icon
+}
+
+const basenameOf = (p: string) => p.split("\\").join("/").split("/").filter(Boolean).pop() ?? ""
+
+const folderNameVariants = (name: string) => {
+  const n = name.toLowerCase()
+  return [n, `.${n}`, `_${n}`, `__${n}__`]
+}
+
+const dottedSuffixesDesc = (name: string) => {
+  const n = name.toLowerCase()
+  const idxs: number[] = []
+  for (let i = 0; i < n.length; i++) if (n[i] === ".") idxs.push(i)
+  const out = new Set<string>()
+  out.add(n) // allow exact whole-name "extensions" like "dockerfile"
+  for (const i of idxs) if (i + 1 < n.length) out.add(n.slice(i + 1))
+  return Array.from(out).sort((a, b) => b.length - a.length) // longest first
+}
+
+export function chooseIconName(path: string, type: "directory" | "file", expanded: boolean): IconName {
+  const base = basenameOf(path)
+  const baseLower = base.toLowerCase()
+
+  if (type === "directory") {
+    for (const cand of folderNameVariants(baseLower)) {
+      const icon = ICON_MAPS.folderNames[cand]
+      if (icon) return expanded ? toOpenVariant(icon) : icon
+    }
+    return expanded ? ICON_MAPS.defaults.folderOpen : ICON_MAPS.defaults.folder
+  }
+
+  const byName = ICON_MAPS.fileNames[baseLower]
+  if (byName) return byName
+
+  for (const ext of dottedSuffixesDesc(baseLower)) {
+    const icon = ICON_MAPS.fileExtensions[ext]
+    if (icon) return icon
+  }
+
+  return ICON_MAPS.defaults.file
+}