[ENG-971] More File Icons (code extensions) (spacedriveapp#1217)

* added bearded icons

* implemented bearded icons

* Made separate `LayeredFileIcon` component

* Delete index.tsx

* Update LayeredFileIcon.tsx

* Update LayeredFileIcon.tsx

* Update Thumb.tsx

* modified `generate.mjs` file

modified `generate.mjs` file to automatically generate index file for our icons

* Automatically generated by `generate.mjs` script

auto generate files are also included in code, so i also included it

* `bearded-icons` in `ext` folder

* Update LayeredFileIcon.tsx

* Update LayeredFileIcon.tsx

* formatted LayeredFileIcon.tsx

* Update Thumb.tsx

* added more icons to utilize

* made seperate file for `IconMapping`

* fixed typescript error by `Record<string, React.ReactElement>`

* More fixes in typescript

BTW, I am still learning TypeScript, but I know at least how much is required to get my work complete.

* moved icons to `assets/svgs/ext`

* added `kind !== 'Code'`

* Update Thumb.tsx

* Enable LayeredFileIcon for any file icon
 - Change IconMapping to define layered icons by kind/extension, instead of just extensions
 - Always render LayeredFileIcon component and determine whether the layered icon should or not be rendered internally
 - Format code

* Using our own name conventions

* `getLayeredIcon` implementation

* using our own directory structure

* directory structure

* fix 1

* fixed relative import

* `getLayeredIcon` utility implementation

* for our `kind`/`extention`.svg folder structure

* improvements in `getLayeredIcon`

* added icons in `Code`

* Delete IconMapping.tsx

* fixed imports

* fix typescript, mobile svg handling etc

---------

Co-authored-by: Vítor Vasconcellos <[email protected]>
Co-authored-by: Jamie Pine <[email protected]>
Co-authored-by: Utku <[email protected]>

apps/mobile/.svgrrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	icon: true,
+	typescript: true,
+	svgProps: { fill: 'currentColor' }
+};

apps/mobile/src/types/declarations.d.ts

@@ -1,8 +1,8 @@
 declare module '*.svg' {
 	import React from 'react';
 	import { SvgProps } from 'react-native-svg';
-	const content: React.FC<SvgProps>;
-	export default content;
+	// TODO: This is probably not working as intended
+	export const ReactComponent: React.FC<SVGProps<SVGSVGElement>>;
 }
 
 declare module '*.png' {

interface/app/$libraryId/Explorer/FilePath/LayeredFileIcon.tsx

@@ -0,0 +1,26 @@
+import { type ImgHTMLAttributes } from 'react';
+import { type ObjectKindKey } from '@sd/client';
+import { getLayeredIcon } from '@sd/assets/util';
+
+interface LayeredFileIconProps extends ImgHTMLAttributes<HTMLImageElement> {
+	kind: ObjectKindKey;
+	extension: string | null;
+}
+
+const LayeredFileIcon = ({ kind, extension, ...props }: LayeredFileIconProps) => {
+	const iconImg = <img {...props} />;
+	const IconComponent = extension ? getLayeredIcon(kind, extension) : null;
+
+	return IconComponent == null ? (
+		iconImg
+	) : (
+		<div className="relative">
+			{iconImg}
+			<div className="absolute bottom-0 right-0 flex h-full w-full items-end justify-end pb-4 pr-2">
+				<IconComponent viewBox="0 0 16 16" height="40%" width="40%" />
+			</div>
+		</div>
+	);
+};
+
+export default LayeredFileIcon;

interface/app/$libraryId/Explorer/FilePath/Thumb.tsx

@@ -20,6 +20,7 @@ import { pdfViewerEnabled } from '~/util/pdfViewer';
 import { useExplorerContext } from '../Context';
 import { getExplorerStore } from '../store';
 import { useExplorerItemData } from '../util';
+import LayeredFileIcon from './LayeredFileIcon';
 import classes from './Thumb.module.scss';
 
 const THUMB_TYPE = {
@@ -279,8 +280,10 @@ export const FileThumb = memo((props: ThumbProps) => {
 
 					default:
 						return (
-							<img
+							<LayeredFileIcon
 								src={src}
+								kind={itemData.kind}
+								extension={itemData.extension}
 								onLoad={onLoad}
 								onError={() => setLoaded(false)}
 								decoding={props.size ? 'async' : 'sync'}

packages/assets/scripts/generate.mjs

@@ -13,7 +13,7 @@ import { dirname, join } from 'path';
 import prettier from 'prettier';
 import { fileURLToPath } from 'url';
 
-const assetFolders = ['icons', 'images', 'svgs/brands'];
+const assetFolders = ['icons', 'images', 'svgs/brands', 'svgs/ext/Extras', 'svgs/ext/Code'];
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);

packages/assets/svgs/ext/Code/index.ts

@@ -0,0 +1,41 @@
+/*
+ * This file was automatically generated by a script.
+ * To regenerate this file, run: pnpm assets gen
+ */
+import { ReactComponent as angular } from './angular.svg';
+import { ReactComponent as bun } from './bun.svg';
+import { ReactComponent as c } from './c.svg';
+import { ReactComponent as cmake } from './cmake.svg';
+import { ReactComponent as cpp } from './cpp.svg';
+import { ReactComponent as csharp } from './csharp.svg';
+import { ReactComponent as css } from './css.svg';
+import { ReactComponent as dartlang } from './dartlang.svg';
+import { ReactComponent as go } from './go.svg';
+import { ReactComponent as html } from './html.svg';
+import { ReactComponent as java } from './java.svg';
+import { ReactComponent as js } from './js.svg';
+import { ReactComponent as kotlin } from './kotlin.svg';
+import { ReactComponent as php } from './php.svg';
+import { ReactComponent as py } from './py.svg';
+import { ReactComponent as ts } from './ts.svg';
+import { ReactComponent as vue } from './vue.svg';
+
+export {
+	angular,
+	bun,
+	c,
+	cmake,
+	cpp,
+	csharp,
+	css,
+	dartlang,
+	go,
+	html,
+	java,
+	js,
+	kotlin,
+	php,
+	py,
+	ts,
+	vue
+};