From 946524d6e98c30d3780f27d53808e61c8ceedbfe Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:00:50 +0200
Subject: [PATCH 1/3] feat: Changed project to be stored in a global static
 class

Added methods from useProject to global CurrentProject. fixed some styling with the library. Added menu bar

useProject has had all of its methods removed. the only thing its keeping is isLoaded
---
 .vscode/extensions.json                       |   4 +-
 .../src/components/Editor/Library/Library.vue |  36 +++---
 .../components/Editor/Library/LibraryItem.vue |  28 ++--
 .../src/components/InplaceRename.vue          |   2 +-
 .../Menu/ProjectList/ProjectList.vue          |  10 +-
 .../safelight/src/stores/currentProject.ts    | 100 +++++++++++++++
 packages/safelight/src/stores/useProject.ts   | 105 +--------------
 .../safelight/src/views/Editor/Editor.vue     | 121 ++++++++++++------
 packages/shared/src/Project/SimpleProject.ts  |   1 -
 .../shared/src/Storage/IndexedDbStorage.ts    |   4 +-
 packages/shared/src/base/Project.ts           |   4 +-
 .../shared/src/helpers/Video/GetVideoInfo.ts  |   5 +-
 12 files changed, 231 insertions(+), 189 deletions(-)
 create mode 100644 packages/safelight/src/stores/currentProject.ts

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 3afc69ef..fa9e40a7 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,8 @@
         "esbenp.prettier-vscode",
         "bradlc.vscode-tailwindcss",
         "vivaxy.vscode-conventional-commits",
-        "vue.volar"
+        "vue.volar",
+        "github.vscode-pull-request-github",
+        "github.vscode-github-actions"
     ]
 }
diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 20baf034..e3f992c9 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -73,7 +73,9 @@
                 class="grid h-full select-none place-items-center opacity-60"
                 @dblclick="fileDialogOpenDblClick"
             >
-                <label v-if="media.length == 0"> No media imported </label>
+                <label v-if="CurrentProject.project.value?.media.length == 0">
+                    No media imported
+                </label>
                 <label v-else>No media found</label>
             </div>
         </template>
