homeio

Public
Forked from doctor-io/homeio
Branch: main
Latest commit: 958d74616 October 2026
1"use client";
2
3import { OsIcon } from "./OsIcon";
4import { FOLDER_ICONS, MIMETYPE_ICONS } from "./icon-assets";
5
6type IconProps = { className?: string };
7
8// Shared paper body used by every file-type icon.
9// The paper is tinted with `c` at low opacity so the color reads at small sizes
10// even when the embedded symbol is too tiny to distinguish.
11function PaperBase({ c, children }: { c: string; children?: React.ReactNode }) {
12  return (
13    <>
14      {/* Body */}
15      <path
16        d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8L14 2z"
17        fill={c}
18        fillOpacity="0.1"
19        stroke={c}
20        strokeOpacity="0.28"
21        strokeWidth="1"
22        strokeLinejoin="round"
23      />
24      {/* Fold corner fill */}
25      <path d="M14 2L20 8H14V2Z" fill={c} fillOpacity="0.22" />
26      {/* Fold crease */}
27      <path
28        d="M14 2V8H20"
29        stroke={c}
30        strokeOpacity="0.38"
31        strokeWidth="1"
32        fill="none"
33        strokeLinejoin="round"
34      />
35      {children}
36    </>
37  );
38}
39
40// ─── Folder badge system ──────────────────────────────────────────────────────
41// Maps lowercase folder names to a badge type. Add entries here to support more.
42
43type BadgeType =
44  | "download" | "upload"
45  | "music"    | "video"  | "image"
46  | "document" | "code"   | "archive"
47  | "network"  | "backup" | "share"
48  | "desktop"  | "trash"  | "app";
49
50const FOLDER_BADGE_MAP: Record<string, BadgeType> = {
51  // Downloads
52  download: "download", downloads: "download",
53  // Music / Audio
54  music: "music", audio: "music", songs: "music",
55  // Video / Media
56  video: "video", videos: "video", movies: "video",
57  movie: "video", media: "video", films: "video", film: "video",
58  // Images / Photos
59  pictures: "image", picture: "image", photos: "image",
60  photo: "image", images: "image", gallery: "image",
61  screenshots: "image", screenshot: "image", wallpapers: "image",
62  // Documents
63  documents: "document", document: "document", docs: "document",
64  // Code / Dev
65  code: "code", dev: "code", development: "code",
66  projects: "code", src: "code", repos: "code", github: "code",
67  // Archives
68  archive: "archive", archives: "archive",
69  // Network / Shared
70  shared: "share", network: "network",
71  // Backup
72  backup: "backup", backups: "backup",
73  // Desktop
74  desktop: "desktop",
75  // Apps / AppData
76  apps: "app", appdata: "app",
77  // Trash
78  trash: "trash", ".trash": "trash",
79};
80
81// Badge rendered at bottom-right corner inside the 48×48 folder SVG.
82// Circle at (36, 37) r=11 gives ~22 px badge area.
83function FolderBadgeOverlay({ type }: { type: BadgeType }) {
84  const s = { stroke: "white", strokeWidth: "1.7", strokeLinecap: "round" as const, strokeLinejoin: "round" as const, fill: "none" };
85  return (
86    // translate(-12, -10) shifts badge center from (36,37) → (24,27), the visual center of the folder body
87    <g transform="translate(-12, -10)">
88
89      {type === "download" && (
90        <g {...s}>
91          <line x1="36" y1="29.5" x2="36" y2="38" />
92          <polyline points="32.5,34.5 36,38 39.5,34.5" />
93          <line x1="31" y1="41" x2="41" y2="41" />
94        </g>
95      )}
96
97      {type === "upload" && (
98        <g {...s}>
99          <line x1="36" y1="44.5" x2="36" y2="36" />
100          <polyline points="32.5,39.5 36,36 39.5,39.5" />
101          <line x1="31" y1="32" x2="41" y2="32" />
102        </g>
103      )}
104
105      {type === "music" && (
106        <>
107          <circle cx="32.5" cy="40.5" r="2.5" fill="white" />
108          <g {...s}>
109            <line x1="35" y1="40.5" x2="35" y2="30.5" />
110            <polyline points="35,30.5 41,29 41,33" />
111          </g>
112        </>
113      )}
114
115      {type === "video" && (
116        <path d="M30.5 30.5 L30.5 43.5 L43 37 Z" fill="white" />
117      )}
118
119      {type === "image" && (
120        <>
121          <circle cx="40" cy="30" r="2.5" fill="white" />
122          <polyline points="27,43.5 33,34.5 38.5,40.5 41,37 45,43.5" {...s} />
123        </>
124      )}
125
126      {type === "document" && (
127        <g {...s}>
128          <rect x="29" y="28.5" width="14" height="17" rx="1.5" />
129          <line x1="32" y1="33" x2="40" y2="33" />
130          <line x1="32" y1="36.5" x2="40" y2="36.5" />
131          <line x1="32" y1="40" x2="37" y2="40" />
132        </g>
133      )}
134
135      {type === "code" && (
136        <g {...s}>
137          <polyline points="32,30 28,37 32,44" />
138          <polyline points="40,30 44,37 40,44" />
139          <line x1="38.5" y1="29" x2="33.5" y2="45" />
140        </g>
141      )}
142
143      {type === "archive" && (
144        <g {...s}>
145          <rect x="28.5" y="34" width="15" height="11" rx="1" />
146          <rect x="27.5" y="30.5" width="17" height="3.5" rx="1" />
147          <line x1="33.5" y1="38" x2="38.5" y2="38" />
148        </g>
149      )}
150
151      {type === "network" && (
152        <>
153          <circle cx="36" cy="30.5" r="2.5" fill="white" />
154          <circle cx="28" cy="43" r="2" fill="white" />
155          <circle cx="36" cy="43" r="2" fill="white" />
156          <circle cx="44" cy="43" r="2" fill="white" />
157          <g {...s}>
158            <line x1="30" y1="41.5" x2="34" y2="33" />
159            <line x1="36" y1="41" x2="36" y2="33" />
160            <line x1="42" y1="41.5" x2="38" y2="33" />
161          </g>
162        </>
163      )}
164
165      {type === "backup" && (
166        <g {...s}>
167          <path d="M27.5 37 a8.5 8.5 0 1 0 2.5-6" />
168          <polyline points="27.5,27 27.5,31.5 32,31.5" />
169        </g>
170      )}
171
172      {type === "share" && (
173        <>
174          <circle cx="28.5" cy="37" r="2.5" stroke="white" strokeWidth="1.7" fill="none" />
175          <circle cx="43" cy="30" r="2.5" stroke="white" strokeWidth="1.7" fill="none" />
176          <circle cx="43" cy="44" r="2.5" stroke="white" strokeWidth="1.7" fill="none" />
177          <g {...s}>
178            <line x1="31" y1="36" x2="40.5" y2="31.5" />
179            <line x1="31" y1="38" x2="40.5" y2="42.5" />
180          </g>
181        </>
182      )}
183
184      {type === "desktop" && (
185        <g {...s}>
186          <rect x="27" y="29" width="18" height="12" rx="1.5" />
187          <line x1="33" y1="41" x2="33" y2="44" />
188          <line x1="39" y1="41" x2="39" y2="44" />
189          <line x1="30.5" y1="44" x2="41.5" y2="44" />
190        </g>
191      )}
192
193      {type === "trash" && (
194        <g {...s}>
195          <polyline points="29,32 36,32 43,32" />
196          <path d="M32 32 v-2 h8 v2" />
197          <rect x="30" y="33" width="12" height="12" rx="1" />
198          <line x1="33.5" y1="36" x2="33.5" y2="42" />
199          <line x1="36" y1="36" x2="36" y2="42" />
200          <line x1="38.5" y1="36" x2="38.5" y2="42" />
201        </g>
202      )}
203
204      {type === "app" && (
205        <g {...s}>
206          <rect x="29.5" y="30.5" width="5.5" height="5.5" rx="1" />
207          <rect x="37"   y="30.5" width="5.5" height="5.5" rx="1" />
208          <rect x="29.5" y="38"   width="5.5" height="5.5" rx="1" />
209          <rect x="37"   y="38"   width="5.5" height="5.5" rx="1" />
210        </g>
211      )}
212    </g>
213  );
214}
215
216function getFolderBadge(name: string): BadgeType | null {
217  return FOLDER_BADGE_MAP[name.toLowerCase()] ?? null;
218}
219
220// ─── Folder (closed) ─────────────────────────────────────────────────────────
221
222function FolderSvg({ className, name }: IconProps & { name?: string }) {
223  const badge = name ? getFolderBadge(name) : null;
224  return (
225    <svg
226      className={className}
227      viewBox="0 0 48 48"
228      xmlns="http://www.w3.org/2000/svg"
229      aria-hidden="true"
230    >
231      <path
232        d="M40,12H22l-4-4H8c-2.2,0-4,1.8-4,4v8h40v-4C44,13.8,42.2,12,40,12z"
233        style={{ fill: "color-mix(in srgb, var(--accent) 80%, #000)" }}
234      />
235      <path
236        d="M40,12H8c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V16C44,13.8,42.2,12,40,12z"
237        style={{ fill: "color-mix(in srgb, var(--accent) 58%, #fff)" }}
238      />
239      {badge && <FolderBadgeOverlay type={badge} />}
240    </svg>
241  );
242}
243
244export function FolderIcon({ className, name }: IconProps & { name?: string }) {
245  const badge = name ? getFolderBadge(name) : null;
246  const osSrc = FOLDER_ICONS[badge ?? "default"] ?? FOLDER_ICONS.default;
247  return (
248    <OsIcon
249      src={osSrc}
250      className={className}
251      fallback={<FolderSvg className={className} name={name} />}
252    />
253  );
254}
255
256// ─── Folder (open) ────────────────────────────────────────────────────────────
257
258function OpenFolderSvg({ className, name }: IconProps & { name?: string }) {
259  const badge = name ? getFolderBadge(name) : null;
260  return (
261    <svg
262      className={className}
263      viewBox="0 0 48 48"
264      xmlns="http://www.w3.org/2000/svg"
265      aria-hidden="true"
266    >
267      <path
268        d="M38,12H22l-4-4H8c-2.2,0-4,1.8-4,4v24c0,2.2,1.8,4,4,4h31c1.7,0,3-1.3,3-3V16C42,13.8,40.2,12,38,12z"
269        style={{ fill: "color-mix(in srgb, var(--accent) 80%, #000)" }}
270      />
271      <path
272        d="M42.2,18H15.3c-1.9,0-3.6,1.4-3.9,3.3L8,40h31.7c1.9,0,3.6-1.4,3.9-3.3l2.5-14C46.6,20.3,44.7,18,42.2,18z"
273        style={{ fill: "color-mix(in srgb, var(--accent) 58%, #fff)" }}
274      />
275      {badge && <FolderBadgeOverlay type={badge} />}
276    </svg>
277  );
278}
279
280export function OpenFolderIcon({ className, name }: IconProps & { name?: string }) {
281  const badge = name ? getFolderBadge(name) : null;
282  const osSrc = FOLDER_ICONS[badge ?? "default"] ?? FOLDER_ICONS.default;
283  return (
284    <OsIcon
285      src={osSrc}
286      className={className}
287      fallback={<OpenFolderSvg className={className} name={name} />}
288    />
289  );
290}
291
292// ─── Image ────────────────────────────────────────────────────────────────────
293
294export function ImageFileIcon({ className }: IconProps) {
295  const c = "#f472b6";
296  return (
297    <OsIcon
298      src={MIMETYPE_ICONS.image}
299      className={className}
300      fallback={
301        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
302          <PaperBase c={c}>
303            <circle cx="8" cy="11.5" r="2" fill={c} />
304            <path d="M5 18L9.5 13L13.5 18H5Z" fill={c} fillOpacity="0.7" />
305            <path d="M11 18L15.5 11.5L20 18H11Z" fill={c} />
306          </PaperBase>
307        </svg>
308      }
309    />
310  );
311}
312
313// ─── Audio ────────────────────────────────────────────────────────────────────
314
315export function AudioFileIcon({ className }: IconProps) {
316  const c = "#c084fc";
317  return (
318    <OsIcon
319      src={MIMETYPE_ICONS.audio}
320      className={className}
321      fallback={
322        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
323          <PaperBase c={c}>
324            <circle cx="8" cy="17" r="2" fill={c} />
325            <circle cx="14" cy="16.5" r="2" fill={c} />
326            <path
327              d="M10 17V10M16 16.5V9.5M10 10L16 9.5"
328              stroke={c}
329              strokeWidth="1.5"
330              strokeLinecap="round"
331              strokeLinejoin="round"
332            />
333          </PaperBase>
334        </svg>
335      }
336    />
337  );
338}
339
340// ─── Video ────────────────────────────────────────────────────────────────────
341
342export function VideoFileIcon({ className }: IconProps) {
343  const c = "#fbbf24";
344  return (
345    <OsIcon
346      src={MIMETYPE_ICONS.video}
347      className={className}
348      fallback={
349        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
350          <PaperBase c={c}>
351            <path d="M9.5 10.5V18.5L17.5 14.5L9.5 10.5Z" fill={c} />
352          </PaperBase>
353        </svg>
354      }
355    />
356  );
357}
358
359// ─── Archive ──────────────────────────────────────────────────────────────────
360
361export function ArchiveFileIcon({ className }: IconProps) {
362  const c = "#a78bfa";
363  return (
364    <OsIcon
365      src={MIMETYPE_ICONS.archive}
366      className={className}
367      fallback={
368        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
369          <PaperBase c={c}>
370            <rect x="5.5" y="10" width="13" height="2.5" rx="0.5" fill={c} fillOpacity="0.9" />
371            <rect
372              x="5.5" y="13" width="13" height="6.5" rx="0.5"
373              fill={c} fillOpacity="0.15"
374              stroke={c} strokeOpacity="0.5" strokeWidth="0.75"
375            />
376            <path
377              d="M10 10V12.5M14 10V12.5"
378              stroke={c}
379              strokeWidth="1.5"
380              strokeLinecap="round"
381            />
382          </PaperBase>
383        </svg>
384      }
385    />
386  );
387}
388
389// ─── Code ─────────────────────────────────────────────────────────────────────
390
391export function CodeFileIcon({ className }: IconProps) {
392  const c = "#34d399";
393  return (
394    <OsIcon
395      src={MIMETYPE_ICONS.code}
396      className={className}
397      fallback={
398        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
399          <PaperBase c={c}>
400            <path
401              d="M9 11L6.5 14L9 17M15 11L17.5 14L15 17M13.5 10.5L10.5 18"
402              stroke={c}
403              strokeWidth="1.5"
404              strokeLinecap="round"
405              strokeLinejoin="round"
406            />
407          </PaperBase>
408        </svg>
409      }
410    />
411  );
412}
413
414// ─── Document (PDF / DOC) ─────────────────────────────────────────────────────
415
416export function DocumentFileIcon({ className }: IconProps) {
417  const c = "#60a5fa";
418  return (
419    <OsIcon
420      src={MIMETYPE_ICONS.document}
421      className={className}
422      fallback={
423        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
424          <PaperBase c={c}>
425            <path
426              d="M7 10.5H17M7 13.5H17M7 16.5H13"
427              stroke={c}
428              strokeWidth="1.5"
429              strokeLinecap="round"
430            />
431          </PaperBase>
432        </svg>
433      }
434    />
435  );
436}
437
438// ─── Plain text ───────────────────────────────────────────────────────────────
439
440export function TextFileIcon({ className }: IconProps) {
441  const c = "#94a3b8";
442  return (
443    <OsIcon
444      src={MIMETYPE_ICONS.text}
445      className={className}
446      fallback={
447        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
448          <PaperBase c={c}>
449            <path
450              d="M7 10.5H17M7 13H17M7 15.5H14.5M7 18H11"
451              stroke={c}
452              strokeWidth="1.5"
453              strokeLinecap="round"
454            />
455          </PaperBase>
456        </svg>
457      }
458    />
459  );
460}
461
462// ─── Generic file ─────────────────────────────────────────────────────────────
463
464export function GenericFileIcon({ className }: IconProps) {
465  const c = "#6b7280";
466  return (
467    <OsIcon
468      src={MIMETYPE_ICONS.generic}
469      className={className}
470      fallback={
471        <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden="true">
472          <PaperBase c={c}>
473            <path
474              d="M7 11H17M7 14H14M7 17H11"
475              stroke={c}
476              strokeWidth="1.5"
477              strokeLinecap="round"
478            />
479          </PaperBase>
480        </svg>
481      }
482    />
483  );
484}
485
486export function KoraFileIcon({ className, iconKey }: IconProps & { iconKey: string }) {
487  const src = MIMETYPE_ICONS[iconKey] ?? MIMETYPE_ICONS.generic;
488  return (
489    <OsIcon
490      src={src}
491      className={className}
492      fallback={<GenericFileIcon className={className} />}
493    />
494  );
495}
496