move and rename module

src/mail/email_viewer.tcss

@@ -0,0 +1,305 @@
+/* Basic stylesheet for the Textual Email Viewer App */
+
+
+#main_content, .list_view {
+  scrollbar-size: 1 1;
+  border: round rgb(117, 106, 129);
+  height: 1fr;
+}
+
+#sidebar {
+  width: 1fr
+}
+
+.list_view {
+  height: 3;
+}
+
+#main_content {
+  width: 2fr;
+
+}
+
+
+.envelope-selected {
+  tint: $accent 20%; 
+}
+
+#sidebar:focus-within {
+  background: $panel;
+
+  .list_view:blur {
+    height: 3;
+  }
+  .list_view:focus {
+    height: 2fr;
+  }
+}
+
+
+#envelopes_list {
+  height: 2fr;
+}
+
+#main_content:focus, .list_view:focus {
+  border: round $secondary;
+  background: rgb(55, 53, 57);
+  border-title-style: bold;
+}
+
+Label#task_prompt {
+  padding: 1;
+  color: rgb(128,128,128);
+}
+
+Label#task_prompt_label {
+  padding: 1;
+  color: rgb(255, 216, 102);
+}
+
+Label#message_label {
+  padding: 1;
+}
+
+StatusTitle {
+  dock: top;
+  width: 100%;
+  height: 1;
+  color: $text;
+  background: rgb(64, 62, 65);
+  content-align: center middle;
+}
+
+EnvelopeHeader {
+  dock: top;
+  width: 100%;
+  max-height: 2;
+  tint: $primary 10%;
+}
+
+Markdown {
+  padding: 1 2;
+}
+
+/* =====================================================
+   NEW EnvelopeListItem and GroupHeader styles
+   ===================================================== */
+
+/* EnvelopeListItem - the main envelope display widget */
+EnvelopeListItem {
+  height: auto;
+  width: 1fr;
+  padding: 0;
+}
+
+EnvelopeListItem .envelope-content {
+  height: auto;
+  width: 1fr;
+}
+
+EnvelopeListItem .envelope-row-1 {
+  height: 1;
+  width: 1fr;
+}
+
+EnvelopeListItem .envelope-row-2 {
+  height: 1;
+  width: 1fr;
+}
+
+EnvelopeListItem .envelope-row-3 {
+  height: 1;
+  width: 1fr;
+}
+
+EnvelopeListItem .status-icon {
+  width: 3;
+  padding: 0 1 0 0;
+  color: $text-muted;
+}
+
+EnvelopeListItem .status-icon.unread {
+  color: $accent;
+}
+
+EnvelopeListItem .checkbox {
+  width: 2;
+  padding: 0 1 0 0;
+}
+
+EnvelopeListItem .sender-name {
+  width: 1fr;
+}
+
+EnvelopeListItem .message-datetime {
+  width: auto;
+  padding: 0 1;
+  color: $secondary;
+}
+
+EnvelopeListItem .email-subject {
+  width: 1fr;
+  padding: 0 4;
+}
+
+EnvelopeListItem .email-preview {
+  width: 1fr;
+  padding: 0 4;
+  color: $text-muted;
+}
+
+/* Unread message styling */
+EnvelopeListItem.unread .sender-name {
+  text-style: bold;
+}
+
+EnvelopeListItem.unread .email-subject {
+  text-style: bold;
+}
+
+/* Selected message styling */
+EnvelopeListItem.selected {
+  tint: $accent 20%;
+}
+
+/* GroupHeader - date group separator */
+GroupHeader {
+  height: 1;
+  width: 1fr;
+  background: rgb(64, 62, 65);
+}
+
+GroupHeader .group-header-label {
+  color: rgb(160, 160, 160);
+  text-style: bold;
+  padding: 0 1;
+  width: 1fr;
+}
+
+/* =====================================================
+   END NEW styles
+   ===================================================== */
+
+/* Legacy styles (keeping for backward compatibility) */
+.email_subject {
+  width: 1fr;
+  padding: 0 2;
+  text-style: bold;
+}
+
+.sender_name {
+  tint: gray 30%;
+}
+
+.message_date {
+  padding: 0 2;
+  color: $secondary;
+}
+
+.header_key {
+  tint: gray 20%;
+  min-width: 10;
+  text-style:bold;
+}
+
+.header_value {
+  padding:0 1 0 0;
+  height: auto;
+  width: auto;
+}
+
+.modal_screen {
+  align: center middle;
+  margin: 1;
+  padding: 2;
+  border: round $border;
+  background: $panel;
+  width: auto;
+  height: auto;
+}
+
+
+ 
+#envelopes_list {
+  ListItem:odd {
+    background: rgb(45, 45, 46);
+  }
+  ListItem:even {
+    background: rgb(50, 50, 56);
+  }
+  
+  & > ListItem {
+    &.-highlight, .selection {
+      color: $block-cursor-blurred-foreground;
+      background: $block-cursor-blurred-background;
+      text-style: $block-cursor-blurred-text-style;
+    }
+  }
+}
+
+.envelope_item_row {
+  height: auto;
+  width: 1fr;
+  
+  .envelope_header_row, .envelope_subject_row {
+    height: auto;
+  } 
+}
+
+
+
+.x-list {
+    tint: $accent 20%;
+}
+
+#open_message_container {
+  border: panel $border; 
+  dock: right;
+  width: 25%;
+  min-width: 60;
+  padding: 0 1;
+  height: 100%;
+
+  Input {
+    width: 1fr;
+  }
+  Label, Button {
+    width: auto;
+  }
+}
+
+Label.group_header {
+  color: rgb(140, 140, 140);
+  text-style: bold;
+  background: rgb(64, 62, 65);
+  width: 100%;
+  padding: 0 1;
+}
+
+#plaintext_content {
+  padding: 1 2;
+  height: auto;
+  width: 100%;
+}
+
+#html_content {
+  padding: 1 2;
+  height: auto;
+  width: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+#markdown_content {
+  padding: 1 2;
+}
+
+ContentContainer {
+  width: 100%;
+  height: 1fr;
+}
+.checkbox {
+  padding-right: 1;
+}