fitzy/Jotzy
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

Added theming and fix css.

Browse source 
Added unparsed view
This commit is contained in:
Jamitz 2026-01-15 22:26:08 +00:00
parent e0a8e503b9
commit eb52756c6d
24 changed files with 515 additions and 855 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -23,3 +23,5 @@ frontend/src/assets/fontawesome/svg/0.svg
!square-check.svg
!code-simple.svg
!quote-left.svg
!gear.svg
frontend/dist/*

2
backend/app/database.py
View file

@ -1,7 +1,9 @@
import os
from dotenv import load_dotenv
from sqlmodel import Session, SQLModel, create_engine # type: ignore
load_dotenv()
# Get database URL from environment, with proper fallback
DATABASE_URL = os.getenv("DATABASE_URL")

3
backend/app/main.py
View file

@ -8,8 +8,7 @@ from app.routes import auth, folders, notes, tags
app = FastAPI(title="Notes API")
# CORS - configure via environment variable
cors_origins = os.getenv("CORS_ORIGINS", "http://localhost:80").split(",")
cors_origins = os.getenv("CORS_ORIGINS", "http://localhost:5173").split(",")
app.add_middleware(
CORSMiddleware,
allow_origins=cors_origins,

17
backend/app/routes/auth.py
View file

@ -1,13 +1,12 @@
from datetime import datetime
from typing import Optional
from fastapi import APIRouter, Cookie, Depends, HTTPException, Request, Response
from sqlmodel import Session, SQLModel, select
from app.auth import create_session, hash_password, require_auth, verify_password
from app.database import get_session
from app.models import Session as SessionModel
from app.models import User
from fastapi import APIRouter, Cookie, Depends, HTTPException, Request, Response
from sqlmodel import Session, SQLModel, select
router = APIRouter(prefix="/auth", tags=["auth"])
@ -30,8 +29,8 @@ class UserResponse(SQLModel):
id: int
username: str
email: str
salt: str # Client needs this for key derivation
wrapped_master_key: str # Client needs this to unwrap the master key
salt: str
wrapped_master_key: str
@router.post("/register")
@ -72,7 +71,7 @@ def register(
key="session_id",
value=session_id,
httponly=True,
secure=True, # HTTPS only in production
secure=True,
samesite="lax",
max_age=30 * 24 * 60 * 60, # 30 days
)
@ -147,15 +146,15 @@ def list_sessions(
return {"sessions": sessions}
@router.delete("/sessions/{session_token}") # Renamed from session_id
@router.delete("/sessions/{session_token}")
def revoke_session(
session_token: str, # Renamed to avoid conflict with Cookie parameter
session_token: str,
current_user: User = Depends(require_auth),
db: Session = Depends(get_session),
):
session = db.exec(
select(SessionModel)
.where(SessionModel.session_id == session_token) # Use renamed variable
.where(SessionModel.session_id == session_token)
.where(SessionModel.user_id == current_user.id)
).first()

842
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
frontend/package.json
View file

@ -50,7 +50,7 @@
"openapi-typescript": "^7.10.1",
"type-fest": "^5.3.1",
"typescript": "^5.9.3",
"vite": "^5.4.21",
"vite": "^7.3.1",
"vite-plugin-svgr": "^4.5.0",
"vitest": "^4.0.15"
}

1
frontend/src/assets/fontawesome/svg/gear.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-secondary" d="M59.9 186.6l26.2 24.9c24 22.8 24 66.2 0 89L59.9 325.4c8.5 24 21.5 46.4 38 65.7l34.6-10.2c31.8-9.4 69.4 12.3 77.2 44.6l8.5 35.1c24.6 4.5 51.3 4.5 75.9 0l8.5-35.1c7.8-32.3 45.3-53.9 77.2-44.6l34.6 10.2c16.5-19.3 29.5-41.7 38-65.7l-26.2-24.9c-24-22.8-24-66.2 0-89l26.2-24.9c-8.5-24-21.5-46.4-38-65.7l-34.6 10.2c-31.8 9.4-69.4-12.3-77.2-44.6l-8.5-35.1c-24.6-4.5-51.3-4.5-75.9 0l-8.5 35.1c-7.8 32.3-45.3 53.9-77.2 44.6L97.9 120.9c-16.5 19.3-29.5 41.7-38 65.7zM352 256a96 96 0 1 1 -192 0 96 96 0 1 1 192 0z"/><path class="fa-primary" d="M256 0c17 0 33.6 1.7 49.8 4.8c7.9 1.5 21.8 6.1 29.4 20.1c2 3.7 3.6 7.6 4.6 11.8l9.3 38.5C350.5 81 360.3 86.7 366 85l38-11.2c4-1.2 8.1-1.8 12.2-1.9c16.1-.5 27 9.4 32.3 15.4c22.1 25.1 39.1 54.6 49.9 86.3c2.6 7.6 5.6 21.8-2.7 35.4c-2.2 3.6-4.9 7-8 10L459 246.3c-4.2 4-4.2 15.5 0 19.5l28.7 27.3c3.1 3 5.8 6.4 8 10c8.2 13.6 5.2 27.8 2.7 35.4c-10.8 31.7-27.8 61.1-49.9 86.3c-5.3 6-16.3 15.9-32.3 15.4c-4.1-.1-8.2-.8-12.2-1.9L366 427c-5.7-1.7-15.5 4-16.9 9.8l-9.3 38.5c-1 4.2-2.6 8.2-4.6 11.8c-7.7 14-21.6 18.5-29.4 20.1C289.6 510.3 273 512 256 512s-33.6-1.7-49.8-4.8c-7.9-1.5-21.8-6.1-29.4-20.1c-2-3.7-3.6-7.6-4.6-11.8l-9.3-38.5c-1.4-5.8-11.2-11.5-16.9-9.8l-38 11.2c-4 1.2-8.1 1.8-12.2 1.9c-16.1 .5-27-9.4-32.3-15.4c-22-25.1-39.1-54.6-49.9-86.3c-2.6-7.6-5.6-21.8 2.7-35.4c2.2-3.6 4.9-7 8-10L53 265.7c4.2-4 4.2-15.5 0-19.5L24.2 218.9c-3.1-3-5.8-6.4-8-10C8 195.3 11 181.1 13.6 173.6c10.8-31.7 27.8-61.1 49.9-86.3c5.3-6 16.3-15.9 32.3-15.4c4.1 .1 8.2 .8 12.2 1.9L146 85c5.7 1.7 15.5-4 16.9-9.8l9.3-38.5c1-4.2 2.6-8.2 4.6-11.8c7.7-14 21.6-18.5 29.4-20.1C222.4 1.7 239 0 256 0zM218.1 51.4l-8.5 35.1c-7.8 32.3-45.3 53.9-77.2 44.6L97.9 120.9c-16.5 19.3-29.5 41.7-38 65.7l26.2 24.9c24 22.8 24 66.2 0 89L59.9 325.4c8.5 24 21.5 46.4 38 65.7l34.6-10.2c31.8-9.4 69.4 12.3 77.2 44.6l8.5 35.1c24.6 4.5 51.3 4.5 75.9 0l8.5-35.1c7.8-32.3 45.3-53.9 77.2-44.6l34.6 10.2c16.5-19.3 29.5-41.7 38-65.7l-26.2-24.9c-24-22.8-24-66.2 0-89l26.2-24.9c-8.5-24-21.5-46.4-38-65.7l-34.6 10.2c-31.8 9.4-69.4-12.3-77.2-44.6l-8.5-35.1c-24.6-4.5-51.3-4.5-75.9 0zM208 256a48 48 0 1 0 96 0 48 48 0 1 0 -96 0zm48 96a96 96 0 1 1 0-192 96 96 0 1 1 0 192z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

16
frontend/src/components/contextMenus/FolderContextMenu.tsx
View file

@ -57,7 +57,7 @@ export const FolderContextMenu: React.FC<FolderContextMenuProps> = ({
try {
await createFolderMutation.mutateAsync({
name: "New Folder",
parent_id: folder.id,
parentId: folder.id,
});
onClose();
} catch (error) {
@ -73,7 +73,7 @@ export const FolderContextMenu: React.FC<FolderContextMenuProps> = ({
top: y,
left: x,
}}
className="bg-ctp-surface0 border border-ctp-surface2 rounded-md shadow-lg p-2 min-w-[200px] z-50"
className="bg-overlay0 border border-surface1 rounded-md shadow-lg p-2 min-w-[200px] z-50"
onClick={(e) => e.stopPropagation()}
>
<input
@ -89,7 +89,7 @@ export const FolderContextMenu: React.FC<FolderContextMenuProps> = ({
}}
onBlur={handleRename}
autoFocus
className="w-full px-2 py-1 bg-ctp-surface1 border border-ctp-surface2 rounded text-sm text-ctp-text focus:outline-none focus:border-ctp-mauve"
className="w-full px-2 py-1 bg-surface1 border border-surface1 rounded text-sm text-text focus:outline-none focus:border-accent"
/>
</div>
);
@ -102,25 +102,25 @@ export const FolderContextMenu: React.FC<FolderContextMenuProps> = ({
top: y,
left: x,
}}
className="bg-ctp-surface0 border border-ctp-surface2 rounded-md shadow-lg py-1 min-w-[160px] z-50"
className="bg-overlay0 border border-surface1 rounded-md shadow-lg py-1 min-w-[160px] z-50"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={() => setIsRenaming(true)}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-surface1 text-sm text-ctp-text transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-surface1 text-sm text-text transition-colors"
>
Rename
</button>
<button
onClick={handleCreateSubfolder}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-surface1 text-sm text-ctp-text transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-surface1 text-sm text-text transition-colors"
>
New Subfolder
</button>
<div className="border-t border-ctp-surface2 my-1" />
<div className="border-t border-surface1 my-1" />
<button
onClick={handleDelete}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-red hover:text-ctp-base text-sm text-ctp-red transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-danger hover:text-base text-sm text-danger transition-colors"
>
Delete
</button>

12
frontend/src/components/contextMenus/NoteContextMenu.tsx
View file

@ -36,7 +36,7 @@ export const NoteContextMenu: React.FC<NoteContextMenuProps> = ({
await createNoteMutation.mutateAsync({
title: `${note.title} (Copy)`,
content: note.content,
folder_id: note.folder_id || null,
folderId: note.folderId || null,
});
onClose();
} catch (error) {
@ -57,25 +57,25 @@ export const NoteContextMenu: React.FC<NoteContextMenuProps> = ({
top: y,
left: x,
}}
className="bg-ctp-surface0 border border-ctp-surface2 rounded-md shadow-lg py-1 min-w-[160px] z-50"
className="bg-overlay0 border border-surface1 rounded-md shadow-lg py-1 min-w-[160px] z-50"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={handleRename}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-surface1 text-sm text-ctp-text transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-surface1 text-sm text-text transition-colors"
>
Rename
</button>
<button
onClick={handleDuplicate}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-surface1 text-sm text-ctp-text transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-surface1 text-sm text-text transition-colors"
>
Duplicate
</button>
<div className="border-t border-ctp-surface2 my-1" />
<div className="border-t border-surface1 my-1" />
<button
onClick={handleDelete}
className="w-full text-left px-3 py-1.5 hover:bg-ctp-red hover:text-ctp-base text-sm text-ctp-red transition-colors"
className="w-full text-left px-3 py-1.5 hover:bg-danger hover:text-base text-sm text-danger transition-colors"
>
Delete
</button>

2
frontend/src/contexts/ContextMenuContext.tsx
View file

@ -105,7 +105,7 @@ export const ContextMenuProvider = ({
e.preventDefault();
closeContextMenu();
}}
className=" h-screen w-screen bg-ctp-crust/25 z-40 fixed top-0 left-0"
className=" h-screen w-screen bg-surface1/25 z-40 fixed top-0 left-0"
></div>
)}
{children}

68
frontend/src/main.css
View file

@ -2,44 +2,28 @@
@plugin "@tailwindcss/typography";
@import "@catppuccin/tailwindcss/macchiato.css";
@theme {
--color-base:
;
}
@theme {
/* Map Tailwind classes to CSS variables */
--color-ctp-base: var(--color-ctp-base);
--color-ctp-mantle: var(--color-ctp-mantle);
--color-ctp-crust: var(--color-ctp-crust);
--color-ctp-text: var(--color-ctp-text);
--color-ctp-subtext0: #a5adcb;
--color-ctp-overlay0: #6e738d;
--color-ctp-mauve: var(--color-ctp-mauve);
--color-ctp-blue: var(--color-ctp-blue);
--color-ctp-green: #a6da95;
--color-ctp-red: #ed8796;
--color-ctp-yellow: #eed49f;
--color-ctp-teal: #8bd5ca;
--color-ctp-sapphire: #7dc4e4;
--color-ctp-peach: #f5a97f;
/* Surface colors */
--color-ctp-surface0: #363a4f;
--color-ctp-surface1: #494d64;
--color-ctp-surface2: #5b6078;
}
/* Default values (Macchiato) - injected by JS, but good as fallback */
:root {
--color-ctp-base: #24273a;
--color-ctp-mantle: #1e2030;
--color-ctp-crust: #181926;
--color-ctp-text: #cad3f5;
--color-ctp-mauve: #c6a0f6;
--color-ctp-blue: #8aadf4;
--black: 15, 18, 25;
--gray: 96, 115, 159;
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
--box-shadow:
0 2px 6px rgba(30, 32, 48, 0.4), 0 8px 24px rgba(30, 32, 48, 0.5),
0 16px 32px rgba(30, 32, 48, 0.6);
}
@theme {
--color-base: #24273a;
--color-surface0: #1e2030;
--color-surface1: #181926;
--color-overlay0: #363a4f;
--color-overlay1: #494d64;
--color-text: #cad3f5;
--color-subtext: #b8c0e0;
--color-accent: #e2a16f;
--color-danger: #e26f6f;
--color-success: #6fe29b;
--color-warn: #e2c56f;
}
/* Override MDXEditor and all its children */
@ -47,19 +31,19 @@
._mdxeditor-root-content-editable,
.mdxeditor-root-contenteditable,
div[contenteditable="true"] {
color: var(--color-ctp-text) !important;
color: var(--color-text) !important;
}
._listItemChecked_1tncs_73::before {
--accentSolid: var(--color-ctp-mauve) !important;
border-color: var(--color-ctp-mauve-900) !important;
--accentSolid: var(--color-accent) !important;
border-color: var(--color-accent) !important;
border: 2px;
}
._listItemChecked_1tncs_73::after {
border-color: var(--color-ctp-mauve-900) !important;
border-color: var(--color-accent) !important;
}
.standard-input {
@apply border border-ctp-mauve rounded-sm px-2 py-1 w-full focus:outline-none focus:ring-2 focus:ring-ctp-mauve bg-ctp-base text-ctp-text placeholder:text-ctp-overlay0;
@apply border border-overlay0 rounded-sm px-2 py-1 w-full focus:outline-none focus:ring-2 focus:ring-accent bg-base text-text placeholder:text-overlay1;
}

