Handle malformed article URLs

components/ReaderView.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Article, ReaderSettings } from '../types';
 import { FileText, MousePointerClick } from 'lucide-react';
+import { getDisplayUrl } from '../utils/url';
 
 interface ReaderViewProps {
   article?: Article | null;
@@ -68,6 +69,8 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
     );
   }
 
+  const displayUrl = getDisplayUrl(article.url);
+
   return (
     <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300">
       <div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 flex justify-between items-start">
@@ -75,13 +78,13 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
             <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
             {article.title}
             </h2>
-            <a 
-            href={article.url} 
-            target="_blank" 
+            <a
+            href={displayUrl.href}
+            target="_blank"
             rel="noopener noreferrer"
             className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
             >
-            {new URL(article.url).hostname}
+            {displayUrl.hostname}
             </a>
         </div>