quintenk
/
miller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dark mode, styling fixes

This commit is contained in:
Quinten Kock 2025-12-03 00:21:24 +01:00
parent b555937054
commit 27f2b18ac1
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<link href="/src/app/index.css" rel="stylesheet" />
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
</head>
<body>
<body class="dark:scheme-dark dark:bg-neutral-800 dark:text-gray-100">
<script type="module" src="/src/app/renderer.ts"></script>
</body>
</html>

6
src/app/editorgrid.ts
View File

@ -63,7 +63,9 @@ const EditorWrapper = (
return v.div(
{ class: "flex flex-col group" },
v.div(
{ class: "flex group-focus-within:bg-blue-300" },
{
class: "flex group-focus-within:bg-blue-300 dark:group-focus-within:bg-blue-900",
},
v.span({ class: "mx-1 flex-1" }, () => editor.val.title()),
u.InlineButton(() => editor.val.close(), "Close", "❌"),
),
@ -98,7 +100,7 @@ const TabHeader = (tab: State<Editor[]>, del: () => void, k: number) =>
v.div(
{
class: () =>
`flex-auto flex ${currentTab.val === k ? "bg-green-500" : ""}`,
`flex-auto flex ${currentTab.val === k ? "bg-green-500 dark:bg-green-700" : ""}`,
onclick: () => (currentTab.val = k),
},
v.span({ class: "mx-1 flex-1" }, "Tab " + k),

20
src/app/foldernav.ts
View File

@ -38,7 +38,7 @@ window.electronAPI.onFsEvent(async (ev: { event: string; path: string }) => {
ev.event === "unlink"
) {
// Debounce-ish: schedule a refresh
if(!refreshScheduled) {
if (!refreshScheduled) {
refreshScheduled = true;
setTimeout(() => refreshFolder(), 50);
}
@ -90,7 +90,7 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
if (tree.type === "file")
return v.p(
{
class: "cursor-pointer hover:bg-gray-100",
class: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
onclick: async () =>
addEditor(await OpenFile.openFile(tree.path)),
},
@ -100,20 +100,22 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
const isOpen = van.state(false);
const children = () =>
isOpen.val
? v.ul({}, tree.children?.map(FsItemView))
? v.ul({ class: "pl-4" }, tree.children?.map(FsItemView))
: v.div({ ariaBusy: true });
const folder = v.details(
{
class: "flex-auto inline",
ontoggle: () => (isOpen.val = folder.open),
},
v.summary(tree.name),
v.summary(
{
class: "cursor-pointer flex hover:bg-gray-100 dark:hover:bg-gray-700",
},
v.span(() => (isOpen.val ? "📂" : "📁")),
tree.name,
),
children,
);
return v.div(
{ class: "cursor-pointer flex hover:bg-gray-100" },
v.span(() => (isOpen.val ? "📂" : "📁")),
folder,
);
return folder;
};

2
src/app/utils.ts
View File

@ -2,7 +2,7 @@ import van from "vanjs-core";
const v = van.tags;
export const Button = (onclick: () => void, text: string) =>
v.button({ class: "bg-green-500 p-2", onclick }, text);
v.button({ class: "bg-green-500 dark:bg-green-700 p-2", onclick }, text);
export const InlineButton = (
onclick: () => void,