72
frontend/src/pages/Home/Home.tsx
View file

@ -1,4 +1,10 @@
import { useEffect, useRef, useState } from "react";
import {
ChangeEvent,
ChangeEventHandler,
useEffect,
useRef,
useState,
} from "react";
import "../../main.css";
import { AnimatePresence, motion } from "framer-motion";
import { useAuthStore } from "@/stores/authStore";
@ -26,7 +32,7 @@ function Home() {
} | null>(null);
const { encryptionKey } = useAuthStore();
const { showModal, setUpdating, selectedNote } = useUIStore();
const { showModal, setUpdating, selectedNote, editorView } = useUIStore();
const newFolderRef = useRef<HTMLInputElement>(null);
const updateNoteMutation = useUpdateNote();
@ -115,33 +121,60 @@ function Home() {
}
};
const setUnparsedContent = (event: ChangeEvent<HTMLTextAreaElement>) => {
if (editingNote) {
setEditingNote({ ...editingNote, content: event.target.value });
}
};
return (
<div className="flex bg-ctp-base h-screen text-ctp-text overflow-hidden">
<div className="flex bg-base h-screen text-text overflow-hidden">
{/* Sidebar */}
<AnimatePresence>{showModal && <Modal />}</AnimatePresence>
<Sidebar />
{/* Main editor area */}
<div className="flex flex-col w-full h-screen overflow-y-auto items-center justify-center">
{/*<Editor />*/}
<div className="h-full lg:w-3xl w-full">
<div className="flex flex-col w-full h-screen overflow-hidden">
{" "}
{editingNote ? (
<>
<input
type="text"
id="noteTitle"
name=""
placeholder="Untitled note..."
value={editingNote?.title || ""}
value={editingNote.title || ""}
onChange={(e) => setTitle(e.target.value)}
className="w-full p-4 pb-0 text-3xl font-semibold bg-transparent focus:outline-none border-transparent focus:border-ctp-mauve transition-colors placeholder:text-ctp-overlay0 text-ctp-text"
className="w-full self-center p-4 pb-2 pt-2 text-3xl font-semibold focus:outline-none border-transparent focus:border-accent transition-colors placeholder:text-overlay0 text-text bg-surface1"
/>
<div className="h-full lg:w-3xl w-full mx-auto overflow-y-hidden">
{" "}
{editorView == "parsed" ? (
<TiptapEditor
key={editingNote?.id}
content={editingNote?.content || ""}
key={editingNote.id}
content={editingNote.content || ""}
onChange={setContent}
/>
) : (
<textarea
value={editingNote.content || ""}
className="w-full font-mono p-4 bg-transparent focus:outline-none resize-none text-text"
style={{
minHeight: "calc(100vh - 55px)",
}}
onChange={setUnparsedContent}
/>
)}
</div>
</>
) : (
<div className="flex items-center justify-center h-full text-overlay0">
<div className="text-center">
<PlusIcon className="w-16 h-16 mx-auto mb-4 fill-current opacity-50" />
<p className="text-lg">Select a note or create a new one</p>
</div>
</div>
)}
</div>
<StatusIndicator />
@ -152,14 +185,16 @@ function Home() {
export default Home;
const Modal = () => {
const { setShowModal } = useUIStore();
const { setShowModal, modalContent, showModal } = useUIStore();
const ModalContent = modalContent;
if (!showModal || !ModalContent) return null;
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setShowModal(false)}
className="fixed inset-0 h-screen w-screen flex items-center justify-center bg-ctp-crust/70 backdrop-blur-sm z-50"
className="fixed inset-0 h-screen w-screen flex items-center justify-center bg-crust/70 backdrop-blur-sm z-50"
>
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
@ -167,16 +202,17 @@ const Modal = () => {
exit={{ opacity: 0, scale: 0.95, y: 20 }}
transition={{ type: "spring", duration: 0.3 }}
onClick={(e) => e.stopPropagation()}
className="relative w-full max-w-md mx-4 bg-ctp-base rounded-xl border-ctp-surface2 border p-8 shadow-2xl"
className="relative w-full max-w-md mx-4 bg-base rounded-xl border-surface1 border p-8 shadow-2xl"
>
<button
onClick={() => setShowModal(false)}
className="absolute top-4 right-4 p-2 hover:bg-ctp-surface0 rounded-sm transition-colors group"
className="absolute top-4 right-4 p-2 hover:bg-surface0 rounded-sm transition-colors group"
aria-label="Close modal"
>
<XmarkIcon className="w-5 h-5 fill-ctp-overlay0 group-hover:fill-ctp-text transition-colors" />
<XmarkIcon className="w-5 h-5 fill-overlay0 group-hover:fill-text transition-colors" />
</button>
<Login />
<ModalContent />
{/*<Login />*/}
</motion.div>
</motion.div>
);

25
frontend/src/pages/Home/components/StatusIndicator.tsx
View file

@ -6,32 +6,43 @@ import CheckIcon from "../../../assets/fontawesome/svg/circle-check.svg?react";
import SpinnerIcon from "../../../assets/fontawesome/svg/rotate.svg?react";
// @ts-ignore
import WarningIcon from "../../../assets/fontawesome/svg/circle-exclamation.svg?react";
import { Login } from "@/pages/Login";
export const StatusIndicator = () => {
const { encryptionKey } = useAuthStore();
const { updating, setShowModal } = useUIStore();
const { updating, setShowModal, editorView, setEditorView, setModalContent } =
useUIStore();
return (
<div
className="fixed bottom-2 right-3 bg-ctp-surface0 border border-ctp-surface2 rounded-sm px-2 py-0.5 flex items-center gap-2.5 shadow-lg backdrop-blur-sm"
className="fixed bottom-2 right-3 bg-surface0 border border-surface1 rounded-sm px-2 py-0.5 flex items-center gap-2.5 shadow-lg backdrop-blur-sm"
onClick={() => {
if (!encryptionKey) {
setModalContent(Login);
setShowModal(true);
}
}}
>
<div
className="select-none"
onClick={() =>
setEditorView(editorView == "parsed" ? "unparsed" : "parsed")
}
>
{editorView}
</div>
{!encryptionKey ? (
<WarningIcon className="h-4 w-4 my-1 [&_.fa-primary]:fill-ctp-yellow [&_.fa-secondary]:fill-ctp-orange" />
<WarningIcon className="h-4 w-4 my-1 [&_.fa-primary]:fill-warn [&_.fa-secondary]:fill-orange" />
) : updating ? (
<>
<SpinnerIcon className="animate-spin h-4 w-4 [&_.fa-primary]:fill-ctp-blue [&_.fa-secondary]:fill-ctp-sapphire" />
{/*<span className="text-sm text-ctp-subtext0 font-medium">
<SpinnerIcon className="animate-spin h-4 w-4 [&_.fa-primary]:fill-warn [&_.fa-secondary]:fill-sapphire" />
{/*<span className="text-sm text-subtext font-medium">
Saving...
</span>*/}
</>
) : (
<>
<CheckIcon className="h-4 w-4 [&_.fa-primary]:fill-ctp-green [&_.fa-secondary]:fill-ctp-teal" />
{/*<span className="text-sm text-ctp-subtext0 font-medium">Saved</span>*/}
<CheckIcon className="h-4 w-4 [&_.fa-primary]:fill-success [&_.fa-secondary]:fill-teal" />
{/*<span className="text-sm text-subtext font-medium">Saved</span>*/}
</>
)}
</div>

19
frontend/src/pages/Home/components/sidebar/SideBar.tsx
View file

@ -41,7 +41,7 @@ export const Sidebar = () => {
const { encryptionKey } = useAuthStore();
const { setSideBarResize, sideBarResize } = useUIStore();
const { setSideBarResize, sideBarResize, setColourScheme } = useUIStore();
useEffect(() => {
if (newFolder && newFolderRef.current) {
newFolderRef.current.focus();
@ -163,7 +163,7 @@ export const Sidebar = () => {
>
<div className="flex-row-reverse flex h-screen">
<div
className="h-full bg-ctp-surface0 w-0.5 hover:cursor-ew-resize hover:bg-ctp-mauve transition-colors"
className="h-full bg-surface1 w-0.5 hover:cursor-ew-resize hover:bg-accent/50 transition-colors"
onMouseDown={handleMouseDown}
></div>
<div
@ -171,7 +171,7 @@ export const Sidebar = () => {
style={{ width: `${sideBarResize}px` }}
>
<SidebarHeader setNewFolder={setNewFolder} />
<div className="flex-1 overflow-y-auto bg-ctp-mantle border-r border-ctp-surface2">
<div className="flex-1 overflow-y-auto bg-surface1 border-r border-surface1">
<>
<div
className="w-full p-4 sm:block hidden"
@ -203,14 +203,14 @@ export const Sidebar = () => {
{/* Loading state */}
{isLoading && (
<div className="flex items-center justify-center py-8 text-ctp-subtext0">
<div className="flex items-center justify-center py-8 text-subtext0">
<div className="text-sm">Loading folders...</div>
</div>
)}
{/* Error state */}
{error && (
<div className="flex items-center justify-center py-8 text-ctp-red">
<div className="flex items-center justify-center py-8 text-danger">
<div className="text-sm">Failed to load folders</div>
</div>
)}
@ -236,16 +236,19 @@ export const Sidebar = () => {
</>
)}
</div>
{/*<div className="fixed bottom-1 left-2">
<button onClick={setColour}>purple</button>
</div>*/}
<DragOverlay>
{activeItem?.type === "note" && (
<div className="bg-ctp-surface0 rounded-md px-2 py-1 shadow-lg border border-ctp-mauve">
<div className="bg-surface0 rounded-md px-2 py-1 shadow-lg border border-accent">
{activeItem.data.title}
</div>
)}
{activeItem?.type === "folder" && (
<div className="bg-ctp-surface0 rounded-md px-1 py-0.5 shadow-lg flex items-center gap-1 text-sm">
<FolderIcon className="w-3 h-3 fill-ctp-mauve mr-1" />
<div className="bg-surface0 rounded-md px-1 py-0.5 shadow-lg flex items-center gap-1 text-sm">
<FolderIcon className="w-3 h-3 fill-accent mr-1" />
{activeItem.data.name}
</div>
)}

4
frontend/src/pages/Home/components/sidebar/subcomponents/DraggableNote.tsx
View file

@ -39,8 +39,8 @@ export const DraggableNote = ({ note }: { note: NoteRead }) => {
}}
className={` rounded-sm px-2 mb-0.5 select-none cursor-pointer font-light transition-all duration-150 flex items-center gap-1 ${
selectedNote?.id === note.id
? "bg-ctp-mauve text-ctp-base"
: "hover:bg-ctp-surface1"
? "bg-accent text-base"
: "hover:bg-surface1"
}`}
>
<span className="truncate">

4
frontend/src/pages/Home/components/sidebar/subcomponents/DroppableFolder.tsx
View file

@ -65,10 +65,10 @@ export const DroppableFolder = ({
>
{(folder.notes?.length ?? 0) > 0 && (
<CaretRightIcon
className={`w-4 h-4 min-h-4 min-w-4 mr-1 transition-all duration-200 ease-in-out ${collapse ? "rotate-90" : ""} fill-ctp-mauve`}
className={`w-4 h-4 min-h-4 min-w-4 mr-1 transition-all duration-200 ease-in-out ${collapse ? "rotate-90" : ""} fill-accent`}
/>
)}
<FolderIcon className="w-4 h-4 min-h-4 min-w-4 fill-ctp-mauve mr-1" />
<FolderIcon className="w-4 h-4 min-h-4 min-w-4 fill-accent mr-1" />
<span className="truncate">{folder.name}</span>
</div>
</div>

2
frontend/src/pages/Home/components/sidebar/subcomponents/FolderTree.tsx
View file

@ -29,7 +29,7 @@ export const FolderTree = ({ folder, depth = 0 }: FolderTreeProps) => {
className="overflow-hidden flex flex-col"
>
{/* The line container */}
<div className="ml-2 pl-3 border-l border-ctp-surface2">
<div className="ml-2 pl-3 border-l border-surface1">
{/* Notes */}
<div className="flex flex-col gap-0.5">
{folder.notes.map((note) => (

56
frontend/src/pages/Home/components/sidebar/subcomponents/SideBarHeader.tsx
View file

@ -5,16 +5,46 @@ import FolderPlusIcon from "@assets/fontawesome/svg/folder-plus.svg?react";
import TagsIcon from "@assets/fontawesome/svg/tags.svg?react";
// @ts-ignore
import FileCirclePlusIcon from "@assets/fontawesome/svg/file-circle-plus.svg?react";
// @ts-ignore
import GearIcon from "@assets/fontawesome/svg/gear.svg?react";
import { useUIStore } from "@/stores/uiStore";
import { useCreateNote } from "@/hooks/useFolders";
import { NoteCreate } from "@/api/notes";
import { Login } from "@/pages/Login";
import { ColourState } from "@/stores/uiStore";
const Test = () => {
const { colourScheme, setColourScheme } = useUIStore();
const handleColor = (key: string, value: string) => {
setColourScheme({
...colourScheme,
[key]: value,
});
};
return (
<>
{Object.entries(colourScheme).map(([key, value]) => (
<div key={key}>
<label>{key}</label>
<input
type="color"
value={value}
onChange={(e) => handleColor(key, e.target.value)}
/>
</div>
))}
</>
);
};
export const SidebarHeader = ({
setNewFolder,
}: {
setNewFolder: React.Dispatch<SetStateAction<boolean>>;
}) => {
const { selectedFolder } = useUIStore();
const { selectedFolder, setShowModal, setModalContent } = useUIStore();
const createNote = useCreateNote();
const handleCreate = async () => {
createNote.mutate({
@ -23,22 +53,34 @@ export const SidebarHeader = ({
folder_id: selectedFolder,
} as NoteCreate);
};
const handleSettings = () => {
setModalContent(Test);
setShowModal(true);
};
return (
<div className="w-full p-2 border-b border-ctp-surface2 bg-ctp-mantle">
<div className="flex items-center justify-around bg-ctp-surface0 rounded-lg p-1 gap-1">
<div className="w-full p-2 border-b border-surface1 bg-surface1">
<div className="flex items-center justify-around bg-surface0 rounded-lg p-1 gap-1">
<button
onClick={() => setNewFolder(true)}
className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
className="hover:bg-accent active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
title="New folder"
>
<FolderPlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
<FolderPlusIcon className="w-5 h-5 group-hover:fill-base transition-all duration-200 fill-accent" />
</button>
<button
onClick={handleCreate}
className="hover:bg-ctp-mauve active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
className="hover:bg-accent active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
title="New note"
>
<FileCirclePlusIcon className="w-5 h-5 group-hover:fill-ctp-base transition-all duration-200 fill-ctp-mauve" />
<FileCirclePlusIcon className="w-5 h-5 group-hover:fill-base transition-all duration-200 fill-accent" />
</button>
<button
onClick={handleSettings}
className="hover:bg-accent active:scale-95 group transition-all duration-200 rounded-md p-2 hover:shadow-md"
title="New note"
>
<GearIcon className="w-5 h-5 group-hover:fill-base transition-all duration-200 fill-accent" />
</button>
</div>
</div>

20
frontend/src/pages/Login.tsx
View file

@ -30,14 +30,10 @@ export const Login = () => {
onSubmit={handleSubmit}
className="gap-4 flex flex-col max-w-md mx-auto"
>
<h2 className="text-2xl font-semibold text-ctp-text mb-2">
Welcome Back
</h2>
<h2 className="text-2xl font-semibold text-text mb-2">Welcome Back</h2>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-ctp-subtext0">
Username
</label>
<label className="text-sm font-medium text-subtext">Username</label>
<input
type="text"
placeholder="Enter your username"
@ -48,9 +44,7 @@ export const Login = () => {
</div>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-ctp-subtext0">
Password
</label>
<label className="text-sm font-medium text-subtext">Password</label>
<input
type="password"
className="standard-input"
@ -61,7 +55,7 @@ export const Login = () => {
</div>
{error && (
<div className="bg-ctp-red/10 border border-ctp-red text-ctp-red px-3 py-2 rounded-sm text-sm">
<div className="bg-danger/10 border border-danger text-danger px-3 py-2 rounded-sm text-sm">
{error}
</div>
)}
@ -72,11 +66,11 @@ export const Login = () => {
id="remember"
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
className="accent-ctp-mauve cursor-pointer"
className="accent-accent cursor-pointer"
/>
<label
htmlFor="remember"
className="text-sm text-ctp-subtext0 cursor-pointer"
className="text-sm text-subtext cursor-pointer"
>
Remember me
</label>
@ -84,7 +78,7 @@ export const Login = () => {
<button
type="submit"
className="bg-ctp-mauve hover:bg-ctp-mauve/90 text-ctp-base font-semibold px-4 py-2.5 rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-mauve focus:ring-offset-2 focus:ring-offset-ctp-base"
className="bg-accent hover:bg-accent/90 text-base font-semibold px-4 py-2.5 rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base"
>
Login
</button>

18
frontend/src/pages/Register.tsx
View file

@ -27,14 +27,10 @@ export const Register = () => {
onSubmit={handleSubmit}
className="gap-4 flex flex-col max-w-md mx-auto"
>
<h2 className="text-2xl font-semibold text-ctp-text mb-2">
Create Account
</h2>
<h2 className="text-2xl font-semibold text-text mb-2">Create Account</h2>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-ctp-subtext0">
Username
</label>
<label className="text-sm font-medium text-subtext">Username</label>
<input
type="text"
placeholder="Choose a username"
@ -45,7 +41,7 @@ export const Register = () => {
</div>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-ctp-subtext0">Email</label>
<label className="text-sm font-medium text-subtext">Email</label>
<input
type="email"
placeholder="Enter your email"
@ -56,9 +52,7 @@ export const Register = () => {
</div>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-ctp-subtext0">
Password
</label>
<label className="text-sm font-medium text-subtext">Password</label>
<input
type="password"
className="standard-input"
@ -69,14 +63,14 @@ export const Register = () => {
</div>
{error && (
<div className="bg-ctp-red/10 border border-ctp-red text-ctp-red px-3 py-2 rounded-sm text-sm">
<div className="bg-danger/10 border border-danger text-danger px-3 py-2 rounded-sm text-sm">
{error}
</div>
)}
<button
type="submit"
className="bg-ctp-mauve hover:bg-ctp-mauve/90 text-ctp-base font-semibold px-4 py-2.5 rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-mauve focus:ring-offset-2 focus:ring-offset-ctp-base"
className="bg-accent hover:bg-accent/90 text-base font-semibold px-4 py-2.5 rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-base"
>
Register
</button>

2
frontend/src/pages/Test.tsx
View file

@ -1,6 +1,6 @@
export const Test = () => {
return (
<div className="h-screen w-screen flex items-center justify-center bg-ctp-base p-4">
<div className="h-screen w-screen flex items-center justify-center bg-base p-4">
<input
type="text"
placeholder="Folder name..."

25
frontend/src/pages/TipTap.tsx
View file

@ -79,7 +79,12 @@ export const TiptapEditor = ({
}
return (
<div className="tiptap-editor pt-0!">
<div
className="tiptap-editor pt-0! overflow-y-scroll"
style={{
minHeight: "calc(100vh - 55px)",
}}
>
{/* Toolbar */}
{/*<div className="editor-toolbar">
<div className="toolbar-group">
@ -88,28 +93,28 @@ export const TiptapEditor = ({
className={editor.isActive("bold") ? "active" : ""}
title="Bold (Ctrl+B)"
>
<BoldIcon className="w-4 h-4 fill-ctp-text" />
<BoldIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive("italic") ? "active" : ""}
title="Italic (Ctrl+I)"
>
<ItalicIcon className="w-4 h-4 fill-ctp-text" />
<ItalicIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive("strike") ? "active" : ""}
title="Strikethrough"
>
<StrikethroughIcon className="w-4 h-4 fill-ctp-text" />
<StrikethroughIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
className={editor.isActive("code") ? "active" : ""}
title="Inline code"
>
<CodeIcon className="w-4 h-4 fill-ctp-text" />
<CodeIcon className="w-4 h-4 fill-text" />
</button>
</div>
@ -153,35 +158,35 @@ export const TiptapEditor = ({
className={editor.isActive("bulletList") ? "active" : ""}
title="Bullet list"
>
<ListUlIcon className="w-4 h-4 fill-ctp-text" />
<ListUlIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive("orderedList") ? "active" : ""}
title="Numbered list"
>
<ListOlIcon className="w-4 h-4 fill-ctp-text" />
<ListOlIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleTaskList().run()}
className={editor.isActive("taskList") ? "active" : ""}
title="Task list"
>
<SquareCheckIcon className="w-4 h-4 fill-ctp-text" />
<SquareCheckIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive("codeBlock") ? "active" : ""}
title="Code block"
>
<CodeBracketIcon className="w-4 h-4 fill-ctp-text" />
<CodeBracketIcon className="w-4 h-4 fill-text" />
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive("blockquote") ? "active" : ""}
title="Quote"
>
<QuoteLeftIcon className="w-4 h-4 fill-ctp-text" />
<QuoteLeftIcon className="w-4 h-4 fill-text" />
</button>
</div>

76
frontend/src/pages/tiptap.css
View file

@ -7,33 +7,37 @@
}
*::-webkit-scrollbar-track {
@apply bg-ctp-mantle rounded-full;
@apply bg-surface0 rounded-full;
}
*::-webkit-scrollbar-thumb {
@apply bg-ctp-surface2 rounded-full;
@apply bg-surface1 rounded-full;
}
*::-webkit-scrollbar-thumb:hover {
@apply bg-ctp-overlay0;
@apply bg-overlay0;
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-ctp-surface2) var(--color-ctp-mantle);
scrollbar-color: var(--color-surface1) var(--color-surface0);
}
.tiptap-editor {
@apply flex flex-col h-full bg-ctp-base;
@apply flex flex-col h-full bg-base;
}
.ProseMirror {
@apply text-ctp-text;
@apply text-text;
}
.editor-toolbar {
@apply flex gap-2 px-4 bg-ctp-mantle border-b border-ctp-surface2 flex-wrap items-center;
@apply flex gap-2 px-4 bg-surface0 border-b border-surface1 flex-wrap items-center;
}
.editor-content {
@apply h-full;
}
.toolbar-group {
@ -41,19 +45,19 @@
}
.toolbar-divider {
@apply w-px h-6 bg-ctp-surface2;
@apply w-px h-6 bg-surface1;
}
.editor-toolbar button {
@apply p-2 bg-transparent border-none rounded-sm text-ctp-text cursor-pointer transition-all duration-150 text-sm font-semibold min-w-8 flex items-center justify-center;
@apply p-2 bg-transparent border-none rounded-sm text-text cursor-pointer transition-all duration-150 text-sm font-semibold min-w-8 flex items-center justify-center;
}
.editor-toolbar button:hover:not(:disabled) {
@apply bg-ctp-surface0;
@apply bg-surface0;
}
.editor-toolbar button.active {
@apply bg-ctp-mauve text-ctp-base;
@apply bg-accent text-base;
}
.editor-toolbar button:disabled {
@ -66,59 +70,59 @@
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
@apply float-left text-ctp-overlay0 pointer-events-none h-0;
@apply float-left text-overlay0 pointer-events-none h-0;
}
.ProseMirror ul {
@apply mb-0!;
}
.ProseMirror h1 {
@apply text-3xl font-bold text-ctp-mauve mt-8 mb-4;
@apply text-3xl font-bold mt-6 mb-4 text-accent;
}
.ProseMirror h2 {
@apply text-2xl font-semibold text-ctp-blue mt-6 mb-3;
@apply text-2xl font-semibold text-accent mt-4 mb-3;
}
.ProseMirror h3 {
@apply text-xl font-semibold text-ctp-mauve mt-5 mb-2;
@apply text-xl font-semibold text-accent mt-5 mb-2;
}
.ProseMirror code {
@apply bg-ctp-surface0 text-ctp-peach px-1.5 py-0.5 rounded text-sm;
@apply bg-surface0 text-accent px-1.5 py-0.5 rounded text-sm;
font-family: "JetBrains Mono", "Fira Code", monospace;
}
.ProseMirror .code-block {
@apply bg-ctp-surface0 border border-ctp-surface2 rounded-sm p-4 my-4 overflow-x-auto;
@apply bg-surface0 border border-surface1 rounded-sm p-4 my-4 overflow-x-auto;
font-family: "JetBrains Mono", "Fira Code", monospace;
}
.ProseMirror .code-block code {
@apply bg-transparent p-0 text-ctp-text;
@apply bg-transparent p-0 text-text;
}
.ProseMirror blockquote {
@apply border-l-4 border-ctp-mauve pl-4 ml-0 text-ctp-subtext0 italic;
@apply border-l-4 border-accent pl-4 ml-0 text-subtext italic;
}
.ProseMirror hr {
@apply border-none border-t-2 border-ctp-surface2 my-8;
@apply border-none border-t-2 border-surface1 my-8;
}
.ProseMirror a {
@apply text-ctp-blue underline;
@apply text-accent underline;
}
.ProseMirror a:hover {
@apply text-ctp-sapphire;
@apply text-accent;
}
.ProseMirror strong {
@apply text-ctp-peach font-semibold;
@apply text-accent font-semibold;
}
.ProseMirror em {
@apply text-ctp-yellow;
@apply text-accent;
}
/* Task List (Checkboxes) */
@ -135,7 +139,7 @@
}
.ProseMirror ul[data-type="taskList"] > li > label input[type="checkbox"] {
@apply cursor-pointer m-0 accent-ctp-mauve;
@apply cursor-pointer m-0 accent-accent;
}
.ProseMirror ul[data-type="taskList"] > li > div {
@ -147,18 +151,18 @@
}
.ProseMirror li[data-checked="true"] > div > p {
@apply line-through text-ctp-overlay0;
@apply line-through text-text/40;
text-decoration-style: wavy;
text-decoration-thickness: 1px;
}
.ProseMirror u {
@apply decoration-ctp-mauve;
@apply decoration-accent;
/*text-decoration-style: wavy;*/
}
.ProseMirror li::marker {
@apply text-ctp-mauve;
@apply text-accent;
}
/* tiptap.css */
@ -172,3 +176,19 @@
margin-top: 0 !important;
margin-bottom: 0 !important;
}
hr {
border: none;
height: 3px;
background: repeating-linear-gradient(
90deg,
var(--color-accent) 0px,
var(--color-accent) 8px,
var(--color-accent) 16px
);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0, 6 3 T 12 3 T 18 3 T 24 3' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E")
repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0, 6 3 T 12 3 T 18 3 T 24 3' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E")
repeat-x;
margin: 2em 0;
}

60
frontend/src/stores/uiStore.ts
View file

@ -1,6 +1,27 @@
import { Note, NoteRead } from "@/api/notes";
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { Login } from "@/pages/Login";
interface HSL {
H: Number;
S: Number;
L: Number;
}
export interface ColourState {
base: string;
surface0: string;
surface1: string;
overlay0: string;
overlay1: string;
text: string;
subtext: string;
accent: string;
warn: string;
success: string;
danger: string;
}
interface UIState {
updating: boolean;
@ -9,17 +30,26 @@ interface UIState {
showModal: boolean;
setShowModal: (show: boolean) => void;
modalContent: React.ComponentType | null;
setModalContent: (content: React.ComponentType) => void;
sideBarResize: number;
setSideBarResize: (size: number) => void;
sideBarView: string;
setSideBarView: (view: string) => void;
editorView: string;
setEditorView: (view: string) => void;
selectedNote: NoteRead | null;
setSelectedNote: (note: NoteRead | null) => void;
selectedFolder: number | null;
setSelectedFolder: (id: number | null) => void;
colourScheme: ColourState;
setColourScheme: (colors: ColourState) => void;
}
export const useUIStore = create<UIState>()(
@ -33,6 +63,10 @@ export const useUIStore = create<UIState>()(
setShowModal: (show) => {
set({ showModal: show });
},
modalContent: null,
setModalContent: (content) => {
set({ modalContent: content });
},
sideBarResize: 300,
setSideBarResize: (size) => {
set({ sideBarResize: size });
@ -41,6 +75,10 @@ export const useUIStore = create<UIState>()(
setSideBarView: (view) => {
set({ sideBarView: view });
},
editorView: "parsed",
setEditorView: (view) => {
set({ editorView: view });
},
selectedNote: null,
setSelectedNote: (id: NoteRead | null) => {
@ -51,6 +89,28 @@ export const useUIStore = create<UIState>()(
setSelectedFolder: (id: number | null) => {
set({ selectedFolder: id });
},
colourScheme: {
base: "#24273a",
surface0: "#1e2030",
surface1: "#181926",
overlay0: "#363a4f",
overlay1: "#494d64",
text: "#cad3f5",
subtext: "#b8c0e0",
accent: "#e2a16f",
danger: "#e26f6f",
success: "#6fe29b",
warn: "#e2c56f",
},
setColourScheme: (colors: ColourState) => {
set({ colourScheme: colors });
Object.entries(colors).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--color-${key}`, value);
});
},
}),
{