Add CORS headers and update UI for enhanced user profile handling.

- Added CORS support in server responses for cross-origin requests (`Access-Control-Allow-Origin`, etc.).
- Improved header panel behavior with a sticky position and refined CSS styling.
- Integrated profile data fetching (Kind 0 metadata) for user personalization.
- Enhanced login functionality to support dynamic profile display based on fetched metadata.
- Updated `index.html` to include Tailwind CSS for better design consistency.

app/web/src/styles.css

@@ -9,7 +9,7 @@ body {
   background: #f9f9f9;
   padding: 30px;
   border-radius: 8px;
-  margin-top: 80px; /* Space for the header panel */
+  margin-top: 20px; /* Reduced space since header is now sticky */
 }
 
 .form-group {
@@ -73,32 +73,100 @@ button:hover {
 }
 
 .header-panel {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   background-color: #f8f9fa;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   z-index: 1000;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
 }
 
 .header-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px;
+  height: 100%;
+  padding: 0 0 0 12px;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+}
+
+.header-center {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
 }
 
 .header-logo {
-  height: 40px;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  width: auto;
+  border-radius: 0;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.user-avatar {
   width: 40px;
-  border-radius: 4px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid white;
+  margin-right: 10px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
 }
 
 .user-info {
-  flex-grow: 1;
-  padding-left: 20px;
   font-weight: bold;
+  font-size: 1.2em;
+  text-align: left;
+}
+
+.user-name {
+  font-weight: bold;
+  font-size: 1em;
+  display: block;
+}
+
+.profile-banner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0.7;
 }
 
 .logout-button {
@@ -111,12 +179,14 @@ button:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 100%;
+  margin-left: 10px;
   margin-right: 0;
+  flex-shrink: 0;
 }
 
 .logout-button:hover {
-  background: rgba(108, 117, 125, 0.1);
+  background: transparent;
   color: #343a40;
 }