Move page primary actions to header (#900)

2026-03-20 07:39:07 -04:00 · 2025-06-09 17:01:48 +02:00
parent 0f9c2d1f7c
commit ffe1a36df3
10 changed files with 394 additions and 202 deletions
--- a/apps/browser-extension/src/entrypoints/popup/App.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/App.tsx
@@ -6,6 +6,7 @@ import BottomNav from '@/entrypoints/popup/components/Layout/BottomNav';
 import Header from '@/entrypoints/popup/components/Layout/Header';
 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import AuthSettings from '@/entrypoints/popup/pages/AuthSettings';
 import CredentialDetails from '@/entrypoints/popup/pages/CredentialDetails';
@@ -38,6 +39,7 @@ const App: React.FC = () => {
  const { isInitialLoading } = useLoading();
  const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
  const [message, setMessage] = useState<string | null>(null);
+  const { headerButtons } = useHeaderButtons();

  // Add these route configurations
  const routes: RouteConfig[] = [
@@ -81,6 +83,7 @@ const App: React.FC = () => {
        <GlobalStateChangeHandler />
        <Header
          routes={routes}
+          rightButtons={headerButtons}
        />

        <main
--- a/apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx
@@ -5,55 +5,32 @@ import SqliteClient from '@/utils/SqliteClient';

 type HeaderBlockProps = {
  credential: Credential;
-  onOpenNewPopup: () => void;
 }

 /**
 * Render the header block.
 */
-const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential, onOpenNewPopup }) => (
-  <div className="mb-6">
-    <div className="flex items-center justify-between">
-      <div className="flex items-center">
-        <img
-          src={SqliteClient.imgSrcFromBytes(credential.Logo)}
-          alt={credential.ServiceName}
-          className="w-12 h-12 rounded-lg mr-4"
-        />
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
-          {credential.ServiceUrl && (
-            <a
-              href={credential.ServiceUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
-            >
-              {credential.ServiceUrl}
-            </a>
-          )}
-        </div>
+const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential }) => (
+  <div className="flex items-center justify-between">
+    <div className="flex items-center">
+      <img
+        src={SqliteClient.imgSrcFromBytes(credential.Logo)}
+        alt={credential.ServiceName}
+        className="w-12 h-12 rounded-lg mr-4"
+      />
+      <div>
+        <h1 className="text-lg font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
+        {credential.ServiceUrl && (
+          <a
+            href={credential.ServiceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
+          >
+            {credential.ServiceUrl}
+          </a>
+        )}
      </div>
-      <button
-        onClick={onOpenNewPopup}
-        className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-        title="Open in new window"
-      >
-        <svg
-          className="w-5 h-5"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-          />
-        </svg>
-      </button>
    </div>
  </div>
 );
--- a/apps/browser-extension/src/entrypoints/popup/components/HeaderButton.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/HeaderButton.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { HeaderIcon, HeaderIconType } from './icons/HeaderIcons';
+
+type HeaderButtonProps = {
+  onClick: () => void;
+  title: string;
+  iconType: HeaderIconType;
+  variant?: 'default' | 'primary' | 'danger';
+};
+
+/**
+ * Header button component for consistent header button styling
+ */
+const HeaderButton: React.FC<HeaderButtonProps> = ({
+  onClick,
+  title,
+  iconType,
+  variant = 'default'
+}) => {
+  const colorClasses = {
+    default: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700',
+    primary: 'text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/20',
+    danger: 'text-red-500 hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-900/20'
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`p-2 rounded-lg ${colorClasses[variant]}`}
+      title={title}
+    >
+      <HeaderIcon type={iconType} />
+    </button>
+  );
+};
+
+export default HeaderButton;
--- a/apps/browser-extension/src/entrypoints/popup/components/Layout/Header.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/Layout/Header.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';

-import { UserMenu } from '@/entrypoints/popup/components/Layout/UserMenu';
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIconType } from '@/entrypoints/popup/components/icons/HeaderIcons';
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';

 import { AppInfo } from '@/utils/AppInfo';
@@ -17,13 +18,15 @@ type HeaderProps = {
    showBackButton?: boolean;
    title?: string;
  }[];
+  rightButtons?: React.ReactNode;
 }

 /**
 * Header component.
 */
 const Header: React.FC<HeaderProps> = ({
-  routes = []
+  routes = [],
+  rightButtons
 }) => {
  const authContext = useAuth();
  const navigate = useNavigate();
@@ -108,33 +111,29 @@ const Header: React.FC<HeaderProps> = ({

        <div className="flex-grow" />

-        <div className="flex items-center">
-          {!currentRoute?.showBackButton ? (
-            <button
+        <div className="flex items-center gap-2">
+          {!currentRoute?.showBackButton && (
+            <HeaderButton
              onClick={openClientTab}
-              className="p-2"
+              title="Open Client"
+              iconType={HeaderIconType.EXTERNAL_LINK}
+            />
+          )}
+          {!authContext.isLoggedIn ? (
+            <button
+              id="settings"
+              onClick={(handleSettings)}
+              className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
            >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
-                <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+              <span className="sr-only">Settings</span>
+              <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
              </svg>
            </button>
-          ) : (<></>)}
+          ) : (
+            rightButtons
+          )}
        </div>
-        {!authContext.isLoggedIn ? (
-          <button
-            id="settings"
-            onClick={(handleSettings)}
-            className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
-            <span className="sr-only">Settings</span>
-            <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
-            </svg>
-          </button>
-        ) : (
-          <UserMenu />
-        )}
      </div>
    </header>
  );
--- a/apps/browser-extension/src/entrypoints/popup/components/Layout/UserMenu.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/Layout/UserMenu.tsx
@@ -1,89 +1,49 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';

 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-import { useLoading } from '@/entrypoints/popup/context/LoadingContext';

 /**
 * User menu component.
 */
-export const UserMenu: React.FC = () => {
+const UserMenu: React.FC = () => {
  const authContext = useAuth();
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
  const navigate = useNavigate();
-  const { showLoading, hideLoading } = useLoading();
-
-  useEffect(() => {
-    /**
-     * Handle clicking outside the user menu.
-     */
-    const handleClickOutside = (event: MouseEvent) : void => {
-      if (
-        menuRef.current &&
-        buttonRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setIsUserMenuOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () : void => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);

  /**
-   * Toggle the user menu.
+   * Handle logout.
   */
-  const toggleUserMenu = () : void => {
-    setIsUserMenuOpen(!isUserMenuOpen);
-  };
-
-  /**
-   * Handle logging out.
-   */
-  const onLogout = async () : Promise<void> => {
-    showLoading();
-    navigate('/logout', { replace: true });
-    hideLoading();
+  const handleLogout = async () : Promise<void> => {
+    await authContext.logout();
+    navigate('/');
  };

  return (
-    <div className="relative flex items-center">
-      <div className="relative">
-        <button
-          ref={buttonRef}
-          onClick={toggleUserMenu}
-          className="flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-        >
-          <span className="sr-only">Open menu</span>
-          <svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
-          </svg>
-        </button>
-
-        {isUserMenuOpen && (
-          <div
-            ref={menuRef}
-            className="absolute right-0 z-50 mt-2 w-48 py-1 bg-white rounded-lg shadow-lg dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
-          >
-            <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-600">
-              <span className="block text-sm font-semibold text-gray-900 dark:text-white">
-                {authContext.username}
+    <div className="space-y-4">
+      <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <div className="flex items-center space-x-3">
+          <div className="flex-shrink-0">
+            <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+              <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
+                {authContext.username?.[0]?.toUpperCase() || '?'}
              </span>
            </div>
-            <button
-              onClick={onLogout}
-              className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-600"
-            >
-              Logout
-            </button>
          </div>
-        )}
+          <div>
+            <p className="text-sm font-medium text-gray-900 dark:text-white">
+              {authContext.username}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              Logged in
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={handleLogout}
+          className="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+        >
+          Logout
+        </button>
      </div>
    </div>
  );
--- a/apps/browser-extension/src/entrypoints/popup/components/icons/HeaderIcons.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/icons/HeaderIcons.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+
+export enum HeaderIconType {
+  EXPAND = 'expand',
+  EDIT = 'edit',
+  DELETE = 'delete',
+  SETTINGS = 'settings',
+  RELOAD = 'reload',
+  EXTERNAL_LINK = 'external_link'
+}
+
+type HeaderIconProps = {
+  type: HeaderIconType;
+  className?: string;
+};
+
+/**
+ * Component to render header icons
+ */
+export const HeaderIcon: React.FC<HeaderIconProps> = ({ type, className = 'w-5 h-5' }) => {
+  const icons = {
+    [HeaderIconType.EXPAND]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EDIT]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.DELETE]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        />
+      </svg>
+    ),
+    [HeaderIconType.SETTINGS]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.RELOAD]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EXTERNAL_LINK]: (
+      <svg
+        className={className}
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+        <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+      </svg>
+    )
+  };
+
+  return icons[type] || null;
+};
--- a/apps/browser-extension/src/entrypoints/popup/context/HeaderButtonsContext.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/context/HeaderButtonsContext.tsx
@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
+
+type HeaderButtonsContextType = {
+  setHeaderButtons: (buttons: React.ReactNode) => void;
+  headerButtons: React.ReactNode;
+}
+
+/**
+ * Context for managing header buttons in the popup
+ */
+export const HeaderButtonsContext = createContext<HeaderButtonsContextType | undefined>(undefined);
+
+/**
+ * Provider component for HeaderButtonsContext
+ */
+export const HeaderButtonsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [headerButtons, setHeaderButtons] = useState<React.ReactNode>(null);
+
+  const handleSetHeaderButtons = useCallback((buttons: React.ReactNode) => {
+    setHeaderButtons(buttons);
+  }, []);
+
+  const value = useMemo(() => ({
+    setHeaderButtons: handleSetHeaderButtons,
+    headerButtons
+  }), [handleSetHeaderButtons, headerButtons]);
+
+  return (
+    <HeaderButtonsContext.Provider value={value}>
+      {children}
+    </HeaderButtonsContext.Provider>
+  );
+};
+
+/**
+ * Hook to use the HeaderButtonsContext
+ * @returns The HeaderButtonsContext value
+ */
+export const useHeaderButtons = (): {
+  setHeaderButtons: (buttons: React.ReactNode) => void;
+  headerButtons: React.ReactNode;
+} => {
+  const context = useContext(HeaderButtonsContext);
+  if (context === undefined) {
+    throw new Error("useHeaderButtons must be used within a HeaderButtonsProvider");
+  }
+  return context;
+};
--- a/apps/browser-extension/src/entrypoints/popup/main.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from '@/entrypoints/popup/App';
 import { AuthProvider } from '@/entrypoints/popup/context/AuthContext';
 import { DbProvider } from '@/entrypoints/popup/context/DbContext';
+import { HeaderButtonsProvider } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { LoadingProvider } from '@/entrypoints/popup/context/LoadingContext';
 import { ThemeProvider } from '@/entrypoints/popup/context/ThemeContext';
 import { WebApiProvider } from '@/entrypoints/popup/context/WebApiContext';
@@ -18,9 +19,11 @@ root.render(
    <AuthProvider>
      <WebApiProvider>
        <LoadingProvider>
-          <ThemeProvider>
-            <App />
-          </ThemeProvider>
+          <HeaderButtonsProvider>
+            <ThemeProvider>
+              <App />
+            </ThemeProvider>
+          </HeaderButtonsProvider>
        </LoadingProvider>
      </WebApiProvider>
    </AuthProvider>
--- a/apps/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/CredentialDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

 import {
@@ -9,7 +9,10 @@ import {
  AliasBlock,
  NotesBlock
 } from '@/entrypoints/popup/components/CredentialDetails';
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIconType } from '@/entrypoints/popup/components/icons/HeaderIcons';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';

 import type { Credential } from '@/utils/shared/models/vault';
@@ -17,12 +20,14 @@ import type { Credential } from '@/utils/shared/models/vault';
 /**
 * Credential details page.
 */
-const CredentialDetails: React.FC = () => {
+const CredentialDetails: React.FC = (): React.ReactElement => {
  const { id } = useParams();
  const navigate = useNavigate();
  const dbContext = useDb();
  const [credential, setCredential] = useState<Credential | null>(null);
  const { setIsInitialLoading } = useLoading();
+  const { setHeaderButtons } = useHeaderButtons();
+  const [headerButtonsConfigured, setHeaderButtonsConfigured] = useState(false);

  /**
   * Check if the current page is an expanded popup.
@@ -35,7 +40,7 @@ const CredentialDetails: React.FC = () => {
  /**
   * Open the credential details in a new expanded popup.
   */
-  const openInNewPopup = (): void => {
+  const openInNewPopup = useCallback((): void => {
    const width = 380;
    const height = 600;
    const left = window.screen.width / 2 - width / 2;
@@ -48,14 +53,28 @@ const CredentialDetails: React.FC = () => {
    );

    window.close();
-  };
+  }, [id]);

  /**
   * Navigate to the edit page for this credential.
   */
-  const handleEdit = (): void => {
-    navigate(`/credentials/${id}/edit`);
-  };
+  const handleEdit = useCallback((): void => {
+    if (isPopup()) {
+      window.close();
+      const width = 380;
+      const height = 600;
+      const left = window.screen.width / 2 - width / 2;
+      const top = window.screen.height / 2 - height / 2;
+
+      window.open(
+        `popup.html?expanded=true#/credentials/${id}/edit`,
+        'CredentialEdit',
+        `width=${width},height=${height},left=${left},top=${top},popup=true`
+      );
+    } else {
+      navigate(`/credentials/${id}/edit`);
+    }
+  }, [id, navigate]);

  useEffect(() => {
    if (isPopup()) {
@@ -81,20 +100,44 @@ const CredentialDetails: React.FC = () => {
    }
  }, [dbContext.sqliteClient, id, navigate, setIsInitialLoading]);

+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    // Only set the header buttons once on mount.
+    if (!headerButtonsConfigured) {
+      const headerButtonsJSX = (
+        <div className="flex items-center gap-2">
+          <HeaderButton
+            onClick={openInNewPopup}
+            title="Open in new window"
+            iconType={HeaderIconType.EXPAND}
+          />
+          <HeaderButton
+            onClick={handleEdit}
+            title="Edit credential"
+            iconType={HeaderIconType.EDIT}
+          />
+        </div>
+      );
+
+      setHeaderButtons(headerButtonsJSX);
+      setHeaderButtonsConfigured(true);
+    }
+    return () => {};
+  }, [setHeaderButtons, headerButtonsConfigured, handleEdit, openInNewPopup]);
+
+  // Clear header buttons on unmount
+  useEffect((): (() => void) => {
+    return () => setHeaderButtons(null);
+  }, [setHeaderButtons]);
+
  if (!credential) {
    return <div>Loading...</div>;
  }

  return (
    <div className="space-y-4">
-      <div className="flex justify-between items-center px-4">
-        <HeaderBlock credential={credential} onOpenNewPopup={openInNewPopup} />
-        <button
-          onClick={handleEdit}
-          className="text-blue-500 hover:text-blue-700"
-        >
-          Edit
-        </button>
+      <div className="flex justify-between items-center">
+        <HeaderBlock credential={credential} />
      </div>
      {credential.Alias?.Email && (
        <EmailBlock
--- a/apps/browser-extension/src/entrypoints/popup/pages/EmailDetails.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/EmailDetails.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';

 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
 import ConversionUtility from '@/entrypoints/popup/utils/ConversionUtility';
@@ -12,10 +13,13 @@ import type { EmailAttachment, Email } from '@/utils/shared/models/webapi';

 import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';

+import HeaderButton from '../components/HeaderButton';
+import { HeaderIconType } from '../components/icons/HeaderIcons';
+
 /**
 * Email details page.
 */
-const EmailDetails: React.FC = () => {
+const EmailDetails: React.FC = (): React.ReactElement => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const dbContext = useDb();
@@ -24,6 +28,8 @@ const EmailDetails: React.FC = () => {
  const [email, setEmail] = useState<Email | null>(null);
  const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
  const { setIsInitialLoading } = useLoading();
+  const { setHeaderButtons } = useHeaderButtons();
+  const [headerButtonsConfigured, setHeaderButtonsConfigured] = useState(false);

  /**
   * Make sure the initial loading state is set to false when this component is loaded itself.
@@ -73,14 +79,18 @@ const EmailDetails: React.FC = () => {
  /**
   * Handle deleting an email.
   */
-  const handleDelete = async () : Promise<void> => {
+  const handleDelete = useCallback(async () : Promise<void> => {
    try {
      await webApi.delete(`Email/${id}`);
-      navigate('/emails');
+      if (isPopup()) {
+        window.close();
+      } else {
+        navigate('/emails');
+      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to delete email');
    }
-  };
+  }, [id, webApi, navigate]);

  /**
   * Check if the current page is an expanded popup.
@@ -93,7 +103,7 @@ const EmailDetails: React.FC = () => {
  /**
   * Open the credential details in a new expanded popup.
   */
-  const openInNewPopup = () : void => {
+  const openInNewPopup = useCallback((): void => {
    const width = 800;
    const height = 1000;
    const left = window.screen.width / 2 - width / 2;
@@ -107,7 +117,7 @@ const EmailDetails: React.FC = () => {

    // Close the current tab
    window.close();
-  };
+  }, [id]);

  /**
   * Handle downloading an attachment.
@@ -153,6 +163,37 @@ const EmailDetails: React.FC = () => {
    }
  };

+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    // Only set the header buttons once on mount.
+    if (!headerButtonsConfigured) {
+      const headerButtonsJSX = (
+        <div className="flex items-center gap-2">
+          <HeaderButton
+            onClick={openInNewPopup}
+            title="Open in new window"
+            iconType={HeaderIconType.EXPAND}
+          />
+          <HeaderButton
+            onClick={handleDelete}
+            title="Delete email"
+            iconType={HeaderIconType.DELETE}
+            variant="danger"
+          />
+        </div>
+      );
+
+      setHeaderButtons(headerButtonsJSX);
+      setHeaderButtonsConfigured(true);
+    }
+    return () => {};
+  }, [setHeaderButtons, headerButtonsConfigured, handleDelete, openInNewPopup]);
+
+  // Clear header buttons on unmount
+  useEffect((): (() => void) => {
+    return () => setHeaderButtons(null);
+  }, [setHeaderButtons]);
+
  if (isLoading) {
    return (
      <div className="flex justify-center items-center p-8">
@@ -176,48 +217,6 @@ const EmailDetails: React.FC = () => {
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex justify-between items-start mb-4">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{email.subject}</h1>
-            <div className="flex space-x-2">
-              <button
-                onClick={openInNewPopup}
-                className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-                title="Open in new window"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
-                  />
-                </svg>
-              </button>
-              <button
-                onClick={handleDelete}
-                className="p-2 text-red-500 hover:text-red-600 rounded-md hover:bg-red-100 dark:hover:bg-red-900/20"
-                title="Delete email"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  />
-                </svg>
-              </button>
-            </div>
          </div>
          <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
            <p>From: {email.fromDisplay} ({email.fromLocal}@{email.fromDomain})</p>