From 4a0d88a2a5d2bd09b4d25cf62912e892b8e28a8b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Tue, 26 Mar 2024 23:57:26 +0000
Subject: [PATCH] Adds inventory feature

---
 web/public/robots.txt                         |   2 +
 web/src/components/form/EditableTitle.svelte  |  82 ++++++++++++
 web/src/components/form/FontAwesome.svelte    |   1 +
 .../components/things/DeleteListing.svelte    |   3 +-
 .../components/things/GetSharableLink.svelte  |  82 ++++++++++++
 web/src/components/things/SaveListing.svelte  |  93 ++++++++++++++
 .../components/things/SavedServices.svelte    |  89 +++++++++++++
 web/src/components/things/ServiceCard.astro   | 119 ++----------------
 web/src/components/things/ServiceCard.svelte  |  69 ++++++++++
 web/src/components/things/ServiceList.astro   |  21 +++-
 web/src/components/things/service-card.scss   | 110 ++++++++++++++++
 web/src/pages/[...listing].astro              |  17 ++-
 web/src/pages/all.astro                       |  19 +--
 web/src/pages/browse.astro                    |   2 +-
 web/src/pages/index.astro                     |   5 +
 .../pages/inventory/[...inventoryId].astro    | 101 +++++++++++++++
 web/src/pages/inventory/index.astro           |  61 +++++++++
 web/src/pages/sitemap.astro                   |  15 ++-
 18 files changed, 765 insertions(+), 126 deletions(-)
 create mode 100644 web/src/components/form/EditableTitle.svelte
 create mode 100644 web/src/components/things/GetSharableLink.svelte
 create mode 100644 web/src/components/things/SaveListing.svelte
 create mode 100644 web/src/components/things/SavedServices.svelte
 create mode 100644 web/src/components/things/ServiceCard.svelte
 create mode 100644 web/src/components/things/service-card.scss
 create mode 100644 web/src/pages/inventory/[...inventoryId].astro
 create mode 100644 web/src/pages/inventory/index.astro

diff --git a/web/public/robots.txt b/web/public/robots.txt
index b65f9b3..b7656f4 100644
--- a/web/public/robots.txt
+++ b/web/public/robots.txt
@@ -1,6 +1,8 @@
 User-agent: *
 Disallow: /search/*
+Disallow: /inventory/*
 Allow: /search/$
+Allow: /inventory/$
 Allow: /sitemap
 
 Sitemap: https://awesome-privacy.xyz/sitemap-index.xml
diff --git a/web/src/components/form/EditableTitle.svelte b/web/src/components/form/EditableTitle.svelte
new file mode 100644
index 0000000..ee9b999
--- /dev/null
+++ b/web/src/components/form/EditableTitle.svelte
@@ -0,0 +1,82 @@
+<script>
+  import { onMount, tick } from 'svelte';
+  let title = 'Inventory'; // Default title
+  let editing = false;
+
+  // Function to save the title to local storage
+  function saveTitle(newTitle) {
+    localStorage.setItem('userTitle', newTitle);
+    title = newTitle;
+    editing = false;
+  }
+
+  onMount(async () => {
+    const storedTitle = localStorage.getItem('userTitle');
+    if (storedTitle) {
+      title = storedTitle;
+    }
+    await tick(); // Ensures Svelte has completed initial DOM updates
+  });
+
+  // Function to handle key events
+  function handleKeydown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault(); // Prevent form submission
+      saveTitle(event.target.innerText);
+      event.target.blur(); // Remove focus from the element
+    }
+    if (event.key === 'Escape') {
+      editing = false;
+      event.target.innerText = title; // Revert changes
+      event.target.blur(); // Remove focus from the element
+    }
+  }
+
+  // Click outside to stop editing
+  function handleClickOutside(event) {
+    if (editing) {
+      saveTitle(event.target.innerText);
+      editing = false;
+    }
+  }
+</script>
+
+<svelte:window on:click={handleClickOutside}/>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div>
+<h2
+  contenteditable={true}
+  class:editable={editing}
+  on:click={() => editing = true}
+  on:keydown={handleKeydown}
+  on:blur={() => saveTitle(title)}
+  tabindex="0"
+>{title}</h2>
+
+<small>Click the title, to edit your inventory name</small>
+</div>
+
+<style>
+  h2 {
+    font-family: "Lekton", sans-serif;
+    font-weight: bold;
+    font-size: 3rem;
+    margin: 0;
+    color: var(--accent-3);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    outline: none;
+    padding: 0.25rem;
+  }
+  .editable {
+    border-bottom: 2px solid var(--accent-3); /* Visual cue to show editable state */
+  }
+  h2:focus {
+    border-bottom: 2px solid var(--accent-3);
+  }
+  small {
+    font-size: 0.8rem;
+    opacity: 0.5;
+  }
+</style>
diff --git a/web/src/components/form/FontAwesome.svelte b/web/src/components/form/FontAwesome.svelte
index b0e54a2..4074407 100644
--- a/web/src/components/form/FontAwesome.svelte
+++ b/web/src/components/form/FontAwesome.svelte
@@ -78,6 +78,7 @@
 
     //Misc
     ratingStar: solidIcons.faStar,
