From 9090a07aa546254b6e2d497f0d65d6712c266f3c Mon Sep 17 00:00:00 2001
From: Chip Wasson <chip@wasson.io>
Date: Tue, 1 Oct 2024 18:18:39 -0600
Subject: [PATCH] Adjust junk drawer styles

---
 src/junk-drawer/junk-drawer.controller.ts |  7 +++
 views/junk-drawer/upload-result.hbs       | 15 ------
 views/junk-drawer/upload.hbs              | 65 +++++++++++++++--------
 views/junk-drawer/view.hbs                | 51 +++++++++++++-----
 4 files changed, 87 insertions(+), 51 deletions(-)
 delete mode 100644 views/junk-drawer/upload-result.hbs
diff --git a/src/junk-drawer/junk-drawer.controller.ts b/src/junk-drawer/junk-drawer.controller.ts
index 336664c..07b935b 100644
--- a/src/junk-drawer/junk-drawer.controller.ts
+++ b/src/junk-drawer/junk-drawer.controller.ts
@@ -40,6 +40,13 @@ export class JunkDrawerController {
   @Render('junk-drawer/view')
   async viewJunkDrawer(@Param('slug') slug: string): Promise<any> {
     const metadata = await this.junkDrawerService.getJunkDrawerMetadata(slug);
+    if (!metadata) {
+      return { error: 'File not found or expired' };
+    }
+    metadata.items = metadata.items.map((item) => ({
+      ...item,
+      isImage: item.mimetype.startsWith('image/'),
+    }));
     return { ...metadata };
   }
 
diff --git a/views/junk-drawer/upload-result.hbs b/views/junk-drawer/upload-result.hbs
deleted file mode 100644
index b774f1d..0000000
--- a/views/junk-drawer/upload-result.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<div>
-  <h1>Upload Result</h1>
-  <p>File uploaded successfully.</p>
-  <p>{{description}}</p>
-  <p>Right-click copy: <a href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
-  {{#if items}}
-    <p>Files:</p>
-    <ul>
-      {{#each items}}
-        <li><a target="_blank" href='/junk-drawer/{{../slug}}/{{filename}}'>{{filename}}</a></li>
-      {{/each}}
-    </ul>
-  {{/if}}
-  <p><a href='/junk-drawer'>Upload another file</a></p>
-</div>
\ No newline at end of file
diff --git a/views/junk-drawer/upload.hbs b/views/junk-drawer/upload.hbs
index 9ac7d36..8c889de 100644
--- a/views/junk-drawer/upload.hbs
+++ b/views/junk-drawer/upload.hbs
@@ -1,22 +1,43 @@
-<form method='post' action='/junk-drawer/upload' enctype='multipart/form-data'>
-  <div>
-    <label for='files'>Choose files to upload</label>
-    <input type='file' id='files' name='files' multiple />
-  </div>
-  <div>
-    <label for='private-ish'>Private-ish</label>
-    <input type='checkbox' id='private-ish' name='private-ish' />
-  </div>
-  <div style='display:flex; flex-direction:column;'>
-    <label for='description'>Description</label>
-    <textarea
-      type='text'
-      id='description'
-      name='description'
-      rows='4'
-    ></textarea>
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
\ No newline at end of file
+<html>
+
+  <head>
+    <meta charset='utf-8' />
+    <title>Junk Drawer</title>
+    <script src='https://cdn.tailwindcss.com'></script>
+  </head>
+  <body>
+
+    <form
+      method='post'
+      action='/junk-drawer/upload'
+      enctype='multipart/form-data'
+    >
+      <div>
+        <label for='files'>Choose files to upload</label>
+        <input type='file' id='files' name='files' multiple />
+      </div>
+      <div>
+        <label
+          class='cursor-help'
+          title='Append a random-ish string to the ID to make it harder to find via enumeration'
+          for='private-ish'
+        >Private-ish</label>
+        <input type='checkbox' id='private-ish' name='private-ish' />
+      </div>
+      <div class='flex flex-col'>
+        <label for='description'>Description:</label>
+        <textarea
+          type='text'
+          id='description'
+          name='description'
+          rows='4'
+          autofocus
+          class='border-2 rounded-md border-slate-800 border-solid p-1'
+        ></textarea>
+      </div>
+      <div>
+        <button class='border-2 rounded-md border-slate-800 p-1'>Submit</button>
+      </div>
+    </form>
+  </body>
+</html>
\ No newline at end of file
diff --git a/views/junk-drawer/view.hbs b/views/junk-drawer/view.hbs
index eff090f..f83a30b 100644
--- a/views/junk-drawer/view.hbs
+++ b/views/junk-drawer/view.hbs
@@ -1,16 +1,39 @@
-<div>
-  <h1>Junk Drawer Item</h1>
-  <p>The junk drawer item was uploaded {{lastModified}}</p>
-  <h2>Description</h2>
-  <p>{{description}}</p>
-  <p>Right-click copy: <a href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
-  {{#if items}}
-    <p>Files:</p>
-    <ul>
+<html>
+
+</html>
+
+<head>
+  <meta charset='utf-8' />
+  <title>Junk Drawer</title>
+  <script src='https://cdn.tailwindcss.com'></script>
+</head>
+
+<body>
+  <div>
+    <h1 class="text-xl">Junk Drawer Item</h1>
+    <p>The junk drawer item was uploaded {{lastModified}}</p>
+    <h2>Description</h2>
+    <p class="bg-slate-100 px-2 py-4">{{description}}</p>
+    <p>Right-click copy: <a class="text-blue-500 underline" href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
+    {{#if items}}
+    <p class="text-lg">Files:</p>
+    <div class="list-disc list-inside ml-1">
       {{#each items}}
-        <li><a href='/junk-drawer/{{../slug}}/{{filename}}'>{{filename}}</a></li>
+        <div>
+          <a target="_blank" class="text-emerald-600" href='/junk-drawer/{{../slug}}/{{filename}}'>
+            <p>
+              {{filename}}
+            </p>
+            {{#if isImage}}
+              <img height="150" width="150" src='/junk-drawer/{{../slug}}/{{filename}}' alt='{{filename}}' />
+            {{/if}}
+          </a>
+        </div>
       {{/each}}
-    </ul>
-  {{/if}}
-  <p><a href='/junk-drawer'>Upload another file</a></p>
-</div>
\ No newline at end of file
+    </div>
+    {{/if}}
+    <p><a class="text-blue-500 underline" href='/junk-drawer'>Upload another file</a></p>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
