From 4e490a007c236c85aa4d1f06374db33b424034b0 Mon Sep 17 00:00:00 2001
From: myl7 <myl@myl.moe>
Date: Thu, 10 Feb 2022 23:18:22 +0800
Subject: [PATCH] display extension still when space for filename is not enough

---
 components/FileListing.tsx      | 14 ++++++++++++--
 components/FolderGridLayout.tsx |  4 ++--
 components/FolderListLayout.tsx |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index d4b60c7..09fac0f 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
 import useLocalStorage from '../utils/useLocalStorage'
 import { getPreviewType, preview } from '../utils/getPreviewType'
 import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
-import { getFileIcon } from '../utils/getFileIcon'
+import { getExtension, getFileIcon } from '../utils/getFileIcon'
 import {
   DownloadingToast,
   downloadMultipleFiles,
@@ -66,10 +66,20 @@ const renderEmoji = (name: string) => {
   const emoji = emojiRegex().exec(name)
   return { render: emoji && !emoji.index, emoji }
 }
-export const formatChildName = (name: string) => {
+const formatChildName = (name: string) => {
   const { render, emoji } = renderEmoji(name)
   return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
 }
+export const ChildName: FC<{ name: string }> = ({ name }) => {
+  let basename = formatChildName(name)
+  const extension = getExtension(basename)
+  basename = basename.substring(0, basename.length - extension.length)
+  return (
+    <span className="truncate before:float-right before:content-[attr(data-tail)]" data-tail={extension}>
+      {basename}
+    </span>
+  )
+}
 export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => {
   const { render, emoji } = renderEmoji(child.name)
   return render ? (
diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx
index 2daec92..312cca2 100644
--- a/components/FolderGridLayout.tsx
+++ b/components/FolderGridLayout.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'next-i18next'
 import { getBaseUrl } from '../utils/getBaseUrl'
 import { formatModifiedDateTime } from '../utils/fileDetails'
 import { getReadablePath } from '../utils/getReadablePath'
-import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
+import { Checkbox, ChildIcon, ChildName, Downloading } from './FileListing'
 
 const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
   // We use the generated medium thumbnail for rendering preview images (excluding folders)
@@ -43,7 +43,7 @@ const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
         <span className="w-5 flex-shrink-0 text-center">
           <ChildIcon child={c} />
         </span>
-        <span className="overflow-hidden truncate">{formatChildName(c.name)}</span>
+        <ChildName name={c.name} />
       </div>
       <div className="truncate text-center font-mono text-xs text-gray-700 dark:text-gray-500">
         {formatModifiedDateTime(c.lastModifiedDateTime)}
diff --git a/components/FolderListLayout.tsx b/components/FolderListLayout.tsx
index 9cebf29..6eb6e28 100644
--- a/components/FolderListLayout.tsx
+++ b/components/FolderListLayout.tsx
@@ -10,7 +10,7 @@ import { getBaseUrl } from '../utils/getBaseUrl'
 import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
 import { getReadablePath } from '../utils/getReadablePath'
 
-import { Downloading, Checkbox, formatChildName, ChildIcon } from './FileListing'
+import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
 
 const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
   return (
@@ -19,7 +19,7 @@ const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c })
         <div className="w-5 flex-shrink-0 text-center">
           <ChildIcon child={c} />
         </div>
-        <div className="truncate">{formatChildName(c.name)}</div>
+        <ChildName name={c.name} />
       </div>
       <div className="col-span-3 hidden flex-shrink-0 font-mono text-sm text-gray-700 dark:text-gray-500 md:block">
         {formatModifiedDateTime(c.lastModifiedDateTime)}