Library page (#53)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* Fix some styling of row display

* Gridview on library page

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* instance routing

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Initial modlist layout

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Page redesign

* More tweaks

* Base library pages

* Remove errant css

* Update play.svg

* Addressed issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>

theseus_gui/src/components/GridDisplay.vue

@@ -0,0 +1,132 @@
+<script setup>
+import {ChevronLeftIcon, ChevronRightIcon} from 'omorphia'
+import Instance from '@/components/ui/Instance.vue'
+import News from '@/components/ui/News.vue'
+import {onMounted, onUnmounted, ref} from 'vue'
+
+const props = defineProps({
+  instances: Array,
+  news: Array,
+  label: String,
+  canPaginate: Boolean,
+})
+const allowPagination = ref(false)
+const modsRow = ref(null)
+const newsRow = ref(null)
+// Remove after state is populated with real data
+const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
+const shouldRenderNews = props.news && props.news?.length !== 0
+onUnmounted(() => {
+  if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
+})
+const handleLeftPage = () => {
+  if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
+  else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
+}
+const handleRightPage = () => {
+  if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
+  else if (shouldRenderNews) newsRow.value.scrollLeft += 170
+}
+</script>
+<template>
+  <div class="row">
+    <div class="header">
+      <p>{{ props.label }}</p>
+      <hr>
+      <div v-if="allowPagination" class="pagination">
+        <ChevronLeftIcon @click="handleLeftPage"/>
+        <ChevronRightIcon @click="handleRightPage"/>
+      </div>
+    </div>
+    <section ref="modsRow" class="instances">
+      <Instance
+        v-for="instance in props.instances"
+        :key="instance.id"
+        display="card"
+        :instance="instance"
+      />
+    </section>
+  </div>
+</template>
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: inherit;
+    width: 100%;
+    margin-bottom: 1rem;
+    gap: 1rem;
+
+    p {
+      font-size: 1rem;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
+
+    hr {
+      background-color: var(--color-gray);
+      height: 1px;
+      width: 100%;
+      border: none;
+    }
+
+    .pagination {
+      display: inherit;
+      align-items: inherit;
+
+      svg {
+        background: var(--color-raised-bg);
+        border-radius: var(--radius-lg);
+        width: 1.3rem;
+        height: 1.2rem;
+        cursor: pointer;
+        margin-right: 0.5rem;
+        transition: all ease-in-out 0.1s;
+
+        &:hover {
+          filter: brightness(150%);
+        }
+      }
+    }
+  }
+
+  section {
+    display: flex;
+    align-items: inherit;
+    transition: all ease-in-out 0.4s;
+    gap: 1rem;
+  }
+
+  .instances {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    width: 100%;
+    gap: 1rem;
+    margin-right: auto;
+    margin-top: 0.8rem;
+    scroll-behavior: smooth;
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    &::-webkit-scrollbar {
+      width: 0px;
+      background: transparent;
+    }
+  }
+}
+
+.dark-mode {
+  .row {
+    &:nth-child(odd) {
+      background-color: rgb(30, 31, 34);
+    }
+  }
+}
+</style>