From 93552152be180766fda08b1bd7ccefc4d26065ff Mon Sep 17 00:00:00 2001 From: Lieuwe Rooijakkers Date: Sun, 19 Jan 2025 22:21:32 +0100 Subject: client advancements --- client/src/App.css | 42 ---------- client/src/App.jsx | 35 -------- client/src/assets/react.svg | 1 - client/src/components/entry.css | 44 ++++++++++ client/src/components/entry.jsx | 76 +++++++++++++++++ client/src/index.css | 66 +-------------- client/src/main.jsx | 14 +++- client/src/routes/app/app.css | 9 ++ client/src/routes/app/app.jsx | 98 ++++++++++++++++++++++ .../src/routes/app/components/content/content.css | 20 +++++ .../src/routes/app/components/content/content.jsx | 32 +++++++ .../src/routes/app/components/sidebar/sidebar.css | 24 ++++++ .../src/routes/app/components/sidebar/sidebar.jsx | 19 +++++ 13 files changed, 335 insertions(+), 145 deletions(-) delete mode 100644 client/src/App.css delete mode 100644 client/src/App.jsx delete mode 100644 client/src/assets/react.svg create mode 100644 client/src/components/entry.css create mode 100644 client/src/components/entry.jsx create mode 100644 client/src/routes/app/app.css create mode 100644 client/src/routes/app/app.jsx create mode 100644 client/src/routes/app/components/content/content.css create mode 100644 client/src/routes/app/components/content/content.jsx create mode 100644 client/src/routes/app/components/sidebar/sidebar.css create mode 100644 client/src/routes/app/components/sidebar/sidebar.jsx (limited to 'client/src') diff --git a/client/src/App.css b/client/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/client/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/client/src/App.jsx b/client/src/App.jsx deleted file mode 100644 index f67355a..0000000 --- a/client/src/App.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App diff --git a/client/src/assets/react.svg b/client/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/client/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/components/entry.css b/client/src/components/entry.css new file mode 100644 index 0000000..e76d6a9 --- /dev/null +++ b/client/src/components/entry.css @@ -0,0 +1,44 @@ +.entry { + display: flex; + width: 100%; + gap: 5px; + + button { + display: 0; + background: none; + border: none; + cursor: pointer; + font-weight: bold; + + opacity: 0; + } + + .text { + white-space: pre-wrap; + border: 0; + width: 100%; + padding: 5px; + } + .text:focus { + border: 0; + outline: 0; + + background-color: #f9f9f9; + } + + .text:empty:focus::before { + content: "write something..."; + opacity: .3; + font-style: italic; + } +} + +.entry:hover { + button { + opacity: .3; + } + + button:hover { + opacity: .5; + } +} diff --git a/client/src/components/entry.jsx b/client/src/components/entry.jsx new file mode 100644 index 0000000..637a696 --- /dev/null +++ b/client/src/components/entry.jsx @@ -0,0 +1,76 @@ +import {createElement, useLayoutEffect, useRef, useState} from 'react'; + +import './entry.css'; + +function TextField({ item, onEnter, onSelect, onRemove, ref }) { + const onKeyDown = e => { + if (e.keyCode === 38) { // up + onSelect(-1); + e.preventDefault(); + return; + } else if (e.keyCode === 40) { // down + onSelect(+1); + e.preventDefault(); + return; + } else if (e.keyCode === 8 && e.target.innerText.length === 0) { // backspace + onRemove(); + e.preventDefault(); + return; + } + + if (e.keyCode !== 13) { + return; + } else if (e.shiftKey) { + return; + } + + e.preventDefault(); + + onEnter(e.ctrlKey ? 'todo' : 'plain'); + }; + + useLayoutEffect(() => { + if (ref.current == null) { + return; + } + + ref.current.innerText = item.text; + }, [item.text]); + + return
onSelect(0)}>
; +} + +function Plain({ item, onEnter, onSelect, onRemove, ref }) { + return ; +} + +function Todo({ item, onEnter, onSelect, onRemove, ref }) { + return <> + + + ; +} + +export default function Entry({ item, onEnter, onSelect, onRemove, isFocused }) { + const ref = useRef(null); + useLayoutEffect(() => { + if (isFocused && ref.current != null && document.activeElement !== ref.current) { + ref.current.focus(); + document.execCommand('selectAll', false, null); + document.getSelection().collapseToEnd(); + } + }, [isFocused]); + + const child = createElement(item.type === 'plain' ? Plain : Todo, { + ref, + item, + onEnter, + onSelect, + onRemove: () => onRemove(true), + }); + + return
+ + {child} +
+} diff --git a/client/src/index.css b/client/src/index.css index 6119ad9..5edd4fc 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,68 +1,8 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; + font-family: sans-serif; + font-size: 1.1em; } body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } + padding: 0; } diff --git a/client/src/main.jsx b/client/src/main.jsx index b9a1a6d..6a23f95 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -1,10 +1,16 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' -import App from './App.jsx' +import { BrowserRouter, Route, Routes } from 'react-router'; + +import App from './routes/app/app'; createRoot(document.getElementById('root')).render( - - - , + + + + } /> + + + , ) diff --git a/client/src/routes/app/app.css b/client/src/routes/app/app.css new file mode 100644 index 0000000..bccae8f --- /dev/null +++ b/client/src/routes/app/app.css @@ -0,0 +1,9 @@ +.app { + display: flex; + + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/client/src/routes/app/app.jsx b/client/src/routes/app/app.jsx new file mode 100644 index 0000000..67dcd91 --- /dev/null +++ b/client/src/routes/app/app.jsx @@ -0,0 +1,98 @@ +import {useEffect, useRef, useState} from 'react'; +import { useLocation, useParams } from "react-router"; + +import './app.css'; + +import Sidebar from './components/sidebar/sidebar'; +import Content from './components/content/content'; + +const files = [ + { + id: '1', + title: 'kaas', + items: [ + { type: 'plain', text: 'kaas 1' }, + { type: 'plain', text: 'kaas 2' }, + { type: 'plain', text: 'kaas 3' }, + { type: 'plain', text: 'kaas 4' }, + { type: 'plain', text: 'kaas 5' }, + ], + }, + { + id: '2', + title: 'ham', + items: [ + { type: 'plain', text: 'ham 1' }, + { type: 'plain', text: 'ham 2' }, + { type: 'plain', text: 'ham 3' }, + { type: 'plain', text: 'ham 4' }, + { type: 'plain', text: 'ham 5' }, + ], + }, + { + id: '3', + title: 'vis', + items: [ + { type: 'plain', text: 'vis 1' }, + { type: 'plain', text: 'vis 2' }, + { type: 'plain', text: 'vis 3' }, + { type: 'plain', text: 'vis 4' }, + { type: 'plain', text: 'vis 5' }, + ], + }, + { + id: '4', + title: 'empty', + items: [ + { type: 'plain', text: '' }, + ], + + children: [{ + id: '4/5', + title: 'empty 2', + items: [ + { type: 'plain', text: '' }, + ], + }], + }, +] + +function splitOnce(str, sep) { + const idx = str.indexOf(sep); + if (idx === -1) return [str, '']; + + return [ str.slice(0, idx), str.slice(idx+1) ]; +} + +export default function App() { + const e = useLocation(); + const fullPath = e.pathname.replace('/file/', ''); + let path = fullPath; + + let cur = { children: files }; + let builtKey = ''; + while (path != '') { + let key; + [key, path] = splitOnce(path, '/'); + builtKey += `/${key}`; + + console.log(key, path, cur); + cur = (cur.children ?? []).find(p => p.id === builtKey.slice(1)); + } + + const file = cur; + const [title, setTitle] = useState(() => file.title); + const [items, setItems] = useState(() => file.items); + + useEffect(() => { + setTitle(() => file.title); + setItems(() => file.items); + + document.title = '🧀🥜 ' + file.title; + }, [fullPath]); + + return
+ + +
+} diff --git a/client/src/routes/app/components/content/content.css b/client/src/routes/app/components/content/content.css new file mode 100644 index 0000000..196fb96 --- /dev/null +++ b/client/src/routes/app/components/content/content.css @@ -0,0 +1,20 @@ +.content { + display: flex; + flex-direction: column; + + flex-grow: 1; + padding: 10px; + + overflow-y: scroll; + + .title { + border: 0; + padding: 10px; + margin-left: 15px; + margin-bottom: 50px; + } + .title:focus { + border: 0; + outline: 0; + } +} diff --git a/client/src/routes/app/components/content/content.jsx b/client/src/routes/app/components/content/content.jsx new file mode 100644 index 0000000..42ecb8a --- /dev/null +++ b/client/src/routes/app/components/content/content.jsx @@ -0,0 +1,32 @@ +import {useLayoutEffect, useRef, useState} from 'react'; + +import './content.css'; + +import Entry from '../../../../components/entry'; + +export default function Content({ title, setTitle, items, setItems }) { + const [focused, setFocused] = useState(null); + + const children = items.map((item, i) => { + return setFocused(i + delta)} + onRemove={refocus => setItems(a => { + if (refocus) { + setFocused(i-1); + } + return [...a.slice(0, i), ...a.slice(i + 1)] + })} + onEnter={type => setItems(a => { + setFocused(i+1); + return a.toSpliced(i+1, 0, { type, text: '' }); + })} + />; + }); + + return
+

