add messages

.gitignore

@@ -16,4 +16,6 @@
 /app_config.json
 /custom_logo
 /static/theme.css
-/transcription_config.yml
+/transcription_config.yml
+
+/messages.json

app.py

@@ -24,6 +24,7 @@ from pathlib import Path
 import re
 import qrcode
 import base64
+import json
 import search
 import auth
 import analytics as a
@@ -66,6 +67,80 @@ app.add_url_rule('/admin/search_db_analyzer', view_func=auth.require_admin(sdb.s
 app.add_url_rule('/admin/search_db_analyzer/query', view_func=auth.require_admin(sdb.search_db_query), methods=['POST'])
 app.add_url_rule('/admin/search_db_analyzer/folders', view_func=auth.require_admin(sdb.search_db_folders))
 
+# Messages/News routes
+MESSAGES_FILENAME = 'messages.json'
+
+def load_messages():
+    """Load messages from JSON file."""
+    try:
+        with open(MESSAGES_FILENAME, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError):
+        return []
+
+def save_messages(messages):
+    """Save messages to JSON file."""
+    with open(MESSAGES_FILENAME, 'w', encoding='utf-8') as f:
+        json.dump(messages, f, ensure_ascii=False, indent=2)
+
+@app.route('/api/messages', methods=['GET'])
+@auth.require_secret
+def get_messages():
+    """Get all messages."""
+    messages = load_messages()
+    # Sort by datetime descending (newest first)
+    messages.sort(key=lambda x: x.get('datetime', ''), reverse=True)
+    return jsonify(messages)
+
+@app.route('/api/messages', methods=['POST'])
+@auth.require_admin
+def create_message():
+    """Create a new message."""
+    data = request.get_json()
+    messages = load_messages()
+    
+    # Generate new ID
+    new_id = max([m.get('id', 0) for m in messages], default=0) + 1
+    
+    new_message = {
+        'id': new_id,
+        'title': data.get('title', ''),
+        'content': data.get('content', ''),
+        'datetime': data.get('datetime', datetime.now().isoformat())
+    }
+    
+    messages.append(new_message)
+    save_messages(messages)
+    
+    return jsonify(new_message), 201
+
+@app.route('/api/messages/<int:message_id>', methods=['PUT'])
+@auth.require_admin
+def update_message(message_id):
+    """Update an existing message."""
+    data = request.get_json()
+    messages = load_messages()
+    
+    for message in messages:
+        if message['id'] == message_id:
+            message['title'] = data.get('title', message['title'])
+            message['content'] = data.get('content', message['content'])
+            message['datetime'] = data.get('datetime', message['datetime'])
+            save_messages(messages)
+            return jsonify(message)
+    
+    return jsonify({'error': 'Message not found'}), 404
+
+@app.route('/api/messages/<int:message_id>', methods=['DELETE'])
+@auth.require_admin
+def delete_message(message_id):
+    """Delete a message."""
+    messages = load_messages()
+    messages = [m for m in messages if m['id'] != message_id]
+    save_messages(messages)
+    
+    return jsonify({'success': True})
+
 # Grab the HOST_RULE environment variable
 host_rule = os.getenv("HOST_RULE", "")
 # Use a regex to extract domain names between backticks in patterns like Host(`something`)

readme.md

@@ -9,6 +9,13 @@ This is a self-hosted media sharing and indexing platform designed for secure an
   - **Primary Folders (Secret Links):** Centralized configuration with full admin control. Suitable for public events.
   - **Subfolders (Token Links):** Can be shared ad hoc, without central admin access. Ideal for limited-audience events.
 
+- **News/Messages System**  
+  - Blog-style news cards with date/time stamps
+  - Admin interface for creating, editing, and deleting messages
+  - Markdown support for rich content formatting
+  - Separate tab for browsing files and viewing messages
+  - Chronological display (newest first)
+
 - **Transcription and Search**  
   - Local transcription of audio files
   - Full-text search through transcripts
@@ -139,6 +146,22 @@ docker compose up -d
 
 To unlock administrative controls on your device, use the dedicated admin access link.
 
+### 6. Managing Messages/News
+
+The application includes a news/messages system that allows admins to post announcements and updates:
+
+- **Viewing Messages**: All users can view messages by clicking the "Nachrichten" tab in the main interface
+- **Adding Messages**: Admins can click "Nachricht hinzufügen" to create a new message
+- **Editing Messages**: Click the "Bearbeiten" button on any message card
+- **Deleting Messages**: Click the "Löschen" button to remove a message
+
+Messages are stored in `messages.json` and support:
+- **Markdown formatting** for rich content (headings, lists, links, code blocks, etc.)
+- **Date/time stamps** for chronological organization
+- **Blog-style display** with newest messages first
+
+To pre-populate messages, you can manually edit `messages.json` or copy from `example_config_files/messages.json` as a template.
+
 ## Contribution
 
 This app is under active development and contributions are welcome.

static/app.css

@@ -35,11 +35,25 @@ body {
   }
 
 .wrapper {
-  display: grid;
+  display: flex;
-  grid-template-rows: auto 1fr auto;
+  flex-direction: column;
   min-height: 100%;
   padding-bottom: 200px;
 }
+
+.wrapper > .admin-nav,
+.wrapper > .main-tabs {
+  flex: 0 0 auto;
+}
+
+.wrapper > main,
+.wrapper > section {
+  flex: 1 1 auto;
+}
+
+.wrapper > footer {
+  flex: 0 0 auto;
+}
 .container {
   max-width: 1200px;
   width: 90%;
@@ -367,4 +381,273 @@ footer {
 
 .toggle-icon:hover {
   color: #007bff;
+}
+
+/* Tab Navigation Styles */
+.main-tabs {
+  background-color: var(--dark-background);
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  gap: 2px;
+  border-bottom: 2px solid #444;
+}
+
+.tab-button {
+  background: #333;
+  border: 1px solid #444;
+  border-bottom: none;
+  color: #999;
+  padding: 6px 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: 5px 5px 0 0;
+  margin: 0;
+  position: relative;
+  top: 2px;
+}
+
+.tab-button:hover {
+  color: #fff;
+  background: #3a3a3a;
+}
+
+.tab-button.active {
+  color: var(--main-text-color, #000);
+  background: var(--light-background);
+  border-color: #444;
+  border-bottom-color: var(--light-background);
+  z-index: 1;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Messages Section Styles */
+.messages-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
+.message-card {
+  background: var(--card-background, #fff);
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: box-shadow 0.3s ease;
+}
+
+.message-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.message-title {
+  font-size: 1.5em;
+  font-weight: bold;
+  color: var(--main-text-color);
+  margin: 0;
+}
+
+.message-datetime {
+  color: #666;
+  font-size: 0.9em;
+  font-style: italic;
+}
+
+.message-content {
+  line-height: 1.6;
+  color: var(--main-text-color);
+}
+
+.message-content .folder-link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  margin: 4px 0;
+  background: #f0f4f8;
+  color: #495057;
+  border: 1px solid #d1dce5;
+  border-radius: 6px;
+  font-size: 0.95em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.message-content .folder-link-btn:hover {
+  background: #e3eaf0;
+  border-color: #b8c5d0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
+}
+
+.message-content .folder-link-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+}
+
+.message-content .folder-link-btn i {
+  font-size: 1.1em;
+}
+
+.message-content a {
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.message-content a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.message-content h1,
+.message-content h2,
+.message-content h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.message-content p {
+  margin-bottom: 10px;
+}
+
+.message-content ul,
+.message-content ol {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+
+.message-content code {
+  background-color: #f4f4f4;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+}
+
+.message-content pre {
+  background-color: #f4f4f4;
+  padding: 10px;
+  border-radius: 5px;
+  overflow-x: auto;
+}
+
+.message-content blockquote {
+  border-left: 4px solid #ccc;
+  padding-left: 15px;
+  color: #666;
+  font-style: italic;
+}
+
+.message-image {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 15px 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.message-actions {
+  margin-top: 15px;
+  padding-top: 10px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  gap: 10px;
+}
+
+.btn-edit,
+.btn-delete {
+  padding: 5px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.btn-edit {
+  background-color: #007bff;
+  color: white;
+}
+
+.btn-edit:hover {
+  background-color: #0056b3;
+}
+
+.btn-delete {
+  background-color: #dc3545;
+  color: white;
+}
+
+.btn-delete:hover {
+  background-color: #c82333;
+}
+
+.no-messages {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+  font-size: 1.2em;
+}
+
+/* File Browser Styles */
+.file-browser-content {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.file-browser-content .list-group-item {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+}
+
+.file-browser-content .list-group-item:first-child {
+  border-top: none;
+}
+
+.file-browser-content .list-group-item:last-child {
+  border-bottom: none;
+}
+
+#fileBrowserCollapse {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.file-browser-panel {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+
+.file-browser-panel h6 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #333;
 }

static/app.js

@@ -116,7 +116,7 @@ function renderContent(data) {
         if (data.breadcrumbs.length === 1 && data.toplist_enabled) {
           contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist">🔥 oft angehört</a></li>`;
         }
-        console.log(data.folder_today, data.folder_yesterday);
+        
         data.directories.forEach(dir => {
           if (admin_enabled && data.breadcrumbs.length != 1 && dir.share) {
             share_link = `<a href="#" class="create-share" data-url="${dir.path}">⚙️</a>`;

static/messages.js

@@ -0,0 +1,471 @@
+// Messages functionality
+
+let messagesData = [];
+let messageModal;
+let currentEditingId = null;
+
+// Initialize messages on page load
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize Bootstrap modal
+  const modalElement = document.getElementById('messageModal');
+  if (modalElement) {
+    messageModal = new bootstrap.Modal(modalElement);
+  }
+
+  // Tab switching
+  const tabButtons = document.querySelectorAll('.tab-button');
+  tabButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const targetTab = button.getAttribute('data-tab');
+      
+      // Update tab buttons
+      tabButtons.forEach(btn => {
+        if (btn.getAttribute('data-tab') === targetTab) {
+          btn.classList.add('active');
+        } else {
+          btn.classList.remove('active');
+        }
+      });
+      
+      // Update tab content
+      const tabContents = document.querySelectorAll('.tab-content');
+      tabContents.forEach(content => {
+        content.classList.remove('active');
+      });
+      
+      const targetContent = document.getElementById(targetTab + '-section');
+      if (targetContent) {
+        targetContent.classList.add('active');
+      }
+      
+      // Load messages when switching to messages tab
+      if (targetTab === 'messages') {
+        loadMessages();
+      }
+    });
+  });
+
+  // Add message button
+  const addMessageBtn = document.getElementById('add-message-btn');
+  if (addMessageBtn) {
+    addMessageBtn.addEventListener('click', () => {
+      openMessageModal();
+    });
+  }
+
+  // Save message button
+  const saveMessageBtn = document.getElementById('saveMessageBtn');
+  if (saveMessageBtn) {
+    saveMessageBtn.addEventListener('click', () => {
+      saveMessage();
+    });
+  }
+
+  // Insert link button
+  const insertLinkBtn = document.getElementById('insertLinkBtn');
+  if (insertLinkBtn) {
+    insertLinkBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleFileBrowser();
+    });
+  }
+
+  // Event delegation for file browser actions
+  const fileBrowserContent = document.getElementById('fileBrowserContent');
+  if (fileBrowserContent) {
+    fileBrowserContent.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      // Check if button was clicked
+      const button = e.target.closest('button[data-action="insert-link"]');
+      if (button) {
+        const path = button.getAttribute('data-path');
+        const name = button.getAttribute('data-name');
+        const type = button.getAttribute('data-type');
+        insertLink(path, name, type);
+        return;
+      }
+      
+      // Check if list item was clicked for navigation
+      const navItem = e.target.closest('li[data-action="navigate"]');
+      if (navItem && !e.target.closest('button')) {
+        const path = navItem.getAttribute('data-path');
+        loadFileBrowser(path);
+        return;
+      }
+      
+      // Check if list item was clicked for insert (files)
+      const insertItem = e.target.closest('li[data-action="insert-link"]');
+      if (insertItem && !e.target.closest('button')) {
+        const path = insertItem.getAttribute('data-path');
+        const name = insertItem.getAttribute('data-name');
+        const type = insertItem.getAttribute('data-type');
+        insertLink(path, name, type);
+        return;
+      }
+    });
+  }
+
+  // Event delegation for folder links in messages
+  const messagesContainer = document.getElementById('messages-container');
+  if (messagesContainer) {
+    messagesContainer.addEventListener('click', (e) => {
+      const folderLink = e.target.closest('button[data-folder-path]');
+      if (folderLink) {
+        e.preventDefault();
+        const folderPath = folderLink.getAttribute('data-folder-path');
+        
+        // Update tab buttons without changing hash
+        const tabButtons = document.querySelectorAll('.tab-button');
+        tabButtons.forEach(btn => {
+          if (btn.getAttribute('data-tab') === 'browse') {
+            btn.classList.add('active');
+          } else {
+            btn.classList.remove('active');
+          }
+        });
+        
+        // Update tab content
+        const tabContents = document.querySelectorAll('.tab-content');
+        tabContents.forEach(content => {
+          content.classList.remove('active');
+        });
+        
+        const browseSection = document.getElementById('browse-section');
+        if (browseSection) {
+          browseSection.classList.add('active');
+        }
+        
+        // Load the directory directly without setTimeout
+        if (typeof loadDirectory === 'function') {
+          loadDirectory(folderPath);
+        }
+      }
+    });
+  }
+
+});
+
+async function loadMessages() {
+  try {
+    const response = await fetch('/api/messages');
+    if (!response.ok) {
+      throw new Error('Failed to load messages');
+    }
+    messagesData = await response.json();
+    renderMessages();
+  } catch (error) {
+    console.error('Error loading messages:', error);
+    const container = document.getElementById('messages-container');
+    container.innerHTML = '<div class="alert alert-danger">Fehler beim Laden der Nachrichten</div>';
+  }
+}
+
+function renderMessages() {
+  const container = document.getElementById('messages-container');
+  
+  if (messagesData.length === 0) {
+    container.innerHTML = '<div class="no-messages">Keine Nachrichten vorhanden</div>';
+    return;
+  }
+
+  let html = '';
+  messagesData.forEach(message => {
+    const datetime = formatDateTime(message.datetime);
+    
+    // Convert folder: protocol to clickable buttons before markdown parsing
+    let processedContent = message.content || '';
+    processedContent = processedContent.replace(/\[([^\]]+)\]\(folder:([^)]+)\)/g, 
+      (match, name, path) => `<button class="folder-link-btn" data-folder-path="${escapeHtml(path)}"><i class="bi bi-folder2"></i> ${escapeHtml(name)}</button>`
+    );
+    
+    // Configure marked to allow all links
+    marked.setOptions({
+      breaks: true,
+      gfm: true
+    });
+    const contentHtml = marked.parse(processedContent);
+    
+    html += `
+      <div class="message-card" data-message-id="${message.id}">
+        <div class="message-header">
+          <h2 class="message-title">${escapeHtml(message.title)}</h2>
+          <div class="message-datetime">${datetime}</div>
+        </div>
+        <div class="message-content">
+          ${contentHtml}
+        </div>
+        ${admin_enabled ? `
+        <div class="message-actions">
+          <button class="btn-edit" onclick="editMessage(${message.id})" title="Bearbeiten">
+            <i class="bi bi-pencil"></i>
+          </button>
+          <button class="btn-delete" onclick="deleteMessage(${message.id})" title="Löschen">
+            <i class="bi bi-trash"></i>
+          </button>
+        </div>
+        ` : ''}
+      </div>
+    `;
+  });
+  
+  container.innerHTML = html;
+}
+
+function formatDateTime(datetimeStr) {
+  try {
+    const date = new Date(datetimeStr);
+    const options = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    };
+    return date.toLocaleDateString('de-DE', options);
+  } catch (error) {
+    return datetimeStr;
+  }
+}
+
+function escapeHtml(text) {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  return text.replace(/[&<>"']/g, m => map[m]);
+}
+
+function openMessageModal(messageId = null) {
+  currentEditingId = messageId;
+  
+  const modalTitle = document.getElementById('messageModalLabel');
+  const messageIdInput = document.getElementById('messageId');
+  const titleInput = document.getElementById('messageTitle');
+  const datetimeInput = document.getElementById('messageDateTime');
+  const contentInput = document.getElementById('messageContent');
+  
+  if (messageId) {
+    // Edit mode
+    const message = messagesData.find(m => m.id === messageId);
+    if (message) {
+      modalTitle.textContent = 'Nachricht bearbeiten';
+      messageIdInput.value = message.id;
+      titleInput.value = message.title;
+      
+      // Format datetime for input
+      const date = new Date(message.datetime);
+      const formattedDate = date.toISOString().slice(0, 16);
+      datetimeInput.value = formattedDate;
+      
+      contentInput.value = message.content;
+    }
+  } else {
+    // Add mode
+    modalTitle.textContent = 'Neue Nachricht';
+    messageIdInput.value = '';
+    titleInput.value = '';
+    
+    // Set current datetime
+    const now = new Date();
+    const formattedNow = now.toISOString().slice(0, 16);
+    datetimeInput.value = formattedNow;
+    
+    contentInput.value = '';
+  }
+  
+  messageModal.show();
+}
+
+async function saveMessage() {
+  const messageId = document.getElementById('messageId').value;
+  const title = document.getElementById('messageTitle').value.trim();
+  const datetime = document.getElementById('messageDateTime').value;
+  const content = document.getElementById('messageContent').value.trim();
+  
+  if (!title || !datetime || !content) {
+    alert('Bitte füllen Sie alle Felder aus.');
+    return;
+  }
+  
+  // Convert datetime-local to ISO string
+  const datetimeISO = new Date(datetime).toISOString();
+  
+  const data = {
+    title: title,
+    datetime: datetimeISO,
+    content: content
+  };
+  
+  try {
+    let response;
+    if (messageId) {
+      // Update existing message
+      response = await fetch(`/api/messages/${messageId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      });
+    } else {
+      // Create new message
+      response = await fetch('/api/messages', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      });
+    }
+    
+    if (!response.ok) {
+      throw new Error('Failed to save message');
+    }
+    
+    messageModal.hide();
+    loadMessages();
+  } catch (error) {
+    console.error('Error saving message:', error);
+    alert('Fehler beim Speichern der Nachricht.');
+  }
+}
+
+function editMessage(messageId) {
+  openMessageModal(messageId);
+}
+
+async function deleteMessage(messageId) {
+  if (!confirm('Möchten Sie diese Nachricht wirklich löschen?')) {
+    return;
+  }
+  
+  try {
+    const response = await fetch(`/api/messages/${messageId}`, {
+      method: 'DELETE'
+    });
+    
+    if (!response.ok) {
+      throw new Error('Failed to delete message');
+    }
+    
+    loadMessages();
+  } catch (error) {
+    console.error('Error deleting message:', error);
+    alert('Fehler beim Löschen der Nachricht.');
+  }
+}
+
+// File browser functionality
+let currentBrowserPath = '';
+let fileBrowserCollapse = null;
+
+function toggleFileBrowser() {
+  const collapse = document.getElementById('fileBrowserCollapse');
+  
+  // Initialize collapse on first use
+  if (!fileBrowserCollapse) {
+    fileBrowserCollapse = new bootstrap.Collapse(collapse, { toggle: false });
+  }
+  
+  if (collapse.classList.contains('show')) {
+    fileBrowserCollapse.hide();
+  } else {
+    fileBrowserCollapse.show();
+    loadFileBrowser('');
+  }
+}
+
+async function loadFileBrowser(path) {
+  currentBrowserPath = path;
+  const container = document.getElementById('fileBrowserContent');
+  const pathDisplay = document.getElementById('currentPath');
+  
+  pathDisplay.textContent = path || '/';
+  container.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"></div></div>';
+  
+  try {
+    const response = await fetch(`/api/path/${path}`);
+    if (!response.ok) {
+      throw new Error('Failed to load directory');
+    }
+    
+    const data = await response.json();
+    renderFileBrowser(data);
+  } catch (error) {
+    console.error('Error loading directory:', error);
+    container.innerHTML = '<div class="alert alert-danger">Fehler beim Laden des Verzeichnisses</div>';
+  }
+}
+
+function renderFileBrowser(data) {
+  const container = document.getElementById('fileBrowserContent');
+  let html = '<ul class="list-group list-group-flush">';
+  
+  // Add parent directory link if not at root
+  if (currentBrowserPath) {
+    const parentPath = currentBrowserPath.split('/').slice(0, -1).join('/');
+    html += `
+      <li class="list-group-item list-group-item-action" style="cursor: pointer;" data-action="navigate" data-path="${escapeHtml(parentPath)}">
+        <i class="bi bi-arrow-up"></i> ..
+      </li>
+    `;
+  }
+  
+  // Add directories
+  data.directories.forEach(dir => {
+    html += `
+      <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" style="cursor: pointer;" data-action="navigate" data-path="${escapeHtml(dir.path)}" data-name="${escapeHtml(dir.name)}">
+        <span>
+          <i class="bi bi-folder"></i> ${escapeHtml(dir.name)}
+        </span>
+        <button class="btn btn-sm btn-primary" data-action="insert-link" data-path="${escapeHtml(dir.path)}" data-name="${escapeHtml(dir.name)}" data-type="folder">
+          <i class="bi bi-link-45deg"></i>
+        </button>
+      </li>
+    `;
+  });
+  
+  // Add files
+  data.files.forEach(file => {
+    const icon = file.file_type === 'music' ? 'bi-music-note' : 
+                 file.file_type === 'image' ? 'bi-image' : 'bi-file-earmark';
+    html += `
+      <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" style="cursor: pointer;" data-action="insert-link" data-path="${escapeHtml(file.path)}" data-name="${escapeHtml(file.name)}" data-type="file">
+        <span>
+          <i class="bi ${icon}"></i> ${escapeHtml(file.name)}
+        </span>
+        <button class="btn btn-sm btn-primary" data-action="insert-link" data-path="${escapeHtml(file.path)}" data-name="${escapeHtml(file.name)}" data-type="file">
+          <i class="bi bi-link-45deg"></i>
+        </button>
+      </li>
+    `;
+  });
+  
+  html += '</ul>';
+  container.innerHTML = html;
+}
+
+function insertLink(path, name, type) {
+  const contentTextarea = document.getElementById('messageContent');
+  // For folders, use folder: protocol; for files use /media/
+  const url = type === 'folder' ? `folder:${path}` : `/media/${path}`;
+  const linkText = `[${name}](${url})`;
+  
+  // Insert at cursor position
+  const start = contentTextarea.selectionStart;
+  const end = contentTextarea.selectionEnd;
+  const text = contentTextarea.value;
+  
+  contentTextarea.value = text.substring(0, start) + linkText + text.substring(end);
+  contentTextarea.selectionStart = contentTextarea.selectionEnd = start + linkText.length;
+  contentTextarea.focus();
+  
+  // Optionally close the browser after inserting
+  fileBrowserCollapse.hide();
+}

templates/app.html

@@ -59,7 +59,15 @@
       <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config" >Ordnerkonfiguration</a>
     </div>
     {% endif %}
-    <main>
+    
+    <!-- Tab Navigation -->
+    <nav class="main-tabs">
+      <button class="tab-button active" data-tab="browse">Audio/Photo</button>
+      <button class="tab-button" data-tab="messages">Nachrichten</button>
+    </nav>
+    
+    <!-- Browse Section -->
+    <main id="browse-section" class="tab-content active">
       <div class="container">
         <div id="breadcrumbs" class="breadcrumb"></div>
         <div id="content"></div>
@@ -75,6 +83,22 @@
       </div>
     </main>
     
+    <!-- Messages Section -->
+    <section id="messages-section" class="tab-content">
+      <div class="container">
+        {% if admin_enabled %}
+        <div class="mb-3">
+          <button id="add-message-btn" class="btn btn-primary" title="Nachricht hinzufügen">
+            <i class="bi bi-plus-circle"></i>
+          </button>
+        </div>
+        {% endif %}
+        <div id="messages-container" class="messages-container">
+          <!-- Messages will be loaded here via JavaScript -->
+        </div>
+      </div>
+    </section>
+    
     <search style="display: none;">
       <div class="container">
         <form id="searchForm" method="post" class="mb-4">
@@ -242,6 +266,59 @@
     <div class="loader"></div>
   </div>
 
+  <!-- Message Editor Modal -->
+  <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="messageModalLabel">Nachricht bearbeiten</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form id="messageForm">
+            <input type="hidden" id="messageId">
+            <div class="mb-3">
+              <label for="messageTitle" class="form-label">Titel</label>
+              <input type="text" class="form-control" id="messageTitle" required>
+            </div>
+            <div class="mb-3">
+              <label for="messageDateTime" class="form-label">Datum und Zeit</label>
+              <input type="datetime-local" class="form-control" id="messageDateTime" required>
+            </div>
+            <div class="mb-3">
+              <label for="messageContent" class="form-label">Inhalt (Markdown unterstützt)</label>
+              <div class="mb-2">
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="insertLinkBtn">
+                  <i class="bi bi-link-45deg"></i> Datei/Ordner verlinken
+                </button>
+              </div>
+              <div class="collapse" id="fileBrowserCollapse">
+                <div class="file-browser-panel">
+                  <h6>Datei/Ordner auswählen</h6>
+                  <div id="fileBrowserPath" class="mb-2">
+                    <small class="text-muted">Pfad: <span id="currentPath">/</span></small>
+                  </div>
+                  <div id="fileBrowserContent" class="file-browser-content">
+                    <div class="text-center py-3">
+                      <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Laden...</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <textarea class="form-control" id="messageContent" rows="10" required></textarea>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+          <button type="button" class="btn btn-primary" id="saveMessageBtn">Speichern</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
   <!-- Load main app JS first, then gallery JS -->
@@ -249,6 +326,7 @@
   <script src="{{ url_for('static', filename='app.js') }}"></script>
   <script src="{{ url_for('static', filename='gallery.js') }}"></script>
   <script src="{{ url_for('static', filename='search.js') }}"></script>
+  <script src="{{ url_for('static', filename='messages.js') }}"></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {