v1.0.8

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.8] - 2026-07-31
+
+### Added
+- Remember the last visited page when switching sections (credits @LinkPhoenix).
+
+### Changed
+- Enum list filters with many options render as a searchable combobox (credits @LinkPhoenix).
+- Object cells display the variant label as a badge instead of the raw type name (credits @LinkPhoenix).
+- Empty date pickers open on the current date and time (credits @LinkPhoenix).
+
+### Fixed
+- Custom logos no longer flash when navigating between pages.
+- Landing no longer flashes "Select a view" before redirecting to the default page.
+
 ## [1.0.7] - 2026-07-30
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stalwart-webui",
   "private": true,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Stalwart WebUI",
   "type": "module",
   "scripts": {
@@ -68,4 +68,4 @@
     "vite": "^8.2.0",
     "vitest": "^4.1.10"
   }
-}
+}

src/components/common/Logo.tsx

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
  */
 
-import { useState, useEffect } from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getApiBaseUrl } from '@/services/api';
+import { getLogoState, loadLogoOnce, subscribeToLogo } from '@/lib/logoCache';
 
 export function DefaultLogo() {
   const { t } = useTranslation();
@@ -31,54 +31,18 @@ export function DefaultLogo() {
 
 export default function Logo() {
   const { t } = useTranslation();
-  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const logo = useSyncExternalStore(subscribeToLogo, getLogoState, getLogoState);
-  const [failed, setFailed] = useState(false);
 
   useEffect(() => {
-    const controller = new AbortController();
+    loadLogoOnce();
-
-    async function fetchLogo() {
-      try {
-        const response = await fetch(`${getApiBaseUrl()}/logo`, {
-          signal: controller.signal,
-        });
-        const contentType = response.headers.get('content-type') ?? '';
-
-        if (response.ok && contentType.startsWith('image/')) {
-          const blob = await response.blob();
-          if (!controller.signal.aborted) {
-            const url = URL.createObjectURL(blob);
-            setLogoUrl(url);
-          }
-        } else {
-          if (!controller.signal.aborted) setFailed(true);
-        }
-      } catch {
-        if (!controller.signal.aborted) setFailed(true);
-      }
-    }
-
-    fetchLogo();
-
-    return () => {
-      controller.abort();
-    };
   }, []);
 
-  useEffect(() => {
+  if (logo.status === 'custom') {
-    return () => {
+    return <img src={logo.url} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
-      if (logoUrl) {
-        URL.revokeObjectURL(logoUrl);
-      }
-    };
-  }, [logoUrl]);
-
-  if (logoUrl && !failed) {
-    return <img src={logoUrl} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
   }
 
-  if (!failed) {
+  if (logo.status === 'loading') {
-    return <div className="h-7" aria-hidden="true" />;
+    return <span className="block h-7 w-[140px]" aria-hidden="true" />;
   }
 
   return <DefaultLogo />;

src/components/forms/FieldWidget.tsx

@@ -844,7 +844,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
     return d && !isNaN(d.getTime()) ? d : null;
   }, [strValue]);
 
-  const localTime = selected ? selected.toTimeString().slice(0, 5) : '';
+  const localTime = (selected ?? new Date()).toTimeString().slice(0, 5);
 
   const commit = (day: Date, time: string) => {
     const [hours, minutes] = time.split(':').map(Number);
@@ -880,7 +880,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
             defaultMonth={selected ?? undefined}
             autoFocus
             onSelect={(day) => {
-              if (day) commit(day, localTime || '00:00');
+              if (day) commit(day, localTime);
             }}
           />
           <div className="border-t p-3">

src/components/layout/MainContent.tsx

@@ -59,9 +59,7 @@ export function MainContent({ viewName, id, section }: MainContentProps) {
 
 function renderView(schema: Schema | null, viewName?: string, id?: string, section?: string): ReactNode {
   if (!viewName) {
-    return (
+    return <LoadingFallback />;
-      <div className="flex items-center justify-center p-8 text-muted-foreground">Select a view from the sidebar.</div>
-    );
   }
 
   if (viewName.startsWith('Dashboard/')) {

src/components/layout/Sidebar.tsx

@@ -16,13 +16,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { useUIStore } from '@/stores/uiStore';
 import { useAccountStore } from '@/stores/accountStore';
 import { useSchemaStore } from '@/stores/schemaStore';
-import {
+import { visibleLayouts, isLinkEnterprise, isLinkVisible } from '@/lib/layout';
-  visibleLayouts,
+import { sectionLandingLink } from '@/lib/lastVisited';
-  findFirstVisibleLinkInLayout,
-  findFirstAccessibleLinkInLayout,
-  isLinkEnterprise,
-  isLinkVisible,
-} from '@/lib/layout';
 import type { Layout, LayoutItem, LayoutSubItem } from '@/types/schema';
 
 function LucideIcon({ name, className }: { name: string; className?: string }) {
@@ -341,9 +336,7 @@ export function Sidebar() {
   const handleSectionClick = (target: Layout) => {
     setActiveSection(target.name);
     const canGet = (prefix: string) => permissions.includes(`${prefix}Get`);
-    const first =
+    const first = sectionLandingLink(schema, target, edition, canGet, hasPermission);
-      findFirstAccessibleLinkInLayout(schema, target, edition, canGet, hasPermission) ??
-      findFirstVisibleLinkInLayout(schema, target, edition, canGet, hasPermission);
     if (first) navigate(`/${target.name}/${first}`);
   };
 

src/components/layout/TopBar.tsx

@@ -22,7 +22,8 @@ import {
 import Logo from '@/components/common/Logo';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
-import { findFirstAccessibleLinkInLayout, findFirstVisibleLinkInLayout, visibleLayouts } from '@/lib/layout';
+import { visibleLayouts } from '@/lib/layout';
+import { sectionLandingLink } from '@/lib/lastVisited';
 import { useUIStore } from '@/stores/uiStore';
 import { useAuthStore } from '@/stores/authStore';
 import { buildEndSessionUrl, getPostLogoutRedirectUri } from '@/services/auth/oauth';
@@ -144,9 +145,7 @@ export function TopBar() {
                         onClick={() => {
                           setActiveSection(layout.name);
                           const canGet = (prefix: string) => hasObjectPermission(prefix, 'Get');
-                          const firstLink =
+                          const firstLink = sectionLandingLink(schema, layout, edition, canGet, hasPermission);
-                            findFirstAccessibleLinkInLayout(schema, layout, edition, canGet, hasPermission) ??
-                            findFirstVisibleLinkInLayout(schema, layout, edition, canGet, hasPermission);
                           if (firstLink) {
                             navigate(`/${layout.name}/${firstLink}`);
                           }

src/components/lists/DynamicList.tsx

@@ -25,6 +25,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
+import { Combobox } from '@/components/ui/combobox';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { formatSize as fmtSize, formatDuration as fmtDuration } from '@/lib/durationFormat';
@@ -65,6 +66,8 @@ import type { Schema, Field, MassAction, ItemAction, Filter as FilterDef } from
 import type { JmapSetResponse, JmapSetError } from '@/types/jmap';
 import type { ResolvedSchema } from '@/lib/schemaResolver';
 
+const ENUM_FILTER_COMBOBOX_THRESHOLD = 15;
+
 const PAGE_SIZE = 25;
 const MAX_REPORTED_ERRORS = 3;
 
@@ -285,9 +288,11 @@ function renderCellValue(
 
     case 'object': {
       if (value && typeof value === 'object' && !Array.isArray(value)) {
-        const obj = value as Record<string, unknown>;
+        const typeName = (value as Record<string, unknown>)['@type'];
-        if ('@type' in obj && typeof obj['@type'] === 'string') {
+        if (typeof typeName === 'string') {
-          return obj['@type'];
+          const objSchema = schema.schemas[ft.objectName];
+          const variant = objSchema?.type === 'multiple' ? objSchema.variants.find((v) => v.name === typeName) : null;
+          return <Badge variant="secondary">{variant?.label ?? typeName}</Badge>;
         }
       }
       return <span className="text-muted-foreground">-</span>;
@@ -869,6 +874,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
 
       case 'enum': {
         const enumVariants = schema!.enums[filterDef.enumName] ?? [];
+        if (enumVariants.length > ENUM_FILTER_COMBOBOX_THRESHOLD) {
+          return wrapper(
+            <Combobox
+              options={[
+                { value: '__all__', label: t('filters.all', 'All') },
+                ...enumVariants.map((v) => ({ value: v.name, label: v.label })),
+              ]}
+              value={value || '__all__'}
+              onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}
+              searchPlaceholder={t('common.searchPlaceholder', 'Search...')}
+              emptyText={t('field.noMatches', 'No matches')}
+            />,
+          );
+        }
         return wrapper(
           <Select value={value || '__all__'} onValueChange={(v) => handleFilterSelectChange(filterDef.field, v)}>
             <SelectTrigger>

src/lib/lastVisited.ts

@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import {
+  findFirstAccessibleLinkInLayout,
+  findFirstVisibleLinkInLayout,
+  isLinkAccessible,
+  type CanGet,
+  type HasPermission,
+} from '@/lib/layout';
+import type { Layout, Schema } from '@/types/schema';
+
+const STORAGE_KEY = 'stalwart-last-visited';
+
+function readAll(): Record<string, unknown> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : null;
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? (parsed as Record<string, unknown>) : {};
+  } catch {
+    return {};
+  }
+}
+
+export function rememberLastVisited(section: string, viewName: string): void {
+  try {
+    const all = readAll();
+    if (all[section] === viewName) return;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...all, [section]: viewName }));
+  } catch {
+    return;
+  }
+}
+
+export function sectionLandingLink(
+  schema: Schema,
+  layout: Layout,
+  edition: string,
+  canGet: CanGet,
+  hasPerm?: HasPermission,
+): string | null {
+  const last = readAll()[layout.name];
+  if (typeof last === 'string' && isLinkAccessible(schema, last, edition, canGet, hasPerm)) {
+    return last;
+  }
+  return (
+    findFirstAccessibleLinkInLayout(schema, layout, edition, canGet, hasPerm) ??
+    findFirstVisibleLinkInLayout(schema, layout, edition, canGet, hasPerm)
+  );
+}

src/lib/logoCache.ts

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import { getApiBaseUrl } from '@/services/api';
+
+export type LogoState = { status: 'loading' } | { status: 'custom'; url: string } | { status: 'default' };
+
+let state: LogoState = { status: 'loading' };
+let started = false;
+const listeners = new Set<() => void>();
+
+export function getLogoState(): LogoState {
+  return state;
+}
+
+export function subscribeToLogo(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function loadLogoOnce(): void {
+  if (started) return;
+  started = true;
+  fetch(`${getApiBaseUrl()}/logo`)
+    .then(async (response) => {
+      const contentType = response.headers.get('content-type') ?? '';
+      if (!response.ok || !contentType.startsWith('image/')) return null;
+      return URL.createObjectURL(await response.blob());
+    })
+    .catch(() => null)
+    .then((url) => {
+      state = url ? { status: 'custom', url } : { status: 'default' };
+      listeners.forEach((notify) => notify());
+    });
+}

src/main.tsx

@@ -16,6 +16,7 @@ import NotFound from './pages/NotFound';
 import { AdminPanel } from './pages/AdminPanel.lazy';
 import { ProtectedRoute } from './components/layout/ProtectedRoute';
 import { getBasePath } from './lib/basePath';
+import { loadLogoOnce } from './lib/logoCache';
 
 (() => {
   try {
@@ -34,6 +35,8 @@ import { getBasePath } from './lib/basePath';
   document.documentElement.classList.toggle('dark', !!prefersDark);
 })();
 
+loadLogoOnce();
+
 const basePath = getBasePath();
 
 const router = createBrowserRouter(

src/pages/AdminPanel.tsx

@@ -27,6 +27,7 @@ import {
 import { usePermissions } from '@/hooks/usePermissions';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { friendlyName } from '@/hooks/useGlobalSearch';
+import { rememberLastVisited, sectionLandingLink } from '@/lib/lastVisited';
 
 const BootstrapWizard = lazy(() =>
   import('@/components/bootstrap/BootstrapWizard').then((m) => ({ default: m.BootstrapWizard })),
@@ -210,15 +211,13 @@ export default function AdminPanel() {
     if (section && viewName) {
       const ownLayout = layouts.find((l) => l.name.toLowerCase() === section.toLowerCase());
       setActiveSection(ownLayout?.name ?? layouts[0]?.name ?? section);
+      if (ownLayout) rememberLastVisited(ownLayout.name, viewName);
       return;
     }
 
     if (section) {
       const ownLayout = layouts.find((l) => l.name.toLowerCase() === section.toLowerCase());
-      const ownLink = ownLayout
+      const ownLink = ownLayout ? sectionLandingLink(schema, ownLayout, edition, canGet, hasPerm) : null;
-        ? (findFirstAccessibleLinkInLayout(schema, ownLayout, edition, canGet, hasPerm) ??
-          findFirstVisibleLinkInLayout(schema, ownLayout, edition, canGet, hasPerm))
-        : null;
       if (ownLayout && ownLink) {
         redirectTo(ownLayout.name, ownLink);
       } else {

vite.config.ts

@@ -1,4 +1,5 @@
 /// <reference types="vitest/config" />
+import { configDefaults } from 'vitest/config'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -19,5 +20,6 @@ export default defineConfig({
   test: {
     globals: false,
     environment: 'happy-dom',
+    exclude: [...configDefaults.exclude, '**/.ignore/**'],
   },
 })