Finder window

src/components/apps/AppNexus.svelte

@@ -13,6 +13,10 @@
   {#await import('./VSCode/VSCode.svelte') then { default: VSCode }}
     <VSCode {isBeingDragged} />
   {/await}
+{:else if appID === 'finder'}
+  {#await import('./Finder/Finder.svelte') then { default: Finder }}
+    <Finder />
+  {/await}
 {:else if appID === 'calculator'}
   {#await import('./Calculator/Calculator.svelte') then { default: Calculator }}
     <Calculator />

src/components/apps/Finder/Finder.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { theme } from '🍎/stores/theme.store';
+
+
+</script>
+
+<section class="container">
+  <header class="titlebar app-window-drag-handle">
+    <span>
+      Finder
+    </span>
+  </header>
+
+  <aside class:light={$theme.scheme === 'light'}>
+    <nav>
+      <p>Favourites</p>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Recent.webp" alt="recent"> Recent </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/AirDrop.webp" alt="airdrop"> AirDrop </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Desktop.webp" alt="desktop"> Desktop </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Documents.webp" alt="documents"> Documents </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Pictures.webp" alt="pictures"> Pictures </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Downloads.webp" alt="downloads"> Downloads </a>
+
+      <hr />
+      <p>Locations</p>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Drive.webp" alt="drive"> Macintosh HD </a>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a><img src="/Finder-side-bar-icons/Folder.webp" alt="folder"> macOS Web </a>
+    </nav>
+  </aside>
+  <section class="content">
+  </section>
+</section>
+
+<style lang="scss">
+  .container {
+    --color: var(--system-color-light-hsl);
+
+    display: grid;
+    grid-template-columns: 12rem 1fr;
+    grid-template-rows: 3rem 1fr;
+
+    border-radius: inherit;
+
+    background-image: linear-gradient(
+      to right,
+      hsla(var(--color), 0.7) 12rem,
+      hsla(var(--color), 1) 12rem 100%
+    );
+
+    transition: --color 200ms ease-in;
+
+    color: var(--system-color-dark);
+  }
+
+  .titlebar {
+    grid-area: 1 / 1 / span 1 / span 2;
+
+    display: flex;
+    justify-content: center;
+
+    z-index: 1;
+
+    padding: 0.9rem 1rem;
+
+    width: 100%;
+
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+    user-select: none;
+
+    span {
+      color: gray;
+      font-weight: 550;
+      font-size: 1.5rem;
+      letter-spacing: 0.3px;
+    }
+  }
+
+  aside {
+    grid-area: 1 / 1 / span 2 / span 1;
+
+    transform: translateZ(0);
+
+    height: calc(100% - 2.7px);
+    width: calc(12rem - 2.27px);
+
+    margin: 1.8px 0 0px 1.8px;
+
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: inherit;
+
+    &::before {
+      content: '';
+
+      width: inherit;
+      height: inherit;
+
+      border-radius: inherit;
+
+      position: fixed;
+      left: 0;
+      top: 0;
+
+      z-index: -1;
+      backdrop-filter: blur(12px);
+    }
+
+    &.light {
+      height: calc(100% - 3px);
+      width: calc(12rem - 2.5px);
+
+      margin: 1.7px 0 0px 1.7px;
+
+      border-top-left-radius: 0.5rem;
+      border-bottom-left-radius: 0.5rem;
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+
+      margin: 3rem 0.6rem;
+
+      hr {
+        display: block;
+
+        width: 100%;
+        height: 1px;
+
+        background-color: hsla(var(--system-color-dark-hsl), 0.2);
+
+        border: none;
+      }
+
+      a {
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+
+        color: hsla(var(--system-color-dark-hsl), 0.9);
+        text-decoration: none;
+        font-weight: 400;
+
+        padding: 0.5rem 0.5rem;
+
+        border-radius: 0.4rem;
+
+        transition: background-color 100ms ease;
+
+        &:hover {
+          background-color: hsla(var(--system-color-dark-hsl), 0.2);
+        }
+      }
+    }
+  }
+
+  .content {
+    border-top: solid 0.9px hsla(var(--system-color-dark-hsl), 0.3);
+    grid-area: 2 / 2 / span 1 / span 1;
+
+    display: flex;
+    flex-direction: row;
+    align-items: left;
+
+    padding: 1rem;
+  }
+
+  p {
+    color: gray;
+  }
+
+</style>

src/configs/apps/apps-config.ts

@@ -38,17 +38,7 @@ const finder = createAppConfig({
   resizable: true,
 
   // dockBreaksBefore: true,
-  shouldOpenWindow: false,
-});
-
-const safari = createAppConfig({
-  title: 'Safari',
-  resizable: true,
-});
-
-const systemPreferences = createAppConfig({
-  title: 'System Preferences',
-  resizable: true,
+  shouldOpenWindow: true,
 });
 
 const purusTwitter = createAppConfig({

src/stores/apps.store.ts

@@ -6,7 +6,7 @@ export type AppID = keyof typeof appsConfig;
 /** Which apps are currently open */
 export const openApps = writable<Record<AppID, boolean>>({
   wallpapers: false,
-  finder: true,
+  finder: false,
   vscode: false,
   calculator: false,
   // safari: false,