Add webmail email management templates and storage utilities

- Implemented email listing template with read/unread and star functionality.
- Created empty state template for webmail when no emails are present.
- Developed folder navigation template for managing email folders.
- Added email preview template for displaying selected email details.
- Introduced storage utilities for managing email files, including creation, reading, moving, and deletion.
- Defined constants for storage paths and error messages related to file operations.

1 files changed, 246 insertions, 0 deletions

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index 2f948dc..bc7f853 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -364,3 +364,249 @@ input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px var(--color-surface-800) inset;
   transition: background-color 5000s ease-in-out 0s;
 }
+
+.webmail-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  height: 2rem;
+}
+
+.webmail-btn-primary {
+  background: rgba(99, 102, 241, 0.8);
+  color: white;
+  border: 1px solid rgba(129, 140, 248, 0.2);
+}
+
+.webmail-btn-primary:hover {
+  background: var(--color-accent-500);
+}
+
+.webmail-btn-ghost {
+  background: transparent;
+  color: #a1a1aa;
+  border: 1px solid transparent;
+}
+
+.webmail-btn-ghost:hover {
+  color: #e4e4e7;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.webmail-btn-danger {
+  background: transparent;
+  color: #a1a1aa;
+  border: 1px solid transparent;
+}
+
+.webmail-btn-danger:hover {
+  color: var(--color-red-400);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.webmail-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  color: #71717a;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+
+.webmail-btn-icon:hover {
+  color: #e4e4e7;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.webmail-btn-icon.danger:hover {
+  color: var(--color-red-400);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.webmail-compose-field {
+  width: 100%;
+  background: transparent;
+  color: #e4e4e7;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.webmail-compose-field::placeholder {
+  color: #52525b;
+}
+
+.webmail-tag-input {
+  position: relative;
+}
+
+.webmail-tag-input .tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.webmail-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.375rem;
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--color-accent-400);
+  font-size: 0.75rem;
+  line-height: 20px;
+  white-space: nowrap;
+  max-width: 200px;
+}
+
+.webmail-tag .remove {
+  display: inline-flex;
+  cursor: pointer;
+  color: rgba(129, 140, 248, 0.6);
+  margin-left: 0.125rem;
+}
+
+.webmail-tag .remove:hover {
+  color: var(--color-red-400);
+}
+
+.webmail-autocomplete {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 60;
+  max-height: 12rem;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--color-surface-800);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+  margin-top: 0.25rem;
+}
+
+.webmail-autocomplete.visible {
+  display: block;
+}
+
+.webmail-autocomplete-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.webmail-autocomplete-option:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.webmail-editor {
+  min-height: 200px;
+  padding: 1.5rem;
+  color: #d4d4d8;
+  font-size: 0.875rem;
+  line-height: 1.625;
+  outline: none;
+}
+
+.webmail-editor:empty::before {
+  content: attr(data-placeholder);
+  color: #52525b;
+}
+
+.webmail-editor p {
+  margin-bottom: 0.5rem;
+}
+
+.webmail-editor b,
+.webmail-editor strong {
+  font-weight: 600;
+}
+
+.webmail-editor i,
+.webmail-editor em {
+  font-style: italic;
+}
+
+.webmail-editor u {
+  text-decoration: underline;
+}
+
+.webmail-editor ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.webmail-editor ol {
+  list-style: decimal;
+  padding-left: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.webmail-editor blockquote {
+  border-left: 3px solid rgba(99, 102, 241, 0.3);
+  padding-left: 1rem;
+  margin-left: 0;
+  color: #a1a1aa;
+  margin-bottom: 0.5rem;
+}
+
+.webmail-editor a {
+  color: var(--color-accent-400);
+  text-decoration: underline;
+}
+
+.webmail-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.webmail-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.25rem;
+  color: #71717a;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all 0.1s ease;
+}
+
+.webmail-toolbar button:hover {
+  color: #e4e4e7;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.webmail-toolbar button.active {
+  color: var(--color-accent-400);
+  background: rgba(99, 102, 241, 0.15);
+}
+
+.webmail-toolbar .separator {
+  width: 1px;
+  height: 1rem;
+  background: rgba(255, 255, 255, 0.06);
+  margin: 0 0.25rem;
+}