diff --git a/go.mod b/go.mod index 2ea1d02..fbfae02 100644 --- a/go.mod +++ b/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 diff --git a/src/App.scss b/src/App.scss index e34f097..076184d 100644 --- a/src/App.scss +++ b/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 { diff --git a/src/App.tsx b/src/App.tsx index 310ad09..bc1d228 100644 --- a/src/App.tsx +++ b/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 (
- {children}
@@ -125,7 +123,7 @@ function Header() {
- Logged in as {username} + Logged in as {username} Logout diff --git a/src/components/directory/directory.scss b/src/components/directory/directory.scss index 109922d..09f88a2 100644 --- a/src/components/directory/directory.scss +++ b/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); diff --git a/src/components/directory/index.tsx b/src/components/directory/index.tsx index a68eb3d..efe7147 100644 --- a/src/components/directory/index.tsx +++ b/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 ( <>
+
Name diff --git a/src/components/file-view/fview.scss b/src/components/file-view/fview.scss index 006279f..1c463a5 100644 --- a/src/components/file-view/fview.scss +++ 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; } diff --git a/src/components/file-view/index.tsx b/src/components/file-view/index.tsx index e4e2c5f..1d8d5c4 100644 --- a/src/components/file-view/index.tsx +++ b/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 (
- + {path.data.path} {convert(path.data.total)} diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx index cafbdf3..b45884f 100644 --- a/src/components/navigation/index.tsx +++ b/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() : location.pathname.substring(1, location.pathname.length).split("/"); return ( -
- - Index Directory - +
+ {location.pathname === "/" ? ( + Index Directory + ) : ( + + Index Directory + + )} {split.map((path, i) => { - if (i === split.length - 1) { - return ( - - {path} - - ); - } + let route = ""; + split.forEach((str, j) => { + if (j > i) + return; + + route += `/${str}`; + }); return ( - - {path} - >> - + <> + > + {i === split.length - 1 ? ( +
+ {decodeURIComponent(path)} +
+ ) : ( + + {decodeURIComponent(path)} + + )} + ); })}
diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss new file mode 100644 index 0000000..3b36d96 --- /dev/null +++ b/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; + } +} diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx index 91aedb3..719dd71 100644 --- a/src/components/settings/index.tsx +++ b/src/components/settings/index.tsx @@ -35,10 +35,10 @@ function Settings() {

General

-

Private Directory

- -

Not provided features

- + {/*

Private Directory

*/} + {/* */} + {/* TODO: create private directory setting */} + {/* */}
); } diff --git a/src/components/settings/settings.scss b/src/components/settings/settings.scss index 2acb24f..7872ac1 100644 --- a/src/components/settings/settings.scss +++ b/src/components/settings/settings.scss @@ -11,6 +11,10 @@ width: 100%; } + .ka-desc { + color: var(--description-color); + } + .setting-box { width: 100%; display: flex; diff --git a/src/index.scss b/src/index.scss index 7358508..1efe3fe 100644 --- a/src/index.scss +++ b/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;