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

6
src/app/editorgrid.ts
View File

@ -63,7 +63,9 @@ const EditorWrapper = (
return v.div( return v.div(
{ class: "flex flex-col group" }, { class: "flex flex-col group" },
v.div( 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()), v.span({ class: "mx-1 flex-1" }, () => editor.val.title()),
u.InlineButton(() => editor.val.close(), "Close", "❌"), u.InlineButton(() => editor.val.close(), "Close", "❌"),
), ),
@ -98,7 +100,7 @@ const TabHeader = (tab: State<Editor[]>, del: () => void, k: number) =>
v.div( v.div(
{ {
class: () => 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), onclick: () => (currentTab.val = k),
}, },
v.span({ class: "mx-1 flex-1" }, "Tab " + 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" ev.event === "unlink"
) { ) {
// Debounce-ish: schedule a refresh // Debounce-ish: schedule a refresh
if(!refreshScheduled) { if (!refreshScheduled) {
refreshScheduled = true; refreshScheduled = true;
setTimeout(() => refreshFolder(), 50); setTimeout(() => refreshFolder(), 50);
} }
@ -90,7 +90,7 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
if (tree.type === "file") if (tree.type === "file")
return v.p( return v.p(
{ {
class: "cursor-pointer hover:bg-gray-100", class: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
onclick: async () => onclick: async () =>
addEditor(await OpenFile.openFile(tree.path)), addEditor(await OpenFile.openFile(tree.path)),
}, },
@ -100,20 +100,22 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
const isOpen = van.state(false); const isOpen = van.state(false);
const children = () => const children = () =>
isOpen.val isOpen.val
? v.ul({}, tree.children?.map(FsItemView)) ? v.ul({ class: "pl-4" }, tree.children?.map(FsItemView))
: v.div({ ariaBusy: true }); : v.div({ ariaBusy: true });
const folder = v.details( const folder = v.details(
{ {
class: "flex-auto inline", class: "flex-auto inline",
ontoggle: () => (isOpen.val = folder.open), 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, children,
); );
return v.div( return folder;
{ class: "cursor-pointer flex hover:bg-gray-100" },
v.span(() => (isOpen.val ? "📂" : "📁")),
folder,
);
}; };

2
src/app/utils.ts
View File

@ -2,7 +2,7 @@ import van from "vanjs-core";
const v = van.tags; const v = van.tags;
export const Button = (onclick: () => void, text: string) => 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 = ( export const InlineButton = (
onclick: () => void, onclick: () => void,