feat: brand-new interface (#158)

This was initally generated by ai, but later has been heavily edited.
The reason why it has been implemented is that there are plans to
implement more features to ui, but it becomes hard to add new features
to plain js, so I decided to rewrite it in typescript.

Yet because it is still ai slop, it is still possible to enable old
interface via configuration, even though new interface is turned on by
default to get feedback

frontend/src/contexts/AuthContext.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { createContext } from "react";
+
+interface AuthState {
+    enabled: boolean;
+    username: string | null;
+}
+
+export interface AuthContextValue extends AuthState {
+    isAuthorized: boolean;
+    setAuthState: (state: AuthState) => void;
+    login: (username: string, password: string) => Promise<void>;
+    logout: () => Promise<void>;
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null);

frontend/src/contexts/AuthProvider.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ApiError } from "api/client/ApiError";
+import { AuthContext } from "contexts/AuthContext";
+import { useClient } from "hooks/useClient";
+import { useNotification } from "hooks/useNotification";
+import React, { type ReactNode, useCallback, useMemo, useState } from "react";
+
+export function AuthProvider({ children }: { children: ReactNode }): React.JSX.Element {
+    const client = useClient();
+    const [authState, setAuthState] = useState({ enabled: true, username: null as string | null });
+    const { showError } = useNotification();
+
+    const login = useCallback(async (username: string, password: string) => {
+        await client.login({ username, password });
+        setAuthState(prev => ({ ...prev, username }));
+    }, [client]);
+
+    const logout = useCallback(async () => {
+        try {
+            await client.logout();
+            setAuthState(prev => ({ ...prev, username: null }));
+        } catch (exception) {
+            const detail = ApiError.errorDetail(exception);
+            showError("Login error", `Could not log out: ${detail}`);
+        }
+    }, [client, showError]);
+
+    const isAuthorized = useMemo(() =>
+        !authState.enabled || authState.username !== null, [authState.enabled, authState.username],
+    );
+
+    const value = useMemo(() => ({
+        ...authState, isAuthorized, setAuthState, login, logout,
+    }), [authState, isAuthorized, login, logout]);
+
+    return <AuthContext.Provider value={value}>
+        {children}
+    </AuthContext.Provider>;
+}

frontend/src/contexts/ClientContext.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import type { AhrimanClient } from "api/client/AhrimanClient";
+import { createContext } from "react";
+
+export const ClientContext = createContext<AhrimanClient | null>(null);

frontend/src/contexts/ClientProvider.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { AhrimanClient } from "api/client/AhrimanClient";
+import { ClientContext } from "contexts/ClientContext";
+import React, { type ReactNode, useMemo } from "react";
+
+export function ClientProvider({ children }: { children: ReactNode }): React.JSX.Element {
+    const client = useMemo(() => new AhrimanClient(), []);
+
+    return (
+        <ClientContext.Provider value={client}>
+            {children}
+        </ClientContext.Provider>
+    );
+}

frontend/src/contexts/NotificationContext.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { createContext } from "react";
+
+export interface NotificationContextValue {
+    showSuccess: (title: string, message: string) => void;
+    showError: (title: string, message: string) => void;
+}
+
+export const NotificationContext = createContext<NotificationContextValue | null>(null);

frontend/src/contexts/NotificationProvider.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type AlertColor, Box } from "@mui/material";
+import NotificationItem from "components/common/NotificationItem";
+import { NotificationContext } from "contexts/NotificationContext";
+import type { Notification } from "models/Notification";
+import React, { type ReactNode, useCallback, useMemo, useState } from "react";
+
+export function NotificationProvider({ children }: { children: ReactNode }): React.JSX.Element {
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+
+    const addNotification = useCallback((title: string, message: string, severity: AlertColor) => {
+        const id = `${severity}:${title}:${message}`;
+        setNotifications(prev => {
+            if (prev.some(notification => notification.id === id)) {
+                return prev;
+            }
+            return [...prev, { id, title, message, severity }];
+        });
+    }, []);
+
+    const removeNotification = useCallback((key: string) => {
+        setNotifications(prev => prev.filter(notification => notification.id !== key));
+    }, []);
+
+    const showSuccess = useCallback(
+        (title: string, message: string) => addNotification(title, message, "success"),
+        [addNotification],
+    );
+    const showError = useCallback(
+        (title: string, message: string) => addNotification(title, message, "error"),
+        [addNotification],
+    );
+
+    const value = useMemo(() => ({ showSuccess, showError }), [showSuccess, showError]);
+
+    return <NotificationContext.Provider value={value}>
+        {children}
+        <Box
+            sx={{
+                position: "fixed",
+                top: 16,
+                left: "50%",
+                transform: "translateX(-50%)",
+                zIndex: theme => theme.zIndex.snackbar,
+                display: "flex",
+                flexDirection: "column",
+                gap: 1,
+                maxWidth: 500,
+                width: "100%",
+                pointerEvents: "none",
+            }}
+        >
+            {notifications.map(notification =>
+                <NotificationItem key={notification.id} notification={notification} onClose={removeNotification} />,
+            )}
+        </Box>
+    </NotificationContext.Provider>;
+}

frontend/src/contexts/RepositoryContext.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import type { RepositoryId } from "models/RepositoryId";
+import { createContext } from "react";
+
+export interface RepositoryContextValue {
+    repositories: RepositoryId[];
+    current: RepositoryId | null;
+    setRepositories: (repositories: RepositoryId[]) => void;
+    setCurrent: (repository: RepositoryId) => void;
+}
+
+export const RepositoryContext = createContext<RepositoryContextValue | null>(null);

frontend/src/contexts/RepositoryProvider.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { RepositoryContext } from "contexts/RepositoryContext";
+import type { RepositoryId } from "models/RepositoryId";
+import React, { type ReactNode, useCallback, useMemo, useState, useSyncExternalStore } from "react";
+
+function subscribeToHash(callback: () => void): () => void {
+    window.addEventListener("hashchange", callback);
+    return () => window.removeEventListener("hashchange", callback);
+}
+
+function getHashSnapshot(): string {
+    return window.location.hash.replace("#", "");
+}
+
+export function RepositoryProvider({ children }: { children: ReactNode }): React.JSX.Element {
+    const [repositories, setRepositories] = useState<RepositoryId[]>([]);
+    const hash = useSyncExternalStore(subscribeToHash, getHashSnapshot);
+
+    const current = useMemo(() => {
+        if (repositories.length === 0) {
+            return null;
+        }
+        return repositories.find(repository => repository.key === hash) ?? repositories[0] ?? null;
+    }, [repositories, hash]);
+
+    const setCurrent = useCallback((repository: RepositoryId) => {
+        window.location.hash = repository.key;
+    }, []);
+
+    const value = useMemo(() => ({
+        repositories, current, setRepositories, setCurrent,
+    }), [repositories, current, setCurrent]);
+
+    return <RepositoryContext.Provider value={value}>{children}</RepositoryContext.Provider>;
+}