Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-05-24 10:18:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: move settings navigation tree to main navigation area

Browse source 
Signed-off-by: Vladyslav Zhukovskyi <vzhukovs@redhat.com>
This commit is contained in:
Vladyslav Zhukovskyi 2022-09-28 11:39:42 +03:00 committed by Florent BENOIT
parent af43e12375
commit a66f376d72
6 changed files with 577 additions and 459 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/main/src/plugin/telemetry/telemetry.ts
View file

@ -51,7 +51,7 @@ export class Telemetry {
async init(): Promise<void> {
const telemetryConfigurationNode: IConfigurationNode = {
id: 'dashboard.telemetry',
id: 'preferences.telemetry',
title: 'Telemetry',
type: 'object',
properties: {

2
packages/main/src/plugin/terminal-init.ts
View file

@ -26,7 +26,7 @@ export class TerminalInit {
init() {
const terminalPlatformConfiguration: IConfigurationNode = {
id: 'dashboard.terminal',
id: 'preferences.terminal',
title: 'Terminal',
type: 'object',
properties: {

311
packages/renderer/src/App.svelte
View file

@ -7,11 +7,7 @@ import '@patternfly/patternfly/patternfly-theme-dark.css';
import './override.css';
import { Route, router } from 'tinro';
import { containersInfos } from './stores/containers';
import { imagesInfos } from './stores/images';
import { contributions } from './stores/contribs';
import ContainerList from './lib/ContainerList.svelte';
import { CommandRegistry } from './lib/CommandRegistry';
import { onMount } from 'svelte';
import ExtensionList from './lib/ExtensionList.svelte';
import ImagesList from './lib/ImagesList.svelte';
@ -23,34 +19,29 @@ import PullImage from './lib/image/PullImage.svelte';
import DockerExtension from './lib/docker-extension/DockerExtension.svelte';
import ContainerDetails from './lib/ContainerDetails.svelte';
import { providerInfos } from './stores/providers';
import { podsInfos } from './stores/pods';
import { volumeListInfos } from './stores/volumes';
import type { ProviderInfo } from '../../main/src/plugin/api/provider-info';
import WelcomePage from './lib/welcome/WelcomePage.svelte';
import HelpPage from './lib/help/HelpPage.svelte';
import StatusBar from './lib/statusbar/StatusBar.svelte';
import ImageDetails from './lib/image/ImageDetails.svelte';
import PodsList from './lib/pod/PodsList.svelte';
import PreferencesNavigation from './PreferencesNavigation.svelte';
import AppNavigation from './AppNavigation.svelte';
import VolumesList from './lib/volume/VolumesList.svelte';
import VolumeDetails from './lib/volume/VolumeDetails.svelte';
import ContainerPlayKubefile from './lib/container/ContainerPlayKubefile.svelte';
let containersCountValue;
router.mode.hash();
let innerWidth = 0;
onMount(async () => {
const commandRegistry = new CommandRegistry();
commandRegistry.init();
containersInfos.subscribe(value => {
containersCountValue = value.length;
});
//remember from where we come to preference pages
let nonSettingsPage = '/';
router.subscribe(function (navigation) {
if (navigation.from !== undefined && !navigation.from.startsWith('/preferences')) {
nonSettingsPage = navigation.from;
}
});
let contributionsExpanded: boolean = true;
function toggleContributions() {
contributionsExpanded = !contributionsExpanded;
}
let innerWidth = 0;
let providers: ProviderInfo[] = [];
$: providerConnections = providers
@ -89,285 +80,11 @@ window.events?.receive('display-help', () => {
</header>
<div class="overflow-x-hidden flex flex-1">
<nav
class="pf-c-nav z-0 group w-12 hover:w-[180px] md:w-[180px] md:min-w-[180px] shadow flex-col justify-between sm:flex transition-all duration-500 ease-in-out"
aria-label="Global">
<ul class="pf-c-nav__list">
<li
class="pf-c-nav__item flex w-full items-center justify-between {meta.url === '/'
? 'pf-m-current'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/" class="pf-c-nav__link flex items-center align-middle">
<div class="flex items-center">
<svg class="" width="20" viewBox="0 0 576 512"
><path
style="fill: currentColor;"
d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"
></path
></svg>
<span class="hidden md:block group-hover:block mx-2">Home</span>
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full items-center justify-between {meta.url.startsWith('/containers')
? 'pf-m-current'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/containers" class="pf-c-nav__link flex items-center align-middle">
<div class="flex items-center">
<svg
class=""
width="20"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 12"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1">
<g
id="shape-0ce89ec0-e7f8-11ec-8809-dd3f56ff9666"
xml:space="preserve"
width="16"
version="1.1"
height="16"
rx="0"
ry="0"
style="fill: currentColor;"
><g id="shape-0ce93b00-e7f8-11ec-8809-dd3f56ff9666" rx="0" ry="0" style="fill: rgb(0, 0, 0);"
><g id="shape-0ceb36d0-e7f8-11ec-8809-dd3f56ff9666"
><g id="fills-0ceb36d0-e7f8-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M1.5218559309491866,0C0.6868867060620687,0,0,0.6864952404280302,0,1.5209892752261567L0,10.471200983324707C0,11.30569396019996,0.6868857987537922,12,1.5218559309491866,12L14.480097805928153,12C15.315067786905502,12,16,11.305694338029753,16,10.471200983324707L16,8.508948847843612L16,4.635209785448751L16,3.461763828280482L16,1.5209892752261567C16,0.6864956560407336,15.315067786905502,0,14.480097805928153,0L1.5218559309491866,0ZZM1.5218559309491866,1.0113895148408574L14.480097805928153,1.0113895148408574C14.77024323206615,1.0113895148408574,14.988033857810478,1.231011497158761,14.988034235855366,1.5209892752261567L14.988034235855366,3.461763828280482L14.988034235855366,4.635209785448751L14.988034235855366,8.508948847843612L14.988034235855366,10.471200983324707C14.988034235855366,10.76117740120526,14.770242097931032,10.980800781493144,14.480097805928153,10.980800781493144L1.5218559309491866,10.980800781493144C1.231713453562861,10.980800781493144,1.0119658019493727,10.761175889886317,1.0119658019493727,10.471200983324707L1.0119658019493727,1.5209892752261567C1.0119658019493727,1.2310112326777016,1.2317126218636076,1.0113895148408574,1.5218559309491866,1.0113895148408574ZZM2.9968254280290694,2.0013017495180065L2.9968254280290694,2.997071365848342L2.9968254280290694,8.995118666005055L2.000488424768264,8.995118666005055L2.000488424768264,10.00065102589133L14.00732599347839,10.00065102589133L14.00732599347839,8.995118666005055L13.003174798798,8.995118666005055L13.003174798798,2.997071365848342L14.02881558694935,2.997071365848342L14.02881558694935,2.0013017495180065L12.006837795537194,2.0013017495180065L12.006837795537194,2.997071365848342L12.006837795537194,8.995118666005055L10.004395482673317,8.995118666005055L10.004395482673317,2.997071365848342L11.031990385747122,2.997071365848342L11.031990385747122,2.0013017495180065L9.000244287993155,2.0013017495180065L9.000244287993155,2.997071365848342L9.000244287993155,8.995118666005055L6.999755712006845,8.995118666005055L6.999755712006845,2.997071365848342L8.025396878203082,2.997071365848342L8.025396878203082,2.0013017495180065L6.00341870874604,2.0013017495180065L6.00341870874604,2.997071365848342L6.00341870874604,8.995118666005055L4.002930510804617,8.995118666005055L4.002930510804617,2.997071365848342L5.028571298955967,2.997071365848342L5.028571298955967,2.0013017495180065L2.9968254280290694,2.0013017495180065ZZ"
style="color: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(255, 255, 255); fill-opacity: 1;"
></path
></g
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Containers</span>
{#if containersCountValue > 0}
{#if innerWidth >= 768}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{containersCountValue}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/images'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/images" class="pf-c-nav__link">
<div class="flex items-center">
<svg
width="18"
xmlns="http://www.w3.org/2000/svg"
height="13.000000000000455"
id="screenshot-e34d1510-e7fb-11ec-8809-dd3f56ff9666"
viewBox="-1 -1 18 13.000000000000455"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1"
><g id="shape-e34d1510-e7fb-11ec-8809-dd3f56ff9666" rx="0" ry="0"
><g id="shape-49a31690-e769-11ec-8809-dd3f56ff9666"
><g id="fills-49a31690-e769-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M5.783333338456487,0C3.7675837420570133,0.00024082716072371113,2.1335625589499614,1.5932840918758302,2.1333333387087805,3.558465444585636C2.1340397303924874,3.845714958710232,2.1704154967114846,4.131824643674463,2.241666654362234,4.410549509031171C0.9281347063156318,4.900815943180987,0,6.135935234257886,0,7.591663742218316C0,9.479885735091557,1.5609960651740948,11.000000000000455,3.4999999622045834,11.000000000000455L12.499999795905296,11.000000000000455C14.439003894510734,11.000000000000455,16,9.479885735091557,16,7.591663742218316C16,6.113553997334293,15.043556571366935,4.862597573568564,13.697916538425034,4.388233049671271C13.37622687768362,3.262100862960324,12.324067703554647,2.483070252013931,11.124999989291155,2.483216393949988C10.494968678541227,2.4838062231906406,9.885439338284868,2.7015429405801115,9.404166753826303,3.0979342674263535C9.166663776083169,1.3252418303718514,7.617086223974638,-0.0005549815805352409,5.783333338456487,0ZZ"
style="opacity: 1; fill: none; stroke-linejoin: round; stroke-dasharray: none;"></path
></g
><g id="strokes-49a31690-e769-11ec-8809-dd3f56ff9666"
><g class="stroke-shape"
><path
rx="0"
ry="0"
d="M5.783333338456487,0C3.7675837420570133,0.00024082716072371113,2.1335625589499614,1.5932840918758302,2.1333333387087805,3.558465444585636C2.1340397303924874,3.845714958710232,2.1704154967114846,4.131824643674463,2.241666654362234,4.410549509031171C0.9281347063156318,4.900815943180987,0,6.135935234257886,0,7.591663742218316C0,9.479885735091557,1.5609960651740948,11.000000000000455,3.4999999622045834,11.000000000000455L12.499999795905296,11.000000000000455C14.439003894510734,11.000000000000455,16,9.479885735091557,16,7.591663742218316C16,6.113553997334293,15.043556571366935,4.862597573568564,13.697916538425034,4.388233049671271C13.37622687768362,3.262100862960324,12.324067703554647,2.483070252013931,11.124999989291155,2.483216393949988C10.494968678541227,2.4838062231906406,9.885439338284868,2.7015429405801115,9.404166753826303,3.0979342674263535C9.166663776083169,1.3252418303718514,7.617086223974638,-0.0005549815805352409,5.783333338456487,0ZZ"
style="opacity: 1; fill: none; stroke-linejoin: round; stroke-dasharray: none; stroke-width: 2; stroke: currentColor; stroke-opacity: 1;"
></path
></g
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Images</span>
{#if innerWidth >= 768}
{#if $imagesInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$imagesInfos.length}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/pods'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/pods" class="pf-c-nav__link">
<div class="flex items-center">
<svg width="18" height="18" version="1.1" viewBox="0 0 12.3 12.184" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-3.8603 -3.8322)">
<text
x="10.017183"
y="16.811775"
style="fill:#ffffff;font-family:sans-serif;letter-spacing:0px;line-height:0%;stroke-width:.26458px;word-spacing:0px"
xml:space="preserve"
><tspan
x="10.017183"
y="16.811775"
text-anchor="middle"
style="fill:currentColor;font-family:Arial;font-size:2.8222px;line-height:6.61458;stroke-width:.26458px;text-align:center"
></tspan
></text>
<g transform="matrix(1.6985 0 0 1.6985 -6.7754 -6.3352)" style="fill:currentColor">
<path
d="m6.2618 7.0361 3.6208-1.05 3.6208 1.05-3.6208 1.05z"
style="fill-rule:evenodd;fill:currentColor"></path>
<path
d="m6.2618 7.4382v3.8528l3.3736 1.8687 0.0167-4.7132z"
style="fill-rule:evenodd;fill:currentColor"></path>
<path
d="m13.503 7.4382v3.8528l-3.3736 1.8687-0.0167-4.7132z"
style="fill-rule:evenodd;fill:currentColor"></path>
</g>
</g>
</svg>
<span class="hidden md:block group-hover:block mx-2">Pods</span>
{#if innerWidth >= 768}
{#if $podsInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$podsInfos.length}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/volumes'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/volumes" class="pf-c-nav__link">
<div class="flex items-center">
<svg width="18" height="18" version="1.1" viewBox="0 0 9.525 9.525" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5.2488 -6.9359)">
<g transform="translate(-.18879 1.9844)">
<path
d="m5.571 8.1928c0 0.62112 2.0726 1.1246 4.6292 1.1246 2.5566 0 4.6292-0.50352 4.6292-1.1246v3.0424c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246z"
style="fill:currentColor"></path>
<path
d="m5.571 8.1928c0-0.62112 2.0726-1.1246 4.6292-1.1246 2.5566 0 4.6292 0.50352 4.6292 1.1246 0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246z"
style="fill:currentColor"></path>
<path
d="m14.829 8.1928c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246 0-0.62112 2.0726-1.1246 4.6292-1.1246 2.5566 0 4.6292 0.50352 4.6292 1.1246v3.0424c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246v-3.0424"
style="fill:none;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:0.2;stroke:#222"
></path>
</g>
</g>
</svg>
<span class="hidden md:block group-hover:block mx-2">Volumes</span>
{#if innerWidth >= 768}
{#if $volumeListInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$volumeListInfos.map(volumeInfo => volumeInfo.Volumes).flat().length}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url.startsWith('/preferences')
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/preferences" class="pf-c-nav__link ">
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
id="screenshot-23f38720-e7fc-11ec-8809-dd3f56ff9666"
viewBox="241 461 17 18"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1"
><g id="shape-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><g id="fills-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M256.95699066927926,467.20624999999995C257.05956395730266,467.475,256.9725320765555,467.77812500000005,256.76116893759826,467.975L255.41528306747307,469.20624999999995C255.44947416348083,469.46562500000005,255.4681238522124,469.73125000000005,255.4681238522124,470C255.4681238522124,470.26874999999995,255.44947416348083,470.53437499999995,255.41528306747307,470.79375000000005L256.76116893759826,472.025C256.9725320765555,472.22187499999995,257.05956395730266,472.525,256.95699066927926,472.79375000000005C256.82022628524805,473.165625,256.65548736811957,473.525,256.46899048080434,473.865625L256.32290125240735,474.11875C256.11775467636056,474.4625,255.88774184867174,474.7875,255.63597105079612,475.09687499999995C255.44947416348083,475.31875,255.14797086232113,475.396875,254.87444209425877,475.30937500000005L253.143129323682,474.75312499999995C252.72661960867788,475.07500000000005,252.23861942020295,475.34375,251.77548548337,475.54999999999995L251.38695030146323,477.334375C251.32478467235813,477.615625,251.10720497049033,477.81562499999995,250.8212430766069,477.890625C250.39230023578176,477.9625,249.9509242691356,478,249.47224892502646,478C249.04952264711181,478,248.60814668046572,477.9625,248.1792038396406,477.890625C247.89324194575715,477.81562499999995,247.67566224388935,477.615625,247.61349661478425,477.334375L247.22496143287742,475.54999999999995C246.73385296294725,475.34375,246.27382730756955,475.07500000000005,245.8573175925655,474.75312499999995L244.12724813457083,475.30937500000005C243.85247605392632,475.396875,243.549418612039,475.31875,243.36540834988796,475.09687499999995C243.1133267238668,474.7875,242.88331389617798,474.4625,242.67816732013117,474.11875L242.53269974802527,473.865625C242.34402706369133,473.525,242.17990980285387,473.165625,242.0422129343861,472.79375000000005C241.94150461523586,472.525,242.0263606989643,472.22187499999995,242.23958880679476,472.025L243.58423136433785,470.79375000000005C243.55004026833006,470.53437499999995,243.5323230640351,470.26874999999995,243.5323230640351,470C243.5323230640351,469.73125000000005,243.55004026833006,469.46562500000005,243.58423136433785,469.20624999999995L242.23958880679476,467.975C242.0263606989643,467.77812500000005,241.94150461523586,467.478125,242.0422129343861,467.20624999999995C242.17990980285387,466.834375,242.34433789183683,466.475,242.53269974802527,466.134375L242.67785649198564,465.88125C242.88331389617798,465.5375,243.1133267238668,465.2125,243.36540834988796,464.9046875C243.549418612039,464.68125,243.85247605392632,464.60375,244.12724813457083,464.691875L245.8573175925655,465.24687500000005C246.27382730756955,464.92375000000004,246.73385296294725,464.655,247.22496143287742,464.4509375L247.61349661478425,462.66656250000005C247.67566224388935,462.3828125,247.89324194575715,462.1575,248.1792038396406,462.10968750000006C248.60814668046572,462.03753125000003,249.04952264711181,462,249.50022345812374,462C249.9509242691356,462,250.39230023578176,462.03753125000003,250.8212430766069,462.10968750000006C251.10720497049033,462.1575,251.32478467235813,462.3828125,251.38695030146323,462.66656250000005L251.77548548337,464.4509375C252.23861942020295,464.655,252.72661960867788,464.92375000000004,253.143129323682,465.24687500000005L254.87444209425877,464.691875C255.14797086232113,464.60375,255.44947416348083,464.68125,255.63597105079612,464.9046875C255.88774184867174,465.2125,256.11775467636056,465.5375,256.32290125240735,465.88125L256.46899048080434,466.134375C256.65548736811957,466.475,256.82022628524805,466.834375,256.95699066927926,467.20624999999995ZL256.95699066927926,467.20624999999995ZZM249.50022345812374,472.5C250.8740838613462,472.5,251.98684862232733,471.38125,251.98684862232733,469.97187499999995C251.98684862232733,468.61875,250.8740838613462,467.47187499999995,249.50022345812374,467.47187499999995C248.12636305490128,467.47187499999995,247.01359829392015,468.61875,247.01359829392015,469.97187499999995C247.01359829392015,471.38125,248.12636305490128,472.5,249.50022345812374,472.5ZZ"
></path
></g
><g id="strokes-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><g class="stroke-shape"
><path
rx="0"
ry="0"
d="M256.95699066927926,467.20624999999995C257.05956395730266,467.475,256.9725320765555,467.77812500000005,256.76116893759826,467.975L255.41528306747307,469.20624999999995C255.44947416348083,469.46562500000005,255.4681238522124,469.73125000000005,255.4681238522124,470C255.4681238522124,470.26874999999995,255.44947416348083,470.53437499999995,255.41528306747307,470.79375000000005L256.76116893759826,472.025C256.9725320765555,472.22187499999995,257.05956395730266,472.525,256.95699066927926,472.79375000000005C256.82022628524805,473.165625,256.65548736811957,473.525,256.46899048080434,473.865625L256.32290125240735,474.11875C256.11775467636056,474.4625,255.88774184867174,474.7875,255.63597105079612,475.09687499999995C255.44947416348083,475.31875,255.14797086232113,475.396875,254.87444209425877,475.30937500000005L253.143129323682,474.75312499999995C252.72661960867788,475.07500000000005,252.23861942020295,475.34375,251.77548548337,475.54999999999995L251.38695030146323,477.334375C251.32478467235813,477.615625,251.10720497049033,477.81562499999995,250.8212430766069,477.890625C250.39230023578176,477.9625,249.9509242691356,478,249.47224892502646,478C249.04952264711181,478,248.60814668046572,477.9625,248.1792038396406,477.890625C247.89324194575715,477.81562499999995,247.67566224388935,477.615625,247.61349661478425,477.334375L247.22496143287742,475.54999999999995C246.73385296294725,475.34375,246.27382730756955,475.07500000000005,245.8573175925655,474.75312499999995L244.12724813457083,475.30937500000005C243.85247605392632,475.396875,243.549418612039,475.31875,243.36540834988796,475.09687499999995C243.1133267238668,474.7875,242.88331389617798,474.4625,242.67816732013117,474.11875L242.53269974802527,473.865625C242.34402706369133,473.525,242.17990980285387,473.165625,242.0422129343861,472.79375000000005C241.94150461523586,472.525,242.0263606989643,472.22187499999995,242.23958880679476,472.025L243.58423136433785,470.79375000000005C243.55004026833006,470.53437499999995,243.5323230640351,470.26874999999995,243.5323230640351,470C243.5323230640351,469.73125000000005,243.55004026833006,469.46562500000005,243.58423136433785,469.20624999999995L242.23958880679476,467.975C242.0263606989643,467.77812500000005,241.94150461523586,467.478125,242.0422129343861,467.20624999999995C242.17990980285387,466.834375,242.34433789183683,466.475,242.53269974802527,466.134375L242.67785649198564,465.88125C242.88331389617798,465.5375,243.1133267238668,465.2125,243.36540834988796,464.9046875C243.549418612039,464.68125,243.85247605392632,464.60375,244.12724813457083,464.691875L245.8573175925655,465.24687500000005C246.27382730756955,464.92375000000004,246.73385296294725,464.655,247.22496143287742,464.4509375L247.61349661478425,462.66656250000005C247.67566224388935,462.3828125,247.89324194575715,462.1575,248.1792038396406,462.10968750000006C248.60814668046572,462.03753125000003,249.04952264711181,462,249.50022345812374,462C249.9509242691356,462,250.39230023578176,462.03753125000003,250.8212430766069,462.10968750000006C251.10720497049033,462.1575,251.32478467235813,462.3828125,251.38695030146323,462.66656250000005L251.77548548337,464.4509375C252.23861942020295,464.655,252.72661960867788,464.92375000000004,253.143129323682,465.24687500000005L254.87444209425877,464.691875C255.14797086232113,464.60375,255.44947416348083,464.68125,255.63597105079612,464.9046875C255.88774184867174,465.2125,256.11775467636056,465.5375,256.32290125240735,465.88125L256.46899048080434,466.134375C256.65548736811957,466.475,256.82022628524805,466.834375,256.95699066927926,467.20624999999995ZL256.95699066927926,467.20624999999995ZZM249.50022345812374,472.5C250.8740838613462,472.5,251.98684862232733,471.38125,251.98684862232733,469.97187499999995C251.98684862232733,468.61875,250.8740838613462,467.47187499999995,249.50022345812374,467.47187499999995C248.12636305490128,467.47187499999995,247.01359829392015,468.61875,247.01359829392015,469.97187499999995C247.01359829392015,471.38125,248.12636305490128,472.5,249.50022345812374,472.5ZZ"
style="fill: none; stroke-width: 2; stroke: currentColor; stroke-opacity: 1;"></path
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Preferences</span>
</div>
</a>
</li>
{#if $contributions.length > 0}
<li
class="pf-c-nav__item pf-m-expandable {contributionsExpanded
? 'pf-m-expanded'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a
class="pf-c-nav__link"
id="expandable-third-level-example-example-2"
aria-expanded="true"
href="/contribs">
<svg
xmlns="http://www.w3.org/2000/svg"
class="pt-1 md:hidden icon icon-tabler icon-tabler-puzzle"
stroke-width="1.5"
fill="currentColor"
width="18"
height="18"
viewBox="0 0 512 512"
><path
d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
></path
></svg>
<span class="hidden md:block group-hover:block mr-5">Extensions</span>
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon" on:click="{() => toggleContributions()}">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</a>
{#if contributionsExpanded}
<section class="pf-c-nav__subnav" aria-labelledby="expandable-third-level-example-example-2">
<ul class="pf-c-nav__list">
{#each $contributions as contribution}
<li
class="pf-c-nav__item {meta.url.startsWith('/contribs/' + contribution.name)
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} ">
<a href="/contribs/{contribution.name}" class="pf-c-nav__link">{contribution.name}</a>
</li>
{/each}
</ul>
</section>
{/if}
</li>
{/if}
</ul>
</nav>
{#if meta.url.startsWith('/preferences')}
<PreferencesNavigation meta="{meta}" exitSettingsCallback="{() => router.goto(nonSettingsPage)}" />
{:else}
<AppNavigation meta="{meta}" />
{/if}
<div class="w-full h-full bg-zinc-800 flex flex-col overflow-y-scroll">
<Route path="/">

303
packages/renderer/src/AppNavigation.svelte Normal file
View file

@ -0,0 +1,303 @@
<script lang="ts">
import { imagesInfos } from './stores/images';
import { contributions } from './stores/contribs';
import { podsInfos } from './stores/pods';
import { onMount } from 'svelte';
import { CommandRegistry } from './lib/CommandRegistry';
import { containersInfos } from './stores/containers';
import { volumeListInfos } from './stores/volumes';
let containersCountValue;
onMount(async () => {
const commandRegistry = new CommandRegistry();
commandRegistry.init();
containersInfos.subscribe(value => {
containersCountValue = value.length;
});
});
let contributionsExpanded: boolean = true;
function toggleContributions() {
contributionsExpanded = !contributionsExpanded;
}
export let meta;
</script>
<nav
class="pf-c-nav z-0 group w-12 hover:w-[180px] md:w-[180px] md:min-w-[180px] shadow flex-col justify-between sm:flex transition-all duration-500 ease-in-out"
aria-label="Global">
<ul class="pf-c-nav__list">
<li
class="pf-c-nav__item flex w-full items-center justify-between {meta.url === '/'
? 'pf-m-current'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/" class="pf-c-nav__link flex items-center align-middle">
<div class="flex items-center">
<svg class="" width="20" viewBox="0 0 576 512"
><path
style="fill: currentColor;"
d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"
></path
></svg>
<span class="hidden md:block group-hover:block mx-2">Home</span>
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full items-center justify-between {meta.url.startsWith('/containers')
? 'pf-m-current'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/containers" class="pf-c-nav__link flex items-center align-middle">
<div class="flex items-center">
<svg
class=""
width="20"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 12"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1">
<g
id="shape-0ce89ec0-e7f8-11ec-8809-dd3f56ff9666"
xml:space="preserve"
width="16"
version="1.1"
height="16"
rx="0"
ry="0"
style="fill: currentColor;"
><g id="shape-0ce93b00-e7f8-11ec-8809-dd3f56ff9666" rx="0" ry="0" style="fill: rgb(0, 0, 0);"
><g id="shape-0ceb36d0-e7f8-11ec-8809-dd3f56ff9666"
><g id="fills-0ceb36d0-e7f8-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M1.5218559309491866,0C0.6868867060620687,0,0,0.6864952404280302,0,1.5209892752261567L0,10.471200983324707C0,11.30569396019996,0.6868857987537922,12,1.5218559309491866,12L14.480097805928153,12C15.315067786905502,12,16,11.305694338029753,16,10.471200983324707L16,8.508948847843612L16,4.635209785448751L16,3.461763828280482L16,1.5209892752261567C16,0.6864956560407336,15.315067786905502,0,14.480097805928153,0L1.5218559309491866,0ZZM1.5218559309491866,1.0113895148408574L14.480097805928153,1.0113895148408574C14.77024323206615,1.0113895148408574,14.988033857810478,1.231011497158761,14.988034235855366,1.5209892752261567L14.988034235855366,3.461763828280482L14.988034235855366,4.635209785448751L14.988034235855366,8.508948847843612L14.988034235855366,10.471200983324707C14.988034235855366,10.76117740120526,14.770242097931032,10.980800781493144,14.480097805928153,10.980800781493144L1.5218559309491866,10.980800781493144C1.231713453562861,10.980800781493144,1.0119658019493727,10.761175889886317,1.0119658019493727,10.471200983324707L1.0119658019493727,1.5209892752261567C1.0119658019493727,1.2310112326777016,1.2317126218636076,1.0113895148408574,1.5218559309491866,1.0113895148408574ZZM2.9968254280290694,2.0013017495180065L2.9968254280290694,2.997071365848342L2.9968254280290694,8.995118666005055L2.000488424768264,8.995118666005055L2.000488424768264,10.00065102589133L14.00732599347839,10.00065102589133L14.00732599347839,8.995118666005055L13.003174798798,8.995118666005055L13.003174798798,2.997071365848342L14.02881558694935,2.997071365848342L14.02881558694935,2.0013017495180065L12.006837795537194,2.0013017495180065L12.006837795537194,2.997071365848342L12.006837795537194,8.995118666005055L10.004395482673317,8.995118666005055L10.004395482673317,2.997071365848342L11.031990385747122,2.997071365848342L11.031990385747122,2.0013017495180065L9.000244287993155,2.0013017495180065L9.000244287993155,2.997071365848342L9.000244287993155,8.995118666005055L6.999755712006845,8.995118666005055L6.999755712006845,2.997071365848342L8.025396878203082,2.997071365848342L8.025396878203082,2.0013017495180065L6.00341870874604,2.0013017495180065L6.00341870874604,2.997071365848342L6.00341870874604,8.995118666005055L4.002930510804617,8.995118666005055L4.002930510804617,2.997071365848342L5.028571298955967,2.997071365848342L5.028571298955967,2.0013017495180065L2.9968254280290694,2.0013017495180065ZZ"
style="color: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(255, 255, 255); fill-opacity: 1;"
></path
></g
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Containers</span>
{#if containersCountValue > 0}
{#if innerWidth >= 768}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{containersCountValue}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/images'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/images" class="pf-c-nav__link">
<div class="flex items-center">
<svg
width="18"
xmlns="http://www.w3.org/2000/svg"
height="13.000000000000455"
id="screenshot-e34d1510-e7fb-11ec-8809-dd3f56ff9666"
viewBox="-1 -1 18 13.000000000000455"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1"
><g id="shape-e34d1510-e7fb-11ec-8809-dd3f56ff9666" rx="0" ry="0"
><g id="shape-49a31690-e769-11ec-8809-dd3f56ff9666"
><g id="fills-49a31690-e769-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M5.783333338456487,0C3.7675837420570133,0.00024082716072371113,2.1335625589499614,1.5932840918758302,2.1333333387087805,3.558465444585636C2.1340397303924874,3.845714958710232,2.1704154967114846,4.131824643674463,2.241666654362234,4.410549509031171C0.9281347063156318,4.900815943180987,0,6.135935234257886,0,7.591663742218316C0,9.479885735091557,1.5609960651740948,11.000000000000455,3.4999999622045834,11.000000000000455L12.499999795905296,11.000000000000455C14.439003894510734,11.000000000000455,16,9.479885735091557,16,7.591663742218316C16,6.113553997334293,15.043556571366935,4.862597573568564,13.697916538425034,4.388233049671271C13.37622687768362,3.262100862960324,12.324067703554647,2.483070252013931,11.124999989291155,2.483216393949988C10.494968678541227,2.4838062231906406,9.885439338284868,2.7015429405801115,9.404166753826303,3.0979342674263535C9.166663776083169,1.3252418303718514,7.617086223974638,-0.0005549815805352409,5.783333338456487,0ZZ"
style="opacity: 1; fill: none; stroke-linejoin: round; stroke-dasharray: none;"></path
></g
><g id="strokes-49a31690-e769-11ec-8809-dd3f56ff9666"
><g class="stroke-shape"
><path
rx="0"
ry="0"
d="M5.783333338456487,0C3.7675837420570133,0.00024082716072371113,2.1335625589499614,1.5932840918758302,2.1333333387087805,3.558465444585636C2.1340397303924874,3.845714958710232,2.1704154967114846,4.131824643674463,2.241666654362234,4.410549509031171C0.9281347063156318,4.900815943180987,0,6.135935234257886,0,7.591663742218316C0,9.479885735091557,1.5609960651740948,11.000000000000455,3.4999999622045834,11.000000000000455L12.499999795905296,11.000000000000455C14.439003894510734,11.000000000000455,16,9.479885735091557,16,7.591663742218316C16,6.113553997334293,15.043556571366935,4.862597573568564,13.697916538425034,4.388233049671271C13.37622687768362,3.262100862960324,12.324067703554647,2.483070252013931,11.124999989291155,2.483216393949988C10.494968678541227,2.4838062231906406,9.885439338284868,2.7015429405801115,9.404166753826303,3.0979342674263535C9.166663776083169,1.3252418303718514,7.617086223974638,-0.0005549815805352409,5.783333338456487,0ZZ"
style="opacity: 1; fill: none; stroke-linejoin: round; stroke-dasharray: none; stroke-width: 2; stroke: currentColor; stroke-opacity: 1;"
></path
></g
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Images</span>
{#if innerWidth >= 768}
{#if $imagesInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$imagesInfos.length}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/pods'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/pods" class="pf-c-nav__link">
<div class="flex items-center">
<svg width="18" height="18" version="1.1" viewBox="0 0 12.3 12.184" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-3.8603 -3.8322)">
<text
x="10.017183"
y="16.811775"
style="fill:#ffffff;font-family:sans-serif;letter-spacing:0px;line-height:0%;stroke-width:.26458px;word-spacing:0px"
xml:space="preserve"
><tspan
x="10.017183"
y="16.811775"
text-anchor="middle"
style="fill:currentColor;font-family:Arial;font-size:2.8222px;line-height:6.61458;stroke-width:.26458px;text-align:center"
></tspan
></text>
<g transform="matrix(1.6985 0 0 1.6985 -6.7754 -6.3352)" style="fill:currentColor">
<path
d="m6.2618 7.0361 3.6208-1.05 3.6208 1.05-3.6208 1.05z"
style="fill-rule:evenodd;fill:currentColor"></path>
<path d="m6.2618 7.4382v3.8528l3.3736 1.8687 0.0167-4.7132z" style="fill-rule:evenodd;fill:currentColor"
></path>
<path
d="m13.503 7.4382v3.8528l-3.3736 1.8687-0.0167-4.7132z"
style="fill-rule:evenodd;fill:currentColor"></path>
</g>
</g>
</svg>
<span class="hidden md:block group-hover:block mx-2">Pods</span>
{#if innerWidth >= 768}
{#if $podsInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$podsInfos.length}</span>
{/if}
{/if}
</div>
</a>
</li>
<li
class="pf-c-nav__item flex w-full justify-between {meta.url === '/volumes'
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/volumes" class="pf-c-nav__link">
<div class="flex items-center">
<svg width="18" height="18" version="1.1" viewBox="0 0 9.525 9.525" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-5.2488 -6.9359)">
<g transform="translate(-.18879 1.9844)">
<path
d="m5.571 8.1928c0 0.62112 2.0726 1.1246 4.6292 1.1246 2.5566 0 4.6292-0.50352 4.6292-1.1246v3.0424c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246z"
style="fill:currentColor"></path>
<path
d="m5.571 8.1928c0-0.62112 2.0726-1.1246 4.6292-1.1246 2.5566 0 4.6292 0.50352 4.6292 1.1246 0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246z"
style="fill:currentColor"></path>
<path
d="m14.829 8.1928c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246 0-0.62112 2.0726-1.1246 4.6292-1.1246 2.5566 0 4.6292 0.50352 4.6292 1.1246v3.0424c0 0.62112-2.0725 1.1246-4.6292 1.1246-2.5566 0-4.6292-0.50352-4.6292-1.1246v-3.0424"
style="fill:none;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:0.2;stroke:#222"></path>
</g>
</g>
</svg>
<span class="hidden md:block group-hover:block mx-2">Volumes</span>
{#if innerWidth >= 768}
{#if $volumeListInfos.length > 0}
<span class="pf-c-badge pf-m-read hidden group-hover:flex md:flex items-center justify-center"
>{$volumeListInfos.map(volumeInfo => volumeInfo.Volumes).flat().length}</span>
{/if}
{/if}
</div>
</a>
</li>
{#if $contributions.length > 0}
<li
class="pf-c-nav__item pf-m-expandable {contributionsExpanded
? 'pf-m-expanded'
: ''} hover:text-gray-300 cursor-pointer items-center mb-6">
<a class="pf-c-nav__link" id="expandable-third-level-example-example-2" aria-expanded="true" href="/contribs">
<svg
xmlns="http://www.w3.org/2000/svg"
class="pt-1 md:hidden icon icon-tabler icon-tabler-puzzle"
stroke-width="1.5"
fill="currentColor"
width="18"
height="18"
viewBox="0 0 512 512"
><path
d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"
></path
></svg>
<span class="hidden md:block group-hover:block mr-5">Extensions</span>
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon" on:click="{() => toggleContributions()}">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</a>
{#if contributionsExpanded}
<section class="pf-c-nav__subnav" aria-labelledby="expandable-third-level-example-example-2">
<ul class="pf-c-nav__list">
{#each $contributions as contribution}
<li
class="pf-c-nav__item {meta.url.startsWith('/contribs/' + contribution.name)
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} ">
<a href="/contribs/{contribution.name}" class="pf-c-nav__link">{contribution.name}</a>
</li>
{/each}
</ul>
</section>
{/if}
</li>
{/if}
</ul>
<ul class="pf-c-nav__list">
<li
class="pf-c-nav__item flex w-full justify-between {meta.url.startsWith('/preferences')
? 'dark:text-white pf-m-current'
: 'dark:text-gray-400'} hover:text-gray-300 cursor-pointer items-center mb-6">
<a href="/preferences" class="pf-c-nav__link ">
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
id="screenshot-23f38720-e7fc-11ec-8809-dd3f56ff9666"
viewBox="241 461 17 18"
style="-webkit-print-color-adjust: exact;"
fill="none"
version="1.1"
><g id="shape-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><g id="fills-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><path
rx="0"
ry="0"
d="M256.95699066927926,467.20624999999995C257.05956395730266,467.475,256.9725320765555,467.77812500000005,256.76116893759826,467.975L255.41528306747307,469.20624999999995C255.44947416348083,469.46562500000005,255.4681238522124,469.73125000000005,255.4681238522124,470C255.4681238522124,470.26874999999995,255.44947416348083,470.53437499999995,255.41528306747307,470.79375000000005L256.76116893759826,472.025C256.9725320765555,472.22187499999995,257.05956395730266,472.525,256.95699066927926,472.79375000000005C256.82022628524805,473.165625,256.65548736811957,473.525,256.46899048080434,473.865625L256.32290125240735,474.11875C256.11775467636056,474.4625,255.88774184867174,474.7875,255.63597105079612,475.09687499999995C255.44947416348083,475.31875,255.14797086232113,475.396875,254.87444209425877,475.30937500000005L253.143129323682,474.75312499999995C252.72661960867788,475.07500000000005,252.23861942020295,475.34375,251.77548548337,475.54999999999995L251.38695030146323,477.334375C251.32478467235813,477.615625,251.10720497049033,477.81562499999995,250.8212430766069,477.890625C250.39230023578176,477.9625,249.9509242691356,478,249.47224892502646,478C249.04952264711181,478,248.60814668046572,477.9625,248.1792038396406,477.890625C247.89324194575715,477.81562499999995,247.67566224388935,477.615625,247.61349661478425,477.334375L247.22496143287742,475.54999999999995C246.73385296294725,475.34375,246.27382730756955,475.07500000000005,245.8573175925655,474.75312499999995L244.12724813457083,475.30937500000005C243.85247605392632,475.396875,243.549418612039,475.31875,243.36540834988796,475.09687499999995C243.1133267238668,474.7875,242.88331389617798,474.4625,242.67816732013117,474.11875L242.53269974802527,473.865625C242.34402706369133,473.525,242.17990980285387,473.165625,242.0422129343861,472.79375000000005C241.94150461523586,472.525,242.0263606989643,472.22187499999995,242.23958880679476,472.025L243.58423136433785,470.79375000000005C243.55004026833006,470.53437499999995,243.5323230640351,470.26874999999995,243.5323230640351,470C243.5323230640351,469.73125000000005,243.55004026833006,469.46562500000005,243.58423136433785,469.20624999999995L242.23958880679476,467.975C242.0263606989643,467.77812500000005,241.94150461523586,467.478125,242.0422129343861,467.20624999999995C242.17990980285387,466.834375,242.34433789183683,466.475,242.53269974802527,466.134375L242.67785649198564,465.88125C242.88331389617798,465.5375,243.1133267238668,465.2125,243.36540834988796,464.9046875C243.549418612039,464.68125,243.85247605392632,464.60375,244.12724813457083,464.691875L245.8573175925655,465.24687500000005C246.27382730756955,464.92375000000004,246.73385296294725,464.655,247.22496143287742,464.4509375L247.61349661478425,462.66656250000005C247.67566224388935,462.3828125,247.89324194575715,462.1575,248.1792038396406,462.10968750000006C248.60814668046572,462.03753125000003,249.04952264711181,462,249.50022345812374,462C249.9509242691356,462,250.39230023578176,462.03753125000003,250.8212430766069,462.10968750000006C251.10720497049033,462.1575,251.32478467235813,462.3828125,251.38695030146323,462.66656250000005L251.77548548337,464.4509375C252.23861942020295,464.655,252.72661960867788,464.92375000000004,253.143129323682,465.24687500000005L254.87444209425877,464.691875C255.14797086232113,464.60375,255.44947416348083,464.68125,255.63597105079612,464.9046875C255.88774184867174,465.2125,256.11775467636056,465.5375,256.32290125240735,465.88125L256.46899048080434,466.134375C256.65548736811957,466.475,256.82022628524805,466.834375,256.95699066927926,467.20624999999995ZL256.95699066927926,467.20624999999995ZZM249.50022345812374,472.5C250.8740838613462,472.5,251.98684862232733,471.38125,251.98684862232733,469.97187499999995C251.98684862232733,468.61875,250.8740838613462,467.47187499999995,249.50022345812374,467.47187499999995C248.12636305490128,467.47187499999995,247.01359829392015,468.61875,247.01359829392015,469.97187499999995C247.01359829392015,471.38125,248.12636305490128,472.5,249.50022345812374,472.5ZZ"
></path
></g
><g id="strokes-23f38720-e7fc-11ec-8809-dd3f56ff9666"
><g class="stroke-shape"
><path
rx="0"
ry="0"
d="M256.95699066927926,467.20624999999995C257.05956395730266,467.475,256.9725320765555,467.77812500000005,256.76116893759826,467.975L255.41528306747307,469.20624999999995C255.44947416348083,469.46562500000005,255.4681238522124,469.73125000000005,255.4681238522124,470C255.4681238522124,470.26874999999995,255.44947416348083,470.53437499999995,255.41528306747307,470.79375000000005L256.76116893759826,472.025C256.9725320765555,472.22187499999995,257.05956395730266,472.525,256.95699066927926,472.79375000000005C256.82022628524805,473.165625,256.65548736811957,473.525,256.46899048080434,473.865625L256.32290125240735,474.11875C256.11775467636056,474.4625,255.88774184867174,474.7875,255.63597105079612,475.09687499999995C255.44947416348083,475.31875,255.14797086232113,475.396875,254.87444209425877,475.30937500000005L253.143129323682,474.75312499999995C252.72661960867788,475.07500000000005,252.23861942020295,475.34375,251.77548548337,475.54999999999995L251.38695030146323,477.334375C251.32478467235813,477.615625,251.10720497049033,477.81562499999995,250.8212430766069,477.890625C250.39230023578176,477.9625,249.9509242691356,478,249.47224892502646,478C249.04952264711181,478,248.60814668046572,477.9625,248.1792038396406,477.890625C247.89324194575715,477.81562499999995,247.67566224388935,477.615625,247.61349661478425,477.334375L247.22496143287742,475.54999999999995C246.73385296294725,475.34375,246.27382730756955,475.07500000000005,245.8573175925655,474.75312499999995L244.12724813457083,475.30937500000005C243.85247605392632,475.396875,243.549418612039,475.31875,243.36540834988796,475.09687499999995C243.1133267238668,474.7875,242.88331389617798,474.4625,242.67816732013117,474.11875L242.53269974802527,473.865625C242.34402706369133,473.525,242.17990980285387,473.165625,242.0422129343861,472.79375000000005C241.94150461523586,472.525,242.0263606989643,472.22187499999995,242.23958880679476,472.025L243.58423136433785,470.79375000000005C243.55004026833006,470.53437499999995,243.5323230640351,470.26874999999995,243.5323230640351,470C243.5323230640351,469.73125000000005,243.55004026833006,469.46562500000005,243.58423136433785,469.20624999999995L242.23958880679476,467.975C242.0263606989643,467.77812500000005,241.94150461523586,467.478125,242.0422129343861,467.20624999999995C242.17990980285387,466.834375,242.34433789183683,466.475,242.53269974802527,466.134375L242.67785649198564,465.88125C242.88331389617798,465.5375,243.1133267238668,465.2125,243.36540834988796,464.9046875C243.549418612039,464.68125,243.85247605392632,464.60375,244.12724813457083,464.691875L245.8573175925655,465.24687500000005C246.27382730756955,464.92375000000004,246.73385296294725,464.655,247.22496143287742,464.4509375L247.61349661478425,462.66656250000005C247.67566224388935,462.3828125,247.89324194575715,462.1575,248.1792038396406,462.10968750000006C248.60814668046572,462.03753125000003,249.04952264711181,462,249.50022345812374,462C249.9509242691356,462,250.39230023578176,462.03753125000003,250.8212430766069,462.10968750000006C251.10720497049033,462.1575,251.32478467235813,462.3828125,251.38695030146323,462.66656250000005L251.77548548337,464.4509375C252.23861942020295,464.655,252.72661960867788,464.92375000000004,253.143129323682,465.24687500000005L254.87444209425877,464.691875C255.14797086232113,464.60375,255.44947416348083,464.68125,255.63597105079612,464.9046875C255.88774184867174,465.2125,256.11775467636056,465.5375,256.32290125240735,465.88125L256.46899048080434,466.134375C256.65548736811957,466.475,256.82022628524805,466.834375,256.95699066927926,467.20624999999995ZL256.95699066927926,467.20624999999995ZZM249.50022345812374,472.5C250.8740838613462,472.5,251.98684862232733,471.38125,251.98684862232733,469.97187499999995C251.98684862232733,468.61875,250.8740838613462,467.47187499999995,249.50022345812374,467.47187499999995C248.12636305490128,467.47187499999995,247.01359829392015,468.61875,247.01359829392015,469.97187499999995C247.01359829392015,471.38125,248.12636305490128,472.5,249.50022345812374,472.5ZZ"
style="fill: none; stroke-width: 2; stroke: currentColor; stroke-opacity: 1;"></path
></g
></g
></g
></svg>
<span class="hidden md:block group-hover:block mx-2">Settings</span>
</div>
</a>
</li>
</ul>
</nav>

248
packages/renderer/src/PreferencesNavigation.svelte Normal file
View file

@ -0,0 +1,248 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Buffer } from 'buffer';
import { extensionInfos } from './stores/extensions';
import { configurationProperties } from './stores/configurationProperties';
import { ConfigurationRegistry } from '../../main/src/plugin/configuration-registry';
import type { ProviderInfo } from '../../main/src/plugin/api/provider-info';
export let exitSettingsCallback: () => void;
export let meta;
let extensions, configProperties, providers;
$: extensions = [];
$: configProperties = new Map();
$: providers = [];
$: sectionExpanded = {};
function toggleSection(provider: string) {
sectionExpanded[provider] = sectionExpanded[provider] === undefined ? true : !sectionExpanded[provider];
}
onMount(async () => {
await fetchProviderInfos();
extensionInfos.subscribe(value => {
extensions = value;
});
configurationProperties.subscribe(value => {
configProperties = value
.filter(property => property.scope === ConfigurationRegistry.DEFAULT_SCOPE)
.reduce(function (map, property) {
let [parentLeftId] = property.parentId.split('.');
if (map[parentLeftId] === undefined) {
map[parentLeftId] = [];
}
let children = map[parentLeftId].find(item => item.id === property.parentId);
if (children === undefined) {
map[parentLeftId].push({ id: property.parentId, title: property.title });
}
return map;
}, new Map());
});
});
async function fetchProviderInfos() {
providers = await window.getProviderInfos();
}
$: isCurrentPage = (pathParam: string): boolean => meta.url === pathParam;
$: addExpandedClass = (section: string): string => (sectionExpanded[section] ? 'pf-m-expanded' : '');
$: addCurrentClass = (pathParam: string): string =>
isCurrentPage(pathParam) ? 'dark:text-white pf-m-current' : 'dark:text-gray-400';
$: isAriaExpanded = (section: string): string => (sectionExpanded[section] ? 'true' : 'false');
$: addSectionHiddenClass = (section: string): string => (sectionExpanded[section] ? '' : 'hidden');
$: addExpandableClass = (provider: ProviderInfo): string =>
provider.containerConnections.length > 0 ? 'pf-m-expandable' : '';
$: addHiddenClass = (provider: ProviderInfo): string => (provider.containerConnections.length > 0 ? '' : 'hidden');
</script>
<nav
class="pf-c-nav z-0 group w-52 shadow flex-col justify-between flex transition-all duration-500 ease-in-out"
aria-label="Global">
<ul class="pf-c-nav__list h-full overflow-auto">
<!-- Resources configuration start -->
<li
class="pf-c-nav__item pf-m-expandable {addExpandedClass(
'resources',
)} dark:text-gray-400 hover:text-gray-300 cursor-pointer items-center">
<button
class="pf-c-nav__link"
id="configuration-section-resources"
aria-expanded="{isAriaExpanded('resources')}"
on:click="{() => toggleSection('resources')}">
Resources
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav {addSectionHiddenClass('resources')}">
<ul class="pf-c-nav__list">
{#each providers as provider}
<li
class="pf-c-nav__item {addExpandableClass(provider)} {addExpandedClass(provider.name)} {addCurrentClass(
`/preferences/provider/${provider.internalId}`,
)}">
<a
class="pf-c-nav__link"
id="configuration-section-provider-{provider.name.toLowerCase()}"
aria-expanded="{isAriaExpanded(provider.name)}"
href="/preferences/provider/{provider.internalId}">
{provider.name}
<span class="pf-c-nav__toggle {addHiddenClass(provider)}">
<span class="pf-c-nav__toggle-icon" on:click="{() => toggleSection(provider.name)}">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</a>
<section class="pf-c-nav__subnav {addSectionHiddenClass(provider.name)}">
<ul class="pf-c-nav__list">
{#each provider.containerConnections as connection}
<li
class="pf-c-nav__item {addCurrentClass(
`/preferences/container-connection/${provider.internalId}/${Buffer.from(
connection.endpoint.socketPath,
).toString('base64')}`,
)}">
<a
href="/preferences/container-connection/{provider.internalId}/{Buffer.from(
connection.endpoint.socketPath,
).toString('base64')}"
id="configuration-section-provider-{provider.name.toLowerCase()}-{connection.name
.toLowerCase()
.replaceAll(' ', '_')}"
class="pf-c-nav__link">{connection.name}</a>
</li>
{/each}
</ul>
</section>
</li>
{/each}
</ul>
</section>
</li>
<!-- Resources configuration end -->
<!-- Proxies configuration start -->
<li
class="pf-c-nav__item flex w-full justify-between {addCurrentClass(
'/preferences/proxies',
)} hover:text-gray-300 cursor-pointer items-center">
<a href="/preferences/proxies" id="configuration-section-proxy" class="pf-c-nav__link ">
<div class="flex items-center">
<span class="hidden md:block group-hover:block">Proxy</span>
</div>
</a>
</li>
<!-- Proxies configuration end -->
<!-- Registries configuration start -->
<li
class="pf-c-nav__item flex w-full justify-between {addCurrentClass(
'/preferences/registries',
)} hover:text-gray-300 cursor-pointer items-center">
<a href="/preferences/registries" id="configuration-section-registries" class="pf-c-nav__link">
<div class="flex items-center">
<span class="hidden md:block group-hover:block">Registries</span>
</div>
</a>
</li>
<!-- Registries configuration end -->
<!-- Extensions catalog configuration start -->
<li
class="pf-c-nav__item pf-m-expandable {addExpandedClass('extensionsCatalog')} {addCurrentClass(
'/preferences/extensions',
)} hover:text-gray-300 cursor-pointer items-center">
<button
class="pf-c-nav__link text-left"
id="configuration-section-extensions-catalog"
aria-expanded="{isAriaExpanded('extensionsCatalog')}"
on:click="{() => toggleSection('extensionsCatalog')}">
Extensions
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav {addSectionHiddenClass('extensionsCatalog')}">
<ul class="pf-c-nav__list">
{#each extensions as extension}
<li class="pf-c-nav__item {addCurrentClass(`/preferences/extension/${extension.name}`)} ">
<a
href="/preferences/extension/{extension.name}"
id="configuration-section-extensions-catalog-{extension.name.toLowerCase()}"
class="pf-c-nav__link">{extension.name}</a>
</li>
{/each}
</ul>
</section>
</li>
<!-- Extensions catalog configuration end -->
<!-- Docker desktop extensions configuration start -->
<li
class="pf-c-nav__item flex w-full justify-between {addCurrentClass(
'/preferences/ddExtensions',
)} hover:text-gray-300 cursor-pointer items-center">
<a href="/preferences/ddExtensions" id="configuration-section-docker-desktop-extensions" class="pf-c-nav__link ">
<div class="flex items-center">
<span class="hidden md:block group-hover:block">Docker Desktop Extensions</span>
</div>
</a>
</li>
<!-- Docker desktop extensions configuration start -->
<!-- Default configuration properties start -->
{#each Object.entries(configProperties) as [configSection, configItems]}
<li
class="pf-c-nav__item pf-m-expandable {addExpandedClass(configSection)} {addCurrentClass(
`/preferences/default/${configSection}`,
)} hover:text-gray-300 cursor-pointer items-center">
<a
class="pf-c-nav__link"
id="configuration-section-{configSection.toLowerCase()}"
aria-expanded="{isAriaExpanded(configSection)}"
href="/preferences/default/{configSection}">
<span class="hidden md:block group-hover:block mr-5 capitalize">{configSection}</span>
{#if configItems.length > 0}
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon" on:click="{() => toggleSection(configSection)}">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
{/if}
</a>
<section class="pf-c-nav__subnav {addSectionHiddenClass(configSection)}">
<ul class="pf-c-nav__list">
{#each configItems as configItem}
<li class="pf-c-nav__item {addCurrentClass(`/preferences/default/${configItem.id}`)}">
<a
href="/preferences/default/{configItem.id}"
id="configuration-section-{configSection.toLowerCase()}-{configItem.title.toLowerCase()}"
class="pf-c-nav__link">{configItem.title}</a>
</li>
{/each}
</ul>
</section>
</li>
{/each}
<!-- Default configuration properties end -->
</ul>
<ul class="pf-c-nav__list">
<li
class="pf-c-nav__item pf-c-nav__link flex w-full justify-between dark:text-gray-400 hover:text-gray-300 cursor-pointer items-center"
on:click="{exitSettingsCallback}">
<div class="flex items-center">
<i class="fa fa-angle-left"></i>
<span class="hidden md:block group-hover:block mx-2">Exit settings</span>
</div>
</li>
</ul>
</nav>

170
packages/renderer/src/lib/preferences/PreferencesPage.svelte
View file

@ -1,189 +1,39 @@
<script lang="ts">
import { configurationProperties } from '../../stores/configurationProperties';
import { Buffer } from 'buffer';
import { onMount } from 'svelte';
import { Route, router } from 'tinro';
import { Route } from 'tinro';
import {
ConfigurationRegistry,
IConfigurationPropertyRecordedSchema,
} from '../../../../main/src/plugin/configuration-registry';
import TreeView from '../treeview/TreeView.svelte';
import type { TreeViewDataItem } from '../treeview/TreeViewDataItem';
import PreferencesRendering from './PreferencesRendering.svelte';
import PreferencesContainerConnectionRendering from './PreferencesContainerConnectionRendering.svelte';
import { providerInfos } from '../../stores/providers';
import PreferencesProviderRendering from './PreferencesProviderRendering.svelte';
import { extensionInfos } from '../../stores/extensions';
import PreferencesExtensionRendering from './PreferencesExtensionRendering.svelte';
import type { ExtensionInfo } from '../../../../main/src/plugin/api/extension-info';
import PreferencesRegistriesRendering from './PreferencesRegistriesRendering.svelte';
import PreferencesPageDockerExtensions from '../docker-extension/PreferencesPageDockerExtensions.svelte';
import PreferencesProxiesRendering from './PreferencesProxiesRendering.svelte';
let items: TreeViewDataItem[] = [];
let extensions: ExtensionInfo[] = [];
let properties: IConfigurationPropertyRecordedSchema[];
function onSelectedItem(item: TreeViewDataItem) {
if (item.id.startsWith('provider@')) {
const providerId = item.id.split('@')[1];
router.goto(`/preferences/provider/${providerId}`);
} else if (item.id.startsWith('container-connection@')) {
// extract provider by the name before the @
const provider = item.id.split('@')[1];
const connection = item.id.split('@')[2];
router.goto(`/preferences/container-connection/${provider}/${connection}`);
} else if (item.id === 'extensions') {
router.goto(`/preferences/extensions`);
} else if (item.id === 'ddExtensions') {
router.goto(`/preferences/ddExtensions`);
} else if (item.id.startsWith('extension@')) {
// extract extension by the name before the @
const extensionId = item.id.split('@')[1];
router.goto(`/preferences/extension/${extensionId}`);
} else if (item.id === 'registries') {
router.goto('/preferences/registries');
} else if (item.id === 'proxies') {
router.goto('/preferences/proxies');
} else {
router.goto(`/preferences/default/${item.id}`);
}
}
async function buildTreeViewData(configProperties?: IConfigurationPropertyRecordedSchema[]): Promise<void> {
const treeViewDataItems: TreeViewDataItem[] = [];
if (!configProperties) {
if (properties) {
configProperties = properties;
} else {
return;
}
}
// map all the connections
const providers = await window.getProviderInfos();
const providerTreeViewDataItems = [];
providers.forEach(provider => {
const providerTreeViewDataItem = {
id: `provider@${provider.internalId}`,
name: provider.name,
children: [],
};
providerTreeViewDataItems.push(providerTreeViewDataItem);
// add under the provider the container connection links
provider.containerConnections.forEach(connection => {
providerTreeViewDataItem.children.push({
// encode socketpath as base64
id: `container-connection@${provider.internalId}@${Buffer.from(connection.endpoint.socketPath).toString(
'base64',
)}`,
name: `${connection.name}`,
children: [],
});
});
});
if (providerTreeViewDataItems.length > 0) {
treeViewDataItems.push({
id: 'providers',
name: 'Resources',
children: providerTreeViewDataItems,
});
}
// Add proxies
treeViewDataItems.push({
id: 'proxies',
name: 'Proxy',
children: [],
});
// Add registries
treeViewDataItems.push({
id: 'registries',
name: 'Registries',
children: [],
});
// then, add all features (using the default scope)
configProperties
.filter(property => property.scope === ConfigurationRegistry.DEFAULT_SCOPE)
.forEach(property => {
// split parent id from property id
const [parentLeftId] = property.parentId.split('.');
let parentItem = treeViewDataItems.find(item => item.id === parentLeftId);
if (!parentItem) {
parentItem = {
id: parentLeftId,
name: parentLeftId,
children: [],
};
treeViewDataItems.push(parentItem);
}
// add child if not existing
let childItem = parentItem.children.find(item => item.id === property.parentId);
if (!childItem) {
parentItem.children.push({
id: property.parentId,
name: property.title,
children: [],
});
}
properties = configProperties;
});
// now adds the extensions
const extensionsTreeViewDataItems = [];
extensions.forEach(extension => {
const extensionItem = {
id: `extension@${extension.name}`,
name: extension.name,
children: [],
};
extensionsTreeViewDataItems.push(extensionItem);
});
if (extensionsTreeViewDataItems.length > 0) {
treeViewDataItems.push({
id: 'extensions',
name: 'Extensions Catalog',
children: extensionsTreeViewDataItems,
});
}
// now adds the Docker Desktop Extensions
treeViewDataItems.push({
id: 'ddExtensions',
name: 'Docker Desktop Extensions',
children: [],
});
items = treeViewDataItems;
}
let defaultPrefPageId: string;
onMount(async () => {
configurationProperties.subscribe(value => {
buildTreeViewData(value);
});
providerInfos.subscribe(() => {
buildTreeViewData();
});
extensionInfos.subscribe(value => {
extensions = value;
buildTreeViewData();
properties = value;
[defaultPrefPageId] = value
.filter(property => property.scope === ConfigurationRegistry.DEFAULT_SCOPE)
.values()
.next()
.value.parentId.split('.');
});
});
</script>
<div class="flex h-full">
<div class="pr-2 w-[250px]">
<TreeView items="{items}" onSelect="{item => onSelectedItem(item)}" />
</div>
<Route path="/">
{#if items.length > 0}
<PreferencesRendering key="{items[0].id}" properties="{properties}" />
{#if defaultPrefPageId !== undefined}
<PreferencesRendering key="{defaultPrefPageId}" properties="{properties}" />
{:else}
empty
{/if}