From d0360d992953c2873f6fecedf68dca7ab53f4923 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 24 Nov 2023 00:36:09 +0100
Subject: [PATCH 1/4] Fix bugs in resolving icon and color for file extension

---
 .../unreleased/bugfix-icon-extension-mapping  |   6 +
 .../build/webpack.system.conf.js              |   4 -
 .../OcResourceIcon/OcResourceIcon.spec.ts     |   4 +-
 .../OcResourceIcon/OcResourceIcon.vue         |  16 +-
 .../__snapshots__/OcResourceIcon.spec.ts.snap |  28 +-
 packages/design-system/src/helpers/index.ts   |   3 +-
 .../src/helpers/resolveFileIcon.ts            | 247 +++++++
 .../src/helpers/resourceIconMapping.json      | 650 ------------------
 8 files changed, 275 insertions(+), 683 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-icon-extension-mapping
 create mode 100644 packages/design-system/src/helpers/resolveFileIcon.ts
 delete mode 100644 packages/design-system/src/helpers/resourceIconMapping.json

diff --git a/changelog/unreleased/bugfix-icon-extension-mapping b/changelog/unreleased/bugfix-icon-extension-mapping
new file mode 100644
index 00000000000..dcccd9df45f
--- /dev/null
+++ b/changelog/unreleased/bugfix-icon-extension-mapping
@@ -0,0 +1,6 @@
+Bugfix: Icon extension mapping
+
+We have simplified the mapping between file extensions and their display in the web UI (icon and its color). Now, further formats/extensions (`.tar.gz`,`.tar.bz2`, ...) get displayed correctly.
+
+https://github.com/owncloud/web/issues/10031
+https://github.com/owncloud/web/pull/10059
diff --git a/packages/design-system/build/webpack.system.conf.js b/packages/design-system/build/webpack.system.conf.js
index 481150b3671..332f34d97bd 100644
--- a/packages/design-system/build/webpack.system.conf.js
+++ b/packages/design-system/build/webpack.system.conf.js
@@ -79,10 +79,6 @@ const webpackConfig = merge(baseWebpackConfig, {
         {
           from: path.resolve(__dirname, '../l10n/translations.json'),
           to: config.system.assetsSubDirectory
-        },
-        {
-          from: path.resolve(__dirname, '../src/helpers/resourceIconMapping.json'),
-          to: config.system.assetsSubDirectory
         }
       ]
     })
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts
index 633da40ffb0..69fff3b7bab 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts
@@ -13,8 +13,8 @@ const resourceIconMapping: OcResourceIconMapping = {
   },
   mimeType: {
     'not-a-real-mimetype': {
-      name: 'resource-type-madeup-mimetype',
-      color: 'blue'
+      name: 'resource-type-file',
+      color: 'var(--oc-color-text-default)'
     }
   }
 }
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index 8161efc7932..b0b70704a4f 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -16,14 +16,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, unref } from 'vue'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'
-import { AVAILABLE_SIZES, IconType } from '../../helpers'
-import * as iconMapping from '../../helpers/resourceIconMapping.json'
-
-import { OcResourceIconMapping, ocResourceIconMappingInjectionKey } from './types'
+import { AVAILABLE_SIZES, IconType, resolveFileIcon } from '../../helpers'
 
 const defaultFolderIcon: IconType = {
   name: 'resource-type-folder',
@@ -65,8 +62,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const iconMappingInjection = inject<OcResourceIconMapping>(ocResourceIconMappingInjectionKey)
-
     const isFolder = computed(() => {
       // fallback is necessary since
       // sometimes resources without a type
@@ -92,12 +87,9 @@ export default defineComponent({
         return defaultFolderIcon
       }
 
-      let icon =
-        (iconMapping[unref(extension)] as IconType) ||
-        iconMappingInjection?.mimeType[unref(mimeType)] ||
-        iconMappingInjection?.extension[unref(extension)]
+      let icon = resolveFileIcon(unref(extension))
+
       return {
-        ...defaultFallbackIcon,
         ...icon
       }
     })
diff --git a/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap b/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
index b5bca1f2f0b..f312035b5c1 100644
--- a/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
+++ b/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
@@ -51,98 +51,98 @@ exports[`OcResourceIcon renders OcIcon for resource type file in size xxxlarge 1
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size large 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="large" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size medium 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="medium" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size small 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="small" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xsmall 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xsmall" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size large 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="large" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size medium 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="medium" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size small 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="small" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xsmall 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xsmall" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="blue" filltype="fill" name="resource-type-madeup-mimetype" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
diff --git a/packages/design-system/src/helpers/index.ts b/packages/design-system/src/helpers/index.ts
index 3ff43de2f2d..41d5f745900 100644
--- a/packages/design-system/src/helpers/index.ts
+++ b/packages/design-system/src/helpers/index.ts
@@ -1,3 +1,4 @@
+export * from './colors'
 export * from './constants'
+export * from './resolveFileIcon'
 export * from './types'
-export * from './colors'
diff --git a/packages/design-system/src/helpers/resolveFileIcon.ts b/packages/design-system/src/helpers/resolveFileIcon.ts
new file mode 100644
index 00000000000..04e6cbb9dda
--- /dev/null
+++ b/packages/design-system/src/helpers/resolveFileIcon.ts
@@ -0,0 +1,247 @@
+const archiveExtensions = [
+  '7z',
+  'apk',
+  'bz2',
+  'deb',
+  'gz',
+  'gzip',
+  'rar',
+  'tar',
+  'tar.bz2',
+  'tar.gz',
+  'tbz2',
+  'tgz',
+  'zip'
+]
+
+const audioExtensions = [
+  '3gp',
+  '8svx',
+  'aa',
+  'aac',
+  'aax',
+  'act',
+  'aiff',
+  'alac',
+  'amr',
+  'ape',
+  'au',
+  'awb',
+  'cda',
+  'dss',
+  'dvf',
+  'flac',
+  'gsm',
+  'iklax',
+  'ivs',
+  'm4a',
+  'm4b',
+  'm4p',
+  'mmf',
+  'mogg',
+  'movpkg',
+  'mp3',
+  'mpc',
+  'msv',
+  'nmf',
+  'oga',
+  'ogga',
+  'opus',
+  'ra',
+  'raw',
+  'rf64',
+  'rm',
+  'sln',
+  'tta',
+  'voc',
+  'vox',
+  'wav',
+  'wma',
+  'wv'
+]
+
+const codeExtensions = [
+  'bash',
+  'c++',
+  'c',
+  'cc',
+  'cpp',
+  'css',
+  'feature',
+  'go',
+  'h',
+  'hh',
+  'hpp',
+  'htm',
+  'html',
+  'java',
+  'js',
+  'json',
+  'php',
+  'pl',
+  'py',
+  'scss',
+  'sh',
+  'sh-lib',
+  'sql',
+  'ts',
+  'xml',
+  'yaml',
+  'yml'
+]
+
+const defaultExtensions = ['accdb', 'rss', 'swf']
+
+const documentExtensions = ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
+
+const formExtensions = ['docf', 'docxf', 'oform']
+
+const imageExtensions = [
+  'ai',
+  'cdr',
+  'eot',
+  'eps',
+  'gif',
+  'jpeg',
+  'jpg',
+  'otf',
+  'pfb',
+  'png',
+  'ps',
+  'psd',
+  'svg',
+  'ttf',
+  'woff',
+  'xcf'
+]
+
+const presentationExtensions = [
+  'odp',
+  'pot',
+  'potm',
+  'potx',
+  'ppa',
+  'ppam',
+  'pps',
+  'ppsm',
+  'ppsx',
+  'ppt',
+  'pptm',
+  'pptx'
+]
+
+const spreadsheetExtensions = [
+  'csv',
+  'ods',
+  'xla',
+  'xlam',
+  'xls',
+  'xlsb',
+  'xlsm',
+  'xlsx',
+  'xlt',
+  'xltm',
+  'xltx'
+]
+
+const textExtensions = [
+  'cb7',
+  'cba',
+  'cbr',
+  'cbt',
+  'cbtc',
+  'cbz',
+  'cvbdl',
+  'eml',
+  'epub',
+  'mdb',
+  'tex',
+  'txt'
+]
+
+const videoExtensions = ['mov', 'mp4', 'webm', 'wmv']
+
+const fileIcon = {
+  archive: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
+  audio: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
+  code: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
+  default: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
+  drawio: { name: 'resource-type-drawio', color: 'var(--oc-color-icon-drawio)' },
+  document: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
+  ifc: { name: 'resource-type-ifc', color: 'var(--oc-color-icon-ifc)' },
+  ipynb: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
+  image: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
+  form: { name: 'resource-type-form', color: 'var(--oc-color-icon-form)' },
+  markdown: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
+  odg: { name: 'resource-type-graphic', color: 'var(--oc-color-icon-graphic)' },
+  pdf: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
+  presentation: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
+  root: { name: 'resource-type-root', color: 'var(--oc-color-icon-root)' },
+  spreadsheet: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
+  text: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
+  url: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
+  video: { name: 'resource-type-video', color: 'var(--oc-color-icon-video)' }
+}
+
+export function resolveFileIcon(fileExtension: string) {
+  if (archiveExtensions.includes(fileExtension)) {
+    return fileIcon.archive
+  }
+  if (audioExtensions.includes(fileExtension)) {
+    return fileIcon.audio
+  }
+  if (codeExtensions.includes(fileExtension)) {
+    return fileIcon.code
+  }
+  if (defaultExtensions.includes(fileExtension)) {
+    return fileIcon.default
+  }
+  if (documentExtensions.includes(fileExtension)) {
+    return fileIcon.document
+  }
+  if (imageExtensions.includes(fileExtension)) {
+    return fileIcon.image
+  }
+  if (formExtensions.includes(fileExtension)) {
+    return fileIcon.form
+  }
+  if (presentationExtensions.includes(fileExtension)) {
+    return fileIcon.presentation
+  }
+  if (spreadsheetExtensions.includes(fileExtension)) {
+    return fileIcon.spreadsheet
+  }
+  if (textExtensions.includes(fileExtension)) {
+    return fileIcon.text
+  }
+  if (videoExtensions.includes(fileExtension)) {
+    return fileIcon.video
+  }
+
+  if (fileExtension === 'drawio') {
+    return fileIcon.drawio
+  }
+  if (fileExtension === 'ifc') {
+    return fileIcon.ifc
+  }
+  if (fileExtension === 'ipynb') {
+    return fileIcon.ipynb
+  }
+  if (fileExtension === 'md') {
+    return fileIcon.markdown
+  }
+  if (fileExtension === 'odg') {
+    return fileIcon.odg
+  }
+  if (fileExtension === 'pdf') {
+    return fileIcon.pdf
+  }
+  if (fileExtension === 'root') {
+    return fileIcon.root
+  }
+  if (fileExtension === 'url') {
+    return fileIcon.url
+  }
+
+  return fileIcon.default
+}
diff --git a/packages/design-system/src/helpers/resourceIconMapping.json b/packages/design-system/src/helpers/resourceIconMapping.json
deleted file mode 100644
index 479d047e613..00000000000
--- a/packages/design-system/src/helpers/resourceIconMapping.json
+++ /dev/null
@@ -1,650 +0,0 @@
-{
-  "3gp": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "7z": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "8svx": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "aa": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "aac": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "aax": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "accdb": {
-    "name": "resource-type-file",
-    "color": "var(--oc-color-text-default)"
-  },
-  "act": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "ai": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "aiff": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "alac": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "amr": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "ape": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "apk": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "au": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "awb": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "bash": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "bz2": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "c++": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "c": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cb7": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cba": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cbr": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cbt": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cbtc": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cbz": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cc": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "cda": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "cdr": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "cpp": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "css": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "csv": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "cvbdl": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "deb": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "doc": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "docf": {
-    "name": "resource-type-form",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "dss": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "dvf": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "oform": {
-    "name": "resource-type-form",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "docm": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "docx": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "docxf": {
-    "name": "resource-type-form",
-    "color": "var(--oc-color-icon-form)"
-  },
-  "dot": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "dotx": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "drawio": {
-    "name": "resource-type-drawio",
-    "color": "var(--oc-color-icon-drawio)"
-  },
-  "eml": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "eot": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "eps": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "epub": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "feature": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "flac": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "go": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "gif": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "gsm": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "gz": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "gzip": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "h": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "hh": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "hpp": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "htm": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "html": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "ifc": {
-    "name": "resource-type-ifc",
-    "color": "var(--oc-color-icon-ifc)"
-  },
-  "iklax": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "ipynb": {
-    "name": "resource-type-jupyter",
-    "color": "var(--oc-color-icon-jupyter)"
-  },
-  "ivs": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "java": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "jpeg": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "jpg": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "js": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "json": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "lwp": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "m4a": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "m4b": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "m4p": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "md": {
-    "name": "resource-type-markdown",
-    "color": "var(--oc-color-icon-markdown)"
-  },
-  "mdb": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "mmf": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "mogg": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "mov": {
-    "name": "resource-type-video",
-    "color": "var(--oc-color-icon-video)"
-  },
-  "movpkg": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "mp3": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "mp4": {
-    "name": "resource-type-video",
-    "color": "var(--oc-color-icon-video)"
-  },
-  "mpc": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "msv": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "nmf": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "odp": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "odg": {
-    "name": "resource-type-graphic",
-    "color": "var(--oc-color-icon-graphic)"
-  },
-  "ods": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "odt": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "oga": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "ogga": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "one": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "opus": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "otf": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "pdf": {
-    "name": "resource-type-pdf",
-    "color": "var(--oc-color-icon-pdf)"
-  },
-  "pfb": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "php": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-icon-default)"
-  },
-  "pl": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-icon-default)"
-  },
-  "png": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "pot": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "potm": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "potx": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ppa": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ppam": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "pps": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ppsm": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ppsx": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ppt": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "pptm": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "pptx": {
-    "name": "resource-type-presentation",
-    "color": "var(--oc-color-icon-presentation)"
-  },
-  "ps": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "psd": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "py": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "ra": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "rar": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "raw": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "rf64": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "rm": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "root": {
-    "name": "resource-type-root",
-    "color": "var(--oc-color-icon-root)"
-  },
-  "rss": {
-    "name": "resource-type-file",
-    "color": "var(--oc-color-text-default)"
-  },
-  "scss": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "sh": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "sh-lib": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "sln": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "sql": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "svg": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "swf": {
-    "name": "resource-type-file",
-    "color": "var(--oc-color-text-default)"
-  },
-  "tar": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "tar.bz2": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "tar.gz": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "tbz2": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "tex": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "tgz": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  },
-  "ts": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "tta": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "ttf": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "txt": {
-    "name": "resource-type-text",
-    "color": "var(--oc-color-text-default)"
-  },
-  "url": {
-    "name": "resource-type-url",
-    "color": "var(--oc-color-text-default)"
-  },
-  "voc": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "vox": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "vsd": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "wav": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "webm": {
-    "name": "resource-type-video",
-    "color": "var(--oc-color-icon-video)"
-  },
-  "wma": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "wmv": {
-    "name": "resource-type-video",
-    "color": "var(--oc-color-icon-video)"
-  },
-  "woff": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "wpd": {
-    "name": "resource-type-document",
-    "color": "var(--oc-color-icon-document)"
-  },
-  "wv": {
-    "name": "resource-type-audio",
-    "color": "var(--oc-color-icon-audio)"
-  },
-  "xcf": {
-    "name": "resource-type-image",
-    "color": "var(--oc-color-icon-image)"
-  },
-  "xla": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xlam": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xls": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xlsb": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xlsm": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xlsx": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xlt": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xltm": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xltx": {
-    "name": "resource-type-spreadsheet",
-    "color": "var(--oc-color-icon-spreadsheet)"
-  },
-  "xml": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "yaml": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "yml": {
-    "name": "resource-type-code",
-    "color": "var(--oc-color-text-default)"
-  },
-  "zip": {
-    "name": "resource-type-archive",
-    "color": "var(--oc-color-icon-archive)"
-  }
-}

From 0e0bea499a03fafe6dbe1fb510cfa559405ba3c6 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 24 Nov 2023 16:26:02 +0100
Subject: [PATCH 2/4] Next iteration of icon-file-extension mapping concept

---
 .../unreleased/bugfix-icon-extension-mapping  |   3 +-
 .../OcResourceIcon/OcResourceIcon.vue         |  16 +-
 .../helpers/createDefaultFileIconMapping.ts   | 225 ++++++++++++++++
 packages/design-system/src/helpers/index.ts   |   2 +-
 .../src/helpers/resolveFileIcon.ts            | 247 ------------------
 .../src/helpers/resource/functions.ts         |   2 +-
 6 files changed, 242 insertions(+), 253 deletions(-)
 create mode 100644 packages/design-system/src/helpers/createDefaultFileIconMapping.ts
 delete mode 100644 packages/design-system/src/helpers/resolveFileIcon.ts

diff --git a/changelog/unreleased/bugfix-icon-extension-mapping b/changelog/unreleased/bugfix-icon-extension-mapping
index dcccd9df45f..460e424aa87 100644
--- a/changelog/unreleased/bugfix-icon-extension-mapping
+++ b/changelog/unreleased/bugfix-icon-extension-mapping
@@ -1,6 +1,7 @@
 Bugfix: Icon extension mapping
 
-We have simplified the mapping between file extensions and their display in the web UI (icon and its color). Now, further formats/extensions (`.tar.gz`,`.tar.bz2`, ...) get displayed correctly.
+We have simplified the mapping between file extensions and their display in the web UI (icon and its color).
+Now, further formats/extensions (`.tar.gz`,`.tar.xz`,`.bz2`, ...) get displayed correctly.
 
 https://github.com/owncloud/web/issues/10031
 https://github.com/owncloud/web/pull/10059
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index b0b70704a4f..f39b9f36bbd 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -16,11 +16,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
+import { computed, defineComponent, PropType, unref, inject } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'
-import { AVAILABLE_SIZES, IconType, resolveFileIcon } from '../../helpers'
+import { AVAILABLE_SIZES, IconType, createDefaultFileIconMapping } from '../../helpers'
+
+import { OcResourceIconMapping, ocResourceIconMappingInjectionKey } from './types'
 
 const defaultFolderIcon: IconType = {
   name: 'resource-type-folder',
@@ -36,6 +38,8 @@ const defaultFallbackIcon: IconType = {
   color: 'var(--oc-color-text-default)'
 }
 
+const defaultFileIconMapping = createDefaultFileIconMapping()
+
 export default defineComponent({
   name: 'OcResourceIcon',
   status: 'ready',
@@ -62,6 +66,8 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const iconMappingInjection = inject<OcResourceIconMapping>(ocResourceIconMappingInjectionKey)
+
     const isFolder = computed(() => {
       // fallback is necessary since
       // sometimes resources without a type
@@ -87,9 +93,13 @@ export default defineComponent({
         return defaultFolderIcon
       }
 
-      let icon = resolveFileIcon(unref(extension))
+      const icon =
+        defaultFileIconMapping[unref(extension)] ||
+        iconMappingInjection?.mimeType[unref(mimeType)] ||
+        iconMappingInjection?.extension[unref(extension)]
 
       return {
+        ...defaultFallbackIcon,
         ...icon
       }
     })
diff --git a/packages/design-system/src/helpers/createDefaultFileIconMapping.ts b/packages/design-system/src/helpers/createDefaultFileIconMapping.ts
new file mode 100644
index 00000000000..b4def09ab7e
--- /dev/null
+++ b/packages/design-system/src/helpers/createDefaultFileIconMapping.ts
@@ -0,0 +1,225 @@
+import { IconType } from './types'
+
+const fileIcon = {
+  archive: {
+    icon: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
+    extensions: [
+      '7z',
+      'apk',
+      'bz2',
+      'deb',
+      'gz',
+      'gzip',
+      'rar',
+      'tar',
+      'tar.bz2',
+      'tar.gz',
+      'tar.xz',
+      'tbz2',
+      'tgz',
+      'zip'
+    ]
+  },
+  audio: {
+    icon: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
+    extensions: [
+      '3gp',
+      '8svx',
+      'aa',
+      'aac',
+      'aax',
+      'act',
+      'aiff',
+      'alac',
+      'amr',
+      'ape',
+      'au',
+      'awb',
+      'cda',
+      'dss',
+      'dvf',
+      'flac',
+      'gsm',
+      'iklax',
+      'ivs',
+      'm4a',
+      'm4b',
+      'm4p',
+      'mmf',
+      'mogg',
+      'movpkg',
+      'mp3',
+      'mpc',
+      'msv',
+      'nmf',
+      'oga',
+      'ogga',
+      'opus',
+      'ra',
+      'raw',
+      'rf64',
+      'rm',
+      'sln',
+      'tta',
+      'voc',
+      'vox',
+      'wav',
+      'wma',
+      'wv'
+    ]
+  },
+  code: {
+    icon: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
+    extensions: [
+      'bash',
+      'c++',
+      'c',
+      'cc',
+      'cpp',
+      'css',
+      'feature',
+      'go',
+      'h',
+      'hh',
+      'hpp',
+      'htm',
+      'html',
+      'java',
+      'js',
+      'json',
+      'php',
+      'pl',
+      'py',
+      'scss',
+      'sh',
+      'sh-lib',
+      'sql',
+      'ts',
+      'xml',
+      'yaml',
+      'yml'
+    ]
+  },
+  default: {
+    icon: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
+    extensions: ['accdb', 'rss', 'swf']
+  },
+  drawio: {
+    icon: { name: 'resource-type-drawio', color: 'var(--oc-color-icon-drawio)' },
+    extensions: ['drawio']
+  },
+  document: {
+    icon: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
+    extensions: ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
+  },
+  ifc: {
+    icon: { name: 'resource-type-ifc', color: 'var(--oc-color-icon-ifc)' },
+    extensions: ['ifc']
+  },
+  ipynb: {
+    icon: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
+    extensions: ['ipynb']
+  },
+  image: {
+    icon: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
+    extensions: [
+      'ai',
+      'cdr',
+      'eot',
+      'eps',
+      'gif',
+      'jpeg',
+      'jpg',
+      'otf',
+      'pfb',
+      'png',
+      'ps',
+      'psd',
+      'svg',
+      'ttf',
+      'woff',
+      'xcf'
+    ]
+  },
+  form: {
+    icon: { name: 'resource-type-form', color: 'var(--oc-color-icon-form)' },
+    extensions: ['docf', 'docxf', 'oform']
+  },
+  markdown: {
+    icon: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
+    extensions: ['md']
+  },
+  odg: {
+    icon: { name: 'resource-type-graphic', color: 'var(--oc-color-icon-graphic)' },
+    extensions: ['odg']
+  },
+  pdf: {
+    icon: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
+    extensions: ['pdf']
+  },
+  presentation: {
+    icon: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
+    extensions: [
+      'odp',
+      'pot',
+      'potm',
+      'potx',
+      'ppa',
+      'ppam',
+      'pps',
+      'ppsm',
+      'ppsx',
+      'ppt',
+      'pptm',
+      'pptx'
+    ]
+  },
+  root: {
+    icon: { name: 'resource-type-root', color: 'var(--oc-color-icon-root)' },
+    extensions: ['root']
+  },
+  spreadsheet: {
+    icon: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
+    extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
+  },
+  text: {
+    icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
+    extensions: [
+      'cb7',
+      'cba',
+      'cbr',
+      'cbt',
+      'cbtc',
+      'cbz',
+      'cvbdl',
+      'eml',
+      'epub',
+      'mdb',
+      'tex',
+      'txt'
+    ]
+  },
+  url: {
+    icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
+    extensions: ['url']
+  },
+  video: {
+    icon: {
+      name: 'resource-type-video',
+      color: 'var(--oc-color-icon-video)'
+    },
+    extensions: ['mov', 'mp4', 'webm', 'wmv']
+  }
+}
+
+export function createDefaultFileIconMapping() {
+  const fileIconMapping: Record<string, IconType> = {}
+
+  Object.values(fileIcon).forEach((value) => {
+    value.extensions.forEach((extension) => {
+      fileIconMapping[extension] = value.icon
+    })
+  })
+
+  return fileIconMapping
+}
diff --git a/packages/design-system/src/helpers/index.ts b/packages/design-system/src/helpers/index.ts
index 41d5f745900..0afd8b9fafd 100644
--- a/packages/design-system/src/helpers/index.ts
+++ b/packages/design-system/src/helpers/index.ts
@@ -1,4 +1,4 @@
 export * from './colors'
 export * from './constants'
-export * from './resolveFileIcon'
+export * from './createDefaultFileIconMapping'
 export * from './types'
diff --git a/packages/design-system/src/helpers/resolveFileIcon.ts b/packages/design-system/src/helpers/resolveFileIcon.ts
deleted file mode 100644
index 04e6cbb9dda..00000000000
--- a/packages/design-system/src/helpers/resolveFileIcon.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-const archiveExtensions = [
-  '7z',
-  'apk',
-  'bz2',
-  'deb',
-  'gz',
-  'gzip',
-  'rar',
-  'tar',
-  'tar.bz2',
-  'tar.gz',
-  'tbz2',
-  'tgz',
-  'zip'
-]
-
-const audioExtensions = [
-  '3gp',
-  '8svx',
-  'aa',
-  'aac',
-  'aax',
-  'act',
-  'aiff',
-  'alac',
-  'amr',
-  'ape',
-  'au',
-  'awb',
-  'cda',
-  'dss',
-  'dvf',
-  'flac',
-  'gsm',
-  'iklax',
-  'ivs',
-  'm4a',
-  'm4b',
-  'm4p',
-  'mmf',
-  'mogg',
-  'movpkg',
-  'mp3',
-  'mpc',
-  'msv',
-  'nmf',
-  'oga',
-  'ogga',
-  'opus',
-  'ra',
-  'raw',
-  'rf64',
-  'rm',
-  'sln',
-  'tta',
-  'voc',
-  'vox',
-  'wav',
-  'wma',
-  'wv'
-]
-
-const codeExtensions = [
-  'bash',
-  'c++',
-  'c',
-  'cc',
-  'cpp',
-  'css',
-  'feature',
-  'go',
-  'h',
-  'hh',
-  'hpp',
-  'htm',
-  'html',
-  'java',
-  'js',
-  'json',
-  'php',
-  'pl',
-  'py',
-  'scss',
-  'sh',
-  'sh-lib',
-  'sql',
-  'ts',
-  'xml',
-  'yaml',
-  'yml'
-]
-
-const defaultExtensions = ['accdb', 'rss', 'swf']
-
-const documentExtensions = ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
-
-const formExtensions = ['docf', 'docxf', 'oform']
-
-const imageExtensions = [
-  'ai',
-  'cdr',
-  'eot',
-  'eps',
-  'gif',
-  'jpeg',
-  'jpg',
-  'otf',
-  'pfb',
-  'png',
-  'ps',
-  'psd',
-  'svg',
-  'ttf',
-  'woff',
-  'xcf'
-]
-
-const presentationExtensions = [
-  'odp',
-  'pot',
-  'potm',
-  'potx',
-  'ppa',
-  'ppam',
-  'pps',
-  'ppsm',
-  'ppsx',
-  'ppt',
-  'pptm',
-  'pptx'
-]
-
-const spreadsheetExtensions = [
-  'csv',
-  'ods',
-  'xla',
-  'xlam',
-  'xls',
-  'xlsb',
-  'xlsm',
-  'xlsx',
-  'xlt',
-  'xltm',
-  'xltx'
-]
-
-const textExtensions = [
-  'cb7',
-  'cba',
-  'cbr',
-  'cbt',
-  'cbtc',
-  'cbz',
-  'cvbdl',
-  'eml',
-  'epub',
-  'mdb',
-  'tex',
-  'txt'
-]
-
-const videoExtensions = ['mov', 'mp4', 'webm', 'wmv']
-
-const fileIcon = {
-  archive: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
-  audio: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
-  code: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
-  default: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
-  drawio: { name: 'resource-type-drawio', color: 'var(--oc-color-icon-drawio)' },
-  document: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
-  ifc: { name: 'resource-type-ifc', color: 'var(--oc-color-icon-ifc)' },
-  ipynb: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
-  image: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
-  form: { name: 'resource-type-form', color: 'var(--oc-color-icon-form)' },
-  markdown: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
-  odg: { name: 'resource-type-graphic', color: 'var(--oc-color-icon-graphic)' },
-  pdf: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
-  presentation: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
-  root: { name: 'resource-type-root', color: 'var(--oc-color-icon-root)' },
-  spreadsheet: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
-  text: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
-  url: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
-  video: { name: 'resource-type-video', color: 'var(--oc-color-icon-video)' }
-}
-
-export function resolveFileIcon(fileExtension: string) {
-  if (archiveExtensions.includes(fileExtension)) {
-    return fileIcon.archive
-  }
-  if (audioExtensions.includes(fileExtension)) {
-    return fileIcon.audio
-  }
-  if (codeExtensions.includes(fileExtension)) {
-    return fileIcon.code
-  }
-  if (defaultExtensions.includes(fileExtension)) {
-    return fileIcon.default
-  }
-  if (documentExtensions.includes(fileExtension)) {
-    return fileIcon.document
-  }
-  if (imageExtensions.includes(fileExtension)) {
-    return fileIcon.image
-  }
-  if (formExtensions.includes(fileExtension)) {
-    return fileIcon.form
-  }
-  if (presentationExtensions.includes(fileExtension)) {
-    return fileIcon.presentation
-  }
-  if (spreadsheetExtensions.includes(fileExtension)) {
-    return fileIcon.spreadsheet
-  }
-  if (textExtensions.includes(fileExtension)) {
-    return fileIcon.text
-  }
-  if (videoExtensions.includes(fileExtension)) {
-    return fileIcon.video
-  }
-
-  if (fileExtension === 'drawio') {
-    return fileIcon.drawio
-  }
-  if (fileExtension === 'ifc') {
-    return fileIcon.ifc
-  }
-  if (fileExtension === 'ipynb') {
-    return fileIcon.ipynb
-  }
-  if (fileExtension === 'md') {
-    return fileIcon.markdown
-  }
-  if (fileExtension === 'odg') {
-    return fileIcon.odg
-  }
-  if (fileExtension === 'pdf') {
-    return fileIcon.pdf
-  }
-  if (fileExtension === 'root') {
-    return fileIcon.root
-  }
-  if (fileExtension === 'url') {
-    return fileIcon.url
-  }
-
-  return fileIcon.default
-}
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index f54b3079a7e..ca2d3a37faf 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -4,7 +4,7 @@ import { DavPermission, DavProperty } from '../../webdav/constants'
 import { Resource, WebDavResponseResource } from './types'
 
 const fileExtensions = {
-  complex: ['tar.bz2', 'tar.gz', '.tar.xz']
+  complex: ['tar.bz2', 'tar.gz', 'tar.xz']
 }
 
 export function buildWebDavFilesPath(userId: string, path: string) {

From 8565263a56f6c5795517bfda71e42e5f3de86847 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 24 Nov 2023 16:27:28 +0100
Subject: [PATCH 3/4] Re-sort imports

---
 .../src/components/OcResourceIcon/OcResourceIcon.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
index f39b9f36bbd..ffeaa085fac 100644
--- a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
+++ b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, unref, inject } from 'vue'
+import { computed, defineComponent, inject, PropType, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 
 import OcIcon from '../OcIcon/OcIcon.vue'

From 25785caf2c89fb552285702148644658e701150b Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 24 Nov 2023 16:28:25 +0100
Subject: [PATCH 4/4] Fix test

---
 .../__snapshots__/OcResourceIcon.spec.ts.snap      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap b/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
index f312035b5c1..bcd8816efec 100644
--- a/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
+++ b/packages/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
@@ -51,49 +51,49 @@ exports[`OcResourceIcon renders OcIcon for resource type file in size xxxlarge 1
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size large 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="large" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="large" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size medium 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="medium" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="medium" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size small 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="small" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="small" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xsmall 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xsmall" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xsmall" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;
 
 exports[`OcResourceIcon renders OcIcon for resource type file with extension "not-a-real-extension" in size xxxlarge 1`] = `
 <span>
-  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="var(--oc-color-text-default)" filltype="fill" name="resource-type-file" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
+  <oc-icon-stub accessiblelabel="" class="oc-resource-icon oc-resource-icon-file" color="red" filltype="fill" name="resource-type-madeup-extension" size="xxxlarge" type="span" variation="passive"></oc-icon-stub>
   <!--v-if-->
 </span>
 `;