Upload components/Layout.js with huggingface_hub

components/Layout.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { ShieldCheck } from 'lucide-react';
+
+export default function Layout({ children }) {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then(() => console.log('Service Worker Registered'))
+        .catch((err) => console.error('SW Error:', err));
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col h-screen w-full bg-telegram-bg text-telegram-text">
+      {/* Header */}
+      <header className="h-14 flex items-center justify-between px-4 bg-telegram-sidebar border-b border-gray-800 shadow-md z-10 shrink-0">
+        <div className="flex items-center gap-2">
+          <ShieldCheck className="text-telegram-accent encrypted-icon" size={24} />
+          <h1 className="font-bold text-lg tracking-wide">SecureChat</h1>
+        </div>
+        <a 
+          href="https://huggingface.co/spaces/akhaliq/anycoder" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-xs text-telegram-secondary hover:text-telegram-accent transition-colors flex items-center gap-1 bg-white/5 px-2 py-1 rounded-full"
+        >
+          Built with anycoder
+        </a>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="flex-1 flex overflow-hidden relative">
+        {children}
+      </main>
+    </div>
+  );
+}