first commit

src/taskpane/components/AboutDialog.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Modal,
+  IconButton,
+  Stack,
+  Text,
+} from "@fluentui/react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const AboutDialog: React.FC<Props> = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={onClose}
+      isBlocking={false}
+      containerClassName="about-modal"
+    >
+      <div className="about-dialog">
+        <div className="about-header">
+          <Text variant="xLarge">Info</Text>
+          <IconButton
+            iconProps={{ iconName: "Cancel" }}
+            onClick={onClose}
+            ariaLabel="Schließen"
+            className="about-close-btn"
+          />
+        </div>
+
+        <div className="about-content">
+          <div className="about-logo">
+            <Text variant="xxLarge" className="about-product-name">
+              Outlook-SYNC &harr; Starface
+            </Text>
+            <Text variant="small" className="about-version">
+              Version 0.0.0.1
+            </Text>
+          </div>
+
+          <div className="about-divider" />
+
+          <div className="about-company">
+            <Text variant="large" block className="about-company-name">
+              HackerSoft
+            </Text>
+            <Text variant="medium" block className="about-company-sub">
+              Hacker-Net Telekommunikation
+            </Text>
+          </div>
+
+          <div className="about-address">
+            <Text variant="small" block>Stefan Hacker</Text>
+            <Text variant="small" block>Am Wunderburgpark 5b</Text>
+            <Text variant="small" block>26135 Oldenburg</Text>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/taskpane/components/App.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { ThemeProvider, createTheme, IconButton } from "@fluentui/react";
+import { ProfileList } from "./ProfileList";
+import { ProfileEditor } from "./ProfileEditor";
+import { SyncView } from "./SyncView";
+import { AboutDialog } from "./AboutDialog";
+import { SyncProfile } from "../../models/types";
+
+const theme = createTheme({
+  palette: {
+    themePrimary: "#0078d4",
+    themeDark: "#005a9e",
+    neutralLight: "#f3f2f1",
+  },
+});
+
+type View = "list" | "edit" | "sync";
+
+export const App: React.FC = () => {
+  const [view, setView] = useState<View>("list");
+  const [editProfile, setEditProfile] = useState<SyncProfile | null>(null);
+  const [syncProfileId, setSyncProfileId] = useState<string | null>(null);
+  const [showAbout, setShowAbout] = useState(false);
+
+  const handleNewProfile = () => {
+    setEditProfile(null);
+    setView("edit");
+  };
+
+  const handleEditProfile = (profile: SyncProfile) => {
+    setEditProfile(profile);
+    setView("edit");
+  };
+
+  const handleSync = (profileId: string) => {
+    setSyncProfileId(profileId);
+    setView("sync");
+  };
+
+  const handleBack = () => {
+    setView("list");
+    setEditProfile(null);
+    setSyncProfileId(null);
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div className="app-container">
+        <header className="app-header">
+          <h1>Starface Kontakt-Sync</h1>
+          <IconButton
+            iconProps={{ iconName: "Info" }}
+            title="Info"
+            ariaLabel="Info"
+            onClick={() => setShowAbout(true)}
+            className="header-info-btn"
+          />
+        </header>
+        <AboutDialog isOpen={showAbout} onClose={() => setShowAbout(false)} />
+        <main className="app-main">
+          {view === "list" && (
+            <ProfileList
+              onNew={handleNewProfile}
+              onEdit={handleEditProfile}
+              onSync={handleSync}
+            />
+          )}
+          {view === "edit" && (
+            <ProfileEditor
+              profile={editProfile}
+              onSave={handleBack}
+              onCancel={handleBack}
+            />
+          )}
+          {view === "sync" && syncProfileId && (
+            <SyncView profileId={syncProfileId} onBack={handleBack} />
+          )}
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+};

src/taskpane/components/ProfileEditor.tsx

@@ -0,0 +1,355 @@
+import React, { useState, useEffect } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  TextField,
+  Dropdown,
+  IDropdownOption,
+  Stack,
+  Text,
+  Toggle,
+  Spinner,
+  SpinnerSize,
+  MessageBar,
+  MessageBarType,
+} from "@fluentui/react";
+import {
+  SyncProfile,
+  StarfaceConnection,
+  StarfaceAddressBook,
+  OutlookContactFolder,
+} from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+import { SyncEngine } from "../../services/sync-engine";
+
+interface Props {
+  profile: SyncProfile | null;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+const defaultConnection: StarfaceConnection = {
+  host: "",
+  port: 443,
+  useSsl: true,
+  loginId: "",
+  password: "",
+};
+
+export const ProfileEditor: React.FC<Props> = ({
+  profile,
+  onSave,
+  onCancel,
+}) => {
+  const pm = new ProfileManager();
+  const engine = new SyncEngine();
+  const isNew = !profile;
+
+  const [name, setName] = useState(profile?.name || "");
+  const [connection, setConnection] = useState<StarfaceConnection>(
+    profile?.starfaceConnection || { ...defaultConnection }
+  );
+  const [addressBooks, setAddressBooks] = useState<StarfaceAddressBook[]>([]);
+  const [selectedBook, setSelectedBook] = useState<StarfaceAddressBook | null>(
+    profile?.starfaceAddressBook || null
+  );
+  const [outlookFolders, setOutlookFolders] = useState<OutlookContactFolder[]>(
+    []
+  );
+  const [selectedFolderId, setSelectedFolderId] = useState(
+    profile?.outlookFolderId || ""
+  );
+  const [syncDirection, setSyncDirection] = useState<SyncProfile["syncDirection"]>(
+    profile?.syncDirection || "both"
+  );
+  const [enabled, setEnabled] = useState(profile?.enabled ?? true);
+
+  const [loading, setLoading] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [error, setError] = useState("");
+
+  // Load Outlook folders on mount
+  useEffect(() => {
+    loadOutlookFolders();
+  }, []);
+
+  const loadOutlookFolders = async () => {
+    try {
+      const folders = await engine.loadOutlookFolders();
+      setOutlookFolders(folders);
+      if (!selectedFolderId && folders.length > 0) {
+        setSelectedFolderId(folders[0].id);
+      }
+    } catch (err) {
+      console.error("Failed to load Outlook folders:", err);
+      // Provide a default folder option
+      setOutlookFolders([{ id: "default", displayName: "Kontakte (Standard)" }]);
+      if (!selectedFolderId) setSelectedFolderId("default");
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setLoading(true);
+    setTestResult(null);
+    const result = await engine.testStarfaceConnection(connection);
+    setTestResult(result);
+    if (!result.success && result.message.toLowerCase().includes("fetch")) {
+      result.message +=
+        "\n\nMögliche Ursache: Das SSL-Zertifikat der Starface ist nicht vertrauenswürdig. " +
+        "Bitte als Administrator ausführen:\n" +
+        `import-cert.ps1 -StarfaceHost ${connection.host} -Port ${connection.port}`;
+    }
+    setLoading(false);
+  };
+
+  const handleLoadAddressBooks = async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const books = await engine.loadStarfaceAddressBooks(connection);
+      setAddressBooks(books);
+      if (books.length > 0 && !selectedBook) {
+        setSelectedBook(books[0]);
+      }
+      if (books.length === 0) {
+        setError("Keine Adressbücher gefunden");
+      }
+    } catch (err) {
+      setError(`Fehler: ${err}`);
+    }
+    setLoading(false);
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      setError("Bitte einen Profilnamen eingeben");
+      return;
+    }
+    if (!connection.host.trim()) {
+      setError("Bitte Starface-Host eingeben");
+      return;
+    }
+    if (!selectedBook) {
+      setError("Bitte ein Starface-Adressbuch auswählen");
+      return;
+    }
+    if (!selectedFolderId) {
+      setError("Bitte einen Outlook-Ordner auswählen");
+      return;
+    }
+
+    const selectedFolder = outlookFolders.find(
+      (f) => f.id === selectedFolderId
+    );
+
+    const newProfile: SyncProfile = {
+      id: profile?.id || pm.generateId(),
+      name: name.trim(),
+      starfaceConnection: connection,
+      starfaceAddressBook: selectedBook,
+      outlookFolderId: selectedFolderId,
+      outlookFolderName:
+        selectedFolder?.displayName || "Kontakte",
+      syncDirection,
+      lastSync: profile?.lastSync,
+      enabled,
+    };
+
+    if (isNew) {
+      pm.addProfile(newProfile);
+    } else {
+      pm.updateProfile(newProfile);
+    }
+
+    onSave();
+  };
+
+  const directionOptions: IDropdownOption[] = [
+    { key: "both", text: "Bidirektional (↔)" },
+    { key: "outlook-to-starface", text: "Outlook → Starface" },
+    { key: "starface-to-outlook", text: "Starface → Outlook" },
+  ];
+
+  const bookOptions: IDropdownOption[] = addressBooks.map((b, i) => ({
+    key: i.toString(),
+    text: b.name,
+    data: b,
+  }));
+
+  const folderOptions: IDropdownOption[] = outlookFolders.map((f) => ({
+    key: f.id,
+    text: f.displayName,
+  }));
+
+  return (
+    <div className="profile-editor">
+      <Stack tokens={{ childrenGap: 16 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">
+            {isNew ? "Neues Profil" : "Profil bearbeiten"}
+          </Text>
+          <DefaultButton text="Zurück" onClick={onCancel} />
+        </Stack>
+
+        {error && (
+          <MessageBar
+            messageBarType={MessageBarType.error}
+            onDismiss={() => setError("")}
+          >
+            {error}
+          </MessageBar>
+        )}
+
+        <TextField
+          label="Profilname"
+          value={name}
+          onChange={(_, v) => setName(v || "")}
+          placeholder="z.B. Firmenkontakte Hauptanlage"
+          required
+        />
+
+        <Text variant="large" className="section-title">
+          Starface-Verbindung
+        </Text>
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <Stack.Item grow>
+            <TextField
+              label="Host / IP-Adresse"
+              value={connection.host}
+              onChange={(_, v) =>
+                setConnection({ ...connection, host: v || "" })
+              }
+              placeholder="z.B. pbx.firma.de oder 192.168.1.100"
+              required
+            />
+          </Stack.Item>
+          <TextField
+            label="Port"
+            value={connection.port.toString()}
+            onChange={(_, v) =>
+              setConnection({ ...connection, port: parseInt(v || "443") || 443 })
+            }
+            styles={{ root: { width: 80 } }}
+          />
+        </Stack>
+
+        <Toggle
+          label="HTTPS verwenden"
+          checked={connection.useSsl}
+          onChange={(_, checked) =>
+            setConnection({
+              ...connection,
+              useSsl: checked ?? true,
+              port: checked ? 443 : 80,
+            })
+          }
+        />
+
+        <TextField
+          label="Login-ID"
+          value={connection.loginId}
+          onChange={(_, v) =>
+            setConnection({ ...connection, loginId: v || "" })
+          }
+          required
+        />
+
+        <TextField
+          label="Kennwort"
+          type="password"
+          value={connection.password}
+          onChange={(_, v) =>
+            setConnection({ ...connection, password: v || "" })
+          }
+          canRevealPassword
+          required
+        />
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <DefaultButton
+            text="Verbindung testen"
+            onClick={handleTestConnection}
+            disabled={loading || !connection.host || !connection.loginId}
+          />
+          <PrimaryButton
+            text="Adressbücher laden"
+            onClick={handleLoadAddressBooks}
+            disabled={loading || !connection.host || !connection.loginId}
+          />
+          {loading && <Spinner size={SpinnerSize.small} />}
+        </Stack>
+
+        {testResult && (
+          <MessageBar
+            messageBarType={
+              testResult.success
+                ? MessageBarType.success
+                : MessageBarType.error
+            }
+          >
+            {testResult.message.split("\n").map((line, i) => (
+              <span key={i}>
+                {i > 0 && <br />}
+                {line}
+              </span>
+            ))}
+          </MessageBar>
+        )}
+
+        {addressBooks.length > 0 && (
+          <Dropdown
+            label="Starface-Adressbuch"
+            options={bookOptions}
+            selectedKey={
+              selectedBook
+                ? addressBooks.indexOf(selectedBook).toString()
+                : undefined
+            }
+            onChange={(_, option) => {
+              if (option?.data) setSelectedBook(option.data);
+            }}
+            required
+          />
+        )}
+
+        <Text variant="large" className="section-title">
+          Outlook-Einstellungen
+        </Text>
+
+        <Dropdown
+          label="Outlook Kontakte-Ordner"
+          options={folderOptions}
+          selectedKey={selectedFolderId}
+          onChange={(_, option) => {
+            if (option) setSelectedFolderId(option.key as string);
+          }}
+          required
+        />
+
+        <Dropdown
+          label="Synchronisationsrichtung"
+          options={directionOptions}
+          selectedKey={syncDirection}
+          onChange={(_, option) => {
+            if (option) setSyncDirection(option.key as SyncProfile["syncDirection"]);
+          }}
+        />
+
+        <Toggle
+          label="Profil aktiviert"
+          checked={enabled}
+          onChange={(_, checked) => setEnabled(checked ?? true)}
+        />
+
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <PrimaryButton text="Speichern" onClick={handleSave} />
+          <DefaultButton text="Abbrechen" onClick={onCancel} />
+        </Stack>
+      </Stack>
+    </div>
+  );
+};

src/taskpane/components/ProfileList.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  IconButton,
+  Stack,
+  Text,
+  MessageBar,
+  MessageBarType,
+  Toggle,
+} from "@fluentui/react";
+import { SyncProfile } from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+
+interface Props {
+  onNew: () => void;
+  onEdit: (profile: SyncProfile) => void;
+  onSync: (profileId: string) => void;
+}
+
+export const ProfileList: React.FC<Props> = ({ onNew, onEdit, onSync }) => {
+  const [profiles, setProfiles] = useState<SyncProfile[]>([]);
+  const pm = new ProfileManager();
+
+  useEffect(() => {
+    setProfiles(pm.getProfiles());
+  }, []);
+
+  const handleDelete = (id: string) => {
+    if (confirm("Profil wirklich löschen?")) {
+      pm.deleteProfile(id);
+      setProfiles(pm.getProfiles());
+    }
+  };
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    const profile = pm.getProfile(id);
+    if (profile) {
+      profile.enabled = enabled;
+      pm.updateProfile(profile);
+      setProfiles(pm.getProfiles());
+    }
+  };
+
+  const formatDate = (iso?: string) => {
+    if (!iso) return "Noch nie";
+    return new Date(iso).toLocaleString("de-DE");
+  };
+
+  return (
+    <div className="profile-list">
+      <Stack tokens={{ childrenGap: 12 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">Sync-Profile</Text>
+          <PrimaryButton
+            text="Neues Profil"
+            iconProps={{ iconName: "Add" }}
+            onClick={onNew}
+          />
+        </Stack>
+
+        {profiles.length === 0 && (
+          <MessageBar messageBarType={MessageBarType.info}>
+            Noch keine Sync-Profile angelegt. Erstellen Sie ein neues Profil, um
+            Kontakte zu synchronisieren.
+          </MessageBar>
+        )}
+
+        {profiles.map((profile) => (
+          <div key={profile.id} className="profile-card">
+            <Stack tokens={{ childrenGap: 8 }}>
+              <Stack
+                horizontal
+                horizontalAlign="space-between"
+                verticalAlign="center"
+              >
+                <Text variant="large" className="profile-name">
+                  {profile.name}
+                </Text>
+                <Toggle
+                  checked={profile.enabled}
+                  onChange={(_, checked) =>
+                    handleToggle(profile.id, checked ?? false)
+                  }
+                  onText="Aktiv"
+                  offText="Inaktiv"
+                />
+              </Stack>
+
+              <div className="profile-details">
+                <Text variant="small" block>
+                  <strong>Starface:</strong>{" "}
+                  {profile.starfaceConnection.host} &rarr;{" "}
+                  {profile.starfaceAddressBook.name}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Outlook:</strong> {profile.outlookFolderName}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Richtung:</strong>{" "}
+                  {profile.syncDirection === "both"
+                    ? "Bidirektional"
+                    : profile.syncDirection === "outlook-to-starface"
+                    ? "Outlook → Starface"
+                    : "Starface → Outlook"}
+                </Text>
+                <Text variant="small" block>
+                  <strong>Letzte Sync:</strong>{" "}
+                  {formatDate(profile.lastSync)}
+                </Text>
+              </div>
+
+              <Stack horizontal tokens={{ childrenGap: 8 }}>
+                <PrimaryButton
+                  text="Jetzt synchronisieren"
+                  iconProps={{ iconName: "Sync" }}
+                  onClick={() => onSync(profile.id)}
+                  disabled={!profile.enabled}
+                />
+                <DefaultButton
+                  text="Bearbeiten"
+                  iconProps={{ iconName: "Edit" }}
+                  onClick={() => onEdit(profile)}
+                />
+                <IconButton
+                  iconProps={{ iconName: "Delete" }}
+                  title="Löschen"
+                  onClick={() => handleDelete(profile.id)}
+                  className="delete-btn"
+                />
+              </Stack>
+            </Stack>
+          </div>
+        ))}
+      </Stack>
+    </div>
+  );
+};

src/taskpane/components/SyncView.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  PrimaryButton,
+  DefaultButton,
+  Stack,
+  Text,
+  ProgressIndicator,
+  MessageBar,
+  MessageBarType,
+} from "@fluentui/react";
+import { SyncResult } from "../../models/types";
+import { ProfileManager } from "../../services/profile-manager";
+import { SyncEngine } from "../../services/sync-engine";
+
+interface Props {
+  profileId: string;
+  onBack: () => void;
+}
+
+export const SyncView: React.FC<Props> = ({ profileId, onBack }) => {
+  const pm = new ProfileManager();
+  const profile = pm.getProfile(profileId);
+
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState<string[]>([]);
+  const [result, setResult] = useState<SyncResult | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  const addProgress = (msg: string) => {
+    setProgress((prev) => [...prev, `[${new Date().toLocaleTimeString("de-DE")}] ${msg}`]);
+  };
+
+  useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [progress]);
+
+  const handleSync = async () => {
+    if (!profile) return;
+
+    setRunning(true);
+    setProgress([]);
+    setResult(null);
+    addProgress("Synchronisation gestartet...");
+
+    const engine = new SyncEngine();
+    const syncResult = await engine.syncProfile(profile, (msg) => {
+      addProgress(msg);
+    });
+
+    setResult(syncResult);
+    setRunning(false);
+    addProgress("Fertig.");
+  };
+
+  if (!profile) {
+    return (
+      <MessageBar messageBarType={MessageBarType.error}>
+        Profil nicht gefunden.
+        <DefaultButton text="Zurück" onClick={onBack} />
+      </MessageBar>
+    );
+  }
+
+  return (
+    <div className="sync-view">
+      <Stack tokens={{ childrenGap: 12 }}>
+        <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
+          <Text variant="xLarge">Synchronisation</Text>
+          <DefaultButton text="Zurück" onClick={onBack} disabled={running} />
+        </Stack>
+
+        <div className="sync-info">
+          <Text variant="medium" block>
+            <strong>Profil:</strong> {profile.name}
+          </Text>
+          <Text variant="small" block>
+            {profile.starfaceConnection.host} ({profile.starfaceAddressBook.name})
+            {" ↔ "}
+            {profile.outlookFolderName}
+          </Text>
+        </div>
+
+        {!running && !result && (
+          <PrimaryButton
+            text="Synchronisation starten"
+            iconProps={{ iconName: "Sync" }}
+            onClick={handleSync}
+          />
+        )}
+
+        {running && (
+          <ProgressIndicator
+            label="Synchronisiere..."
+            description="Bitte warten..."
+          />
+        )}
+
+        {progress.length > 0 && (
+          <div className="sync-log" ref={logRef}>
+            {progress.map((msg, i) => (
+              <Text key={i} variant="small" block className="log-line">
+                {msg}
+              </Text>
+            ))}
+          </div>
+        )}
+
+        {result && (
+          <div className="sync-result">
+            {result.errors.length === 0 ? (
+              <MessageBar messageBarType={MessageBarType.success}>
+                Synchronisation erfolgreich abgeschlossen!
+              </MessageBar>
+            ) : (
+              <MessageBar messageBarType={MessageBarType.warning}>
+                Synchronisation mit {result.errors.length} Fehler(n)
+                abgeschlossen.
+              </MessageBar>
+            )}
+
+            <div className="result-stats">
+              <Stack horizontal tokens={{ childrenGap: 24 }}>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.created}
+                  </Text>
+                  <Text variant="small">Erstellt</Text>
+                </div>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.updated}
+                  </Text>
+                  <Text variant="small">Aktualisiert</Text>
+                </div>
+                <div className="stat">
+                  <Text variant="xxLarge" className="stat-number">
+                    {result.errors.length}
+                  </Text>
+                  <Text variant="small">Fehler</Text>
+                </div>
+              </Stack>
+            </div>
+
+            {result.errors.length > 0 && (
+              <div className="error-list">
+                <Text variant="medium" block>
+                  <strong>Fehler:</strong>
+                </Text>
+                {result.errors.map((err, i) => (
+                  <MessageBar
+                    key={i}
+                    messageBarType={MessageBarType.error}
+                    className="error-item"
+                  >
+                    {err}
+                  </MessageBar>
+                ))}
+              </div>
+            )}
+
+            <Stack horizontal tokens={{ childrenGap: 8 }} className="result-actions">
+              <PrimaryButton
+                text="Erneut synchronisieren"
+                iconProps={{ iconName: "Sync" }}
+                onClick={handleSync}
+              />
+              <DefaultButton text="Zurück zur Übersicht" onClick={onBack} />
+            </Stack>
+          </div>
+        )}
+      </Stack>
+    </div>
+  );
+};

