From 3189d5a996201589919394ae6828a5f7d5bad047 Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 10:16:24 -0500
Subject: [PATCH 01/10] Add CaptureDetails component

---
 perma_web/frontend/components/CaptureDetails.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 perma_web/frontend/components/CaptureDetails.vue

diff --git a/perma_web/frontend/components/CaptureDetails.vue b/perma_web/frontend/components/CaptureDetails.vue
new file mode 100644
index 000000000..986cae65c
--- /dev/null
+++ b/perma_web/frontend/components/CaptureDetails.vue
@@ -0,0 +1,15 @@
+<script setup>
+</script>
+
+<template>
+  <div class="container cont-fixed manage-links">
+    <div class="row">
+      <div class="col-md-3">
+        <slot name="leftColumn"></slot>
+      </div>
+      <div class="col-md-9">
+        <slot name="rightColumn"></slot>
+      </div>
+    </div>
+  </div>
+</template>

From eeaaad60ceb6d436d5876937cd9eda96b2d80f6e Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 10:20:58 -0500
Subject: [PATCH 02/10] Add SectionHeading component

---
 .../frontend/components/SectionHeading.vue    | 26 +++++++++++++++++++
 perma_web/static/css/style-responsive.scss    | 16 ++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 perma_web/frontend/components/SectionHeading.vue

diff --git a/perma_web/frontend/components/SectionHeading.vue b/perma_web/frontend/components/SectionHeading.vue
new file mode 100644
index 000000000..539f9e23d
--- /dev/null
+++ b/perma_web/frontend/components/SectionHeading.vue
@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  icon: {
+    type: String,
+    validator(value) {
+      return [
+        "organization",
+      ].includes(value);
+    },
+  },
+});
+</script>
+
+<template>
+  <div class="c-sectionHeading">
+    <template v-if="!!icon">
+      <svg v-if="icon === 'organization'" width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="18" height="20" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.73995 9.90178C4.39114 10.0982 4.03265 10.332 3.6354 10.6032C0.563971 12.6699 1.17438 18.8889 1.17438 18.8889H13.4504C13.4504 18.8889 14.0608 12.6699 10.9991 10.5938C10.6018 10.3226 10.2336 10.0888 9.89452 9.89243C11.2994 9.06012 12.2296 7.56383 12.2296 5.85245C12.2296 3.23394 10.0302 1.11108 7.31723 1.11108C4.6043 1.11108 2.40489 3.2433 2.40489 5.8618C2.40489 7.56383 3.33504 9.06012 4.73995 9.90178Z" fill="#2D76EE" stroke="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.10662 9.89243C7.75787 10.0888 7.39943 10.3226 7.00224 10.5938C3.93129 12.6699 4.5513 18.8889 4.5513 18.8889H16.8254C16.8254 18.8889 17.4357 12.6699 14.3745 10.5938C13.9773 10.3226 13.6091 10.0888 13.2701 9.89243C14.6748 9.06012 15.6048 7.56383 15.6048 5.85245C15.6048 3.23394 13.4057 1.11108 10.6932 1.11108C7.98068 1.11108 5.78161 3.23394 5.78161 5.85245C5.78161 7.55448 6.71162 9.05076 8.11631 9.89243H8.10662Z" fill="#2D76EE" stroke="white"/>
+      </svg>
+    </template>
+    <h3 class="c-sectionHeading__name">{{ props.name }}</h3>
+  </div>
+</template>
\ No newline at end of file
diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
index d2af57510..94f629f84 100644
--- a/perma_web/static/css/style-responsive.scss
+++ b/perma_web/static/css/style-responsive.scss
@@ -5925,6 +5925,22 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   }
 }
 
+.c-sectionHeading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-top: 2px solid $color-blue;
+  padding-top: $grid;
+  padding-bottom: $grid * 2;
+}
+
+.c-sectionHeading__name {
+  font-size: 22px;
+  color: $color-blue;
+  font-family: $font-hed-alt;
+  font-weight: 700;
+}
+
 /* CSS transition classes automatically added/removed by Vue */
 .fade-enter-active,
 .fade-leave-active {

From 127820f0c5cced89da37dfbbdb24283dc5dd05ff Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 11:14:32 -0500
Subject: [PATCH 03/10] Adjust styles and rename component

---
 perma_web/frontend/components/CreateLink.vue  | 22 ++++++++++++-------
 perma_web/frontend/components/IconButton.vue  |  6 ++---
 ...aptureDetails.vue => PermaLinkDetails.vue} |  0
 .../frontend/components/SectionHeading.vue    |  4 ++++
 perma_web/static/css/style-responsive.scss    | 12 +++++++++-
 5 files changed, 32 insertions(+), 12 deletions(-)
 rename perma_web/frontend/components/{CaptureDetails.vue => PermaLinkDetails.vue} (100%)

