Update UI

src/ui/app.py

@@ -1,7 +1,7 @@
 """Streamlit frontend for Dokumentassistent.
 
 Calls the FastAPI backend at http://localhost:8000.
-Single-page document search interface inspired by Danish university design.
+Single-page document search interface with clean sans-serif design.
 """
 
 import os
@@ -85,23 +85,6 @@ TEXTS: Dict[str, Dict[str, str]] = {
         "pipeline_rank": "#",
         "pipeline_no_results": "Ingen resultater",
         "pipeline_score_change": "Score-aendring",
-        "nav_home": "Forside",
-        "nav_docs": "Dokumenter",
-        "nav_search": "Soegning",
-        "nav_about": "Om systemet",
-        "breadcrumb_home": "Forside",
-        "breadcrumb_current": "Dokumentassistent",
-        "footer_contact": "Kontakt",
-        "footer_contact_text": "IT-support for administrativt personale",
-        "footer_services": "Services",
-        "footer_service_api": "API-dokumentation",
-        "footer_service_status": "Systemstatus",
-        "footer_service_guide": "Brugervejledning",
-        "footer_about": "Om",
-        "footer_about_privacy": "Privatlivspolitik",
-        "footer_about_data": "Databehandling",
-        "footer_about_access": "Tilgaengelighed",
-        "footer_copyright": "Dokumentassistent — RAG-prototype",
     },
     "en": {
         "page_title": "Document Assistant",
@@ -172,23 +155,6 @@ TEXTS: Dict[str, Dict[str, str]] = {
         "pipeline_rank": "#",
         "pipeline_no_results": "No results",
         "pipeline_score_change": "Score change",
-        "nav_home": "Home",
-        "nav_docs": "Documents",
-        "nav_search": "Search",
-        "nav_about": "About",
-        "breadcrumb_home": "Home",
-        "breadcrumb_current": "Document Assistant",
-        "footer_contact": "Contact",
-        "footer_contact_text": "IT support for administrative staff",
-        "footer_services": "Services",
-        "footer_service_api": "API Documentation",
-        "footer_service_status": "System Status",
-        "footer_service_guide": "User Guide",
-        "footer_about": "About",
-        "footer_about_privacy": "Privacy Policy",
-        "footer_about_data": "Data Processing",
-        "footer_about_access": "Accessibility",
-        "footer_copyright": "Document Assistant — RAG Prototype",
     },
 }
 
