db to user_id

.gitea/workflows/deploy.yml

@@ -107,11 +107,13 @@ jobs:
       - name: Build React Application
         # We set the environment variable directly in the command line for this step.
         # This maps the Gitea secret to the environment variable the application expects.
-        # We also generate and inject the application version and a direct link to the commit.
+        # We also generate and inject the application version, commit URL, and commit message.
         run: |
           GITEA_SERVER_URL="https://gitea.projectium.com" # Your Gitea instance URL
+          COMMIT_MESSAGE=$(git log -1 --pretty=%s)
           VITE_APP_VERSION="$(date +'%Y%m%d-%H%M'):$(git rev-parse --short HEAD)" \
           VITE_APP_COMMIT_URL="$GITEA_SERVER_URL/${{ gitea.repository }}/commit/${{ gitea.sha }}" \
+          VITE_APP_COMMIT_MESSAGE="$COMMIT_MESSAGE" \
           VITE_API_BASE_URL=/api VITE_API_KEY=${{ secrets.VITE_GOOGLE_GENAI_API_KEY }} npm run build
 
       - name: Deploy Application to Server

src/App.tsx

@@ -33,6 +33,8 @@ import { AdminStatsPage } from './pages/AdminStatPages';
 import { ResetPasswordPage } from './pages/ResetPasswordPage';
 import { AnonymousUserBanner } from './components/AnonymousUserBanner';
 import { VoiceLabPage } from './pages/VoiceLabPage'; // Import the new page
+import { WhatsNewModal } from './components/WhatsNewModal';
+import { QuestionMarkCircleIcon } from './components/icons/QuestionMarkCircleIcon';
 
 /**
  * Defines the possible authentication states for a user session.
@@ -79,6 +81,7 @@ function App() {
   const [profile, setProfile] = useState<Profile | null>(null);
   const [authStatus, setAuthStatus] = useState<AuthStatus>('SIGNED_OUT');
   const [isProfileManagerOpen, setIsProfileManagerOpen] = useState(false); // This will now control the login modal as well
+  const [isWhatsNewOpen, setIsWhatsNewOpen] = useState(false);
   const [isVoiceAssistantOpen, setIsVoiceAssistantOpen] = useState(false);
 
   const [processingStages, setProcessingStages] = useState<ProcessingStage[]>([]);
@@ -786,9 +789,18 @@ function App() {
   // Read the application version injected at build time.
   // This will only be available in the production build, not during local development.
   const appVersion = import.meta.env.VITE_APP_VERSION;
+  const commitMessage = import.meta.env.VITE_APP_COMMIT_MESSAGE;
   const commitUrl = import.meta.env.VITE_APP_COMMIT_URL;
   useEffect(() => {
-    if (appVersion) logger.info(`Application version: ${appVersion}`);
+    if (appVersion) {
+      logger.info(`Application version: ${appVersion}`);
+      const lastSeenVersion = localStorage.getItem('lastSeenVersion');
+      // If the current version is new, show the "What's New" modal.
+      if (appVersion !== lastSeenVersion) {
+        setIsWhatsNewOpen(true);
+        localStorage.setItem('lastSeenVersion', appVersion);
+      }
+    }
   }, [appVersion]);
 
   return (
@@ -836,6 +848,16 @@ function App() {
               onClose={() => setIsVoiceAssistantOpen(false)}
           />
       )}
+
+      {/* "What's New" modal, shown automatically on new versions */}
+      {appVersion && commitMessage && (
+        <WhatsNewModal
+          isOpen={isWhatsNewOpen}
+          onClose={() => setIsWhatsNewOpen(false)}
+          version={appVersion}
+          commitMessage={commitMessage}
+        />
+      )}
       <Routes>
         <Route path="/" element={
           <main className="max-w-screen-2xl mx-auto py-4 px-2.5 sm:py-6 lg:py-8">
@@ -953,15 +975,20 @@ function App() {
 
       {/* Display the build version number at the bottom-left of the screen */}
       {appVersion && (
-        <a
-          href={commitUrl || '#'}
-          target="_blank"
-          rel="noopener noreferrer"
-          title="View commit details on Gitea"
-          className="fixed bottom-2 left-3 text-xs text-gray-400 dark:text-gray-600 z-50 bg-gray-100 dark:bg-gray-950 px-2 py-1 rounded hover:text-brand-primary dark:hover:text-brand-primary transition-colors"
-        >
-          Version: {appVersion}
-        </a>
+        <div className="fixed bottom-2 left-3 z-50 flex items-center space-x-2">
+          <a
+            href={commitUrl || '#'}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="View commit details on Gitea"
+            className="text-xs text-gray-400 dark:text-gray-600 bg-gray-100 dark:bg-gray-950 px-2 py-1 rounded hover:text-brand-primary dark:hover:text-brand-primary transition-colors"
+          >
+            Version: {appVersion}
+          </a>
+          <button onClick={() => setIsWhatsNewOpen(true)} title="Show what's new in this version">
+            <QuestionMarkCircleIcon className="w-5 h-5 text-gray-400 dark:text-gray-600 hover:text-brand-primary dark:hover:text-brand-primary transition-colors" />
+          </button>
+        </div>
       )}
     </div>
   );

src/components/WhatsNewModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { XCircleIcon } from './icons/XCircleIcon';
+import { GiftIcon } from './icons/GiftIcon';
+
+interface WhatsNewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  version: string;
+  commitMessage: string;
+}
+
+export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({ isOpen, onClose, version, commitMessage }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4" onClick={onClose}>
+      <div
+        className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md m-4 transform transition-all"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-6">
+          <div className="flex items-center mb-4">
+            <div className="p-2 bg-brand-primary-light dark:bg-brand-primary-dark rounded-full mr-4">
+              <GiftIcon className="w-6 h-6 text-brand-primary" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white">What's New?</h2>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Version: {version}</p>
+            </div>
+          </div>
+
+          <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
+            <p className="text-base font-medium text-gray-800 dark:text-gray-200">{commitMessage}</p>
+          </div>
+
+          <div className="mt-6 flex justify-end">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
+            >
+              Got it!
+            </button>
+          </div>
+        </div>
+        <button onClick={onClose} className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+          <XCircleIcon className="w-6 h-6" />
+        </button>
+      </div>
+    </div>
+  );
+};

src/components/icons/GiftIcon.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const GiftIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H7.5a1.5 1.5 0 01-1.5-1.5v-8.25M12 1.5v10.5m0 0l3-3m-3 3l-3-3m3 3V3.75M21 11.25H3" />
+  </svg>
+);

src/components/icons/QuestionMarkCircleIcon.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const QuestionMarkCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+  </svg>
+);