diff --git a/perma_web/frontend/components/CreateLink.vue b/perma_web/frontend/components/CreateLink.vue
index feb743ca1..2ed1cda33 100644
--- a/perma_web/frontend/components/CreateLink.vue
+++ b/perma_web/frontend/components/CreateLink.vue
@@ -9,6 +9,8 @@ import LinkCount from './LinkCount.vue';
 import FolderSelect from './FolderSelect.vue';
 import { useStorage } from '@vueuse/core'
 import CreateLinkBatch from './CreateLinkBatch.vue';
+import PermaLinkDetails from './PermaLinkDetails.vue';
+import SectionHeading from './SectionHeading.vue';
 import { getErrorFromNestedObject, getErrorFromResponseOrStatus, getErrorResponse, folderError, defaultError } from "../lib/errors"
 import IconButton from './IconButton.vue'
 import { showDevPlayground } from '../lib/consts'
@@ -223,17 +225,21 @@ onBeforeUnmount(() => {
                     </button>
                 </p>
             </form><!--/#linker-->
-            <template v-if="showDevPlayground">
-            <IconButton icon="plus" name="New Folder" :handleClick="() => { console.log('New Folder') }"  />
-            <IconButton icon="edit" name="Rename Selected Folder" :handleClick="() => { console.log('Rename Folder') }"  />
-            <IconButton icon="trash" name="Delete Selected Folder" :handleClick="() => { console.log('Delete Selected Folder') }"  />
-            <IconButton icon="download-alt" name="Export Links" :handleClick="() => { console.log('Export Links') }"  />
-            <IconButton iconFamily="none" icon="chevron-down" name="Expand Link Batch History" :handleClick="() => { console.log('Expand Link Batch History') }"  />
-            <IconButton iconFamily="none" icon="chevron-up" name="Collapse Link Batch History" :handleClick="() => { console.log('Collapse Link Batch History') }"  />
-            </template>
         </div><!-- cont-full-bleed cont-sm-fixed -->
     </div><!-- container cont-full-bleed -->
 
+    <PermaLinkDetails>
+        <template #leftColumn>
+            <SectionHeading name="Link Batch History">
+                <template #iconButton>
+                    <IconButton icon="chevron-down" iconFamily="none" :handleClick="() => { console.log('Delete Selected Folder') }" />
+                </template>
+            </SectionHeading>
+        </template>
+        <template #rightColumn>
+            <SectionHeading name="Another Journal Links" icon="organization" />
+        </template>
+    </PermaLinkDetails>
     <CaptureError ref="uploadDialogRef" />
 
     <CreateLinkBatch ref="batchDialogRef" />
diff --git a/perma_web/frontend/components/IconButton.vue b/perma_web/frontend/components/IconButton.vue
index aa68bcf6d..92beb6ba0 100644
--- a/perma_web/frontend/components/IconButton.vue
+++ b/perma_web/frontend/components/IconButton.vue
@@ -34,9 +34,9 @@ const isChevron = props.icon === "chevron-down" || props.icon === "chevron-up";
       props.iconFamily === 'fontAwesome' ? `icon-${props.icon}` : ''
     }`"
   >
-    <svg v-if="isChevron" aria-hidden="true" width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path v-if="props.icon === 'chevron-down'" d="M8.84746 9L18 2.03226L16.1695 0L8.84746 5.48474L1.83051 7.77811e-08L0 2.03226L8.84746 9Z" fill="#2E76EE"/>
-      <path v-if="props.icon === 'chevron-up'" d="M8.84746 0L18 6.96774L16.1695 9L8.84746 3.51526L1.83051 9L0 6.96774L8.84746 0Z" fill="#2E76EE"/>
+    <svg v-if="isChevron" aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path v-if="props.icon === 'chevron-down'" d="M6.88136 7L14 1.58065L12.5763 0L6.88136 4.26591L1.42373 0L0 1.58065L6.88136 7Z" fill="#2E76EE"/>
+      <path v-if="props.icon === 'chevron-up'" d="M6.88136 0L14 5.41935L12.5763 7L6.88136 2.73409L1.42373 7L0 5.41935L6.88136 0Z" fill="#2E76EE"/>
     </svg>
     <span class="sr-only">{{ props.name }}</span>
   </button>
diff --git a/perma_web/frontend/components/CaptureDetails.vue b/perma_web/frontend/components/PermaLinkDetails.vue
similarity index 100%
rename from perma_web/frontend/components/CaptureDetails.vue
rename to perma_web/frontend/components/PermaLinkDetails.vue
diff --git a/perma_web/frontend/components/SectionHeading.vue b/perma_web/frontend/components/SectionHeading.vue
index 539f9e23d..6f3b281bc 100644
--- a/perma_web/frontend/components/SectionHeading.vue
+++ b/perma_web/frontend/components/SectionHeading.vue
@@ -22,5 +22,9 @@ const props = defineProps({
       </svg>
     </template>
     <h3 class="c-sectionHeading__name">{{ props.name }}</h3>
+    <div v-if="$slots.iconButton" class="c-sectionHeading__iconButton">
+      <slot name="iconButton">
+      </slot>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
index 94f629f84..4f7d0db9f 100644
--- a/perma_web/static/css/style-responsive.scss
+++ b/perma_web/static/css/style-responsive.scss
@@ -5872,6 +5872,8 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
 }
 
 .c-button--icon {
+  display: flex;
+  align-items: center;
   color: rgba(0, 0, 0, 0.4);
   font-size: 2rem;
   background: none;
@@ -5926,8 +5928,10 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
 }
 
 .c-sectionHeading {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
   align-items: center;
+  justify-content: start;
   gap: 6px;
   border-top: 2px solid $color-blue;
   padding-top: $grid;
@@ -5941,6 +5945,12 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   font-weight: 700;
 }
 
+.c-sectionHeading__iconButton {
+  margin-right: 4px;
+  grid-column: -1 / -1;
+  justify-self: end;
+}
+
 /* CSS transition classes automatically added/removed by Vue */
 .fade-enter-active,
 .fade-leave-active {

From 0f92cd76aeca45981471bb1b632ed3e571d2f01c Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 13:24:11 -0500
Subject: [PATCH 04/10] Remove upload testing UI

---
 perma_web/frontend/components/CaptureError.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/perma_web/frontend/components/CaptureError.vue b/perma_web/frontend/components/CaptureError.vue
index cdb40bece..647693749 100644
--- a/perma_web/frontend/components/CaptureError.vue
+++ b/perma_web/frontend/components/CaptureError.vue
@@ -51,7 +51,6 @@ defineExpose({
 <template>
 
     <div class="container cont-fixed">
-        <UpdateGUID v-if="showDevPlayground" />
         <div v-if="globalStore.captureErrorMessage" id="error-container">
             <p class="message-large">{{ globalStore.captureErrorMessage }} <span v-if="showLoginLink">
                     Please <a href='/login'>log in</a> to continue.

From 818d713d99ad926850aa80421229f6fa7c9a5ccc Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 13:24:27 -0500
Subject: [PATCH 05/10] Add additional UI for testing

---
 perma_web/frontend/components/CreateLink.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/perma_web/frontend/components/CreateLink.vue b/perma_web/frontend/components/CreateLink.vue
index 2ed1cda33..776947ea7 100644
--- a/perma_web/frontend/components/CreateLink.vue
+++ b/perma_web/frontend/components/CreateLink.vue
@@ -228,18 +228,30 @@ onBeforeUnmount(() => {
         </div><!-- cont-full-bleed cont-sm-fixed -->
     </div><!-- container cont-full-bleed -->
 
-    <PermaLinkDetails>
+    <PermaLinkDetails v-if="showDevPlayground">
         <template #leftColumn>
             <SectionHeading name="Link Batch History">
                 <template #iconButton>
                     <IconButton icon="chevron-down" iconFamily="none" :handleClick="() => { console.log('Delete Selected Folder') }" />
                 </template>
             </SectionHeading>
+            <SectionHeading name="Folders">
+                <template #iconButton>
+                    <IconButton icon="plus" name="New Folder" :handleClick="() => { console.log('New Folder') }"  />
+                    <IconButton icon="edit" name="Rename Selected Folder" :handleClick="() => { console.log('Rename Folder') }"  />
+                    <IconButton icon="trash" name="Delete Selected Folder" :handleClick="() => { console.log('Delete Selected Folder') }"  />
+                </template>
+            </SectionHeading>
         </template>
         <template #rightColumn>
-            <SectionHeading name="Another Journal Links" icon="organization" />
+            <SectionHeading name="Another Journal Links" icon="organization">
+                <template #iconButton>
+                    <IconButton icon="download-alt" name="Export Links" :handleClick="() => { console.log('Export Links') }"  />
+                </template>
+            </SectionHeading>
         </template>
     </PermaLinkDetails>
+
     <CaptureError ref="uploadDialogRef" />
 
     <CreateLinkBatch ref="batchDialogRef" />

From 8c0ac009b540bf1ed318376d45c2bc3a81cf5e8d Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 13:54:40 -0500
Subject: [PATCH 06/10] Adjust styles

---
 perma_web/frontend/components/IconButton.vue |  2 +-
 perma_web/static/css/style-responsive.scss   | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/perma_web/frontend/components/IconButton.vue b/perma_web/frontend/components/IconButton.vue
index 92beb6ba0..2b3d8c8d5 100644
--- a/perma_web/frontend/components/IconButton.vue
+++ b/perma_web/frontend/components/IconButton.vue
@@ -34,7 +34,7 @@ const isChevron = props.icon === "chevron-down" || props.icon === "chevron-up";
       props.iconFamily === 'fontAwesome' ? `icon-${props.icon}` : ''
     }`"
   >
-    <svg v-if="isChevron" aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="isChevron" class="c-button__chevron" aria-hidden="true" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path v-if="props.icon === 'chevron-down'" d="M6.88136 7L14 1.58065L12.5763 0L6.88136 4.26591L1.42373 0L0 1.58065L6.88136 7Z" fill="#2E76EE"/>
       <path v-if="props.icon === 'chevron-up'" d="M6.88136 0L14 5.41935L12.5763 7L6.88136 2.73409L1.42373 7L0 5.41935L6.88136 0Z" fill="#2E76EE"/>
     </svg>
diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
index 4f7d0db9f..fbc341d7a 100644
--- a/perma_web/static/css/style-responsive.scss
+++ b/perma_web/static/css/style-responsive.scss
@@ -5878,7 +5878,6 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   font-size: 2rem;
   background: none;
   border: none;
-  margin-inline: 0.5rem;
   padding: 0;
 
   &:hover, &:focus {
@@ -5886,6 +5885,14 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   }
 }
 
