From 25c4de8f74d6bd45a0f674ae4ebc59ff10849966 Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Wed, 28 Feb 2024 22:28:39 +0800
Subject: [PATCH] feat: more list item filename overflow options

---
 src/lang/en/home.json              |  7 ++++++-
 src/pages/home/folder/ListItem.tsx | 11 +++++++----
 src/store/local_settings.ts        |  7 ++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/lang/en/home.json b/src/lang/en/home.json
index cf031f161..31b3b242a 100644
--- a/src/lang/en/home.json
+++ b/src/lang/en/home.json
@@ -123,7 +123,12 @@
       "none": "None",
       "visible": "Visible"
     },
-    "filename_scrollable": "Filename scrollable",
+    "list_item_filename_overflow": "List item filename overflow",
+    "list_item_filename_overflow_options": {
+      "ellipsis": "Ellipsis",
+      "scrollable": "Scrollable",
+      "multi_line": "Multi-line"
+    },
     "open_item_on_checkbox": "Open item on Checkbox",
     "open_item_on_checkbox_options": {
       "direct": "Direct",
diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
index ee725f6e2..a92fb5567 100644
--- a/src/pages/home/folder/ListItem.tsx
+++ b/src/pages/home/folder/ListItem.tsx
@@ -38,7 +38,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
   const { show } = useContextMenu({ id: 1 })
   const { pushHref, to } = useRouter()
   const isShouldOpenItem = useOpenItemWithCheckbox()
-  const filenameScrollable = () => local["filename_scrollable"] === "true"
+  const filenameStyle = () => local["list_item_filename_overflow"]
   return (
     <Motion.div
       initial={{ opacity: 0, scale: 0.95 }}
@@ -115,9 +115,12 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
           <Text
             class="name"
             css={{
-              whiteSpace: "nowrap",
-              "overflow-x": filenameScrollable() ? "auto" : "hidden",
-              textOverflow: filenameScrollable() ? "unset" : "ellipsis",
+              wordBreak: "break-all",
+              whiteSpace: filenameStyle() === "multi_line" ? "unset" : "nowrap",
+              "overflow-x":
+                filenameStyle() === "scrollable" ? "auto" : "hidden",
+              textOverflow:
+                filenameStyle() === "ellipsis" ? "ellipsis" : "unset",
               "scrollbar-width": "none", // firefox
               "&::-webkit-scrollbar": {
                 // webkit
diff --git a/src/store/local_settings.ts b/src/store/local_settings.ts
index 0a2d83b02..54e32cb1c 100644
--- a/src/store/local_settings.ts
+++ b/src/store/local_settings.ts
@@ -47,9 +47,10 @@ export const initialLocalSettings = [
     type: "number",
   },
   {
-    key: "filename_scrollable",
-    default: "false",
-    type: "boolean",
+    key: "list_item_filename_overflow",
+    default: "ellipsis",
+    type: "select",
+    options: ["ellipsis", "scrollable", "multi_line"],
   },
   {
     key: "open_item_on_checkbox",