Merge branch 'main' into mobile

.gitignore

@@ -156,9 +156,9 @@ src/scripts/icons/temp/
 apps/desktop/assets/emojis.db
 apps/desktop/assets/icons.db
 apps/desktop/assets/fonts/neotrax.otf
-apps/desktop/assets/colanode-logo-black.png
+apps/desktop/assets/colanode-logo.png
-apps/desktop/assets/colanode-logo-black.ico
+apps/desktop/assets/colanode-logo.ico
-apps/desktop/assets/colanode-logo-black.icns
+apps/desktop/assets/colanode-logo.icns
 
 # Ignore web assets
 apps/web/public/assets/emojis.db
@@ -166,8 +166,8 @@ apps/web/public/assets/icons.db
 apps/web/public/assets/emojis.svg
 apps/web/public/assets/icons.svg
 apps/web/public/assets/fonts/neotrax.otf
-apps/web/public/assets/colanode-logo-black-192.png
+apps/web/public/assets/colanode-logo-192.jpg
-apps/web/public/assets/colanode-logo-black-512.png
+apps/web/public/assets/colanode-logo-512.jpg
 
 # Ignore mobile assets
 apps/mobile/assets/ui/index.html

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img alt="Colanode cover" src="assets/images/colanode-cover-black.png">
+<img alt="Colanode cover" src="assets/images/colanode-github-cover.jpg">
 <p></p>
 <a target="_blank" href="https://opensource.org/licenses/Apache-2.0" style="background:none">
     <img src="https://img.shields.io/badge/Licene-Apache_2.0-blue" style="height: 22px;" />

apps/desktop/forge.config.ts

