Autocommit test+ui polish
This commit is contained in:
mixa
9
Makefile
9
Makefile
@@ -1,4 +1,4 @@
|
||||
.PHONY: build-all frontend-build sync-web backend-build run-all up down run-local run-backend run-frontend clean
|
||||
.PHONY: build-all frontend-build sync-web backend-build run-all up down run-local run-backend run-frontend auto-commit push clean
|
||||
|
||||
build-all: frontend-build sync-web backend-build
|
||||
|
||||
@@ -33,5 +33,12 @@ run-backend:
|
||||
run-frontend:
|
||||
bun --cwd frontend dev
|
||||
|
||||
auto-commit:
|
||||
git add -A
|
||||
git commit -m "$(if $(MSG),$(MSG),chore: auto commit $$(date '+%Y-%m-%d %H:%M:%S'))"
|
||||
|
||||
push:
|
||||
git push $(if $(REMOTE),$(REMOTE),origin) $(if $(BRANCH),$(BRANCH),$$(git branch --show-current))
|
||||
|
||||
clean:
|
||||
rm -rf dist backend/web/dist frontend/dist
|
||||
|
||||
@@ -21,7 +21,7 @@ Drive-like app with Go backend + Bun/React frontend.
|
||||
- UI uses Radix-based components (shadcn-style wrappers)
|
||||
- Auto language detection with English/Russian translations
|
||||
- Optional per-user FTP and FTPS access (same FileZ usernames/passwords)
|
||||
- Optional Google OAuth login (auto-provisions user on first sign-in)
|
||||
- Optional Google OAuth login (auto-provisions user on first sign-in or links to existing signed-in user)
|
||||
|
||||
## Task-style commands
|
||||
|
||||
|
||||
@@ -203,6 +203,7 @@ func main() {
|
||||
protected.Use(s.authMiddleware)
|
||||
protected.HandleFunc("/auth/me", s.handleMe).Methods(http.MethodGet)
|
||||
protected.HandleFunc("/user/preferences", s.handleSetPreferences).Methods(http.MethodPost)
|
||||
protected.HandleFunc("/user/google/link/start", s.handleGoogleLinkStart).Methods(http.MethodGet)
|
||||
protected.HandleFunc("/user/protocols", s.handleUserProtocols).Methods(http.MethodGet)
|
||||
protected.HandleFunc("/files", s.handleListFiles).Methods(http.MethodGet)
|
||||
protected.HandleFunc("/files/upload", s.handleUpload).Methods(http.MethodPost)
|
||||
|
||||
@@ -8,9 +8,14 @@ import (
|
||||
"net/http"
|
||||
"net/url"
|
||||
"strings"
|
||||
|
||||
"github.com/golang-jwt/jwt/v5"
|
||||
)
|
||||
|
||||
const googleOAuthStateCookie = "google_oauth_state"
|
||||
const (
|
||||
googleOAuthLoginStateCookie = "google_oauth_state"
|
||||
googleOAuthLinkStateCookie = "google_oauth_link_state"
|
||||
)
|
||||
|
||||
type googleTokenResponse struct {
|
||||
AccessToken string `json:"access_token"`
|
||||
@@ -33,7 +38,39 @@ func (s *Server) handleGoogleAuthStart(w http.ResponseWriter, r *http.Request) {
|
||||
writeErr(w, http.StatusInternalServerError, "failed to initialize oauth")
|
||||
return
|
||||
}
|
||||
setCookie(w, googleOAuthStateCookie, state, 600, s.config.CookieSecure)
|
||||
setCookie(w, googleOAuthLoginStateCookie, state, 600, s.config.CookieSecure)
|
||||
clearCookie(w, googleOAuthLinkStateCookie, s.config.CookieSecure)
|
||||
|
||||
u, err := url.Parse(s.config.GoogleAuthURL)
|
||||
if err != nil {
|
||||
writeErr(w, http.StatusInternalServerError, "invalid google auth config")
|
||||
return
|
||||
}
|
||||
q := u.Query()
|
||||
q.Set("client_id", strings.TrimSpace(s.config.GoogleClientID))
|
||||
q.Set("redirect_uri", s.googleRedirectURL(r))
|
||||
q.Set("response_type", "code")
|
||||
q.Set("scope", "openid email profile")
|
||||
q.Set("state", state)
|
||||
q.Set("prompt", "select_account")
|
||||
u.RawQuery = q.Encode()
|
||||
|
||||
http.Redirect(w, r, u.String(), http.StatusFound)
|
||||
}
|
||||
|
||||
func (s *Server) handleGoogleLinkStart(w http.ResponseWriter, r *http.Request) {
|
||||
if !s.config.GoogleAuthEnabled {
|
||||
writeErr(w, http.StatusNotFound, "google auth is disabled")
|
||||
return
|
||||
}
|
||||
|
||||
state, err := randomToken()
|
||||
if err != nil {
|
||||
writeErr(w, http.StatusInternalServerError, "failed to initialize oauth")
|
||||
return
|
||||
}
|
||||
setCookie(w, googleOAuthLinkStateCookie, state, 600, s.config.CookieSecure)
|
||||
clearCookie(w, googleOAuthLoginStateCookie, s.config.CookieSecure)
|
||||
|
||||
u, err := url.Parse(s.config.GoogleAuthURL)
|
||||
if err != nil {
|
||||
@@ -70,12 +107,11 @@ func (s *Server) handleGoogleAuthCallback(w http.ResponseWriter, r *http.Request
|
||||
}
|
||||
|
||||
state := strings.TrimSpace(r.URL.Query().Get("state"))
|
||||
stateCookie, err := r.Cookie(googleOAuthStateCookie)
|
||||
if err != nil || stateCookie == nil || stateCookie.Value == "" || subtleConstantTimeEq(stateCookie.Value, state) == 0 {
|
||||
flow, uid, ok := s.resolveGoogleOAuthFlow(w, r, state)
|
||||
if !ok {
|
||||
writeErr(w, http.StatusUnauthorized, "invalid oauth state")
|
||||
return
|
||||
}
|
||||
clearCookie(w, googleOAuthStateCookie, s.config.CookieSecure)
|
||||
|
||||
token, err := s.exchangeGoogleCode(r.Context(), code, s.googleRedirectURL(r))
|
||||
if err != nil {
|
||||
@@ -91,6 +127,17 @@ func (s *Server) handleGoogleAuthCallback(w http.ResponseWriter, r *http.Request
|
||||
return
|
||||
}
|
||||
|
||||
if flow == "link" {
|
||||
if err := s.linkGoogleSubToUser(uid, info.Sub); err != nil {
|
||||
log.Printf("auth.google.failed ip=%q reason=%q", clientIP(r), "user_link_failed")
|
||||
writeErr(w, http.StatusUnauthorized, "google account link failed")
|
||||
return
|
||||
}
|
||||
log.Printf("auth.google.linked user_id=%d ip=%q", uid, clientIP(r))
|
||||
http.Redirect(w, r, "/drive", http.StatusFound)
|
||||
return
|
||||
}
|
||||
|
||||
user, err := s.findOrCreateGoogleUser(info.Sub, info.Email)
|
||||
if err != nil {
|
||||
log.Printf("auth.google.failed ip=%q reason=%q", clientIP(r), "user_provision_failed")
|
||||
@@ -108,6 +155,83 @@ func (s *Server) handleGoogleAuthCallback(w http.ResponseWriter, r *http.Request
|
||||
http.Redirect(w, r, "/drive", http.StatusFound)
|
||||
}
|
||||
|
||||
func (s *Server) resolveGoogleOAuthFlow(w http.ResponseWriter, r *http.Request, state string) (string, int64, bool) {
|
||||
state = strings.TrimSpace(state)
|
||||
if state == "" {
|
||||
return "", 0, false
|
||||
}
|
||||
|
||||
if linkCookie, err := r.Cookie(googleOAuthLinkStateCookie); err == nil && linkCookie != nil && linkCookie.Value != "" {
|
||||
if subtleConstantTimeEq(linkCookie.Value, state) == 1 {
|
||||
clearCookie(w, googleOAuthLinkStateCookie, s.config.CookieSecure)
|
||||
uid, uidErr := s.userIDFromAccessCookie(r)
|
||||
if uidErr != nil {
|
||||
return "", 0, false
|
||||
}
|
||||
return "link", uid, true
|
||||
}
|
||||
}
|
||||
|
||||
if loginCookie, err := r.Cookie(googleOAuthLoginStateCookie); err == nil && loginCookie != nil && loginCookie.Value != "" {
|
||||
if subtleConstantTimeEq(loginCookie.Value, state) == 1 {
|
||||
clearCookie(w, googleOAuthLoginStateCookie, s.config.CookieSecure)
|
||||
return "login", 0, true
|
||||
}
|
||||
}
|
||||
|
||||
return "", 0, false
|
||||
}
|
||||
|
||||
func (s *Server) userIDFromAccessCookie(r *http.Request) (int64, error) {
|
||||
cookie, err := r.Cookie("access_token")
|
||||
if err != nil || cookie == nil || cookie.Value == "" {
|
||||
return 0, fmt.Errorf("missing access token")
|
||||
}
|
||||
|
||||
claims := &AccessClaims{}
|
||||
tkn, err := jwt.ParseWithClaims(cookie.Value, claims, func(token *jwt.Token) (any, error) {
|
||||
if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
|
||||
return nil, fmt.Errorf("unexpected signing method")
|
||||
}
|
||||
return []byte(s.config.JWTSecret), nil
|
||||
})
|
||||
if err != nil || !tkn.Valid {
|
||||
return 0, fmt.Errorf("invalid access token")
|
||||
}
|
||||
if claims.UserID <= 0 {
|
||||
return 0, fmt.Errorf("invalid access token claims")
|
||||
}
|
||||
return claims.UserID, nil
|
||||
}
|
||||
|
||||
func (s *Server) linkGoogleSubToUser(userID int64, googleSub string) error {
|
||||
googleSub = strings.TrimSpace(googleSub)
|
||||
if userID <= 0 || googleSub == "" {
|
||||
return fmt.Errorf("invalid link request")
|
||||
}
|
||||
|
||||
if _, err := s.findUser(userID); err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
if existing, err := s.findUserByGoogleSub(googleSub); err == nil {
|
||||
if existing.ID != userID {
|
||||
return fmt.Errorf("google account already linked")
|
||||
}
|
||||
return nil
|
||||
} else if !isNoRows(err) {
|
||||
return err
|
||||
}
|
||||
|
||||
if err := s.orm.updateGoogleSub(userID, googleSub); err != nil {
|
||||
if strings.Contains(strings.ToLower(err.Error()), "unique") {
|
||||
return fmt.Errorf("google account already linked")
|
||||
}
|
||||
return err
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func (s *Server) googleRedirectURL(r *http.Request) string {
|
||||
if v := strings.TrimSpace(s.config.GoogleRedirectURL); v != "" {
|
||||
return v
|
||||
|
||||
@@ -60,7 +60,7 @@ func TestGoogleOAuthCallbackCreatesSessionAndUser(t *testing.T) {
|
||||
if startRec.Code != http.StatusFound {
|
||||
t.Fatalf("start status = %d, want %d", startRec.Code, http.StatusFound)
|
||||
}
|
||||
stateCookie := cookieByName(startRec.Result().Cookies(), googleOAuthStateCookie)
|
||||
stateCookie := cookieByName(startRec.Result().Cookies(), googleOAuthLoginStateCookie)
|
||||
if stateCookie == nil || stateCookie.Value == "" {
|
||||
t.Fatal("missing oauth state cookie")
|
||||
}
|
||||
@@ -106,3 +106,84 @@ func TestGoogleOAuthCallbackCreatesSessionAndUser(t *testing.T) {
|
||||
t.Fatalf("google_sub = %q, want %q", googleSub, "google-sub-1")
|
||||
}
|
||||
}
|
||||
|
||||
func TestGoogleOAuthCallbackLinksGoogleToExistingUser(t *testing.T) {
|
||||
t.Parallel()
|
||||
|
||||
mux := http.NewServeMux()
|
||||
provider := httptest.NewServer(mux)
|
||||
defer provider.Close()
|
||||
|
||||
mux.HandleFunc("/token", func(w http.ResponseWriter, _ *http.Request) {
|
||||
_ = json.NewEncoder(w).Encode(map[string]any{"access_token": "google-link-token"})
|
||||
})
|
||||
|
||||
mux.HandleFunc("/userinfo", func(w http.ResponseWriter, _ *http.Request) {
|
||||
_ = json.NewEncoder(w).Encode(map[string]any{
|
||||
"sub": "google-sub-link-1",
|
||||
"email": "other@example.com",
|
||||
"email_verified": true,
|
||||
})
|
||||
})
|
||||
|
||||
s := makeTestServer(t, func(cfg *Config) {
|
||||
cfg.GoogleAuthEnabled = true
|
||||
cfg.GoogleClientID = "client-id"
|
||||
cfg.GoogleClientSecret = "client-secret"
|
||||
cfg.GoogleAuthURL = provider.URL + "/auth"
|
||||
cfg.GoogleTokenURL = provider.URL + "/token"
|
||||
cfg.GoogleUserInfoURL = provider.URL + "/userinfo"
|
||||
})
|
||||
|
||||
user, err := s.createUser("alice", "password123", "dracula", "auto")
|
||||
if err != nil {
|
||||
t.Fatalf("create user failed: %v", err)
|
||||
}
|
||||
|
||||
loginReq := httptest.NewRequest(http.MethodGet, "/api/auth/login-link", nil)
|
||||
loginRec := httptest.NewRecorder()
|
||||
if err := s.issueUserSession(loginRec, loginReq, user.ID); err != nil {
|
||||
t.Fatalf("issueUserSession failed: %v", err)
|
||||
}
|
||||
accessCookie := cookieByName(loginRec.Result().Cookies(), "access_token")
|
||||
if accessCookie == nil || accessCookie.Value == "" {
|
||||
t.Fatal("missing access cookie")
|
||||
}
|
||||
|
||||
startReq := httptest.NewRequest(http.MethodGet, "/api/user/google/link/start", nil)
|
||||
startReq.Host = "file.example.com"
|
||||
startReq.AddCookie(accessCookie)
|
||||
startRec := httptest.NewRecorder()
|
||||
s.handleGoogleLinkStart(startRec, startReq)
|
||||
|
||||
if startRec.Code != http.StatusFound {
|
||||
t.Fatalf("link start status = %d, want %d", startRec.Code, http.StatusFound)
|
||||
}
|
||||
stateCookie := cookieByName(startRec.Result().Cookies(), googleOAuthLinkStateCookie)
|
||||
if stateCookie == nil || stateCookie.Value == "" {
|
||||
t.Fatal("missing link state cookie")
|
||||
}
|
||||
|
||||
cbReq := httptest.NewRequest(http.MethodGet, "/api/auth/google/callback?code=ok-code&state="+url.QueryEscape(stateCookie.Value), nil)
|
||||
cbReq.Host = "file.example.com"
|
||||
cbReq.AddCookie(stateCookie)
|
||||
cbReq.AddCookie(accessCookie)
|
||||
cbRec := httptest.NewRecorder()
|
||||
s.handleGoogleAuthCallback(cbRec, cbReq)
|
||||
|
||||
if cbRec.Code != http.StatusFound {
|
||||
t.Fatalf("callback status = %d, want %d", cbRec.Code, http.StatusFound)
|
||||
}
|
||||
if got := cbRec.Header().Get("Location"); got != "/drive" {
|
||||
t.Fatalf("callback redirect = %q, want %q", got, "/drive")
|
||||
}
|
||||
|
||||
var googleSub string
|
||||
err = s.db.QueryRow(`SELECT COALESCE(google_sub, '') FROM users WHERE id = ?`, user.ID).Scan(&googleSub)
|
||||
if err != nil {
|
||||
t.Fatalf("query user google_sub failed: %v", err)
|
||||
}
|
||||
if strings.TrimSpace(googleSub) != "google-sub-link-1" {
|
||||
t.Fatalf("google_sub = %q, want %q", googleSub, "google-sub-link-1")
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ import { Tabs, TabsList, TabsTrigger } from './components/ui/tabs'
|
||||
import { Textarea } from './components/ui/textarea'
|
||||
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from './components/ui/context-menu'
|
||||
|
||||
type Theme = 'dracula' | 'nord' | 'monokai' | 'solarized' | 'github'
|
||||
type Theme = 'dracula' | 'nord' | 'monokai' | 'solarized' | 'github' | 'bureau'
|
||||
type ColorMode = 'auto' | 'light' | 'dark'
|
||||
type Lang = 'en' | 'ru' | 'de'
|
||||
type Route = 'landing' | 'drive' | 'admin'
|
||||
@@ -63,7 +63,7 @@ function resolveModuleValue<T>(mod: unknown): T | null {
|
||||
return (firstFn as T | undefined) ?? null
|
||||
}
|
||||
|
||||
const themeOptions: Theme[] = ['dracula', 'nord', 'monokai', 'solarized', 'github']
|
||||
const themeOptions: Theme[] = ['dracula', 'nord', 'monokai', 'solarized', 'github', 'bureau']
|
||||
const modeOptions: ColorMode[] = ['auto', 'light', 'dark']
|
||||
const archiveOptions: ArchiveFormat[] = ['zip', 'rar', 'tar.gz', 'lz4']
|
||||
const shareTTLPresets: Array<{ value: string; label: string }> = [
|
||||
@@ -93,6 +93,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
configuredFromEnv: 'Admin credentials are configured in backend environment.',
|
||||
signIn: 'Sign in',
|
||||
signInGoogle: 'Continue with Google',
|
||||
linkGoogle: 'Link Google account',
|
||||
signInAdmin: 'Sign in as admin',
|
||||
loading: 'Loading',
|
||||
username: 'Username',
|
||||
@@ -116,6 +117,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
limit: 'Max downloads (blank = unlimited)',
|
||||
accountSubtitle: 'Workspace',
|
||||
settings: 'Settings',
|
||||
language: 'Language',
|
||||
theme: 'Color scheme',
|
||||
mode: 'Mode',
|
||||
archiveFormat: 'Folder download format',
|
||||
@@ -128,6 +130,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
monokai: 'Monokai',
|
||||
solarized: 'Solarized',
|
||||
github: 'GitHub',
|
||||
bureau: 'Bureau',
|
||||
search: 'Search in this folder',
|
||||
items: 'items',
|
||||
empty: 'No files in this folder',
|
||||
@@ -179,6 +182,14 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
optional: 'optional',
|
||||
useAccountPassword: 'Use your account password',
|
||||
copyUri: 'Copy URI',
|
||||
all: 'all',
|
||||
shellTagline: 'Private storage, sharing, and admin controls in one interface.',
|
||||
controlNode: 'Control node',
|
||||
authFeatureDesc: 'Hardened authentication and session handling.',
|
||||
storageFeatureDesc: 'Private storage lanes for each account.',
|
||||
shareFeatureDesc: 'Expiring links with resumable downloads.',
|
||||
remoteAccessDesc: 'Direct transfer access for desktop clients.',
|
||||
controlSurface: 'FileZ control surface',
|
||||
},
|
||||
de: {
|
||||
brand: 'FileZ',
|
||||
@@ -194,6 +205,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
configuredFromEnv: 'Admin-Zugangsdaten werden im Backend-Environment konfiguriert.',
|
||||
signIn: 'Anmelden',
|
||||
signInGoogle: 'Mit Google fortfahren',
|
||||
linkGoogle: 'Google-Konto verknupfen',
|
||||
signInAdmin: 'Als Admin anmelden',
|
||||
loading: 'Laden',
|
||||
username: 'Benutzername',
|
||||
@@ -217,6 +229,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
limit: 'Max. Downloads (leer = unbegrenzt)',
|
||||
accountSubtitle: 'Arbeitsbereich',
|
||||
settings: 'Einstellungen',
|
||||
language: 'Sprache',
|
||||
theme: 'Farbschema',
|
||||
mode: 'Modus',
|
||||
archiveFormat: 'Format fur Ordner-Download',
|
||||
@@ -229,6 +242,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
monokai: 'Monokai',
|
||||
solarized: 'Solarized',
|
||||
github: 'GitHub',
|
||||
bureau: 'Bureau',
|
||||
search: 'In diesem Ordner suchen',
|
||||
items: 'Elemente',
|
||||
empty: 'Keine Dateien in diesem Ordner',
|
||||
@@ -280,6 +294,14 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
optional: 'optional',
|
||||
useAccountPassword: 'Verwende dein Kontopasswort',
|
||||
copyUri: 'URI kopieren',
|
||||
all: 'alle',
|
||||
shellTagline: 'Private Speicherung, Freigaben und Admin-Steuerung in einer Oberflache.',
|
||||
controlNode: 'Kontrollknoten',
|
||||
authFeatureDesc: 'Geharte Authentifizierung und Sitzungsverwaltung.',
|
||||
storageFeatureDesc: 'Private Speicherbereiche fur jedes Konto.',
|
||||
shareFeatureDesc: 'Ablaufende Links mit fortsetzbaren Downloads.',
|
||||
remoteAccessDesc: 'Direkter Transferzugang fur Desktop-Clients.',
|
||||
controlSurface: 'FileZ Kontrolloberflache',
|
||||
},
|
||||
ru: {
|
||||
brand: 'FileZ',
|
||||
@@ -295,6 +317,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
configuredFromEnv: 'Данные администратора задаются в окружении backend.',
|
||||
signIn: 'Войти',
|
||||
signInGoogle: 'Продолжить через Google',
|
||||
linkGoogle: 'Привязать Google аккаунт',
|
||||
signInAdmin: 'Войти как админ',
|
||||
loading: 'Загрузка',
|
||||
username: 'Логин',
|
||||
@@ -318,6 +341,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
limit: 'Макс. скачиваний (пусто = без лимита)',
|
||||
accountSubtitle: 'Рабочее пространство',
|
||||
settings: 'Настройки',
|
||||
language: 'Язык',
|
||||
theme: 'Цветовая схема',
|
||||
mode: 'Режим',
|
||||
archiveFormat: 'Формат скачивания папок',
|
||||
@@ -330,6 +354,7 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
monokai: 'Monokai',
|
||||
solarized: 'Solarized',
|
||||
github: 'GitHub',
|
||||
bureau: 'Bureau',
|
||||
search: 'Поиск в текущей папке',
|
||||
items: 'объектов',
|
||||
empty: 'В этой папке нет файлов',
|
||||
@@ -381,6 +406,14 @@ const dict: Record<Lang, Record<string, string>> = {
|
||||
optional: 'опционально',
|
||||
useAccountPassword: 'Используйте пароль аккаунта',
|
||||
copyUri: 'Копировать URI',
|
||||
all: 'все',
|
||||
shellTagline: 'Приватное хранилище, шаринг и админ-панель в одном интерфейсе.',
|
||||
controlNode: 'Контрольный узел',
|
||||
authFeatureDesc: 'Защищенная аутентификация и управление сессиями.',
|
||||
storageFeatureDesc: 'Приватные зоны хранения для каждого аккаунта.',
|
||||
shareFeatureDesc: 'Ссылки с истечением срока и докачкой.',
|
||||
remoteAccessDesc: 'Прямой доступ для настольных клиентов.',
|
||||
controlSurface: 'Контрольная панель FileZ',
|
||||
},
|
||||
}
|
||||
|
||||
@@ -502,6 +535,29 @@ function KindIcon({ file }: { file: FileEntry }) {
|
||||
return <FileIcon className="h-4 w-4 text-slate-500" />
|
||||
}
|
||||
|
||||
function GoogleIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className={className} aria-hidden="true">
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M21.805 10.023h-9.18v3.955h5.273c-.227 1.248-.91 2.307-1.94 3.018v2.504h3.128c1.83-1.684 2.847-4.168 2.847-7.477 0-.684-.061-1.342-.128-2z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M12.625 22c2.565 0 4.712-.85 6.283-2.304l-3.128-2.504c-.868.582-1.979.927-3.155.927-2.427 0-4.483-1.64-5.219-3.847H4.175v2.574A9.498 9.498 0 0 0 12.625 22z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M7.406 14.272A5.71 5.71 0 0 1 7.114 12c0-.788.136-1.552.292-2.272V7.154H4.175A9.498 9.498 0 0 0 3.114 12c0 1.733.414 3.372 1.061 4.846l3.231-2.574z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12.625 5.88c1.396 0 2.648.48 3.636 1.422l2.726-2.726C17.33 3.033 15.183 2 12.625 2a9.498 9.498 0 0 0-8.45 5.154l3.231 2.574c.736-2.207 2.792-3.848 5.219-3.848z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
async function api<T>(url: string, init?: RequestInit, allowRefresh = true): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
credentials: 'include',
|
||||
@@ -870,6 +926,10 @@ export default function App() {
|
||||
window.location.href = '/api/auth/google/start'
|
||||
}
|
||||
|
||||
function linkGoogleAccount() {
|
||||
window.location.href = '/api/user/google/link/start'
|
||||
}
|
||||
|
||||
async function upload(list: FileList | null, useRelative = false) {
|
||||
if (!list?.length) return
|
||||
const junkNames = new Set(['.ds_store', 'thumbs.db', 'desktop.ini'])
|
||||
@@ -1155,6 +1215,8 @@ export default function App() {
|
||||
return out
|
||||
}, [visibleFiles])
|
||||
|
||||
const routeLabel = route === 'admin' ? '/admin' : route === 'drive' ? '/drive' : '/'
|
||||
|
||||
function selectVisibleRange(toPath: string, keepExisting = true) {
|
||||
const anchor = selectionAnchorPath || toPath
|
||||
const fromIdx = visiblePathIndex[anchor]
|
||||
@@ -1177,79 +1239,94 @@ export default function App() {
|
||||
}
|
||||
|
||||
const authLoadingCard = (
|
||||
<Card className="control-shell mx-auto max-w-md bg-card/95">
|
||||
<CardContent className="flex min-h-[220px] flex-col items-center justify-center gap-3 p-6">
|
||||
<div className="h-9 w-9 animate-spin border-2 border-border border-t-primary" aria-hidden="true" />
|
||||
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{t('loading')}...</p>
|
||||
<Card className="control-shell mx-auto max-w-md overflow-hidden bg-card/95">
|
||||
<CardContent className="flex min-h-[280px] flex-col items-center justify-center gap-4 p-10">
|
||||
<div className="h-12 w-12 animate-spin border-[3px] border-border border-t-primary" aria-hidden="true" />
|
||||
<p className="text-xs font-black uppercase tracking-[0.22em] text-muted-foreground">{t('loading')}...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen overflow-hidden p-4 md:p-6">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,transparent_0%,hsl(var(--primary)/0.06)_100%)]" />
|
||||
<div className="pointer-events-none absolute inset-0 opacity-30 [background:repeating-linear-gradient(0deg,transparent_0,transparent_2px,hsla(0,0%,100%,0.03)_3px)]" />
|
||||
const driveScrollLocked = route === 'drive' && Boolean(user)
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-[1660px] space-y-5">
|
||||
<Card className="control-shell border-primary/35 bg-card/95">
|
||||
<CardContent className="flex flex-wrap items-center justify-between gap-3 p-4 md:p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="border-2 border-primary bg-primary/15 p-2 text-primary"><HardDriveUpload className="h-5 w-5" /></div>
|
||||
<div>
|
||||
<p className="font-display text-lg font-semibold">{t('brand')}</p>
|
||||
<p className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">{route === 'admin' ? '/admin' : route === 'drive' ? '/drive' : '/'}</p>
|
||||
return (
|
||||
<main className={`relative overflow-hidden p-4 md:p-6 ${driveScrollLocked ? 'h-screen' : 'min-h-screen'}`}>
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary)/0.14),transparent_36%)]" />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,hsl(var(--surface-pop)/0.1),transparent_34%)]" />
|
||||
|
||||
<div className={`relative z-10 mx-auto max-w-[1880px] ${driveScrollLocked ? 'flex h-full flex-col gap-6' : 'space-y-6'}`}>
|
||||
<Card className="control-shell overflow-hidden bg-card/95">
|
||||
<CardContent className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center border-[3px] border-border bg-primary text-primary-foreground shadow-[6px_6px_0_hsl(var(--shadow-strong))]">
|
||||
<HardDriveUpload className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-display text-4xl">{t('brand')}</p>
|
||||
<p className="max-w-3xl text-sm font-semibold uppercase tracking-[0.16em] text-muted-foreground">
|
||||
{t('shellTagline')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Tabs value={route === 'landing' ? 'drive' : route} onValueChange={(v) => navigate(v as Route)}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="drive">{t('drive')}</TabsTrigger>
|
||||
<TabsTrigger value="admin">{t('admin')}</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
{user ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setSettingsOpen(true)}>
|
||||
<Settings2 className="mr-1 h-4 w-4" /> {t('settings')}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-[54px] w-[54px] shrink-0 p-0 shadow-[6px_6px_0_hsl(var(--shadow-strong))]"
|
||||
onClick={() => setSettingsOpen(true)}
|
||||
aria-label={t('settings')}
|
||||
title={t('settings')}
|
||||
>
|
||||
<Settings2 className="h-5 w-5" />
|
||||
</Button>
|
||||
) : null}
|
||||
<Select value={lang} onValueChange={(v) => setLang(v as Lang)}>
|
||||
<SelectTrigger className="w-[88px]"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">EN</SelectItem>
|
||||
<SelectItem value="de">DE</SelectItem>
|
||||
<SelectItem value="ru">RU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{err ? <Card className="control-shell border-destructive/60"><CardContent className="p-3 text-sm font-medium uppercase tracking-wide text-destructive">{err}</CardContent></Card> : null}
|
||||
{err ? <Card className="control-shell overflow-hidden border-destructive bg-card/95"><CardContent className="p-4 text-sm font-black uppercase tracking-[0.16em] text-destructive">{err}</CardContent></Card> : null}
|
||||
|
||||
{user ? (
|
||||
<Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('settings')}</DialogTitle>
|
||||
<DialogDescription>{user.username}</DialogDescription>
|
||||
<DialogDescription>{user ? user.username : t('shellTagline')}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="mb-1 text-xs text-muted-foreground">{t('theme')}</p>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('language')}</p>
|
||||
<Select value={lang} onValueChange={(v) => setLang(v as Lang)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
<SelectItem value="de">Deutsch</SelectItem>
|
||||
<SelectItem value="ru">Русский</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{user ? (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('theme')}</p>
|
||||
<Select value={user.theme} onValueChange={(v) => void savePref(v as Theme, user.colorMode, user.archiveFormat)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{themeOptions.map((opt) => <SelectItem key={opt} value={opt}>{t(opt)}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-xs text-muted-foreground">{t('mode')}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('mode')}</p>
|
||||
<Select value={user.colorMode} onValueChange={(v) => void savePref(user.theme, v as ColorMode, user.archiveFormat)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{modeOptions.map((opt) => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-xs text-muted-foreground">{t('archiveFormat')}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('archiveFormat')}</p>
|
||||
<Select value={user.archiveFormat} onValueChange={(v) => void savePref(user.theme, user.colorMode, v as ArchiveFormat)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -1261,10 +1338,10 @@ export default function App() {
|
||||
</Select>
|
||||
</div>
|
||||
{protocolInfo?.ftp || protocolInfo?.ftps ? (
|
||||
<div className="space-y-2 rounded-lg border bg-muted/40 p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{t('remoteAccess')}</p>
|
||||
<div className="brutal-block space-y-3 p-3">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('remoteAccess')}</p>
|
||||
{protocolInfo.ftp ? (
|
||||
<div className="space-y-1 rounded-md border bg-background p-2 text-xs">
|
||||
<div className="border-[3px] border-border bg-background p-3 text-xs shadow-[4px_4px_0_hsl(var(--shadow-strong))]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">{t('ftpAccess')}</p>
|
||||
<Button size="sm" variant="ghost" className="h-7 px-2" onClick={() => void navigator.clipboard.writeText(protocolURI('ftp', protocolInfo.ftp as ProtocolProfile))}>
|
||||
@@ -1279,7 +1356,7 @@ export default function App() {
|
||||
</div>
|
||||
) : null}
|
||||
{protocolInfo.ftps ? (
|
||||
<div className="space-y-1 rounded-md border bg-background p-2 text-xs">
|
||||
<div className="border-[3px] border-border bg-background p-3 text-xs shadow-[4px_4px_0_hsl(var(--shadow-strong))]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">{t('ftpsAccess')}</p>
|
||||
<Button size="sm" variant="ghost" className="h-7 px-2" onClick={() => void navigator.clipboard.writeText(protocolURI('ftps', protocolInfo.ftps as ProtocolProfile))}>
|
||||
@@ -1295,8 +1372,21 @@ export default function App() {
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="h-10 w-10 shrink-0 p-0"
|
||||
onClick={linkGoogleAccount}
|
||||
aria-label={t('linkGoogle')}
|
||||
title={t('linkGoogle')}
|
||||
>
|
||||
<GoogleIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-10 px-3 sm:ml-auto"
|
||||
onClick={() => {
|
||||
setSettingsOpen(false)
|
||||
void api('/api/auth/logout', { method: 'POST' }).then(() => {
|
||||
@@ -1308,51 +1398,91 @@ export default function App() {
|
||||
<LogOut className="mr-2 h-4 w-4" />{t('logout')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
|
||||
{route === 'landing' ? (
|
||||
<section className="grid gap-4 lg:grid-cols-[1.35fr_1fr]">
|
||||
<Card className="control-shell border-primary/40 bg-[linear-gradient(135deg,hsl(var(--card))_0%,hsl(var(--card)/0.8)_55%,hsl(var(--primary)/0.18)_100%)]">
|
||||
<CardHeader className="space-y-4">
|
||||
<Badge variant="secondary" className="w-fit border border-border bg-muted/30 uppercase tracking-[0.14em]">Control Node</Badge>
|
||||
<CardTitle className="font-display max-w-2xl text-3xl leading-tight md:text-6xl">{t('heroTitle')}</CardTitle>
|
||||
<CardDescription className="max-w-xl text-base text-muted-foreground md:text-lg">{t('heroDesc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex gap-2">
|
||||
<section className="grid gap-6 xl:grid-cols-[minmax(0,1.28fr)_420px]">
|
||||
<Card className="control-shell overflow-hidden bg-card/95">
|
||||
<CardContent className="grid gap-0 p-0 lg:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<div className="space-y-10 p-7 md:p-10">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="secondary">{t('controlNode')}</Badge>
|
||||
<Badge variant="outline">{t('drive')}</Badge>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<CardTitle className="font-display max-w-4xl text-6xl md:text-8xl">{t('heroTitle')}</CardTitle>
|
||||
<CardDescription className="max-w-2xl text-lg text-foreground/80 md:text-2xl">{t('heroDesc')}</CardDescription>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg" onClick={() => navigate('drive')}>{t('openDrive')}</Button>
|
||||
<Button size="lg" variant="outline" onClick={() => navigate('admin')}>{t('openAdmin')}</Button>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="border-2 border-border bg-background/80 p-3 text-sm"><p className="font-display text-base">Argon2id Auth</p><p className="text-xs uppercase tracking-wide text-muted-foreground">Hardened credentials and sessions</p></div>
|
||||
<div className="border-2 border-border bg-background/80 p-3 text-sm"><p className="font-display text-base">Isolated Storage</p><p className="text-xs uppercase tracking-wide text-muted-foreground">Per-account file boundaries</p></div>
|
||||
<div className="border-2 border-border bg-background/80 p-3 text-sm"><p className="font-display text-base">Share + Resume</p><p className="text-xs uppercase tracking-wide text-muted-foreground">Expiring links and byte-range downloads</p></div>
|
||||
<div className="grid gap-3 md:grid-cols-3">
|
||||
<div className="brutal-block p-4 text-sm">
|
||||
<p className="font-display text-xl">Argon2id</p>
|
||||
<p className="mt-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('authFeatureDesc')}</p>
|
||||
</div>
|
||||
<div className="brutal-block p-4 text-sm">
|
||||
<p className="font-display text-xl">{t('drive')}</p>
|
||||
<p className="mt-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('storageFeatureDesc')}</p>
|
||||
</div>
|
||||
<div className="brutal-block p-4 text-sm">
|
||||
<p className="font-display text-xl">{t('share')}</p>
|
||||
<p className="mt-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('shareFeatureDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-px border-t-[3px] border-border bg-border lg:border-l-[3px] lg:border-t-0">
|
||||
<div className="bg-accent p-5 text-accent-foreground">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em]">/drive</p>
|
||||
<p className="mt-4 font-display text-4xl">{t('drive')}</p>
|
||||
<p className="mt-3 text-sm font-semibold uppercase tracking-[0.14em]">{t('openDrive')}</p>
|
||||
</div>
|
||||
<div className="bg-primary p-5 text-primary-foreground">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em]">/admin</p>
|
||||
<p className="mt-4 font-display text-4xl">{t('admin')}</p>
|
||||
<p className="mt-3 text-sm font-semibold uppercase tracking-[0.14em]">{t('openAdmin')}</p>
|
||||
</div>
|
||||
<div className="bg-card p-5">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('remoteAccess')}</p>
|
||||
<p className="mt-4 font-display text-4xl">FTP</p>
|
||||
<p className="mt-3 text-sm font-semibold uppercase tracking-[0.14em] text-muted-foreground">{t('remoteAccessDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="control-shell bg-card/95">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-display text-3xl">{t('userLogin')}</CardTitle>
|
||||
<CardDescription className="max-w-md uppercase tracking-wide">{t('registrationDisabled')}</CardDescription>
|
||||
<Card className="control-shell overflow-hidden bg-card/95">
|
||||
<CardHeader className="gap-4 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--primary)/0.16),transparent_70%)]">
|
||||
<Badge className="w-fit">{t('userLogin')}</Badge>
|
||||
<CardTitle className="font-display text-5xl">{t('userLogin')}</CardTitle>
|
||||
<CardDescription className="max-w-md uppercase tracking-[0.14em]">{t('registrationDisabled')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="space-y-5 p-6 pt-6">
|
||||
<form className="space-y-3" onSubmit={loginUser}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('username')}</p>
|
||||
<Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder={t('username')} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('password')}</p>
|
||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={t('password')} required />
|
||||
</div>
|
||||
<Button className="w-full" type="submit">{t('signIn')}</Button>
|
||||
<Button className="w-full" type="button" variant="outline" onClick={loginWithGoogle}>{t('signInGoogle')}</Button>
|
||||
<Button className="w-full" type="button" variant="secondary" onClick={loginWithGoogle}>{t('signInGoogle')}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
) : route === 'drive' ? (
|
||||
user ? (
|
||||
<section className="grid gap-4 lg:grid-cols-[280px_1fr]">
|
||||
<Card className="control-shell h-fit bg-card/95">
|
||||
<Suspense fallback={<CardContent className="p-4 text-sm text-muted-foreground">Loading...</CardContent>}>
|
||||
<section className="grid min-h-0 flex-1 gap-6 overflow-y-auto xl:grid-cols-[360px_minmax(0,1fr)] xl:overflow-hidden">
|
||||
<Card className="control-shell h-fit overflow-hidden bg-card/95 xl:h-full">
|
||||
<Suspense fallback={<CardContent className="p-5 text-sm font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('loading')}...</CardContent>}>
|
||||
<TransferSection
|
||||
username={user.username}
|
||||
t={t}
|
||||
@@ -1376,26 +1506,34 @@ export default function App() {
|
||||
</Suspense>
|
||||
</Card>
|
||||
|
||||
<Card className={`control-shell bg-card/95 ${dragActive ? 'ring-2 ring-primary/50' : ''}`}>
|
||||
<CardHeader className="space-y-3 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="font-display text-3xl">{t('drive')}</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedCount > 0 ? (
|
||||
<Badge variant="outline">{selectedCount} {t('selected')}</Badge>
|
||||
) : null}
|
||||
<Badge variant="secondary">{visibleFiles.length} {t('items')}</Badge>
|
||||
<Card className={`control-shell min-h-0 overflow-hidden bg-card/95 xl:flex xl:flex-col ${dragActive ? '-translate-x-1 -translate-y-1 shadow-[16px_16px_0_hsl(var(--shadow-strong))]' : ''}`}>
|
||||
<CardHeader className="gap-6 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--primary)/0.1),transparent_62%)] pb-6">
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(420px,480px)] xl:items-start">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>{routeLabel}</Badge>
|
||||
{selectedCount > 0 ? <Badge variant="secondary">{selectedCount} {t('selected')}</Badge> : null}
|
||||
</div>
|
||||
<CardTitle className="font-display text-5xl md:text-6xl">{t('drive')}</CardTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3 self-start">
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input ref={searchRef} className="h-11 rounded-xl pl-9" value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t('search')} />
|
||||
<Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
ref={searchRef}
|
||||
className="h-14 pl-12 pr-4 text-[13px] placeholder:tracking-[0.1em]"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t('search')}
|
||||
/>
|
||||
</div>
|
||||
<div className="-mx-1 flex items-center gap-1 overflow-x-auto px-1 text-xs uppercase tracking-[0.14em] text-muted-foreground whitespace-nowrap">
|
||||
<div className="brutal-block flex min-h-[58px] items-center gap-1 overflow-x-auto px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground whitespace-nowrap">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className={`h-7 shrink-0 px-2 ${dropFolderPath === '/' ? 'ring-2 ring-primary/40' : ''}`}
|
||||
className={`h-9 shrink-0 px-3 ${dropFolderPath === '/' ? 'border-border bg-muted' : ''}`}
|
||||
onClick={() => void loadFiles('/')}
|
||||
onDragOver={(e) => {
|
||||
if (draggingPaths.length === 0) return
|
||||
@@ -1411,24 +1549,26 @@ export default function App() {
|
||||
if (paths.length === 0) return
|
||||
void movePathsTo('/', paths)
|
||||
}}
|
||||
>root</Button>
|
||||
>{t('root')}</Button>
|
||||
{crumbs.map((crumb, idx) => {
|
||||
const p = '/' + crumbs.slice(0, idx + 1).join('/')
|
||||
return (
|
||||
<div key={p} className="flex shrink-0 items-center gap-1">
|
||||
<span className="text-muted-foreground">/</span>
|
||||
<Button size="sm" variant="ghost" className="h-7 shrink-0 px-2" onClick={() => void loadFiles(p)}>
|
||||
<Button size="sm" variant="ghost" className="h-9 shrink-0 px-3" onClick={() => void loadFiles(p)}>
|
||||
<span className="max-w-[11rem] truncate">{crumb}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">{t('shortcuts')}</p>
|
||||
<p className="pl-1 text-[11px] font-semibold uppercase tracking-[0.18em] leading-relaxed text-muted-foreground">{t('shortcuts')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent
|
||||
className="min-h-[420px] space-y-2"
|
||||
className="min-h-[500px] space-y-4 p-6 pt-6 xl:min-h-0 xl:flex-1 xl:overflow-y-auto"
|
||||
onMouseDown={(e) => {
|
||||
if (e.button !== 0) return
|
||||
if (isSelectionIgnoredTarget(e.target)) return
|
||||
@@ -1484,16 +1624,15 @@ export default function App() {
|
||||
/>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div className="flex min-h-full flex-col gap-2">
|
||||
|
||||
<div className="flex min-h-0 flex-col gap-3">
|
||||
<Dialog open={shareDialog} onOpenChange={(v) => setShareDialog(v)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('share')}</DialogTitle>
|
||||
<DialogDescription>{filesByPath[sharePath]?.name ?? sharePath}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div>
|
||||
<p className="mb-1 text-xs text-muted-foreground">{t('shareFor')}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('shareFor')}</p>
|
||||
<Select value={shareTTL} onValueChange={setShareTTL}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -1529,13 +1668,13 @@ export default function App() {
|
||||
<img
|
||||
src={`/api/files/preview?path=${encodeURIComponent(previewEntry.path)}`}
|
||||
alt={previewEntry.name}
|
||||
className="max-h-[70vh] w-full rounded-md object-contain"
|
||||
className="max-h-[70vh] w-full border-[3px] border-border object-contain"
|
||||
/>
|
||||
) : null}
|
||||
{previewEntry && isVideoFile(previewEntry.name) ? (
|
||||
<video
|
||||
controls
|
||||
className="max-h-[70vh] w-full rounded-md bg-black"
|
||||
className="max-h-[70vh] w-full border-[3px] border-border bg-black"
|
||||
src={`/api/files/preview?path=${encodeURIComponent(previewEntry.path)}`}
|
||||
/>
|
||||
) : null}
|
||||
@@ -1548,19 +1687,19 @@ export default function App() {
|
||||
<DialogTitle>{t('editor')}</DialogTitle>
|
||||
<DialogDescription>{editorPath}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-muted-foreground">{t('writeMarkdown')}</p>
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('writeMarkdown')}</p>
|
||||
<Textarea
|
||||
value={editorContent}
|
||||
onChange={(e) => setEditorContent(e.target.value)}
|
||||
className="min-h-[50vh] w-full rounded-md border bg-background p-3 text-sm"
|
||||
className="min-h-[50vh] w-full"
|
||||
/>
|
||||
<Button onClick={() => void saveMarkdown()} disabled={editorSaving}>{editorSaving ? '...' : t('save')}</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-muted-foreground">{t('markdownPreview')}</p>
|
||||
<div className="markdown-preview max-w-none rounded-md border bg-muted/30 p-3 text-sm">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('markdownPreview')}</p>
|
||||
<div className="markdown-preview brutal-block max-w-none p-4 text-sm">
|
||||
{MarkdownRenderer ? (
|
||||
<MarkdownRenderer>{editorContent}</MarkdownRenderer>
|
||||
) : (
|
||||
@@ -1572,14 +1711,14 @@ export default function App() {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<div className="hidden grid-cols-[1fr_110px_160px] border-2 border-border bg-muted/40 p-3 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground lg:grid">
|
||||
<div className="hidden grid-cols-[minmax(0,1fr)_140px_190px] border-[3px] border-border bg-muted/70 p-4 text-sm font-black uppercase tracking-[0.16em] text-muted-foreground lg:grid">
|
||||
<button onClick={() => toggleSort('name')} className="text-left">{t('name')}</button>
|
||||
<button onClick={() => toggleSort('size')} className="text-left">{t('size')}</button>
|
||||
<button onClick={() => toggleSort('modTime')} className="text-left">{t('modified')}</button>
|
||||
</div>
|
||||
|
||||
{visibleFiles.length === 0 ? (
|
||||
<div className="border-2 border-dashed border-border p-10 text-center text-sm uppercase tracking-wide text-muted-foreground">{t('empty')}</div>
|
||||
<div className="brutal-block p-10 text-center text-sm font-black uppercase tracking-[0.18em] text-muted-foreground">{t('empty')}</div>
|
||||
) : (
|
||||
visibleFiles.map((f) => (
|
||||
<ContextMenu key={f.path}>
|
||||
@@ -1587,7 +1726,7 @@ export default function App() {
|
||||
<div
|
||||
data-file-row="true"
|
||||
draggable
|
||||
className={`group grid gap-2 border-2 border-border bg-background/90 p-3 transition hover:bg-muted/35 lg:grid-cols-[1fr_110px_160px] lg:items-center ${selectedPaths[f.path] ? 'ring-2 ring-primary/45 bg-gradient-to-r from-primary/12 via-background to-background shadow-[0_0_24px_hsl(var(--primary)/0.22)]' : ''} ${dropFolderPath === f.path ? 'border-primary/70 bg-primary/12' : ''} ${draggingPaths.includes(f.path) ? 'opacity-70' : ''} ${paintSelect.active ? 'select-none' : ''}`}
|
||||
className={`group grid items-center gap-4 border-[3px] border-border bg-card p-5 shadow-[4px_4px_0_hsl(var(--shadow-strong))] transition-[transform,box-shadow,background-color,border-color,opacity] duration-150 hover:-translate-x-1 hover:-translate-y-1 hover:bg-muted hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] lg:grid-cols-[minmax(0,1fr)_140px_190px] ${selectedPaths[f.path] ? 'border-primary bg-primary/10 shadow-[8px_8px_0_hsl(var(--shadow-strong))]' : ''} ${dropFolderPath === f.path ? 'border-primary bg-accent/35' : ''} ${draggingPaths.includes(f.path) ? 'opacity-70' : ''} ${paintSelect.active ? 'select-none' : ''}`}
|
||||
onMouseDown={(e) => {
|
||||
if (e.button !== 0) return
|
||||
if (isSelectionIgnoredTarget(e.target)) return
|
||||
@@ -1659,21 +1798,23 @@ export default function App() {
|
||||
}}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<KindIcon file={f} />
|
||||
<p className="truncate text-left text-sm font-semibold uppercase tracking-[0.08em] hover:underline">{f.name}</p>
|
||||
<p className="truncate text-left text-base font-black uppercase tracking-[0.12em] group-hover:underline">{f.name}</p>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-1">
|
||||
{(f.tags?.length ?? 0) > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
{(f.tags ?? []).map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="gap-1">
|
||||
<Badge key={tag} variant="outline" className="gap-1">
|
||||
#{tag}
|
||||
<button onClick={() => void removeTag(f.path, tag)} className="text-muted-foreground">x</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{f.isDir ? '—' : formatSize(f.size)}</p>
|
||||
<p className="text-xs text-muted-foreground">{new Date(f.modTime).toLocaleString()}</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">{f.isDir ? '—' : formatSize(f.size)}</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">{new Date(f.modTime).toLocaleString()}</p>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
@@ -1717,23 +1858,30 @@ export default function App() {
|
||||
) : bootstrapping ? (
|
||||
authLoadingCard
|
||||
) : (
|
||||
<Card className="control-shell mx-auto max-w-md bg-card/95">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-display text-3xl">{t('userLogin')}</CardTitle>
|
||||
<Card className="control-shell mx-auto max-w-md overflow-hidden bg-card/95">
|
||||
<CardHeader className="gap-4 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--primary)/0.16),transparent_70%)]">
|
||||
<Badge className="w-fit">{t('userLogin')}</Badge>
|
||||
<CardTitle className="font-display text-5xl">{t('userLogin')}</CardTitle>
|
||||
<CardDescription>{t('registrationDisabled')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="space-y-5 p-6 pt-6">
|
||||
<form className="space-y-3" onSubmit={loginUser}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('username')}</p>
|
||||
<Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder={t('username')} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('password')}</p>
|
||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={t('password')} required />
|
||||
</div>
|
||||
<Button className="w-full" type="submit">{t('signIn')}</Button>
|
||||
<Button className="w-full" type="button" variant="outline" onClick={loginWithGoogle}>{t('signInGoogle')}</Button>
|
||||
<Button className="w-full" type="button" variant="secondary" onClick={loginWithGoogle}>{t('signInGoogle')}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
) : admin ? (
|
||||
<Suspense fallback={<Card className="border-none bg-card/95 shadow-lg"><CardContent className="p-4 text-sm text-muted-foreground">Loading...</CardContent></Card>}>
|
||||
<Suspense fallback={<Card className="control-shell overflow-hidden bg-card/95"><CardContent className="p-5 text-sm font-semibold uppercase tracking-[0.16em] text-muted-foreground">{t('loading')}...</CardContent></Card>}>
|
||||
<AdminPanel
|
||||
t={t}
|
||||
admin={admin}
|
||||
@@ -1756,23 +1904,30 @@ export default function App() {
|
||||
) : bootstrapping ? (
|
||||
authLoadingCard
|
||||
) : (
|
||||
<Card className="control-shell mx-auto max-w-md bg-card/95">
|
||||
<CardHeader>
|
||||
<CardTitle className="font-display text-3xl">{t('adminLogin')}</CardTitle>
|
||||
<CardDescription className="uppercase tracking-[0.12em]">{t('configuredFromEnv')}</CardDescription>
|
||||
<Card className="control-shell mx-auto max-w-md overflow-hidden bg-card/95">
|
||||
<CardHeader className="gap-4 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--accent)/0.24),transparent_70%)]">
|
||||
<Badge className="w-fit">{t('admin')}</Badge>
|
||||
<CardTitle className="font-display text-5xl">{t('adminLogin')}</CardTitle>
|
||||
<CardDescription className="uppercase tracking-[0.14em]">{t('configuredFromEnv')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="space-y-5 p-6 pt-6">
|
||||
<form className="space-y-3" onSubmit={loginAdmin}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('username')}</p>
|
||||
<Input value={adminLogin} onChange={(e) => setAdminLogin(e.target.value)} placeholder={t('username')} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('password')}</p>
|
||||
<Input type="password" value={adminPass} onChange={(e) => setAdminPass(e.target.value)} placeholder={t('password')} required />
|
||||
</div>
|
||||
<Button className="w-full" type="submit"><Shield className="mr-2 h-4 w-4" />{t('signInAdmin')}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<footer className="py-2 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1"><Star className="h-3 w-3" /> FileZ Control Surface</span>
|
||||
<footer className="py-3 text-center text-xs font-black uppercase tracking-[0.22em] text-muted-foreground">
|
||||
<span className="brutal-chip"><Star className="h-3 w-3" /> {t('controlSurface')}</span>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'react'
|
||||
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
const badgeVariants = cva('inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold', {
|
||||
const badgeVariants = cva('inline-flex items-center rounded-none border-[3px] px-2.5 py-1 text-[10px] font-black uppercase tracking-[0.16em] shadow-[3px_3px_0_hsl(var(--shadow-strong))]', {
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary text-primary-foreground',
|
||||
secondary: 'border-transparent bg-muted text-foreground',
|
||||
outline: 'text-foreground',
|
||||
default: 'border-border bg-primary text-primary-foreground',
|
||||
secondary: 'border-border bg-accent text-accent-foreground',
|
||||
outline: 'border-border bg-card text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -4,20 +4,20 @@ import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border-2 border-transparent text-sm font-semibold uppercase tracking-[0.08em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50',
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border-[3px] text-sm font-black uppercase tracking-[0.14em] transition-[transform,box-shadow,background-color,color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-primary bg-primary text-primary-foreground hover:bg-primary/85',
|
||||
outline: 'border-input bg-background hover:bg-muted',
|
||||
secondary: 'border-border bg-muted text-foreground hover:bg-muted/70',
|
||||
ghost: 'border-transparent hover:border-border hover:bg-muted/40 hover:text-foreground',
|
||||
destructive: 'border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/85',
|
||||
default: 'border-border bg-primary text-primary-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
outline: 'border-border bg-card text-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:bg-muted hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
secondary: 'border-border bg-accent text-accent-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
ghost: 'border-transparent bg-transparent text-foreground shadow-none hover:border-border hover:bg-muted/65',
|
||||
destructive: 'border-border bg-destructive text-destructive-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[0_0_0_hsl(var(--shadow-strong))]',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-8 px-3 text-xs',
|
||||
lg: 'h-11 px-8',
|
||||
default: 'h-11 px-4 py-2',
|
||||
sm: 'h-9 px-3 text-[11px]',
|
||||
lg: 'h-12 px-6 text-base',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -3,11 +3,11 @@ import * as React from 'react'
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn('rounded-none border-2 border-border bg-card text-card-foreground shadow-[6px_6px_0_hsl(var(--shadow-strong))]', className)} {...props} />
|
||||
return <div className={cn('rounded-none border-[3px] border-border bg-card text-card-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
||||
return <div className={cn('flex flex-col space-y-2 p-6', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
||||
@@ -15,7 +15,7 @@ export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHead
|
||||
}
|
||||
|
||||
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
||||
return <p className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||
return <p className={cn('text-sm leading-relaxed text-muted-foreground', className)} {...props} />
|
||||
}
|
||||
|
||||
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
|
||||
@@ -13,7 +13,7 @@ const ContextMenuContent = React.forwardRef<
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-none border-[3px] border-border bg-popover p-1.5 text-popover-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -28,7 +28,7 @@ const ContextMenuItem = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-none border border-transparent px-2 py-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -38,7 +38,7 @@ const ContextMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
|
||||
<ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-[3px] bg-border', className)} {...props} />
|
||||
))
|
||||
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
|
||||
|
||||
|
||||
@@ -14,7 +14,11 @@ export const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay ref={ref} className={cn('fixed inset-0 z-50 bg-black/70 backdrop-blur-[1px]', className)} {...props} />
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn('fixed inset-0 z-50 bg-black/75 backdrop-blur-[2px] [background-image:repeating-linear-gradient(45deg,transparent_0,transparent_18px,rgba(255,255,255,0.06)_18px,rgba(255,255,255,0.06)_20px)]', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
@@ -27,13 +31,13 @@ export const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-none border-2 border-border bg-card p-6 shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
'fixed left-[50%] top-[50%] z-50 grid max-h-[90vh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-none border-[3px] border-border bg-card p-6 shadow-[12px_12px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/40">
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 border-[3px] border-border bg-card p-1 opacity-100 transition-colors hover:bg-muted focus:outline-none focus:ring-4 focus:ring-primary/25">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
@@ -43,14 +47,14 @@ export const DialogContent = React.forwardRef<
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
|
||||
<div className={cn('flex flex-col space-y-2 text-left', className)} {...props} />
|
||||
)
|
||||
|
||||
export const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
|
||||
<DialogPrimitive.Title ref={ref} className={cn('font-display text-xl font-semibold leading-none tracking-tight', className)} {...props} />
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-none border-[3px] border-border bg-popover p-1.5 text-popover-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -29,7 +29,7 @@ const DropdownMenuItem = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
className={cn('relative flex cursor-default select-none items-center rounded-none border border-transparent px-2 py-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -39,7 +39,7 @@ const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
|
||||
<DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-[3px] bg-border', className)} {...props} />
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-12 w-full rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-12 w-full items-center justify-between rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm font-semibold uppercase tracking-[0.08em] shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-4 focus:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -34,7 +34,7 @@ export const SelectContent = React.forwardRef<
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn('relative z-50 min-w-[8rem] overflow-hidden rounded-none border-2 border-border bg-card text-card-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))]', className)}
|
||||
className={cn('relative z-50 min-w-[8rem] overflow-hidden rounded-none border-[3px] border-border bg-card text-card-foreground shadow-[8px_8px_0_hsl(var(--shadow-strong))]', className)}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
|
||||
@@ -49,7 +49,7 @@ export const SelectItem = React.forwardRef<
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn('relative flex w-full cursor-default select-none items-center rounded-none py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-muted', className)}
|
||||
className={cn('relative flex w-full cursor-default select-none items-center rounded-none border border-transparent py-2 pl-8 pr-2 text-sm font-semibold uppercase tracking-[0.08em] outline-none focus:border-border focus:bg-muted', className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
|
||||
@@ -12,7 +12,7 @@ export const TabsList = React.forwardRef<
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex h-10 items-center justify-center rounded-none border border-[#415273] bg-[#253149] p-1 text-[#95a4bf] shadow-[inset_0_0_0_1px_rgba(138,164,210,0.08)]',
|
||||
'inline-flex items-center justify-center rounded-none border-[3px] border-border bg-card p-1 text-foreground shadow-[6px_6px_0_hsl(var(--shadow-strong))]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -27,7 +27,7 @@ export const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-none border border-transparent px-3 py-1.5 text-sm font-semibold uppercase tracking-[0.08em] text-[#99a8c4] transition-colors focus:outline-none focus:ring-2 focus:ring-[#6a84b5]/60 hover:bg-[#2a3750] hover:text-[#d2deef] data-[state=active]:border-[#566a8e] data-[state=active]:bg-[#303e58] data-[state=active]:text-[#e6eefb]',
|
||||
'inline-flex min-w-[96px] items-center justify-center whitespace-nowrap rounded-none border-[3px] border-transparent px-3 py-2 text-sm font-black uppercase tracking-[0.14em] text-muted-foreground transition-colors focus:outline-none focus:ring-4 focus:ring-primary/25 hover:border-border hover:bg-muted hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
'flex min-h-[80px] w-full rounded-none border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex min-h-[80px] w-full rounded-none border-[3px] border-input bg-background/95 px-3 py-2 text-sm shadow-[4px_4px_0_hsl(var(--shadow-strong))] ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -6,134 +6,199 @@
|
||||
:root {
|
||||
--radius: 0rem;
|
||||
|
||||
--background: 220 20% 9%;
|
||||
--foreground: 200 20% 92%;
|
||||
--card: 222 18% 12%;
|
||||
--card-foreground: 200 20% 92%;
|
||||
--background: 42 37% 94%;
|
||||
--foreground: 220 17% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 17% 10%;
|
||||
--popover: var(--card);
|
||||
--popover-foreground: var(--card-foreground);
|
||||
--border: 213 14% 33%;
|
||||
--input: 213 14% 33%;
|
||||
--primary: 355 96% 59%;
|
||||
--border: 220 17% 10%;
|
||||
--input: 220 17% 10%;
|
||||
--primary: 5 88% 54%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 219 16% 16%;
|
||||
--muted-foreground: 214 15% 70%;
|
||||
--accent: var(--muted);
|
||||
--accent-foreground: var(--foreground);
|
||||
--destructive: 354 91% 52%;
|
||||
--muted: 48 40% 88%;
|
||||
--muted-foreground: 220 10% 28%;
|
||||
--accent: 54 100% 66%;
|
||||
--accent-foreground: 220 17% 10%;
|
||||
--destructive: 356 84% 48%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--shadow-strong: 220 30% 5%;
|
||||
--shadow-strong: 220 17% 10%;
|
||||
--surface-pop: 190 92% 46%;
|
||||
--paper: 38 50% 90%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222 20% 8%;
|
||||
--foreground: 210 24% 92%;
|
||||
--card: 220 16% 11%;
|
||||
--card-foreground: 210 24% 92%;
|
||||
--border: 213 14% 30%;
|
||||
--input: 213 14% 30%;
|
||||
--primary: 355 96% 59%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 219 16% 14%;
|
||||
--muted-foreground: 214 14% 68%;
|
||||
--destructive: 354 91% 52%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--shadow-strong: 220 30% 4%;
|
||||
--background: 220 14% 8%;
|
||||
--foreground: 48 45% 94%;
|
||||
--card: 220 14% 11%;
|
||||
--card-foreground: 48 45% 94%;
|
||||
--border: 48 45% 94%;
|
||||
--input: 48 45% 94%;
|
||||
--primary: 14 97% 63%;
|
||||
--primary-foreground: 220 14% 8%;
|
||||
--muted: 220 12% 18%;
|
||||
--muted-foreground: 45 15% 73%;
|
||||
--accent: 54 100% 67%;
|
||||
--accent-foreground: 220 14% 8%;
|
||||
--destructive: 356 92% 60%;
|
||||
--destructive-foreground: 220 14% 8%;
|
||||
--shadow-strong: 0 0% 0%;
|
||||
--surface-pop: 187 92% 55%;
|
||||
--paper: 220 12% 16%;
|
||||
}
|
||||
|
||||
html[data-theme='dracula'] {
|
||||
--background: 231 15% 14%;
|
||||
--foreground: 60 30% 96%;
|
||||
--card: 232 14% 18%;
|
||||
--card-foreground: 60 30% 96%;
|
||||
--border: 232 12% 28%;
|
||||
--input: 232 12% 28%;
|
||||
--background: 225 13% 9%;
|
||||
--foreground: 50 45% 95%;
|
||||
--card: 225 13% 12%;
|
||||
--card-foreground: 50 45% 95%;
|
||||
--border: 50 45% 95%;
|
||||
--input: 50 45% 95%;
|
||||
--primary: 326 100% 74%;
|
||||
--primary-foreground: 231 15% 14%;
|
||||
--muted: 232 13% 22%;
|
||||
--muted-foreground: 225 18% 74%;
|
||||
--primary-foreground: 225 13% 9%;
|
||||
--muted: 225 13% 18%;
|
||||
--muted-foreground: 236 12% 78%;
|
||||
--accent: 53 100% 65%;
|
||||
--accent-foreground: 225 13% 9%;
|
||||
--surface-pop: 191 100% 54%;
|
||||
--paper: 225 12% 16%;
|
||||
}
|
||||
|
||||
html[data-theme='nord'] {
|
||||
--background: 220 16% 17%;
|
||||
--foreground: 214 32% 91%;
|
||||
--card: 221 16% 21%;
|
||||
--card-foreground: 214 32% 91%;
|
||||
--border: 220 12% 31%;
|
||||
--input: 220 12% 31%;
|
||||
--primary: 193 43% 67%;
|
||||
--primary-foreground: 220 16% 17%;
|
||||
--muted: 220 15% 24%;
|
||||
--muted-foreground: 214 17% 71%;
|
||||
--background: 210 29% 94%;
|
||||
--foreground: 215 21% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 215 21% 15%;
|
||||
--border: 215 21% 15%;
|
||||
--input: 215 21% 15%;
|
||||
--primary: 198 80% 42%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 210 29% 86%;
|
||||
--muted-foreground: 215 17% 35%;
|
||||
--accent: 44 100% 67%;
|
||||
--accent-foreground: 215 21% 15%;
|
||||
--surface-pop: 198 88% 45%;
|
||||
--paper: 201 33% 88%;
|
||||
}
|
||||
|
||||
html[data-theme='monokai'] {
|
||||
--background: 70 12% 14%;
|
||||
--foreground: 60 18% 91%;
|
||||
--card: 72 11% 18%;
|
||||
--card-foreground: 60 18% 91%;
|
||||
--border: 74 10% 29%;
|
||||
--input: 74 10% 29%;
|
||||
--primary: 54 93% 68%;
|
||||
--primary-foreground: 70 12% 14%;
|
||||
--muted: 74 11% 22%;
|
||||
--muted-foreground: 58 11% 73%;
|
||||
--background: 42 17% 11%;
|
||||
--foreground: 58 43% 93%;
|
||||
--card: 42 16% 15%;
|
||||
--card-foreground: 58 43% 93%;
|
||||
--border: 58 43% 93%;
|
||||
--input: 58 43% 93%;
|
||||
--primary: 26 96% 60%;
|
||||
--primary-foreground: 42 17% 11%;
|
||||
--muted: 42 14% 22%;
|
||||
--muted-foreground: 58 14% 74%;
|
||||
--accent: 67 100% 58%;
|
||||
--accent-foreground: 42 17% 11%;
|
||||
--surface-pop: 143 70% 54%;
|
||||
--paper: 42 14% 20%;
|
||||
}
|
||||
|
||||
html[data-theme='solarized'] {
|
||||
--background: 193 76% 15%;
|
||||
--foreground: 44 88% 85%;
|
||||
--card: 193 70% 19%;
|
||||
--card-foreground: 44 88% 85%;
|
||||
--border: 192 38% 31%;
|
||||
--input: 192 38% 31%;
|
||||
--primary: 18 80% 55%;
|
||||
--primary-foreground: 193 76% 15%;
|
||||
--muted: 193 58% 23%;
|
||||
--muted-foreground: 44 39% 72%;
|
||||
--background: 43 38% 92%;
|
||||
--foreground: 194 74% 19%;
|
||||
--card: 48 63% 98%;
|
||||
--card-foreground: 194 74% 19%;
|
||||
--border: 194 74% 19%;
|
||||
--input: 194 74% 19%;
|
||||
--primary: 18 80% 49%;
|
||||
--primary-foreground: 48 63% 98%;
|
||||
--muted: 43 31% 82%;
|
||||
--muted-foreground: 195 26% 30%;
|
||||
--accent: 45 94% 58%;
|
||||
--accent-foreground: 194 74% 19%;
|
||||
--surface-pop: 189 72% 38%;
|
||||
--paper: 43 46% 86%;
|
||||
}
|
||||
|
||||
html[data-theme='github'] {
|
||||
--background: 0 0% 99%;
|
||||
--foreground: 220 14% 18%;
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 220 14% 10%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 14% 18%;
|
||||
--border: 210 18% 87%;
|
||||
--input: 210 18% 87%;
|
||||
--card-foreground: 220 14% 10%;
|
||||
--border: 220 14% 10%;
|
||||
--input: 220 14% 10%;
|
||||
--primary: 212 84% 44%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 210 30% 96%;
|
||||
--muted-foreground: 214 10% 43%;
|
||||
--muted: 210 30% 92%;
|
||||
--muted-foreground: 214 10% 33%;
|
||||
--accent: 48 100% 63%;
|
||||
--accent-foreground: 220 14% 10%;
|
||||
--surface-pop: 184 88% 41%;
|
||||
--paper: 41 52% 91%;
|
||||
}
|
||||
|
||||
html[data-theme='github'].dark {
|
||||
--background: 222 20% 10%;
|
||||
--foreground: 210 17% 93%;
|
||||
--card: 222 18% 14%;
|
||||
--card-foreground: 210 17% 93%;
|
||||
--border: 218 18% 27%;
|
||||
--input: 218 18% 27%;
|
||||
--background: 220 18% 9%;
|
||||
--foreground: 214 28% 94%;
|
||||
--card: 220 18% 13%;
|
||||
--card-foreground: 214 28% 94%;
|
||||
--border: 214 28% 94%;
|
||||
--input: 214 28% 94%;
|
||||
--primary: 212 88% 66%;
|
||||
--primary-foreground: 222 20% 10%;
|
||||
--muted: 221 18% 18%;
|
||||
--muted-foreground: 214 13% 71%;
|
||||
--primary-foreground: 220 18% 9%;
|
||||
--muted: 220 17% 18%;
|
||||
--muted-foreground: 214 13% 74%;
|
||||
--accent: 48 100% 63%;
|
||||
--accent-foreground: 220 18% 9%;
|
||||
--surface-pop: 184 88% 51%;
|
||||
--paper: 220 14% 17%;
|
||||
}
|
||||
|
||||
html[data-theme='bureau'] {
|
||||
--background: 36 30% 92%;
|
||||
--foreground: 220 18% 9%;
|
||||
--card: 38 35% 97%;
|
||||
--card-foreground: 220 18% 9%;
|
||||
--border: 220 18% 9%;
|
||||
--input: 220 18% 9%;
|
||||
--primary: 6 78% 54%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--muted: 38 24% 84%;
|
||||
--muted-foreground: 220 10% 28%;
|
||||
--accent: 52 98% 63%;
|
||||
--accent-foreground: 220 18% 9%;
|
||||
--surface-pop: 186 68% 43%;
|
||||
--paper: 38 28% 88%;
|
||||
}
|
||||
|
||||
html[data-theme='bureau'].dark {
|
||||
--background: 220 15% 8%;
|
||||
--foreground: 42 35% 93%;
|
||||
--card: 220 15% 10%;
|
||||
--card-foreground: 42 35% 93%;
|
||||
--border: 42 35% 93%;
|
||||
--input: 42 35% 93%;
|
||||
--primary: 8 92% 62%;
|
||||
--primary-foreground: 220 15% 8%;
|
||||
--muted: 220 12% 17%;
|
||||
--muted-foreground: 42 15% 76%;
|
||||
--accent: 51 96% 66%;
|
||||
--accent-foreground: 220 15% 8%;
|
||||
--surface-pop: 185 70% 50%;
|
||||
--paper: 220 12% 14%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-family: 'Space Grotesk', 'IBM Plex Sans Condensed', 'Sora', sans-serif;
|
||||
min-height: 100vh;
|
||||
font-family: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', 'Segoe UI', sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.01em;
|
||||
background-image:
|
||||
linear-gradient(180deg, hsl(var(--background)) 0%, hsl(222 26% 7%) 100%),
|
||||
linear-gradient(hsla(0 0% 100% / 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsla(0 0% 100% / 0.045) 1px, transparent 1px),
|
||||
radial-gradient(1200px 650px at 74% -8%, hsl(var(--primary) / 0.16), transparent 56%),
|
||||
radial-gradient(980px 560px at -8% 102%, hsl(196 100% 58% / 0.11), transparent 62%);
|
||||
background-size: auto, 42px 42px, 42px 42px, auto, auto;
|
||||
linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--paper)) 100%),
|
||||
radial-gradient(circle at 78% 14%, hsl(var(--primary) / 0.16), transparent 24%),
|
||||
radial-gradient(circle at 18% 76%, hsl(var(--surface-pop) / 0.12), transparent 20%),
|
||||
radial-gradient(circle at 48% 48%, hsl(var(--accent) / 0.06), transparent 28%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@@ -145,26 +210,96 @@
|
||||
h2,
|
||||
h3,
|
||||
.font-display {
|
||||
font-family: 'Archivo Black', 'Anton', 'Space Grotesk', sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
font-family: 'Archivo Black', 'Arial Black', 'Impact', sans-serif;
|
||||
letter-spacing: 0.045em;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.94;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.control-shell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid hsl(var(--border));
|
||||
background: linear-gradient(165deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.82));
|
||||
border: 3px solid hsl(var(--border));
|
||||
background:
|
||||
linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card) / 0.98) 100%),
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.08), transparent 38%);
|
||||
box-shadow: 8px 8px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.control-shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(120deg, transparent 20%, hsl(var(--primary) / 0.07) 70%, transparent 100%);
|
||||
mix-blend-mode: screen;
|
||||
.control-shell > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.control-shell::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.brutal-block {
|
||||
position: relative;
|
||||
border: 3px solid hsl(var(--border));
|
||||
background:
|
||||
linear-gradient(180deg, hsl(var(--background) / 0.9), hsl(var(--muted) / 0.74)),
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.05), transparent 42%);
|
||||
box-shadow: 5px 5px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.brutal-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 3px solid hsl(var(--border));
|
||||
background: hsl(var(--card));
|
||||
padding: 0.45rem 0.8rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 4px 4px 0 hsl(var(--shadow-strong));
|
||||
}
|
||||
|
||||
.brutal-grid {
|
||||
background-image:
|
||||
radial-gradient(circle at top right, hsl(var(--primary) / 0.12), transparent 34%),
|
||||
radial-gradient(circle at bottom left, hsl(var(--surface-pop) / 0.08), transparent 24%);
|
||||
}
|
||||
|
||||
.brutal-rule {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: hsl(var(--border));
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 3px solid hsl(var(--muted));
|
||||
background: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.markdown-preview {
|
||||
@@ -222,7 +357,8 @@
|
||||
}
|
||||
|
||||
.markdown-preview code {
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 0;
|
||||
border: 2px solid hsl(var(--border));
|
||||
background: hsl(var(--muted));
|
||||
padding: 0.1rem 0.35rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
@@ -236,7 +372,7 @@
|
||||
}
|
||||
|
||||
.markdown-preview blockquote {
|
||||
border-left: 3px solid hsl(var(--border));
|
||||
border-left: 4px solid hsl(var(--border));
|
||||
padding-left: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Button } from '../components/ui/button'
|
||||
import { Badge } from '../components/ui/badge'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
|
||||
import { Input } from '../components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select'
|
||||
@@ -47,54 +48,83 @@ export default function AdminPanel(props: Props) {
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Card className="control-shell bg-card/95">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<Card className="control-shell overflow-hidden bg-card/95">
|
||||
<CardHeader className="gap-5 border-b-[3px] border-border bg-[linear-gradient(135deg,hsl(var(--accent)/0.18),transparent_70%)] pb-6">
|
||||
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>{t('admin')}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="font-display text-3xl">{t('admin')}</CardTitle>
|
||||
<CardDescription className="uppercase tracking-[0.14em]">{admin}</CardDescription>
|
||||
<CardTitle className="font-display text-5xl md:text-6xl">{t('admin')}</CardTitle>
|
||||
<CardDescription className="mt-2 uppercase tracking-[0.14em]">{admin}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" onClick={onLogout}>
|
||||
<LogOut className="mr-2 h-4 w-4" /> {t('logout')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 lg:grid-cols-2">
|
||||
<Card className="border-2 border-border bg-background/70 shadow-[5px_5px_0_hsl(var(--shadow-strong))]">
|
||||
<CardHeader><CardTitle className="font-display text-2xl">{t('createUser')}</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="grid gap-6 p-6 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
|
||||
<div className="brutal-block p-6">
|
||||
<div className="mb-5 space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('createUser')}</p>
|
||||
<CardTitle className="font-display text-3xl">{t('createUser')}</CardTitle>
|
||||
<CardDescription>{t('configuredFromEnv')}</CardDescription>
|
||||
</div>
|
||||
<form className="space-y-3" onSubmit={onCreateUser}>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('username')}</p>
|
||||
<Input value={newUsername} onChange={(e) => setNewUsername(e.target.value)} placeholder={t('username')} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('password')}</p>
|
||||
<Input type="password" minLength={10} value={newPass} onChange={(e) => setNewPass(e.target.value)} placeholder={t('password')} required />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('theme')}</p>
|
||||
<Select value={newTheme} onValueChange={setNewTheme}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{themeOptions.map((opt) => <SelectItem key={opt} value={opt}>{t(opt)}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-muted-foreground">{t('mode')}</p>
|
||||
<Select value={newMode} onValueChange={setNewMode}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>{modeOptions.map((opt) => <SelectItem key={opt} value={opt}>{opt}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full" type="submit">{t('createUser')}</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-2 border-border bg-background/70 shadow-[5px_5px_0_hsl(var(--shadow-strong))]">
|
||||
<CardHeader><CardTitle className="font-display text-2xl">{t('users')}</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="brutal-block p-6">
|
||||
<div className="mb-6 flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('users')}</p>
|
||||
<CardTitle className="font-display text-3xl">{t('users')}</CardTitle>
|
||||
</div>
|
||||
<Badge variant="secondary">{users.length} {t('users')}</Badge>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{users.map((u) => (
|
||||
<div key={u.id} className="flex items-center justify-between border-2 border-border bg-background/85 p-2 text-sm">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-semibold uppercase tracking-[0.1em]">{u.username}</p>
|
||||
<p className="text-[11px] uppercase tracking-[0.12em] text-muted-foreground">#{u.id} · {u.theme}/{u.colorMode}</p>
|
||||
<div key={u.id} className="brutal-block flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<p className="truncate font-display text-xl">{u.username}</p>
|
||||
<div className="flex flex-wrap gap-2 text-[10px] font-black uppercase tracking-[0.16em]">
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-card px-2 py-1 shadow-[3px_3px_0_hsl(var(--shadow-strong))]">#{u.id}</span>
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-accent px-2 py-1 text-accent-foreground shadow-[3px_3px_0_hsl(var(--shadow-strong))]">{u.theme}</span>
|
||||
<span className="inline-flex items-center border-[3px] border-border bg-muted px-2 py-1 shadow-[3px_3px_0_hsl(var(--shadow-strong))]">{u.colorMode}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="sm" variant="destructive" onClick={() => onDeleteUser(u.id)}>{t('delete')}</Button>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Button } from '../components/ui/button'
|
||||
import { CardContent } from '../components/ui/card'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../components/ui/dialog'
|
||||
import { Input } from '../components/ui/input'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
type DriveView = 'all' | 'folders' | 'documents' | 'media' | 'archives' | 'tagged' | 'recent'
|
||||
|
||||
@@ -48,18 +49,37 @@ export default function TransferSection(props: Props) {
|
||||
onDownloadSelected,
|
||||
} = props
|
||||
|
||||
const pathLabel = path === '/' ? t('root') : path
|
||||
const viewButton = (active: boolean) =>
|
||||
cn(
|
||||
'border-[3px] px-4 py-3 text-left text-xs font-black uppercase tracking-[0.14em] transition-[transform,box-shadow,background-color] duration-150',
|
||||
active
|
||||
? 'border-border bg-primary text-primary-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))]'
|
||||
: 'border-border bg-card text-foreground shadow-[4px_4px_0_hsl(var(--shadow-strong))] hover:-translate-x-1 hover:-translate-y-1 hover:bg-muted hover:shadow-[8px_8px_0_hsl(var(--shadow-strong))]',
|
||||
)
|
||||
|
||||
return (
|
||||
<CardContent className="space-y-3 p-4 md:p-5">
|
||||
<CardContent className="space-y-5 p-5 md:p-6">
|
||||
<div className="brutal-block space-y-4 p-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="font-display text-xl font-semibold">{username}</p>
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">{t('accountSubtitle')}</p>
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('accountSubtitle')}</p>
|
||||
<p className="font-display text-4xl">{username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="brutal-chip">{pathLabel}</span>
|
||||
{selectedCount > 0 ? <span className="brutal-chip">{selectedCount} {t('selected')}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Button className="w-full justify-start" onClick={onUploadFile}>{t('upload')}</Button>
|
||||
<Button className="w-full justify-start" variant="outline" onClick={onUploadFolder}>{t('uploadFolder')}</Button>
|
||||
<Button className="w-full justify-start" variant="secondary" onClick={onUploadFolder}>{t('uploadFolder')}</Button>
|
||||
<Button className="w-full justify-start" variant="outline" disabled={selectedCount === 0} onClick={onDownloadSelected}>
|
||||
{t('download')} {selectedCount > 0 ? `(${selectedCount})` : ''}
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog open={folderDialog} onOpenChange={setFolderDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="w-full justify-start" variant="outline">{t('newFolder')}</Button>
|
||||
@@ -73,24 +93,28 @@ export default function TransferSection(props: Props) {
|
||||
<Button onClick={onCreateFolder}>{t('newFolder')}</Button>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<div className="grid gap-1 border-2 border-border bg-muted/50 p-2 text-xs uppercase tracking-[0.14em]">
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'all' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('all')}>{t('allFiles')} ({filesCount})</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'folders' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('folders')}>{t('folders')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'documents' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('documents')}>{t('documents')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'media' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('media')}>{t('media')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'archives' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('archives')}>{t('archives')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'tagged' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('tagged')}>{t('tagged')}</button>
|
||||
<button type="button" className={`border px-2 py-1 text-left ${view === 'recent' ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setView('recent')}>{t('recent')}</button>
|
||||
|
||||
<div className="brutal-block space-y-3 p-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('allFiles')}</p>
|
||||
<div className="grid gap-2">
|
||||
<button type="button" className={viewButton(view === 'all')} onClick={() => setView('all')}>{t('allFiles')} ({filesCount})</button>
|
||||
<button type="button" className={viewButton(view === 'folders')} onClick={() => setView('folders')}>{t('folders')}</button>
|
||||
<button type="button" className={viewButton(view === 'documents')} onClick={() => setView('documents')}>{t('documents')}</button>
|
||||
<button type="button" className={viewButton(view === 'media')} onClick={() => setView('media')}>{t('media')}</button>
|
||||
<button type="button" className={viewButton(view === 'archives')} onClick={() => setView('archives')}>{t('archives')}</button>
|
||||
<button type="button" className={viewButton(view === 'tagged')} onClick={() => setView('tagged')}>{t('tagged')}</button>
|
||||
<button type="button" className={viewButton(view === 'recent')} onClick={() => setView('recent')}>{t('recent')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-2 border-border bg-muted/50 p-2 text-xs uppercase tracking-[0.12em]">
|
||||
<p className="font-semibold text-muted-foreground">{t('tags')}</p>
|
||||
<button type="button" className={`block w-full border px-2 py-1 text-left ${!activeTag ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setActiveTag('')}># all</button>
|
||||
<div className="brutal-block space-y-3 p-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.22em] text-muted-foreground">{t('tags')}</p>
|
||||
<button type="button" className={viewButton(!activeTag)} onClick={() => setActiveTag('')}># {t('all')}</button>
|
||||
{Object.entries(tagCounts)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 8)
|
||||
.map(([tag, count]) => (
|
||||
<button type="button" key={tag} className={`block w-full border px-2 py-1 text-left ${activeTag === tag ? 'border-border bg-background font-semibold' : 'border-transparent hover:border-border hover:bg-background/70'}`} onClick={() => setActiveTag(tag)}>#{tag} ({count})</button>
|
||||
<button type="button" key={tag} className={viewButton(activeTag === tag)} onClick={() => setActiveTag(tag)}>#{tag} ({count})</button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user