add something

2026-06-29 14:40:42 +02:00
parent a15d6c0b2c
commit 9861fa2446
12 changed files with 822 additions and 42 deletions
@@ -1,6 +1,27 @@
 <script lang="ts">
-  import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "@lucide/svelte";
+  import {
+    Braces,
+    ChevronDown,
+    ChevronRight,
+    CodeXml,
+    Database,
+    FileArchive,
+    FileAudio,
+    FileCode,
+    FileCog,
+    FileImage,
+    FileJson,
+    FileSpreadsheet,
+    FileText,
+    FileType,
+    FileVideo,
+    Folder,
+    FolderOpen,
+    Terminal,
+  } from "@lucide/svelte";
+  import { languageIconForPath } from "../languageIcons";
  import type { ExplorerNode, ExplorerNodeKind, FileStatusKind, GitRepositoryFile } from "../types";
+  import LanguageIcon from "./LanguageIcon.svelte";

  interface Props {
    repoFiles: GitRepositoryFile[];
@@ -97,6 +118,38 @@
    return kind ?? "none";
  }

+  function extensionFor(path: string): string {
+    const name = path.split(/[\\/]/).pop()?.toLowerCase() ?? "";
+    const index = name.lastIndexOf(".");
+    return index > 0 ? name.slice(index + 1) : "";
+  }
+
+  function fileIconKind(node: ExplorerNode): string {
+    const name = node.name.toLowerCase();
+    const ext = extensionFor(node.path);
+
+    if (["package.json", "tsconfig.json", "jsconfig.json", "composer.json", "deno.json", "tauri.conf.json"].includes(name)) return "json";
+    if (["cargo.toml", "package-lock.json", "pnpm-lock.yaml", "yarn.lock", "bun.lockb"].includes(name)) return "config";
+    if (["dockerfile", "makefile", "justfile", "rakefile", "gemfile", ".env", ".gitignore", ".gitattributes", ".npmrc", ".editorconfig"].includes(name)) return "config";
+
+    if (["js", "jsx", "ts", "tsx", "svelte", "vue", "astro", "rs", "go", "java", "kt", "kts", "cs", "cpp", "cxx", "cc", "c", "h", "hpp", "swift", "php", "rb", "py", "lua", "dart", "scala", "zig", "ex", "exs", "erl", "hrl", "fs", "fsx", "fsi", "clj", "cljs"].includes(ext)) return "code";
+    if (["html", "htm", "xml", "xaml", "svg"].includes(ext)) return "markup";
+    if (["css", "scss", "sass", "less", "postcss"].includes(ext)) return "style";
+    if (["json", "jsonc", "json5"].includes(ext)) return "json";
+    if (["toml", "yaml", "yml", "ini", "conf", "config", "properties", "env"].includes(ext)) return "config";
+    if (["sh", "bash", "zsh", "fish", "ps1", "bat", "cmd"].includes(ext)) return "script";
+    if (["md", "mdx", "txt", "log", "rst", "adoc", "tex"].includes(ext)) return "text";
+    if (["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico", "avif", "tif", "tiff"].includes(ext)) return "image";
+    if (["mp3", "wav", "ogg", "flac", "m4a", "aac"].includes(ext)) return "audio";
+    if (["mp4", "mov", "avi", "mkv", "webm", "wmv"].includes(ext)) return "video";
+    if (["zip", "rar", "7z", "tar", "gz", "tgz", "bz2", "xz"].includes(ext)) return "archive";
+    if (["csv", "tsv", "xls", "xlsx", "ods"].includes(ext)) return "sheet";
+    if (["sql", "sqlite", "sqlite3", "db"].includes(ext)) return "database";
+    if (["ttf", "otf", "woff", "woff2", "eot"].includes(ext)) return "font";
+
+    return "text";
+  }
+
  let explorerTree = $derived(buildExplorerTree(repoFiles));
  let visibleNodes = $derived(flattenExplorerTree(explorerTree, expandedExplorerPaths));
 </script>
@@ -145,7 +198,39 @@
            {/if}
          {:else}
            <span class="tree-spacer"></span>
-            <FileText size={15} aria-hidden="true" />
+            {@const languageIcon = languageIconForPath(node.path)}
+            {@const iconKind = fileIconKind(node)}
+            {#if languageIcon}
+              <LanguageIcon icon={languageIcon.icon} title={languageIcon.title} />
+            {:else if iconKind === "code"}
+              <FileCode class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "markup"}
+              <CodeXml class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "style"}
+              <Braces class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "json"}
+              <FileJson class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "config"}
+              <FileCog class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "script"}
+              <Terminal class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "image"}
+              <FileImage class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "audio"}
+              <FileAudio class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "video"}
+              <FileVideo class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "archive"}
+              <FileArchive class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "sheet"}
+              <FileSpreadsheet class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "database"}
+              <Database class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else if iconKind === "font"}
+              <FileType class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {:else}
+              <FileText class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
+            {/if}
          {/if}

          <button