From fc7001f4be0c515bb87649d109da75a3bb716c72 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Thu, 18 Dec 2025 20:47:16 -0500
Subject: [PATCH] to work with typewritter

---
 src/components/Bars.tsx |  8 ++---
 src/lib/client-utils.ts | 68 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index 28a134f..f61c8f3 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -3,6 +3,7 @@ import { useBars } from "~/context/bars";
 import { onMount, createEffect, createSignal, Show, For } from "solid-js";
 import { api } from "~/lib/api";
 import { TerminalSplash } from "./TerminalSplash";
+import { insertSoftHyphens } from "~/lib/client-utils";
 
 export function LeftBar() {
   const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
@@ -201,11 +202,8 @@ export function LeftBar() {
                               alt="post-cover"
                               class="float-right mb-1 ml-2 h-12 w-16 rounded object-cover"
                             />
-                            <span
-                              class="inline wrap-break-word hyphens-auto"
-                              style="hyphens: auto;"
-                            >
-                              {post.title.replace(/_/g, " ")}
+                            <span class="inline wrap-break-word hyphens-auto">
+                              {insertSoftHyphens(post.title.replace(/_/g, " "))}
                             </span>
                           </div>
 
diff --git a/src/lib/client-utils.ts b/src/lib/client-utils.ts
index 9242d7b..12c0d9a 100644
--- a/src/lib/client-utils.ts
+++ b/src/lib/client-utils.ts
@@ -12,3 +12,71 @@ export function hapticFeedback(duration: number = 50) {
     navigator.vibrate(duration);
   }
 }
+
+/**
+ * Inserts soft hyphens (&shy;) into long words to enable manual hyphenation
+ * Works with Typewriter component since it uses actual characters
+ * @param text - The text to add hyphens to
+ * @param minWordLength - Minimum word length to hyphenate (default 8)
+ * @returns Text with soft hyphens inserted
+ */
+export function insertSoftHyphens(
+  text: string,
+  minWordLength: number = 8
+): string {
+  return text
+    .split(" ")
+    .map((word) => {
+      // Skip short words
+      if (word.length < minWordLength) return word;
+
+      // Common English hyphenation patterns
+      const patterns = [
+        // Prefixes (break after)
+        {
+          pattern:
+            /^(un|re|in|dis|en|non|pre|pro|anti|de|mis|over|sub|super|trans|under)(.+)/i,
+          split: 1
+        },
+        // Suffixes (break before)
+        {
+          pattern:
+            /(.+)(ing|tion|sion|ness|ment|able|ible|ful|less|ship|hood|ward|like)$/i,
+          split: 1
+        },
+        // Double consonants (break between)
+        { pattern: /(.+[aeiou])([bcdfghjklmnpqrstvwxyz])\2(.+)/i, split: 2 },
+        // Compound words with common parts
+        {
+          pattern:
+            /(.+)(stand|work|time|place|where|thing|back|over|under|out)$/i,
+          split: 1
+        }
+      ];
+
+      for (const { pattern, split } of patterns) {
+        const match = word.match(pattern);
+        if (match) {
+          if (split === 1) {
+            // Break after first capture group
+            return match[1] + "\u00AD" + match[2];
+          } else if (split === 2) {
+            // Break between doubled consonants
+            return match[1] + match[2] + "\u00AD" + match[2] + match[3];
+          }
+        }
+      }
+
+      // Fallback: Insert soft hyphen every 6-8 characters in very long words
+      if (word.length > 12) {
+        const chunks: string[] = [];
+        for (let i = 0; i < word.length; i += 6) {
+          chunks.push(word.slice(i, i + 6));
+        }
+        return chunks.join("\u00AD");
+      }
+
+      return word;
+    })
+    .join(" ");
+}