A focused Docker Compose management web application.
feat: hotkeys
+25
-4
+1
packages/panel/package.json
+1
packages/panel/package.json
+14
-1
packages/panel/src/routes/(authenticated)/projects/+page.svelte
+14
-1
packages/panel/src/routes/(authenticated)/projects/+page.svelte
···
1
1
<script lang="ts">
2
2
import StatusIcon, { type LuminaryStatus } from "$lib/component/StatusIcon.svelte";
3
3
import { faMagnifyingGlass, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
4
+
import type { Attachment } from "svelte/attachments";
4
5
import { Accordion } from "melt/builders";
5
6
import { getProjects } from "$lib/api";
6
7
import { Debounced } from "runed";
8
+
import hotkeys from "hotkeys-js";
7
9
import Fa from "svelte-fa";
8
10
9
11
const ORDER = ["healthy", "running", "exited", "paused", "down", "paused"] as LuminaryStatus[];
···
23
25
),
24
26
).toSorted(([a], [b]) => ORDER.indexOf(a as LuminaryStatus) - ORDER.indexOf(b as LuminaryStatus)),
25
27
);
28
+
29
+
const searchKeybind: Attachment<HTMLInputElement> = (el) => {
30
+
hotkeys("ctrl+f", () => {
31
+
el.focus();
32
+
return false;
33
+
});
34
+
35
+
return () => {
36
+
hotkeys.unbind("ctrl+f");
37
+
};
38
+
};
26
39
</script>
27
40
28
41
<div class="flexc gap-10 full projects" {...accordion.root}>
29
42
<div class="flexr center gap-10">
30
43
<Fa icon={faMagnifyingGlass} size="lg" />
31
-
<input class="full" type="text" placeholder="Search projects..." bind:value={search} />
44
+
<input class="full" type="text" placeholder="Search projects..." bind:value={search} {@attach searchKeybind} />
32
45
</div>
33
46
34
47
{#each groups as [status, projects] (status)}
+10
-3
pnpm-lock.yaml
+10
-3
pnpm-lock.yaml
···
22
22
'@codemirror/commands':
23
23
specifier: ^6.10.3
24
24
version: 6.10.3
25
-
'@codemirror/lang-yaml':
26
-
specifier: ^6.1.2
27
-
version: 6.1.2
28
25
'@codemirror/language':
29
26
specifier: ^6.12.2
30
27
version: 6.12.2
···
85
82
codemirror-json-schema:
86
83
specifier: ^0.8.1
87
84
version: 0.8.1(@codemirror/language@6.12.2)(@codemirror/lint@6.9.5)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)
85
+
hotkeys-js:
86
+
specifier: ^4.0.2
87
+
version: 4.0.2
88
88
melt:
89
89
specifier: ^0.44.0
90
90
version: 0.44.0(@floating-ui/dom@1.7.6)(svelte@5.53.7)
···
948
948
hast-util-whitespace@3.0.0:
949
949
resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
950
950
951
+
hotkeys-js@4.0.2:
952
+
resolution: {integrity: sha512-fJNEO88zWwoXEGJuvjSbunKSexaT1VbC1S9wIzMA2BfOZ5KPiQj2wTqxDeXd110/4akiAuQIsE3TSbNvGgCyQg==}
953
+
951
954
html-void-elements@3.0.0:
952
955
resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
953
956
···
1455
1458
'@lezer/highlight': 1.2.3
1456
1459
'@lezer/lr': 1.4.8
1457
1460
'@lezer/yaml': 1.0.4
1461
+
optional: true
1458
1462
1459
1463
'@codemirror/language@6.12.2':
1460
1464
dependencies:
···
1640
1644
'@lezer/common': 1.5.1
1641
1645
'@lezer/highlight': 1.2.3
1642
1646
'@lezer/lr': 1.4.8
1647
+
optional: true
1643
1648
1644
1649
'@marijn/find-cluster-break@1.0.2': {}
1645
1650
···
2144
2149
hast-util-whitespace@3.0.0:
2145
2150
dependencies:
2146
2151
'@types/hast': 3.0.4
2152
+
2153
+
hotkeys-js@4.0.2: {}
2147
2154
2148
2155
html-void-elements@3.0.0: {}
2149
2156