chore(misc): remaining component and utility updates

- Update App.tsx and routing configuration
- Update common components (Chat, DocumentOverview, ImageDisplay, etc.)
- Update hooks (useAuth, useAutocomplete, useBetaFeatures, etc.)
- Update notebook, search, pages, templates, wolke features
- Update GrueneJugendGenerator and homepage components
- Update index.tsx entry point

Author: Movm

apps/web/src/App.tsx

@@ -26,7 +26,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 const PopupNutzungsbedingungen = lazy(() => import('./components/Popups/popup_nutzungsbedingungen'));
 // const CustomGrueneratorenPopup = lazy(() => import('./components/Popups/popup_custom_grueneratoren'));
-const PopupWeihnachten = lazy(() => import('./components/Popups/popup_weihnachten'));
+const PopupAustriaLaunch = lazy(() => import('./components/Popups/popup_austria_launch'));
 
 // QueryClient Instanz erstellen
 const queryClient = new QueryClient({
@@ -145,7 +145,7 @@ function App() {
                 <RouteLogger />
                 <SuspenseWrapper>
                   <PopupNutzungsbedingungen />
-                  <PopupWeihnachten />
+                  <PopupAustriaLaunch />
                   <div id="aria-live-region" aria-live="polite" className="sr-only"></div>
 
                   <Routes>

apps/web/src/components/common/Chat/ChatUI.css

@@ -511,7 +511,7 @@
   padding: 0;
   background: var(--background-color-alt);
   color: var(--font-color);
-  border: 1px solid var(--border-subtle);
+  border: var(--border-subtle);
   border-radius: 50%;
   cursor: pointer;
   font-size: 14px;
@@ -665,7 +665,7 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  border: 1px solid var(--border-subtle);
+  border: var(--border-subtle);
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;

apps/web/src/components/common/Chat/ChatUI.tsx

@@ -103,7 +103,7 @@ const ChatUI = ({ messages = [],
       email: user?.email
     });
     return props;
-  }, [avatarRobotId, displayName, user?.email, profile]);
+  }, [avatarRobotId, displayName, user?.email]);
 
   // Use internal hook only if voice props not provided from parent
   const hasExternalVoice = externalStartRecording !== undefined;
