Context menu and placeholder images

src/App.tsx

@@ -5,6 +5,7 @@ import { Connection } from '@components/Connection';
 import { useRoute } from '@core/router';
 import { useAppSelector } from '@hooks/useAppSelector';
 
+import { ContextMenu } from './components/generic/ContextMenu';
 import { BottomNav } from './components/menu/BottomNav';
 import { Extensions } from './pages/Extensions/Index';
 import { Messages } from './pages/Messages';
@@ -17,17 +18,19 @@ export const App = (): JSX.Element => {
 
   return (
     <div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
-      <Connection />
-      <div className="flex h-full flex-col bg-gray-200 dark:bg-secondaryDark">
-        <div className="flex min-h-0 w-full flex-grow">
-          {route.name === 'messages' && <Messages />}
-          {route.name === 'nodes' && <Nodes />}
-          {route.name === 'map' && <Map />}
-          {route.name === 'extensions' && <Extensions />}
-          {route.name === false && <NotFound />}
+      <ContextMenu>
+        <Connection />
+        <div className="flex h-full flex-col bg-gray-200 dark:bg-secondaryDark">
+          <div className="flex min-h-0 w-full flex-grow">
+            {route.name === 'messages' && <Messages />}
+            {route.name === 'nodes' && <Nodes />}
+            {route.name === 'map' && <Map />}
+            {route.name === 'extensions' && <Extensions />}
+            {route.name === false && <NotFound />}
+          </div>
+          <BottomNav />
         </div>
-        <BottomNav />
-      </div>
+      </ContextMenu>
     </div>
   );
 };