@@ -90,7 +92,7 @@ import InputGroupAddon from 'primevue/inputgroupaddon';
 
 useDropZone(document.body, {
     onDrop(files) {
-        files?.forEach(project.loadFile);
+        files?.forEach(CurrentProject.loadFile);
     },
     dataTypes(types) {
         return !types.some((val) => {
@@ -109,29 +111,32 @@ fileDialog.onChange((fileList) => {
         const item = fileList.item(i);
 
         if (item) {
-            project.loadFile(item);
+            CurrentProject.loadFile(item);
         }
     }
 });
 
-const project = useProject();
-const media = project.project!.media;
-
 const search = ref('');
 const sortBy = ref<sortOptions>('Name');
 const sortDescending = ref(false);
 
 const sortedAndFiltered = shallowRef<Media[]>([]);
 
-watchDebounced([media, search, sortBy, sortDescending], sortAndFilter, {
-    deep: true,
-    debounce: 100,
-    maxWait: 1000,
-    immediate: true
-});
+watchDebounced(
+    [CurrentProject.project.value?.media, search, sortBy, sortDescending],
+    sortAndFilter,
+    {
+        deep: true,
+        debounce: 100,
+        maxWait: 1000,
+        immediate: true
+    }
+);
 
 function sortAndFilter() {
-    const filtered = media.filter((elem) => {
+    if (!CurrentProject.project.value) return;
+
+    const filtered = CurrentProject.project.value.media.filter((elem) => {
         if (search.value.length == 0) {
             return true;
         }
@@ -173,11 +178,6 @@ type sortOptions = 'Name' | 'Duration' | 'File type' | 'Media type';
 </script>
 
 <style lang="scss" scoped>
-.bg-checkerboard {
-    /* This is beautifully simple
-       https://stackoverflow.com/a/65129916 */
-    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-}
 
 :deep(.p-dataview-header) {
     @apply p-1;
diff --git a/packages/safelight/src/components/Editor/Library/LibraryItem.vue b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
index da38049f..60bbb85d 100644
--- a/packages/safelight/src/components/Editor/Library/LibraryItem.vue
+++ b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
@@ -1,8 +1,10 @@
 <template>
-    <div class="bg-checkerboard flex aspect-video w-full items-center justify-center">
+    <div
+        class="bg-checkerboard flex aspect-video w-full items-center justify-center overflow-clip rounded-t-md"
+    >
         <img
             v-if="$props.item.previewImage.value"
-            class="max-h-full max-w-full rounded-t-md"
+            class="overflow-none max-h-full max-w-full"
             :aria-label="'Preview image for ' + $props.item.name.value"
             :src="$props.item.previewImage.value"
         />
@@ -64,8 +66,6 @@ const props = defineProps<{
     item: Media;
 }>();
 
-const project = useProject();
-
 const menuItems = ref<MenuItem[]>([
     {
         label: 'Temp'
@@ -74,9 +74,9 @@ const menuItems = ref<MenuItem[]>([
 
 const hasItemInTimeline = computed(
     () =>
-        project.project &&
-        project.project.isSimpleProject() &&
-        project.project.usesMedia(props.item)
+        CurrentProject.project.value &&
+        CurrentProject.project.value.isSimpleProject() &&
+        CurrentProject.project.value.usesMedia(props.item)
 );
 
 const alertt = (text: string) => window.alert(text);
@@ -92,11 +92,17 @@ const overlay = ref<OverlayPanel>();
         border: none;
     }
     > .p-toolbar {
-        @apply border-surface-100/10 rounded-b-none p-1;
+        // @apply border-surface-100/10 rounded-b-none p-1;
 
-        border-top-width: 0;
-        border-left-width: 0;
-        border-right-width: 0;
+        // border-top-width: 0;
+        // border-left-width: 0;
+        // border-right-width: 0;
     }
 }
+
+.bg-checkerboard {
+    /* This is beautifully simple
+       https://stackoverflow.com/a/65129916 */
+    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
+}
 </style>
diff --git a/packages/safelight/src/components/InplaceRename.vue b/packages/safelight/src/components/InplaceRename.vue
index 5becf148..da8edb4b 100644
--- a/packages/safelight/src/components/InplaceRename.vue
+++ b/packages/safelight/src/components/InplaceRename.vue
@@ -1,6 +1,6 @@
 <template>
     <slot v-if="!isOpen" name="default">
-        <label @dblclick="open()">{{ value }}</label>
+        <label class="cursor-pointer select-none" @dblclick="open()">{{ value }}</label>
     </slot>
     <slot v-else name="content" :cur-value="curValue" :close="close">
         <div v-focustrap>
diff --git a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
index 5b82050b..144ca3b2 100644
--- a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
+++ b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
@@ -12,7 +12,7 @@
                     label="New project"
                     rounded
                     :model="projectTypes"
-                    @click="project.new.newSimpleProject()"
+                    @click="CurrentProject.newSimpleProject()"
                 />
             </div>
         </template>
@@ -29,7 +29,7 @@
         </Column>
         <Column>
             <template #body="slotProps">
-                <Button @click="project.openProject(slotProps.data)">Open</Button>
+                <Button @click="CurrentProject.openProject(slotProps.data)">Open</Button>
             </template>
         </Column>
     </DataTable>
@@ -41,12 +41,10 @@ import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
 import { DateTime } from 'luxon';
 import type { MenuItem } from 'primevue/menuitem';
 
-const project = useProject();
-
 const projectTypes: MenuItem[] = [
     {
         label: 'Simple',
-        command: project.new.newSimpleProject
+        command: () => CurrentProject.newSimpleProject()
     },
     { label: 'Test', command() {} }
 ] as const;
@@ -81,7 +79,7 @@ function formatDateTime(dt: string) {
 }
 
 async function setProjectName(newName: string, project: StoredProject) {
-    const storage = await getStorageControllerForProject(project);
+    const storage = await CurrentProject.getStorageControllerForProject(project);
     await storage?.UpdateStoredProject({ id: project.id, name: newName });
     loadList();
 }
diff --git a/packages/safelight/src/stores/currentProject.ts b/packages/safelight/src/stores/currentProject.ts
new file mode 100644
index 00000000..86c10311
--- /dev/null
+++ b/packages/safelight/src/stores/currentProject.ts
@@ -0,0 +1,100 @@
+import { router } from '@/main';
+import type BaseProject from '@safelight/shared/base/Project';
+import BaseStorageController, { Storage, type StoredProject } from '@safelight/shared/base/Storage';
+import MediaManager from '@safelight/shared/Storage/MediaManager';
+
+// ---
+//
+// A global `shallowRef` is used to keep state for reasons outlined in #14
+//
+// ---
+
+export class CurrentProject {
+    public static project = shallowRef<BaseProject>();
+
+    public static async openProject(selectedProject: StoredProject, goToEditor = true) {
+        const storageType = await this.getStorageControllerForProject(selectedProject);
+        if (!storageType) {
+            throw new Error('Could not find storage controller for project type');
+        }
+
+        Storage.setStorage(storageType);
+
+        const project = await Storage.getStorage().LoadProject(selectedProject.id);
+
+        if (project) {
+            this.setProject(project);
+            if (goToEditor) await this.toEditor();
+        } else {
+            console.error('Could not load project');
+        }
+    }
+
+    public static async toEditor() {
+        await router.push('/editor');
+    }
+
+    public static async newSimpleProject(goToEditor = true) {
+        const IndexedDbStorageController = (
+            await import('@safelight/shared/Storage/IndexedDbStorage')
+        ).default;
+        Storage.setStorage(new IndexedDbStorageController());
+        const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
+        this.setProject(new SimpleProject());
+
+        if (goToEditor) await this.toEditor();
+    }
+
+    public static async getStorageControllerForProject(
+        project: StoredProject
+    ): Promise<BaseStorageController | undefined> {
+        if (project.type == 'Simple') {
+            return new (await import('@safelight/shared/Storage/IndexedDbStorage')).default();
+        } else {
+            console.error('Project type not supported');
+        }
+    }
+
+    public static setProject(newProject: BaseProject) {
+        this.project.value = newProject;
+        const projectStore = useProject();
+        projectStore.isLoaded = true;
+
+        useSessionStorage<string>('project', '').value = newProject.id;
+    }
+
+    // Might want to move this to BaseProject or SimpleProject
+    public static loadFile(file: File) {
+        return new Promise<void>((resolve) => {
+            const storingProcessing = useObservable(MediaManager.StoreMedia(file));
+            watch(storingProcessing, (s) => {
+                console.log(s?.type, s?.hashProgress);
+            });
+
+            watch(storingProcessing, async () => {
+                if (storingProcessing.value && storingProcessing.value.type == 'done') {
+                    const existingMedia = this.project.value!.media.some(
+                        (m) => m.id == storingProcessing.value!.id
+                    );
+
+                    if (!existingMedia) {
+                        const media = await Storage.getStorage().LoadMedia(
+                            storingProcessing.value.id!
+                        );
+
+                        if (media) {
+                            this.project.value!.media.push(media);
+                            this.save();
+                        }
+                    }
+
+                    resolve();
+                }
+            });
+        });
+    }
+
+    public static async save() {
+        if (this.project.value) await Storage.getStorage().SaveProject(this.project.value);
+    }
+}
diff --git a/packages/safelight/src/stores/useProject.ts b/packages/safelight/src/stores/useProject.ts
index 8f6fa84f..f8b9a03d 100644
--- a/packages/safelight/src/stores/useProject.ts
+++ b/packages/safelight/src/stores/useProject.ts
@@ -1,113 +1,10 @@
-import { router } from '@/main';
-import type BaseProject from '@safelight/shared/base/Project';
-import BaseStorageController, { Storage, type StoredProject } from '@safelight/shared/base/Storage';
-import MediaManager from '@safelight/shared/Storage/MediaManager';
-
 export const useProject = defineStore('Project', () => {
     const cursor = ref(0);
-    const timelineViewStart = ref(0);
-    const timelineViewEnd = ref(0);
 
-    const project = shallowRef<BaseProject>();
     const isLoaded = ref(false);
 
-    function setProject(newProject: BaseProject) {
-        project.value = newProject;
-        isLoaded.value = true;
-
-        useSessionStorage<string>('project', '').value = newProject.id;
-    }
-
-    function loadFile(file: File) {
-        return new Promise<void>((resolve) => {
-            const storingProcessing = useObservable(MediaManager.StoreMedia(file));
-            watch(storingProcessing, (s) => {
-                console.log(s?.type, s?.hashProgress);
-            });
-
-            watch(storingProcessing, async () => {
-                if (storingProcessing.value && storingProcessing.value.type == 'done') {
-                    const existingMedia = project.value!.media.some(
-                        (m) => m.id == storingProcessing.value!.id
-                    );
-
-                    if (!existingMedia) {
-                        const media = await Storage.getStorage().LoadMedia(
-                            storingProcessing.value.id!
-                        );
-
-                        if (media) {
-                            project.value!.media.push(media);
-                            save();
-                        }
-                    }
-
-                    resolve();
-                }
-            });
-        });
-    }
-
-    function save() {
-        if (project.value) Storage.getStorage().SaveProject(project.value);
-    }
-
     return {
-        project,
-        setProject,
-        loadFile,
         isLoaded,
-        cursor,
-        timelineViewStart,
-        timelineViewEnd,
-        save,
-        openProject,
-        new: {
-            newSimpleProject
-        }
+        cursor
     };
 });
-
-async function newSimpleProject() {
-    const IndexedDbStorageController = (await import('@safelight/shared/Storage/IndexedDbStorage'))
-        .default;
-    Storage.setStorage(new IndexedDbStorageController());
-    const projectStore = useProject();
-    const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
-    projectStore.setProject(new SimpleProject());
-
-    await toEditor();
-}
-
-export async function getStorageControllerForProject(
-    project: StoredProject
-): Promise<BaseStorageController | undefined> {
-    if (project.type == 'Simple') {
-        return new (await import('@safelight/shared/Storage/IndexedDbStorage')).default();
-    } else {
-        console.error('Project type not supported');
-    }
-}
-
-async function openProject(selectedProject: StoredProject) {
-    const storageType = await getStorageControllerForProject(selectedProject);
-    if (!storageType) {
-        throw new Error('Could not find storage controller for project type');
-    }
-
-    const projectStore = useProject();
-    Storage.setStorage(storageType);
-
-    const project = await Storage.getStorage().LoadProject(selectedProject.id);
-
-    if (project) {
-        projectStore.setProject(project);
-        await toEditor();
-    } else {
-        console.error('Could not load project');
-    }
-}
-
-async function toEditor() {
-    await router.push('/editor');
-}
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 7a9e4c23..11243ec5 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -1,64 +1,105 @@
 <template>
-    <Suspense v-if="project.isLoaded">
-        <template #default>
-            <Splitter layout="vertical" class="vertSlitter" @resize="clearSelection()">
-                <SplitterPanel>
-                    <Splitter @resize="clearSelection()">
-                        <SplitterPanel>
-                            <TabView class="flex h-full flex-col">
-                                <TabPanel>
-                                    <template #header>
-                                        <div class="flex items-center gap-2">
-                                            <PhFolders size="20" />
-                                            <span class="white-space-nowrap font-bold">
-                                                Library
-                                            </span>
-                                        </div>
-                                    </template>
-                                    <Library />
-                                </TabPanel>
-                            </TabView>
-                        </SplitterPanel>
-                        <SplitterPanel>
-                            <Monitor
-                                v-if="project.project?.timeline"
-                                :timeline="project.project?.timeline"
-                                class="min-h-100 w-full"
-                            />
-                        </SplitterPanel>
-                    </Splitter>
-                </SplitterPanel>
-                <SplitterPanel :size="40">
-                    <Timeline class="h-full w-full" />
-                </SplitterPanel>
-            </Splitter>
-        </template>
-    </Suspense>
+    <div v-if="project.isLoaded" class="flex h-full w-full flex-col">
+        <Toolbar
+            :pt="{
+                root: {
+                    class: 'p-0'
+                }
+            }"
+        >
+            <template #start>
+                <Menubar :pt="{ root: { class: 'border-none' } }" :model="menuItems">
+                    <template #itemicon="{ item: { icon } }">
+                        <component :is="icon" v-if="icon" size="18" class="pr-1" />
+                    </template>
+                </Menubar>
+            </template>
+            <template #center>
+                <InplaceRename
+                    v-if="CurrentProject.project.value"
+                    :value="CurrentProject.project.value?.name.value"
+                    @change="
+                        (newName) => {
+                            CurrentProject.project.value!.name.value = newName;
+                            CurrentProject.save();
+                        }
+                    "
+                />
+            </template>
+        </Toolbar>
+        <Splitter layout="vertical" class="vertSlitter" @resize="clearSelection()">
+            <SplitterPanel>
+                <Splitter @resize="clearSelection()">
+                    <SplitterPanel>
+                        <TabView class="flex h-full flex-col">
+                            <TabPanel>
+                                <template #header>
+                                    <div class="flex items-center gap-2">
+                                        <PhFolders size="20" />
+                                        <span class="white-space-nowrap font-bold"> Library </span>
+                                    </div>
+                                </template>
+                                <Library />
+                            </TabPanel>
+                        </TabView>
+                    </SplitterPanel>
+                    <SplitterPanel>
+                        <Monitor
+                            v-if="CurrentProject.project.value?.timeline"
+                            :timeline="CurrentProject.project.value?.timeline"
+                            class="min-h-100 w-full"
+                        />
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+            <SplitterPanel :size="40">
+                <Timeline class="h-full w-full" />
+            </SplitterPanel>
+        </Splitter>
+    </div>
     <ConfirmDialog group="noProjectDialog"> </ConfirmDialog>
 </template>
 
 <script setup lang="ts">
 import { router } from '@/main';
+import { PhFile } from '@phosphor-icons/vue';
 import { Storage } from '@safelight/shared/base/Storage';
 import ConfirmDialog from 'primevue/confirmdialog';
+import type { MenuItem } from 'primevue/menuitem';
 import SplitterPanel from 'primevue/splitterpanel';
+import Toolbar from 'primevue/toolbar';
 import { useConfirm } from 'primevue/useconfirm';
 
 const project = useProject();
 
 const projectErrorDialog = useConfirm();
 
+const menuItems: MenuItem[] = [
+    {
+        label: 'File',
+        icon: PhFile as any,
+        items: [
+            {
+                label: 'Exit',
+                disabled: false,
+                command: async () => {
+                    await CurrentProject.save();
+                    router.push('/projects');
+                }
+            }
+        ]
+    }
+];
+
 onMounted(async () => {
-    console.log('A');
     await router.isReady();
-    console.log('B');
     if (!project.isLoaded) {
         const lastId = useSessionStorage('project', undefined).value;
         if (lastId) {
             Storage.getProjects().then((projects) => {
                 const projectFromId = projects.find((p) => p.id == lastId);
                 if (projectFromId) {
-                    project.openProject(projectFromId);
+                    CurrentProject.openProject(projectFromId, false /* Already here */);
                 } else {
                     showNoProjectDialog();
                 }
@@ -89,7 +130,7 @@ function clearSelection() {
 
 onBeforeUnmount(() => {
     if (project.isLoaded) {
-        project.save();
+        CurrentProject.save();
         project.$dispose();
     }
 });
@@ -97,7 +138,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .vertSlitter {
-    height: 100vh;
+    height: 100%;
 }
 
 :deep(.p-tabview-panels) {
diff --git a/packages/shared/src/Project/SimpleProject.ts b/packages/shared/src/Project/SimpleProject.ts
index 18a7f6f2..7eeeb55c 100644
--- a/packages/shared/src/Project/SimpleProject.ts
+++ b/packages/shared/src/Project/SimpleProject.ts
@@ -6,7 +6,6 @@ import SimpleTimeline, { type SimpleTimelineConfig } from '../Timeline/SimpleTim
 
 export default class SimpleProject extends BaseProject {
     public id = uuidv4();
-    public name = 'Untitled';
     public type: ProjectType = 'Simple';
 
     public media = shallowReactive<Media[]>([]);
diff --git a/packages/shared/src/Storage/IndexedDbStorage.ts b/packages/shared/src/Storage/IndexedDbStorage.ts
index 2658424b..2e03d8aa 100644
--- a/packages/shared/src/Storage/IndexedDbStorage.ts
+++ b/packages/shared/src/Storage/IndexedDbStorage.ts
@@ -27,7 +27,7 @@ export default class IndexedDbStorageController extends BaseStorageController {
                 ? project
                 : {
                       id: project.id,
-                      name: project.name,
+                      name: project.name.value,
                       type: project.type,
                       media: project.media.map((m) => m.id).filter((id) => id !== undefined),
                       timelines: project.timelines.map((m) => m.id),
@@ -74,7 +74,7 @@ export default class IndexedDbStorageController extends BaseStorageController {
 
                     // Load all timelines and media
                     await Promise.allSettled([...timelineFetches, ...mediaFetches]);
-                    proj.name = project.name;
+                    proj.name.value = project.name;
                     return proj;
                 } else {
                     return;
diff --git a/packages/shared/src/base/Project.ts b/packages/shared/src/base/Project.ts
index 2b953103..f94f5e78 100644
--- a/packages/shared/src/base/Project.ts
+++ b/packages/shared/src/base/Project.ts
@@ -1,11 +1,11 @@
-import type { ComputedRef, Ref, ShallowReactive } from 'vue';
+import { ref, type ComputedRef, type Ref, type ShallowReactive } from 'vue';
 import type Media from '../Media/Media';
 import type SimpleProject from '../Project/SimpleProject';
 import type BaseTimeline from './Timeline';
 
 export default abstract class BaseProject {
     public abstract id: string;
-    public abstract name: string;
+    public name = ref('Untitled');
     public type: ProjectType = 'Base';
 
     public abstract media: ShallowReactive<Media[]>;
diff --git a/packages/shared/src/helpers/Video/GetVideoInfo.ts b/packages/shared/src/helpers/Video/GetVideoInfo.ts
index f0ffd6c6..719e95ae 100644
--- a/packages/shared/src/helpers/Video/GetVideoInfo.ts
+++ b/packages/shared/src/helpers/Video/GetVideoInfo.ts
@@ -21,14 +21,13 @@ export async function getVideoInfo(file: File) {
             });
 
         MediaInfoFactory({
-            locateFile(url, scriptDirectory) {
-                console.log(url, scriptDirectory);
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            locateFile(_url, _scriptDirectory) {
                 return MediaInfoWasmUrl;
             }
         }).then(async (mediaInfo) => {
             const data = await mediaInfo.analyzeData(() => file.size, readChunk);
 
-            console.log(data);
             resolve(data);
         });
     });

From 003b89c8fbdfd04ab3979536c209480fde7f2081 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 21 Apr 2024 09:53:57 +0200
Subject: [PATCH 2/3] fix: Set default size for Phosphor icons

---
 .../src/components/Editor/Library/Library.vue | 30 ++++++-------
 .../components/Editor/Library/LibraryItem.vue | 43 +++++++++++--------
 .../Menu/ProjectList/ProjectList.vue          |  2 +-
 packages/safelight/src/main.ts                |  3 ++
 .../safelight/src/views/Editor/Editor.vue     |  4 +-
 packages/safelight/src/views/dev/Packages.vue |  2 +-
 6 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index e3f992c9..c38965da 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -5,13 +5,24 @@
         scroll-height="400px"
         class="flex h-full flex-col"
         data-key="id"
+        :pt="{
+            header: {
+                class: 'p-1'
+            },
+            content: {
+                style: 'flex: 1;'
+            },
+            emptyMessage: {
+                style: 'height: 100%;'
+            }
+        }"
     >
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
-                            <PhMagnifyingGlass size="14" />
+                            <PhMagnifyingGlass />
                         </InputGroupAddon>
                         <InputText v-model="search" placeholder="Search"> </InputText>
                     </InputGroup>
@@ -25,8 +36,8 @@
                             @click="sortDescending = !sortDescending"
                         >
                             <template #icon>
-                                <PhSortAscending v-if="!sortDescending" size="14" />
-                                <PhSortDescending v-else size="14" />
+                                <PhSortAscending v-if="!sortDescending" />
+                                <PhSortDescending v-else />
                             </template>
                         </Button>
                         <Dropdown
@@ -176,16 +187,3 @@ function fileDialogOpenDblClick(event: MouseEvent) {
 
 type sortOptions = 'Name' | 'Duration' | 'File type' | 'Media type';
 </script>
-
-<style lang="scss" scoped>
-
-:deep(.p-dataview-header) {
-    @apply p-1;
-}
-:deep(.p-dataview-content) {
-    @apply flex-1;
-}
-:deep(.p-dataview-emptymessage) {
-    @apply h-full;
-}
-</style>
diff --git a/packages/safelight/src/components/Editor/Library/LibraryItem.vue b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
index 60bbb85d..26767d8e 100644
--- a/packages/safelight/src/components/Editor/Library/LibraryItem.vue
+++ b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
@@ -36,8 +36,23 @@
             </template>
         </Button>
     </div>
-    <OverlayPanel id="library_item_menu" ref="overlay">
-        <Toolbar>
+    <OverlayPanel
+        id="library_item_menu"
+        ref="overlay"
+        :pt="{
+            content: {
+                style: 'padding: 0'
+            }
+        }"
+    >
+        <Toolbar
+            :pt="{
+                root: {
+                    class: 'p-1 rounded-b-none',
+                    style: 'border-width: 0 0 1px 0'
+                }
+            }"
+        >
             <template #center>
                 <Button
                     v-tooltip.bottom="{ value: 'Delete', showDelay: 500 }"
@@ -52,7 +67,14 @@
                 </Button>
             </template>
         </Toolbar>
-        <Menu :model="menuItems" />
+        <Menu
+            :model="menuItems"
+            :pt="{
+                root: {
+                    style: 'border: none;'
+                }
+            }"
+        />
     </OverlayPanel>
 </template>
 <script setup lang="ts">
@@ -85,21 +107,6 @@ const overlay = ref<OverlayPanel>();
 </script>
 
 <style lang="scss">
-#library_item_menu .p-overlaypanel-content {
-    padding: 0 !important;
-
-    > .p-menu {
-        border: none;
-    }
-    > .p-toolbar {
-        // @apply border-surface-100/10 rounded-b-none p-1;
-
-        // border-top-width: 0;
-        // border-left-width: 0;
-        // border-right-width: 0;
-    }
-}
-
 .bg-checkerboard {
     /* This is beautifully simple
        https://stackoverflow.com/a/65129916 */
diff --git a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
index 144ca3b2..e021591b 100644
--- a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
+++ b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
@@ -5,7 +5,7 @@
                 <h2 class="m-0 flex-1">Projects</h2>
                 <Button rounded title="Refresh list" @click="loadList()">
                     <template #icon>
-                        <PhArrowsClockwise size="18" />
+                        <PhArrowsClockwise />
                     </template>
                 </Button>
                 <SplitButton
diff --git a/packages/safelight/src/main.ts b/packages/safelight/src/main.ts
index 26e7748f..551cb9d7 100644
--- a/packages/safelight/src/main.ts
+++ b/packages/safelight/src/main.ts
@@ -28,6 +28,9 @@ app.use(PrimeVue, {
 } as PrimeVueConfiguration);
 app.use(ConfirmationService);
 
+// Phosphor icons
+app.provide('size', 18);
+
 // Directives
 app.directive('tooltip', Tooltip);
 app.directive('focustrap', FocusTrap);
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 11243ec5..7dcbfd1a 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -10,7 +10,7 @@
             <template #start>
                 <Menubar :pt="{ root: { class: 'border-none' } }" :model="menuItems">
                     <template #itemicon="{ item: { icon } }">
-                        <component :is="icon" v-if="icon" size="18" class="pr-1" />
+                        <component :is="icon" v-if="icon" class="pr-1" />
                     </template>
                 </Menubar>
             </template>
@@ -35,7 +35,7 @@
                             <TabPanel>
                                 <template #header>
                                     <div class="flex items-center gap-2">
-                                        <PhFolders size="20" />
+                                        <PhFolders />
                                         <span class="white-space-nowrap font-bold"> Library </span>
                                     </div>
                                 </template>
diff --git a/packages/safelight/src/views/dev/Packages.vue b/packages/safelight/src/views/dev/Packages.vue
index e1a1f17d..8469db6c 100644
--- a/packages/safelight/src/views/dev/Packages.vue
+++ b/packages/safelight/src/views/dev/Packages.vue
@@ -49,7 +49,7 @@
                                         style="text-decoration: none; text-decoration-line: none"
                                     >
                                         {{ item.from }}
-                                        <PhArrowSquareOut size="16" class="align-text-top" />
+                                        <PhArrowSquareOut class="align-text-top" />
                                     </a>
                                     <span
                                         v-if="item.author || item.license"

From ec491f8c1f2d287197798d98fdacb4b170214ddd Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 21 Apr 2024 11:02:03 +0200
Subject: [PATCH 3/3] feat: Added better session storage handling

Moved isLoaded from store to CurrentProject. Changed some deep css to passthough. Added beforeExit function

isLoaded is no longer in useProject
---
 .../src/components/Editor/Library/Library.vue |  3 +-
 .../safelight/src/stores/currentProject.ts    | 68 +++++++++++++++----
 packages/safelight/src/stores/useProject.ts   |  3 -
 .../safelight/src/views/Editor/Editor.vue     | 59 ++++++++--------
 packages/safelight/src/views/dev/Packages.vue |  2 +-
 5 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index c38965da..1d4390d3 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -51,7 +51,7 @@
                 <template #end>
                     <Button title="Load file" rounded @click="fileDialog.open()">
                         <template #icon>
-                            <PhUpload />
+                            <PhPlus />
                         </template>
                     </Button>
                 </template>
@@ -94,7 +94,6 @@
 </template>
 
 <script setup lang="ts">
-import { PhMagnifyingGlass, PhSortDescending, PhUpload } from '@phosphor-icons/vue';
 import Media from '@safelight/shared/Media/Media';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
diff --git a/packages/safelight/src/stores/currentProject.ts b/packages/safelight/src/stores/currentProject.ts
index 86c10311..0858246e 100644
--- a/packages/safelight/src/stores/currentProject.ts
+++ b/packages/safelight/src/stores/currentProject.ts
@@ -1,19 +1,22 @@
+/* eslint-disable no-dupe-class-members */
 import { router } from '@/main';
 import type BaseProject from '@safelight/shared/base/Project';
+import type { ProjectType } from '@safelight/shared/base/Project';
 import BaseStorageController, { Storage, type StoredProject } from '@safelight/shared/base/Storage';
 import MediaManager from '@safelight/shared/Storage/MediaManager';
-
-// ---
-//
-// A global `shallowRef` is used to keep state for reasons outlined in #14
-//
-// ---
+import { DateTime } from 'luxon';
 
 export class CurrentProject {
+    // see #14 for why
     public static project = shallowRef<BaseProject>();
-
-    public static async openProject(selectedProject: StoredProject, goToEditor = true) {
-        const storageType = await this.getStorageControllerForProject(selectedProject);
+    public static isLoaded = ref(false);
+
+    public static async openProject(
+        selectedProject: StoredProject | SessionProject,
+        goToEditor = true
+    ) {
+        this.isLoaded.value = false;
+        const storageType = await this.getStorageControllerForProject(selectedProject.type);
         if (!storageType) {
             throw new Error('Could not find storage controller for project type');
         }
@@ -24,7 +27,9 @@ export class CurrentProject {
 
         if (project) {
             this.setProject(project);
+            this.setSessionProject(selectedProject);
             if (goToEditor) await this.toEditor();
+            this.isLoaded.value = true;
         } else {
             console.error('Could not load project');
         }
@@ -45,10 +50,15 @@ export class CurrentProject {
         if (goToEditor) await this.toEditor();
     }
 
-    public static async getStorageControllerForProject(
+    public static getStorageControllerForProject(
+        project: ProjectType
+    ): Promise<BaseStorageController | undefined>;
+    public static getStorageControllerForProject(
         project: StoredProject
-    ): Promise<BaseStorageController | undefined> {
-        if (project.type == 'Simple') {
+    ): Promise<BaseStorageController | undefined>;
+    public static async getStorageControllerForProject(project: StoredProject | ProjectType) {
+        const type = typeof project === 'string' ? project : project.type;
+        if (type == 'Simple') {
             return new (await import('@safelight/shared/Storage/IndexedDbStorage')).default();
         } else {
             console.error('Project type not supported');
@@ -57,10 +67,24 @@ export class CurrentProject {
 
     public static setProject(newProject: BaseProject) {
         this.project.value = newProject;
-        const projectStore = useProject();
-        projectStore.isLoaded = true;
+        this.isLoaded.value = true;
+    }
 
-        useSessionStorage<string>('project', '').value = newProject.id;
+    public static setSessionProject(project: StoredProject | BaseProject | SessionProject) {
+        const sessionProject: SessionProject = {
+            id: project.id,
+            lastOpened: DateTime.now().toISO(),
+            type: project.type
+        };
+        sessionStorage.setItem('project', JSON.stringify(sessionProject));
+    }
+    public static getSessionProject() {
+        const item = window.sessionStorage.getItem('project');
+        if (!item) return;
+        return JSON.parse(item) as SessionProject;
+    }
+    public static clearSessionProject() {
+        sessionStorage.removeItem('project');
     }
 
     // Might want to move this to BaseProject or SimpleProject
@@ -97,4 +121,18 @@ export class CurrentProject {
     public static async save() {
         if (this.project.value) await Storage.getStorage().SaveProject(this.project.value);
     }
+
+    public static async beforeExit(clearSession = true) {
+        if (this.project.value) {
+            if (clearSession) this.clearSessionProject();
+            await this.save();
+            this.project.value = undefined;
+        }
+    }
+}
+
+export interface SessionProject {
+    id: string;
+    type: ProjectType;
+    lastOpened: string;
 }
diff --git a/packages/safelight/src/stores/useProject.ts b/packages/safelight/src/stores/useProject.ts
index f8b9a03d..42068512 100644
--- a/packages/safelight/src/stores/useProject.ts
+++ b/packages/safelight/src/stores/useProject.ts
@@ -1,10 +1,7 @@
 export const useProject = defineStore('Project', () => {
     const cursor = ref(0);
 
-    const isLoaded = ref(false);
-
     return {
-        isLoaded,
         cursor
     };
 });
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 7dcbfd1a..0a09ecdc 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="project.isLoaded" class="flex h-full w-full flex-col">
+    <div v-if="CurrentProject.isLoaded.value" class="flex h-full w-full flex-col">
         <Toolbar
             :pt="{
                 root: {
@@ -31,8 +31,19 @@
             <SplitterPanel>
                 <Splitter @resize="clearSelection()">
                     <SplitterPanel>
-                        <TabView class="flex h-full flex-col">
-                            <TabPanel>
+                        <TabView
+                            class="flex h-full flex-col"
+                            :pt="{
+                                panelContainer: {
+                                    class: 'flex-1'
+                                }
+                            }"
+                        >
+                            <TabPanel
+                                :pt="{
+                                    root: { class: 'h-full' }
+                                }"
+                            >
                                 <template #header>
                                     <div class="flex items-center gap-2">
                                         <PhFolders />
@@ -63,11 +74,8 @@
 <script setup lang="ts">
 import { router } from '@/main';
 import { PhFile } from '@phosphor-icons/vue';
-import { Storage } from '@safelight/shared/base/Storage';
-import ConfirmDialog from 'primevue/confirmdialog';
 import type { MenuItem } from 'primevue/menuitem';
-import SplitterPanel from 'primevue/splitterpanel';
-import Toolbar from 'primevue/toolbar';
+import ConfirmDialog from 'primevue/confirmdialog';
 import { useConfirm } from 'primevue/useconfirm';
 
 const project = useProject();
@@ -83,7 +91,7 @@ const menuItems: MenuItem[] = [
                 label: 'Exit',
                 disabled: false,
                 command: async () => {
-                    await CurrentProject.save();
+                    await CurrentProject.beforeExit();
                     router.push('/projects');
                 }
             }
@@ -93,17 +101,15 @@ const menuItems: MenuItem[] = [
 
 onMounted(async () => {
     await router.isReady();
-    if (!project.isLoaded) {
-        const lastId = useSessionStorage('project', undefined).value;
-        if (lastId) {
-            Storage.getProjects().then((projects) => {
-                const projectFromId = projects.find((p) => p.id == lastId);
-                if (projectFromId) {
-                    CurrentProject.openProject(projectFromId, false /* Already here */);
-                } else {
-                    showNoProjectDialog();
-                }
-            });
+    if (!CurrentProject.isLoaded.value) {
+        const lastProject = CurrentProject.getSessionProject();
+        console.log(lastProject);
+        if (lastProject) {
+            if (lastProject) {
+                CurrentProject.openProject(lastProject, false /* Already here */);
+            } else {
+                showNoProjectDialog();
+            }
         } else {
             showNoProjectDialog();
         }
@@ -116,6 +122,8 @@ function showNoProjectDialog() {
         header: 'No project loaded',
         message: 'No project has been loaded, go to project list?',
         reject() {
+            // TODO: idk actually. What should happen when no projects are loaded and the user just says "No"
+            // Maybe use a regular Dialog, and add the "Yes" button to it
             router.push('/');
         },
         accept() {
@@ -128,9 +136,9 @@ function clearSelection() {
     document.getSelection()?.removeAllRanges();
 }
 
-onBeforeUnmount(() => {
-    if (project.isLoaded) {
-        CurrentProject.save();
+onBeforeUnmount(async () => {
+    if (CurrentProject.isLoaded.value) {
+        await CurrentProject.beforeExit(false);
         project.$dispose();
     }
 });
@@ -140,13 +148,6 @@ onBeforeUnmount(() => {
 .vertSlitter {
     height: 100%;
 }
-
-:deep(.p-tabview-panels) {
-    @apply flex-1;
-}
-:deep(.p-tabview-panel) {
-    @apply h-full;
-}
 </style>
 
 <route lang="json">
diff --git a/packages/safelight/src/views/dev/Packages.vue b/packages/safelight/src/views/dev/Packages.vue
index 8469db6c..d73826b4 100644
--- a/packages/safelight/src/views/dev/Packages.vue
+++ b/packages/safelight/src/views/dev/Packages.vue
@@ -95,7 +95,7 @@
                                                 :title="'Open code repository for ' + item.from"
                                                 role="link"
                                                 @click="
-                                                    openUrl(item.repository.replace('git+', ''))
+                                                    openUrl(item.repository!.replace('git+', ''))
                                                 "
                                             >
                                                 <template #icon>