+.c-button--icon:not(:last-child) {
+  margin-inline-end: 1rem;
+}
+
+.c-button__chevron {
+  margin-inline: 1rem;
+}
+
 .c-button--link, .c-button--privateLink {
   padding: 0;
   background: none;
@@ -5946,7 +5953,6 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
 }
 
 .c-sectionHeading__iconButton {
-  margin-right: 4px;
   grid-column: -1 / -1;
   justify-self: end;
 }

From 62b751f0fc78013567755b56021807ac40134948 Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Tue, 13 Aug 2024 14:46:43 -0500
Subject: [PATCH 07/10] Add missing aria-hidden attribute

---
 perma_web/frontend/components/SectionHeading.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/perma_web/frontend/components/SectionHeading.vue b/perma_web/frontend/components/SectionHeading.vue
index 6f3b281bc..8e9320f62 100644
--- a/perma_web/frontend/components/SectionHeading.vue
+++ b/perma_web/frontend/components/SectionHeading.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 <template>
   <div class="c-sectionHeading">
     <template v-if="!!icon">
-      <svg v-if="icon === 'organization'" width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg v-if="icon === 'organization'" aria-hidden="true" width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="18" height="20" fill="white"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M4.73995 9.90178C4.39114 10.0982 4.03265 10.332 3.6354 10.6032C0.563971 12.6699 1.17438 18.8889 1.17438 18.8889H13.4504C13.4504 18.8889 14.0608 12.6699 10.9991 10.5938C10.6018 10.3226 10.2336 10.0888 9.89452 9.89243C11.2994 9.06012 12.2296 7.56383 12.2296 5.85245C12.2296 3.23394 10.0302 1.11108 7.31723 1.11108C4.6043 1.11108 2.40489 3.2433 2.40489 5.8618C2.40489 7.56383 3.33504 9.06012 4.73995 9.90178Z" fill="#2D76EE" stroke="white"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M8.10662 9.89243C7.75787 10.0888 7.39943 10.3226 7.00224 10.5938C3.93129 12.6699 4.5513 18.8889 4.5513 18.8889H16.8254C16.8254 18.8889 17.4357 12.6699 14.3745 10.5938C13.9773 10.3226 13.6091 10.0888 13.2701 9.89243C14.6748 9.06012 15.6048 7.56383 15.6048 5.85245C15.6048 3.23394 13.4057 1.11108 10.6932 1.11108C7.98068 1.11108 5.78161 3.23394 5.78161 5.85245C5.78161 7.55448 6.71162 9.05076 8.11631 9.89243H8.10662Z" fill="#2D76EE" stroke="white"/>

