to work with typewritter

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
+                            <span class="inline wrap-break-word hyphens-auto">
-                              class="inline wrap-break-word hyphens-auto"
+                              {insertSoftHyphens(post.title.replace(/_/g, " "))}
-                              style="hyphens: auto;"
-                            >
-                              {post.title.replace(/_/g, " ")}
                             </span>
                           </div>
 

src/lib/client-utils.ts

@@ -12,3 +12,71 @@ export function hapticFeedback(duration: number = 50) {
     navigator.vibrate(duration);
   }
 }
+
+/**
+ * Inserts soft hyphens (­) 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(" ");
+}