@@ -198,238 +164,120 @@ TEXTS: Dict[str, Dict[str, str]] = {
 st.set_page_config(
     page_title="Dokumentassistent",
     page_icon=None,
-    layout="wide",
+    layout="centered",
 )
 
 # ---------------------------------------------------------------------------
-# Custom CSS  --  University-inspired visual identity
+# Custom CSS  --  Clean sans-serif design
 # ---------------------------------------------------------------------------
 st.markdown(
     """
     <style>
     /* ---------- Global ---------- */
     html, body, [class*="css"] {
-        font-family: Arial, Helvetica, sans-serif;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
         color: #333333;
         background-color: #FFFFFF;
     }
 
-    /* Hide default Streamlit branding */
+    /* Hide default Streamlit branding but keep the sidebar toggle */
     #MainMenu, footer {visibility: hidden;}
-    header[data-testid="stHeader"] {background: transparent; height: 0;}
+    header[data-testid="stHeader"] {background: transparent;}
 
-    /* Force hide Streamlit header space */
-    .stApp > header {display: none;}
-    .block-container {
-        padding-top: 0 !important;
-        max-width: 1100px;
-    }
-
-    /* ---------- Top utility bar ---------- */
-    .top-utility-bar {
-        background-color: #2B2B2B;
-        color: #CCCCCC;
-        font-size: 0.78rem;
-        padding: 6px 0;
-        margin: -1rem -4rem 0 -4rem;
-        width: 100vw;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .top-utility-inner {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 0 2rem;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 1.5rem;
-    }
-    .top-utility-bar a {
-        color: #CCCCCC;
-        text-decoration: none;
-        transition: color 0.15s;
-    }
-    .top-utility-bar a:hover {
-        color: #FFFFFF;
-    }
-    .utility-lang-switch {
-        border-left: 1px solid #555;
-        padding-left: 1.5rem;
+    /* ---------- Accent line ---------- */
+    .accent-line {
+        width: 100%;
+        height: 4px;
+        background-color: #901A1E;
+        margin-bottom: 1.5rem;
     }
 
-    /* ---------- Main navigation bar ---------- */
-    .main-nav-bar {
-        background-color: #FFFFFF;
-        border-bottom: 3px solid #901A1E;
-        margin: 0 -4rem;
-        width: 100vw;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .main-nav-inner {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 0.9rem 2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .nav-brand {
-        font-family: Georgia, 'Times New Roman', serif;
-        font-size: 1.5rem;
+    /* ---------- Title ---------- */
+    .app-title {
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        font-size: 2.2rem;
         font-weight: 700;
         color: #901A1E;
-        text-decoration: none;
+        margin: 0 0 0.4rem 0;
         letter-spacing: -0.02em;
     }
-    .nav-links {
-        display: flex;
-        gap: 2rem;
-        align-items: center;
-    }
-    .nav-links a {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 0.92rem;
-        color: #333333;
-        text-decoration: none;
-        font-weight: 500;
-        padding: 0.3rem 0;
-        border-bottom: 2px solid transparent;
-        transition: border-color 0.15s, color 0.15s;
-    }
-    .nav-links a:hover, .nav-links a.active {
-        color: #901A1E;
-        border-bottom-color: #901A1E;
-    }
-
-    /* ---------- Breadcrumbs ---------- */
-    .breadcrumbs {
-        font-size: 0.82rem;
-        color: #888888;
-        padding: 0.7rem 0 0.4rem 0;
-        margin-bottom: 0.2rem;
-    }
-    .breadcrumbs a {
-        color: #901A1E;
-        text-decoration: none;
-    }
-    .breadcrumbs a:hover {
-        text-decoration: underline;
-    }
-    .breadcrumbs .separator {
-        color: #AAAAAA;
-        margin: 0 0.4rem;
-    }
-
-    /* ---------- Page title area ---------- */
-    .page-title-area {
-        border-bottom: 1px solid #E0E0E0;
-        padding-bottom: 1.2rem;
-        margin-bottom: 1.8rem;
-    }
-    .page-title {
-        font-family: Georgia, 'Times New Roman', serif;
-        font-size: 2rem;
-        font-weight: 700;
-        color: #2B2B2B;
-        margin: 0.4rem 0 0.5rem 0;
-        letter-spacing: -0.02em;
-        line-height: 1.2;
-    }
-    .page-subtitle {
-        font-family: Arial, Helvetica, sans-serif;
-        font-size: 1rem;
+    .app-subtitle {
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        font-size: 1.05rem;
         color: #666666;
-        margin: 0;
+        margin: 0 0 2rem 0;
         line-height: 1.6;
     }
 
     /* ---------- Sidebar ---------- */
     section[data-testid="stSidebar"] {
-        background-color: #F7F7F7;
+        background-color: #FAFAFA;
         border-right: 1px solid #E0E0E0;
     }
-    section[data-testid="stSidebar"] .sidebar-section-heading {
-        font-family: Georgia, 'Times New Roman', serif;
-        font-size: 1.1rem;
+    section[data-testid="stSidebar"] .sidebar-heading {
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        font-size: 1.2rem;
         font-weight: 700;
-        color: #2B2B2B;
+        color: #901A1E;
         margin-bottom: 0.5rem;
-        padding-bottom: 0.35rem;
-        border-bottom: 2px solid #901A1E;
     }
     section[data-testid="stSidebar"] p,
     section[data-testid="stSidebar"] li {
-        font-size: 0.88rem;
+        font-size: 0.92rem;
         color: #555555;
         line-height: 1.55;
     }
 
     /* ---------- Source card ---------- */
     .source-card {
-        border-left: 3px solid #901A1E;
-        border-top: 1px solid #E0E0E0;
-        border-right: 1px solid #E0E0E0;
-        border-bottom: 1px solid #E0E0E0;
+        border: 1px solid #CCCCCC;
         padding: 1rem 1.2rem;
         margin-bottom: 0.75rem;
         background-color: #FAFAFA;
-        transition: box-shadow 0.15s;
-    }
-    .source-card:hover {
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
     }
     .source-card-title {
         font-weight: 600;
-        color: #2B2B2B;
+        color: #333333;
         font-size: 0.95rem;
         margin-bottom: 0.3rem;
     }
     .source-card-text {
-        font-size: 0.85rem;
+        font-size: 0.88rem;
         color: #555555;
         line-height: 1.55;
     }
     .source-card-meta {
-        font-size: 0.78rem;
+        font-size: 0.8rem;
         color: #888888;
         margin-top: 0.4rem;
     }
 
     /* ---------- Result metadata ---------- */
     .result-meta {
-        font-size: 0.85rem;
+        font-size: 0.88rem;
         color: #666666;
         margin-bottom: 1.2rem;
-        padding: 0.6rem 0.9rem;
-        background-color: #F7F7F7;
-        border-left: 3px solid #901A1E;
+        padding-bottom: 0.8rem;
+        border-bottom: 1px solid #E0E0E0;
     }
 
     /* ---------- Answer area ---------- */
     .answer-block {
-        font-size: 1.02rem;
+        font-size: 1.05rem;
         line-height: 1.7;
         color: #333333;
         margin-bottom: 1.5rem;
-        padding: 1.2rem;
-        background-color: #FFFFFF;
-        border: 1px solid #E0E0E0;
     }
 
     /* ---------- Inputs ---------- */
     .stTextInput > div > div > input {
         border-radius: 0 !important;
-        border: 1px solid #BBBBBB !important;
-        font-family: Arial, Helvetica, sans-serif !important;
-        padding: 0.6rem 0.8rem !important;
+        border: 1px solid #999999 !important;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
     }
     .stTextInput > div > div > input:focus {
         border-color: #901A1E !important;
-        box-shadow: 0 0 0 1px #901A1E !important;
+        box-shadow: none !important;
     }
 
     /* ---------- Button ---------- */
@@ -438,12 +286,10 @@ st.markdown(
         background-color: #901A1E !important;
         color: #FFFFFF !important;
         border: none !important;
-        font-family: Arial, Helvetica, sans-serif !important;
-        font-size: 0.92rem !important;
-        padding: 0.55rem 2.2rem !important;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+        font-size: 0.95rem !important;
+        padding: 0.5rem 2rem !important;
         letter-spacing: 0.02em;
-        font-weight: 600 !important;
-        text-transform: uppercase;
     }
     .stButton > button:hover {
         background-color: #7A1619 !important;
@@ -462,175 +308,38 @@ st.markdown(
         border-radius: 0 !important;
     }
 
-    /* ---------- Pipeline tables ---------- */
-    [data-testid="stExpander"] table {
-        table-layout: fixed;
-        width: 100%;
-        word-break: break-all;
-        overflow-wrap: break-word;
-    }
-    [data-testid="stExpander"] table td,
-    [data-testid="stExpander"] table th {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 0;
-        font-size: 0.82rem;
-        padding: 0.3rem 0.5rem;
-    }
-    [data-testid="stExpander"] table td:first-child,
-    [data-testid="stExpander"] table th:first-child {
-        width: 2.5rem;
-    }
-    [data-testid="stExpander"] table td:last-child,
-    [data-testid="stExpander"] table th:last-child {
-        width: 5rem;
-    }
-
     /* ---------- Expander ---------- */
     .streamlit-expanderHeader {
-        font-family: Arial, Helvetica, sans-serif !important;
-        font-size: 0.95rem !important;
+        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+        font-size: 1rem !important;
         color: #333333 !important;
     }
-
-    /* ---------- Footer ---------- */
-    .site-footer {
-        background-color: #2B2B2B;
-        color: #CCCCCC;
-        margin: 3rem -4rem 0 -4rem;
-        width: 100vw;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 2.5rem 0 1.5rem 0;
-    }
-    .footer-inner {
-        max-width: 1100px;
-        margin: 0 auto;
-        padding: 0 2rem;
-        display: grid;
-        grid-template-columns: 2fr 1fr 1fr 1fr;
-        gap: 2rem;
-    }
-    .footer-col h4 {
-        font-family: Georgia, 'Times New Roman', serif;
-        font-size: 0.95rem;
-        font-weight: 700;
-        color: #FFFFFF;
-        margin: 0 0 0.8rem 0;
-        padding-bottom: 0.4rem;
-        border-bottom: 2px solid #901A1E;
-        display: inline-block;
-    }
-    .footer-col p, .footer-col a {
-        font-size: 0.82rem;
-        color: #AAAAAA;
-        line-height: 1.7;
-        text-decoration: none;
-        display: block;
-    }
-    .footer-col a:hover {
-        color: #FFFFFF;
-    }
-    .footer-bottom {
-        max-width: 1100px;
-        margin: 1.5rem auto 0 auto;
-        padding: 1rem 2rem 0 2rem;
-        border-top: 1px solid #444444;
-        font-size: 0.78rem;
-        color: #888888;
-        text-align: center;
-    }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
 # ---------------------------------------------------------------------------
-# Language state — use query param trick for the utility-bar lang switch
+# Language selector  --  top-right corner via columns
 # ---------------------------------------------------------------------------
-if "lang" not in st.session_state:
-    st.session_state.lang = "da"
-
-
-def _set_lang(code: str) -> None:
-    """Set the language in session state."""
-    st.session_state.lang = code
-
-
-# A hidden selectbox drives the actual state; the visual switch is in the bar
-_col_hidden_lang = st.columns([1])[0]
-with _col_hidden_lang:
+_col_spacer, _col_lang = st.columns([5, 1])
+with _col_lang:
     lang = st.selectbox(
-        "lang_sel",
+        "🌐",
         options=["da", "en"],
         format_func=lambda c: "Dansk" if c == "da" else "English",
-        index=0 if st.session_state.lang == "da" else 1,
+        index=0,
         label_visibility="collapsed",
-        key="lang_select",
     )
-    st.session_state.lang = lang
 
 t = TEXTS[lang]
 
-# ---------------------------------------------------------------------------
-# Top utility bar
-# ---------------------------------------------------------------------------
-st.markdown(
-    f"""
-    <div class="top-utility-bar">
-      <div class="top-utility-inner">
-        <span>{t["footer_service_status"]}</span>
-        <span>{t["footer_service_guide"]}</span>
-        <span class="utility-lang-switch">{"Dansk" if lang == "da" else "English"}</span>
-      </div>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
-
-# ---------------------------------------------------------------------------
-# Main navigation bar
-# ---------------------------------------------------------------------------
-st.markdown(
-    f"""
-    <div class="main-nav-bar">
-      <div class="main-nav-inner">
-        <span class="nav-brand">Dokumentassistent</span>
-        <div class="nav-links">
-          <a href="#" class="active">{t["nav_home"]}</a>
-          <a href="#">{t["nav_docs"]}</a>
-          <a href="#">{t["nav_search"]}</a>
-          <a href="#">{t["nav_about"]}</a>
-        </div>
-      </div>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
-
-# ---------------------------------------------------------------------------
-# Breadcrumbs
-# ---------------------------------------------------------------------------
-st.markdown(
-    f"""
-    <div class="breadcrumbs">
-      <a href="#">{t["breadcrumb_home"]}</a>
-      <span class="separator">&rsaquo;</span>
-      <a href="#">{t["nav_search"]}</a>
-      <span class="separator">&rsaquo;</span>
-      <span>{t["breadcrumb_current"]}</span>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
-
 # ---------------------------------------------------------------------------
 # Sidebar
 # ---------------------------------------------------------------------------
 with st.sidebar:
     st.markdown(
-        f'<div class="sidebar-section-heading">{t["sidebar_heading"]}</div>',
+        f'<div class="sidebar-heading">{t["sidebar_heading"]}</div>',
         unsafe_allow_html=True,
     )
     st.markdown(t["sidebar_body"])
@@ -661,7 +370,7 @@ with st.sidebar:
         _emb = _health.get("embedding_model", "")
         _emb_prov = _health.get("embedding_provider", "")
         st.markdown(
-            f'<div class="sidebar-section-heading">{t["model_heading"]}</div>',
+            f'<div class="sidebar-heading">{t["model_heading"]}</div>',
             unsafe_allow_html=True,
         )
         st.markdown(
@@ -672,15 +381,16 @@ with st.sidebar:
         st.caption(t["model_unavailable"])
 
 # ---------------------------------------------------------------------------
-# Main content — page title area
+# Main content
 # ---------------------------------------------------------------------------
+
+# Accent line
+st.markdown('<div class="accent-line"></div>', unsafe_allow_html=True)
+
+# Title block
+st.markdown(f'<div class="app-title">{t["title"]}</div>', unsafe_allow_html=True)
 st.markdown(
-    f"""
-    <div class="page-title-area">
-      <div class="page-title">{t["title"]}</div>
-      <p class="page-subtitle">{t["subtitle"]}</p>
-    </div>
-    """,
+    f'<div class="app-subtitle">{t["subtitle"]}</div>',
     unsafe_allow_html=True,
 )
 
@@ -785,12 +495,6 @@ if search_clicked and question.strip():
 
             st.markdown("---")
 
-            def _truncate_doc_id(doc_id: str, max_len: int = 40) -> str:
-                """Truncate long document IDs for table display."""
-                if len(doc_id) <= max_len:
-                    return doc_id
-                return doc_id[: max_len - 3] + "..."
-
             def _render_result_table(results: list[dict], label: str) -> None:
                 """Render a ranked results table."""
                 st.markdown(f"**{label}**")
@@ -799,7 +503,7 @@ if search_clicked and question.strip():
                     return
                 header = f'| {t["pipeline_rank"]} | {t["pipeline_doc"]} | {t["pipeline_score"]} |\n|---|---|---|'
                 rows = "\n".join(
-                    f'| {i + 1} | {_truncate_doc_id(r.get("document_id", ""))} | {r.get("score", 0):.4f} |'
+                    f'| {i + 1} | {r.get("document_id", "")} | {r.get("score", 0):.4f} |'
                     for i, r in enumerate(results)
                 )
                 st.markdown(f"{header}\n{rows}")
@@ -843,7 +547,7 @@ if search_clicked and question.strip():
                     else:
                         change = "-"
                     rows_list.append(
-                        f'| {i + 1} | {_truncate_doc_id(r.get("document_id", ""))} | {new_score:.4f} | {change} |'
+                        f'| {i + 1} | {r.get("document_id", "")} | {new_score:.4f} | {change} |'
                     )
                 st.markdown(f"{header}\n" + "\n".join(rows_list))
             else:
@@ -851,41 +555,3 @@ if search_clicked and question.strip():
 
 elif search_clicked:
     st.warning(t["empty_warning"])
-
-# ---------------------------------------------------------------------------
-# Footer
-# ---------------------------------------------------------------------------
-st.markdown(
-    f"""
-    <div class="site-footer">
-      <div class="footer-inner">
-        <div class="footer-col">
-          <h4>Dokumentassistent</h4>
-          <p>{t["footer_contact_text"]}</p>
-          <p style="margin-top:0.5rem; color:#888;">RAG-pipeline &middot; Hybrid Search &middot; LLM</p>
-        </div>
-        <div class="footer-col">
-          <h4>{t["footer_services"]}</h4>
-          <a href="#">{t["footer_service_api"]}</a>
-          <a href="#">{t["footer_service_status"]}</a>
-          <a href="#">{t["footer_service_guide"]}</a>
-        </div>
-        <div class="footer-col">
-          <h4>{t["footer_about"]}</h4>
-          <a href="#">{t["footer_about_privacy"]}</a>
-          <a href="#">{t["footer_about_data"]}</a>
-          <a href="#">{t["footer_about_access"]}</a>
-        </div>
-        <div class="footer-col">
-          <h4>{t["footer_contact"]}</h4>
-          <p>support@example.dk</p>
-          <p>+45 00 00 00 00</p>
-        </div>
-      </div>
-      <div class="footer-bottom">
-        {t["footer_copyright"]}
-      </div>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)