feat: add directory navigator

go.mod

@@ -7,6 +7,7 @@ require (
 	github.com/gin-contrib/static v1.1.3
 	github.com/gin-gonic/gin v1.10.0
 	github.com/mattn/go-sqlite3 v1.14.24
+	golang.org/x/term v0.30.0
 )
 
 require (
@@ -33,7 +34,6 @@ require (
 	golang.org/x/crypto v0.36.0 // indirect
 	golang.org/x/net v0.37.0 // indirect
 	golang.org/x/sys v0.31.0 // indirect
-	golang.org/x/term v0.30.0 // indirect
 	golang.org/x/text v0.23.0 // indirect
 	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect

src/App.scss

@@ -1,6 +1,17 @@
 .ka-view {
 	width: 100%;
 	height: 100%;
+
+	animation: fadeIn 0.3s ease-in-out;
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 }
 
 .ka-nav {
@@ -44,6 +55,12 @@
 			span {
 				margin-left: 10px;
 			}
+
+			.username {
+				@media (max-width: 640px) {
+					display: none;
+				}
+			}
 		}
 
 		.login-btn {

src/App.tsx

@@ -1,19 +1,18 @@
+import Login from "./components/login";
+import Logout from "./components/logout";
 import { useEffect, useState } from "react";
+import Settings from "./components/settings";
 import { useVersion } from "./store/version";
+import NotFound from "./components/notfound";
 import FileView from "./components/file-view";
 import Directory from "./components/directory";
 import { DirEntry, usePath } from "./store/path";
 import { DynamicIcon } from "lucide-react/dynamic";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router";
+import { AccountData, useAuthStore } from "./store/auth";
 
 import "./App.scss";
 import kuma from "./assets/kuma.png";
-import NotFound from "./components/notfound";
-import Login from "./components/login";
-import { AccountData, useAuthStore } from "./store/auth";
-import Logout from "./components/logout";
-import Settings from "./components/settings";
-import { FileNavigator } from "./components/navigation";
 
 function App() {
 	return (
@@ -32,7 +31,6 @@ function Dashboard({ children }: { children: React.ReactNode }) {
 	return (
 		<main className="container-md ka-view">
 			<Header />
-			<FileNavigator />
 			{children}
 			<Footer />
 		</main>
@@ -125,7 +123,7 @@ function Header() {
 							<DynamicIcon name="settings" size={15} />
 						</a>
 						<div className="login-info">
-							<span>Logged in as {username}</span>
+							<span className="username">Logged in as {username}</span>
 							<a className="login-btn" href="/logout">
 								Logout
 							</a>

src/components/directory/directory.scss

@@ -2,7 +2,6 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
-	margin-top: 1rem;
 	flex-direction: column;
 	border-bottom: 1px solid var(--foreground);
 

src/components/directory/index.tsx

@@ -6,6 +6,7 @@ import "./directory.scss";
 import Markdown from "react-markdown";
 import { Suspense, useEffect, useState } from "react";
 import { useLocation } from "react-router";
+import { FileNavigator } from "../navigation";
 
 function Directory() {
 	const path = usePath();
@@ -16,6 +17,7 @@ function Directory() {
 	return (
 		<>
 			<div className="ka-dir">
+				<FileNavigator />
 				<div className="ka-dir-row ka-dir-top">
 					<div className="ka-dir-item"></div>
 					<b className="ka-dir-item">Name</b>

src/components/file-view/fview.scss

@@ -5,21 +5,6 @@
 	flex-direction: column;
 	justify-content: center;
 
-	.action-row {
-		width: 100%;
-		display: flex;
-		align-items: center;
-
-		.link {
-			display: flex;
-			align-items: center;
-
-			span {
-				margin: 0.2rem 0;
-			}
-		}
-	}
-
 	#icon {
 		margin: 3.5rem 0;
 	}

src/components/file-view/index.tsx

@@ -5,6 +5,7 @@ import { usePath } from "../../store/path";
 import { DynamicIcon, IconName } from "lucide-react/dynamic";
 
 import "./fview.scss";
+import { FileNavigator } from "../navigation";
 
 function FileView() {
 	const path = usePath();
@@ -93,15 +94,7 @@ function FileView() {
 
 	return (
 		<div className="ka-fileview">
-			<div className="action-row">
-				<a className="link" onClick={ev => {
-					ev.preventDefault();
-					document.location.href = document.location.href.substring(0, document.location.href.lastIndexOf("/"));
-				}}>
-					<DynamicIcon name="chevron-left" />
-					<span>Back to directory</span>
-				</a>
-			</div>
+			<FileNavigator />
 			<DynamicIcon id="icon" name={type} size={120} />
 			<b>{path.data.path}</b>
 			{convert(path.data.total)}

src/components/navigation/index.tsx

@@ -1,28 +1,42 @@
 import { useLocation } from "react-router";
 
+import "./navigation.scss";
+
 export function FileNavigator() {
 	const location = useLocation();
 	const split = location.pathname === "/" ? Array<string>() : location.pathname.substring(1, location.pathname.length).split("/");
 
 	return (
-		<div>
-			<a href="/">
-				<span>Index Directory</span>
-			</a>
+		<div className="ka-navigator">
+			{location.pathname === "/" ? (
+				<span className="current">Index Directory</span>
+			) : (
+				<a href="/">
+					<span>Index Directory</span>
+				</a>
+			)}
 			{split.map((path, i) => {
-				if (i === split.length - 1) {
-					return (
-						<a key={i}>
-							<span>{path}</span>
-						</a>
-					);
-				}
+				let route = "";
+				split.forEach((str, j) => {
+					if (j > i)
+						return;
+
+					route += `/${str}`;
+				});
 
 				return (
-					<a key={i} href="">
-						<span>{path}</span>
-						<span>&gt;&gt;</span>
-					</a>
+					<>
+						<span className="heap">&gt;</span>
+						{i === split.length - 1 ? (
+							<div key={i}>
+								<span className="current">{decodeURIComponent(path)}</span>
+							</div>
+						) : (
+							<a key={i} href={route}>
+								<span>{decodeURIComponent(path)}</span>
+							</a>
+						)}
+					</>
 				);
 			})}
 		</div>

src/components/navigation/navigation.scss

@@ -0,0 +1,24 @@
+.ka-navigator {
+	width: 100%;
+	display: flex;
+	margin: 10px 0;
+	align-items: center;
+
+	.current {
+		color: var(--foreground);
+	}
+
+	* {
+		color: var(--description-color);
+		transition-duration: 0.3s;
+
+		&:hover {
+			color: var(--foreground);
+			transition-duration: 0.3s;
+		}
+	}
+
+	.heap {
+		margin: 0 0.5rem;
+	}
+}

src/components/settings/index.tsx

@@ -35,10 +35,10 @@ function Settings() {
 			<h2 className="ka-title">General</h2>
 			<AccountSetting auth={auth} />
 
-			<h2 className="ka-title">Private Directory</h2>
-			<SettingBox>
-				<h3>Not provided features</h3>
-			</SettingBox>
+			{/* <h2 className="ka-title">Private Directory</h2> */}
+			{/* <SettingBox> */}
+				{/* TODO: create private directory setting */}
+			{/* </SettingBox> */}
 		</div>
 	);
 }

src/components/settings/settings.scss

@@ -11,6 +11,10 @@
 		width: 100%;
 	}
 
+	.ka-desc {
+		color: var(--description-color);
+	}
+
 	.setting-box {
 		width: 100%;
 		display: flex;

src/index.scss

@@ -5,6 +5,7 @@
 	--background: #242424;
 	--foreground: rgba(255, 255, 255, 0.87);
 	--sidebar-color: #2a2a2a;
+	--description-color: #818181;
 
 	--stroke: #3c3c3c;
 	--nav-color: #191919;