Centralize external dependencies and remove border styling from dashboard tabs

Author: ralyodio

public/css/api-keys.css

@@ -20,7 +20,7 @@
 .dashboard-tabs {
   display: flex;
   margin-bottom: 20px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: none;
 }
 
 .tab-button {

public/js/components/simple-counter.js

@@ -4,7 +4,7 @@
  * This demonstrates the simplified state management approach using the simple-state.js library.
  * It provides a much cleaner API compared to the current implementation.
  */
-import { createStore, StoreConnector } from 'https://esm.sh/@profullstack/[email protected]';
+import { createStore, StoreConnector } from '../../js/deps.js';
 
 // Create a store for our counter component
 const counterStore = createStore('counter', {

public/js/deps.js

@@ -0,0 +1,16 @@
+/**
+ * Dependencies module
+ * 
+ * This file centralizes all external ESM dependencies to make them easier to manage
+ * and update. It also allows for potential future bundling or local hosting of these
+ * dependencies if needed.
+ */
+
+// Import and re-export spa-router
+export { Router, transitions, renderer, componentLoader } from 'https://esm.sh/@profullstack/[email protected]';
+
+// Import and re-export state-manager
+export { createStore, StoreConnector } from 'https://esm.sh/@profullstack/[email protected]';
+
+// Import and re-export localizer
+export { localizer, _t } from 'https://esm.sh/@profullstack/[email protected]';

public/js/i18n-setup.js

@@ -3,7 +3,7 @@
  * Uses the enhanced @profullstack/localizer module
  */
 
-import { localizer } from 'https://esm.sh/@profullstack/[email protected]';
+import { localizer } from './deps.js';
 
 // Available languages
 const AVAILABLE_LANGUAGES = ['en', 'fr', 'de', 'uk', 'ru', 'pl', 'zh', 'ja', 'ar'];

public/js/i18n.js

@@ -7,8 +7,8 @@
 // Import the localizer library
 // In production, this would be imported from the npm package
 // import { localizer, _t } from '@profullstack/localizer';
-// For development, we'll use ESM imports
-import { localizer, _t } from 'https://esm.sh/@profullstack/[email protected]';
+// For development, we'll use our deps.js file
+import { localizer, _t } from './deps.js';
 import defaultStateManager from './state-manager.js';
 
 // Store available languages

public/js/main.js

@@ -73,8 +73,8 @@ function initRouter() {
   window.router = router;
 }
 
-// Import utilities from spa-router
-import { componentLoader } from 'https://esm.sh/@profullstack/[email protected]';
+// Import utilities from deps.js
+import { componentLoader } from './deps.js';
 import {
   initLoginPage,
   initRegisterPage,

public/js/router.js

@@ -1,7 +1,7 @@
 /**
  * Router module for SPA navigation
  */
-import { Router, transitions, renderer, componentLoader } from 'https://esm.sh/@profullstack/[email protected]';
+import { Router, transitions, renderer, componentLoader } from './deps.js';
 import { localizer } from './i18n-setup.js';
 import {
   initLoginPage, 

public/views/dashboard.html

@@ -390,7 +390,6 @@ <h3>Excel Options</h3>
   .dashboard-tabs {
     display: flex;
     margin-bottom: 20px;
-    border-bottom: 1px solid #ddd;
   }
 
   .tab-button {