Merge pull request #20 from Joery-M:14-sl-ui-project-state-management

14-sl-ui-project-state-management

.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"
     ]
 }

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
@@ -40,7 +51,7 @@
                 <template #end>
                     <Button title="Load file" rounded @click="fileDialog.open()">
                         <template #icon>
-                            <PhUpload />
+                            <PhPlus />
                         </template>
                     </Button>
                 </template>
@@ -73,15 +84,16 @@
                 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>
     </DataView>
 </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';
@@ -90,7 +102,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 +121,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;
         }
@@ -171,21 +186,3 @@ function fileDialogOpenDblClick(event: MouseEvent) {
 
 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;
-}
-:deep(.p-dataview-content) {
-    @apply flex-1;
-}
-:deep(.p-dataview-emptymessage) {
-    @apply h-full;
-}
-</style>

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"
         />
@@ -34,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 }"
@@ -50,7 +67,14 @@
                 </Button>
             </template>
         </Toolbar>
-        <Menu :model="menuItems" />
+        <Menu
+            :model="menuItems"
+            :pt="{
+                root: {
+                    style: 'border: none;'
+                }
+            }"
+        />
     </OverlayPanel>
 </template>
 <script setup lang="ts">
@@ -64,8 +88,6 @@ const props = defineProps<{
     item: Media;
 }>();
 
-const project = useProject();
-
 const menuItems = ref<MenuItem[]>([
     {
         label: 'Temp'
@@ -74,9 +96,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);
@@ -85,18 +107,9 @@ 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 */
+    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
 }
 </style>

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>

packages/safelight/src/components/Menu/ProjectList/ProjectList.vue

@@ -5,14 +5,14 @@
                 <h2 class="m-0 flex-1">Projects</h2>
                 <Button rounded title="Refresh list" @click="loadList()">
                     <template #icon>
-                        <PhArrowsClockwise size="18" />
+                        <PhArrowsClockwise />
                     </template>
                 </Button>
                 <SplitButton
                     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();
 }

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);