From 59926109be9907f62be6a9ee529ec92d0a7437ed Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Wed, 14 Aug 2024 09:18:10 -0500
Subject: [PATCH 08/10] Move components

---
 perma_web/frontend/components/App.vue         |  3 ++
 perma_web/frontend/components/CreateLink.vue  | 29 -------------
 .../frontend/components/PermaLinkDetails.vue  | 43 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/perma_web/frontend/components/App.vue b/perma_web/frontend/components/App.vue
index fe0d1030a..e2155c997 100644
--- a/perma_web/frontend/components/App.vue
+++ b/perma_web/frontend/components/App.vue
@@ -1,9 +1,11 @@
 <script setup>
 import CreateLink from './CreateLink.vue';
 import Toast from './Toast.vue';
+import PermaLinkDetails from './PermaLinkDetails.vue'
 import { onBeforeMount, watchEffect } from 'vue'
 import { getLinksRemainingStatus, getUserTypes, getUserOrganizations, getSponsoredFolders } from '../lib/store'
 import { globalStore } from '../stores/globalStore';
+import { showDevPlayground } from '../lib/consts'
 
 onBeforeMount(() => {
     globalStore.updateLinksRemaining(links_remaining)
@@ -26,4 +28,5 @@ watchEffect(() => {
 <template>
     <Toast />
     <CreateLink />
+    <PermaLinkDetails v-if="showDevPlayground" />
 </template>
\ No newline at end of file
diff --git a/perma_web/frontend/components/CreateLink.vue b/perma_web/frontend/components/CreateLink.vue
index 776947ea7..2137714e2 100644
--- a/perma_web/frontend/components/CreateLink.vue
+++ b/perma_web/frontend/components/CreateLink.vue
@@ -9,11 +9,7 @@ import LinkCount from './LinkCount.vue';
 import FolderSelect from './FolderSelect.vue';
 import { useStorage } from '@vueuse/core'
 import CreateLinkBatch from './CreateLinkBatch.vue';
-import PermaLinkDetails from './PermaLinkDetails.vue';
-import SectionHeading from './SectionHeading.vue';
 import { getErrorFromNestedObject, getErrorFromResponseOrStatus, getErrorResponse, folderError, defaultError } from "../lib/errors"
-import IconButton from './IconButton.vue'
-import { showDevPlayground } from '../lib/consts'
 import { isLoading, readyStates, isReady } from '../lib/store'
 
 const batchDialogRef = ref('')
@@ -227,31 +223,6 @@ onBeforeUnmount(() => {
             </form><!--/#linker-->
         </div><!-- cont-full-bleed cont-sm-fixed -->
     </div><!-- container cont-full-bleed -->
-
-    <PermaLinkDetails v-if="showDevPlayground">
-        <template #leftColumn>
-            <SectionHeading name="Link Batch History">
-                <template #iconButton>
-                    <IconButton icon="chevron-down" iconFamily="none" :handleClick="() => { console.log('Delete Selected Folder') }" />
-                </template>
-            </SectionHeading>
-            <SectionHeading name="Folders">
-                <template #iconButton>
-                    <IconButton icon="plus" name="New Folder" :handleClick="() => { console.log('New Folder') }"  />
-                    <IconButton icon="edit" name="Rename Selected Folder" :handleClick="() => { console.log('Rename Folder') }"  />
-                    <IconButton icon="trash" name="Delete Selected Folder" :handleClick="() => { console.log('Delete Selected Folder') }"  />
-                </template>
-            </SectionHeading>
-        </template>
-        <template #rightColumn>
-            <SectionHeading name="Another Journal Links" icon="organization">
-                <template #iconButton>
-                    <IconButton icon="download-alt" name="Export Links" :handleClick="() => { console.log('Export Links') }"  />
-                </template>
-            </SectionHeading>
-        </template>
-    </PermaLinkDetails>
-
     <CaptureError ref="uploadDialogRef" />
 
     <CreateLinkBatch ref="batchDialogRef" />
diff --git a/perma_web/frontend/components/PermaLinkDetails.vue b/perma_web/frontend/components/PermaLinkDetails.vue
index 986cae65c..080ee4431 100644
--- a/perma_web/frontend/components/PermaLinkDetails.vue
+++ b/perma_web/frontend/components/PermaLinkDetails.vue
@@ -1,14 +1,53 @@
 <script setup>
+  import SectionHeading from './SectionHeading.vue'
+  import IconButton from './IconButton.vue'
 </script>
 
 <template>
   <div class="container cont-fixed manage-links">
     <div class="row">
       <div class="col-md-3">
-        <slot name="leftColumn"></slot>
+        <SectionHeading name="Link Batch History">
+          <template #iconButton>
+            <IconButton
+              icon="chevron-down"
+              iconFamily="none"
+              :handleClick="() => {console.log('Expand Link Batch History');}"
+            />
+          </template>
+        </SectionHeading>
+        <SectionHeading name="Folders">
+          <template #iconButton>
+            <IconButton
+              icon="plus"
+              name="New Folder"
+              :handleClick="() => {console.log('New Folder');}"
+
+            />
+            <IconButton
+              icon="edit"
+              name="Rename Selected Folder"
+              :handleClick="() => {console.log('Rename Selected Folder');}"
+            />
+            <IconButton
+              icon="trash"
+              name="Delete Selected Folder"
+              :handleClick="() => {console.log('Delete Selected Folder');}"
+            />
+          </template>
+        </SectionHeading>
       </div>
       <div class="col-md-9">
-        <slot name="rightColumn"></slot>
+        <SectionHeading name="Another Journal Links" icon="organization">
+          <template #iconButton>
+            <IconButton
+              icon="download-alt"
+              name="Export Links"
+              :handleClick="() => {console.log('Export Links');}"
+
+            />
+          </template>
+        </SectionHeading>
       </div>
     </div>
   </div>

From 3df12e55ff0b3d314cfc1bd1bdd7bc54376172cc Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Wed, 14 Aug 2024 09:43:21 -0500
Subject: [PATCH 09/10] Translate px size to rems

---
 perma_web/static/css/style-responsive.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
index fbc341d7a..829362378 100644
--- a/perma_web/static/css/style-responsive.scss
+++ b/perma_web/static/css/style-responsive.scss
@@ -5939,14 +5939,14 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   grid-template-columns: auto auto 1fr;
   align-items: center;
   justify-content: start;
-  gap: 6px;
+  gap: 0.6rem;
   border-top: 2px solid $color-blue;
   padding-top: $grid;
   padding-bottom: $grid * 2;
 }
 
 .c-sectionHeading__name {
-  font-size: 22px;
+  font-size: 2.2rem;
   color: $color-blue;
   font-family: $font-hed-alt;
   font-weight: 700;

From 182a9c98c730cb190a32e2346f561910b993f76d Mon Sep 17 00:00:00 2001
From: tinykite <dakota@tinykitelab.com>
Date: Wed, 14 Aug 2024 09:44:58 -0500
Subject: [PATCH 10/10] Refactor legacy css into logical properties

---
 perma_web/static/css/style-responsive.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/perma_web/static/css/style-responsive.scss b/perma_web/static/css/style-responsive.scss
index 829362378..02283b386 100644
--- a/perma_web/static/css/style-responsive.scss
+++ b/perma_web/static/css/style-responsive.scss
@@ -5940,9 +5940,9 @@ Example: calc(4rem / 16) is equal to 4px or 0.25rem */
   align-items: center;
   justify-content: start;
   gap: 0.6rem;
-  border-top: 2px solid $color-blue;
-  padding-top: $grid;
-  padding-bottom: $grid * 2;
+  border-block-start: 2px solid $color-blue;
+  padding-block-start: $grid;
+  padding-block-end: $grid * 2;
 }
 
 .c-sectionHeading__name {