SYNC: themable special page layout

packages/web/src/stores.ts

@@ -228,6 +228,12 @@ currentTheme.subscribe(value => {
 });
 export const getCurrentTheme = () => currentThemeValue;
 
+let extensionsValue: ExtensionsDirectory = null;
+extensions.subscribe(value => {
+  extensionsValue = value;
+});
+export const getExtensions = () => extensionsValue;
+
 export const currentThemeDefinition = derived(
   [currentTheme, extensions, systemThemeStore],
   ([$currentTheme, $extensions, $systemTheme]) => {
@@ -239,8 +245,10 @@ currentThemeDefinition.subscribe(value => {
   if (value?.themeType && getCurrentTheme()) {
     localStorage.setItem('currentThemeType', value?.themeType);
   } else {
+    if (extensionsValue?.themes?.length > 0) {
       localStorage.removeItem('currentThemeType');
     }
+  }
 });
 export const openedConnectionsWithTemporary = derived(
   [openedConnections, temporaryOpenedConnections, openedSingleDatabaseConnections],
@@ -388,12 +396,6 @@ export const getCurrentDatabase = () => currentDatabaseValue;
 let currentSettingsValue = null;
 export const getCurrentSettings = () => currentSettingsValue || {};
 
-let extensionsValue: ExtensionsDirectory = null;
-extensions.subscribe(value => {
-  extensionsValue = value;
-});
-export const getExtensions = () => extensionsValue;
-
 let openedConnectionsValue = null;
 openedConnections.subscribe(value => {
   openedConnectionsValue = value;

packages/web/src/widgets/SpecialPageLayout.svelte

@@ -3,6 +3,8 @@
   import { getConfig } from '../utility/metadataLoaders';
   import { handleAuthOnStartup } from '../clientAuth';
   import { setConfigForPermissions } from '../utility/hasPermission';
+  import { visibleTitleBar } from '../stores';
+  import TitleBar from './TitleBar.svelte';
 
   async function loadApi() {
     try {
@@ -21,10 +23,22 @@
 
     loadApi();
   });
+
+  const isDark =
+    localStorage.getItem('currentThemeType') === 'dark' ||
+    (!localStorage.getItem('currentThemeType') &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
 </script>
 
-<div class="root theme-light theme-type-light">
+<div class={`root ${isDark ? 'theme-dark theme-type-dark' : 'theme-light theme-type-light'}`}>
-  <div class="text">DbGate</div>
+  {#if $visibleTitleBar}
+    <div class="titlebar">
+      <TitleBar />
+    </div>
+  {/if}
+
+  <div class="text" class:visibleTitleBar={!!$visibleTitleBar}>DbGate</div>
   <div class="wrap">
     <div class="logo">
       <img class="img" src="logo192.png" />
@@ -59,6 +73,10 @@
     text-transform: uppercase;
   }
 
+  .text.visibleTitleBar {
+    top: calc(var(--dim-titlebar-height) + 1rem);
+  }
+
   .root {
     color: var(--theme-font-1);
     display: flex;
@@ -98,4 +116,12 @@
     flex-wrap: wrap;
     width: 600px;
   }
+
+  .titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--dim-titlebar-height);
+  }
 </style>

packages/web/src/widgets/TitleBar.svelte

@@ -10,9 +10,8 @@
   import { apiOn } from '../utility/api';
   import { isProApp } from '../utility/proTools';
 
-  $: title = _.compact([$activeTab?.title, $currentDatabase?.name, isProApp() ? 'DbGate Premium' : 'DbGate']).join(
+  $: appName = isProApp() ? 'DbGate Premium' : 'DbGate Community';
-    ' - '
+  $: title = _.compact([$activeTab?.title, $currentDatabase?.name, appName]).join(' - ');
-  );
   const electron = getElectron();
 
   let isMaximized = false;
@@ -27,11 +26,13 @@
 <div class="container" on:dblclick|stopPropagation|preventDefault={() => electron.send('window-action', 'maximize')}>
   {#if !isMac()}
     <div class="icon"><img src="logo192.png" width="20" height="20" /></div>
+    {#if !window['dbgate_page']}
       <div class="menu">
         <HorizontalMenu items={mainMenuDefinition({ editMenu: !!electron })} />
       </div>
     {/if}
-  <div class="title">{title}</div>
+  {/if}
+  <div class="title">{window['dbgate_page'] ? appName : title}</div>
 
   {#if !isMac()}
     <div class="actions">