{title}

+ {children} +
; +} diff --git a/client/src/routes/app/components/sidebar/sidebar.css b/client/src/routes/app/components/sidebar/sidebar.css new file mode 100644 index 0000000..515117a --- /dev/null +++ b/client/src/routes/app/components/sidebar/sidebar.css @@ -0,0 +1,24 @@ +.sidebar { + width: 200px; + background-color: #f2f2f2; + + flex-shrink: 0; + + h1 { + margin-left: 10px; + margin-top: 10px; + } + + .file { + display: block; + + color: black; + text-decoration: none; + + padding: 5px; + } + + .file:hover { + background-color: #e4e4e4; + } +} diff --git a/client/src/routes/app/components/sidebar/sidebar.jsx b/client/src/routes/app/components/sidebar/sidebar.jsx new file mode 100644 index 0000000..1ce7d2b --- /dev/null +++ b/client/src/routes/app/components/sidebar/sidebar.jsx @@ -0,0 +1,19 @@ +import { useNavigate } from "react-router"; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import './sidebar.css'; + + +export default function Sidebar({ files }) { + const navigate = useNavigate(); + + const onSelect = (_, i) => { + navigate(`/file/${i}`); + }; + + return
+

🧀🥜

+
+ p.title} /> +
; +} -- cgit v1.2.3-70-g09d2