diff --git a/public/assets/logo.png b/public/assets/logo.png index d0580b0..1b9b2e4 100644 Binary files a/public/assets/logo.png and b/public/assets/logo.png differ diff --git a/public/assets/logo.svg b/public/assets/logo.svg index c879953..f79ad30 100644 --- a/public/assets/logo.svg +++ b/public/assets/logo.svg @@ -1,21 +1,21 @@ - - - - - - - - - + + + + + + + + + - + - + - - + + diff --git a/src/components/apps/text-editor/TextEditor.tsx b/src/components/apps/text-editor/TextEditor.tsx index d79fce0..e1ef52e 100644 --- a/src/components/apps/text-editor/TextEditor.tsx +++ b/src/components/apps/text-editor/TextEditor.tsx @@ -60,19 +60,11 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app, useEffect(() => { void (async () => { - let newContent = ""; + let newContent: string | null = ""; // Load file if (currentFile) { - if (currentFile.content) { - newContent = currentFile.content; - } else if (currentFile.source) { - await fetch(currentFile.source).then((response) => - response.text() - ).then((response) => { - newContent = response; - }); - } + newContent = await currentFile.read() as string | null; const iconUrl = currentFile.getIconUrl(); if (iconUrl) @@ -84,11 +76,11 @@ export function TextEditor({ file, path, setTitle, setIconUrl, close, mode, app, setIconUrl?.(AppsManager.getAppIconUrl(app.id)); } - setContent(newContent); + if (newContent != null) + setContent(newContent); - if (ref.current) { + if (ref.current) (ref.current as HTMLElement).scrollTo(0, 0); - } })(); }, [app?.id, currentFile, setIconUrl]); diff --git a/src/components/router/routes/StandaloneRoute.module.css b/src/components/router/routes/StandaloneRoute.module.css index 2c58491..6ae894f 100644 --- a/src/components/router/routes/StandaloneRoute.module.css +++ b/src/components/router/routes/StandaloneRoute.module.css @@ -1,5 +1,5 @@ .StandaloneView { - --header-height: 2.5rem; + --header-height: 2.75rem; display: flex; flex-direction: column; diff --git a/src/components/taskbar/Taskbar.module.css b/src/components/taskbar/Taskbar.module.css index 7a00449..64e2583 100644 --- a/src/components/taskbar/Taskbar.module.css +++ b/src/components/taskbar/Taskbar.module.css @@ -63,6 +63,10 @@ width: auto; } +button.HomeButton { + padding: 0.625rem; +} + .HomeButton * { fill: var(--foreground-color-0); filter: none; diff --git a/src/components/taskbar/app-icon/AppIcon.module.css b/src/components/taskbar/app-icon/AppIcon.module.css index 2152ee2..e5938d8 100644 --- a/src/components/taskbar/app-icon/AppIcon.module.css +++ b/src/components/taskbar/app-icon/AppIcon.module.css @@ -9,6 +9,14 @@ .App-icon svg { filter: var(--svg-drop-shadow-0); + transform: scale(100%); + transform-origin: center; + transition: transform 300ms ease-out 150ms; +} + +.App-icon:not(.Active):hover svg, +.App-icon:not(.Active):focus-visible svg { + transform: scale(115%); } .App-icon.Hidden { diff --git a/src/components/taskbar/menus/AppList.module.css b/src/components/taskbar/menus/AppList.module.css index 4d38309..9eee0fb 100644 --- a/src/components/taskbar/menus/AppList.module.css +++ b/src/components/taskbar/menus/AppList.module.css @@ -9,18 +9,21 @@ } .AppButton { + --size: 2rem; + display: flex; - gap: 1rem; + gap: 0.75rem; width: 100%; padding: 0.25rem 0.5rem; + font-size: 0.875rem; border-radius: var(--border-radius-1); } .AppButton > div, .AppButton > div > div, .AppButton > div > div > svg { - width: 2rem; - height: 2rem; + width: var(--size); + height: var(--size); } .AppButton svg { diff --git a/src/components/taskbar/menus/HomeMenu.module.css b/src/components/taskbar/menus/HomeMenu.module.css index 2acd65f..e8942f2 100644 --- a/src/components/taskbar/menus/HomeMenu.module.css +++ b/src/components/taskbar/menus/HomeMenu.module.css @@ -4,28 +4,84 @@ } .HomeMenu { + --default-buttons-width: 3rem; + --buttons-count: 5; + min-width: 16rem; max-width: 32rem; + min-height: calc(var(--default-buttons-width) * var(--buttons-count)); border-bottom-left-radius: 0; border-bottom-right-radius: var(--border-radius-1); } .Buttons { + --buttons-width: var(--default-buttons-width); + --padding: 0.25rem; + --filter: blur(0px); + + position: absolute; display: flex; flex-direction: column-reverse; + justify-content: flex-start; align-items: center; - padding: 0.25rem; + bottom: 0; + left: 0; + padding: var(--padding); margin-top: auto; + width: var(--buttons-width); + height: 100%; + border-radius: var(--border-radius-1); + overflow: hidden; + transition: width 200ms ease-out 200ms; z-index: 1; } +.Buttons::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: inherit; + pointer-events: none; + backdrop-filter: var(--filter); + transition: backdrop-filter 200ms ease-out 200ms; +} + +.Buttons:hover, +.Buttons:focus-visible { + --buttons-width: 10rem; + --filter: var(--taskbar-filter); +} + .Buttons > button { + --button-width: calc(var(--buttons-width) - var(--padding) * 2); + --button-height: calc(var(--default-buttons-width) - var(--padding) * 2); + + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; padding: 0.5rem; + width: var(--button-width); + height: var(--button-height); border-radius: var(--border-radius-1); + overflow: hidden; + transition: inherit; + z-index: 1; } .Buttons > button > svg { height: 1.5rem; + width: 1.5rem; +} + +.Buttons > button > p { + position: absolute; + left: calc(var(--default-buttons-width) - var(--padding) * 2); + margin: 0; + white-space: nowrap; } .Apps { @@ -33,15 +89,44 @@ flex-direction: column; width: 100% !important; max-height: 20rem; - padding: 1rem; + padding: 0.5rem; padding-right: 0.25rem; padding-bottom: 0; + margin-left: var(--default-buttons-width); } -.Apps > h1 { +.Logo { + display: flex; + gap: 0.5rem; + width: auto; + margin-bottom: 0.5rem; + justify-content: flex-start; + align-items: center; + user-select: none; +} + +.Logo div, +.Logo svg { + width: auto; + height: 2.25rem; + color: inherit; + aspect-ratio: 1; +} + +.Logo svg { + object-fit: contain; +} + +.Logo svg * { + color: inherit; + fill: currentColor; +} + +.Logo > h1 { width: 100%; text-align: left; - font-size: 1rem; margin: 0; - margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 600; + letter-spacing: normal; } \ No newline at end of file diff --git a/src/components/taskbar/menus/HomeMenu.tsx b/src/components/taskbar/menus/HomeMenu.tsx index 1c7dbe8..d12381b 100644 --- a/src/components/taskbar/menus/HomeMenu.tsx +++ b/src/components/taskbar/menus/HomeMenu.tsx @@ -64,16 +64,18 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
- - - - -
-

{NAME}

+ + +

{NAME}

+
{AppsManager.APPS.sort((a, b) => a.name.localeCompare(b.name)).map(({ name, id }) =>