src/taskpane/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./components/App";
+import "./styles/taskpane.css";
+
+/* global Office */
+
+Office.onReady((info) => {
+  if (info.host === Office.HostType.Outlook) {
+    const container = document.getElementById("root");
+    if (container) {
+      const root = createRoot(container);
+      root.render(<App />);
+    }
+  }
+});

src/taskpane/styles/taskpane.css

@@ -0,0 +1,259 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 14px;
+  color: #323130;
+  background: #faf9f8;
+}
+
+.app-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.app-header {
+  background: linear-gradient(135deg, #0078d4, #005a9e);
+  color: white;
+  padding: 16px 20px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.app-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.header-info-btn {
+  color: white !important;
+  background: transparent !important;
+}
+
+.header-info-btn:hover {
+  background: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* About Dialog */
+.about-modal {
+  max-width: 360px;
+  border-radius: 8px;
+}
+
+.about-dialog {
+  padding: 0;
+}
+
+.about-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 8px;
+}
+
+.about-close-btn {
+  color: #605e5c !important;
+}
+
+.about-content {
+  padding: 0 20px 24px;
+  text-align: center;
+}
+
+.about-logo {
+  padding: 16px 0;
+}
+
+.about-product-name {
+  font-weight: 700 !important;
+  color: #0078d4 !important;
+  display: block;
+}
+
+.about-version {
+  color: #605e5c !important;
+  display: block;
+  margin-top: 4px;
+}
+
+.about-divider {
+  height: 1px;
+  background: #edebe9;
+  margin: 16px 0;
+}
+
+.about-company {
+  margin-bottom: 12px;
+}
+
+.about-company-name {
+  font-weight: 700 !important;
+}
+
+.about-company-sub {
+  color: #605e5c !important;
+}
+
+.about-address {
+  color: #605e5c;
+  line-height: 1.6;
+}
+
+.app-main {
+  padding: 16px 20px;
+}
+
+/* Profile List */
+.profile-list {
+  animation: fadeIn 0.2s ease;
+}
+
+.profile-card {
+  background: white;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.15s;
+}
+
+.profile-card:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.profile-name {
+  font-weight: 600;
+}
+
+.profile-details {
+  background: #f3f2f1;
+  border-radius: 4px;
+  padding: 10px 12px;
+}
+
+.profile-details .ms-Text {
+  margin-bottom: 2px;
+}
+
+.delete-btn {
+  color: #a4262c !important;
+}
+
+.delete-btn:hover {
+  background: #fde7e9 !important;
+}
+
+/* Profile Editor */
+.profile-editor {
+  animation: fadeIn 0.2s ease;
+}
+
+.section-title {
+  font-weight: 600;
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #edebe9;
+}
+
+/* Sync View */
+.sync-view {
+  animation: fadeIn 0.2s ease;
+}
+
+.sync-info {
+  background: #f3f2f1;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+.sync-log {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 250px;
+  overflow-y: auto;
+  font-family: "Cascadia Code", "Consolas", monospace;
+  font-size: 12px;
+}
+
+.log-line {
+  padding: 1px 0;
+  font-family: inherit !important;
+  color: #d4d4d4 !important;
+}
+
+.sync-result {
+  margin-top: 8px;
+}
+
+.result-stats {
+  background: white;
+  border: 1px solid #edebe9;
+  border-radius: 4px;
+  padding: 16px;
+  margin: 12px 0;
+  text-align: center;
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-number {
+  color: #0078d4;
+  font-weight: 700;
+  display: block;
+}
+
+.error-list {
+  margin: 12px 0;
+}
+
+.error-item {
+  margin-top: 4px;
+}
+
+.result-actions {
+  margin-top: 12px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c8c6c4;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a19f9d;
+}

src/taskpane/taskpane.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Starface Kontakt-Sync</title>
+  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>