diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index 5ece71928d75..1322203882f7 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -477,6 +477,11 @@ export class ColorRegistry {
light: colorPalette.purple[200],
});
+ this.registerColor(`${ct}card-selected-bg`, {
+ dark: colorPalette.charcoal[400],
+ light: colorPalette.purple[100],
+ });
+
this.registerColor(`${ct}card-text`, {
dark: colorPalette.gray[400],
light: colorPalette.purple[900],
diff --git a/packages/renderer/src/lib/image/FilesystemLayerView.svelte b/packages/renderer/src/lib/image/FilesystemLayerView.svelte
new file mode 100644
index 000000000000..6e4b96d1a3d8
--- /dev/null
+++ b/packages/renderer/src/lib/image/FilesystemLayerView.svelte
@@ -0,0 +1,87 @@
+
+
+
+
+{#if layerMode || !tree.hidden}
+ {#if root}
+ {#if children}
+ {#each children as [_, child]}
+
+ {/each}
+ {/if}
+ {:else}
+
+
+
+
+
+ Layers
+ Show layer only
+
+
+
+
+
+
+ {#if selectedLayer}
+
+
+
+ {/if}
+
+
+
+{/if}
diff --git a/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
new file mode 100644
index 000000000000..1cc049b68391
--- /dev/null
+++ b/packages/renderer/src/lib/image/ImageDetailsFilesLayers.svelte
@@ -0,0 +1,38 @@
+
+
+{#each layers as layer}
+
+{/each}
diff --git a/packages/renderer/src/lib/image/filesystem-tree.spec.ts b/packages/renderer/src/lib/image/filesystem-tree.spec.ts
new file mode 100644
index 000000000000..2275c046a2fe
--- /dev/null
+++ b/packages/renderer/src/lib/image/filesystem-tree.spec.ts
@@ -0,0 +1,156 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { expect, test } from 'vitest';
+
+import { FilesystemTree } from './filesystem-tree.js';
+
+interface typ {
+ path: string;
+}
+
+test('add paths to filetree', () => {
+ const tree = new FilesystemTree