+    saveListing: solidIcons.faBookmark
   };
 
   export let iconName: string;
diff --git a/web/src/components/things/DeleteListing.svelte b/web/src/components/things/DeleteListing.svelte
index 07ec713..2e825d0 100644
--- a/web/src/components/things/DeleteListing.svelte
+++ b/web/src/components/things/DeleteListing.svelte
@@ -40,7 +40,7 @@
 <style lang="scss">
 .actions {
   position: absolute;
-  right: 1rem;
+  right: 3.5rem;
   top: 1rem;
   width: 2.8rem;
   gap: 1rem;
@@ -53,6 +53,7 @@
     transition: all 0.2s ease-in-out;
     &:hover {
       color: var(--accent-3);
+      opacity: 1;
     }
   }
   
diff --git a/web/src/components/things/GetSharableLink.svelte b/web/src/components/things/GetSharableLink.svelte
new file mode 100644
index 0000000..0fcc694
--- /dev/null
+++ b/web/src/components/things/GetSharableLink.svelte
@@ -0,0 +1,82 @@
+
+<script lang="ts">
+
+import { slugify } from "@utils/fetch-data";
+
+let linkId = '';
+let done = false;
+let error = false;
+
+const save = async () => {
+  const savedServices =  JSON.parse(localStorage.getItem('savedServices') || '[]');
+  const inventoryTitle = localStorage.getItem('userTitle') || 'Anon\'s Inventory';
+  const uniqueId = Math.random().toString(36).substring(2);
+  const saveKey = `${uniqueId}_${slugify(inventoryTitle)}`;
+  const url = 'https://awesome-privacy-share-api.as93.net';
+  const data = { key: saveKey, services: savedServices };
+  fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+  })
+  .then(response => response.json())
+  .then(data => {
+    linkId = data.key;
+    done = true;
+    error = false;
+    navigator.clipboard.writeText(`https://awesome-privacy.xyz/inventory/${linkId}`);
+  })
+  .catch(error => {
+    error = true;
+    console.error('Error:', error)
+  });
+};
+
+</script>
+
+<div class="share-container">
+  {#if !done}
+    <button class="save-button" on:click={save}>Get Sharable Link</button>
+  {/if}
+  {#if done}
+    <span class="success-msg">
+      Done! Your share link has been copied to clipboard.
+      <a href={`https://awesome-privacy.xyz/inventory/${linkId}`}>
+        Visit Link
+      </a>
+    </span>
+  {/if}
+  {#if error}
+    <span class="error-msg">Something unexpected happened</span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .share-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+  }
+  .save-button {
+    background: var(--accent-3);
+    border: 1px solid var(--box-outline);
+    box-shadow: 3px 3px 0 var(--box-outline);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--curve-sm);
+    color: var(--foreground);
+    font-family: Lekton;
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+  .success-msg {
+    font-size: 1rem;
+    color: var(--success);
+    a {
+      color: var(--success);
+    }
+  }
+  .error-msg {
+    font-size: 1rem;
+    color: var(--danger);
+  }
+</style>
diff --git a/web/src/components/things/SaveListing.svelte b/web/src/components/things/SaveListing.svelte
new file mode 100644
index 0000000..9df2493
--- /dev/null
+++ b/web/src/components/things/SaveListing.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import FontAwesome from "@components/form/FontAwesome.svelte";
+  import { slugify } from "@utils/fetch-data";
+
+  export let categoryName: string;
+  export let sectionName: string;
+  export let serviceName: string;
+  export let showLabel: boolean = false;
+
+  const serviceRef = `${slugify(categoryName)}/${slugify(sectionName)}/${slugify(serviceName)}`;
+
+  let isSaved = false;
+
+  onMount(async () => {
+    const stored = JSON.parse(localStorage.getItem('savedServices') || '[]');
+    if (stored.includes(serviceRef)) {
+      isSaved = true;
+    }
+  });
+
+  function toggleSave() {
+    const stored = JSON.parse(localStorage.getItem('savedServices') || '[]');
+    const index = stored.indexOf(serviceRef);
+    if (index === -1) {
+      stored.push(serviceRef);
+      isSaved = true;
+    } else {
+      stored.splice(index, 1);
+      isSaved = false;
+    }
+    localStorage.setItem('savedServices', JSON.stringify(stored));
+  }
+</script>
+
+<button
+  class={`save-container ${isSaved ? 'saved' : ''} ${showLabel ? 'label-button' : ''}`}
+  title={`Save ${serviceName}`}
+  on:click={toggleSave}>
+  {#if showLabel }
+    <span>Save</span>
+  {/if}
+  <FontAwesome iconName="saveListing"/>
+</button>
+
+<style lang="scss">
+  .save-container {
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    span {
+      font-size: 1.2rem;
+      opacity: 0.8;
+      color: var(--foreground);
+      font-family: "Lekton";
+    }
+    :global(svg) {
+      color: var(--foreground);
+      width: 1.2rem;
+      height: 1.2rem;
+      opacity: 0.5;
+      transition: all 0.2s ease-in-out;
+    }
+    &:hover {
+      :global(svg) {
+        color: var(--accent-3);
+        opacity: 1;
+      }
+    }
+    &.saved {
+      :global(svg) {
+        color: var(--accent-2);
+        opacity: 1;
+      }
+    }
+    &.label-button {
+      padding: 0.2rem 0.4rem;
+      border-radius: var(--curve-sm);
+      box-shadow: 3px 3px 0 var(--box-outline);
+      border: 1px solid var(--box-outline);
+      background: var(--background-form);
+      
+      &:hover {
+        
+        box-shadow: 4px 4px 0 var(--box-outline);
+      }
+    }
+  }
+</style>
diff --git a/web/src/components/things/SavedServices.svelte b/web/src/components/things/SavedServices.svelte
new file mode 100644
index 0000000..214c498
--- /dev/null
+++ b/web/src/components/things/SavedServices.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import { writable } from 'svelte/store';
+
+import type { Category, Service } from '../../types/Service';
+import { slugify } from "@utils/fetch-data";
+import ServiceCard from './ServiceCard.svelte';
+
+export let allData: Category[];
+export let serviceList: string[] | null = null;
+
+interface SavedServices {
+  category: string;
+  section: string;
+  service: Service;
+}
+
+const savedServices = writable<SavedServices[]>([]);
+
+onMount(async () => {
+  const results: SavedServices[] = [];
+  const saved = serviceList || JSON.parse(localStorage.getItem('savedServices') || '[]');
+  saved.forEach((serviceId: string) => {
+    const parts = serviceId.split('/');
+    const categoryName = parts[0];
+    const sectionName = parts[1];
+    const serviceName = parts[2];
+
+    const category = allData.find((category) => slugify(category.name) === categoryName);
+    if (!category) return;
+    const section = category.sections.find((section) => slugify(section.name) === sectionName);
+    if (!section) return;
+    const service = section.services.find((service) => slugify(service.name) === serviceName);
+    if (!service) return;
+    results.push({ category: category.name, section: section.name, service});
+  });
+  savedServices.set(results || []);
+});
+
+</script>
+
+<div>
+  {#if $savedServices.length > 0}
+    <div class="saved-services">
+      {#each $savedServices as thingy}
+        <ServiceCard
+          categoryName={thingy.category}
+          sectionName={thingy.section}
+          service={thingy.service}
+        />
+      {/each}
+    </div>
+  {:else if !serviceList}
+    <div class="nothing-yet">
+      <p>Here you'll find a list of all the software and services you've bookmarked.</p>
+      <small>
+        All data is stored on-device, in your browser's local storage,
+        and not sent anywhere unless you choose to share it
+      </small>
+      <p class="nope">Nothing saved yet!</p>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .saved-services {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+
+  .nothing-yet {
+    text-align: center;
+    p {
+      margin: 0;
+    }
+    small {
+      font-size: 0.8rem;
+      opacity: 0.6;
+    }
+    .nope {
+      font-weight: bold;
+      margin: 2rem 0;
+      opacity: 0.2;
+      font-size: 1.6rem;
+    }
+  }
+</style>
diff --git a/web/src/components/things/ServiceCard.astro b/web/src/components/things/ServiceCard.astro
index d2c84d6..f7756f5 100644
--- a/web/src/components/things/ServiceCard.astro
+++ b/web/src/components/things/ServiceCard.astro
@@ -3,6 +3,7 @@
 import { formatLink } from '@utils/parse-markdown';
 import type { Service } from 'src/types/Service';
 import FontAwesome from '@components/form/FontAwesome.svelte';
+import SaveListing from '@components/things/SaveListing.svelte';
 import { slugify } from '@utils/fetch-data';
 
 interface Props {
@@ -39,7 +40,6 @@ const {
 
 
 <div class="service" id={slugify(service.name)}>
-    <!-- <DeleteListing client:load categoryName={categoryName} sectionName={sectionName} serviceName={service.name} /> -->
     <div class="service-head">
       <a class="service-title" href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>
         <h4>{service.name}</h4>
@@ -47,6 +47,14 @@ const {
       {service.followWith && <p class="follow-with">({service.followWith})</p> }
     </div>
 
+    <div class="save-listing">
+      <SaveListing client:visible
+        categoryName={categoryName}
+        sectionName={sectionName}
+        serviceName={service.name}
+      />
+    </div>
+
     <div class="service-body">
       <img 
         width="40"
@@ -79,109 +87,6 @@ const {
     </div>
   </div>
 
-
-<style lang="scss">
-.service {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  border: 2px solid var(--box-outline);
-  box-shadow: 6px 6px 0 var(--box-outline);
-  background: var(--accent-fg);
-  border-radius: var(--curve-sm);
-
-  .service-head {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    h4 {
-      margin: 0;
-      font-size: 1.4rem;
-      color: var(--foreground);
-    }
-    p {
-      margin: 0;
-      font-size: 1rem;
-      opacity: 0.7;
-    }
-    a {
-      text-decoration: none;
-    }
-    h4 {
-      text-decoration: none;
-      position: relative;
-      &:after {    
-        background: none repeat scroll 0 0 transparent;
-        bottom: 0;
-        content: "";
-        display: block;
-        height: 3px;
-        left: 50%;
-        position: absolute;
-        background: var(--accent-3);
-        transition: width 0.2s ease 0s, left 0.2s ease 0s;
-        width: 0;
-      }
-      &:hover:after { 
-        width: 100%; 
-        left: 0; 
-      }
-    }
-  }
-
-  .service-body {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    img {
-      border-radius: var(--curve-sm);
-      font-size: 0.6rem;
-      color: var(--accent);
-    }
-    :global(p) {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;  
-      overflow: hidden;
-      margin: 0.5rem 0;
-      width: calc(100% - 2rem);
-      overflow-x: hidden;
-    }
-  }
-
-  .service-links {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: space-between;
-    a {
-      color: var(--accent-3);
-      font-size: 0.8rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      opacity: 0.85;
-      text-decoration: none;
-      max-width: 50%;
-      min-width: 25%;
-      &:not(:last-child) {
-        margin-right: 0.5rem;
-      }
-      &:hover {
-        text-decoration: underline;
-        opacity: 1;
-      }
-      :global(svg) {
-        width: 1rem;
-        height: 1rem;
-      }
-      span {
-        max-width: calc(100% - 1rem);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-    }
-  }
-}
-  
-</style>
+  <style lang="scss">
+    @import './service-card.scss';
+  </style>
diff --git a/web/src/components/things/ServiceCard.svelte b/web/src/components/things/ServiceCard.svelte
new file mode 100644
index 0000000..d76be99
--- /dev/null
+++ b/web/src/components/things/ServiceCard.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import FontAwesome from '@components/form/FontAwesome.svelte';
+  import SaveListing from '@components/things/SaveListing.svelte';
+  import { slugify } from '@utils/fetch-data';
+  import { formatLink } from '@utils/parse-markdown';
+  import type { Service } from 'src/types/Service';
+
+  export let service: Service;
+  export let categoryName: string;
+  export let sectionName: string;
+
+  // Computed values based on props
+  let serviceRef = slugify(service.name);
+  let categorySlug = slugify(categoryName);
+  let sectionSlug = slugify(sectionName);
+</script>
+
+<div class="service" id={serviceRef}>
+  <div class="service-head">
+    <a class="service-title" href={`/${categorySlug}/${sectionSlug}/${serviceRef}`}>
+      <h4>{service.name}</h4>
+    </a>
+    {#if service.followWith}
+      <p class="follow-with">({service.followWith})</p>
+    {/if}
+  </div>
+
+  <div class="save-listing">
+    <SaveListing
+      categoryName={categoryName}
+      sectionName={sectionName}
+      serviceName={service.name}
+    />
+  </div>
+
+  <div class="service-body">
+    <img
+      width="40"
+      height="40"
+      loading="lazy"
+      decoding="async"
+      class="service-icon"
+      alt={`${service.name} Icon`}
+      data-service-url={formatLink(service.url)}
+      src={service.icon || `https://icon.horse/icon/${formatLink(service.url)}`}
+    />
+    <div class="service-body">
+      <p>{@html service.description}</p>
+    </div>
+  </div>
+
+  <div class="service-links">
+    <a class="link" href={service.url}>
+      <FontAwesome iconName="website" /> <span>{formatLink(service.url)}</span>
+    </a>
+    {#if service.github}
+      <a class="link" href={`https://github.com/${service.github}`}>
+        <FontAwesome iconName="sourceCode" /> GitHub
+      </a>
+    {/if}
+    <a href={`/${categorySlug}/${sectionSlug}/${serviceRef}`}>
+      <FontAwesome iconName="viewReport" /> View Report ➔
+    </a>
+  </div>
+</div>
+
+<style lang="scss">
+  @import './service-card.scss';
+</style>
diff --git a/web/src/components/things/ServiceList.astro b/web/src/components/things/ServiceList.astro
index 00853e1..aeabc20 100644
--- a/web/src/components/things/ServiceList.astro
+++ b/web/src/components/things/ServiceList.astro
@@ -8,6 +8,7 @@ import DeleteListing from '@components/things/DeleteListing.svelte';
 import { slugify } from '@utils/fetch-data';
 
 import GitHubMetrics from '@components/things/ItemGitHubMetrics.astro';
+import SaveListing from '@components/things/SaveListing.svelte';
 
 interface Props {
   services: Service[];
@@ -54,6 +55,13 @@ const {
     {services.map((service: Service) => (
       <li id={slugify(service.name)}>
         <DeleteListing client:load categoryName={categoryName} sectionName={sectionName} serviceName={service.name} />
+        <div class="save-listing">
+          <SaveListing client:visible
+            categoryName={categoryName}
+            sectionName={sectionName}
+            serviceName={service.name}
+          />
+        </div>
         <div class="service-head">
           <img 
             width="40"
@@ -157,6 +165,11 @@ const {
     li {
       margin-bottom: 1rem;
       position: relative;
+      .save-listing {
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+      }
       .service-head {
         display: flex;
         align-items: center;
@@ -304,7 +317,13 @@ const {
   }
 
   li:hover :global(.actions) {
-    opacity: 0.5;
+    opacity: 0.6;
+    :global(a):hover {
+      opacity: 1;
+    }
+  }
+  :global(.actions a):hover {
+    opacity: 1;
   }
   
 </style>
diff --git a/web/src/components/things/service-card.scss b/web/src/components/things/service-card.scss
new file mode 100644
index 0000000..ca97b18
--- /dev/null
+++ b/web/src/components/things/service-card.scss
@@ -0,0 +1,110 @@
+.service {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border: 2px solid var(--box-outline);
+  box-shadow: 6px 6px 0 var(--box-outline);
+  background: var(--accent-fg);
+  border-radius: var(--curve-sm);
+  position: relative;
+  overflow: hidden;
+
+  .service-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    h4 {
+      margin: 0;
+      font-size: 1.4rem;
+      color: var(--foreground);
+    }
+    p {
+      margin: 0;
+      font-size: 1rem;
+      opacity: 0.7;
+    }
+    a {
+      text-decoration: none;
+    }
+    h4 {
+      text-decoration: none;
+      position: relative;
+      &:after {    
+        background: none repeat scroll 0 0 transparent;
+        bottom: 0;
+        content: "";
+        display: block;
+        height: 3px;
+        left: 50%;
+        position: absolute;
+        background: var(--accent-3);
+        transition: width 0.2s ease 0s, left 0.2s ease 0s;
+        width: 0;
+      }
+      &:hover:after { 
+        width: 100%; 
+        left: 0; 
+      }
+    }
+  }
+
+  .save-listing {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .service-body {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    img {
+      border-radius: var(--curve-sm);
+      font-size: 0.6rem;
+      color: var(--accent);
+    }
+    :global(p) {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;  
+      overflow: hidden;
+      margin: 0.5rem 0;
+      width: calc(100% - 2rem);
+      overflow-x: hidden;
+    }
+  }
+
+  .service-links {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+    a {
+      color: var(--accent-3);
+      font-size: 0.8rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      opacity: 0.85;
+      text-decoration: none;
+      max-width: 50%;
+      min-width: 25%;
+      &:not(:last-child) {
+        margin-right: 0.5rem;
+      }
+      &:hover {
+        text-decoration: underline;
+        opacity: 1;
+      }
+      :global(svg) {
+        width: 1rem;
+        height: 1rem;
+      }
+      span {
+        max-width: calc(100% - 1rem);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}
diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro
index af34858..b44913e 100644
--- a/web/src/pages/[...listing].astro
+++ b/web/src/pages/[...listing].astro
@@ -25,6 +25,7 @@ import { parseMarkdown, formatLink } from '@utils/parse-markdown';
 import { site } from '@utils/config';
 import FontAwesome from '@components/form/FontAwesome.svelte';
 import Button from '@components/form/Button.astro';
+import SaveListing from '@components/things/SaveListing.svelte';
 
 interface Props extends Service {
   slug: string;
@@ -184,7 +185,15 @@ const getApiEndpoint = () => {
           ➔ <a href={`/${slugify(categoryName)}/${slugify(parentSection.name)}`}>{parentSection.name}</a>
           ➔ <a href={`/${slugify(categoryName)}/${slugify(parentSection.name)}/${slugify(name)}`}>{name}</a>
         </span>
-      </div>     
+      </div>
+      <div class="save-listing">
+        <SaveListing client:visible
+          categoryName={categoryName}
+          sectionName={parentSection.name}
+          serviceName={name}
+          showLabel={true}
+        />
+      </div>
       <div class="intro">
         <img 
           width="60"
@@ -485,6 +494,12 @@ h3 {
   }
 }
 
+.save-listing {
+  position: absolute;
+  top: 3rem;
+  right: 1rem;
+}
+
 h4 {
   font-size: 1.4rem;
   margin-bottom: 0;
diff --git a/web/src/pages/all.astro b/web/src/pages/all.astro
index d95a7f1..2b8c4c2 100644
--- a/web/src/pages/all.astro
+++ b/web/src/pages/all.astro
@@ -94,6 +94,8 @@ const toggleSidebar = () => {
                   <p>
                     <strong>⚠️ This section is still a work in progress ⚠️</strong><br />
                     Check back soon, or help us complete it by submiting a pull request on GitHub.
+                    <br />
+                    <span class="quick-submit">Or submit an entry <a href="/submit">here</a></span>
                   </p>
                 </div>
               ) : null}
@@ -119,10 +121,6 @@ main {
   justify-content: space-between;
 }
 
-// .narrow {
-//   width: 70%;
-// }
-
 .hidden {
   display: none;
 }
@@ -243,22 +241,25 @@ h3 {
   }
 
   .nothing-yet {
-    width: 80vw;
+    width: 100%;
     margin: 0 auto;
     background: var(--accent-fg);
     border: 2px solid var(--box-outline);
     box-shadow: 6px 6px 0 var(--box-outline);
     border-radius: var(--curve-sm);
-
     display: flex;
-    width: 80vw;
-    max-width: 28rem;
+
     p {
       font-size: 1.2rem;
       opacity: 0.8;
       font-style: italic;
       text-align: center;
-      margin-bottom: 3rem;
+      margin: 4rem auto;
+    }
+    .quick-submit {
+      margin-top: 1rem;
+      font-size: 0.8rem;
+      opacity: 0.8;
     }
   }
 
diff --git a/web/src/pages/browse.astro b/web/src/pages/browse.astro
index e824a7e..9f30a76 100644
--- a/web/src/pages/browse.astro
+++ b/web/src/pages/browse.astro
@@ -19,7 +19,7 @@ const categories: Category[] = (await fetchData())?.categories;
     <p id="press-enter-msg" class="press-enter">Press enter for deep search</p>
   </span>
 </div>
-<p class="sitemap-link">You can also view <a href="/sitemap">all pages</a> or <a href="/all">all listings</a></p>
+<p class="sitemap-link">Not sure what you're looking for? Take a look through <a href="/all">all listings</a></p>
 
 <ul class="categories">
   {categories.map((category) => (
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 39ca597..41874ac 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -4,6 +4,7 @@ import Layout from '@layouts/Layout.astro';
 import Hero from '@components/Hero.astro';
 import Search from '@components/things/Search.svelte';
 import SectionList from '@components/things/SectionList.astro';
+import SavedServices from '@components/things/SavedServices.svelte';
 
 import { fetchData } from '@utils/fetch-data';
 import Button from '@components/form/Button.astro';
@@ -38,6 +39,10 @@ const description = 'Privacy is a fundamental human right; '
 			<span>Or, just</span>
 			<Button url="/all" text="View Everything" />
 		</div>
+
+		<h2><a href="/inventory">Saved Items</a></h2>
+		<SavedServices allData={categories} client:load />
+
 		<h2>
 			<a href="/about">About</a>
 		</h2>
diff --git a/web/src/pages/inventory/[...inventoryId].astro b/web/src/pages/inventory/[...inventoryId].astro
new file mode 100644
index 0000000..01d261c
--- /dev/null
+++ b/web/src/pages/inventory/[...inventoryId].astro
@@ -0,0 +1,101 @@
+---
+
+import Layout from '@layouts/Layout.astro';
+import SavedServices from '@components/things/SavedServices.svelte';
+import GetSharableLink from '@components/things/GetSharableLink.svelte';
+
+import { fetchData } from '@utils/fetch-data';
+import Button from '@components/form/Button.astro';
+import EditableTitle from '@components/form/EditableTitle.svelte';
+import type { Category } from '../../types/Service';
+
+const categories = (await fetchData())?.categories || [] as Category[];
+
+export const prerender = false;
+
+const inventoryId = Astro.params.inventoryId || 'Inventory';
+let cheekyLilError = '';
+
+function makeTitle(input: string): string {
+  return (input.includes('_') ? input : `mystry_${input}`)
+    .split('_')[1]
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+
+const serviceList = await fetch(`https://awesome-privacy-share-api.as93.net/${inventoryId}`).then((res) => res.json()) || [];
+
+if (serviceList.error) {
+  cheekyLilError = serviceList.error;
+}
+
+---
+
+<Layout title="Saved Services">
+  <main>
+    <h2>{makeTitle(inventoryId)}</h2>
+    {cheekyLilError && (
+      <div class="error">
+        <p class="oh-deary-me">An error occoured</p>
+        <p class="what-the-fuck-happened">{cheekyLilError}</p>
+        <p class="what-next">
+          We're sorry about that.<br />
+          Try going <a href="/">back home</a>,
+          or <a href="https://github.com/Lissy93/awesome-privacy/issues/new/choose">raising a ticket</a> on
+          GitHub.
+        </p>
+      </div>
+    )}
+    <SavedServices allData={categories} serviceList={serviceList} client:load />
+    <div class="buttons">
+      <p>Not found what you're looking for?</p>
+      <Button url="/all">Browse Services</Button>
+    </div>
+  </main>
+</Layout>
+
+<style lang="scss">
+  main {
+    margin: 0 auto 2rem auto;
+    padding: 1rem;
+    width: 1200px;
+    max-width: calc(100% - 5rem);
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    min-height: calc(100vh - 12rem);
+    font-size: 1.25rem;
+    h2 {
+      font-family: "Lekton", sans-serif;
+      font-weight: bold;
+      font-size: 3rem;
+      margin: 0;
+      color: var(--accent-3);
+    }
+    .buttons {
+      margin: 1rem auto;
+      display: flex;
+      flex-direction: column;
+    }
+    .error {
+      text-align: center;
+      font-size: 1.4rem;
+      .oh-deary-me {
+        font-size: 1.8rem;
+        margin: 0.2rem auto;
+      }
+      .what-the-fuck-happened {
+        color: var(--danger);
+        margin: 0.2rem auto;
+      }
+      .what-next {
+        font-size: 1rem;
+        margin-top: 3rem;
+        opacity: 0.6;
+        a {
+          color: var(--foreground);
+        }
+      }
+    }
+  }
+</style>
diff --git a/web/src/pages/inventory/index.astro b/web/src/pages/inventory/index.astro
new file mode 100644
index 0000000..2bb8f9a
--- /dev/null
+++ b/web/src/pages/inventory/index.astro
@@ -0,0 +1,61 @@
+---
+
+import Layout from '@layouts/Layout.astro';
+import SavedServices from '@components/things/SavedServices.svelte';
+import GetSharableLink from '@components/things/GetSharableLink.svelte';
+
+import { fetchData } from '@utils/fetch-data';
+import Button from '@components/form/Button.astro';
+import EditableTitle from '@components/form/EditableTitle.svelte';
+import type { Category } from '../../types/Service';
+
+const categories = (await fetchData())?.categories || [] as Category[];
+
+---
+
+<Layout title="Saved Services">
+  <main>
+    <div class="top-row">
+      <!-- <h2>Inventory</h2> -->
+      <EditableTitle client:load />
+      <GetSharableLink client:load />
+    </div>
+    <SavedServices allData={categories} client:load />
+    <div class="buttons">
+      <p>Not found what you're looking for?</p>
+      <Button url="/all">Browse Services</Button>
+    </div>
+  </main>
+</Layout>
+
+<style lang="scss">
+  main {
+    margin: 0 auto 2rem auto;
+    padding: 1rem;
+    width: 1200px;
+    max-width: calc(100% - 5rem);
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    min-height: calc(100vh - 12rem);
+    font-size: 1.25rem;
+    .top-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+    h2 {
+      font-family: "Lekton", sans-serif;
+      font-weight: bold;
+      font-size: 3rem;
+      margin: 0;
+      color: var(--accent-3);
+    }
+    .buttons {
+      margin: 1rem auto;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/web/src/pages/sitemap.astro b/web/src/pages/sitemap.astro
index 2c3822c..60c3d11 100644
--- a/web/src/pages/sitemap.astro
+++ b/web/src/pages/sitemap.astro
@@ -24,15 +24,21 @@ const categories = (await fetchData() as AwesomePrivacy)?.categories || [];
         <li>
           <a href="/">Home</a>
         </li>
+        <li>
+          <a href="/search">Search</a>
+        </li>
+        <li>
+          <a href="/all">View All</a>
+        </li>
+        <li>
+          <a href="/inventory">My Inventory</a>
+        </li>
         <li>
           <a href="/submit">Submit Listing</a>
         </li>
         <li>
           <a href="/api">API</a>
         </li>
-        <li>
-          <a href="/search">Search</a>
-        </li>
         <li>
           <a href="/browse">Categories</a>
           <ul>
@@ -59,9 +65,6 @@ const categories = (await fetchData() as AwesomePrivacy)?.categories || [];
             ))}
           </ul>
         </li>
-        <li>
-          <a href="/all">View Summary of All</a>
-        </li>
         <li>
           <a href="/about">About</a>
           <ul>