@@ -12,7 +12,7 @@ const config: ForgeConfig = {
   packagerConfig: {
     name: 'Colanode',
     executableName: process.platform === 'linux' ? 'colanode' : 'Colanode',
-    icon: 'assets/colanode-logo-black',
+    icon: 'assets/colanode-logo',
     appBundleId: 'com.colanode.desktop',
     ...(process.platform === 'win32' && {
       certificateFile: process.env.CERTIFICATE_PATH,
@@ -77,7 +77,7 @@ const config: ForgeConfig = {
       }),
     }),
     new MakerDMG({
-      icon: 'assets/colanode-logo-black.png',
+      icon: 'assets/colanode-logo.png',
       title: 'Colanode',
     }),
     {

apps/desktop/src/main.ts

@@ -6,6 +6,7 @@ import {
   shell,
   globalShortcut,
   dialog,
+  nativeTheme,
 } from 'electron';
 import path from 'path';
 
@@ -48,6 +49,11 @@ updateElectronApp({
 const createWindow = async () => {
   await app.migrate();
 
+  const themeMode = (await app.metadata.get('theme.mode'))?.value;
+  if (themeMode) {
+    nativeTheme.themeSource = themeMode;
+  }
+
   // Create the browser window.
   let windowSize = (await app.metadata.get('window.size'))?.value;
   const mainWindow = new BrowserWindow({
@@ -57,7 +63,7 @@ const createWindow = async () => {
     fullscreenable: true,
     minWidth: 800,
     minHeight: 600,
-    icon: path.join(app.path.assets, 'colanode-logo-black.png'),
+    icon: path.join(app.path.assets, 'colanode-logo.png'),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
@@ -112,6 +118,16 @@ const createWindow = async () => {
   const subscriptionId = eventBus.subscribe((event) => {
     if (event.type === 'query.result.updated') {
       mainWindow.webContents.send('event', event);
+    } else if (
+      event.type === 'app.metadata.updated' &&
+      event.metadata.key === 'theme.mode'
+    ) {
+      nativeTheme.themeSource = event.metadata.value;
+    } else if (
+      event.type === 'app.metadata.deleted' &&
+      event.metadata.key === 'theme.mode'
+    ) {
+      nativeTheme.themeSource = 'system';
     }
   });
 

apps/web/public/manifest.json

@@ -8,14 +8,14 @@
       "type": "image/x-icon"
     },
     {
-      "src": "assets/colanode-logo-black-192.png",
+      "src": "assets/colanode-logo-192.jpg",
-      "type": "image/png",
+      "type": "image/jpeg",
       "sizes": "192x192",
       "purpose": "any maskable"
     },
     {
-      "src": "assets/colanode-logo-black-512.png",
+      "src": "assets/colanode-logo-512.jpg",
-      "type": "image/png",
+      "type": "image/jpeg",
       "sizes": "512x512",
       "purpose": "any maskable"
     }

packages/ui/src/components/layouts/sidebars/sidebar-menu.tsx

@@ -7,6 +7,7 @@ import { SidebarMenuIcon } from '@colanode/ui/components/layouts/sidebars/sideba
 import { useRadar } from '@colanode/ui/contexts/radar';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
 import { useLiveQuery } from '@colanode/ui/hooks/use-live-query';
+import { cn } from '@colanode/ui/lib/utils';
 import { useAppStore } from '@colanode/ui/stores/app';
 
 interface SidebarMenuProps {
@@ -41,15 +42,7 @@ export const SidebarMenu = ({ value, onChange }: SidebarMenuProps) => {
 
   return (
     <div className="flex flex-col h-full w-[65px] min-w-[65px] items-center">
-      {showMacOsPlaceholder ? (
+      <div className={cn('w-full', showMacOsPlaceholder ? 'h-8' : 'h-4')} />
-        <div className="w-full h-8 flex gap-[8px] px-[6px] py-[7px]">
-          <div className="w-3 h-3 bg-gray-400 rounded-full"></div>
-          <div className="w-3 h-3 bg-gray-400 rounded-full"></div>
-          <div className="w-3 h-3 bg-gray-400 rounded-full"></div>
-        </div>
-      ) : (
-        <div className="w-full h-4" />
-      )}
       <SidebarMenuHeader />
       <div className="flex flex-col gap-1 mt-2 w-full p-2 items-center flex-grow">
         <SidebarMenuIcon

scripts/src/postinstall/index.ts

@@ -19,7 +19,8 @@ const FONTS_DIR = path.resolve(ASSETS_DIR, 'fonts');
 const FONTS_OTF_PATH = path.resolve(FONTS_DIR, NEOTRAX_FONT_NAME);
 
 const DESKTOP_ASSETS_DIR = path.resolve('apps', 'desktop', 'assets');
-const WEB_ASSETS_DIR = path.resolve('apps', 'web', 'public', 'assets');
+const WEB_PUBLIC_DIR = path.resolve('apps', 'web', 'public');
+const WEB_ASSETS_DIR = path.resolve(WEB_PUBLIC_DIR, 'assets');
 const MOBILE_ASSETS_DIR = path.resolve('apps', 'mobile', 'assets');
 
 const copyFile = (source: string, target: string | string[]) => {
@@ -57,28 +58,33 @@ const execute = () => {
   ]);
 
   copyFile(
-    path.resolve(IMAGES_DIR, 'colanode-logo-black-192.png'),
+    path.resolve(IMAGES_DIR, 'colanode-logo.ico'),
-    path.resolve(WEB_ASSETS_DIR, 'colanode-logo-black-192.png')
+    path.resolve(WEB_PUBLIC_DIR, 'favicon.ico')
   );
 
   copyFile(
-    path.resolve(IMAGES_DIR, 'colanode-logo-black-512.png'),
+    path.resolve(IMAGES_DIR, 'colanode-logo-192.jpg'),
-    path.resolve(WEB_ASSETS_DIR, 'colanode-logo-black-512.png')
+    path.resolve(WEB_ASSETS_DIR, 'colanode-logo-192.jpg')
   );
 
   copyFile(
-    path.resolve(IMAGES_DIR, 'colanode-logo-black.png'),
+    path.resolve(IMAGES_DIR, 'colanode-logo-512.jpg'),
-    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo-black.png')
+    path.resolve(WEB_ASSETS_DIR, 'colanode-logo-512.jpg')
   );
 
   copyFile(
-    path.resolve(IMAGES_DIR, 'colanode-logo-black.ico'),
+    path.resolve(IMAGES_DIR, 'colanode-logo.png'),
-    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo-black.ico')
+    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo.png')
   );
 
   copyFile(
-    path.resolve(IMAGES_DIR, 'colanode-logo-black.icns'),
+    path.resolve(IMAGES_DIR, 'colanode-logo.ico'),
-    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo-black.icns')
+    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo.ico')
+  );
+
+  copyFile(
+    path.resolve(IMAGES_DIR, 'colanode-logo.icns'),
+    path.resolve(DESKTOP_ASSETS_DIR, 'colanode-logo.icns')
   );
 };