feat: enhance user interface with CRT effects, update AboutMe and Projects sections, and add new Collab app

src/components/Desktop/Desktop.tsx

@@ -50,12 +50,19 @@ export default function Desktop() {
               gridRow: app.desktopPosition.row + 1,
             }}
           >
-            <DesktopIcon app={app} onOpen={() => openWindow(app.id)} />
+            <DesktopIcon
+              app={app}
+              onOpen={() =>
+                app.externalUrl
+                  ? window.open(app.externalUrl, '_blank', 'noopener,noreferrer')
+                  : openWindow(app.id)
+              }
+            />
           </div>
         ))}
       </div>
 
-      {APPS.map(app => (
+      {APPS.filter(app => !app.externalUrl).map(app => (
         <Window key={app.id} app={app} />
       ))}
 

src/components/DesktopIcon/DesktopIcon.tsx

@@ -10,7 +10,9 @@ export default function DesktopIcon({ app, onOpen }: Props) {
   return (
     <div className="desktop-icon" onDoubleClick={onOpen}>
       <div className="desktop-icon-img" style={{ background: app.iconGradient }}>
-        <span>{app.emoji}</span>
+        {app.iconImage
+          ? <img src={app.iconImage} alt={app.title} style={{ width: '70%', height: '70%', objectFit: 'contain' }} />
+          : <span>{app.emoji}</span>}
       </div>
       <span className="desktop-icon-label">{app.title}</span>
     </div>

src/components/MenuBar/MenuBar.tsx

@@ -1,31 +1,52 @@
 import { useEffect, useState } from 'react';
 import './MenuBar.css';
 
-const MENU_ITEMS = ['File', 'Edit', 'View', 'Go', 'Help'];
+const MENU_ITEMS = ['encrypt', 'sign', 'verify', 'wipe', 'about'];
+const BOOT_AT = Date.now();
 
 export default function MenuBar() {
   const [time, setTime] = useState(() => formatTime(new Date()));
+  const [uptime, setUptime] = useState(() => formatUptime(0));
 
   useEffect(() => {
-    const id = setInterval(() => setTime(formatTime(new Date())), 1000);
+    const id = setInterval(() => {
+      setTime(formatTime(new Date()));
+      setUptime(formatUptime(Date.now() - BOOT_AT));
+    }, 1000);
     return () => clearInterval(id);
   }, []);
 
   return (
     <div className="menubar">
       <div className="menubar-left">
-        <span className="menubar-logo">&#63743;</span>
+        <span className="menubar-logo">[ MingdaOS ]</span>
         {MENU_ITEMS.map(item => (
           <span key={item} className="menubar-item">{item}</span>
         ))}
       </div>
       <div className="menubar-right">
-        <span className="menubar-clock">{time}</span>
+        <span className="menubar-clock" style={{ opacity: 0.55, marginRight: 12 }}>
+          up {uptime}
+        </span>
+        <span className="menubar-clock">
+          {time}<span className="cypher-caret">█</span>
+        </span>
       </div>
     </div>
   );
 }
 
 function formatTime(d: Date) {
-  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+  const hh = String(d.getUTCHours()).padStart(2, '0');
+  const mm = String(d.getUTCMinutes()).padStart(2, '0');
+  const ss = String(d.getUTCSeconds()).padStart(2, '0');
+  return `${hh}:${mm}:${ss} UTC`;
+}
+
+function formatUptime(ms: number) {
+  const s = Math.floor(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return `${String(h).padStart(2, '0')}h${String(m).padStart(2, '0')}m${String(sec).padStart(2, '0')}s`;
 }