consolidation

src/layouts/BaseLayout.astro

@@ -70,14 +70,12 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital
         }
       });
 
-      // Make theme utils available globally
       (window as any).themeUtils = {
         initTheme,
         toggleTheme,
         getStoredTheme
       };
 
-      // Tool helper functions (consolidated from toolHelpers.ts)
       function createToolSlug(toolName) {
         if (!toolName || typeof toolName !== 'string') {
           console.warn('[toolHelpers] Invalid toolName provided to createToolSlug:', toolName);
@@ -107,6 +105,12 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital
                tool.projectUrl.trim() !== "";
       }
 
+      // FIXED: Use type assertions to avoid TypeScript errors
+      // Make functions available globally for existing code compatibility
+      (window as any).createToolSlug = createToolSlug;
+      (window as any).findToolByIdentifier = findToolByIdentifier;
+      (window as any).isToolHosted = isToolHosted;
+
       // Client-side auth functions (consolidated from client-auth.js)
       async function checkClientAuth() {
         try {
@@ -157,6 +161,7 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital
         document.addEventListener('click', async (e) => {
           if (!e.target) return;
           
+          // FIXED: Properly cast EventTarget to Element for closest() method
           const button = (e.target as Element).closest(selector);
           if (!button) return;
           
@@ -171,10 +176,7 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital
         });
       }
 
-      // Make functions available globally
+      // Make auth functions available globally
-      (window as any).createToolSlug = createToolSlug;
-      (window as any).findToolByIdentifier = findToolByIdentifier;
-      (window as any).isToolHosted = isToolHosted;
       (window as any).checkClientAuth = checkClientAuth;
       (window as any).requireClientAuth = requireClientAuth;
       (window as any).showIfAuthenticated = showIfAuthenticated;
@@ -184,7 +186,6 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital
       initTheme();
       setupAuthButtons('[data-contribute-button]');
       
-      // Initialize AI button visibility (moved from ToolFilters.astro to avoid race condition)
       const initAIButton = async () => {
         await showIfAuthenticated('#ai-view-toggle');
       };

src/styles/global.css

@@ -1730,3 +1730,117 @@ This will literally assault the user's retinas. They'll need sunglasses to look
 .share-btn svg {
   flex-shrink: 0;
 }
+
+/* === LAYOUT UTILITIES === */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+/* Alignment */
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* Grid */
+.grid { display: grid; }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+
+/* === SPACING UTILITIES === */
+.gap-0 { gap: 0; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-5 { gap: 1.25rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-8 { gap: 2rem; }
+
+/* Margin */
+.m-0 { margin: 0; }
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mt-auto { margin-top: auto; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+
+/* Padding */
+.p-0 { padding: 0; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.p-8 { padding: 2rem; }
+
+/* === TYPOGRAPHY UTILITIES === */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+/* === VISUAL UTILITIES === */
+.rounded { border-radius: 0.375rem; }
+.rounded-md { border-radius: 0.5rem; }
+.rounded-lg { border-radius: 0.75rem; }
+.rounded-full { border-radius: 9999px; }
+
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+
+.border { border: 1px solid var(--color-border); }
+.border-l-4 { border-left: 4px solid var(--color-border); }
+
+.bg-primary { background-color: var(--color-primary); }
+.bg-secondary { background-color: var(--color-bg-secondary); }
+.bg-tertiary { background-color: var(--color-bg-tertiary); }
+
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-white { color: white; }
+
+/* === POSITION & SIZING === */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-w-0 { min-width: 0; }
+.overflow-hidden { overflow: hidden; }
+.cursor-pointer { cursor: pointer; }
+
+/* === COMMON COMBINATIONS === */
+.flex-center { 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+}
+.flex-between { 
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between; 
+}
+.flex-start { 
+  display: flex; 
+  align-items: center; 
+}

src/utils/toolHelpers.ts

@@ -67,25 +67,3 @@ export function getToolCategory(tool: Tool): 'concept' | 'method' | 'hosted' | '
   if (tool.license && tool.license !== 'Proprietary') return 'oss';
   return 'proprietary';
 }
-
-// BROWSER COMPATIBILITY LAYER
-// Only assign to window if we're in a browser environment
-if (typeof window !== 'undefined') {
-  // Make functions available globally for existing code compatibility
-  window.createToolSlug = createToolSlug;
-  window.findToolByIdentifier = findToolByIdentifier;
-  window.isToolHosted = isToolHosted;
-  
-  console.log('[toolHelpers] Consolidated tool utilities loaded and assigned to window');
-}
-
-// LEGACY NODE.JS COMPATIBILITY
-// Support for older require() patterns if needed
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { 
-    createToolSlug, 
-    findToolByIdentifier, 
-    isToolHosted, 
-    getToolCategory 
-  };
-}