Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 2x 2x 2x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x | import React, { useEffect, useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import Login from './components/Login';
import './App.css';
import { apiFetch } from './utils';
// Protected Route wrapper
function RequireAuth({ children }: { children: React.ReactElement }) {
const [auth, setAuth] = useState<boolean | null>(null);
const location = useLocation();
useEffect(() => {
apiFetch('/api/auth')
.then((res) => {
if (res.ok) {
setAuth(true);
} else E{
setAuth(false);
}
})
.catch(() => setAuth(false));
}, []);
if (auth === null) {
return <div>Loading...</div>;
}
Iif (!auth) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
return children;
}
import FeedList from './components/FeedList';
import FeedItems from './components/FeedItems';
import Settings from './components/Settings';
interface DashboardProps {
theme: string;
setTheme: (t: string) => void;
fontTheme: string;
setFontTheme: (t: string) => void;
}
function Dashboard({ theme, setTheme, fontTheme, setFontTheme }: DashboardProps) {
const [sidebarVisible, setSidebarVisible] = useState(window.innerWidth > 768);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 768) {
setSidebarVisible(true);
} else {
setSidebarVisible(false);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<div
className={`dashboard ${sidebarVisible ? 'sidebar-visible' : 'sidebar-hidden'} theme-${theme} font-${fontTheme}`}
>
<div className="dashboard-content">
{(!sidebarVisible || window.innerWidth <= 768) && (
<button
className="sidebar-toggle fixed-toggle"
onClick={() => setSidebarVisible(!sidebarVisible)}
title={sidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
>
🐱
</button>
)}
{sidebarVisible && (
<div
className="sidebar-backdrop"
onClick={() => setSidebarVisible(false)}
/>
)}
<aside className={`dashboard-sidebar ${sidebarVisible ? '' : 'hidden'}`}>
<FeedList
theme={theme}
setTheme={setTheme}
setSidebarVisible={setSidebarVisible}
isMobile={window.innerWidth <= 768}
/>
</aside>
<main className="dashboard-main">
<Routes>
<Route path="/feed/:feedId" element={<FeedItems />} />
<Route path="/tag/:tagName" element={<FeedItems />} />
<Route path="/settings" element={<Settings fontTheme={fontTheme} setFontTheme={setFontTheme} />} />
<Route path="/" element={<FeedItems />} />
</Routes>
</main>
</div>
</div>
);
}
function App() {
const [theme, setTheme] = useState(localStorage.getItem('neko-theme') || 'light');
const [fontTheme, setFontTheme] = useState(localStorage.getItem('neko-font-theme') || 'default');
const handleSetTheme = (newTheme: string) => {
setTheme(newTheme);
localStorage.setItem('neko-theme', newTheme);
};
const handleSetFontTheme = (newFontTheme: string) => {
setFontTheme(newFontTheme);
localStorage.setItem('neko-font-theme', newFontTheme);
};
const basename = window.location.pathname.startsWith('/v2') ? '/v2' : '/';
return (
<BrowserRouter basename={basename}>
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/*"
element={
<RequireAuth>
<Dashboard
theme={theme}
setTheme={handleSetTheme}
fontTheme={fontTheme}
setFontTheme={handleSetFontTheme}
/>
</RequireAuth>
}
/>
</Routes>
</BrowserRouter>
);
}
export default App;
|