@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/SessionsManager.tsx

@@ -4,6 +4,7 @@ import { Shield, Monitor, Trash2, Clock, AlertTriangle, Info, LogOut, Globe, Act
 import { PageHeader } from "./ui/PageHeader";
 import { toast } from "../lib/stores";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 interface Session {
   id: string;
@@ -33,6 +34,7 @@ function timeAgo(ts: number): string {
 }
 
 export function SessionsManager() {
+    const { t } = useTranslation();
   const [sessions, setSessions] = useState<Session[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -82,7 +84,7 @@ export function SessionsManager() {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Active Sessions"
+        title={t("tooltips.activeSessions", { defaultValue: "Active Sessions" })}
         description="Monitor and manage your cryptographic access across all devices."
         icon={Monitor}
         actions={otherCount > 0 ? [

package/src/components/Sidebar.astro

@@ -21,6 +21,9 @@ const darkLogo = brandSettings?.identity?.darkLogo;
 const logoWidth = siteLogo?.width || darkLogo?.width;
 const logoHeight = siteLogo?.height || darkLogo?.height;
 const logoAlt = siteLogo?.altText || darkLogo?.altText || siteName;
+const showSiteName = brandSettings?.identity?.showSiteName ?? true;
+
+import i18next from "../lib/i18n";
 
 interface Props {
   title: string;
@@ -29,38 +32,59 @@ interface Props {
 const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 
-const collectionItems: NavItem[] = nonAuthCollections
+const groupedCollections = new Map<string, NavItem[]>();
+const defaultCollections: NavItem[] = [];
+
+nonAuthCollections
   .filter((col) => col.slug !== "media") //removed here cos it's been added manually in the navSections.
-  .map((col) => ({
-    href: `${adminPath}/${col.slug}`,
-    label: col.label || col.slug,
-    icon: col.admin?.icon || "collection",
-  }));
+  .forEach((col) => {
+    const item: NavItem = {
+      href: `${adminPath}/${col.slug}`,
+      label: col.label || col.slug,
+      icon: (col.admin?.icon as string) || "collection",
+    };
+    
+    if (col.admin?.group) {
+      const groupName = col.admin.group as string;
+      if (!groupedCollections.has(groupName)) {
+        groupedCollections.set(groupName, []);
+      }
+      groupedCollections.get(groupName)!.push(item);
+    } else {
+      defaultCollections.push(item);
+    }
+  });
+
+const dynamicSections = Array.from(groupedCollections.entries()).map(([group, items]) => ({
+  label: group,
+  items: items,
+}));
 
 const navSections: { label: string; items: NavItem[] }[] = [
   {
-    label: "Home",
+    label: "Dashboard",
     items: [
-      { href: adminPath, label: "Dashboard", icon: "home" },
+      { href: adminPath, label: "nav.dashboard", icon: "home" },
       {
         href: adminPath + "/media",
-        label: "Media Library",
+        label: "nav.media",
         icon: "media",
       },
     ],
   },
-  {
-    label: "Collections",
-    items: collectionItems,
-  },
+  ...dynamicSections,
+  ...(defaultCollections.length > 0 ? [{
+    label: "Content",
+    items: defaultCollections,
+  }] : []),
   {
     label: "Settings",
     items: [
-      { href: adminPath + "/users", label: "Users", icon: "users" },
-      { href: adminPath + "/plugins", label: "Plugins", icon: "plugins" },
+      { href: adminPath + "/users", label: "nav.users", icon: "users" },
+      { href: adminPath + "/plugins", label: "nav.plugins", icon: "plugins" },
       {
         href: adminPath + "/settings",
-        label: "Settings",
+        label: "nav.settings",
         icon: "settings",
       },
     ],
@@ -101,36 +125,47 @@ function isActive(item: NavItem): boolean {
   <div class="px-6 md:px-8 py-6 md:py-8 flex items-center justify-between gap-3">
     {
       siteLogo || darkLogo ? (
-        <div class="flex items-center">
-          {siteLogo && (
-            <img
-              src={siteLogo.url}
-              alt={logoAlt}
-              style={{
-                width: logoWidth ? `${logoWidth}px` : "auto",
-                height: logoHeight ? `${logoHeight}px` : "32px",
-                objectFit: "contain",
-              }}
-              class={`rounded-lg ${darkLogo ? "block dark:hidden" : ""}`}
-            />
-          )}
-          {darkLogo && (
-            <img
-              src={darkLogo.url}
-              alt={logoAlt}
-              style={{
-                width: logoWidth ? `${logoWidth}px` : "auto",
-                height: logoHeight ? `${logoHeight}px` : "32px",
-                objectFit: "contain",
-              }}
-              class={`rounded-lg ${siteLogo ? "hidden dark:block" : ""}`}
-            />
+        <div class="flex items-center gap-3">
+          <div class="flex items-center">
+            {siteLogo && (
+              <img
+                src={siteLogo.url}
+                alt={logoAlt}
+                style={{
+                  width: logoWidth ? `${logoWidth}px` : "auto",
+                  height: logoHeight ? `${logoHeight}px` : "32px",
+                  objectFit: "contain",
+                }}
+                class={`rounded-lg ${darkLogo ? "block dark:hidden" : ""}`}
+              />
+            )}
+            {darkLogo && (
+              <img
+                src={darkLogo.url}
+                alt={logoAlt}
+                style={{
+                  width: logoWidth ? `${logoWidth}px` : "auto",
+                  height: logoHeight ? `${logoHeight}px` : "32px",
+                  objectFit: "contain",
+                }}
+                class={`rounded-lg ${siteLogo ? "hidden dark:block" : ""}`}
+              />
+            )}
+          </div>
+          {showSiteName && (
+            <span class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+              {siteName}
+            </span>
           )}
         </div>
       ) : (
-        <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)] ">
-          {siteName}
-        </span>
+        <div class="flex items-center gap-3">
+          <img src="/logo-white.svg" alt="Kyro CMS" class="w-7 h-7 hidden dark:block" />
+          <img src="/logo.svg" alt="Kyro CMS" class="w-7 h-7 block dark:hidden" />
+          <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            {siteName}
+          </span>
+        </div>
       )
     }
     <button id="mobile-close-btn" class="md:hidden p-2 -mr-2 rounded-lg text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
@@ -142,43 +177,54 @@ function isActive(item: NavItem): boolean {
     <div class="space-y-4">
       {
         navSections.map((section) => (
-          <div class="space-y-2" data-section={section.label}>
+          <div class="space-y-2 group/section" data-section={section.label}>
             <div class="pt-4 pb-2">
-              <p class="px-6 text-[10px] font-medium text-[var(--kyro-text-secondary)]  tracking-[0.2em] opacity-40">
-                {section.label}
-              </p>
+              <button type="button" class="w-full flex items-center justify-between px-6 focus:outline-none sidebar-section-toggle transition-opacity hover:opacity-80">
+                <p class="text-[10px] font-medium text-[var(--kyro-text-secondary)] tracking-[0.2em] opacity-40 uppercase">
+                  {i18next.t(section.label, { defaultValue: section.label.split('.').pop()?.toUpperCase() || section.label }) || (section.label.split('.').pop()?.toUpperCase() || section.label)}
+                </p>
+                <Icons.ChevronDown className="w-3.5 h-3.5 text-[var(--kyro-text-secondary)] opacity-40 transition-transform duration-200 group-data-[collapsed=true]/section:-rotate-90" />
+              </button>
+            </div>
+            <div class="section-items space-y-1">
+              {section.items.map((item) => {
+                const slug = item.href.split("/").pop();
+                const type = item.href.includes("/settings")
+                  ? "global"
+                  : "collection";
+                return (
+                  <a
+                    href={item.href}
+                    data-nav-item
+                    data-slug={slug}
+                    data-type={type}
+                    class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-medium text-[13px] ${
+                      item.icon === "collection"
+                        ? currentPath === item.href ||
+                          currentPath.startsWith(item.href + "/")
+                          ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] active-nav-item"
+                          : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                        : isActive(item)
+                          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg active-nav-item"
+                          : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                    }`}
+                  >
+                    {(() => {
+                      const iconName = iconAliases[item.icon] || item.icon;
+                      const Icon = (Icons as any)[iconName] || Icons.Dot;
+                      return <Icon className="w-4 h-4" strokeWidth={2.5} />;
+                    })()}
+                    <span>
+                      {(() => {
+                        const fallback = item.label.split('.').pop() || item.label;
+                        const capitalized = fallback.charAt(0).toUpperCase() + fallback.slice(1);
+                        return i18next.t(item.label, { defaultValue: capitalized }) || capitalized;
+                      })()}
+                    </span>
+                  </a>
+                );
+              })}
             </div>
-            {section.items.map((item) => {
-              const slug = item.href.split("/").pop();
-              const type = item.href.includes("/settings")
-                ? "global"
-                : "collection";
-              return (
-                <a
-                  href={item.href}
-                  data-nav-item
-                  data-slug={slug}
-                  data-type={type}
-                  class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-medium text-[13px] ${
-                    item.icon === "collection"
-                      ? currentPath === item.href ||
-                        currentPath.startsWith(item.href + "/")
-                        ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
-                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                      : isActive(item)
-                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg"
-                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                  }`}
-                >
-                  {(() => {
-                    const iconName = iconAliases[item.icon] || item.icon;
-                    const Icon = (Icons as any)[iconName] || Icons.Dot;
-                    return <Icon className="w-4 h-4" strokeWidth={2.5} />;
-                  })()}
-                  <span>{item.label}</span>
-                </a>
-              );
-            })}
           </div>
         ))
       }
@@ -186,42 +232,84 @@ function isActive(item: NavItem): boolean {
   </nav>
 
   <script>
+    function initSidebar() {
+      const sections = document.querySelectorAll("[data-section]");
+      sections.forEach((section) => {
+        const label = section.getAttribute("data-section");
+        const toggleBtn = section.querySelector('.sidebar-section-toggle');
+        const itemsContainer = section.querySelector('.section-items');
+        
+        const isCollapsed = localStorage.getItem(`kyro-sidebar-collapsed-${label}`) === 'true';
+        if (isCollapsed) {
+          section.setAttribute('data-collapsed', 'true');
+          if (itemsContainer) itemsContainer.classList.add('hidden');
+        }
+
+        const activeItem = section.querySelector('.active-nav-item');
+        if (activeItem && isCollapsed) {
+          section.removeAttribute('data-collapsed');
+          if (itemsContainer) itemsContainer.classList.remove('hidden');
+          localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'false');
+        }
+        
+        // Remove old listeners to prevent duplicates
+        const newToggleBtn = toggleBtn?.cloneNode(true);
+        if (toggleBtn && newToggleBtn && toggleBtn.parentNode) {
+          toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
+          newToggleBtn.addEventListener('click', () => {
+             const currentlyCollapsed = section.getAttribute('data-collapsed') === 'true';
+             if (currentlyCollapsed) {
+               section.removeAttribute('data-collapsed');
+               if (itemsContainer) itemsContainer.classList.remove('hidden');
+               localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'false');
+             } else {
+               section.setAttribute('data-collapsed', 'true');
+               if (itemsContainer) itemsContainer.classList.add('hidden');
+               localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'true');
+             }
+          });
+        }
+      });
+    }
+
+    // Run on load and view transitions
+    initSidebar();
+    document.addEventListener('astro:page-load', initSidebar);
+
     // Handle frontend RBAC pruning in the sidebar
-    window.addEventListener("kyro:auth-ready", (event: any) => {
+    window.addEventListener("kyro:auth-ready", (event) => {
+      // @ts-ignore
       const { permissions } = event.detail;
       if (!permissions) return;
 
       const navItems = document.querySelectorAll("[data-nav-item]");
-      navItems.forEach((item: any) => {
+      navItems.forEach((item) => {
         const slug = item.getAttribute("data-slug");
         const type = item.getAttribute("data-type");
 
         let hasAccess = true;
-
         if (type === "collection" && permissions.collections) {
           const colPerms = permissions.collections[slug];
-          if (colPerms && colPerms.read === false) {
-            hasAccess = false;
-          }
+          if (colPerms && colPerms.read === false) hasAccess = false;
         } else if (type === "global" && permissions.globals) {
           const globalPerms = permissions.globals[slug];
-          if (globalPerms && globalPerms.read === false) {
-            hasAccess = false;
-          }
+          if (globalPerms && globalPerms.read === false) hasAccess = false;
         }
 
         if (!hasAccess) {
+          // @ts-ignore
           item.style.display = "none";
         }
       });
 
-      // Hide empty sections
+      // Hide empty sections after RBAC
       const sections = document.querySelectorAll("[data-section]");
-      sections.forEach((section: any) => {
+      sections.forEach((section) => {
         const visibleItems = section.querySelectorAll(
-          '[data-nav-item]:not([style*="display: none"])',
+          '[data-nav-item]:not([style*="display: none"])'
         );
         if (visibleItems.length === 0) {
+          // @ts-ignore
           section.style.display = "none";
         }
       });
@@ -238,14 +326,14 @@ function isActive(item: NavItem): boolean {
         <button
           id="theme-light-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
-          title="Light Mode"
+          title={i18next.t("sidebar.lightMode", { defaultValue: "Light Mode" })}
         >
           <Icons.Sun className="w-4 h-4" strokeWidth={2.5} />
         </button>
         <button
           id="theme-dark-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
-          title="Dark Mode"
+          title={i18next.t("sidebar.darkMode", { defaultValue: "Dark Mode" })}
         >
           <Icons.Moon className="w-4 h-4" strokeWidth={2.5} />
         </button>

package/src/components/UserManagement.tsx

@@ -15,6 +15,7 @@ import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { Badge } from "./ui/Badge";
 import { PageHeader } from "./ui/PageHeader";
+import { useTranslation } from "react-i18next";
 
 interface User {
   id: string;
@@ -29,6 +30,7 @@ interface User {
 }
 
 export function UserManagement() {
+    const { t } = useTranslation();
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
@@ -135,7 +137,7 @@ export function UserManagement() {
     <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-4 md:px-8 pb-12">
       {/* Header */}
       <PageHeader
-        title="Identity & Access"
+        title={t("tooltips.identityAccess", { defaultValue: "Identity & Access" })}
         description="Manage the core administrative team and security permissions."
         icon={Users}
         action={{
@@ -155,7 +157,7 @@ export function UserManagement() {
           <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
           <input
             type="text"
-            placeholder="Search by identity or email..."
+            placeholder={t("fields.searchByIdentityOr", { defaultValue: "Search by identity or email..." })}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
@@ -241,7 +243,7 @@ export function UserManagement() {
                       <button
                         onClick={() => handleDelete(user)}
                         className="p-1.5 rounded-lg border border-red-500/20 bg-red-500/10 text-red-500 hover:bg-red-500/20 transition-all"
-                        title="Delete User"
+                        title={t("tooltips.deleteUser", { defaultValue: "Delete User" })}
                       >
                         <Trash2 className="w-3.5 h-3.5" />
                       </button>
@@ -258,7 +260,7 @@ export function UserManagement() {
       <Modal
         open={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        title="Create User"
+        title={t("tooltips.createUser", { defaultValue: "Create User" })}
         size="lg"
       >
         <ModalContent>
@@ -269,7 +271,7 @@ export function UserManagement() {
                 type="text"
                 value={createForm.name}
                 onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
-                placeholder="John Doe"
+                placeholder={t("fields.johnDoe", { defaultValue: "John Doe" })}
                 className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
               />
             </div>
@@ -290,7 +292,7 @@ export function UserManagement() {
                 type="password"
                 value={createForm.password}
                 onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
-                placeholder="Minimum 12 characters"
+                placeholder={t("fields.minimum12Characters", { defaultValue: "Minimum 12 characters" })}
                 required
                 minLength={12}
                 className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"

package/src/components/UserMenu.tsx

@@ -3,12 +3,14 @@ import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle, LogOut, Terminal, Zap } from "./ui/icons";
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
+import { useTranslation } from "react-i18next";
 
 interface UserMenuProps {
   adminPath: string;
 }
 
 export function UserMenu({ adminPath }: UserMenuProps) {
+  const { t } = useTranslation();
   const currentUser = useAuthStore((s) => s.user);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [apiAccess, setApiAccess] = useState<{ graphqlEnabled?: boolean } | null>(null);
@@ -41,7 +43,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       trigger={
         <div
           className="flex justify-center p-.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
-          title="Account"
+          title={t("userMenu.account", { defaultValue: "Account" })}
         >
           {avatarUrl ? (
             <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover" />
@@ -53,7 +55,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
     >
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Account
+          {t("userMenu.account", { defaultValue: "Account" })}
         </p>
       </div>
 
@@ -68,21 +70,21 @@ export function UserMenu({ adminPath }: UserMenuProps) {
           }
         }}
       >
-        Profile Settings
+        {t("userMenu.profileSettings", { defaultValue: "Profile Settings" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Shield className="w-4 h-4" />}
         onClick={() => window.location.href = `${adminPath}/roles`}
       >
-        Permissions
+        {t("userMenu.permissions", { defaultValue: "Permissions" })}
       </DropdownItem>
 
       <DropdownSeparator />
 
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Developer
+          {t("userMenu.developer", { defaultValue: "Developer" })}
         </p>
       </div>
 
@@ -90,33 +92,33 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         icon={<Key className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/keys`)}
       >
-        API Keys
+        {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Webhook className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/webhooks`)}
       >
-        Web Hooks
+        {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
       </DropdownItem>
       <DropdownItem
         icon={<Clock className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/sessions`)}
       >
-        Sessions
+        {t("userMenu.sessions", { defaultValue: "Sessions" })}
       </DropdownItem>
       <DropdownItem
         icon={<FileText className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/audit`)}
       >
-        Audit Logs
+        {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Terminal className="w-4 h-4" />}
         onClick={() => (window.location.href = `${adminPath}/rest-playground`)}
       >
-        API Explorer
+        {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
       </DropdownItem>
 
       {(apiAccess === null || apiAccess?.graphqlEnabled) && (
@@ -124,7 +126,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
           icon={<Zap className="w-4 h-4" />}
           onClick={() => (window.location.href = `${adminPath}/graphql`)}
         >
-          GraphQL Playground
+          {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
         </DropdownItem>
       )}
 
@@ -132,22 +134,22 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <div className="px-4 py-2 mb-1">
         <p className="text-[10px] font-medium tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
-          Resources
+          {t("userMenu.resources", { defaultValue: "Resources" })}
         </p>
       </div>
 
       <DropdownItem
         icon={<ExternalLink className="w-4 h-4" />}
-        onClick={() => window.open("https://docs.kyro.dev", "_blank")}
+        onClick={() => window.open("https://kyro-cms.com/getting-started.html", "_blank")}
       >
-        Documentation
+        {t("userMenu.documentation", { defaultValue: "Documentation" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<HelpCircle className="w-4 h-4" />}
-        onClick={() => window.open("https://github.com/danielDozie/kyro-cms/issues", "_blank")}
+        onClick={() => window.open("https://github.com/danielDozie/kyro-cms/issues/new", "_blank")}
       >
-        Get Support
+        {t("userMenu.getSupport", { defaultValue: "Get Support" })}
       </DropdownItem>
 
       <DropdownSeparator />
@@ -157,7 +159,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         danger
         onClick={() => document.getElementById("logout-btn")?.click()}
       >
-        Sign Out
+        {t("actions.signOut", { defaultValue: "Sign Out" })}
       </DropdownItem>
     </Dropdown>
   );

package/src/components/VersionHistoryPanel.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SlidePanel } from "./ui/SlidePanel";
 import { Spinner } from "./ui/Spinner";
 import { History, Eye, GitCompare, Undo2, CheckCircle2, Clock, User } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 interface Version {
   id: string;
@@ -38,6 +39,7 @@ export function VersionHistoryPanel({
   onCompare,
   loading = false,
 }: VersionHistoryPanelProps) {
+    const { t } = useTranslation();
   const formatDate = (dateValue: any) => {
     if (!dateValue) return "Unknown date";
     const date = new Date(dateValue);
@@ -82,7 +84,7 @@ export function VersionHistoryPanel({
     <SlidePanel
       open={open}
       onClose={onClose}
-      title="Version History"
+      title={t("tooltips.versionHistory", { defaultValue: "Version History" })}
       width="md"
     >
       {loading ? (
@@ -159,7 +161,7 @@ export function VersionHistoryPanel({
                     <button type="button"
                       onClick={() => onPreview(version)}
                       className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
-                      title="Preview this version"
+                      title={t("tooltips.previewThisVersion", { defaultValue: "Preview this version" })}
                     >
                       <Eye className="w-4 h-4" />
                     </button>
@@ -172,7 +174,7 @@ export function VersionHistoryPanel({
                           )
                         }
                         className="p-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/10 rounded-md transition-colors"
-                        title="Compare with current"
+                        title={t("tooltips.compareWithCurrent", { defaultValue: "Compare with current" })}
                       >
                         <GitCompare className="w-4 h-4" />
                       </button>
@@ -181,7 +183,7 @@ export function VersionHistoryPanel({
                       <button type="button"
                         onClick={() => onRestore(version)}
                         className="p-2 text-amber-600 hover:bg-amber-500/10 rounded-md transition-colors"
-                        title="Restore this version"
+                        title={t("tooltips.restoreThisVersion", { defaultValue: "Restore this version" })}
                       >
                         <Undo2 className="w-4 h-4" />
                       </button>