@@ -195,8 +195,9 @@ const ChatUI = ({ messages = [],
 
         <Suspense fallback={<div>Loading...</div>}><ReactMarkdown
           components={{
-            // eslint-disable-next-line react/prop-types
-            a: ({node, ...props}) => <a {...props} target="_blank" rel="noopener noreferrer" />
+            a: ({ ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+              <a {...props} target="_blank" rel="noopener noreferrer" />
+            )
           }}
         >
           {msg.content}

apps/web/src/components/common/DocumentOverview.tsx

@@ -484,16 +484,44 @@ const DocumentOverview = ({
 
     // Build action items via builder, falling back to custom actionItems if provided
 
+    // Helper to get file extension from filename
+    const getFileExtension = (filename?: string) => {
+        if (!filename) return null;
+        const ext = filename.split('.').pop()?.toUpperCase();
+        return ext && ext.length <= 4 ? ext : null;
+    };
+
     // Render default card
     const renderDefaultCard = (item: DocumentItem) => {
         const itemTitle = itemType === 'notebook' ? item.name : item.title;
         const isDocument = itemType === 'document';
+        const fileExt = isDocument ? getFileExtension(item.title || '') : null;
 
         return (
             <div
                 key={item.id}
                 className="document-card"
             >
+                {/* Source Type Badge */}
+                {isDocument && item.source_type && (
+                    <span className={`document-source-badge document-source-badge--${item.source_type}`}>
+                        {item.source_type === 'wolke' ? '☁️ Wolke' :
+                         item.source_type === 'url' ? '🔗 URL' : '📁 Upload'}
+                    </span>
+                )}
+
+                {/* File Type Badge */}
+                {fileExt && (
+                    <span className="document-file-badge">{fileExt}</span>
+                )}
+
+                {/* Document Icon */}
+                {isDocument && !item.preview_image_url && !item.thumbnail_url && (
+                    <div className="document-card-icon">
+                        <HiOutlineDocumentText />
+                    </div>
+                )}
+
                 {/* Header with title and dropdown menu */}
                 <div className="document-card-header">
                     {/* Bulk selection checkbox */}

apps/web/src/components/common/EnhancedSelect/EnhancedSelect.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback, memo, forwardRef, ComponentType, ReactNode } from 'react';
+import { lazy, Suspense, useCallback, memo, ComponentType, ReactNode, forwardRef, useRef, useImperativeHandle } from 'react';
 import type { Props as ReactSelectProps, GroupBase, StylesConfig, MultiValueProps, PlaceholderProps } from 'react-select';
 const Select = lazy(() => import('react-select')) as unknown as typeof import('react-select').default;
 const CreatableSelect = lazy(() => import('react-select/creatable')) as unknown as typeof import('react-select/creatable').default;
@@ -59,6 +59,11 @@ interface IconConfig {
   [key: string]: unknown;
 }
 
+interface EnhancedSelectRef {
+  inputRef?: { blur: () => void } | null;
+  [key: string]: unknown;
+}
+
 interface EnhancedSelectProps extends Omit<ReactSelectProps<EnhancedSelectOption, boolean, GroupBase<EnhancedSelectOption>>, 'options' | 'formatOptionLabel'> {
   // Enhanced functionality
   enableTags?: boolean;
@@ -84,7 +89,7 @@ interface EnhancedSelectProps extends Omit<ReactSelectProps<EnhancedSelectOption
   components?: Record<string, ComponentType<unknown>>;
 }
 
-const EnhancedSelect = forwardRef<HTMLDivElement, EnhancedSelectProps>(({
+const EnhancedSelect = forwardRef<EnhancedSelectRef, EnhancedSelectProps>(({
   // Enhanced functionality props
   enableTags = false,
   enableIcons = false,
@@ -111,7 +116,14 @@ const EnhancedSelect = forwardRef<HTMLDivElement, EnhancedSelectProps>(({
   styles: customStyles,
   inputId,
   ...selectProps
-}, ref) => {
+}, forwardedRef) => {
+  // Ref to the internal select component
+  const selectRef = useRef<{ inputRef?: { blur: () => void } | null }>(null);
+
+  // Expose select API through imperative handle
+  useImperativeHandle(forwardedRef, () => ({
+    inputRef: selectRef.current?.inputRef
+  }), []);
 
   // Internal formatOptionLabel that handles enhanced features
   const internalFormatOptionLabel = useCallback((option: EnhancedSelectOption, { context }: { context: 'menu' | 'value' }) => {
@@ -227,7 +239,7 @@ const EnhancedSelect = forwardRef<HTMLDivElement, EnhancedSelectProps>(({
     ...enhancedStyles,
     ...customStyles,
     // Merge functions for overlapping style keys
-    ...(customStyles && Object.keys(customStyles).reduce<Record<string, unknown>>((acc, key) => {
+    ...(customStyles ? Object.keys(customStyles).reduce<Record<string, unknown>>((acc, key) => {
       const styleKey = key as keyof StylesConfig<EnhancedSelectOption, boolean, GroupBase<EnhancedSelectOption>>;
       const enhancedStyleFn = enhancedStyles[styleKey];
       const customStyleFn = customStyles[styleKey];
@@ -238,13 +250,13 @@ const EnhancedSelect = forwardRef<HTMLDivElement, EnhancedSelectProps>(({
         };
       }
       return acc;
-    }, {}))
+    }, {}) : {})
   };
 
   const selectElement = (
     <Suspense fallback={<div>Loading...</div>}>
       <SelectComponent
-        ref={ref}
+        ref={selectRef as any}
         options={options}
         formatOptionLabel={internalFormatOptionLabel}
         components={components}

apps/web/src/components/common/ImageDisplay.tsx

@@ -5,7 +5,7 @@ import CopyButton from './CopyButton';
 import HelpTooltip from './HelpTooltip';
 import { ProfileIconButton, ProfileActionButton } from '../profile/actions/ProfileActionButton';
 import useAltTextGeneration from '../hooks/useAltTextGeneration';
-import useSharepicStore from '../../stores/sharepicStore';
+import { useAltTextStore } from '../../features/image-studio/hooks/useAltText';
 import apiClient from '../utils/apiClient';
 import CanvaTemplateModal from './CanvaTemplateModal';
 import SharepicShareModal from './SharepicShareModal';
@@ -104,7 +104,7 @@ const ImageDisplay = ({ sharepicData,
     setAltTextLoading,
     setAltTextError,
     setShowAltText
-  } = useSharepicStore();
+  } = useAltTextStore();
 
   if (!sharepicItems.length || !sharepicItems.some(item => item?.image)) {
     return null;
@@ -150,9 +150,10 @@ const ImageDisplay = ({ sharepicData,
       const imageBase64 = (currentSharepic.image || '').replace(/^data:image\/[^;]+;base64,/, '');
 
       // Generate alt text using the existing hook
-      const response = await generateAltTextForImage(imageBase64, currentSharepic.text || null);
+      const textInput = typeof currentSharepic.text === 'string' ? currentSharepic.text : null;
+      const response = await generateAltTextForImage(imageBase64, textInput);
 
-      if (response?.altText) {
+      if (response && typeof response === 'object' && 'altText' in response && typeof response.altText === 'string') {
         setAltText(response.altText);
         setShowAltText(true);
       } else {

apps/web/src/components/common/InstructionFields/InstructionsGrid.tsx

@@ -42,34 +42,6 @@ const INSTRUCTION_FIELDS: InstructionField[] = [
     title: 'Presse & Social Media',
     placeholder: 'Gib hier deine Anweisungen für die Erstellung von Presse- und Social Media-Inhalten ein...',
     helpText: 'z.B. Tonalität, Hashtag-Präferenzen, Zielgruppen-Ansprache'
-  },
-  {
-    name: 'customUniversalPrompt',
-    dataKey: 'universalPrompt',
-    title: 'Universelle Texte',
-    placeholder: 'Gib hier deine Anweisungen für die Erstellung von universellen Texten ein...',
-    helpText: 'z.B. allgemeine Schreibweise, politische Grundhaltung, Formulierungspräferenzen'
-  },
-  {
-    name: 'customRedePrompt',
-    dataKey: 'redePrompt',
-    title: 'Reden',
-    placeholder: 'Gib hier deine Anweisungen für die Erstellung von Reden ein...',
-    helpText: 'z.B. bevorzugter Redestil, rhetorische Mittel, Ansprache der Zielgruppe'
-  },
-  {
-    name: 'customBuergeranfragenPrompt',
-    dataKey: 'buergeranfragenPrompt',
-    title: 'Bürger*innenanfragen',
-    placeholder: 'Gib hier deine Anweisungen für die Beantwortung von Bürger*innenanfragen ein...',
-    helpText: 'z.B. bevorzugte Tonalität, Detailgrad, Ansprechpartner-Informationen'
-  },
-  {
-    name: 'customGruenejugendPrompt',
-    dataKey: 'gruenejugendPrompt',
-    title: 'Grüne Jugend',
-    placeholder: 'Gib hier deine Anweisungen für die Erstellung von Grüne Jugend-Inhalten ein...',
-    helpText: 'z.B. jugendgerechte Sprache, spezielle Themen, Aktivismus-Fokus'
   }
 ];
 
@@ -103,12 +75,13 @@ const InstructionsGrid = ({
 
   const getFieldValue = (fieldName: string): string => {
     const field = INSTRUCTION_FIELDS.find(f => f.name === fieldName);
-    return data[field?.dataKey as string] || '';
+    const value = data[field?.dataKey as string];
+    return typeof value === 'string' ? value : '';
   };
 
   const fieldsWithContent = INSTRUCTION_FIELDS.filter(field => {
     const value = data[field.dataKey];
-    return value && value.trim().length > 0;
+    return typeof value === 'string' && value.trim().length > 0;
   }).map(f => f.name);
 
   const activeFieldNames = [...new Set([...fieldsWithContent, ...enabledFields])];

apps/web/src/components/common/Layout/PageLayout.tsx

@@ -1,11 +1,13 @@
 import { JSX, useEffect, Suspense, lazy, useState, ReactNode } from 'react';
-import Header from '../../layout/Header/Header';
+import { Sidebar } from '../../layout/Sidebar';
+import SidebarToggle from '../../layout/SidebarToggle';
+import ProfileButton from '../../layout/Header/ProfileButton';
 import { isDesktopApp } from '../../../utils/platform';
+import useSidebarStore from '../../../stores/sidebarStore';
+import '../../../assets/styles/components/layout/header.css';
 
-// Lazy load Footer
 const Footer = lazy(() => import('../../layout/Footer/Footer'));
 
-// Lazy load desktop-specific components
 const DesktopTitlebar = lazy(() => import('../../layout/DesktopTitlebar/DesktopTitlebar'));
 const DesktopSidebar = lazy(() => import('../../layout/DesktopSidebar/DesktopSidebar'));
 const UpdateNotification = lazy(() => import('../../desktop/UpdateNotification/UpdateNotification'));
@@ -19,12 +21,13 @@ interface PageLayoutProps {
 
 const PageLayout = ({ children, darkMode, toggleDarkMode, showHeaderFooter = true }: PageLayoutProps): JSX.Element => {
   const [showFooter, setShowFooter] = useState(false);
+  const sidebarOpen = useSidebarStore((state) => state.isOpen);
+  const hideAppSidebar = useSidebarStore((state) => state.hideAppSidebar);
 
   useEffect(() => {
   }, [showHeaderFooter, darkMode, children]);
 
   useEffect(() => {
-    // Verzögere das Anzeigen des Footers
     const footerTimeout = setTimeout(() => {
       setShowFooter(true);
     }, 1000);
@@ -38,7 +41,6 @@ const PageLayout = ({ children, darkMode, toggleDarkMode, showHeaderFooter = tru
 
   const isDesktop = isDesktopApp();
 
-  // Desktop layout with titlebar and sidebar
   if (isDesktop) {
     return (
       <div className="desktop-layout">
@@ -58,17 +60,28 @@ const PageLayout = ({ children, darkMode, toggleDarkMode, showHeaderFooter = tru
     );
   }
 
-  // Web layout with header and footer
+  const layoutClasses = [
+    'app-layout',
+    sidebarOpen ? 'sidebar-open' : '',
+    hideAppSidebar ? 'sidebar-hidden' : '',
+  ].filter(Boolean).join(' ');
+
   return (
-    <>
-      <Header />
-      <main className="content-wrapper">{children}</main>
-      {showFooter && (
-        <Suspense fallback={<div style={{ height: '80px' }} />}>
-          <Footer />
-        </Suspense>
-      )}
-    </>
+    <div className={layoutClasses}>
+      <SidebarToggle />
+      <div className="header-actions">
+        <ProfileButton />
+      </div>
+      <Sidebar />
+      <div className="app-content">
+        <main className="content-wrapper">{children}</main>
+        {showFooter && (
+          <Suspense fallback={<div style={{ height: '80px' }} />}>
+            <Footer />
+          </Suspense>
+        )}
+      </div>
+    </div>
   );
 };
 

apps/web/src/components/common/SubtitleSegmentList.tsx

@@ -41,8 +41,10 @@ const SubtitleSegmentList = ({ segments,
   const activeSegmentId = getActiveSegmentId();
 
   const handleSegmentClick = (segment: SubtitleSegmentListProps['segments'][number]) => {
-    setEditingId(segment.id);
-    onSegmentClick?.(segment.id);
+    if (segment.id !== undefined) {
+      setEditingId(segment.id);
+      onSegmentClick?.(segment.id);
+    }
     onSeek?.(segment.startTime || 0);
   };
 

apps/web/src/components/common/TemplateLinkModal.tsx

@@ -69,7 +69,7 @@ const TemplateLinkModal = ({ template, onClose, onSubmit }: TemplateLinkModalPro
 
                 <div className="citation-modal-content">
                     <div className="template-link-info">
-                        <p><strong>Server Template:</strong> {template.title}</p>
+                        <p><strong>Server Template:</strong> {typeof template.title === 'string' ? template.title : String(template.title)}</p>
                         <p>Geben Sie Ihre eigene Canva URL ein, um diese mit dem Template zu verknüpfen:</p>
                     </div>